INTRODUCTION TO HTML

Subject code :23BCE2S2

UNIT I :Introduction : Web Basics: What is Internet–Web browser –What is Webpage –

HTML Basics Understanding tags.
UNIT II Tags for Document structure (HTML, Head, BodyTag). Block level text
elements: Headings paragraph(<p> tag) – Font style elements:(bold, italic, font, small, strong,
strike, big tags)
UNIT III Lists: Types of lists: Ordered, Unordered– Nesting Lists – Other tags: Marquee,
HR, BR-Using Images –Creating Hyperlinks.
UNIT IV Tables: Creating basic Table, Table elements, Caption –Table and cell alignment –
Rowspan, Colspan – Cell padding. Frames: Frameset– Targeted Links – No frame
UNIT V Forms: Input, Text area, Select, Option – button – label – field set – legend
Web Browser
When we need any kind of information most of the time we get help from the Internet, and
we get information. The Internet provides us with useful information easily. We use mobile
phones, computers, and tablets. We search for a lot of things in our daily lives, so we get
information about all over the world, but we can not get information by just only getting
connected to the Internet. We need a platform where we can search for our questions. The
platform that provides such kinds of services is called a web browser, without a web browser
internet will not be able to provide information.
What is a Web Browser?
The web browser is an application software to explore www (World Wide Web). It provides
an interface between the server and the client and it requests to the server for web documents
and services. It works as a compiler to render HTML which is used to design a webpage.
Whenever we search for anything on the internet, the browser loads a web page written in
HTML, including text, links, images, and other items such as style sheets and JavaScript
functions. Google Chrome, Microsoft Edge, Mozilla Firefox, and Safari are examples of web
browsers.
History of the Web Browsers
The first web browser World Wide Web was invented in the year of 1990 by Tim Berners-
Lee. Later, it becomes Nexus. In the year of 1993, a new browser Mosaic was invented by
Mark Andreessen and their team. It was the first browser to display text and images at a time
on the device screen. He also invents another browser Netscape in 1994. Next year Microsoft
launched a web browser Internet Explorer which was already installed in the Windows
operating system. After this many browsers were invented with various features like Mozilla
Firefox, Google Chrome, Safari, Opera, etc. For more detail refer this article: History of Web
Browsers

The choice of a web browser depends on the user’s preference and requirements. To know
more about individual browsers please go through our Web Browser – A Complete Overview
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.
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.
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 browsers available such as
Vivaldi, Waterfox, and so on. The choice of a web browser depends on the user’s preference
and requirements.

The skill of standing out online is needed more than ever in today's digital world. Whether to
become a young marketer or grow one's brand, it is most important to learn digital marketing
concepts. With our Digital Marketing Live Training Program,
HTML Introduction
Last Updated : 18 Sep, 2024


HTML, or HyperText Markup Language is the standard markup language used to create
web pages. It is a combination of Hypertext and Markup language. The Hypertext defines the
link between web pages, and Markup defines the text document within tags to structure the
web pages. This language annotates text so that machines can understand and manipulate it
accordingly. HTML is human-readable and uses tags to define what manipulation has to be
done on the text. This guide will help you understand and explain the workings of HTML
with examples.
Table of Content
 What is HTML?
 Features of HTML
 HTML Elements and Tags
 HTML Page Structure
 Web Browsers
 Why learn HTML?
 HTML History
 Advantages of HTML
 Disadvantages of HTML
  Frequently Asked Questions about HTML Introduction
What is HTML?
HTML stands for HyperText Markup Language and it is used to create webpages. It
uses HTML tags and attributes to describe the structure and formatting of a web page.
HTML consists of various elements, that are responsible for telling search engines how to
display page content. For example, headings, lists, images, links, and more.
HTML Example
HTML
<!DOCTYPE html>
<html>
<head>
<title>First HTML Code</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<p>Hello Geeks</p>
</body>
</html>
Features of HTML
 It is easy to learn and easy to use.
 It is platform-independent.
 Images, videos, and audio can be added to a web page.
 Hypertext can be added to the text.
 It is a markup language.
