Scribd
Upload
56 views

WD 2

The document provides an introduction to HTML, covering topics like HTML tags, commonly used HTML commands, text formatting, lists, and tables. It explains key HTML elements and tags such as <html>, <head>, <title>, <body>, <h1>-<h6>, <p>, <ul>, <ol>, <li> and how they are used to structure and format text on a webpage. Examples are given for different types of lists, headings, and text styling with tags like <b>, <i>, and <u>. The document aims to help readers understand basic HTML elements and their usage in webpage formatting.

Uploaded by

Aslam Nizami
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
56 views

WD 2

The document provides an introduction to HTML, covering topics like HTML tags, commonly used HTML commands, text formatting, lists, and tables. It explains key HTML elements and tags such as <html>, <head>, <title>, <body>, <h1>-<h6>, <p>, <ul>, <ol>, <li> and how they are used to structure and format text on a webpage. Examples are given for different types of lists, headings, and text styling with tags like <b>, <i>, and <u>. The document aims to help readers understand basic HTML elements and their usage in webpage formatting.

Uploaded by

Aslam Nizami
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

UNIT- 2: Introduction to HTML

UNIT STRUCTURE
2.0 Objective
2.1 HTML
2.2 HTML tags
2.3 Commonly used HTML commands
2.4 Title and footers
2.5 Text formatting
2.6 Text Style
2.7 Lists
2.8 Adding Graphics to HTML documents
2.9 Tables
2.10 Linking Documents
2.11 Frames
2.12 Summary
2.13 Questions for Exercise
2.14 Suggested Readings

2.0 Objective
HTML, an acronym for Hyper Text Markup Language, specifies how the structure of a webpage
will be with the help of various markups. The following unit explains the core concepts of
HTML such as its structure, elements, attributes and core events. It also sheds light on block-
level elements and text-level elements. With the help of this unit, the reader will be able to
understand the basic elements used in HTML and their usage in the formatting of a webpage.

2.1 HTML
HTML, an acronym for Hyper Text Markup Language, specifies how the structure of a webpage
will be with the help of various markups. It is a structured markup language that is used to create
Web pages. Markup languages like HTML bundle together codes which are elements that are
used to represent the structure and format of a document. A user agent, usually a Web browser
which renders (delivers) the document, interprets the meaning of these codes to decipher
(making it into simpler human readable text) how to structure or display a document. The HTML
elements are made up of alphanumeric tokens surrounded by angle brackets, for example, <B>,
<HTML>, <IMG> and <HR> .
Almost all elements possess a pair of tags i.e. a start tag and an end tag. The start tag is a
mnemonic symbol for the element enclosed in ‘<’ ’>’, also known as angle brackets, for
instance, the symbol associated with bolding text is B and the start tag for this purpose is <B>.
An end tag is the same as that for a start tag, but with an exception that there exists a forward
slash preceding the text symbol of start tag: </B>. The instruction applied by an element
modifies whatever content is present between the starting and ending tags:
This is an example of a simple HTML document.
Example:

<! DOCTYPE html>


<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>It is the First Heading</h1>
<p>It is the first paragraph.</p>
</body>
</html>
Output:

2.2 HTML tags


Since HTML is a markup language, therefore, it uses certain tags for formatting the content. The
tags are used with angle braces as in <Tag Name>. Leaving few tags, most tags require to be
supplemented with closing tags</Tag Name>. As for example, the closing tag of
<html> is </html> and the closing tag of <body> is </body>.
HTML document uses the following tags provided in Table 2.1.
Tags Description

<! DOCTYPE…> It represents the document type and HTML


version.
<html> The HTML document itself begins with
<html> and ends with </html>
<head> This tag defines the header of document and it
can keep other HTML tags like <title>
<title> The <title> tag is used inside the <head> tag to
represent document title
<body> It represents the document’s body which keeps
other HTML tags like <h1>
<h1> It defines the heading

<p> This tag represents a paragraph

Table 2.1 HTML Tags


