Unit – II : HTML
HTML (Hypertext Markup Language) is the standard markup language used for creating web
pages. It defines the structure and presentation of content on the World Wide Web. In this
unit, we will explore the origins of HTML, its basic syntax, the standard HTML page structure,
and various elements for text markup, images, hyperlinks, lists, tables, and forms.
Origins of HTML:
HTML was originally created by Tim Berners-Lee in 1990 as a means of structuring and
sharing scientific information at CERN (European Organization for Nuclear Research). It has
evolved over the years and is currently maintained and standardized by the World Wide Web
Consortium (W3C).
Basic Syntax:
HTML documents are plain text files with a .html extension. They consist of HTML tags
enclosed in angle brackets (< >). Tags are used to define elements and structure the content
of a web page. The basic structure of an HTML document includes the <!DOCTYPE>
declaration, <html>, <head>, and <body> tags.
Standard HTML Page Structure:
The standard structure of an HTML page consists of the following elements:
● The <!DOCTYPE html> declaration specifies the HTML version.
● The <html> element serves as the root element of the HTML document.
● The <head> element contains meta-information about the page, such as the title
displayed in the browser's title bar.
● The <body> element encapsulates the visible content of the web page.
Notes by Harshit || WhatsApp: 9801907094
Unit – II : HTML
Text Markup:
HTML provides tags to mark up and structure text. Some commonly used text markup tags
include:
● <h1> to <h6>: Heading levels 1 to 6, with `<h1>` being the highest level.
● <p>: Paragraph.
● <b>: Bold text.
● <i>: Italicized text.
● <u>: Underlined text.
● <s>: Strikethrough text.
● <sup>: Superscript text.
● <sub>: Subscript text.
Notes by Harshit || WhatsApp: 9801907094
Unit – II : HTML
Output:
Images:
To display images on a web page, you can use the `<img>` tag. It requires the `src` attribute
to specify the image file's URL and the `alt` attribute to provide alternative text for accessibility
purposes.
Notes by Harshit || WhatsApp: 9801907094
Unit – II : HTML
Hyperlinks:
Hyperlinks allow users to navigate between web pages. They are created using the `<a>` tag.
The `href` attribute specifies the URL of the destination page, and the link text appears
between the opening and closing `<a>` tags.
In this example:
● The first <a> tag creates a hyperlink to the website "https://www.example.com" with
the link text "Visit Example.com".
● The second <a> tag is within an unordered list <ul>, creating a list of useful websites
with clickable links.
● The third and fourth <a> tags demonstrate linking to specific sections within the same
page using anchor tags. The href attribute is set to the corresponding id attribute of
the target section. Clicking on these links will scroll the page to the respective
sections.
Notes by Harshit || WhatsApp: 9801907094
Unit – II : HTML
Output:
Lists: HTML supports ordered lists (`<ol>`), unordered lists (`<ul>`), and definition lists
(`<dl>`). List items are defined using the `<li>` tag within the appropriate list container.
Ordered Lists (`<ol>`):
● Ordered lists are created using the `<ol>` tag.
● Ordered lists are used when the order of the list items is important.
● Each list item is defined using the `<li>` tag.
● The list items are automatically numbered in ascending order by default.
Unordered Lists (`<ul>`):
● Unordered lists are created using the `<ul>` tag.
● Unordered lists are used when the order of the list items is not important.
● Each list item is defined using the `<li>` tag.
● The list items are displayed with bullet points by default, but the bullet style can be
customized using CSS.
Definition Lists (`<dl>`):
● Definition lists are created using the `<dl>` tag.
● Definition lists are used to define terms and their corresponding definitions.
● Each term is defined using the `<dt>` tag, which stands for definition term.
● Each definition is defined using the `<dd>` tag, which stands for definition
description.
● The term and its definition are displayed together as a pair.
Notes by Harshit || WhatsApp: 9801907094
Unit – II : HTML
Notes by Harshit || WhatsApp: 9801907094
Unit – II : HTML
Output:
Tables:
Tables in HTML are created using the `<table>` tag. The table structure consists of rows
defined by the `<tr>` tag and data cells within each row defined by the `<td>` tag. Additional
tags like `<th>` can be used for header cells.
Forms:
HTML forms allow users to input data and submit it to a server for processing. They are
created using the `<form>` tag. Various form elements like `<input>`, `<select>`, and
`<textarea>` are used to capture different types of user input.
Understanding HTML and its various elements is essential for structuring and presenting
content on web pages. These concepts form the backbone of web development and provide
the foundation for creating interactive and visually appealing websites.
Notes by Harshit || WhatsApp: 9801907094
