Html session1,2,3

HTML
Session-1
Prepared by: Vidhi Mehta

Introduction to HTML
• HTML stands for ”Hyper Text Mark-Up Language”.
• It allows us to create a kind of documents that
can be viewed on any machine, in any
operating system, in a similar way.
• The document created using this language is
called webpage.
• The clickable text in these web pages, which
can point to a file document or a webpage is
called Hyperlink or “Hyper Text” .

Types of HTML Pages
• HTML pages are of two types:
 Static
Static pages, as the name indicates, comprise
static content (text or images).
 Dynamic
Dynamic pages are those where the content of
the web page depend on user input. So interaction
with the user is required in order to display the web
page.

The Document Heading & Naming Your
Document
• The purpose of the head is to provide
information to the application that is
interpreting the document.
• The TITLE element is the only required
element of the heading. It is used to give
your document a name. This title is
generally displayed in the title bar of the
browser.

TAG
• An HTML tag is a signal to the browser that it should
do something other than just throw text up on the
screen. All HTML tags begin with an open angle
bracket (<) and end with close angle bracket (>).
• Syntax:
<TAG ATTRIBUTE1=VALUE 1 ATTRIBUTE2=VALUE 2 ..>
ITEM TO BE FORMATTED
</TAG>

Continue…
• HTML tags can be of two types:
1. Paired Tags
A tag is said to be a paired tag if it, along
with a companion tag. For example Bold tag is
a paired tag.
2. Singular Tags
The second type of tag is singular tag or
stand-alone tag. A stand-alone tag does not
have a companion tag.

GENERAL STRUCTURE OF A HTML WEBPAGE
<HTML>
<HEAD>
<TITLE> This is my first HTML page </TITLE>
</HEAD>
<BODY>
ENTER BODY TEXT HERE.
</BODY>
</HTML>

The Document Body
• The Body of a web page can be created by
<BODY> tag and it will end with </BODY> tag,
between this tags you can give text or you can
use other HTML tags to create different elements
within a webpage. Syntax..
<BODY TEXT=”color code” BACKGROUND=”path of
image” BGCOLOR=”color code” LINK=”color
code” VLINK=”color code” ALINK=”color code”>
----------------
</BODY>

Attribute Function
TEXT Defines the color of the text
BACKGROUND Points to the URL of an image to use
for the document background.
BGCOLOR Defines the color of the document
background.
LINK Defines the color of an unvisited link.
VLINK Defines the color of an already visited
link.
ALINK Defines the color of an active link.

Comments in HTML Documents
• The syntax of writing comments is as
below…….

Basic Tags
• Font :- To manipulate font color and font sizes
font tag is used, it has the following syntax…
• 
. . . . . .

Attribute Function
Face It is used to specify font name. It can
take more than one values Separated with
comma. For example :

Size This attribute is used to specify font as
absolute size or relative size. Absolute
size is a number between 1 to 7, 1 being
smallest and 7 largest.
Color It is used to specify text color.

Block-level
• Block-level elements are used to format whole blocks
of text.Element Function
Paragraph
...
It is used to keep some specific paragraph or related
content in one section of a document. The division
(<div>…</div>) element has same function as of
paragraph, but <div> can’t work with all browsers. The
 and <DIV> both elements have one ALIGN
attribute. The possible values for the ALIGN
attribute and their functions are listed below.
Heading
<hi>...</hi>
i = 1 to 6
These elements are generally used to create headings
at different levels. <h1> delimits the highest-level
heading, <h2> the next level down (sub-
section), <h3> for a level below that, and so on
to <h6>.

Continue..
Element Function
Center
<center>…
</center>
It is used to display contents of the
document in the center of the screen.
Block quote
<blockquote>…
</blockquote>
A browser inserts white space before and
after a blockquote element. It also insert
margins for the blockquote element.
Address
<address>...
</address>
This is where you identify yourself as the
author of the document. Any copyright
information for the material in the page can
be placed here as well. The address element
is normally placed at either the top or bottom
of a document.

Element Function
Preformatted
<pre>...
</pre>
This element is useful when we want to
write the content of webpage in pre-
decided format. In short, this tag is used to
retain all white spaces and line breaks in
between contents. In other sense, this
element preserves white spaces and other
formatting characters. For example:
<PRE>INDIA PAKISTAN
SHRILANKA
AUSTRALIA

Text Related Tags
Presentational Elements
Element Function
Bold
...
The bold element uses a bold font to
display the text.
For example:- This is in bold text.
Italic
...
The italic element renders text using an
italic font.
For example:- This is in italic text.
Underline
...
The underline element causes text to be
underlined in the viewer.
For example:- This text is
underlined.

