Formatted: Top: 1.27 cm, Bottom: 1.
27 cm
● The internet, is a worldwide system of interconnected computer networks and electronic
devices that communicate with each other.
● WWW, or the World Wide Web, is a service that operates over the internet. It is a system of
interlinked hypertext documents accessed via the internet. It's a vast collection of information
and resources that users can explore using web browsers.
● A web browser is a software application that allows users to access and view information on
the World Wide Web. Eg: Mozilla Firefox, Google Chrome
● A website is a collection of related webpages that are accessible under a single domain name.
● A webpage is a single document, often written in HTML, that can be displayed in a web browser.
Introduction to HTML
● HTML stands for HyperText Markup Language. It is the standard language used to create and
design web pages on the internet. It was introduced by Tim Berners-Lee in 1991.
● Hypertext refers to text that contains links, called hyperlinks, that allow users to navigate to
other parts of the same document or to completely different documents.
● Markup languages are designed to structure, format, and present text-based documents.
● The core components of markup languages are tags and attributes.
HTML Tags
● HTML Tags are fundamental elements used to structure and format content on web pages.
● They provide instructions to web browsers on how to render text, images, links, and other media.
● HTML tags are enclosed in angle brackets < > and usually come in pairs: an opening tag
and a closing tag.
Types of HTML Tags
1. Paired Tags (Container Tags):
Paired tags have both an opening tag and a closing tag
Examples:
● <html>….</html>
● <head>.. </head>
● <title>…. </title>
● <body>… </body>
2. Empty Tags (Void or Self-Closing Tags):
These tags do not have a closing tag.
● Eg:- <br>,<hr>,<img> etc
Basic Structure of HTML Page
HTML Attributes
● All HTML elements can have attributes
● Attributes provide additional information about elements
● Attributes are always specified in the start tag
● Attributes usually come in name/value pairs like: name="value"
Heading Tags
● Heading tags are used to define headings or titles on a webpage.
● There are 6 levels of headings: <h1> to <h6>
● <h1> is the largest and <h6> is the smallest
● The align attribute is used to set the alignment of heading text.
● You can align the heading to the left, center, or right.
EXAMPLE
<h1 align=”center”>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
HTML <body> Tag and Its Attributes
● The <body> tag defines the main content of an HTML document.
● Everything inside the <body> is visible on the webpage.
Some attributes of <body> tag:
Attribute Use / Description Example
bgcolor Sets the background <body
color of the page bgcolor="lightblue">
text Sets the text color <body text="black">
Sets a background image
background for the page <body
background="[Link]">
Paragraph Tag
● The <p> tag is used to define a paragraph of text in HTML.
● It helps to separate text into readable sections.
● Each <p> tag automatically starts on a new line.
Formatted: Font color: Custom Color(RGB(24,128,56))
eg:-
<html>
<head>
<title> My page
</title>
</head>
<body bgcolor="lightyellow" text="black" background="[Link]">
<h1>Welcome to My Webpage</h1>
<p>This is a simple example.</p>
</body>
</html>
<hr> Tag and Its Attributes
● <hr> stands for Horizontal Rule.
● It draws a horizontal line to separate sections of content.
● It is an empty tag (no closing tag needed).
eg:-
<hr size="4" width="60%" align="center" noshade color="blue">
Formatting Tags
Formatting tags are used to style text — like making it bold, italic, or
underlined.
<html>
<head>
<title>Text Formatting Tags Example</title>
</head>
<body>
<center>
<h2>Text Formatting in HTML</h2>
</center>
<p>This is a <b>bold</b> word.</p>
<p>This is an <i>italic</i> word.</p>
<p>This is an <u>underlined</u> word.</p>
<p>This is a <big>big</big> word.</p>
<p>This is a <small>small</small> word.</p>
<p>Water formula: H<sub>2</sub>O )</p>
<p>Square of 5: 5<sup>2</sup> = 25 </p>
</body>
</html>
<font> tag: used to change the style of text, such as:
● face – specifies the font style
● size – sets the size of the text (1 to 7)
● color – defines the text color
<marquee> tag: used to create scrolling text or images.
● behavior – scroll / slide / alternate
● direction – left / right / up / down
● scrollamount – speed of scrolling
● bgcolor – background color of the marquee
<html>
<head>
<title>Font and Marquee Example</title>
</head>
<body>
<marquee behavior="scroll" direction="left" scrollamount="5"
bgcolor="lightblue">
Welcome to our HTML page with font and marquee!
</marquee>
<p><font face="Arial" size="5" color="red">This is a red Arial font of
size 5.</font></p>
<p><font face="Courier New" size="4" color="green">This is a green
Courier New font of size 4.</font></p>
<p><font face="Times New Roman" size="6" color="blue">This is a blue
Times New Roman font of size 6.</font></p>
</body>
</html>
HTML Lists
🔸 Unordered List (<ul>)
Displays items with bullets (•)
Types of bullets: disc (default), circle, square
<ul type="circle">
<li>Item 1</li>
<li>Item 2</li>
</ul>
Ordered List (<ol>)
Displays items with numbers/letters
You can set:
o type = 1, A, a, I, i
o start = number or letter to start with
o value inside <li> to override sequence
<ol type="A" start="3">
<li>Item 1</li>
<li>Item 2</li>
</ol>
Sample HTML Program Using All List Features
<html>
<head>
<title>HTML Lists Example</title>
</head>
<body>
<h2>Unordered List Example</h2>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
<h2>Unordered List with Circle Bullets</h2>
<ul type="circle">
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
<h2>Ordered List Example (Capital Letters)</h2>
<ol type="A">
<li>English</li>
<li>Math</li>
<li>Science</li>
</ol>
<h2>Ordered List Starting from 'G'</h2>
<ol type="A" start="7">
<li>History</li>
<li>Geography</li>
</ol>
<h2>Ordered List with 1,2,3</h2>
<ol type="1">
<li>Sanskrit</li>
<li>Malayalam</li>
</ol>
</body>
</html>
