WEB TECHNOLOGY (KCS-502)
Unit I (Web Development Strategies, HTML & XML)
Part 2 (HTML)
Introduction to HTML
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is a markup language
A markup language is a set of markup tags
The tags describe document content
HTML documents contain HTML tags and plain text
HTML documents are also called web pages
Eg.
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The <html> element is root element of HTML page. Document begins with <html> and ends with </html>.
The <head> element contains meta information about the document.
The <title> element specifies a title for the document.
The <body> element contains the visible page content.
HTML Tags
HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a forward slash inserted before the tag name
The HTML <head> Element
The HTML <head> element has nothing to do with HTML headings.
The <head> element is a container for metadata. HTML metadata is data about HTML document. Metadata is
not displayed.
The <head> element is placed between the <html> tag and the <body> tag:
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
Eg. <h1>This is heading 1</h1>
<h2>This is heading 2</h2>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Eg.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Elements
An HTML element usually consists of a start tag and end tag, with the content inserted in between:
<tagname>Content goes here...</tagname>
Eg.
<p>My first paragraph.</p>
HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
Eg.
<p title="I'm a tooltip”> This is a paragraph. </p> // The value of attribute is displayed as tooltip when
you you mouse over the paragraph
HTML Links
HTML links are defined with the <a> tag:
<a href="url">link text</a>
Eg.
<a href="[Link] is a link</a>
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:
Eg.
img src="[Link]" alt="[Link]" width="104" height="142">
The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow
connection, an error in the src attribute, or if the user uses a screen reader).
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
The <hr> element is used to separate content (or define a change) in an HTML page:
Eg.
<p>This is some text.</p>
<hr>
This is some other text
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:
Eg.
<p>This is<br>a paragraph<br>with line breaks.</p>
HTML Styles
The HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
1. HTML Background Color : The background-color property defines the background color for HTML element.
Eg.
<body style="background-color:powderblue;"> </body>
2. HTML Text Color : The color property defines the text color for an HTML element:
Eg.
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
3. HTML Fonts: The font-family property defines the font to be used for an HTML element:
Eg.
<p style="font-family:courier;">This is a paragraph.</p>
4. HTML Text Size: The font-size property defines the text size for an HTML element:
Eg.
<h1 style="font-size:300%;">This is a heading</h1>
5. HTML Text Alignment: The text-align property defines the horizontal text alignment for an HTML element:
Eg.
<b style="text-align:center;">Centered Heading</b>
HTML Text Formatting Elements
HTML also defines special elements for defining text with a special meaning.
Formatting elements were designed to display special types of text:
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
Eg.
<b>This text is bold</b>
HTML Comment Tags
We can add comments to your HTML source by using the following syntax:
<!- - Write your comments here - ->
HTML Lists
1. Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
The type attribute of the <ol> tag, defines the type of the list item marker:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
Eg.
<html>
<head>
<title>List</title>
</head>
<body>
<ol start ="1" type="1">
<li> ABC
<ol start="1" type="a">
<li>AB
<ol start ="5" type= "a">
<li>A</li>
<li>B</li>
</ol>
</li>
<li>CD
<ol start ="1" type= "a">
<li>C</li>
<li>D</li>
</ol>
</li>
</ol>
<li>CDB
<ol start ="1" type= "a">
<li>CD</li>
<li>DB</li>
</ol>
</li>
</ol>
</body>
</html>
2. Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default.
Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
eg.
<html>
<head>
<title>List</title>
</head>
<body>
<ul type="square">
<li> ABC
<ul type="circle">
<li>AB</li>
</ul>
</li>
</ul>
<ul type= "circle">
<li>BCD
<ul type= "disc">
<li>D</li>
</ul>
<ul type="square">
<li>BC</li>
</ul>
<ul type= "cirlce">
<li>B</li>
<li>C</li>
</ul>
</li>
</ul>
</body>
</html>
3. Definition List
To display content as keyterm and its definition
Eg.
<html>
<head>
<title>List</title>
</head>
<body>
<dl>
<dt> Computer : </dt>
<dd> It is an electronic device </dd>
<dt> Java : </dt>
<dd> It is a programming language </dd>
</dl>
</body>
</html>
HTML Tables
An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table
headings are bold and centered.
A table data/cell is defined with the <td> tag.
Eg.
<html>
<head>
<title> table</title>
</head>
<body>
<table border="1">
<caption> info </caption>
<tr>
<th> A </th>
<th> B </th>
<th> C </th>
</tr>
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
<tr>
<td> 4 </td>
<td> 5 </td>
<td> 6 </td>
</tr>
</table>
</body>
</html>
Attributes
1. Cell padding specifies the space between the cell content and its borders.
2. To left-align the table headings, use the CSS text-align property
3. Border spacing specifies the space between the cells. border-spacing
4. To make a cell span more than one column, use the colspan attribute:
5. To make a cell span more than one row, use the rowspan attribute
6. The border is set using the CSS border property
7. Width, height, Background , bgcolor
8. Cell spacing – space between 2 cells.
Eg.
<html>
<head>
<title> table </title>
</head>
<body>
<table border=”6” bordercolor="red" height="60%" width="40%" cellpadding="20%" cellspacing="5" >
<caption> Details </caption>
<tr>
<td> A </td>
<td colspan="2"> B </td>
<td colspan="2"> C </td>
</tr>
<tr>
<td rowspan="2" colspan="2"> D </td>
<td rowspan="2" colspan="2"> E </td>
<td> F </td>
</tr>
<tr>
<td> G </td>
</tr>
<tr>
<td colspan="2"> H </td>
<td colspan="3"> I </td>
</tr>
<tr>
<td rowspan="2"> J </td>
<td> K </td>
<td rowspan="2" colspan="2"> M </td>
<td rowspan="2"> N </td>
</tr>
<tr>
<td> L </td>
</tr>
</table>
</body>
</html>
FRAMES SET
HTML frames allows us to display no. of web pages.
The <frameset> element holds one or more <frame> elements.
Each <frame> element can hold a separate document.
The <frameset> element specifies how many columns or rows there will be in the frameset, and how much
percentage/pixels of space will occupy each of them.
Eg. 1.
<Html>
<Head>
<Title> Frameset</Title>
</Head>
<Body> </Body>
<Frameset cols = "30 %, 40%, 30 %">
<Frameset rows = "50%, 50 %">
<Frame>
<Frame>
</Frameset>
<Frameset rows="50 %,*">
<Frame>
<Frame>
</Frameset>
<Frameset rows = "50 %,*">
<Frame>
<Frame>
</Frameset>
</Frameset>
</Html>
Eg 2.
<Html>
<Head>
<Title> Frames</Title>
</Head>
<Frameset cols = "50%,50%">
<Frameset rows = "20%,20%,20%,20%,20%">
<Frame>
<Frameset cols ="50%,*">
<Frame>
<Frame>
</Frameset>
<Frame>
<Frame>
<Frameset cols = "50%,*">
<Frame>
<Frame>
</Frameset>
</Frameset>
<Frameset rows = "35%,50%,15%">
<Frameset cols ="50%,*">
<Frame>
<Frameset rows = “80%,*”>
<Frame>
<Frame>
</Frameset>
</Frameset>
<Frameset cols = "70%,*">
<Frame>
<Frame>
</Frameset>
<Frame>
</Frameset>
</Frameset>
</Html>
Frame Naviagtion
<Html>
<Head>
<Title> Frameset</Title>
</Head>
<Frameset cols = "20 %,*">
<Frame src=”[Link]”>
<Frame src=”[Link]”>
</Frameset>
</Html>
[Link] [Link]
<Html> <Html>
<Head> <Head>
<Title>ABC</Title> <Title>PQR</Title>
</Head> </Head>
<Body> <Body>
HELLO ALL….. Welcome here…..
</Body> </Body>
</Html> </Html>
HTML <iframe> Tag
inline frame
<iframe src=“[Link]> </iframe>
The <form> Element
The HTML <form> element defines a form that is used to collect user input:
<form>
form elements
</form>
Form attributes are as follows-
1. The Action Attribute
The action attribute defines the action to be performed when the form is submitted.
<form action="/action_page.php">
2. The Method Attribute
The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data:
<form action="/action_page.php" method="get/post"> // any 1 can be used
When to Use GET? When to Use POST?
When the default method GET is used, the submitted Always use POST if the form data contains
form data will be visible in the page address field. sensitive or personal information.
GET must NOT be used when sending sensitive The POST method does not display the
information! submitted form data in the page address field.
3. The autocomplete Attribute
Controls whether the browser should provide autofill suggestions for form fields. Can be set to on or off.
<form autocomplete="off">
<!-- Form elements -->
</form>
4. The nameAttribute
name: Provides a name for the form, which can be useful for referencing it in JavaScript or for server-side
processing.
<form name="myForm">
<!-- Form elements -->
</form>
5. The target Attribute
Specifies where to display the response after form submission (e.g., a new window, the same frame).
Common values include _blank, _self, _parent, _top, or a specific framename.
<form action = “ …… " method="post" target="_blank">
<!-- Form elements -->
</form>
6. The novalidate Attribute
novalidate: A boolean attribute that, when present, prevents the browser from performing its default form validation.
<form action=“ ….” novalidate>
<!-- Form elements -->
</form>
Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit
buttons, etc.
1. The < label> Element
• Defines a label for a form element
• improves accessibility by associating text with an input control.
• The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them
together.
Eg. <label for="cars">Choose a car:</label>
<select id="cars">
2. The <select> Element
The <select> element defines a drop-down list.
The <option> elements defines an option that can be selected.
By default, first item in drop-down list is selected. To define a pre-selected option, use selected attribute.
Eg.
<Select>
<option>A</option>
<option>B</option>
<option>C/option>
</Select>
3. The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):
Eg.
<textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea>
4. The <button> Element
The <button> element defines a clickable button.
5. The < datalist> Element
6. The <output> Element
7. The <input> Element
The <input> element can be displayed in several ways, depending on the type attribute. Eg.
Type Description
<input type="text"> Defines a one-line text input field
<input type="radio"> Defines a radio button (for selecting one of many choices)
<input type="submit"> Defines a submit button (for submitting the form)
<input type="password"> Defines a password field
<input type="reset"> Defines a reset button that reset all form values to default values
<input type="checkbox"> Defines checkbox
<input type="button"> Defines a button
Example-
<html>
<head>
<title> FORM </title>
</head>
<body>
<form action= "[Link]" method = "post">
<fieldset>
<legend>Personal info</legend>
<label for="Name"> Name:</label>
<input type="text"> <br>
<label for="Age">Age:</label>
<input type="text"> <br>
<label for="DOB">DOB:</label> <br>
<label for="Day">Day</label>
<Select>
<option>Select</option>
<option>1</option>
<option>2</option>
:
<option>31</option>
</Select>
<label for=“Month">Month</label>
<Select>
<option>Jan
<option>Feb
:
<option Selected>Dec // Dec will be auto. Selected
</Select>
<label for=“Year">Year</label>
<Select>
<option>Select</option>
<option>1982</option>
:
<option>2025</option>
</Select>
</fieldset>
<fieldset> <legend>Personal info</legend>
<label for=“Gender">Gender</label> <br>
<input type="Radio" name="a" checked> Male <br>
<input type="Radio" name="a"> Female <br>
Hobbies <br>
<input type="Checkbox"> Cricket <br>
<input type="Checkbox"> Football <br>
Feedback <br>
<textarea rows ="10" cols = "20"> </textarea>
<br>
<input type="submit" value="SUBMIT">
<input type="reset" value="CLEAR"> <br><br><br>
SOME OTHER CONTROLS <br><br>
<input type="password" maxlength="10"> <br>
<input type="button" value="click"> <br><br>
<button>
<img src="[Link]" width="23" height="45">
</button>
</fieldset>
</form> </html>
DHTML
Event Handlers
Event Occurs when...
onabort a user aborts page loading
onclick a user clicks on an object
ondblclick a user double-clicks on an object
onfocus a user makes an object active
onkeydown a keyboard key is on its way down
onkeypress a keyboard key is pressed
onkeyup a keyboard key is released
onload a page is finished loading
onmousedown a user presses a mouse-button
onmousemove a cursor moves on an object
onmouseover a cursor moves over an object
onmouseout a cursor moves off an object
onmouseup a user releases a mouse-button
Eg1 . A header changes when the user clicks some text
<html>
<body>
<h1 onclick="[Link]='Ooops!'">Click on this text</h1>
</body>
</html>
Eg2. how to change the style of an element using the this object.
<html>
<body>
<h1 onclick="[Link] = 'red' "> Click Me! </h1>
<p>If you click the header above, it turns red.</p>
</body>
</html>
Eg3. How to change the style of an element using getElementById.
<html>
<body>
<h1 onclick = "[Link]('p1').[Link] = 'red' ">Click Me! </h1>
<p id="p1"> If you click the header above, I turn red. </p>
</body>
</html>
Eg4. How to change the color of an element when the cursor moves over it.
<html>
<body>
<h1 onmouseover = "[Link] = 'red'" onmouseout="[Link] = 'black'"> Mouse over this text </h1>
</body>
</html>