2.2.1 The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration tag is implemented to detect the HTML version used in the
document. The contemporary HTML version is 5 which uses the following declaration:
<!DOCTYPE html>
There are several declaration types which are used in HTML documents on the basis of HTML
version being used. More details will be observed on this during elaboration of <!DOCTYPE...>
tag and the remaining HTML tags.
2.2.2 Heading Tags
HTML documents begin using a heading. Different sizes can be applied for using headings.
HTML features mainly six heading levels using the elements <h1>, <h2>, <h3>, <h3>, <h5>,
and <h6>. The web browser inserts one line before and after a heading for fulfilling the purpose
of displaying it. Here is an illustrated example.
Example:
<!DOCTYPE html>
<html>
<head>
<title> Example of a Heading</title>
</head>
<body>
<h1> Example of heading 1</h1>
<h2> Example of heading 2</h2>
<h3> Example of heading 3</h3>
<h4> Example of heading 4</h4>
<h5> Example of heading 5</h5>
<h6> Example of heading 6</h6>
</body>
</html>
Output:

Sample of Heading 1
Sample of Heading 2
Sample of Heading 3

Sample of Heading 4
Sample of Heading 5

Sample of Heading 6

2.3 Commonly used HTML Commands


2.3.1 HEADERS
In HTML, up to six levels of headers are used in any documents, h1 to h6. Header 1 (h1) is the
largest header and they get successively smaller through header 6 (h6). Below is an example of
<h1> header and how it usually appears in a relation. For rest of the headers we can refer to
section 2.2.2 of this book. Here is an example of a <h1> tag.

Example:

<h1>Example of a header 1 tag</h1>

Output:

EXAMPLE OF A HEADER 1 TAG

2.3.2 PARAGRAPHS

The <p> tag provides a means to structure our text into different paragraphs. Each paragraph
should write in between an opening <p> and a closing </p> tag as shown below in the example.

Example:

<p> it breaks the current line with a trailing blank line

<br>it breaks the current line with no trailing blank line

For our and others convenience, it is better to put few blank lines between paragraphs to edit in
future or on demand.
2.3.3 PREFORMATTED TEXT
The preformatted text tag <pre> used to display the same text in our document as it is written in
HTML script. The font-width, their spaces, lines and tabs of our source document remain as is it.
In simple words, the browser shows our text as we typed it in. Through monospace font, the text
is rendered where the same amount of space is occupied by all characters. Visually, preformatted
text looks like a courier font. This is an example of preformatted tag.

Example:

<pre>this is a preformatted text tag example</pre>

Output:

this is a preformatted text tag example

2.3.4 BOLDFACE, UNDERLINE AND ITALICS


We can use bold, italic and underline <b>, <i> and <u> tags respectively in HTML editor to
highlight the text in a HTML document. The text in-between <b> </b> tags text will be bold and
similarly we can apply other two italic and underline. The HTML links do not require extra tag
because these are already underlined. The potential for confusion and the archaic nature of
underlining in general make it a poor marker for emphasis.
When using these tags, we usually cannot (and probably should not) have text that is both
boldface and italics; the last tag encountered is usually the tag that is displayed. For example, if
we had a boldface tag followed immediately by an italic tag, the tagged word would appear in
italics. This is an example.

Example:

<b>boldface</b>
<u> underline</u>
<i>italic</i>

Output:

boldface
underline

italic

2.3.5 LISTS

In HTML, we can give number, unnumbered and lists to the different text using the simple tags.
We can also use nested lists with a list. HTML editor automatically takes the space between the
bullet or list number in a text, we do not need to mention it. Neither (as yet) do we have control
over what type of bullet will be used as each browser is different.

Unnumbered lists:
<ul> tag is use to unnumbered any list followed by the actual list items, which are marked with
the <li> tag. The list is ended with the ending tag </ul>.

For example, here is an unnumbered list with three items:

Example disc bullets:

