MODULE 2: INTRODUCTION TO HTML
HTML stands for HyperText Markup Language. It was developed by Tim Berners-Lee in
1991. HTML is the standard markup language used for creating web pages. It describes the
structure of a web page and consists of a series of elements.
HTML is not a programming language; it is a mark-up language that tells web browsers
how to display content.
It organizes content into parts like headings, paragraphs, images, links, and more.
HTML is used to build websites.
It is supported by all browsers.
It can be integrated with other languages like CSS, JavaScript, etc.
Basic Structure of an HTML document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
contents …..
</body>
</html>
The <!DOCTYPE html> declaration defines that this document is an HTML5
document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
HTML Elements
An HTML Element consists of a start tag, content, and an end tag, which
together define the element’s structure and functionality.
HTML Elements are the basic building blocks of a webpage and can represent
different types of content, such as text, links, images, or headings.
Syntax
<tagname>Content goes here...</tagname>
Examples of some HTML elements:
<title>My First Heading</title>
<p>My first paragraph.</p>
An opening tag indicates where the content begins: <tagname>.
A closing tag indicates where the content ends: </tagname>.
The actual content resides between the opening and closing tags.
HTML tags are not case-sensitive. For example, <B> and <b> both represent bold text.
However, it’s a best practice to use lowercase tags for consistency and readability.
HTML Empty Element or void elements
HTML Elements that do not require a closing tag is known as empty or void element.
<br>, <hr>, <link>, <input> ,<img> etc are HTML empty elements.
HTML - Basic Tags
HTML tags are the fundamental elements of HTML used for defining the structure of the
document. These are letters or words enclosed by angle brackets (< and >).
Heading Tags
Heading tags are used to define headings of documents. You can use different sizes for your
headings. HTML also has six levels of headings, which use the
elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While
<h1>Here is a first heading.</h1>
Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text
should go in between an opening <p> and a closing </p> tag.
<p>Here is a first paragraph of text.</p>
Line Break Tag
Whenever you use the <br /> element, anything following it starts from the next line.
<p>Hello<br />My first website.<br /> developed<br /> using html</p>
Center Tag
The <center> tag aligns text, images, or other HTML elements in the middle of a web page.
<center> <p>This text is in the center.</p> </center>
Horizonal Rule Tag
The horizontal rule (<hr>) tag displays a horizonal line. The <hr> tag creates a line from the
current position in the document to the right margin and breaks the line accordingly.
<p>This is paragraph one and should be on top</p> <hr /> <p>This is paragraph two and should
be at bottom</p>
HTML Text Formatting tags
HTML text formatting refers to the use of specific HTML tags to modify the appearance
and structure of text on a webpage. It allows you to style text in different ways.
1. <i> – Italicizes text
Use the <i> tag to display text in italics without implying emphasis.
<i>This is italic text.</i>
2. <small> – Reduces the font size of the text
The <small> tag renders text in a smaller font than the surrounding text.
<small>This text is smaller than the rest.</small>
3. <ins> – Highlights inserted text
The <ins> tag marks text as newly added or inserted, often displayed with an underline.
<ins>This is inserted text.</ins>
4. <sub> – Displays subscript text
Use the <sub> tag for subscripted text, often used in chemical formulas or footnotes.
H<sub>2</sub>O
5. <strong> – Emphasizes important text, often rendered in bold
The <strong> tag is semantically meaningful and indicates that the text is of high
importance.
<strong>This text is bold and important.</strong>
6. <b> – Makes text bold
The <b> tag visually makes the text bold but does not imply any special significance.
<b>This is bold text.</b>
7. <mark> – Highlights text with a background color
The <mark> tag highlights text with a background color, similar to using a highlighter on
paper.
<mark>This text is highlighted.</mark>
8. <del> – Strikes through text
The <del> tag is used to show that text has been deleted or is no longer relevant.
<del>This text is crossed out.</del>
9. <em> – Emphasizes text, typically italicized
The <em> tag is used for emphasized text and is usually rendered in italics to highlight
importance.
<em>This text is emphasized.</em>
10. <sup> – Displays superscript text
Use the <sup> tag to show superscripted text, commonly used in exponents or footnotes.
E = mc<sup>2</sup>
HTML Attributes
HTML attributes are special words that provide additional information to an HTML element.
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"
Below is the syntax of an element HTML having attribute
<tag_name attribute_name="value">contents…</tag_name>
The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:
<a href="https://www.youtube.com">Visit youtube</a>
The src Attribute
The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path
to the image to be displayed:
<img src="img_flower.jpg">
The width and height Attributes
The <img> tag should also contain the width and height attributes, which specify the width and
height of the image (in pixels):
<img src="img_flower.jpg" width="500" height="600">
The alt Attribute
The required alt attribute for the <img> tag specifies an alternate text for an image, if the image
for some reason cannot be displayed. This can be due to a slow connection, or an error in
the src attribute, or if the user uses a screen reader.
<img src="img_flower.jpg" alt="beautiful roses ">
The style Attribute
The style attribute is used to add styles to an element, such as color, font, size, and more.
<p style="color:red;">This is a red paragraph.</p>
The lang Attribute
You should always include the lang attribute inside the <html> tag, to declare the language of the
Web page. This is meant to assist search engines and browsers.
The following example specifies English as the language:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
The title Attribute
The title attribute defines some extra information about an element.
The value of the title attribute will be displayed as a tooltip when you mouse over the element:
<p title="I'm a tooltip">This is a paragraph.</p>
Creating hyperlinks
HTML Links
A hyperlink is a specific type of link that allows users to navigate from one web page or resource
to another by clicking on it. You can create hyperlinks using text or images available on a
webpage. A hyperlink is created using the HTML Anchor Tag (</a>).
An anchor tag, or <a> tag, is a basic element that creates hyperlinks between two pages.
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
The most important attribute of the <a> element is the href attribute, which indicates the link's
destination.
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL address.
<a href="https://www.youtube.com/">Visit youtube.com!</a>
HTML - Images
HTML images provide visual content for web pages, enhancing user experiences and conveying
information. They can be photographs, graphics, icons, or illustrations.
The following is the basic syntax for HTML images:
<img src="url" alt="alternatetext">
Note: The <img> tag is an empty tag, which means that it can contain only a list of attributes and
has no closing tag.
<img src="image_path" alt="Alternate text for the image" width="200px" height="150px" />
src: The src attribute defines the path of the image (image URL).
alt: The alt attribute defines the alternate text; if there is a broken link to the image path, the
alternate text displays on the webpage.
width and height: The width and height attribute define the height and width for the image.
Make sure you specify the correct image file name in the src attribute. The image name is always
case-sensitive.
The alt attribute is an optional attribute but recommended as it specifies an alternate text for an
image if the image cannot be displayed.
HTML Lists
An HTML List allows you to organize data on web pages into an ordered or unordered
format to make the information easier to read and visually appealing. HTML Lists are very
helpful for creating structured, accessible content in web development.
Types of HTML Lists
There are three main types of lists in HTML:
1. Unordered Lists (<ul>): These lists are used for items that do not need to be in any
specific order. The list items are typically marked with bullets.
2. Ordered Lists (<ol>): These lists are used when the order of the items is important.
Each item in an ordered list is typically marked with numbers or letters.
3. Description Lists (<dl>): These lists are used to contain terms and their corresponding
descriptions.
1. HTML Unordered List or Bulleted List
Unordered lists are ideal for scenarios where the sequence of the items is not important.
The unordered list items are marked with bullets, also known as bulleted lists. An
unordered list starts with the <ul> tag, and each list item begins with the <li> tag.
Syntax:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Item 1
Item 2
Item 3
style=”list-style-type:disc”; it specifies which kind of marker is used in the list. eg:
disc,circle,square or none.
2. Using HTML Ordered List
Ordered lists are used when the items need to follow a specific sequence.
In an ordered list, all list items are marked with numbers by default. An ordered list starts
with the <ol> tag, and each list item begins with the <li> tag.
<ol>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>
1. Item 1
2. Item 2
3. Item 3
type: It defines which type(1, A, a, I, and i) of the order you want in your list of numeric,
alphabetic, or roman numbers.
3. Using HTML Description 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 details.
Syntax:
<dl>
<dt>Item 1</dt>
<dd>Description of Item 1 </dd>
<dt>Item 2</dt>
<dd>Description of Item 2</dd>
</dl>
Item 1
Description of Item 1
Item 2
Description of Item 2
Nested List in HTML
A nested list in HTML is a list that contains other lists within its list items. This creates a
hierarchical structure.
eg:
Subjects
o Malayalam
o English
o maths
o computer science
c
python
web
Table
HTML Tables allow you to arrange data into rows and columns on a web page, making it
easy to display information in a structured way.
<table> used for creating HTML table
<tr> used for creating a table row
<th> used for creating table heading
<td> used for creating table data
Note: By default <th> tag is bold and centrally aligned
By default <td> tags are regular and left aligned.
HTML Table example
<!DOCTYPE html>
<html>
<body>
<table border=”1”>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Mark</th>
</tr>
<tr>
<td>Priya</td>
<td>Bsc cs</td>
<td>98</td>
</tr>
<tr>
<td>Arun</td>
<td>English</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Bcom </td>
<td>41</td>
</tr>
</table>
</body>
</html>
Name Subject Mark
Priya Bsc cs 98
Arun English 32
Sam Bcom 41
HTML Table Colspan & Rowspan
HTML tables can have cells that span over multiple rows and/or columns.
To make a cell span over multiple columns, use the colspan attribute:
<th colspan=”2” >subject </th> // span over 2 columns
To make a cell span over multiple rows, use the rowspan attribute:
<th rowspan=”3” >name</th> // span over 3 rows
