HTML
AN INTRODUCTION
TO WEB PAGE
PROGRAMMING
INTRODUCTION TO HTML
• With HTML you can create your own Web site.
• HTML stands for Hyper Text Markup Language.
• HTML is not a programming language, it is a Markup
Language.
• A markup language is a set of markup tags.
• HTML uses markup tags to describe web pages.
• HTML is not case sensitive language.
• HTML documents contain HTML tags and plain text.
HTML Elements and Tags
• A tag is always enclosed in angle bracket
<>like <HTML>
• HTML tags normally come in pairs like
<HTML> and </HTML> i.e.
Start tag = <HTML>
End tag =</HTML>
• Start and end tags are also called opening
tags and closing tags
Types of HTML Tags
There are two different types of tags:->
Container Element:->
Container Tags contains start tag & end tag i.e.
<HTML>… </HTML>
Empty Element:->
Empty Tags contains start tag i.e.
<BR>
HOW TO START
• Write html code in notepad.
• Save the file with (.Html)/(.Htm) extension.
• View the page in any web browser viz.
INTERNET EXPLORER, NETSCAPE
NAVIGATOR etc.
• The purpose of a web browser (like internet
explorer or firefox) is to read html documents and
display them as web pages.
Code With HTML
<HTML>
<HEAD>
<TITLE>
MY FIRST PAGE
</TITLE>
</HEAD>
<BODY>
GLOBAL INFORMATION CHANNEL
</BODY>
</HTML>
Explain these tags
• <HTML> - Describe HTML web page that is
to be viewed by a web browser.
• <HEAD> - This defines the header section
of the page.
• <TITLE> - This shows a caption in the title
bar of the page.
• <BODY> - This tag show contents of the
web page will be displayed.
Text Formatting Tags
Heading Element:->
• There are six heading elements
(<H1>,<H2>,<H3>,<H4>, <H5>,<H6>).
• All the six heading elements are container
tag and requires a closing tag.
• <h1> will print the largest heading
• <h6> will print the smallest heading
Heading Tag Code
<html>
<title>heading</title>
<body>
<h1> GLOBAL INFO CHANNEL</h1>
<h2> GLOBAL INFO CHANNEL</h2>
<h3> GLOBAL INFO CHANNEL</h3>
<h4> GLOBAL INFO CHANNEL</h4>
<h5> GLOBAL INFO CHANNEL</h5>
<h6> GLOBAL INFO CHANNEL</h6>
</body>
</html>
Result of Heading Code
HTML Paragraph Tag
• HTML documents are divided into paragraphs.
• Paragraphs are defined with the <p> tag i.e.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<pre>This text is preformatted</pre>
Line Break & Horizontal
Line Tag
• if you want a line break or a new line without starting a new
paragraph Use the <br> tag.
• Defines a horizontal line use <hr>tag.
• <br> <hr> element are empty HTML element i.e. Global
Information Channel<hr>
Global Information <br> Channel
Text Formatting Tags
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<super> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<tt> Defines teletype text
<u> Defines underline text
<strike> Defines strike text
Text Formatting Code
<html>
<head></head>
<body>
<b>This text is Bold</b>
<br><em>This text is Emphasized</em>
<br><i>This text is Italic</i>
<br><small>This text is Small</small>
<br>This is<sub> Subscript</sub> and
<sup>Superscript</sup>
<br><strong>This text is Strong</strong>
<br><big>This text is Big</big>
<br><u>This text is Underline</u>
<br><strike>This text is Strike</strike>
<br><tt>This text is Teletype</tt>
</body>
</html>
Result of Text Formatting
Code
Font Tag
• This element is used to format the size,
typeface and color of the enclosed text.
• The commonly used fonts for web pages
are Arial, Comic Sans MS , Lucida Sans
Unicode, Arial Black, Courier New, Times
New Roman, Arial Narrow, Impact,
Verdana.
• The size attribute in font tag takes values
from 1 to 7.
Font Tag Code
<html>
<head><title> fonts</title></head>
<body>
<br><font color=“green" size="7" face="Arial"> GLOBAL
INFORMATION CHANNEL </font>
<br><font color=“green" size="6" face="Comic Sans MS ">
GLOBAL INFORMATION CHANNEL </font>
<br><font color=“green" size="5" face="Lucida Sans Unicode">
GLOBAL INFORMATION CHANNEL </font>
<br><font color=“green" size="4" face="Courier New"> GLOBAL
INFORMATION CHANNEL </font>
<br><font color=“green" size="3" face="Times New Roman">
GLOBAL INFORMATION CHANNEL </font>
<br><font color=“green" size="2" face="Arial Black"> GLOBAL
INFORMATION CHANNEL </font>
<br><font color=“green" size="1" face="Impact"> GLOBAL
INFORMATION CHANNEL </font>
</body>
</html>
Result of Font Code
Background & Text Color Tag
• The attribute bgcolor is used for changing the back ground
color of the page.
<body bgcolor=“Green” >
• Text is use to change the color of the enclosed text.
<body text=“White”>
Hyperlink Tag
• A hyperlink is a reference (an address) to a
resource on the web.
• Hyperlinks can point to any resource on the
web: an HTML page, an image, a sound file,
a movie, etc.
• The HTML anchor element <a>, is used to
define both hyperlinks and anchors.
<a href="url">Link text</a>
• The href attribute defines the link address.
<a href="[Link]
globalinfochannel!</a>
Result of Hyperlink Code
Image Tag
• To display an image on a page, you need to
use the src attribute.
• src stands for "source". The value of the src
attribute is the URL of the image you want to
display on your page.
• It is a empty tag.
<IMG SRC ="url">
<IMG SRC="[Link]“>
<IMG SRC="[Link]“ HEIGHT="30"
WIDTH="50">
HTML List Tag
• Lists provide methods to show item or element
sequences in document content. There are
three main types of lists:->
1. Unordered lists:-unordered lists are bulleted.
2. Ordered lists:- Ordered lists are numbered.
List Tags
<LI> <LI> is an empty tag,it is used for
representing the list items
<OL> Ordered list
<UL> Unordered list
Unordered List
• TYPE attribute to the <UL> tag to show
different bullets like:-
[Link]
[Link]
[Link]
<ul Type =“disc”>…..</ul>
• The attribute TYPE can also be used with
<LI> element.
Code & Result of the
Unordered List
<html><body>
<h4>Disc bullets list:</h4>
<ul type="disc"> <li>Jones</li>
<li>Smith</li>
<li>Hayes</li>
<li>Jackson</li></ul>
<h4>Circle bullets list:</h4>
<ul type="circle"> <li>Jones</li>
<li>Smith</li>
<li>Hayes</li>
<li>Jackson</li></ul>
<h4>Square bullets list:</h4>
<ul type="square"> <li>Jones</li>
<li>Smith</li>
<li>Hayes</li>
<li>Jackson</li></ul>
</body></html>
Ordered List
• The TYPE attribute has the following value like:-
[Link] = "1" (Arabic numbers)
[Link] = "a" (Lowercase alphanumeric)
[Link] = "A" (Uppercase alphanumeric)
[Link] = "i" (Lowercase Roman numbers)
[Link] = "I" (Uppercase Roman numbers)
• By default Arabic numbers are used
Code & Result of the Ordered
List
<html><body>
<h4>Numbered list:</h4>
<ol> <li>Jones</li>
<li>Smith</li>
<li>Hayes</li>
<li>Jackson</li></ol>
<h4>Letters list:</h4>
<ol type="A"> <li>Jones</li>
<li>Smith</li>
<li>Hayes</li>
<li>Jackson</li></ol>
<h4>Roman numbers list:</h4>
<ol type="I"> <li>Jones</li>
<li>Smith</li>
<li>Hayes</li>
<li>Jackson</li></ol>
</body></html>
HTML Table Tag
<table> used to create table
<tr> table is divided into rows
<td> each row is divided into data cells
<th> Headings in a table
<Caption> caption to the table
<colgroup> Defines groups of table columns
<col> Defines the attribute values for one or
more columns in a table
<thead> Defines a table head
<tbody> Defines a table body
<tfoot> Defines a table footer
<Cellspacing> amount of space between table cells.
<Cellpadding> space around the edges of each cell
<Colspan> No of column working with will span
<rowspan> No of rows working with will span
<Border> attribute takes a number
Code & Result of the Table
<html>
<body>
<h3>Table without
border</h3>
<table>
<tr> <td>MILK</td>
<td>TEA</td>
<td>COFFEE</td> </tr>
<tr> <td>400</td>
<td>500</td>
<td>600</td> </tr>
</table>
</body>
</html>
Header
<html><body>
<h4>Horizontal Header:</h4>
<table border="1">
<tr> <th>Name</th>
<th>Loan No</th>
<th>Amount</th> </tr>
<tr> <td>Jones</td>
<td>L-1</td>
<td>5000</td></tr> </table><br><br>
<h4>Vertical Header:</h4>
<table border="5">
<tr> <th>Name</th>
<td>Jones</td> </tr>
<tr> <th>Loan No</th>
<td>L-1</td> </tr>
<tr> <th>Amount</th>
<td>5000</td></tr> </table>
</body></html>
Table Code with Colspan &
Rowspan
<html><body>
<h4>Cell that spans two columns:</h4>
<table border="4">
<tr> <th>Name</th>
<th colspan="2">Loan No</th> </tr>
<tr> <td>Jones</td>
<td>L-1</td>
<td>L-2</td> </tr> </table>
<h4>Cell that spans two rows:</h4>
<table border="8">
<tr> <th>Name</th>
<td>Jones</td></tr>
<tr><th rowspan="2">Loan No</th>
<td>L-1</td></tr>
<tr><td>L-2</td></tr></table>
</body></html>
Table Code with Caption &
ColSpacing
<html>
<body>
<table border="1">
<caption>My Caption</caption>
<tr>
<td>Milk</td>
<td>Tea</td>
</tr>
<tr>
<td></td>
<td>Coffee</td>
</tr>
</table>
</body>
</html>
Cellpadding,Image &
Backcolor Code
<html><body>
<h3>Without cellpadding:</h3>
<table border="2" bgcolor="green">
<tr> <td>Jones</td>
<td>Smith</td></tr>
<tr> <td>Hayes</td>
<td>Jackson</td></tr></table>
<h4>With cellpadding:</h4>
<table border="8"
cellpadding="10"
background="[Link]
mp">
<tr> <td>Jones</td>
<td>Smith</td></tr>
<tr> <td>Hayes</td>
<td>Jackson</td></tr></table>
</body></html>
HTML Form
• A form is an area that can contain form
elements.
• Form elements are elements that allow the
user to enter information in a form. like text
fields, text area fields, drop-down menus,
radio buttons and checkboxes etc
• A form is defined with the <form> tag.
• The syntax:-
<form>
.
input elements
.
</form>
Form Tags
Defines a form for user input
<form>
<input> used to create an input field
<text> Creates a single line text entry field
<textarea> Defines a text-area (a multi-line text input control)
<password> Creates a single line text entry field. And the
characters entered are shown as asterisks (*)
<label> Defines a label to a control
<option> Creates a Radio Button.
<select> Defines a selectable list (a drop-down box)
<button> Defines a push button
<value> attribute of the option element.
<checkbox> select or unselect a checkbox
<dropdown box> A drop-down box is a selectable list
<html><body>
<form>
<h1>Create a Internet Mail Account</h1>
First Name <br>
<input type="text"><br>
<br>
Last Name <br>
<input type="text"><br>
<br>
Desired Login Name <input type="text">
@[Link] <br>
<br>
Password <input type="password"><br><br>
<input type="radio"> MALE<br>
<input type="radio" checked="checked" > FEMALE<br><br>
Date of Birth <input type="date"><br><br>
Course Applied for
<select >
<option>-Select One-</option>
<option>MBA GENERAL</option>
<option>MBA FA</option>
<option>MBA WEEKEND</option>
</select><br><br><br>
Comments <textarea rows="3" cols="20"></textarea>
<br><br><br>
<br><input type="submit" value="SUBMIT"><br>
<input type="reset" value="RESET"></br>
</form>
</body></html>