<!DOCTYPE html>
<html>
<body>
<h2>Disc bullet with Unordered list </h2>
<ul style="list-style-type:disc">
<li>Ram</li>
<li>Shyam</li>
<li>Mahesh</li>
</ul>
</body>
</html>
Output disc:

Ram
Shyam
Mahesh

This is an example of a circle bullet.

Example circle bullets:

<!DOCTYPE html>
<html>
<body>
<h2>Circle bullets with Unordered list </h2>
<ul style="list-style-type:circle">
<li>Ram</li>
<li>Shyam</li>
<li>Mahesh</li>
</ul>
</body>
</html>

Output:

o Ram
o Shyam
o Mahesh

This is an example of a square bullet.

Example square bullet:

<!DOCTYPE html>
<html>
<body>
<h2> Square Bullets with Unordered list </h2>
<ul style="list-style-type:square">
<li>Ram</li>
<li>Shyam</li>
<li>Mahesh</li>
</ul>
</body>
</html>
Output:

Ram
Shyam
Mahesh

Numbered lists
Similar example given here using a numbered list format:

Example Numbers:

<!DOCTYPE html>
<html>
<body>
<h2>Numbers are used for Ordered List</h2>
<ol type="1">
<li>Ram</li>
<li>Shyam</li>
<li>Mahesh</li>
</ol>
</body>
</html>

Output:

1. Ram
2. Shyam
3. Mahesh

This is an example of an uppercase letter use in list.

Example Uppercase Letters:

<!DOCTYPE html>
<html>
<body>
<h2>Letters are used for Ordered List </h2>
<ol type="A">
<li>Ram</li>
<li>Shyam</li>
<li>Mahesh</li>
</ol>
</body>
</html>

Output:
A. Ram
B. Shyam
C. Mahesh

This is an example of a lowercase letter use in list.

Example Lowercase Letter:

<!DOCTYPE html>
<html>
<body>
<h2> Lowercase Letters are used for Ordered List </h2>
<ol type="a">
<li>Ram</li>
<li>Shyam</li>
<li>Mahesh</li>
</ol>
</body>
</html>

Output:

a. Ram
b. Shyam
c. Mahesh
This is an example of roman letters.
Example Roman letters:
<!DOCTYPE html>
<html>
<body>
<h2> Roman Numbers are used for Ordered List </h2>
<ol type="I">
<li>Ram</li>
<li>Shyam</li>
<li>Mahesh</li>
</ol>
</body>
</html>

Output:

I. Ram
II. Shyam
III. Mahesh
2.3.6 BLOCKQUOTE

For a long quotation in the text, we can use a < blockquote > tag and the text enclosed within this
tag indicates an extended quotation. Blockquote texts are generally rendered by the browser as
indented text. It looks like this:

<blockquote>...</blockquote>

2.3.7 HORIZONTAL LINE


We can insert a horizontal rule tag <hr> to separate a paragraph into different sections. A
horizontal rule line is displayed as shown below:

This is an example of a horizontal line

This is an example of a horizontal line

2.4 Title and footers


Title definition and Usage

The <title> is an important tag which required to shown the title of the HTML documents and it
only contains text and other tags containing in the title are ignored. The title is displayed in the
browser’s toolbar. It also shows the favorite pages title which we added during browsing and in
search-engine results title.

This is an illustrative example of title tag.

Example:
<!DOCTYPE html>
<html>
<head>
<title> First HTML script for web page </title>
</head>
<body>
First HTML script for web page
</body>
</html>
Output:
Footer definition and Usage

The <footer> tag in HTML represents a footer for a document or section. A <footer> element
generally contains information about its author, copyright data or links to other related
documents. You can have several <footer> elements in one document.

This is an example of a footer.

Example:

<!DOCTYPE html>
<html>
<body>
<footer>
<p>Posted by: xyz</p>
<p>Contact information: <a href="mailto:[email protected]">[email protected]</a>.</p>
</footer>
<p><strong>Note:</strong> The footer tag is supported only from Internet Explorer 9 and later
versions.</p>
</body>
</html>

