Scribd
Upload
74 views115 pages

2 HTML Assin

The document discusses HTML tags and their usage. It describes common tags like <title>, <p>, <b>, <i>, <u>, <img>, <a> and explains how to add headings, paragraphs, bold, italics, underline text, images and links. It also covers lists, headings, line breaks and more.

Uploaded by

Noman Abbasi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
74 views115 pages

2 HTML Assin

The document discusses HTML tags and their usage. It describes common tags like <title>, <p>, <b>, <i>, <u>, <img>, <a> and explains how to add headings, paragraphs, bold, italics, underline text, images and links. It also covers lists, headings, line breaks and more.

Uploaded by

Noman Abbasi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 115

HTML

[Hyper Text Markup Language]


HTML
 Hypertext:
It provides a way to create a link between
information in the same document as well as in
different documents.
 Markup Language
Markup refers to the special tags that are a
part of the HTML document. These tags
specify how the document content should be
displayed.
Structure of an HTML
document.
Every HTML document should have the following
structure:
 A head : It is used to identify the head of a
document. Many browsers don’t require this tag.
 A body : The body of HTML document contains
the text that will show up on the Web page.
Moreover it contains pictures, links to other Web
pages etc.
HTML Tags
Syntax:
<tag> </tag>
Moreover, tags are not case sensitive:
<tag> </tag>
<TAG> </TAG>
Both of the lines above means same thing.
Code Structure of HTML
Document
<html>
<head>

</head>

<body>

</body>
</html>
<title> Tag
The <title> element in a document must
occur within the <head> element of the
document and is one of the only elements
permitted to be in the head section.
<title> Roll #14 </title>
It gives title to your document.
<title> Tag
<p> & <br> Tags
For a paragraph break we use tag <P> or <p>.
For a line break we use tag <BR>, <br> or <Br>.
<br> Tag
<pre> Tag
Pre stands for Preformatted. Sometimes you
want to include spaces in your text and you
don’t want your browser to ignore these
spaces. Such spaces are included in the
<pre> </pre> tag.
<pre> Tag
<hn> Tage
It is used to give headings. In the tag <hn> h
stands for the heading where as n can be
replaced with any number between 1-6.
Where <h1> is the largest and <h6> is the
smallest heading size.
<h1>MY PAGE</h1>
<hn> Tag
<hr> Tag
<hr> stands for horizontal row.
Properties:
 Size
 Width
 Color
 NOSHADE
<hr> Tag
<B>, <I>, & <U>
 <b> </b> Bolds the data
 <I> </I> Italicizes the data
 <u> </u>Underlines the data
<b><i>&<u> Tag
BGCOLOR
 It gives background color to the body. It is a
property of the body tag.
Example:
<body bgcolor=“red” >

</body>
COLORS
 Colors can be given by their names like
“green”, “blue”, “cyan” etc.
 And also by their hexadecimal notations
like 123ABC, 6789EF etc. One important
thing to notice is that the color in hexa-
decimal notations are also preceded by a ‘#’
sign.
Examples of bgcolor
 <body bgcolor=“red”>
 <body bgcolor=“#123ABC”>
Some basic colors are:
#FFFFFF ----- White
#000000 ----- Black
#FF0000 ----- Red
#00FF00 ----- Green
#0000FF ----- Blue
Text (color) Property
<body> tag has another property called “text.”
<body text=“red”>
Changes the color of the text, that appears
on the page, to “red.”
Blockquote
The blockquote element is used to denote a
long quotation – one that should be set off
from the surrounding text in the document.
Browsers typically display this type of
quotation as indented text.
<blockquote> </blockquote>
Address Tag
This element is used to hold addresses.
Typically, it occurs at the end of documents
and is used to enclose the author’s name
and electronic mail address. Browsers
usually display addresses in italic style.
<address> Sam Andrew<br>
[email protected] </address>
center Tag

This allows text to appear in the


center of page.

<center> I am centered </center>


Align Property
With help of align property you can set text,
pictures etc. to center, right or left.
<p align=center> This is centered text </p>
TT tag
This tag is called monospace tag. It is called
monospace because each letter in this
typeface occupies exactly the same space. It
typically looks like a typewriter font.

<tt> This is written using tt tag</tt>