Continue…
Element Function
Type writing
<tt>...</tt>
The teletype element displays the contents
with a mono spaced typewriter font.
For example:- This is in <TT>teletype</TT>
text.
Strike
<strike>...
</strike>
The strikethrough element draws a horizontal
line through the middle of the text.
For example:- This is a <STRIKE> strike
through </STRIKE> example.
Big
<big>...</big>
The big print element uses a larger font size
to display the text.
For example:- This is <BIG>big</BIG> text.

Element Function
Small
...

The small print element displays the text in a
smaller font size.
For example:- This is small
text.
Subscript
...
The subscript element moves the text lower
than the surrounding text and (if possible)
displays the text in a smaller size font.
For example:-H2O.
Superscript
...
The superscript element moves the text higher
than the surrounding text and (if possible)
displays the text in a smaller size font.
For example:-
a2+B2=1
Continue…

Logical Text Level Elements
Element Function
Quotation
<q>...</q>
It is a short quotation from another source. Modern
browsers will display contained text with quotation
marks added on both sides.
For example:- This will be displayed in <q>double
quotation<q>.
Emphasis
...
The emphasis element is used to indicate a section of
text that the author wants to identify as significant.
Emphasis is generally shown in an italic font.
For example:- Education is very Important
.
Strong
...<s
trong>
The strong element is used to emphasize a particularly
important section of text. Text using strong emphasis
is normally set in a bold font.
For example:- This will display
strong.

Continue…
Element Function
Citation
<cite>...</cite>
The citation element is used to indicate the
citation of a quotation. It can also be used to
indicate the title of a book or article. An italic font
is normally used to display citations.
For example:-This book is published by
<CITE>ATUL PREKASHAN,
AHMEDABAD</CITE>.
Keyboard
<kbd>…</kbd>
The keyboard element is used to indicate a user
entry response. A monospaced typewriter font is
normally used to display keyboard text.
For example:-To run the decoder, type
<KBD>Restore</KBD> followed by your password.
Variable
<var>…</var>
The variable element is used to indicate a dummy
variable name. Variables are normally viewed in an
italic font.
For example:-The sort routine rotates on the
<VAR>I</VAR>the element.

Continue..
Element Function
Code
<code>…</c
ode>
The code element is used to indicate a small
amount of computer code. It is generally
reserved for short sections. Code normally
appears in a monospaced font.
For example:-One of the first lines that every C
programmer learns is: <CODE>puts(“Hello
World!”);</CODE>.
Sample text
<samp>…</s
amp>
The samp element is used for indicating sample
output from a computer program, script etc.
For example:- This is <samp>Sample computer
output code text</samp>
Definition
Term
<dfn>…
</dfn>
The dfn elementis used for indicating a
definition.
For example:- This is <dfn>Definition term
</dfn>.

Other Elements
• Break ( ) :-
The break element is used to break the line
after typing the first sentence and to write the
content in second line.
• Horizontal rule (<HR>) :-
You can create a horizontal line using the
horizontal rule element, <HR>. This tag draws a
shaded, horizontal line across the viewer's display.
The <HR> tag does not require an end tag. There is
an implied paragraph break before and after a
horizontal rule.

• The attributes supported by <hr> element are as
follows.
Attribute Function
ALIGN Can be set to LEFT, CENTER, or RIGHT.
WIDTH Can be entered in pixels or as a percentage of
the viewer window width. If a percentage is
desired, add a percent time to the number.
SIZE The height of the ruled line in pixels.
NOSHADE If this attribute is present, the viewer does
not use a three-dimensional effect.

Image Tag
• To manage images and their attributes within web
page HTML has <IMG> tag.
<IMG src=”path of an image” align=right
alt=”alternate text to be displayed” border=”width of
the border” height=”height of an image”
width=”width of an image” hspace=”horizontal
space” vspace=”vertical space” usemap=”name of
the map file” ismap>

Attribute Function
SRC Used to specify path of the image.
ALIGN Used to set the alignment of the image relative to the text around it
ALT Used to specify alternative text to be displayed in case when image
cannot be loaded.
BORDER Used to specify width of border to be displayed around image.
HEIGHT Used to specify height of an image.
WIDTH Used to specify WIDTH of an image.
HSPACE Used to specify horizontal space around the image.
VSPACE Used to specify vertical space around the image.
USEMAP It is associated with a map element's name or id attribute, and creates
a relationship between the image and the map.
ISMAP It causes an image to function as a graphical navigation tool, when
combined with an anchor tag.

Html session1,2,3

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Html session1,2,3

Similar to Html session1,2,3 (20)

Recently uploaded

Recently uploaded (20)

Html session1,2,3