HTML Elements and Tags
HTML uses predefined tags and elements that instruct the browser on how to display the
content. HTML elements include an opening tag, some content, and a closing tag. It’s
important to remember to include closing tags. If omitted, the browser applies the effect of
the opening tag until the end of the page.
This section will dive into the basic structure of an HTML page, which includes essential
building-block elements like doctype declaration, HTML, head, title, and body elements.
HTML Page Structure
The basic structure of an HTML page is shown below. It contains the essential building-block
elements (i.e. doctype declaration, HTML, head, title, and body elements) upon which all
web pages are created.

 <!DOCTYPE html> – This is the document type declaration (not technically a tag).
It declares a document as being an HTML document. The doctype declaration is not
case-sensitive.
 <html> – This is called the HTML root element. All other elements are contained
within it.
  <head> – The head tag contains the “behind the scenes” elements for a webpage.
Elements within the head aren’t visible on the front end of a webpage. HTML
elements used inside the <head> element include:
 <style> – This HTML tag allows us to insert styling into our web pages and make
them appealing to look at with the help of CSS.
 <title> – The title is what is displayed on the top of your browser when you visit a
website and contains the title of the webpage that you are viewing.
 <base> – It specifies the base URL for all relative URL’s in a document.
 <noscript> – Defines a section of HTML that is inserted when the scripting has been
turned off in the user’s browser.
 <script> – This tag is used to add functionality to the website with the help of
JavaScript.
 <meta> – This tag encloses the metadata of the website that must be loaded every
time the website is visited. For eg:- the metadata charset allows you to use the
standard UTF-8 encoding on your website. This in turn allows the users to view your
webpage in the language of their choice. It is a self-closing tag.
 <link> – The ‘link’ tag is used to tie together HTML, CSS, and JavaScript. It is self-
closing.
 <body> – The body tag is used to enclose all the visible content of a webpage. In
other words, the body content is what the browser will show on the front end.
An HTML document can be created using an HTML text editor. Save the text file using the
“.html” or “.htm” extension. Once saved as an HTML document, the file can be opened as a
webpage in the browser.

Advantages of HTML
 HTML is used to build websites.
 It is supported by all browsers.
 It can be integrated with other languages like CSS, JavaScript, etc.
Disadvantages of HTML
 HTML can only create static web pages. For dynamic web pages, other languages
have to be used.
 A large amount of code has to be written to create a simple web page.
 The security feature is not good.
Basic HTML Document
Every HTML document begins with a document type declaration, setting the foundation for
the webpage. This section introduces basic HTML tags that structure the page, such
as <head>, <body>, and <title>. Although this is not mandatory, it is a good convention to
start the document with the below-mentioned tag.
Below mentioned are the basic HTML tags that divide the whole page into various parts like
head, body, etc.

Basic HTML Tags for Document Structure

Tags Descriptions

Encloses the entire HTML document, serving as the root element for all HTML
<html>
content.

Contains header information about the webpage, including title, meta tags, and
<head> linked stylesheets. It is part of the document’s structure but is not displayed on
the webpage.

Used within the <head> section to define the title of the HTML document. It
<title> appears in the browser tab or window and provides a brief description of the
webpage’s content.

Encloses the visible content of the webpage, such as text, images, audio,
<body
videos, and links. All elements within this tag are displayed on the actual
>
webpage when viewed in a browser.

Example 1: To illustrates the Basic HTML structure.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML</title>
</head>
<body>
<!--Contents of the webpage-->
<p>GeeksforGeeks is a online study platform</p>
</body>
</html>
Output:

HTML Basic Example Output

HTML Basic Structure
HTML Structure
HTML Headings
The HTML heading tags are used to create headings for the content of a webpage. These tags
are typically placed inside the body tag. HTML offers six heading tags, from <h1> to <h6>,
each displaying the heading in a different font size.
Syntax:
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Example 2: To demonstrate the use of 6 heading tags from <h1> to <h6> in HTML.
HTML
1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
<meta charset="UTF-8">
6
<meta name="viewport"
7
content="width=device-width, initial-scale=1.0">
8
<title>HTML heading tag</title>
9
</head>
10

