Scribd
Upload
26 views

HTML Is A Markup Language

The document discusses the basics of HTML including what HTML is, HTML elements or tags, HTML structure, style tags, lists, images and links, email links, superscript and subscript, and tables. It provides examples and explanations of key HTML components.

Uploaded by

chaturvediansh029
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
26 views

HTML Is A Markup Language

The document discusses the basics of HTML including what HTML is, HTML elements or tags, HTML structure, style tags, lists, images and links, email links, superscript and subscript, and tables. It provides examples and explanations of key HTML components.

Uploaded by

chaturvediansh029
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 15

INTRODUCTION : HTML

HTML is a markup language, which is used to define the layout and attribute of a World Wide Web
(WWW) document as well as to create links between Web Pages. HTML is the underlying foundation of
the Website design. It is a subset of SGML (Standard Generalized Markup Language) and a high-level
markup language. It was developed by Tim Berner Lee in 1990.

HTML is a short form of Hyper Text Markup Language, which means


(i) Hyper Text is simply a piece of text that has some extra features like formatting, images, multimedia
and links to another document.
(ii) Markup Language is a way of writing layout information within documents.

HTML is a page layout and hyperlink specification language. It allows images and other objects to be
embedded that can be used to create interactive forms. HTML documents are described through HTML
elements or tags.

HTML Elements or Tags


HTML is written in the form of tags. A tag or element refers to a string enclosed within angular brackets
(< and >). HTML elements represent semantics or meaning.

(i) HTML tags are predefined and are no case-sensitive.


(ii) The opening tags are written within the less than (<) and the greater than (>) signs e.g.
(<HTML>)
(iii) The closing tags are written within the < and the > signs with a forward and (/) slash
appended before the name of the tag e.g.</HTML>
(iv) The attributes are always specified in the opening tags, which provide additional information
tag. It comes in name/value pairs like name ="value". e.g. <FONT size = "5">

There are two kinds of elements that is container elements and empty elements.

Container Elements : These types of HTML elements always wrap around the text or graphics which
come in a set with an opening as well as a closing tag. In other words, HTML tags that include both ON
and OFF tags are known as container tags. e.g <HTML>.......</HTML>

Empty Elements : On the other hand, the empty elements are standalone tags that is empty tags do not
have to wrapped around text or graphics and do not require a closing tag. In other words, HTML tags
that include only ON tag and there is no OFF tag then, these tags are known as Empty Tags.
e.g. <HR> inserts a horizontal line, <BR> adds a line break
HTML Structure
HTML documents is a combination of various tags, which define the structure and appearance of the
Web Page.

(i) The <HTML> tag tells the browser that this is an HTML document. You must begin your HTML files
with this tag and end your HTML file with matching closing tag.

(ii) The <HEAD> tag is used for text and tags that do not appear directly on the Web Page. It acts as a
header of file and contains some information like setting the title of the Web Page.

(iii) The <TITLE> tag contains the document title. This tag lies between <HEAD> and </HEAD> tags. The
title specified inside this tag appears on the browser's title bar.

Style Tags
HTML provides various style tags, which are as follows:

Bold <B> Tag : This tag specifies the text into bold text. It is a container element. The tag is used for text
formatting. General Syntax : <B> .......... </B>

Example :

Output :

Italic <I> Tag : This tag is used to make the text in italic form. It is also a container element. This is also
used for text formatting. General Syntax : <I> ......... </I>
Example :

Output :

Underline <U> Tag : This tag is used to underline the text. It is also a container element. General Syntax :
<U> .............. </U>

Example :

Output :
HTML Lists
List tags are generally HTML containers that are capable of accepting other container and empty tags
within their boundaries. These list tags are responsible for affecting the spacing and the layout of text,
not the emphasis, so they are applied to groups of text and allow individual formatting tags within them.

Types of Lists
Unordered List : This list is also known as unnumbered list is an indented list with a bullet symbol in
front of each list item. An ordered list starts with <UL> tag. Each list item starts with <LI> tag. This list
items are marked with bullets. The unordered list tag is a container tag. The default bullet type for most
Web browsers is a full disc (black circle). General Syntax : <UL> .......... </UL>. type is an attribute of
<UL> tag.

Example :

Output :
Ordered List : The list starts with the <OL> tag. Each list item starts with the <LI> tag. The list items are
marked with numbers. The ordered list tag is a container tag which is used for numbered lists. By
default, the numbering will be 1, 2, 3 ....... and so on. You can also adjust the numbering using the type
attribute. General Syntax : <OL>.......... </OL>. start and type are the attribute of Ordered List.

Example :

Output :

Definition List : This is a list of items, with a description of each item. HTML definition list are indented
list without any bullet symbol or any number in front of each item. This list elements have a unique
array of tags or elements. The terms DL, DT and DD stands for definition list, definition term and
definition description.

Example :

Example :

