HYPER TEXT MARKUP LANGUAGE

U. Rangith.dip.ict
Instructor
Vocational Training Center
Vocational Training Authority of Sri Lanka

1
 HTML

Hyper Text Markup Language

World Wide Web

What is the www?

• The World Wide Web [www] is more often call “The Web”.
• The web is a Network of the Computers all over the World the entire computer in the
web can communicate with each other.
• All computer uses a communication stated call HTTP [Hyper Text Transfer Protocol]

How does the www work?

• Web information store in documents call “Web Pages”, web pages’ files are store on
computer is call Web Sever.
• Computer reading the web pages are calling “Web Clients”.
• Web Clients View the pages with a program call Web Browser.
• Popular Browsers are Internet Explorer and Google Chrome.

How does browser fetch the page?

All webpage a browser fetch a web from a Sever by request.
A request is standard HTTP request connecting a page address.
A webpage look like this Http://www.yahoo.com

210.211.217.253
210.211.217.43

How does the browser display the page?

• -All web pages contain instructions for display, the browser display the page byReading
these instructions. The most common display instruction called HTML tags.
• Internet Explorer, MOSAIC, Google Chrome, Netscape Navigator, Mozilla Firefox.

Who is making web stands?

• The web stranded are not made up by Netscape or Microsoft web. The rule making Body
of the web is W3C. W3C stand for the www consortium.
• W3C puts together speciation web standard, the most essential web stand isHTML
[Hyper Text Markup Language] and XML [Extensible Markup Language]
• The latest HTML stand is XHTML1.0

2
Introduction to HTML

What is HTML file?

Hyper Text markup Language. An HTML file is text fie connecting small markup tags. A
markup tags tell the web browser how to display the page. HTML file must have an .htm or
.html file extension An HTML files can be created using a smalltext editor.
The Editor Name: Notepad, Word Pad, MsWord.
Text Editor
Independent
Tags
High Level
Notepad

HTML Tools

Html tools has two controls

1. Editor
2. Browser

EDITOR

The editor means the user write the program [HTML] in the notepad with extension htm or
html. When execute these files all source which means the instructions given by user to
convert ASCII language. (American Standard Code for Information Interchange)

Notepad → ASCII [Executable]

File (htm/html)

APPLE 1011010
Compilers 1011101
Source Binary

Compilers ➔ Binary ➔ Source

APPLE 1011010 APPLE

Compilers 1011101 Interpreter

3
Compiler
A compiler it converts source language [human language] into machine language, which
means human does not understand, but machine can understand.

Interpreter
Binary Language convert source to the human readable format.

Browsers
Web browser, a software application used to locate and display Web pages. The two most
popular browsers are Microsoft Internet Explorer and Firefox. Both of these are a graphical
browser, which means that they can display graphics as well as text; In addition, most
modern browsers can present multimedia information, including sound and video, though
they require plug-ins for some formats.

.Htm or .html extension

When you save HTML file you can use either.

Html Tags
HTML Tags are used to markup...
HTML Elements
HTML Tags are surrounded by the 2 characters < and >[Less Than & Grater Than]
The surrounding characters are called Angle Brackets.
< Start, > End
HTML Tags are not case sensitive

HTML is a programming language?

• We say HTML is programming language. HTML is not a programming language in the
classical sense, No... it is a word processing program.

HTML does have some Element

• HTML is a Page DESCRIPTION Language, it browsers how to display document received
from remote severs.

HTML is called for Markup Language

• Because it takes regular text and graphic content and marks out the different elements
of the contents.

What is HTML Used For

• HTML is an International Standard used for publishing almost all web documents.

Where Can I see HTML?

In your browser, Internet Explorer ➔ locate View Sourceat the time you can see the HTML.

Parts of URL – Uniform Resource Locator

• The structure of URL hierarchical the first part specifies the protocol to be used to
transmit the resource and remains parts of URL indicates the name of the computer and
often includes the directory path and file name for specify, the URL has six parts.

4
 I. Protocol [Eg: HTTP] (Hyper Text Transfer Protocol)
II. Domain Name [Eg: .Com, .lk, .Org]
III. Port Address – IP Address
IV. Directory Path
V. Object of File Name
VI. Internal Links Anchor

What is a web Sever?

It is the software program; its collection of the web pages is call web Sever.

Why Learn HTML

To build A Web Site.

HTML Tag
A command inserted in a document that specifies how the document, or a portion of the
document, should be formatted. Tags are used by all format specifications that store
documents as text files.
• Empty Tags
• Pair Tags

