Guide To HTML

G UIDE TO
A DVANCED T EXT T ECHNOLOGIES
ATANU M ANDAL
ATANUMANDAL 0491@ GMAIL . COM

Table of Contents
1 Introduction to HTML 2
1.1 Simple Web Page Design . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2 Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3 HTML Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3.1 Headings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3.2 Paragraphs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.3.3 Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.3.4 Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.3.5 Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.3.6 Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.4 Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.5 Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.6 Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.6.1 Background Color . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.6.2 Text Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
1.6.3 Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.6.4 Text Size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.6.5 Text Alignment . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.7 Formatting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.7.1 <b> tag and <strong> tag . . . . . . . . . . . . . . . . . . . . . 10
1.7.2 <i> tag and <em> tag . . . . . . . . . . . . . . . . . . . . . . . . 10
1.7.3 <mark> tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.7.4 <small> tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.7.5 <del> tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.7.6 <ins> tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.7.7 <sub> tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.7.8 <sup> tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
1.8 Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
1.9 Quotations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.9.1 Short Quotation . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.9.2 BlockQuote Quotation . . . . . . . . . . . . . . . . . . . . . . . 14
1.9.3 Abbreviations . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
1.9.4 Address . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
1.9.5 Bi-Directional Override . . . . . . . . . . . . . . . . . . . . . . 16
1
Introduction to HTML
1 SECTION
HTML stands for Hyper Text Markup Language. It is used to design web pages using
markup language. HTML is the combination of Hypertext and Markup language. Hy-
pertext defines the link between the web pages. Markup language is used to define the
text document within tag which defines the structure of web pages. This language is
used to annotate text so that a machine can understand it and manipulate text accord-
ingly. Most of markup (e.g. HTML) languages are human-readable. The language uses
tags to define what manipulation has to be done in the text.
HTML is a markup language that is used by the browser to manipulate text, images, and
other content to display it in required format. HTML was created by Tim Berners-Lee in
1991. The first-ever version of HTML was HTML 1.0 but the first standard version was
HTML 2.0 which was published in 1999.
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
Table 1: History of HTML
2
1.1 Simple Web Page Design
A Web page needs to be designed using predefined tags. A simple web page design syn-
tax is given below.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The <!DOCTYPE> declaration represents the document type, and helps browsers to dis-
play web pages correctly. It must only appear once, at the top of the pages (before any
HTML tags). The doctype declaration for html5 is <!DOCTYPE html>.
1.2 Tags
Tags are element names surronded by angle brackets. <>
<tagname> content goes here ... </tagname>
The first tag in the pair is start tag and second tag is end tag.
1.3 HTML Basics