Big TAG
This tag increases the size of font.
<big> I am big </big>
<big> I am even bigger </big>
Size keeps on growing as you keep on
adding the tag big.
Small TAG
This tag decreases the size of font.
<small> I am small </small>
<small><small>
I am even smaller
</small></small>
Size keeps on diminishing as you keep on
adding the tag small.
S or strike TAG
s or strike tags is used to strike through the
text.
<s> I am striked</s><br>
<strike> I am striked as well</strike>
CITE TAG
This tag is use for citation citation.
Browsers usually display citations in italics.

<cite> I am cited </cite>


Code TAG
We use this tag while displaying programs on
internet. Browsers usually display this text
in a fixed-width font.
<code>
A=34;<br>
System.out.println(“A=” + A);
</code>
DFN TAG
Use to specify definitions.

HTML:
<dfn>
HyperText Markup Language
</dfn>
DEL TAG
Its output is similar to that of <s> or
<strike>. It displays your information in
deleted text.

<del> I am fine. </del>


<EM> TAG
Used to denote emphasis of the affected
text. Browsers usually display emphasis as
italics.

<EM> I am italicized </EM>


<STRONG> TAG
Used to denote strong or important text.
Browsers usually display display it in bold
font.

<strong> I am bold </strong>


<INS> Tag
Browsers usually display it as an underline
text.

<ins> I am underlined </ins>


<SUB> & <SUP> Tag
<SUB> displays your information in
subscript.
H<SUB>2</SUB>
<SUP> displays your information in
superscript.
H<SUP>2</SUP>
Font TAG
Font tag is used to set the following font
properties:
 Size
 Color
 Face
BASEFONT TAG
Unfortunately, BASEFONT was not named
BASEFONTSIZE because what it does is to
set the default font size. I.E. 2.0 and above
supports same attributes for BASEFONT as
for FONT. Default font-size value is 3.

<basefont size=7> My size = 7 </basefont>


Special Characters
In order to display some special
characters on your web page we use &
sign.
Example: To show copyright symbol we
use:
&copy;
And many more…
They always end with (;) symbol.
LISTS
 Definition Lists
 Ordered Lists
 Unordered Lists
 Other Approaches
Definition Lists
Definition List includes the following
terms:
 <DT> means definition term
 <DD> means Definition description
 <DL> Definition List
<DL>
<DT>HTML:
<DD>HyperText Markup Language.
<DT>XML:
<DD>Extensible Markup Language.
<DT>DHTML:
<DD>Dynamic HyperText Markup Language.
</DL>
Unordered List
Unordered List includes the following
terms:
 <UL> means unordered list.
 <LI> means list.
<UL>
<LI>HTML
<LI>DHTML
<LI>XML
<LI>SGML
</UL>
Unordered List 3
Unordered list have an option called “type.”
With the help of this option you can change
the appearance of the bullets that appear on
your screen. Following are the types of
bullets available in UL.
 Circle
 Disc
 Square
Examples
<ul type=“circle”>

<ul type=“disc”>

<ul type=“square”>
Ordered List
Ordered Lists includes the following:
 <OL> means ordered list
 <LI> means list
<OL>
<LI>HTML
<LI>DHTML
<LI>XML
<LI>SGML
</OL>
Ordered List 3
Ordered list have an option called “type.” With the
help of this option you can change the appearance
of the bullets that appear on your screen.
Following are the types of bullets available in OL.
 1 Arabic Numerals
 A  Uppercase Letters
 a  Lowercase Letters
 I  Large Roman
 i  Small Romans
Ordered List 4
Apart from type we also have an option
called “start.” Start tells HTML what will
be the initial value where as type tells
HTML what kind of bullet I want to use.
EXAMPLE:
<OL TYPE=1 START=9>
<OL TYPE=a START=9>
<OL TYPE=A START=9>
<OL TYPE=I START=9>
<OL TYPE=i START=9>
Other Approaches
There are two more methods to achieve
unordered list format:
 <DIR>
 <MENU>
There is no difference in the output.
MENU TAG EXAMPLE
<menu>
<LI>HTML
<LI>DHTML
<LI>XML
<LI>SGML
</menu>
DIR TAG EXAMPLE
<dir>
<LI>HTML
<LI>DHTML
<LI>XML
<LI>SGML
</dir>
<ol> Nested Lists
<li> Paste Tomatoes <li>
<ul>
<li> Banana Legs </li>
<li> Principle Borghese </li>
</ul>
<li> Cherry Tomatoes </li>
<ul>
<li>Gold Nugget</li>
<li>Small Fry</li>
</ul></ol>
<ul>
<li>Level One
<ul>
<li>Level Two
<ul>
<li>Level Three
</ul>
</ul>
</ul>

You might also like