Nested List : List can be nested that means one list can be placed inside another. In the nested list, one
or more items can contain sub-items. A list is a record of short pieces of related information used to
display the data or any information in web pages in the ordered or unordered form. For example, to
purchase the items, we need to prepare a list that can either be ordered or unordered list which helps
us to organize the data and easy to find the item.
Example :

Output :

Inserting Images and Links in HTML


HTML can be used to insert images in the following formats:
(1) GIF (Graphics Interchange Format) (ii) JPG or JPEG (Joint Photographic Experts Group) (iii) PNG
(Portable Network Graphics)

The <IMG> tag is used to insert an image in a Web page. It is very important to know that images are not
technical part of the Web page file, they are separate files which are inserted into the Web page, when
it is viewed by a browser. So, a simple Web page with one image is actually two files. When an HTML file
is displayed in a browser, it requests the image file and places it on the Web page where the tag
appears. General Syntax : <IMG src="Image URL" [various attributes]>

The <IMG> tag has two required attributes:

 src - Specifies the path to the image


 alt - Specifies an alternate text for the image, if the image for some reason cannot be
displayed
 width - Specifies the width of the image.
 height - Specifies the height of the image.

A key feature of the HTML is its ability to link text and/or an image to another document or within a
document. If you are on a Web page and see the colored and/or an underlined text, it is a hyperlink. It is
also known as hypertext link or just link. By default, color of a hyperlink is blue. The main objectives of
linking are as follows:

(i) To add more pages to the Website and link them together.

(ii) Using internal links (anchors) to save scrolling for visitors.

(iii) To indirect the user to Web page of different Website.

In other words, hyperlinks are the links that carry user from one Web page to another (within or on
another Website). It is activated by clicking on an underlined text or image. And, when the mouse
pointer is brought over a hyperlink, the pointer changes to a hand. In HTML, links can be created by
using <A> anchor tag. <A> tag is a container tag that means it requires a starting as well as ending tags.

To include an anchor in your document, you should do the following

(i) Start the anchor tag with <A.

(ii) Specify the document you are linking to, by entering the parameter href "file name with extension.

(iii) Place closing right angle bracket (>). (e) Enter the text that will serve as the hypertext link after the
opening <A> tag.

(iv) Enter the closing anchor tag </A>. More precisely, it can be seen as : <A href="mypage.HTML">My
another page</A>
Here, it is noticeable that the final </A> tag is required. If it is not included, everything following that link
will also be linked to another document, until the tag is closed.

Example :

Output :

Sending E-mail from a Browser


Sending and receiving E-mails is the quickest and economical means of communication. The mailto
attribute of <A> tag is used to serve the purpose of sending E-mails through a Website. It enables
emailing, which helps visitors to send feedback through the Website.

The mailto value when used along with an E-mail address in href attribute of anchor tag, will create a
link. When this link will be clicked, it will open default E-mail client. You can also add a header to E-mail
sent from a mailto link. Using "?Subject Subject line", we can add subject line of the E-mail window.

Superscript and Subscript in HTML


<SUP> Tag : In HTML, the <SUP> and </SUP> tags turn the enclosed text into superscript. In its simplest
form, <SUP> tag may be specified as: <SUP> aaa </SUP>. Where, aaa is the text, which is to be
superscripted.

<SUB> Tag : The text which is lowered slightly below the baseline to appear below the surrounding text
is known as subscript. e.g. in H₂O, 2 is the subscripted text. In HTML, the <SUB> and </SUB> tags turn
the enclosed text into subscript. In its simplest form, <SUB> tag may be specified as: <SUB> aaa </SUB>.
Where, aaa is the text, which is to be subscripted.

Example :

Output :

Working with Tables in HTML


In HTML, tables are created by <TABLE> tag . Data of tables can be in form of text or graphics. These
tables are made up of rows and columns. An intersection of a row and a column is known as cell. The
data in tables is contained in cells. Each table may have an associated caption attribute (it provides a
description about the table). Moreover, a summary attribute can also be included (for more precise
description).

Basic tags that are used to create a table in HTML are as follows:
(I) Table Tags (<TABLE>....</TABLE>) It is used to insert a table in a Web page. It is a first tag, which starts
and closes a table.

(ii) Row Tags (<TR>....</TR>) It is used to define a table rows. Table rows are group of the header, footer
and body sections that is created by using thead, tfoot and tbody elements. Generally, the first row of a
table is referred to as the header section, the last row of a table is referred to as the footer section and
the middle rows in the table are referred to as the body section.

(iii) Cell Tags (<TD>....</TD>, <TH>....</TH>) It is used to define data cells (current cells) or header of the
table. These tags are the data containers of the table. They can contain all sorts of HTML elements like
text, images, lists, other tables etc.

(iv) Caption Tags (<CAPTION>....</CAPTION>) It is used to define the title or caption for the table that
provides a short description of the table's purpose.

Example :
Output :

You might also like