Output:

2.5 Text Formatting


The text formatting tags are used to change the appearance of some text so that it looks different
from normal text in web pages. Several formatting tags are consists in HTML to format the text,
like <i>, <em> etc.
The following HTML tags can be used to display special types of text:
<ins> - Inserted text
<del> - Deleted text
<i> - Italic text
<b> - Bold text
<small> - Small text
<em> - Emphasized text
<strong> - Important text
<mark> - Marked text
<sub> - Subscript text
<sup> - Superscript text

2.5.1 HTML <b> and <strong> Elements

The HTML <b> tag displays bold text, without any extra importance.

Example:

<!DOCTYPE html>
<html>
<body>
<p> Example of a simple text.</p>
<p><b> Example of a bold text.</b></p>
</body>
</html>

Output:

Example of a simple text

Example of a bold text.

2.5.2 HTML <i> and <em> Elements

The HTML <i> tag represents italic text, without any extra importance.

<!DOCTYPE html>
<html>
<body>
<p>Example of a simple text.</p>
<p><i>Example of a italic text.</i></p>
</body>
</html>

Output:

Example of a simple text.

Example of italic text.

2.5.3HTML <small> Element

The HTML <small> tag defines smaller text:

Example:
<!DOCTYPE html>
<html>
<body>
<h2>HTML <small>Small</small> Formatting</h2>
</body>
</html>

Output:

2.5.4 HTML <mark> Element

The HTML <mark> tag defines marked or highlighted text:

Example:

<!DOCTYPE html>
<html>
<body>
<h2>HTML <mark>Marked</mark> Formatting</h2>
</body>
</html>

Output:

The HTML <del> tag used to highlight the deleted (removed) text.

Example:
<!DOCTYPE html>
<html>
<body>
<p>The del tag defines deleted (removed) text.</p>
<p>I like to play <del>Cricket</del> Football.</p>
</body>
</html>

Output:
2.6 Text Style
The appearance of an HTML page can be changed with the style attribute.
The syntax of the HTML style attribute is given below:

<tagname style="property:value;">

The property is a CSS property (Cascading Style Sheet, used for enhancing the look of any
document). The value is a CSS value.

2.6.1 HTML Background Color

We can set the background color of any HTML page by using the background-color property.
The below example shows how to set the background color of a page to powder blue:

Example:

<!DOCTYPE html>
<html>
<body style="background-color:powderblue ;">
<h1>Example of Background Color changing.</h1>
<p>Example of Background Color changing.</p></body>
</html>

Output:

2.6.2 HTML Text Color


The text color of an HTML page can be change by using color property which is shown below
with an example.

Example:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">Example of Blue color text.</h1>
<p style="color:red;">Example of Red color text.</p>
</body>
</html>

Output:

Example of Blue color text.

Example of Red color text.

2.6.3 HTML Text Size

The size of the font in a HTML document can be set according to our requirement by using font-
size property and it is illustrated below with a simple example:

Example:

<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">The font size is very large.</h1>
<p style="font-size:160%;">The font size is big.</p>
<p style="font-size:60%;">The font size is small.</p>
</body>
</html>

Output:
2.6.4 HTML Text Alignment

For alignment of the text of HTML pages, there are four text-align property (left, center, right
and justify) that are frequently used. It defines the horizontal text alignment for an HTML
element. The example given below shows the method for center alignment text:

Example:

<!DOCTYPE html>
<html>
<body>

<h1 style="text-align:center;">Centered Heading</h1>


<p style="text-align:center;">Centered paragraph.</p>

</body>
</html>

Output:

2.6.5 Changing a paragraph's background color


Here is an example of background color
Example:

<p style = "background-color: green">


The background color of the Paragraph is Green.
</p>

Output:

The background color of the Paragraph is Green.

2.6.6 Changing foreground and background color


Here is an example of foreground and background color
Example:

<p style = "color: blue";


