Introduction to HTML
What is HTML?
HTML stands for HyperText Markup Language.
HTML is the standard language for creating web pages.
HTML describes the structure of a web page.
HTML consists of a series of elements.
HTML tell the browser how to display the content.
HTML elements are represented by tags.
HTML tags label pieces of content such as “heading”, “Paragraph”, “table”, and so on.
Browsers do not display the HTML tags but use them to render the content of the page.
Features of HTML:
• Easy to learn and use
• Platform-independent
• Supports multimedia (images, video, audio)
Hypertext vs Normal Text
Normal Text Hypertext
Static text Contains links (hyperlinks)
Used in documents Used on websites
Cannot redirect Can redirect to other pages or sites
Description of HTML Structure
<Html>
……………. Defines the HTML document
</Html>
<Head>
…………… Header Information
</Head>
<Title>
…………… Title bar information
</Title>
<Body>
……………. Page contents
</Body>
Basic Structure of an HTML Document
<html> Starting HTML tag
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is a simple webpage. </p>
</body>
</html> Closing HTML tag
Tag Types:
• Paired tags: <p> ... </p>
• Single tags: <br>, <img>
Exercise 1: Identify HTML Tags
Open a webpage in your browser. Right-click and choose "View Page Source". Identify the
following:
• <html>, <head>, <title>, <body>
Header Tag
• The <h1> element defines a large heading
• The <h6> element defines a small heading
According to size
<h1> > <h2> > <h3> > <h4> > <h5> > <h6>
Break Tag
• The <br> tag inserts a single line break.
• The <br> tag is an empty tag which means that it has no end tag.
Paragraph Tag
• Paragraph tag defines a paragraph
• This tag has opening and closing tag <p> … <p>
• This tag form white space or line space before and after the paragraph
Paragraph Tag and Break Tag
Bold Tag
We can use <b> and <strong> tags to bold the text.
Italic tag
We can use <i>, <cite> and <em> tags to italic the text
Center Tag
It centralizes the text
Underline Tag
It used to underline the text
Strike Tag
Mark Tag
Subscript Tag
Superscript Tag
Marquee tag
Gives Horizontally Moving Text
Common Formatting Tags:
Tag Purpose
<b> Bold text
<i> Italic text
<u> Underline text
<br> Line break
<p> Paragraph
<em> Emphasis
<s> /<strike> Strike out
<sup> Superscript
<sub> Subscript
<marquee> Horizontally Moving Text
<font color="green"> Change the color of the text
Example:
<p>This is <b>bold</b> and <i>italic</i> text.</p>
<p>This is a new paragraph.<br>This is the next line.</p>
<font color="green">This is green text.</font>
Exercise 2: Format Your Text
Write HTML to show:
• A paragraph with bold and italic text
• A sentence that breaks into two lines
• Text in different colors
Attributes
• All HTML elements can have attributes
• Attributes adds additional information about the tag
Example:
Opening and Closing Tag order
Alignment
Align tag is used to align the paragraph, tables, images and objects
<p align =”right”> welcome </p>
We can use right, left, center and justify to align the paragraph.
Horizontal Rule
The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).
The <hr> element is most often displayed as a horizontal rule that is used to separate content
(or define a change) in an HTML page.
Moving Text
• <marquee> tag gives the movement to the text
• Right to left is the default movement
<marquee direction = “right”> hello </marquee>
• We can use right, left, up and down for the movement
• Scrollamount is another attribute defines the speed of the moving text
Example: <marquee scrollamount = “20”> Welcome </marquee>
List
List can be categorized into 3 types
1. Ordered list
2. Unordered list
3. Definition list
Ordered List
• An ordered list starts with the <ol> tag.
• Each list item starts with the <li> tag.
• Numberings will appear default
We can change the Pattern
When we have an idea to start the order from “F”
Nested Ordered List
Unordered List
• An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
• Unordered list takes disc type as the default
• We can use square, disc and circle.
Nested Unordered List
Definition list
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the
<dd> tag describes each term:
Exercise 3: Create Lists
• Make an ordered list of your 3 favorite movies.
• Create an unordered list of 3 fruits.
Tables in HTML
• An HTML table is defined with the <table> tag.
• Each table row is defined with the <tr> tag.
• A table header is defined with the <th> tag. By default, table headings are bold and
centered.
• A table data/cell is defined with the <td> tag
When we give border as attribute
How to add title to table?
<caption> tag defines the title
Colspan
How to make this below table?
Rowspan
How to make this below table?
Exercise 4: Make a Table
Create a table showing your class timetable or your friends’ names and favorite subjects.
Adding Images
• In HTML, images are defined with the <img> tag.
• The <img> tag is empty, it contains attributes only, and does not have a closing tag.
• The src attribute specifies the URL (web address) of the image:
• The alt attribute provides an alternate text for an image, if the user for some reason cannot
view it (because of slow connection, an error in the src attribute, or if the user uses a screen
reader).
Syntax:
<img src="college [Link]" alt="Description" width="200" height="150">
• src – Image location
• alt – Alternate text
• width/height – Resize image
Exercise 5: Insert an Image
Use a local or online image URL to display an image on your page with appropriate alt text.
Hyperlinks
Hyperlink is an element in an html document that links to either another portion of the
document or to another document altogether.
Example:
Syntax:
<a href="[Link] Example</a>
• href – Link address
❖ Anchor tag
Example 2:
<a href = “[Link]”> open </a>
We can connect any type of file or images in hyperlink.
Example 3:
<a href = “[Link]” target = “_blank”> link</a>
(when we click the “link” displayed on the web page, “[Link]” will open in another web
page)
❖ Image Hyperlink
<a href = “[Link]”> <img src = “[Link]”></a>
([Link] image will display on the web page, when click the image “[Link]” webpage will
open in the same web site)
Exercise 6: Add a Link
Create a link to Google or your school website. Try both:
• Text link
• Image as a link
Using Multiple Tags Together
You can combine tags:
<p><b><i>This is bold and italic text.</i></b></p>
<font color="red"><u>Underlined and red</u></font>
Exercise 7: Combine Tags
• Create a line of text that is bold, underlined, and blue.
• Make a list where each item has a different color.
Final Project: Mini Web Page
Objective:
Create a webpage titled "My Profile" that includes:
• A heading
• A paragraph about yourself
• Your photo
• A hyperlink to your favorite website
• An ordered list of your hobbies
• A table showing your weekly schedule
Save As:
my_profile.html and open in a browser.