All HTML documents must start with a document type decleration: <!DOCTYPE html>
and itself begins with <html> and ends with </html>. The documents present inside
<body> and </body> are rendered in web browser.
1.3.1 Headings
HTML headings are defined with the <h1> to <h6> tags, where <h1> tag is the most
important heading and <h6> tag is the least important heading.
<!DOCTYPE html>
<html>
<body>
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
3
<h6>H6 Heading</h6>
</body>
</html>
The use of Heading tags are given in code snippet above.
1.3.2 Paragraphs
HTML paragraphs are defined with the <p> tag
<!DOCTYPE html>
<html>
<body>
<p>A paragraph is a series of sentences
that are organized and coherent, and are
all related to a single topic. </p>
<p>Almost every piece of writing you do
that is longer than a few sentences should
be organized into paragraphs. This is because
paragraphs show a reader where the subdivisions
of an essay begin and end, and thus help the reader
see the organization of the essay and grasp its
main points.</p>
</body>
</html>
1.3.3 Links
HTML links are defined with <a> tag. The link’s destination is specified in the href at-
tribute. Link in HTML is nothing but Hyperlink used in Word Documentation.
<!DOCTYPE html>
<html>
<body>
<p>A paragraph is a series of sentences that
are organized and coherent, and are all
<a href="https://www.guide2travels.com"> related </a>
to a single topic. </p>
</body>
</html>
4
1.3.4 Images
HTML images are defined with <img> tag. The image source is specified in the src at-
tribute. The source file (src), alternative text (alt), width, and height are provided as
attributes.
<!DOCTYPE html>
<html>
<body>
<img src="https://www.guide2travels.com/wp-content/
uploads/2019/09/Church.jpg" >
</body>
</html>
1.3.5 Buttons
HTML buttons are defined with <button> tag. The button tag is used create Button used
in designing in form.
<!DOCTYPE html>
<html>
<body>
<button>Click me</button>
</body>
</html>
1.3.6 Lists
HTML lists are defined with the <ul> for unordered/bullet list or the <ol> for ordered/num-
bered list tag, followed by <li> tags (list items).
Unordered list code snippet is given below.
<!DOCTYPE html>
<html>
<body>
<ul>
<li>List item 1 for unordered List</li>
</ul>
</body>
</html>
5
Ordered list code snippet is given below.
<!DOCTYPE html>
<html>
<body>
<ol>
</ol>
</body>
</html>
1.4 Elements
An HTML element usually consists of a start tag and an end tag, with the content in-
serted in between
<tagname>Content goes here...</tagname>
But there are certain elements which doesn’t have end tag which is known as Empty
HTML Elements. Empty HTML Elements begin with only start tag. Few Empty HTML
Elements are:
• <br> : use for line break
• <hr> : use for horizontal line
• <link> : used to link between a document and an external resources
• <img> : use for image in an HTML page.
• <meta> : use for metadata about the HTML document
• <source> : use for media resources for media elements.
1.5 Attributes
Attribute provides additional information about HTML elements. All HTML elements
can have attributes. Attributes must be provided in start tag. Example of attributes are:
• href
– <a href="https://www.google.com">This is a link</a>
• src
6
– <img src="image.jpg">
• width/height
– <img src="image.jpg" width="50" height="60">
• alt
– <img src="image.jpg" alt="Alternate Text of Image">
• style
– <p style="color:magenta">This is a paragraph.</p>
1.6 Styles
Setting the style of an HTML element, can be done with the style attribute.
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
1.6.1 Background Color
Background Color is a property where the background color of the webpage is defined.
<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-color:blue;">
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Above mentioned code snippet will render an webpage having background color blue.
1.6.2 Text Color
Text Color is a property where the colour of the text used in a webpage is changed.
<!DOCTYPE html>
<html>
<head>
7
</head>
<body>
<h1 style="color:blue;">My First Heading</h1>
<p style="color:white;">My first paragraph.</p>
</body>
</html>
Above mentioned code snippet will render an web page having heading with blue colour
and paragraph with yellow colour.
1.6.3 Fonts
Fonts is a property where the font of text in web page is changed from default.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="font-family:verdana;">My First Heading</h1>
<p style="font-family:verdana;">My first paragraph.</p>
</body>
</html>
Above mentioned code snippet will render an web page having heading and paragraph
with font family of verdana.
1.6.4 Text Size
Text Size is a property where the size of text in web page is changed from default.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="font-size:30px;">My First Heading</h1>
<p style="font-size:30px;">My first paragraph.</p>
</body>
</html>
Above mentioned code snippet will render an web page having heading and paragraph
with text size of 30px.
8
1.6.5 Text Alignment
Text Alignment is a property where the alignment of a text in web page is changed. Align-
ments are left, center, right and justify.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="text-align:center;">My First Heading</h1>
<p style="text-align:right;">My first paragraph.</p>
</body>
</html>
Above mentioned code snippet will render an web page having heading with text align-
ment as center and paragraph with text alignment as right.
Although, multiple properties can be used for same text, by separating all the properties
by a semicolon(;). Example snippet is given below.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="color:blue; font-family:verdana;
font-size:300%; text-align:center;>My first
paragraph.</p>
</body>
</html>
1.7 Formatting
HTML also defines special elements for defining text with a special meaning
• <b> : bold text
• <strong> : Important Text
• <i> : Italic Text
• <em> : Emphasize Text
• <mark> : Marked Text
9
• <small> : Small Text
• <del> : Deleted Text
• <ins> : Inserted Text
• <sub> : Subscript Text
• <sup> : Superscript Text
1.7.1 <b> tag and <strong> tag
<b> tag and <strong> tag are different but they show the same output in web browser
i.e. making the word or sentence inside the tag as bold. Code snippet for using <b> tag
and <strong> tag are given below.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>"b" tag and "strong" tag</h1>
<p><b>Rainy season</b> is the <strong>
favourite season</strong> of almost everyone
as it comes after the very hot summer season.</p>
</body>
</html>
1.7.2 <i> tag and <em> tag
<i> tag and <em> tag are also different but they show the same output in web browser
i.e. making the word or sentence inside the tag as italics. Code snippet for using <i> tag
and <em> tag are given below.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>"i" tag and "em" tag</h1>
<p><i>Rainy season</i> is the <em>
favourite season</em> of almost everyone
</body>
10
</html>
1.7.3 <mark> tag
<mark> tag are used to mark a specified word present inside the tag. Code snippet for
using <mark> tag is given below.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>"mark" tag</h1>
<p><mark>Rainy season</mark> is the <mark>
favourite season</mark> of almost everyone
</body>
</html>
1.7.4 <small> tag
<small> tag are used to minimize a specific word or sentence present inside the tag.
Code snippet for using <small> tag is given below.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>"small" tag</h1>
<p><small>Rainy season</small> is the <small>
favourite season</small> of almost everyone
</body>
</html>
1.7.5 <del> tag
<del> tag are used to strike-through a specified word present inside the tag. Code snip-
pet for using <del> tag is given below.
11
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>"del" tag</h1>
<p><del>Rainy season</del> is the <del>
favourite season</del> of almost everyone
</body>
</html>
1.7.6 <ins> tag
<ins> tag are used to mark a specified word which is inserted in a page present inside
the tag. Web Browser show the word in underline. Code snippet for using <ins> tag is
given below.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>"ins" tag</h1>
<p><ins>Rainy season</ins> is the <ins>
favourite season</ins> of almost everyone
</body>
</html>
1.7.7 <sub> tag
<sub> tag is used for subscript. Code snippet for using <sub> tag is given below.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>"sub" tag</h1>
12
<p><sub>Rainy season</sub> is the <sub>
favourite season</sub> of almost everyone
</body>
</html>
1.7.8 <sup> tag
<sup> tag is used for superscript. Code snippet for using <sup> tag is given below.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>"sup" tag</h1>
<p><sup>Rainy season</sup> is the <sup>
favourite season</sup> of almost everyone
</body>
</html>
1.8 Tables
Creating tables is one of the most important in a web page designing. In HTML Table is
defined as <table> tag, Each row is defined as <tr> tag. Table header is defined as <th>
and Table data is defined as <td>. A code snippet for creating a table of 3 rows and 2
columns are given.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table style="width:100%;text-align:center">
<tr>
<th>Sl. No.</th>
<th>Name</th>
</tr>
<tr>
<td>1.</td>
13
<td>ABC</td>
</tr>
<tr>
<td>2.</td>
<td>XYZ</td>
</tr>
</table>
</body>
</html>
1.9 Quotations
Quotation are used in web pages for providing speech of an author or legendary per-
sons.The Quotation elements in HTML are used to insert quoted texts in a web page,
that is, portion of texts different from the normal texts in the web page.
1.9.1 Short Quotation
The <q> element is used to set a set of text inside the quotation marks. It has both
opening and closing tags.
<!DOCTYPE html>
<html>
<head>
<title>Quotations</title>
</head>
<body>
<h3>Short Quotation</h3>
<p>The objective of WHO
is <q>the attainment by
all peoples of the highest
possible level of health.</q> </p>
</body>
</html>
1.9.2 BlockQuote Quotation
The <blockquote> element is also used for quotations in a different way. Instead of
putting the text in quotes, it changes the alignment to make it unique from others. It
has both opening and closing tags.
<!DOCTYPE html>
<html>
14
<head>
</head>
<body>
<h3>BlockQuote Quotation</h3>
<blockquote cite="cite page">If you
want to know what a man’s like,
take a good look at how he treats
his inferiors, not his equals. </blockquote>
</body>
</html>
1.9.3 Abbreviations
The <abbr> element is used to define a text as an acronym or abbreviations. The title
attribute can be used to show the full version of the abbreviation/acronym when you
mouse over the <abbr> element. It has both opening and closing tags. This is useful for
browsers and search engines.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3>Abbreviation</h3>
<p>The <abbr title="World Health Organization">WHO</abbr>
was founded in 1948.</p>
</body>
</html>
1.9.4 Address
Using the <address> element, we can define an address in a webpage and the text put
inside the address tag will be emphasized. It has both opening and closing tags.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3>Address</h3>
15
<address>
Written by ABC.<br>
Visit us at:<br>
DontHaveWebsite.com<br>
*** <br>
INDIA
</address>
</body>
</html>
1.9.5 Bi-Directional Override
The <bdo> element is used to define a bidirectional override which means that the text
written from right to left or left to right. It has both opening and closing tags. It is used
to over-ride the current text direction.It takes an attribute "rtl" to display the text from
right to left.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3>Bi-Directional Override</h3>
<p>This text will be written from right
to left</p>
<bdo dir="rtl">This text will be written
from right to left</bdo>
</body>
</html>
16

