INTRODUCTION TO HTML

UNIT – 1

WHAT IS INTERNET?
The Internet is essentially a global network of computing
resources. You can think of the Internet as a physical collection of routers
and circuits as a set of shared resources.
Some common definitions given in the past include −
⦁ A network of networks based on the TCP/IP communications
protocol.
⦁ A community of people who use and develop those networks.

INTERNET-BASED SERVICES
Some of the basic services available to Internet users are −
⦁ Email − A fast, easy, and inexpensive way to communicate with
other Internet users around the world.
⦁ Telnet − Allows a user to log into a remote computer as though it
were a local system.
⦁ FTP − Allows a user to transfer virtually every kind of file that can
be stored on a computer from one Internet-connected computer to
another.
⦁ UseNet news − A distributed bulletin board that offers a combination
news and discussion service on thousands of topics.
⦁ World Wide Web (WWW) − A hypertext interface to Internet
information resources.

1
WEB BROWSERS
⦁ The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to
read HTML documents and display them correctly.

⦁ A browser does not display the HTML tags, but uses them to
determine how to display the document

How does a Web Browser Work?

⦁ A web browser helps us find information anywhere on the internet.

It is installed on the client computer and requests information from
the web server such a type of working model is called a client-server
model.

⦁ The browser receives information through HTTP protocol. In which

transmission of data is defined. When the browser received data
from the server, it is rendered in HTML to user-readable form and,
information is displayed on the device screen.

2
Website Cookies

When we visited any website over the internet our web browser
stores information about us in small files called cookies. Cookies are
designed to remember stateful information about our browsing history.
Some more cookies are used to remember about us like our interests, our
browsing patterns, etc. Websites show us ads based on our interests using
cookies.

SOME POPULAR WEB BROWSERS:

Here is a list of 7 popular web browsers:

1. Google Chrome:
Developed by Google, Chrome is one of the most widely-used web
browsers in the world, known for its speed and simplicity.
2. Mozilla Firefox:
Developed by the Mozilla Foundation, Firefox is an open-source browser
that is known for its privacy features and customization options.
3. Apple Safari:
Developed by Apple, Safari is the default browser on Mac and iOS devices
and is known for its speed and integration with other Apple products.
4. Microsoft Edge:
Developed by Microsoft, Edge is the default browser on Windows 10 and
is known for its integration with other Microsoft products and services.
5. Tor Browser:
Developed by The Tor Project, Tor Browser is a web browser that is
designed for anonymous web browsing and is based on Mozilla Firefox.
6. Opera:
Developed by Opera Software, Opera is a web browser that is known for
its speed and built-in VPN feature.
7. Brave:
Developed by Brave Software, Brave is a web browser that is focused on
privacy and security and blocks third-party ads and trackers by default.
These are some of the most popular web browsers, there are other
3
browsers available such as Vivaldi, Waterfox, and so on. The choice of a
web browser depends on the user’s preference and requirements.

WEB PAGES
A webpage is a digital document that is linked to the World Wide
Web and viewable by anyone connected to the internet having a web
browser. It can contain any type of information, such as text, color,
graphics, animations, videos, sounds, etc.
A webpage is a document that is written in the HTML, it can be
viewed from the Internet. It can be accessed by entering the URL on the
address bar of the web browser.

COMPONENTS OF WEB PAGE

Content-wise the components of a webpage are:

⦁ Hypertext and Hyperlinks

⦁ Hypertext :
It refers to a digital text, which is more than just text as it can
include information in various media formats such as :
• text
• color
• graphic
• animation
• video
• sound

4
• hyperlinks

⦁ Hyperlinks :
It refers to a link from a hypertext file to another such file. A
hyperlink can be in the form of a graphic or text, upon clicking where the
linked document opens up.
Structure Wise :
Structure wise the components of a web page are :
• Page Title
• Header
• Body of the Web page
• Navigational Links
• Footer

CHARACTERISTICS OF A WEB PAGE

Following are some characteristics of a Web page:
⦁ A simple webpage can be created very quickly.
⦁ It takes very little time to create a webpage compared to a Website.
⦁ A web page and a website should be compatible with any device,
such as Mobile, Desktop, Laptop, etc.
⦁ The search engine provides a web page through a link, and when a
user clicks on that link, it is redirected to the webpage of a website.
⦁ A webpage can have any type of information including videos, and
audios.
⦁ It can be made up of only HTML(Hypertext Markup Language), or
CSS, or JavaScript for dynamic and attractive behavior.
TYPES OF A WEB PAGE
There are mainly two types of a Web page based on functionality:

5
 ⦁ Static Webpage