11
<body>
12
<h1>Heading 1 (h1)</h1>
13
<h2>Heading 2 (h2)</h2>
14
<h3>Heading 3 (h3)</h3>
15
<h4>Heading 4 (h4)</h4>
16
<h5>Heading 5 (h5)</h5>
17
<h6>Heading 6 (h6)</h6>
18
</body>
19

20
</html>
Output:

HTML Paragraph and Break Elements

HTML <p> tags are used to write paragraph statements on a webpage. They start with the
<p> tag and end with </p>. The HTML <br> tag is used to insert a single line break and does
not require a closing tag. In HTML, the break tag is written as <br>.
Syntax:
// for Parapgraph

<p> Content... </p>

// for Break
<br>
Example 3: To illustrates the use of <p> tag for writing a paragraph statement in HTML.
HTML
1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
<meta charset="UTF-8">
6
<meta name="viewport"
7
content="width=device-width, initial-scale=1.0">
8
<title>
9
Example of paragraph and break elements
10
</title>
11
</head>
12

13
<body>
14
<p>
15
HTML stands for HyperText Markup Language.<br>
16
It is used to design web pages using a markup
17
language.<br>HTML is a combination of Hypertext
18
and Markup language.<br>Hypertext defines the
19
link between web pages.<br>A markup language
20
is used to define the text document within the
21
tag which defines the structure of web pages.
22
</p>
23
</body>
24

25
</html>
Output:

HTML Horizontal Line

The HTML <hr> tag is used to divide a page into sections by creating a horizontal line that
spans from the left to the right side of the page. This is an empty tag and does not require a
closing tag or any additional attributes.
Syntax:
<hr>
Example 4: To illustrates the use of the <hr> tag for the horizontal line in HTML.
HTML
1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
<meta charset="UTF-8">
6
<meta name="viewport"
7
content="width=device-width, initial-scale=1.0">
8
<title>HTML &lt;hr&gt; tag</title>
9
</head>
10

11
<body>
12
<h1>Hello GeeksforGeeks</h1>
13
<p>
14
A Computer Science portal for geeks<br>
15
A Computer Science portal for geeks<br>
16
A Computer Science portal for geeks<br>
17
</p>
18
<hr>
19
<p>
20
A Computer Science portal for geeks<br>
21
A Computer Science portal for geeks<br>
22
A Computer Science portal for geeks<br>
23
</p>
24
<hr>
25
<p>
26
A Computer Science portal for geeks<br>
27
A Computer Science portal for geeks<br>
28
A Computer Science portal for geeks<br>
29
</p>
30
<hr>
31
</body>
32

33
</html>
Output:

HTML Horizontal Line

HTML Images
The <img> tag is used to insert an image into a webpage. The source of the image is specified
within the src attribute, like this: <img src=”source_of_image”>.
Syntax:
<img src="geeks.png">
Example 5: To illustrates the use of the <img> tag for inserting the images in HTML.
HTML
<!DOCTYPE html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML img tag</title>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png">
</body>
</html>
Output:

Adding image using img tag

View HTML Source Code
While checking a web page, you might want to see the HTML code behind it. Here we will
see how you can view HTML source code for the entire page or a specific element.
1. View HTML Source Code of Entire Page
 To view the source code of a webpage press ctrl + u on the page, or right-click on the
page and select the “view page source” option.
 This will open a new tab that shows the HTML source code for that entire page.
2. Inspect an HTML Element on a Page
 To check the HTML code for a specific element on a page, right-click on the page and
select the “Inspect” option.
 This lets you see the HTML and CSS behind that element. You can also try making
changes and see the changes.
FAQs – HTML Basics
What are the basics of HTML?
Basic HTML includes mastering document structure, tags, and their attributes and elements.
What are the basic rules of HTML?
Some basic rules of HTML are:
 The basic HTML structure is fixed with doctype declaration, html, head, title, and
body tags. The content then can be added to the body tag.
 Tags are enclosed in < and >. A tag should have an opening tag(eg <h1>) and a
closing tag(eg </h1>).
 HTML Tags are not case-sensitive.
What are the uses of HTML?
HTML is used to build page structure, create hyperlinks(using <a> tag), embed multimedia
on page(with <img>, <video>, or <audio> tag) and HTML is the foundation of web
development.

UNIT II