HTML LECTURE NOTES
What is HTML?
• HTML(HyperText Markup Language) is a
web authoring language used to create
Web pages
• HTML uses many tags to make a webpage.
therefore it is a tag based language.The tags
of HTML are surrounded by angular
brackets (< >)
Advantages of HTML:
• HTML is compatible with other web
authoring tools
• HTML is a free language this is because it is
by default in every windows therefore no
need to purchase extra software.
• It’s a user-friendly language i.e. the
language is easy to learn and use.
• Compatible with different web browsers
• It’s widely used
Limitations of HTML
• HTML has limited security features
• HTML can only generate static webpages
• Need to write lot of code for creating
simple webpages.
HTML support the following formats of web
content:
i. Graphics
ii. Text
iii. Sound
iv. Video
v. Animations
HTML Tags
• The essence of HTML programming is tags
• A tag is a keyword enclosed by angle brackets
( Example: <I> )
• There are opening and closing tags for many
but not all tags; The affected text is between
the two tags.
More Tags...
• The opening and closing tags use the same
command except the closing tag contains an
additional forward slash /
• For example, the expression <B> Warning
</B> would cause the word ‘Warning’ to
appear in bold face on a Web page
Nested Tags
• Whenever you have HTML tags within other
HTML tags, you must close the nearest tag
first
• Example:
<H1> <I> The Nation </I> </H1>
Structure of a Web Page
• All Web pages share a <HTML>
<HEAD>
common structure <TITLE> Example </TITLE>
• All Web pages should </HEAD>
<BODY>
contain a pair of This is where you would include the
<HTML>, <HEAD>, text and images on your Web page.
<TITLE>, and <BODY> </BODY>
</HTML>
tags
The <TITLE> Tag
• Choose the title of your Web page carefully;
The title of a Web page determines its ranking
in certain search engines
• The title will also appear on Favorite lists,
History lists, and Bookmark lists to identify
your page.
HTML Text Formatting Tags
<B> Bold Face </B>
<I> Italics </I>
<U> Underline </U>
<P> New Paragraph </P>
<BR> Next Line
Changing the Font
• The expression <FONT FACE = “fontname”> …
</FONT> can be used to change the font of the
enclosed text
• To change the size of text use the expression
<FONT SIZE=n> …. </FONT> where n is a
number between 1 and 7
Changing the Font
• To change the color, use <FONT
COLOR=“blue”>…. </FONT>; The color can
also be defined using hexadecimal
representation ( Example: #ffffff )
• These attributes can be combined to change
the font, size, and color of the text all at once;
For example, <FONT SIZE=4 FACE=“Courier”
COLOR=“blue”> …. </FONT>
Headings
• Web pages are typically organized into
sections with headings; To create a heading
use the expression <Hn>….</Hn> where n is a
number between 1 and 7
• In this case, the 1 corresponds to the largest
size heading while the 7 corresponds to the
smallest size
Aligning Text
• The ALIGN attribute can be inserted in the <P>
and <Hn> tags to right justify, center, or left
justify the text
• For example, <H1 ALIGN=CENTER> Web
Designing </H1> would create a centered
heading of the largest size
Comment Statements
• Comment statements are notes in the HTML
code that explain the important features of
the code
• The comments do not appear on the Web
page itself but are a useful reference to the
author of the page and other programmers
• To create a comment statement use the <!--
…. --> tags
The Blink Tag
• It is possible to make text blink using the
<BLINK> … </BLINK> tag
• However, it is best to use this feature at most
sparingly or not at all; What seems like a good
idea to a Web designer can become very
annoying to a Web user
• The <BLINK> tag is not supported by Internet
Explorer
Page Formatting
• To define the background color, use the
BGCOLOR attribute in the <BODY> tag
• To define the text color, use the TEXT attribute
in the <BODY> tag
• To define the size of the text, type <BASEFONT
SIZE=n>
Example
<HTML>
<HEAD>
<TITLE> Example </TITLE>
</HEAD>
<BODY BGCOLOR=“black” TEXT=“white”>
<BASEFONT SIZE=7>
This is where you would include the text and images on your Web page.
</BODY>
</HTML>
Inserting Images
• Type <IMG SRC = “image.ext”>, where
image.ext indicates the location of the image
file
• The WIDTH=n and HEIGHT=n attributes can be
used to adjust the size of an image
• The attribute BORDER=n can be used to add a
border n pixels thick around the image
Alternate Text
• Some browsers don’t support images. In this
case, the ALT attribute can be used to create
text that appears instead of the image.
• Example:
<IMG SRC=“pic.jpg” ALT = “sorry image cannot
be displayed”>
Links
• A link lets you move from one page to
another, play movies and sound, send email,
download files, and more….
• A link has three parts: a destination, a label,
and a target
• To create a link type
<A HREF=“page.html”> label </A>
Anatomy of a Link
<A HREF=“page.html”> label </A>
• In the above link, “page.html” is the
destination. The destination specifies the
address of the Web page or file the user will
access when he/she clicks on the link.
• The label is the text that will appear
underlined or highlighted on the page
Example: Links
• To create a link to Yahoo, type:
<A HREF=“http://www.yahoo.com”>Click here
to connect to Yahoo website</A>
Changing the Color of Links
• The LINK, VLINK, and ALINK attributes can be
inserted in the <BODY> tag to define the color
of a link
– LINK defines the color of links that have not been
visited
– VLINK defines the color of links that have already
been visited
– ALINK defines the color of a link when a user clicks
on it
Using Links to Send Email
• To create a link to an email address, type <A
HREF=“mailto:email_address”> Label</A>
• For example, to create a link to send email to
peter, type: <A HREF=“mailto:
[email protected]”> send peter an email</A>
Anchors
• Anchors enable a user to jump to a specific
place on a Web site
• Two steps are necessary to create an anchor.
First you must create the anchor itself. Then
you must create a link to the anchor from
another point in the document.
HTML List
HTML support three types of list namely:
• Ordered list
• Un-ordered list
• Definition list
Ordered Lists
• Ordered lists are a list of Here’s how it would
numbered items. look on the Web:
• To create an ordered
list, type:
<OL>
<LI> This is step one.
<LI> This is step two.
<LI> This is step three.
</OL>
More Ordered Lists….
• The TYPE=x attribute allows you to change the
kind of symbol that appears in the list.
– A is for capital letters
– a is for lowercase letters
– I is for capital roman numerals
– i is for lowercase roman numerals
Unordered Lists
• An unordered list is a Here’s how it would
list of bulleted items look on the Web:
• To create an unordered
list, type:
<UL>
<LI> First item in list
<LI> Second item in list
<LI> Third item in list
</UL>
More Unordered Lists...
• The TYPE=shape attribute allows you to
change the type of bullet that appears
– circle corresponds to an empty round bullet
– square corresponds to a square bullet
– disc corresponds to a solid round bullet; this is the
default value
Forms
What are forms?
• An HTML form is an area of the document that
allows users to enter information into fields.
• A form may be used to collect personal
information, opinions in polls, user preferences
and other kinds of information.
Forms
• There are two basic components of a Web
form: the shell, the part that the user fills out,
and the script which processes the
information
• HTML tags are used to create the form shell.
Using HTML you can create text boxes, radio
buttons, checkboxes, drop-down menus, and
more...
Example: Form
Text Box
Drop-down Menu
Radio Buttons
Checkboxes
Text Area
Reset Button
Submit Button
The Form Shell
• A form shell has three important parts:
– the <FORM> tag, which includes the address of
the script which will process the form
– the form elements, like text boxes and radio
buttons
– the submit button which triggers the script to
send the entered information to the server
Creating Text Boxes
• To create a text box, type <INPUT TYPE=“text”
NAME=“name” VALUE=“value” SIZE=n
MAXLENGTH=n>
• The NAME, VALUE, SIZE, and MAXLENGTH
attributes are optional
Text Box Attributes
• The NAME attribute is used to identify the
text box to the processing script
• The VALUE attribute is used to specify the
text that will initially appear in the text box
• The SIZE attribute is used to define the size
of the box in characters
• The MAXLENGTH attribute is used to define
the maximum number of characters that
can be typed in the box
Example: Text Box
First Name: <INPUT TYPE="text" • Here’s how it would
NAME="FirstName" VALUE="First
Name" SIZE=20> look on the Web:
<BR><BR>
Last Name: <INPUT TYPE="text"
NAME="LastName" VALUE="Last
Name" SIZE=20>
<BR><BR>
Creating Larger Text Areas
• To create larger text areas, type <TEXTAREA
NAME=“name” ROWS=n1 COLS=n2 WRAP>
Default Text </TEXTAREA>, where n1 is the
height of the text box in rows and n2 is the
width of the text box in characters
• The WRAP attribute causes the cursor to move
automatically to the next line as the user
types
Example: Text Area
<B>Comments?</B>
<BR>
<TEXTAREA NAME="Comments" ROWS=10 COLS=50
WRAP>
</TEXTAREA>
Creating Radio Buttons
• To create a radio button, type <INPUT
TYPE=“radio” NAME=“name”
VALUE=“data”>Label, where “data” is the text
that will be sent to the server if the button is
checked and “Label” is the text that identifies
the button to the user
Example: Radio Buttons
<B> Size: </B>
<INPUT TYPE="radio" NAME="Size"
VALUE="Large">Large
<INPUT TYPE="radio" NAME="Size"
VALUE="Medium">Medium
<INPUT TYPE="radio" NAME="Size"
VALUE="Small">Small
Creating Checkboxes
• To create a checkbox, type <INPUT
TYPE=“checkbox” NAME=“name”
VALUE=“value”>Label
• If you give a group of radio buttons or
checkboxes the same name, the user will only
be able to select one button or box at a time
Example: Checkboxes
<B> Color: </B>
<INPUT TYPE="checkbox" NAME="Color"
VALUE="Red">Red
<INPUT TYPE="checkbox" NAME="Color"
VALUE="Navy">Navy
<INPUT TYPE="checkbox" NAME="Color"
VALUE="Black">Black
Creating Drop-down Menus
• To create a drop-down menu, type <SELECT
NAME=“name” SIZE=n MULTIPLE>
• Then type <OPTION VALUE= “value”>Label
• In this case the SIZE attribute specifies the
height of the menu in lines and MULTIPLE
allows users to select more than one menu
option
Example: Drop-down Menu
<B>FAVOURITE FRUIT:</B>
<SELECT>
<OPTION VALUE="MANGOES">MANGOES
<OPTION VALUE="PAPAYA">PAPAYA
<OPTION VALUE="GUAVA">GUAVA
<OPTION VALUE="BANANA"> BANANA
<OPTION VALUE="PINEAPPLE">PINEAPPLE
</SELECT>
Creating a Submit Button
• To create a submit button, type <INPUT
TYPE=“submit”>
• If you would like the button to say something
other than submit, use the VALUE attribute
• For example, <INPUT TYPE=“submit”
VALUE=“Buy Now!”> would create a button
that says “Buy Now!”
Creating a Reset Button
• To create a reset button, type <INPUT
TYPE=“reset”>
• The VALUE attribute can be used in the same
way to change the text that appears on the
button
Tables
• Tables can be used to display rows and
columns of data, create multi-column text,
captions for images, and sidebars
• The <TABLE> tag is used to create a table; the
<TR> tag defines the beginning of a row while
the <TD> tag defines the beginning of a cell
Adding a Border
• The BORDER=n attribute allows you to add a
border n pixels thick around the table
• To make a solid border color, use the
BORDERCOLOR=“color” attribute
• To make a shaded colored border, use
BODERCOLORDARK=“color” and
BORDERCOLORLIGHT=“color”
Creating Simple Table
<TABLE BORDER=10> • Code output:
<TR>
<TD>One</TD>
<TD>Two</TD>
</TR>
<TR>
<TD>Three</TD>
<TD>Four</TD>
</TR>
</TABLE>
Adjusting the Width
• When a Web browser displays a table, it often
adds extra space. To eliminate this space use
the WIDTH =n attribute in the <TABLE> and
<TD> tags
• Keep in mind - a cell cannot be smaller than its
contents, and if you make a table wider than
the browser window, users will not be able to
see parts of it.
Centering a Table
• There are two ways to center a table
– Type <TABLE ALIGN=CENTER>
– Enclose the <TABLE> tags in opening and closing
<CENTER> tags
Wrapping Text around a Table
• It is possible to wrap text around a table. This
technique is often used to keep images and captions
together within an article.
• To wrap text around a table, type <TABLE ALIGN =
LEFT> to align the table to the left while the text
flows to the right.
• Create the table using the <TR>, <TD>, and </TABLE>
tags as you normally would
Adding Space around a Table
• To add space around a table, use the
HSPACE=n and VSPACE=n attributes in the
<TABLE> tag
• Example:
<TABLE HSPACE=20 VSPACE=20>
Spanning Cells Across Columns
• It is often necessary to span one cell across
many columns. For example, you would use
this technique to span a headline across the
columns of a newspaper article.
• To span a cell across many columns, type <TD
COLSPAN=n>, where n is the number of
columns to be spanned
Spanning Cells Across Rows
• To span a cell across many rows, type <TD
ROWSPAN=n>, where n is the number of rows