⦁ Dynamic Webpage

Static Webpage
Static webpages are those webpages that cannot be modified or
altered by the client. These are also known as stationary or flat web pages.
They are displayed on the client's browser in the same format and manner as
they are saved in the webserver. Users can only load the page and read the
information but cannot perform any change on the page.

Dynamic Webpage
As the name suggests, Dynamic webpages are dynamic, which
means it shows different information at different point of time.
The dynamic webpage shows different content each time it is
viewed. There are two types of Dynamic web pages, which are:

⦁ Server-Side Dynamic Webpage

⦁ Client-side Dynamic Webpage

HTML BASICS

What is HTML?

⦁ HTML stands for Hyper Text Markup Language

⦁ HTML is the standard markup language for creating Web pages

⦁ HTML describes the structure of a Web page

⦁ HTML consists of a series of elements

⦁ HTML elements tell the browser how to display the content

⦁ HTML elements label pieces of content such as "this is a heading",

"this is a paragraph", "this is a link", etc.

Example

6
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

OUTPUT:
My First Heading
My first paragraph

HTML Basic Structure:

7
UNDERSTANDING TAGS

HTML (HyperText Markup Language) uses tags to define the

8
structure and content of web pages. Tags are enclosed in angle brackets
(`<>`) and usually come in pairs: an opening tag and a closing tag. The
closing tag is similar to the opening tag but includes a forward slash (`/`)
before the tag name. For example, `<p>` is an opening tag for a paragraph,
and `</p>` is the closing tag.

Here are some key points about HTML tags:

Basic Structure:

- Opening Tag: Marks the beginning of an element. For example, `<p>` for
a paragraph.
- Content: The content inside the tags. For example, `This is a paragraph.`
- Closing Tag: Marks the end of an element. For example, `</p>`.

Example:
```
<p>This is a paragraph.</p>
```
Common Tags:
1. Structural Tags:
- `<html>`: The root element of an HTML document.
- `<head>`: Contains meta-information about the document (e.g., `<title>`,
`<meta>`, `<link>`).
- `<title>`: Sets the title of the document (shown in the browser's title bar or
tab).
- `<body>`: Contains the content of the document (text, images, links, etc.).

9
2. Text Formatting Tags:
- `<h1> to <h6>`: Header tags for different levels of headings.
- `<p>`: Paragraph.
- `<b>`: Bold text (use `<strong>` for semantic importance).
- `<i>`: Italic text (use `<em>` for semantic emphasis).
- `<u>`: Underlined text.
- `<small>`: Smaller text.
- `<strong>`: Strong importance (usually bold).
- `<em>`: Emphasized text (usually italic).

3. List Tags:
- `<ul>`: Unordered list.
- `<ol>`: Ordered list.
- `<li>`: List item.

4. Link and Media Tags:

- `<a>`: Anchor tag for hyperlinks.
- `<img>`: Image.
- `<video>`: Video.
- `<audio>`: Audio.

5. Table Tags:
- `<table>`: Table.

10
- `<tr>`: Table row.
- `<td>`: Table cell.
- `<th>`: Table header cell.

6. Form Tags:
- `<form>`: Form for user input.
- `<input>`: Input field.
- `<textarea>`: Multi-line text input.
- `<button>`: Button.

Attributes:
Tags can have attributes that provide additional information about the
element. Attributes are included in the opening tag and usually come in
name-value pairs:

```
<a href="https://www.example.com">Visit Example</a>
<img src="image.jpg" alt="Description of image">
```

Self-closing Tags:
Some tags do not have closing tags and are self-closing. In HTML5, the
closing slash is optional but often included for compatibility:

```

11
<img src="image.jpg" alt="Description of image" />
<br />
<hr />
``’
Understanding HTML tags and their proper usage is fundamental to creating
structured, accessible, and well-formatted web pages.

12
UNIT- 2

TAGS FOR DOCUMENT STRUCTURE:

WHAT IS AN HTML TAG?
HTML tags are the keywords on a web page that define how your web
browser must format and display your web page.
Almost all tags contain two parts, an opening, and a closing tag. For
example, <html> is the opening tag and </html> is the closing tag. Note that
the closing tag has the same text as the opening tag, but has an additional
forward-slash ( / ) character.
HTML contains four essential tags that form the basic structure of any
webpage or HTML file:
<html></html>
<head></head>
<title></title>
<body></body>

1. <!DOCTYPE html>
It is also known as document type and should be included in an HTML file.
It actually tells the browser that this is an HTML document. It is not a tag or
an element but it is information.
Syntax:
<!DOCTYPE html>

2. <html></html>
This tag marks the beginning and ending of the HTML document and

13
whatever code is present in between these tags totally gets considered by the
browser. Also, it tells the browser that the document is an HTML document.
All the other tags in between these tags only get considered by the browser.

Syntax:
<html> Content </html>

3. <head></head>
This tag store the data which actually doesn’t appear on the webpage but it
gives more information about the webpage. Or in other words, this tag is
used to define the head part of the document which contains the information
related to the webpage. It also contain tags like, <title>, <meta>, <link>,
<style>, etc.
Syntax:
<head><title> Title of the Webpage </title></head>

4. <title></title>

This tag stores the title/name of the web page. Whatever title/content is
given in this tag, the content appears on the tab when opened by the
browser. It is described in the head tag.
Syntax:
<title> Title of the Webpage </title>

5. <body></body>
This tag is used to display all the information or data, i.e, text, images,
hyperlinks videos, etc., on the webpage to the user. Here, all the content like
text, images, hyperlinks videos, etc., are enclosed between this tag.

14
Syntax:
<body> Content </body>

BLOCK-LEVEL ELEMENTS

A block-level element always starts on a new line, and the browsers

automatically add some space (a margin) before and after the element.

A block-level element always takes up the full width available

(stretches out to the left and right as far as it can).

Two commonly used block elements are: <p> and <div>.

The <p> element defines a paragraph in an HTML document.

The <div> element defines a division or a section in an HTML document.

The <p> element is a block-level element.

The <div> element is a block-level element.

EXAMPLE:
<!DOCTYPE html>
<html>
<body>

<p style="border: 1px solid black">Hello World</p>

<div style="border: 1px solid black">Hello World</div>

15
<p>The P and the DIV elements are both block elements, and they will
always start on a new line and take up the full width available (stretches out
to the left and right as far as it can).</p>
</body>
</html>

OUTPUT:

Hello World
Hello World
The P and the DIV elements are both block elements, and they will always
start on a new line and take up the full width available (stretches out to the
left and right as far as it can).

Here are the block-level elements in HTML:

- `<div>`: A generic container for flow content.

- `<p>`: Paragraph.
- `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`: Headings.
- `<ul>`: Unordered list.
- `<ol>`: Ordered list.
- `<li>`: List item.
- `<header>`: Defines a header for a document or section.
- `<footer>`: Defines a footer for a document or section.
- `<section>`: Defines a section in a document.
- `<article>`: Defines an independent, self-contained content.

16
- `<nav>`: Defines navigation links.
- `<aside>`: Defines content aside from the content it is placed in.
- `<form>`: Defines an HTML form for user input.
- `<table>`: Defines a table.
- `<blockquote>`: Defines a section that is quoted from another source.
These elements typically contain other block-level elements or inline
elements and control the layout structure of a webpage.

Inline Elements

An inline element does not start on a new line.

An inline element only takes up as much width as necessary.

This is a <span> element inside a paragraph.

Example
<span> Hello World</span>

Here are the inline elements in HTML:

<a> <i> <img>

<abbr> <big> <button>

<br> <button>
<acronym> <b>
<bdo> <br>
<cite> <code>
<dfn> <em>
17
HTML Headings:

⦁ HTML headings are defined with the <h1> to <h6> tags.

⦁ <h1> defines the most important heading. <h6> defines the least
important heading.

Example:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

OUTPUT:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5

18
Heading 6
THE PARAGRAPH TAG
The <p> HTML element represents a paragraph. Paragraphs are
usually represented in visual media as blocks of text separated from
adjacent blocks by blank lines and/or first-line indentation, but HTML
paragraphs can be any structural grouping of related content, such as images
or form fields.
Paragraphs are block-level elements, and notably will automatically close if
another block-level element is parsed before the closing </p> tag
<p>
Geckos are a group of usually small, usually nocturnal lizards. They are
found on every continent except Antarctica.
</p>

<p>Some species live in houses where they hunt insects attracted by

artificial light.</p>

OUTPUT:
Geckos are a group of usually small, usually nocturnal lizards. They are
found on every continent except Antarctica.

Some species live in houses where they hunt insects attracted by artificial
light.

FONTS
The HTML <font> Tag plays an important role in the web page to
create an attractive and readable web page. The font tag is used to change
the color, size, and style of a text and it was used in HTML4. The base font
tag is used to set all the text to the same size, color, and face.

19
Syntax:
<font attribute = "value"> Content </font>
Table of Content
• Font Size
• Font Type
• Font Color
• Font Size

FONT SIZE
The Font size attribute is used to adjust the size of the text in the HTML
document using a font tag with the size attribute. The range of size of the
font in HTML is from 1 to 7 and the default size is 3.

Syntax:
<font size="number">

Font Type
The Font type can be set by using face attribute with font tag in HTML
document. But the fonts used by the user need to be installed in the system
first.

Syntax:
<font face="font_family">

FONT COLOR
The Font color is used to set the text color using a font tag with the
20
color attribute in an HTML document. Color can be specified either with its
name or with its hex code.

Syntax:
<font color="color_name|hex_number|rgb_number">

EXAMPLE:
<!DOCTYPE html>
<html>
<body>
<font size="1">Hello!</font><br />
<font face="Times New Roman" size="6">
Hello!!
</font><br />
<font color="green">hello</font>
</body>
</html>

HTML STYLE
HTML Style is used to change or add the style on existing HTML
elements. There is a default style for every HTML element e.g. background
color is white, text color is black etc.

BOLD TAG
In HTML, the `<b>` tag is used to make text bold. It is a
presentational element, meaning it purely affects the appearance of the text,
21
without conveying any additional meaning or emphasis.
Here is an example of how to use the `<b>` tag:
``
<p>This is a <b>bold</b> word in a sentence.</p>
```
If you want to add emphasis or importance to text, it's better to use the
`<strong>` tag, which also makes text bold but has semantic meaning,
indicating that the enclosed text is of strong importance:
```
<p>This is a <strong>very important</strong> word in a sentence.</p>
```
ITALIC TAG
In HTML, the `<i>` tag is used to make text italic. Similar to the
`<b>` tag, it is a presentational element, meaning it changes the appearance
of the text without conveying any additional meaning.

