HTML I - HTML Basics
❖ HTML stands for Hypertext Markup Language.
❖ HTML is neither a Programming language like python, c++, Java etc. nor a word
processing tool.
❖ HTML is a Markup language to design webpages.
❖ HTML is a document layout and hyperlink specification language.
HISTORY OF INTERNET
• World Wide (WWW) was invented in 1989 by Tim Berners Lee.
• Tim Berners-Lee invented the Web with HTML as its publishing language.
Steps for creating an HTML document
1. Open a text editor Notepad
2. Type the HTML code
3. Save the file with .html extension
4. To view your web page, Select HTML file 🡪 Right click🡪 Open or Open with
Google chrome or any web browser.
Note: You need to save the file with .html extension.
Note: HTML is not case sensitive.
Eg: <HEAD>, <head> or <Head> are the same in HTML.
Structure of an HTML page
<html>
<head><title>This is my first HTML code</title</head>
<body>
Let us design web pages
</body>
</html>
Basic Terminology
1. Tag - A tag is an HTML command that indicates how part of a web page should
be displayed.
Eg: <html>, <body>, <Head>, <title> etc.
2. Attribute - An attribute is used inside a tag to specify additional information
such as color, size, alignment etc.
Eg: bgcolor, text, size etc.
3. Element - An element has 3 parts - Start tag, End tag, content between start and
end tag.
Eg: <title> My first Webpage </title>
Container & Empty Elements
Container element - requires both starting & ending tag
Eg: <html>....</html> , <head>...</head>, <font>....</font>, <b>....</b>
Empty element - requires just a starting tag
Eg: <hr>, <br>, <img>, <base>, <code> etc.
Basic HTML Tags
1. <HTML> - identifies the document as an HTML document
● lang attribute - specifies the language used within the document
Eg: <html lang=en>
2. <HEAD> - define the header of page
3. <TITLE> - To specify the title of the document
4. <BODY> - To enclose all the tags, attributes and information to be displayed in
the web page.
● background - to add background images
● bgcolor - to add background colour to the page
● text - to change the color of the text
● link - to change colour of link
● alink - to change colour of active link
● vlink - to change colour of visited link
● leftmargin - to set the left margin
● topmargin - to set the top margin
Note: Default colour of link - underlined & blue, visited link - purple, active link - red
Eg:
<html>
<head>
<title>My second web page with attributes</title>
</head>
<body bgcolor=“yellow” background=”C:\Downloads\picture1.jpg” text=“red”
link=”yellow” alink=”lime” vlink=”red” leftmargin=60 topmargin=70>
HTML stands for Hypertext Markup Language
</body>
</html>
5. Headings in HTML
HTML has 6 levels of heading - <H1>, <H2>, <H3>, <H4>, <H5>, <H6>.
● align attribute - used to align the heading (left, right, center)
6. <P> - paragraph break
● align attribute - used to align the paragraph (left, right, center, justify)
7. <BR> - line break
8. <center> - to centralize a segment of text
9. <BASEFONT> - to set basic font size if no other font-size setting has been
provided (size=3). Closing tag </BASEFONT> is optional.
Eg: <HTML>
<HEAD> <TITLE> </TITLE> </hEAD>
<BODY>
<H1 align=center> Level 1 heading </H1>
<CENTER> <BASEFONT size=4> This is to centralize the text </CENTER>
<BR>
<P align=”right”> This paragraph is right aligned </P>
</BODY> </HTML>
10. <HR> - horizontal rule
● size - to set thickness
● width - to set length of the rule/line
● noshade - to display line without 3D effect
● color - to set color of line
11. <FONT> - lets you change size, style and color of text
● size - to set size of font
● color - to set color of font
● face - to set font style/type
Comments in HTML
HTML comments are textual content which appear in your HTML code, but not
rendered by the browser.
Comments are given between <!-- and -->.
Eg: <HTML>
<HEAD> <TITLE> Using Attributes of Font tag</TITLE> </hEAD>
<BODY>
<!-- This comment will not be rendered by the browser -->
</BODY>
</HTML>
12. Superscript and Subscript tags (<SUP> -superscript, <SUB> - subscript)
Eg: <HTML>
<HEAD> <TITLE> Using Attributes of Font tag</TITLE> </hEAD>
<BODY>
<H1> Level 1 heading </H1>
<HR size=3 width=”50%” color=”red” noshade>
X<SUP>2</SUP>
H<SUB>2</SUB>O
<FONT size=4 color=”Magenta” face=”Times New Roman”> This is for font
formatting</FONT>
</BODY>
</HTML>
Logical & Physical Text styles
Both logical and physical text styles are container elements.
Various logical styles are,
<DFN> , <EM>, <CITE>, <CODE>, <KBD>, <SAMP>, <STRONG>, <VAR>
Various physical text styles are,
<B> - bold, <I> - italics, <U> - underline, <TT> - typewriter text
Special characters
< - escape character for < (less than)
> - escape character for > (greater than)
& - escape character for & (and)
Lists in HTML
There are 3 basic types of lists in HTML - Ordered (numbered) list, Unordered
(unnumbered) list, Definition List.
1. Ordered list - are numbered lists having numbers or letters in front of each item.
Tags used :- <OL> - Ordered List, <LI> - List Item
● start attribute - specifies the number from which the list is started
● type attribute - used to specify the type of number for listing the items
(values - 1, A, a, I, i)
Eg: <OL>
<LI> Oranges </LI>
<LI> Apples </LI>
<LI> Grapes </LI>
</OL>
2. Unordered List - uses bullets to mark the list elements.
Tags used :- <UL> - Unordered List, <LI> - List Item
● type attribute - used to specify the type of bullet for listing the items
(values - disc, square, circle, none)
Eg:
<UL>
<LI> Apple </LI>
<LI> Oranges </LI>
<LI> Bananas </LI>
</UL>
3. Description List - a list of terms, with a description of each term.
Tags used - <DL> - Description List, <DT> - Data Term, <DD> - Data Definition
Eg: <HTML>
<HEAD>
<TITLE> Description List </TITLE>
</HEAD>
<BODY>
<H2>A Description List</H2>
<DL>
<DT>Coffee</DT>
<DD>- 500 gms</DD>
<DT>Milk</DT>
<DD>- 1 ltr Tetra Pack</DD>
</DL>
</BODY>
</HTML>
Nested list
A nested list or a sublist is a list within a list.
Eg 1: Write an HTML document to display the following web page:
Parts of the computer system
1. Input devices
● Keyboard
● Mouse
● Scanner
● MICR
2. Output devices
▪ Printer
▪ Speakers
▪ Plotter
<HTML>
<HEAD><TITLE> Nested List Example </TITLE> </HEAD>
<BODY>
<FONT size=8 color=”red”>
<CENTER>Parts of the computer system</CENTER>
</FONT>
<FONT size=6 color=green>
<OL>
<LI>Input devices</LI>
<UL>
<LI>Keyboard</LI>
<LI>Mouse</LI>
<LI>Scanner</LI>
<LI>MICR</LI>
</UL>
<LI>Output devices</LI>
<UL type=”square”>
<LI>Printer </LI>
<LI>Speakers</LI>
<LI>Plotter</LI>
</UL>
</OL>
</FONT>
</BODY>
</HTML>
Develop web pages(HTML codes) for the following web documents:
Eg 2:
1. Top 6 cars in the World
● Ferrari Pininfarina Sergio
● Aston Martin
● Maruti Suzuki
● MG Motor
● Hyundai
● Toyota
2. World's Fastest Motorcycles
o Kawasaki Ninja
o BMW S1000
o Bajaj Pulsar
o TVS Apache
o Honda Hornet
o Yamaha
o Royal Enfield
<HTML>
<HEAD><TITLE>nested list</TITLE></HEAD>
<BODY>
<FONT size=6>
<OL>
<LI> Top 6 cars in the World</LI>
<UL>
<LI>Ferrari Pininfarina Sergio </LI>
<LI>Aston Martin </LI>
<LI>Maruti Suzuki</LI>
<LI>MG Motor</LI>
<LI>Hyundai</LI>
<LI>Toyota</LI>
</UL>
<LI> World's Fastest Motorcycles </LI>
<UL type=circle>
<LI>Kawasaki Ninja </LI>
<LI>BMW S1000 </LI>
<LI>Bajaj Pulsar </LI>
<LI>TVS Apache </LI>
<LI>Honda Hornet </LI>
<LI>Yamaha </LI>
<LI>Royal Enfield</LI>
</UL>
</OL>
</FONT>
</BODY></HTML>
Eg 3:
Internal Parts of the Computer
1. Input Devices
2. Output devices
3. CPU
▪ ALU
▪ Control Unit
▪ Memory Unit
a. Internal memories
i. RAM
ii. ROM
b. External memories
1. CD/DVD
2. Pen Drive/Card Reader
<HTML>
<HEAD><TITLE>Nested List</TITLE></HEAD>
<BODY>
<FONT size=8>
<CENTER>Internal parts of the computer system</CENTER></FONT>
<FONT size=6>
<OL>
<LI>Input devices</LI>
<LI>Output devices</LI>
<LI>CPU</LI>
<UL type=square>
<LI>ALU</LI>
<LI>Control Unit</LI>
<LI>Memory Unit</LI>
<OL type=”a”>
<LI>Internal memories</LI>
<OL type=”I”>
<LI>RAM</LI>
<LI>ROM</LI>
</OL>
<LI>External memories</LI>
<OL>
<LI>CD/DVD</LI>
<LI>Pen Drive/Card Reader </LI>
</OL>
</OL>
</UL>
</OL>
</FONT>
</BODY>
</HTML>