“background-color: green”>
<p style “text-color: blue”; The text is Blue on a Green background color>
</p>
Output:

The text is Blue on a Green background color

2.6.7 Changing Font Family


Here is an example of comic sans family

Example:

<p style = "font-family: Comic Sans MS, Cursive">


This paragraph is in Comic Sans
</p>

Output:

This paragraph is in Comic Sans


2.6.8 Changing Font Size
Here is an example for font size 30.

Example:

<p style = "font-size: 30pt">


This paragraph is in 30 pts
</p>

Output:

This paragraph is in 30 pts


2.7 Adding Graphics to HTML Document

In the beginning, graphics was not supported by the web pages only texts are used. But later on
images and other types of multimedia files are embedded with web pages. The graphics are
embedded in a HTML pages using a simple tag which is represented by <IMG>. We can also
embed the images inside other elements such as anchors. When embedded inside an anchor, then
the user left clicks on the image, they will go to the designated link (rather, their browser will
load a file from the designated link). The <IMG> element has no ending tag. The syntax of
embedding an image is follows:

<img src=”tree.jpg”>
Here, src attributes defines a path pointing to the image from where we want to embed.
IMG Attributes

Sr. IMG Attributes Function of attributes


No.
1. ALT="Home" Image not found massage shows.
2. ALIGN="TOP" Set image alignment like left, right, top, bottom etc.
3. VSPACE=3 Upper and lower space in pixels of an image between texts.
4. HSPACE=5 Left and right space in pixels of an image between texts.
5. BORDER=10 Set a border around the image with a specific width.
6. HEIGHT=33 Set image height based on the browser height.
7. WIDTH=115 Set image width based on the browser height.
8. ISMAP It represents image map and user can point and click different
parts of the image to load other web pages.
9. USEMAP Specifies the client side image map file to be used.

Table 2.1 Image Attributes


The line break element, <BR> and the horizontal rule element <HR> may be placed inside the
<IMG> element.
An example of adding an image source.
Example:

<img src=”funny dog.jpg” alt=”funny dog sitting”.>

Output:

2.8 Tables

2.8.1 Defining an HTML Table with Border

An HTML <table> tags are used to create different table in our web pages. Each table row is
defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings
are bold and centered. A table data/cell is defined with the <td> tag. This is an example of
HTML table with border where border width is 1.

Example:
<!DOCTYPE html>
<html>
<Body>
<table border="1">
<tr>
<th>Student Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Ram</td>
<td>HTML</td>
<td>87</td>
</tr>
<tr>
<td>Shyam</td>
<td>HTML</td>
<td>73</td>
</tr>
</table>
<Body>
</html>

Output:

2.8.2 Html Table Tags:

Tag Description
<table> Displays a table
<th> Represents a header cell in a table
<tr> A row in a table
<td> A cell in a table
<col> Specifies column properties for each
column within a <colgroup> element
<caption> A table caption
<colgroup> Specifies a group of one or more
columns in a table for formatting
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

Table 2.2 Table Tags

2.8.3 HTML Table without Border


If we want to create table without border, it will be created by not defining border size. This is an
example of a table without border.

Example:

<html>
<body>
<table style="width:100%">
<tr>
<th>Student Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Ram</td>
<td>HTML</td>
<td>87</td>
</tr>
<tr>
<td>Shyam</td>
<td>HTML</td>
<td>73</td>
</tr>
<tr>
<td>Ghanshyam</td>
<td>HTML</td>
<td>67</td>
</tr>
</table>
</body>
</html>

Output:
2.8.4 HTML Table - Adding Cell Padding

To manage the spaces between the cell of a table and its border, we use Cell padding tags. If we
do not mention a padding, the table cells will be displayed without padding. This is an example
of a cell padding.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Student Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Ram</td>
<td>HTML</td>
<td>87</td>
</tr>
<tr>
<td>Shyam</td>
<td>HTML</td>
<td>73</td>
</tr>
<tr>
<td>Ghanshyam</td>
<td>HTML</td>
<td>67</td>
</tr>
</table>
<p>Try to change the padding to 15px.</p>
</body>
</html>

