HTML
Uploaded by
Sabyasachi MoitraHTML
Uploaded by
Sabyasachi MoitraHTML
Sabyasachi Moitra
[email protected]
What is HTML?
HyperText Markup Language.
Invented by physicist Tim Berners-Lee in the year 1990.
It is the standard markup language for creating web pages and web
applications.
The markup (symbols/codes inserted in the html file) tells the web
browser how to display a web page’s words and images for user.
Filename extension: .html/.htm
HTML editors: Notepad (text editor), Adobe Dreamweaver (WYSIWYG
editor), etc.
Latest version: HTML5.
WEB TECHNOLOGY 2
What are HTML Elements?
HTML elements are the basic building-blocks of web pages.
HTML is written in the form of HTML elements consisting of tags,
enclosed in angular brackets (like <html>), within the web page content.
HTML tags normally come in pairs like <h1> & </h1>. The first tag in a
pair is the start tag, the second tag is the end tag (they are also called
opening tag and closing tag). In between these tags web designers can
add text, tables, images, etc.
Types of HTML tags: Container Tag (tags which come in pairs, like <h1>
& </h1>) and Standalone Tag (tags which do not come in pairs, like
<br>).
WEB TECHNOLOGY 3
What are 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“.
<body bgcolor=“aqua”></body>
WEB TECHNOLOGY 4
Example
<html>
<head>
<title>My First Html File</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
WEB TECHNOLOGY 5
Output
WEB TECHNOLOGY 6
HTML Headings
<html>
<head>
<title>HTML Headings</title>
</head>
<body>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
</body>
</html>
WEB TECHNOLOGY 7
Output
WEB TECHNOLOGY 8
HTML Paragraphs
<html>
<head>
<title>HTML Paragraphs</title>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
WEB TECHNOLOGY 9
Output
WEB TECHNOLOGY 10
HTML Links
<html>
<head>
<title>HTML Links</title>
</head>
<body>
<a href="http://www.cmcltd.com">go CMCLtd</a>
</body>
</html>
WEB TECHNOLOGY 11
Output
12
WEB TECHNOLOGY 12
HTML Images
<html>
<head>
<title>HTML Images</title>
</head>
<body>
<img src="cmcltd.jpg" width="400" height="300" />
</body>
</html>
WEB TECHNOLOGY 13
Output
WEB TECHNOLOGY 14
HTML Lines
<html>
<head>
<title>HTML Lines</title>
</head>
<body>
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
</body>
</html>
WEB TECHNOLOGY 15
Output
WEB TECHNOLOGY 16
HTML Comments
<html>
<head>
<title>HTML Comments</title>
</head>
<body>
<!-- This is a comment -->
</body>
</html>
WEB TECHNOLOGY 17
Output
WEB TECHNOLOGY 18
HTML Line Breaks
<html>
<head>
<title>HTML Line Breaks</title>
</head>
<body>
<p>This is<br />a para<br />graph with line breaks</p>
</body>
</html>
WEB TECHNOLOGY 19
Output
WEB TECHNOLOGY 20
HTML Text Formatting Tags
<html>
<head>
<title>HTML Text Formatting Tags</title>
</head>
<body>
<b>The <b> tag will bold the text inside the tag</b>
<i>The <i> tag will italicize the text inside the tag</i>
<u>The <u> tag will underline the text inside the tag</u>
<big>The <big> tag will big the text inside the tag</big>
<small>The <small> tag will small the text inside the tag</small>
<sub>The <sub> tag will subscripted the inside the tag</sub>
<sup>The <sup> tag will superscripted the text inside the tag</sup>
</body>
</html>
WEB TECHNOLOGY 21
Output
WEB TECHNOLOGY 22
HTML Fonts
<html>
<head>
<title>HTML Fonts</title>
</head>
<body>
<p>
<font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>
<p>
<font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in blue text color.
</font>
</p>
</body>
</html>
WEB TECHNOLOGY 23
Output
WEB TECHNOLOGY 24
<body> Tag Attributes
<html>
<head>
<title>text</title>
</head>
<body bgcolor="aqua" text="red">
<center>This is CMC Ltd.</center>
</body>
</html>
WEB TECHNOLOGY 25
Output
WEB TECHNOLOGY 26
<body> Tag Attributes (2)
<html>
<head>
<title>background</title>
</head>
<body background="Winodws-7.jpg">
</body>
</html>
WEB TECHNOLOGY 27
Output
WEB TECHNOLOGY 28
Other <body> tag attributes
link=#rgb
alink=#rgb
vlink=#rgb
WEB TECHNOLOGY 29
HTML Tables
<html>
<head>
<title>Attribute align</title>
</head>
<body bgcolor="aqua">
<table border="1" align="center">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$200</td>
</tr>
WEB TECHNOLOGY 30
HTML Tables (contd…)
<tr>
<td>February</td>
<td>$150</td>
</tr>
<tr>
<td>March</td>
<td>$180</td>
</tr>
</table>
</body>
</html>
WEB TECHNOLOGY 31
Output
WEB TECHNOLOGY 32
Attributes of <table> tag
bgcolor=“pixels”
frame=“above or below or hsides or vsides or lhs or rhs or box or
border”
width=“pixels”
WEB TECHNOLOGY 33
Attributes of <td> tag
align=“left or right or center or justify or char”
valign=“top or middle or bottom or baseline”
bgcolor=#rgb
height=“pixels”
width=“pixels”
colspan=“no of cols”
rowspan=“no of rows”
WEB TECHNOLOGY 34
HTML Unordered Lists
<html>
<head>
<title>HTML Unordered Lists</title>
</head>
<body bgcolor="aqua">
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
</body>
</html>
WEB TECHNOLOGY 35
Output
WEB TECHNOLOGY 36
HTML Ordered Lists
<html>
<head>
<title>HTML Ordered Lists</title>
</head>
<body bgcolor="aqua">
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
</body>
</html>
WEB TECHNOLOGY 37
Output
WEB TECHNOLOGY 38
Attributes of <ul>, <li> & <ol>
tags
Attributes of <ul> tag:
type=“disc or square or circle”
Attributes of <li> tag:
type=“1 or A or a or I or i or disc or square or circle’’
Attributes of <ol> tag:
start=“number”
type=“1 or A or a or I or i”
WEB TECHNOLOGY 39
HTML Definition Lists
<html>
<head>
<title>HTML Definition Lists</title>
</head>
<body bgcolor="aqua">
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
WEB TECHNOLOGY 40
Output
WEB TECHNOLOGY 41
HTML Frames
<html>
<head>
<title>HTML Frames</title>
<frameset cols="20%,80%">
<frame src="link.html" />
<frame src="main.html" />
</frameset>
</head>
</html>
WEB TECHNOLOGY 42
Output
WEB TECHNOLOGY 43
Html Iframes
<html>
<head>
<title>HTML Iframes</title>
</head>
<body bgcolor="lime">
<center><font size="20" face="Lucida Handwriting" color="fuchsia">CMC
Limited</font></center>
<hr>
<iframe src="et.html"></iframe>
</body>
</html>
WEB TECHNOLOGY 44
Output
WEB TECHNOLOGY 45
HTML Forms
<html>
<head>
<title>HTML Forms</title>
</head>
<body bgcolor="lime">
<form>
.
input elements
.
</form>
</body>
</html>
WEB TECHNOLOGY 46
HTML Forms (Text Fields)
<html>
<head>
<title>Text Fields</title>
</head>
<body bgcolor="lime">
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
</body>
</html>
WEB TECHNOLOGY 47
Output
WEB TECHNOLOGY 48
HTML Forms (Password Field)
<html>
<head>
<title>Password Field</title>
</head>
<body bgcolor="lime">
<form>
Password: <input type="password" name="pwd">
</form>
</body>
</html>
WEB TECHNOLOGY 49
Output
WEB TECHNOLOGY 50
HTML Forms (Radio Buttons)
<html>
<head>
<title>Radio Buttons</title>
</head>
<body bgcolor="lime">
<form>
<input type="radio" name="sex" value="male"> Male<br>
<input type="radio" name="sex" value="female"> Female
</form>
</body>
</html>
WEB TECHNOLOGY 51
Output
WEB TECHNOLOGY 52
HTML Forms (Checkboxes)
<html>
<head>
<title>Checkboxes</title>
</head>
<body bgcolor="lime">
<form>
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car"> I have a car
</form>
</body>
</html>
WEB TECHNOLOGY 53
Output
WEB TECHNOLOGY 54
HTML Forms (Submit Button)
<html>
<head>
<title>Submit Button</title>
</head>
<body bgcolor="lime">
<form action="HTML Iframes.html">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
</body>
</html>
WEB TECHNOLOGY 55
Output
WEB TECHNOLOGY 56
HTML Forms (Text Area)
<html>
<head>
<title>textarea</title>
</head>
<body bgcolor="lime">
<form>
Address:<br>
<textarea rows="10" cols="20" name="TextArea1"></textarea>
</form>
</body>
</html>
WEB TECHNOLOGY 57
Output
WEB TECHNOLOGY 58
HTML Forms (Select Option)
<html>
<head>
<title>select</title>
</head>
<body bgcolor="lime">
<form>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
WEB TECHNOLOGY 59
Output
WEB TECHNOLOGY 60
Assignments (1)
WEB TECHNOLOGY 61
Assignments (2)
1. List Item 1
a. Nested List Item 1
I. Nested List Item 1
II. Nested List Item 2
b. Nested List Item 2
2. List Item 2
a. Nested List Item 1
b. Nested List Item 2
WEB TECHNOLOGY 62
Assignments (3)
WEB TECHNOLOGY 63
Assignments (4)
WEB TECHNOLOGY 64
Assignments (5)
WEB TECHNOLOGY 65
References
Courtesy of W3Schools – HTML Tutorial. URL:
http://www.w3schools.com/html/
Courtesy of TutorialsPoint – HTML Tutorial. URL:
http://www.tutorialspoint.com/html/
Ivan Bayross, Web Enabled Commercial Applications Development
Using HTML, JavaScript, DHTML and PHP, 4th Revised Edition, BPB
Publications, 2010
WEB TECHNOLOGY 66