Guide To HTML

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Guide To HTML

Transféré par

Droits d'auteur :

Formats disponibles

G UIDE TO

A DVANCED T EXT T ECHNOLOGIES

ATANUMANDAL 0491@ GMAIL . COM

<tagname> content goes here ... </tagname>

1.3 HTML Basics

The use of Heading tags are given in code snippet above.

HTML paragraphs are defined with the <p> tag

<tagname>Content goes here...</tagname>

• <br> : use for line break

• <hr> : use for horizontal line

• <link> : used to link between a document and an external resources

• <img> : use for image in an HTML page.

• <meta> : use for metadata about the HTML document

• <source> : use for media resources for media elements.

– <a href="https://www.google.com">This is a link</a>

– <img src="image.jpg" width="50" height="60">

– <img src="image.jpg" alt="Alternate Text of Image">

– <p style="color:magenta">This is a paragraph.</p>

The property is a CSS property. The value is a CSS value.

1.6.1 Background Color

1.6.2 Text Color

1.6.4 Text Size

• <b> : bold text

• <strong> : Important Text

• <i> : Italic Text

• <em> : Emphasize Text

• <mark> : Marked Text

• <del> : Deleted Text

• <ins> : Inserted Text

• <sub> : Subscript Text

• <sup> : Superscript Text

1.7.1 <b> tag and <strong> tag

1.7.2 <i> tag and <em> tag

1.7.3 <mark> tag

1.7.4 <small> tag

1.7.5 <del> tag

1.7.6 <ins> tag

1.7.7 <sub> tag

1.7.8 <sup> tag

1.9.1 Short Quotation

1.9.2 BlockQuote Quotation

1.9.5 Bi-Directional Override

Vous aimerez peut-être aussi