Lesson 3 HTML
Lesson 3 HTML
It is a scripting language which is used to create and design internet pages called as web
page. It tells the web browser how to display the contents of a hypertext document
including text, images and hyperlinks.
How to write HTML documents:-
HTML is made of elements called as TAGS. These different tags when work together
form a web-page and tell web browser how to display them.
A tag is a HTML command that tells the browser how part of a web page should be
displayed.
How to represent the TAGS:-
Types of TAGS
Container TAG
The HTML TAGS which include starting of a tag as well as ending/closing
of a tag are called as container TAGS. A TAG is closed by placing a ‘ / ’ along
with the TAG
<BODY> Starting of a TAG
Empty TAG:- The TAGS which do not have a closing tag are called as Empty
TAG. These tags which when started perform the work for once and then
automatically stop.
1
Example: -- <HR> <BR>
How to view the created web page in a web browser (internet explorer ):-
1. Go to the folder where the html file is stored.
2. Right click on the name of file and choose open with option
3. In open with chose Internet Explorer.
4. Another way to open the file is to click on the name of the file.
Basic HTML Document Structure: All the HTML documents should have the following
general form. Each document is mainly divided into two sections
a) HEAD b) Body
<html>
<head>
<title> title of the page is written here</title>
</head>
<body>All the text to be displayed in the web page is defined here.
2
</body>
</html>
3. <Title>
Description and use: - This tag is used to display the title of a web page. Title is the name of
a web page by which it is referred in internet. Title is displayed in the title bar of the browser.
Syntax :- <html> <head>
<title> Home page </title>
</head> </html>
What happens if the title is not defined?
Then the full name of the file (the name by which a file is saved) will be displayed in the title
bar of the web page.
What happens when we forget to close the <title> tag?
Then the browser will not show any output as the text written after the <title> tag will be
treated as the title of the web page.
4. <Body>
3
Description and use: - All the information (text, image, animation, and graphics) to be
displayed in a web page is enclosed by <body> tag. Its main attributes are BGCOLOR,
BACKGROUND, and LINK
Syntax :- <html> <head>
<title> Home page </title>
</head>
<body>
----------
----------
</body> </html>
<html>
<head>
<title> My First Web Page </title>
</head>
<body>
This is my first web page
</body>
</html>
ATTRIBUTES
HTML Tags can have attributes. Attributes are the additional parameters that are used
to define the characteristics of an HTML Tag Attributes are always specified in the start
tag. The attribute are always written in the same angle brackets along with the tag.
<html>
<head>
<title>
Body text
</title>
</head>
<body text = “blue”>
This is a tag to show the use of text attribute of body tag.
</body> </html>
Leftmargin:-
This attribute helps to set the left margin of the web page. It can be defined with any
value such as 30. Text will be displayed 30 pixels away from left side.
Similarly, right margin, top margin can also be fixed.
<html> <head>
<title> Body margins </title>
</head>
<body leftmargin =“30” topmargin =“40””>
This tag is used set the margins of a web page
</body> </html>
Background: --
With the help of BGCOLOR attribute we can change the color of background. But
instead of changing color if we want to put an image in background then we use
5
BACKGROUND attribute. Some of the main types of image file that can be used are ‘ .JPEG’
, ‘.gif’ , ’.bmp’ To place a picture in background we must specify the complete path where a
picture file is stored.
Example: - <html>
<head>
<title> Home page </title>
</head>
<body background =“d:\photo.jpg”>
This is a test page
</body> </html>
6
<p align=”left/centre/right”> to align the text in paragraph in left, center or right direction
W.R.T. paper
Exercise 2:- Create a HTML document. Write 3 paragraphs of text (in different alignment)
from your physics text book.
ASSIGNMENT 7 USE OF <BR> AND <P> TAGS
STYLE TAGS
These tags are used to change the appearance of the text. Some of the important style tags
are as under.
<b> Bold :- This tag is used when you want to emphasize the text. Type
<b> before the text which you want to appear bold and then type </b>
<I> Italic :- This tag marks up the text in italic style. <I> is used for the
same.
<u> Underline :-This tag is used to place a line under the text enclosed in <u> and
</u> tags.
<sub> Subscript:- This tag is used to display the text in subscript format I.e. the
text enclosed in <sub> and </sub> will appear below base line and in
smaller size.
<sup> Superscript:- This tag shows the enclosed text above base line and in
smaller size as compared with the preceding text.
<tt> Typewriter text :- This tag shows the text in typewriter font.
<html>
<head>
<title>
style tags
</title>
</head>
<body text = “blue”>
This is a tag to show the use of Style tags.
7
<b> this is an Italic text</b> <br>
<I> this is an Italic text</I> <br>
<U> this is a text with under line</U> <br>
This is an example of Subscript<br>
H<sub>2</sub>O <br>
This is an example of Superscript<br>
(A+B)<sup>2</sup>
</body>
</html>
Exercise 3:- Write the source code to create the web page to show the use of style tags.
8
Sample web page to show <hr> Tag
<html>
<head>
<title>
Horizontal ruler
</title>
</head>
<body text = “blue”>
This is to show the use of horizontal ruler with noshade attribute
<hr color =“red” size =“30” width = “300” noshade>
This is to show the use of horizontal ruler without noshade attribute
<hr color =“red” size =“30” width = “300” >
This is to show the use of left aligned horizontal ruler
<hr color =“red” size =“30” width = “300”align=”left” >
This is to show the use of right aligned horizontal ruler
<hr color =“red” size =“30” width = “300”align=”right” >
</body> </html>
Note: Width can also be mentioned in %age of total screen length
Exercise 4:- Write a command to draw a line of red color, thickness 20 horizontally across the screen.
Exercise 5:- Write the source code to create the web page as shown below.
Changing Font
<font>
Font is the writing style of the text in a document. A font is a specific typeface of a certain
size and style. The <font> tag allows us to change the type face, color and size of the text.
A <font> tag has 3 main attributes. Face, color, size.
Syntax
<font face =“font name” size =“value” Color =“value”>
here
Face specifies the font style I.e. Arial, impact, courier
Size specifies the size of the text. It is a numeric value ranging from 1 to 7.
1 being the smallest and 7 being the largest. By default the size is 3
Color specifies the color of the text.
<html>
10
<head>
<title>
FONT
</title>
</head>
<body >
<font face ="arial" size ="7" color ="blue">
This is a text with font face arial, size = 30 and color= blue
</body>
</html>
<Basefont> This tag establishes a default set of attributes of the font of the text. It is used in
body tag and has no effect on headings. It occurs only once in the body. There after if we
want to change the writing style we have to use <font> tag. Base font uses all the attributes
of the font tag. It becomes active when no text font is specified.
ASSIGNMENT 11 USE OF <FONT> TAG
Exercise 6:- Write the source code to create the web page to show the use of font tag. Write
the names of 10 fruits. Write in different color, style, size and all in different lines.
ASSIGNMENT 12
HOW TO INSERT IMAGE IN
HTML DOCUMENT
12
Lists in HTML
Html provides us a facility to create lists in a web page. Mainly 3 types of lists can be
created in HTML.
1. Unordered List: - A list in which list items are without any numbering. Bullets are
used to differentiate between list items.
2. Ordered List: - A list in which any sequence or numbering is provided
to list items.
3. Nested List: - It is the combination of two or more lists.
3. Descriptive List: - In this type of list a description is provided along with
list items.
Unordered List <UL> tag
<html> <head>
<title> unordered list </title>
</head>
<body text = “blue”>
This is to show how to insert an unordered list in a webpage
<ul type = “disc”>
<li> Banana
<li> orange
<li> melon
</ul>
</body>
</html>
Here
<ul> marks the beginning of an unordered list. It is a container tag.
Type is the attribute used to specify the nature of bullet. We can have three types of
bullets I.e.
1. Disc
2. Circle
3. Square
<li> is the tag used to specify the list items I.e. the contents of the list
13
Exercise 8:- Write the source code to create the web page to show the use of unordered list.
Prepare a list in HTML showing the names of at least (six) 6 Indian wild life sanctuaries. All
list items should be in different colors.
Ordered List
<html>
<head>
<title> ordered list </title>
</head>
<body text = “blue”>
This is to show how to insert an ordered list in a webpage
<ol type = “1” start =“1”>
<li> Banana
<li> orange
<li> melon
</ol>
</body> </html>
Here
<ol> marks the beginning of an ordered list. It is a container tag.
<OL> tag has the two attributes a. type b. start
Type specifies the nature of sequence, order. We can specify the order by following means
Attribute Description Output
value
1 specifies the numeric sequence 1,2,3
A Specifies the sequence as capital alphabet A, B, C
a specifies the sequence as small alphabet a, b, c
i specifies the sequence as small roman numerals I, ii, iii, iv
I specifies the sequence as capital roman numerals I, II, III, IV
While start specify the starting value of the list i.e. if we have to start the list
from ‘200’ then one should write
Start =“200”
<li> specifies the list items I.e. the contents of the list
14
ASSIGNMENT 14 CREATE ORDERED LIST IN HTML
Exercise 9:- Write the source code to create the web page to show the use of ordered list.
Prepare a list in HTML showing the names of at least (five) 5 famous Indian tourist places.
List sequence should start from 5 and type must capital roman numerals.
Descriptive List:-
HTML definition lists (<dl>) are list elements that have a unique array of tags and elements;
the resulting listings are similar to those you'd see in a dictionary.
Exercise 10:- Write the source code to create the web page to show the use of nested list As
shown in image below.
15
Exercise 11:- Write the source code to create the web page to show the use of nested list As
shown in image below.
Linking of
web pages
A web site consists of
no. of web pages
16
which are linked to each other with the help of most powerful feature of HTML known as
hyperlink. We can link various text and pictures from one page to another web page. When
we click on a designated text then we are redirected to another page. The text link appears
colored and underlined. This text is called as hypertext.
In HTML <A> Anchor is used to mark the hypertext. Being a container tag it requires </A>
closing tag to mark end of the hypertext. Attributes of the <a> tags are href and name.
This linking is of two types
a. Internal b. External
External Linking
Syntax:-
<A HREF =“CLICK.HTML”>CLICK HERE</A>
Here <A> is the name of the TAG & HREF attribute shows the hypertext reference i.e.
the path of the page to be connected is typed here. Here path means the exact location of
the web page. The text enclosed between tag <A> and </A> appears as hypertext and will be
displayed as colored & underlined. When we move the mouse pointer over the text then
shape of the mouse pointer will change from ‘arrow’ to a ‘hand with pointing finger’
<html>
<head>
<title>
Linking
</title>
</head>
<body text = “blue”>
This is to show how to insert a hyperlink in a web page
<A href = “click.html”> click here </A>
</body>
</html>
Here ‘click here’ is the hypertext which is colored and underlined
Note: - Write the complete path of linked web page if it is stored at a location other than the
main folder.
Steps for linking
Create a web page and save it in D: drive. (Write all the required tags in first.html)
Give the name first.html
Create another web page and give it name second.html and save it also in D: drive
17
Additional attributes of body tag to be used with linking of web pages.
Link : Provides the color to the hypertext. Default color is blue
Alink : it provides color to the link of active webpage. Default color is Red
Vlink : It provides the color to a visited link. Default color is purple.
Internal linking
An internal link allows you to link to another section on the same web page, so it basically
scrolls the page up or down to the desired location.
To link to a specific place on a web page, you need to use a pair of anchors. One where you
are linking from and one where you would like to link to. The first one, is where you are
linking from looks like
<A HREF="#name"> and the closing tag looks like </A>. The text between the two tags is the
link. The text "name" identifies the anchor, giving it a name.
The second anchor identifies where you are linking to. This tag must be placed in your HTML
in the location where you would like to link to. The starting tag is <A NAME="name"> and the
closing tag is </A>. Here name attribute is used define the name of the section to be linked
and it must match with the anchor name defined in the first anchor
<A HREF="#bottom">Click here for the bottom of the page</A>
(This is the link to the bottom section of web page)
18
If you want people to mail you about your site, a good way to do it is place an email
link with a subject line already filled out for them.
<a href="mailto:email@tizag.com?subject=Feedback" >Email@tizag.com</a>
Here subject which is written as feedback will appear in subject box of email.
html - link targets
The target attribute defines how each link will open when clicked. Will each one open in a
new window, or will each one open in the current browser window?
Exercise 12:- Write the source code to create the web page to show the internal linking.
Create the webpage of the school which has different sections like Admission, Location,
Facility and sports.
<Table> tag :
Table tag is used to create a table in HTML. It consists of rows and columns. In HTML, each
table begins with a <Table> tag and ends with </Table> tag. Its attributes are Border,
Bordercolor, Bgcolor, Align, Cellpadding, Cellspacing, and Width & Height
Attributes of <Table> tag
Border: The Border attribute draws a border around the table. The value given with border
attribute specifies the width of the border of a table. If border attribute is not given, no
border will be displayed around the table.
Ex : <Table Border = 5>
Bordercolor : The Bordercolor attribute is used to set color of the border of the table. The
default colour of the border is gray.
19
Ex : <Table Bordercolor=”Red”>
Bgcolor : The Bgcolor attribute is used to specify the background color of a table.
Ex : <Table Bgcolor=”Green”>
Align : The align attribute is used to set the alignment of a table. The default alignment of a
table is left and it can be set to left, center or right.
Ex : <Table Align = “Center”>
Cellpadding : The Cellpadding attribute specifies the distance between the text and the cell
wall. It is given in pixels
Ex : <Table Cellpadding = 20>
CellSpacing : This attribute sets the distance between two adjacent cells. It is also given in
pixels.
Ex : <Table Cellspacing = 10>
Height : A table by default will be as large as the data that is entered into it. We can change
the height of a table by specifying the height attribute. The width attribute can be specified
either by giving the size in pixels or by giving relative percentage.
Ex. <Table Height = 400> or <Table Height = 50% >
Width : We can change the width of a table by specifying the width attribute. The width
attribute can be specified either by giving the size in pixels or by giving relative percentage.
Ex. <Table width = 500> or <Table width = “80%”>
<TR> Tag : This tag is used to start a new row. Each new row begins with the <TR> tag and
ends with </TR> tag. Its attributes are Bordercolor, Bgcolor, Align and Valign.
Attributes of <TR> tag
Bordercolor : used to change the border color for the cells of any specific row.
Ex. <TR Bordercolor = “Red”>
Bgcolor : used to change the background color of any specific row.
Ex. <TR Bgcolor = “Green”>
Align : used to specify the text alignment (left, right or center) for any specific row.
Ex. <TR Align = “Left”> aligns the content to the left side for the cells of any
specific row.
<TR Align = “Right”> aligns the content to the right side for the cells of any specific row.
<TR Align = “Center”> aligns the content to the center for the cells of any specific row.
20
Valign : used to set the vertical alignment of data in a row. The alignment can be set to top,
middle or bottom.
<TR Valign = “Top”> aligns the content to the top of the cells in a row.
<TR Valign = “Middle”> aligns the content to the middle of the cells in a row.
<TR Valign = “Bottom”> aligns the content to the top of the cells in a row.
<TH> Tag :
<TH> tag is used to define the column headings of the table. Its attributes are Bgcolor, Align
and Valign, colspan and rowspan.
<TD> Tag :
The Rows contain cells. <TD> tag is used to specify the data in cells. Its attributes are
Bordercolor, Bgcolor, Align and Valign.
Attributes of <TD> tag
Bordercolor : used to change the border color for the cell of any specific column.
Ex. <TD Bordercolor = “Red”>
Bgcolor : used to change the background color for the cell of any specific column.
Ex. <TD Bgcolor = “Green”>
21
Align : used to specify the text alignment (left, right or center) for the cell of any specific
column.
Ex. <TD Align = “Left”> aligns the content to the left side of a cell.
<TD Align = “Right”> aligns the content to the right side of a cell.
<TD Align = “Center”> aligns the content to the center of a cell.
Valign : used to set the vertical alignment of data for a cell of any specific column. The
alignment can be set to top, middle or bottom.
Ex. <TD Valign = “Top”> aligns the content to the top of the cell.
<TD Valign = “Middle”> aligns the content to the middle of the cell.
<TD Valign = “Bottom”> aligns the content to the bottom of the cell.
Colspan : used to combine cells horizontally. It specifies the number of columns that
the cell spans across and shows them as a single cell.
Rowspan = used to combine cells vertically. It merges the number of cells vertically
and show them as a single cell.
22
Exercise 17:- Write the source code to create the web page to create the web page as shown
in the image.
23
24