Introduction to HTML
WHAT IS HTML?
HTML stands for Hyper Text Markup Language.
HYPER: All over the place.
TEXT: We are working with text files only.
MARKUP: In order to create web pages, we will be typing in the
text and then marking up the text.
LANGUAGE: It is a method of creating a web page using certain
syntax.
KEY FEATURES OF HTML
❖ It is a platform-independent language.
❖ It allows us to add a link on the web page.
❖ It is not case sensitive.
❖ It is a very easy and simple language.
❖ It provides a flexible way to design web pages along with text.
STRUCTURE OF HTML
<HTML>
<HEAD>
<TITLE>………………..</TITLE>
</HEAD>
<BODY>
<P>………..</P>
<H1>………..</H1>
<BR>
<HR>
</BODY>
</HTML>
HTML TAGS AND THEIR ATTRIBUTES
BODY TAGS AND THEIR ATTRIBUTES
1. bgcolor Attribute Combined Example
•Used to set the background color of the webpage. <html>
•Accepts color names (red, blue, yellow) or color codes <head>
(#ff0000). <title>Body Tag Example</title>
Example:
<body bgcolor="lightblue">
</head>
<body bgcolor="lightyellow"
2. background Attribute background="[Link]" text="black">
•Used to set a background image for the webpage. <h1>Welcome Students!</h1>
•The image should be in the same folder or use an image URL. <p>This page shows how BODY attributes
Example: work.</p>
<body background="[Link]"> </body>
3. text Attribute </html>
•Used to set the color of the text on the webpage.
Example:
<body text="darkblue">
HTML FORMATING TAGS
1. Bold Tag – <b> Combined Example
Purpose: <p>
The <b> tag is used to make the text bold, which means
This is <b>bold</b> text,
thicker and darker than normal text.
It is used when you want to highlight important words.
this is <i>italic</i> text, and
Example: this is <u>underlined</u> text.
<b>This is bold text.</b> </p>
2. Italic Tag – <i>
Purpose:
The <i> tag makes the text italic, meaning the letters are
slanted to the right.
It is used for emphasis, foreign words, or titles.
Example:
<i>This is italic text.</i>
3. Underline Tag – <u>
Purpose:
The <u> tag adds a underline below the text.
It is used to bring attention to important points or headings.
Example:
<u>This is underlined text.</u>
LISTS IN HTML
HTML provides two main types of lists:
1. Unordered List (<ul>) 2. Ordered List (<ol>)
•Shows items with bullet points. •Shows items with numbers (1, 2, 3).
•Used when the order of items does not matter. •Used when the order of items matters.
Structure: Structure:
•<ul> → Starts an unordered list •<ol> → Starts an ordered list
•<li> → Each item in the list •<li> → List item
Example: Example:
<ul> <ol>
<li>Apple</li> <li>Wake up</li>
<li>Mango</li> <li>Brush teeth</li>
<li>Banana</li> <li>Go to school</li>
</ul> </ol>
This will display: This will display:
• Apple [Link] up
• Mango [Link] teeth
• Banana [Link] to school
HTML TAGS AND THEIR ATTRIBUTES
HTML TAGS AND THEIR ATTRIBUTES
HTML TAGS AND THEIR ATTRIBUTES
HTML TAGS AND THEIR ATTRIBUTES
CREATING AND SAVING AN HTML DOCUMENT
VIEWING A WEB PAGE
Q. Create an HTML Document which includes:
❖ Your Name (in Bold, Underlined and centred)
❖ Paragraph about you.
❖ A Horizontal Line – Colour (RED) and Size(10)
❖ Your Likes and Dislikes (using list tags)
❖ Background Colour - AQUA
Note: Use <H1>,<BR>, <HR>,<P>,<B>,<U>,<UL>,<OL>