Here is an example of how to use the `<i>` tag:

```
<p>This is an <i>italic</i> word in a sentence.</p>
```
FONT TAG

The `<font>` tag in HTML was used to define the font face, size,
and color of text. However, this tag is deprecated in HTML 4.01 and is not
supported in HTML5. It's recommended to use CSS for styling text instead.
Here is an example of the deprecated `<font>` tag usage:

22
```
<p><font face="Arial" size="4" color="blue">This is a styled text using the
font tag.</font></p>
```
To achieve the same effect using CSS, you would write:

```
<p style="font-family: Arial; font-size: 16px; color: blue;">This is a styled
text using CSS.</p>
```
STRONG TAG:
The `<strong>` tag in HTML is used to define text with strong
importance. Browsers typically render the text inside the `<strong>` tag in
bold, but it also conveys semantic meaning that the text is of strong
importance.

Here is an example of how to use the `<strong>` tag:

```
<p>This is a <strong>very important</strong> word in a sentence.</p>
```
Using the `<strong>` tag is preferred over the `<b>` tag when you
want to indicate that the enclosed text should be strongly emphasized, as it
provides semantic meaning in addition to the bold styling.

STRIKE TAG
The `<strike>` tag in HTML was used to render text with a
strikethrough (a line through the text). However, the `<strike>` tag is
deprecated in HTML 4.01 and is not supported in HTML5. Instead, you
23
should use the `<del>` or `<s>` tags for strikethrough text.
Here is an example of how to use the `<s>` tag:
```
<p>This is <s>strikethrough</s> text using the s tag.</p>
```
Alternatively, you can use the `<del>` tag, which is typically used to
represent deleted text:
```
<p>This is <del>strikethrough</del> text using the del tag.</p>
```
Using CSS to apply a strikethrough style is also an option:

```
<p>This is <span style="text-decoration: line-through;">
strikethrough</span> text using CSS.</p>
```
BIG TAG:

The `<big>` tag in HTML was used to make the text inside it one font size
larger than the surrounding text. However, the `<big>` tag is deprecated in
HTML 4.01 and not supported in HTML5. Instead, you should use CSS to
achieve the same effect.
Here is an example of how the `<big>` tag was used:
```
<p>This is <big>big</big> text.</p>
```

24
To achieve the same effect with CSS, you can use the `font-size` property:
```
<p>This is <span style="font-size: larger;">big</span> text.</p>
```
Using CSS for styling is more flexible and aligns with modern web
standards.

SMALL TAG
The `<small>` tag in HTML is used to render text smaller than the
surrounding text. Unlike the `<big>` tag, the `<small>` tag is still supported
in HTML5.
Here is an example of how to use the `<small>` tag:
```
<p>This is <small>small</small> text.</p>
```
If you prefer using CSS to achieve the same effect, you can use the `font-
size` property:
```
<p>This is <span style="font-size: smaller;">small</span> text.</p>
```
Using the `<small>` tag or CSS for styling text allows you to control
the presentation of your content in a way that aligns with modern web
standards.

25