Output:

2.9 Linking Documents


HTML Links – Hyperlinks

In a web page, several links are used to directly access the other pages or other parts of a given
page. These links are also known as hyperlinks which allows user to switch between different
web pages. When we move the mouse over a link, the mouse arrow will turn into a little hand.

Note: A link does not have to be text. It can be an image or any other HTML element.

Other tags
<a> tag is an anchor tag which represents a link to reach the new linked document.
href attribute is used to link the address of the web pages by url.
target attribute to define where to open the linked document
<img> tag (inside <a>) to use an image as a link
id atribute (id="value") to show a bookmarks in web page
href attribute (href="#value") to link to the bookmarks
<a href="/html/default.asp">HTML tutorial</a>

This is an example of a hyperlink.

Example:

<!DOCTYPE html>
<html>
<body>
<p><a href="https://www.google.com">Visit google website</a></p>
</body>
</html>

Output:

2.10 Frames
In HTML pages, frames allow multiple views to the user and we can browse window into
multiple sections with a separate HTML document. A browser contains many frames in a
window which is known as a frameset. The window frames are divided into rows and columns
in similar way as table are organized.

Disadvantages of Frames

Due to some major drawbacks of frame in window, it is never recommended to use frames in
our webpages −

In smaller screen, frames do not cop-up properly because their screen is not big enough
to be divided up.
Sometimes our page will be displayed differently on different computers due to different
screen resolution.
The browser's back button might not work as the user hopes.
There are still few browsers that do not support frame technology.

Creating Frames

To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag
defines how to divide the window into frames. The rows attribute of <frameset> tag defines
horizontal frames and cols attribute defines vertical frames. Each frame is indicated by <frame>
tag and it defines which HTML document shall open into the frame.

2.11 Summary
HTML is a structured programming language (Structured programming is paradigm aimed at
improving the clarity, quality, and development time of a computer program) which provides a
set of rules for correct application of elements. The browser renders (display) the HTML code
for correct representation and orientation of content. At times, the rules laid down in HTML are
interpreted differently by browser which provides the programmers an opportunity to exploit this
vulnerability. HTML is essentially a tag-based language. The documents start with the
<! DOCTYPE> tag. The entire document is encapsulated within <HTML> (opening and closing)
tags. The document is further divided into header and body sections specified by <HEAD> and
<BODY> tags, respectively. The header section is used to provide the descriptive information
related to the web document and needs to contain the <TITLE> tag to define the title of the page.
The body section of the web document contains information regarding placement of various
elements of the document. Block-level elements, text-level elements, and special-character
entities are used to structure it. Some tags are used for providing certain logic and the others are
for physical representation. The HTML elements discussed so far are of basic nature and are
widely used over all systems. They are utilized to customize the document presentation.
However, a complete look of the web document cannot be achieved simply using these basic
tags.

2.12 Questions for Exercise


1. Define HTML Tag and list a few basic tags used in HTML.
2. What is a list? Why do we use them?
3. What are the different types of lists used?
4. Why bold and italic tags are used? Illustrate using suitable example.
5. How do we create frames? What are the disadvantages of using frames?
6. Show with an example the use of different heading types.
7. How to assign different colors in a HTML document?

2.13 Suggested Readings


Behrouz A. Forouzan. 2012. Data Communications And Networking, Fifth Edition.
New York: the McGraw-Hill Companies Inc.
William Stallings. 2007. Data And Computer Communications Eighth Edition. New
Jersey: Person Education,Inc.
Douglas E. Comer.2003. The Internet Book. Singapore: Pearson Education Pte. Ltd.
M.Srinivasan. 2012. Web Technology Theory and Practice. India: Dorling Kindersley
Pvt.Ltd.
Raj Kamal. 2006. Internet and Web Technologies. India: The Tata McGraw-Hill
Publishing Company Limited.

You might also like