Pair Tags
The Pair Tags means has two tags,
1. Start Tag <html>
2. End Tag </html>

Remarks1:
HTML command has mostly pair tags
<Html>..........</Html>

Empty Tag
Empty Tag that not effect HTML Program
<Hr>, <Br>

Remarks2:
Container tag or Pair Tag, which is having a pair Tag is called container tag, with out a pair
tag the html statement could not execute. Almost all the tags may have pair tags.

Basic Structure of a HTML Program

<Html>
<Head>
<Title>.............</Title>
</Head>
<Body>
||||||||||||||||||||||||||||
</Body>
</Html>

5
HTML Divided Two Section
1. Head Section
2. Body Section

Head Section
<Head><Title>......................</Title></Head>
Head Tags, The Head of and HTML documents which hold information about your document
such as Title containing with these two tags.

Title Tag
The Name of the Program, it has general format.
<Title> ........Text......</Title>

<Html>
<Head>
<Title>.....1st Html Program </Title>
</Head>

Body
The Body Elements encloses the main content of the document including heading paragraph
list table and images.

<Body>..............Bodyof Html.............</Body>

How Can You Develop Html Program?

Start ➔ Run ➔Type Notepad ➔ Okay
or
Start ➔ All Programs ➔ Accessories ➔Click Notepad

How can you save a html

In the Notepad, you should give the primary name and extension, such as .htm or .html
<<My Name>>.<<Extension>>
First.html or First.htm

After that you can see browser symbol in the particular location, if you click you will get very
nice Html Program.

Some Example for Practical

Write Down the Html Program given output

Name That as <<First.html>>

First.html

Body of the Program

6
Underline Tag
<U>.....Text......</U>

<Br>➔ Break A Row

Its use for breaking a line there is getting new line for web design.

Bold Tag
<B>.....Text......</B>

Italic Tag
<I>......Text......</I>

Stick Through Tag [Strike]

<S>.....Text.....</S>

Superscript Tag
<Sup>....Text.....</Sup>➔ 2 <Sup> nd </Sup>➔2nd

Subscript Tag
<Sub>....Text....</Sub>➔ H <Sub> 2 </Sub> O ➔H20

Heading Tags
<H1>.......Text............</H1>
<H2>.......Text............</H2>
<H3>.......Text............</H3>
<H4>.......Text............</H4>
<H5>.......Text............</H5>
<H6>.......Text............</H6>

Center Tag
<Center>.......Text............</Center>

Attributes of Body Tag....

<Body.....
Bgcolor = “color”  This means change Background color.
Text = “color”  This means Change the Text Color for Entire Page.
Background = “Filename with extension”  This means Load a
Image File to Page.
</Body>

Write The HTML Coding For Following Out Put...

 Title Of the Program

Bodyof the Program

7
Color System In Html

The Colors are specified two categories.

1. Standard Colors
2. Hexadecimal Colors

Standard Colors
Standard Colors are 16 available Black, Silver, Grey, White, Maroon,
Red, Purple, Fuchsia, Green, Lime, Olive, Yellow, Blue, Teal,
Navy, and Aqua.

Hexadecimal Colors
A hexadecimal color has syntax, 256 colors.
Color = [Red, Green, Blue] ➔ Its Call RGB

Red Green Blue

