B.P. PODDAR INSTITUTEOF MANAGEMENT & TECHNOLOGY
Department Of Electronics And Communications Engineering (ECE)
NAME UNIVERSITY ROLL NUMBER
KUSHAL SARKAR 11500322003
SUSMELI GHOSH 11500322010
ALAPAN GAYEN 11500322021
NITISH YADAV 11500322022
ECEA GR-II
Web Technology (ECE_A_OE-EC-704A)
HTML Document Structure & Basic layout
2.
Content
This presentation willcover fundamental concepts of HTML, including:
1 HTML Basics
1. What is HTML?
2. Key characteristics of HTML
3 Structure of The HTML document
1. Head element
2. Body element
2 Element , Tags &
Attributes
How HTML elements , tags and their attributes
function.
4 Conclusion
3.
What is HTML?
HTMLstands for Hypertext Markup Language.
• Hypertext: Text containing links to other texts.
• Markup Language: Markup is a way of annotating text so that a computer
(browser) can understand how to structure and display it. HTML uses tags (like
<p> for paragraph, <h1> for heading) as its markup system.
It's a simple scripting language primarily used for developing web pages, known for
being easy to learn and understand.
Think of HTML as the skeleton of a webpage:
•It defines what content appears (headings, paragraphs, images, links,
etc.).
•It structures that content so browsers know how to display it.
•It uses tags (like <h1>, <p>, <img>) to mark up text and other elements.
4.
Key Characteristics ofHTML
• Not a programming language, but a
markup language.
• Creates plain text files using any
HTML editor.
• Consists of markup tags.
• Saved with .htm or .html extension.
• Not case-sensitive (e.g., <HTML>
is same as <html>).
5.
HTML TAGS
HTML markuptags are also called HTML tags. These denote the various elements in an HTML
document. HTML tags are keywords enclosed in a pair of angular brackets, that is, < and >.
These tags are usually paired (for example, <HTML> and </HTML>) to mark the start and end
of an HTML instruction or HTML element.
The first tag is known as the opening tag and the last tag is called the closing tag.
The end tag or closing tag is preceded with a forward slash (/)
within the angular brackets.
There are two types of tags.
1. Container tags: These tags have a start and an end tag to an HTML element. For example,
<B..<B>, <BODY> ... </BODY>, etc.
2. Empty Tags: These tags have only an opening or a start tag and no closing tags to an HTML
element. For example, <LI>, <IMG> <HR>, etc.
6.
HTML Elements
An HTMLelement is content enclosed by a start tag and an end
tag.
<B>Click Start</B> is one HTML element.
HTML can also have nested elements:
<B><I>Click Start</I></B>.
Tags must always follow a correct sequence: the tag that opens first
should be closed last.
<B><U>Click Start </U></B> is a correct sequence
<B><U>Click Start </B></U> is a incorrect sequence
HTML Tag Attributes
Attributes provide additional information about HTML elements. They are
written in the start tag.
• Appear as attribute name followed by '=' sign and value.
• Attribute values should be enclosed within double quotes.
• Different attributes in the same tag are separated by a space.
<P align="left">This is a paragraph.</P>
Here, 'align' is the attribute name and 'left' is the attribute value.
<IMG align="left">
Here, 'align' is the attribute name and 'left' is the attribute value.
7.
Structure of anHTML Document
2
Root Element or
HTML Element
Contains the <HTML> tag,
detecting the document as
HTML document.
3
Head Element
Contains document information
like <TITLE> (appears in Title
Bar) and <STYLE> tags.
4
Body Element
Defines the document's visible
content, including text, images,
and links.
All HTML documents contain standard HTML tags that are executed in a web browser. The purpose of a web browser is to read the
HTML documents instructions and display them as web pages. The Browser does not display the HTML tags, but uses the tags to
interpret and display the content of the page accordingly.
1
<!DOCTYPE html>
The DOCTYPE
declaration is not an
HTML tag itself. It's a
directive that informs the
browser about the html
document’s version type
and helps it choose the
appropriate rendering
mode (e.g., standards
mode or quirks mode).
Structure of an HTML Document
8.
Head Element inDetail
Example:
This element contains information about the document. The text and tags
do not show directly on the web page. It contains the HEAD tag which is
the first tag under the HTML tag. This in turn can contain various other
tags such as TITLE tag (title appears in the Title Bar of the web page),
STYLE tag, etc.
The example below shows the title element that displays the text as the
title of the web page in the Title Bar (Fig. 6.6). The text specified within
the title tag does not appear on the text area of the web browser.
<HTML>
<HEAD> Click Start- Learning HTML- Windows Internet Explorer
<TITLE> Favorites Click Start- Learning HTML<TITLE>
</HEAD>
</HTML>
9.
Body Element inDetail
Example:
<HTML>
<HEAD>
<TITLE>
Click Start-Learning HTML
</TITLE>
/HEAD>
BODY>
Learning HTML is an enjoyable experience!
</BODY>
</HTML>
This tag can contain various other tags to display text, images, links, and more.
This element defines the document's body. This comes after the head element. The
BODY tag is used to display text, images, links, etc. on the web page. This may
contain several other tags.
10.
Conclusion
HTML (Hypertext MarkupLanguage) is the foundational
language that structures the content of the web. It uses a system of
tags to define elements such as headings, paragraphs, images, and
links, allowing browsers to display them in an organized way. The
document starts with the <!DOCTYPE html> declaration, which
tells the browser to interpret the page using modern HTML
standards. Understanding HTML’s meaning, parts, and document
structure is essential for creating clear, consistent, and accessible
web pages.