Prepared by: Mr. Devendra Sharma, Lecturer, CSE, GP Gaya.
HTML
HTML is the standard markup language for creating Web pages. HTML stands
for Hyper Text Markup Language. 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.
What is Markup Language ?
Markup language is a system that uses tags or codes to define and present the
structure of a document. It's used to indicate elements like headings, paragraphs,
images, and links. Markup languages are important because they provide a
standardized way to define content, making it easier for computers and software
to interpret it.
HTML Documents
All HTML documents must start with a document type
declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
<!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps
browsers to display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is: <!DOCTYPE html>
HTML Editors
Step 1: Open Notepad (PC)
Step 2: Write Some HTML
Step 3: Save the HTML Page
Note : You can use either .htm or .html as file extension. There is no
difference; it is up to you
Step 4: View the HTML Page in Your Browser
A simple HTML document
• 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.
• The <h1> element defines a large heading
• The <p> element defines a paragraph
HTML Elements
An HTML element is defined by a start tag, some content, and an end tag. The
HTML element is everything from the start tag to the end tag:
Tag - It is a piece of markup language that indicates the start and end of an HTML
element. HTML tags help web browsers convert HTML documents into web
pages.
Nested HTML Elements
All HTML documents consist of nested HTML elements.
The following example contains four HTML elements (<html>, <body>, <h1> and <p>):
The <html> element is the root element and it defines the whole HTML document.
It has a start tag <html> and an end tag </html>.
Then, inside the <html> element there is a <body> element.
The <body> element defines the document's body.
It has a start tag <body> and an end tag </body>.
Then, inside the <body> element there are two other elements: <h1> and <p>:
The <h1> element defines a heading.
It has a start tag <h1> and an end tag </h1>:
The <p> element defines a paragraph.
It has a start tag <p> and an end tag </p>:
Note - Never Skip the End Tag
Empty HTML Elements
HTML elements with no content are called empty elements.
The <br> tag defines a line break, and is an empty element without a closing tag:
HTML is Not Case Sensitive
HTML tags are not case sensitive: <P> means the same as <p>.
Attributes
An attribute is used to define the characteristics of an HTML element and is
placed inside the element's opening tag. All attributes are made up of two
parts: a name and a value:
The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page
the link goes to:
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:
There are two ways to specify the URL in the src attribute:
1. Absolute URL - Links to an external image that is hosted on another
website.
Example: src="[Link]
2. Relative URL - Links to an image that is hosted within the website. Here,
the URL does not include the domain name. If the URL begins without a
slash, it will be relative to the current page. Example: src="img_girl.jpg".
If the URL begins with a slash, it will be relative to the domain. Example:
src="/images/img_girl.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):
The alt Attribute
The required alt attribute for the <img> tag specifies an alternate text for an
image.
The style Attribute
The style attribute is used to add styles to an element, such as color, font, size,
and more.
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:
Summary
HTML <meta> Tag
Block Level Tags
<h1> defines the most important heading. <h6> defines the least important
heading.
Paragraphs
A paragraph always starts on a new line, and is usually a block of text. The
HTML <p> element defines a paragraph. A paragraph always starts on a new line,
and browsers automatically add some white space (a margin) before and after a
paragraph. Each paragraph of text should go in between an opening <p> and a
closing </p> tag.
Line Breaks
The HTML <br> element defines a line break. Use <br> if you want a line break
(a new line) without starting a new paragraph. This tag is an example of an empty
element, where you do not need opening and closing tags.
Division (Div) element
The <div> element is used as a container for other HTML elements.
The <div> element is by default a block element, meaning that it takes all
available width, and comes with line breaks before and after.
A <div> element takes up all available width:
The <div> element has no required attributes, but style, class and id are common.
The <div> element is often used to group sections of a web page together.
HTML center Tag
The <center> tag in HTML was used to horizontally center content on a webpage.
However, it is deprecated in HTML5 and should no longer be used.
Alternatively, we will use the text-align property.
Using CSS property
<blockquote> Tag
The <blockquote> tag in HTML is used to define a section that is quoted from
another source. It is typically displayed as an indented block to set it apart from
the surrounding content.
preformatted text
The <pre> tag defines preformatted text. Text in a <pre> element is displayed in
a fixed-width font, and the text preserves both spaces and line breaks. The text
will be displayed exactly as written in the HTML source code.
Without preformatted text
OUTPUT
HR tag
Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often
displayed as a horizontal rule. The <hr> element is used to separate content (or
define a change) in an HTML page. The <hr> tag is an empty tag, which means
that it has no end tag.
Text Level Tags and Special Characters in HTML
HTML Text Formatting
Formatting elements were designed to display
special types of text:
• <b> - Bold text
• <strong> - Important text
The HTML <b> element defines bold text, without any extra
importance. The HTML <strong> element defines text with strong
importance. The content inside is typically displayed in bold.
• <i> - Italic text
• <em> - Emphasized text
The HTML <i> element defines a part of text in an alternate voice or
mood. The content inside is typically displayed in italic. The
HTML <em> element defines emphasized text. The content inside is
typically displayed in italic.
• <mark> - Marked text
The HTML <mark> element defines text that should be marked or
highlighted:
• <small> - Smaller text
The HTML <small> element defines smaller text:
• <del> - Deleted text
The HTML <del> element defines text that has been deleted from a
document. Browsers will usually strike a line through deleted text:
• <ins> - Inserted text
The HTML <ins> element defines a text that has been inserted into a
document. Browsers will usually underline inserted text:
<sub> - Subscript text
The HTML <sub> element defines subscript text. Subscript text appears
half a character below the normal line, and is sometimes rendered in a
smaller font. Subscript text can be used for chemical formulas, like
H2O:
• <sup> - Superscript text
The HTML <sup> element defines superscript text. Superscript text
appears half a character above the normal line, and is sometimes
rendered in a smaller font. Superscript text can be used for footnotes,
like WWW[1]:
HTML Lists
HTML lists allow web developers to group a set of related items in lists.
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item
starts with the <li> tag. The list items will be marked
with numbers by default:
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,
where each sublist is indented to visually represent its
relationship to the parent list item.
1. Nested Unordered List in HTML
An unordered list in HTML is a collection of items
represented by bullet points, providing a flexible way to
display information without a specific order.
2. Nested Ordered List in HTML
In HTML, an ordered list organizes items in a numbered
sequence, providing a structured way to present information.
Definition Lists
Definition lists comprise a list of terms and their related
definitions. The <dl> tag characterizes a definition list,
<dt> addresses a term, and <dd> addresses the
definition.
Structure of a Definition List
The <dt> Tag:
Definition lists start with the <dt> tag. It is generally
located immediately after the preceding <dl> or
preceding <dd>.
The <dd> Tag:
Therefore, the <dd> tag defines the details of the
definition of the term indicated in the <dt> label.
HTML Description Lists
HTML
HyperText Markup Language
CSS
Cascading Style Sheets
JavaScript
Scripting language for Web pages
-------------------------------------------------------------------
Assignment 1
Q1. Write the syntax for display the special characters in
HTML.
[Link]
Q2. HTML Description (Definition)Lists and Nested
List.
[Link]
Submit by : 21/01/2025
Term Work Questions
Q1. Explain heading, paragraph, break and division tags
with example.
Q2. Explain list and its type with example.
Reference :
1. [Link]
2. [Link]
3. [Link]