Bgcolor = [#0 – 255, 0 – 255, 0 – 255]➔ Its Call RGB

Colors Red Green Blue

Red FF 00 00
Green 00 FF 00
Blue 00 00 FF
Magenta FF 00 FF
Purple 99 00 FF
Light Grey BB BB BB

00 ➔ Its Mean Dark Colors

FF ➔ Its Mean Light Colors
Eg:
<Bodybgcolor = “#955545”>
||||||||||||||||||||||||||||||||||||||||||
</Body>

 Title of the Program

Body Of the Program

Background Picture
When the HTML program write in the notepad, and when the user called background
picture and the picture and html files are should save in same location.

8
JPEG Join Photo Export Group
It supportsTwo file extension, JPEG and BMP[Bitmap]
Horizontal Tag

<hr>
The Hr element Its for create a Line as Horizontal wise,
its an Empty Tag

Attributes of Horizontal Tag

<Hr
align = “Center” / “Left” / “Right”
Size = “Number” [Ex: 5]
width = “Percentage” [Ex: 75%]
color = “Color” >
Write the Html coding for the following output

 Title Of the Program

_
|
| Body Of the Program
|
|
|
|
|
|
_|

Comment Tag
The Comment Tag is used to easy to understand the particular text, but it’s not appear in
the browser,soit’s for understand a program to users.

<!...Comments Are Here...>

<Body> .........<!...Comments About Body......>......</Body>

Emphasis Style, it’s a pair Tag

<Em>.........Text..........</Em> Out Put is Text [Like Just Italic Option]

Big Tag
<Big>......Text / Contents.......</Big>
It’s mean enlarge Tag; it’s enlarge the content between these Tag.

Small Tag
<Small>........Text / Content.........</Small>
It’s mean Zoom Out the content between these Tags.

9
KBD Tag
This Tagchanges the contents between these tags as font style
<KDB>.......Text.......</KDB>

Pre Tag
It’s mean by Preformatted.
<Pre>......Text...........</Pre>

TT Tag Type Writer Format

<TT>..........Text............</TT>
Its change letters / text between these tags as Type Writer Format.
Marquee
This Tag is pair tag and used to add a stream text to your web page.
<Marquee>…….Text………</Marquee>
Attributes of Marquee
<Marquee
Bgcolor = “RGB”
Direction = “Left” / “Right” / “Up” / “Down”> ……Text…. </Marquee>

P Tag
P Tag is used to align a paragraph and to modify the paragraph.
Attributes of P Tag
<P
Align= “Left” / “Right”/ “Center” / “Justify”>…Paragraph….

List Tag
The List Tag has 06 categories, there are;
• Unordered List (UL)
• Order List (OL)
• Directory List (Dir)
• Menu List (Menu)
• Definition List
• Address List

Unordered List
Syntax
<UL
Type = “Disc” / “Circle”/ “Square”>
<LI>……Text 01……..</LI>
<LI>……Text 02……..</LI>
<LI>……Text 03……..</LI>
</UL>

10
Order List | Syntax
<OL
Type = “1” / “A” / “a” / “I” / “I”>
<LI>……Text 01……..</LI>
<LI>……Text 02……..</LI>
<LI>……Text 03……..</LI>
</OL>

Directory List
Syntax
<Dir>
<LI>………Text…………</LI>
<LI>………Text…………</LI>
<LI>………Text…………</LI>
</Dir>

Remarks 1
The Above dir function apply the web browser you create
the disc bellow 20

Remarks 2
In Unordered List without type value automatically or
default the disc bullet appears on the web browser.

Menu List
This Also similar like to Dir List.

Definition List Address List

Syntax Syntax
<DL> <Address>
<DT> Term Text 1 </DT> …..Text………. <BR>
<DD>……Text Definition…</DD> …..Text………. <BR>
<DT> Term Text 2 </DT> …..Text………. <BR>
<DD> Text Definition </DD> </Address> Its Change the text effect with
<DT> Term Text 3 </DT> new style for address text.
<DD> Text Definition </DD>
</DL>
Image Tag: Syntax
<Body>
<Img
Src = “Path”
Alt = “Text”
Width = “Number”
Height = “Number”
Border = “Number”
Align = “Left” / “Right” / “Top” / “Bottom” / “Middle”>
</Body>
11
Calling a HTML File
Syntax
This Tag is used to insert a hyperlink to your webpage, and when you click the typed text the
liked file or Information will be open instantly, you can also add image or html file…
<Body
<A Href = “File Name” / “File Name with Path” Target = "Frame_Name">
…........Text…............</A>
</Body>

Frameset
Frameset is a Pair Tag and we can use the frameset to divide the webpage in horizontal or
vertical wise.A Frameset Tag has two Attributes. The syntax of Frameset Tag.
<Html>
<Head><Title> Frameset Testing </Title></Head>
<Frameset>
</Frameset>
<Body>
<Html>

Attributes of Frame Tag (Rows)

<Frameset Rows= “25% , 75%”>
<Frame Src = “Filename with Extension”>
<Frame Src = “Filename with Extension”>
</Frameset>

iframe Syntax

An HTML iframe is defined with the <iframe> tag:

<html>
<Body>

<iframe src="demo_iframe.htm" height="200" width="300"></iframe>

</Body>
</html>

Paragraph Tag
<html>
<Body>
<p>I am normal</p>
<p style="color: #145856;"> I am red </p>
<p style="color:blue;"> I am blue </p>
<p style="font-size:36px;"> I am big </p>
</Body>
</html>

12
<P> Paragraph Tag
A paragraph is marked up as follows:
<p> This is some text in a paragraph. </p>
Attribute Value Description

align left Not supported in HTML5.

right Specifies the alignment of the text
center within a paragraph
justify
Example:
<Body>
<P Align="Center"/"Right"/"Left"/"Justify">............... Paragraph ............... </p>
</Body>

Pre Tag
<Pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>

Progress Tag
<html>
<Body>

Downloading progress:
<progress value="22" max="100">
</progress>

<p><strong>Note:</strong> The progress tag is not supported in Internet Explorer 9 and

earlier versions.</p>

Video Tag
<Body>

<video width="320" height="240" controls>

<source src="movie.mp4"
type="video/mp4">
<source src="movie.ogg"
type="video/ogg">
Your browser does not support the video tag.
</video>
<p><strong>Note:</strong> The video tag is not supported in Internet Explorer 8 and earlier
versions.</p>
</Body>
13
<Table> Tag
<Body>
<table border=1>
<Tr>
<Th> Table Heading1 Here </Th>
<Th> Table Heading2 Here </Th>
</Tr>
<Tr>
<Td>Data for Heading 1 </Td>
<Td> Data for Heading 2 </Td>
</Tr>
<Tr>
<Td> Data for Heading 1 </Td>
<Td> Data for Heading 2 </Td>
</Tr>
</table>
</Body>

Modification of Table
<Body>
<table align = "Center" border= "1" bordercolor = "Red" bgcolor = "Navy" Width = "200"
Height = "200" >
<Tr>
<Th></Th>
<Th></Th>
</Tr>
<Tr>
<Td>D</Td>
<Td></Td>
</Tr>
</table>
</Body>

Table Cell Merge (Rowspan / Colsspan>

<table border=1>
<Tr>
<Th colspan="2"> Table Heading1 Here </Th>
!!! Do not type this second Heading (Th) !!!
</Tr>
<Tr>
<Td>Data for Heading 1 </Td>
<Td> Data for Heading 2 </Td>
</Tr>
<Tr>
<Td> Data for Heading 1 </Td>
<Td> Data for Heading 2 </Td>
</Tr>
</table>
</Body>
14
<Select> Tag
<Body>
<Select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

</Body>

<Legend> Tag
<Body>
<form>
<fieldset>
<legend> ICTT Students </legend>
Name: <input type="text" size="30"><br><br>
Email: <input type="text" size="30"><br>
</fieldset>
</form>
</Body>

<OPTGroup>
<Body>
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
</Body>

<Object> Tag
<html>
<Body>
<object width="400" height="400"
data="helloworld.swf">
</object>
</Body>

15
<Mark> Tag
<Body>
<p>Do not forget to buy <mark> Rocky </mark> today. </p>
<p><strong>Note:</strong>The mark tag is not supported in Internet Explorer 8 and earlier
versions.</p>
</Body>

<Figure> Tag
<Body>
<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the
Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25
metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in
Norway.</p>

<figure>
<img src="img_pulpit.jpg" width="304" height="228">
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>
</Body>

<Datalist> Tag
<form action="/action_page.php" method="get">
<input list="browsers" name="browser">
<Datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</Datalist>
<input type="submit">
</form>
16
<Button> Tag

<Body>
<button type="button" onclick="alert('Hello
world!')">Click Me!
</button>
</Body>

<Address> Tag
<Body>
<Address>
Written by : Rocky Rangith <Br>
Visit us at: www.facebook.com/Rockyrangith<br>
Old Park Road <Br>
Wasington DC<Br>
USA.
</Address>
</Body>

<Abbr> Tag
<Body>

<P>The <Abbr title="This is a Tooltip"> Waht is Abbr Tag? </abbr></P>

</Body>

<Comment> Tag
<Body>

<!-- This is a comment -->

<P>This is a paragraph</P>
<!-- Comments are not displayed in the browser -->
</Body>

<Dir> Tag
<Body>
<Dir>
<Li>html</Li>
<Li>xhtml</Li>
<Li>css</Li>
</Dir>
</Body>

17
<Font> Tag

<Body>
<Font>Your Text Here</Font>
</Body>

Modification of Font Tag

<Body>
<Font Size="4" Face="Bamini" Color="Red">
,d;iwa jpdk; ,dpa jpdk;
</Font>
</Body>

<Details> Tag
<Body>

<Details>
<Summary> My Family </Summary>
<P> I have one Brother and one Sister. They all are very nice </P>
<p>I love my family soo much</p>
</Details>
</Body>

<Audio> Tag
<Body>
<Audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</Audio>
</Body>

Congratulations finally you have the basic knowledge of the HTML.

Go and try some new webpage with your illustration.

All the Best

With Best Regards
U. Rangith

18