HTML Tags

Steps to Create a HTML Doc.
Open a text editor Create your HTML document
Head - not displayed with body Body
Save the HTML (extension of .htm or .html) Display your HTML document in WWW browser window Check your work and modify as necessary Place it on the Web.
Structure of HTML Page

<html> <head> <title> Hello World </title> </head> <body> Hello World </body> </html>
Save with .html or .htm Extension
Structure of HTML Page
Steps to Create a HTML Doc.
Open a text editor Create your HTML document
Head - not displayed with body Body
Save the HTML (extension of .htm or .html) Display your HTML document in WWW browser window Check your work and modify as necessary Place it on the Web.
TAGS & Attributes

<body bgcolor = aqua >
Meaning of HTML TAG

Tags are elements of the HTML document used to specify how the document or Text in a web page should be displayed by the browser. In HTML, each tag has its own specific meaning, which is (in general) common across all different browsers.
HTML markup tags are usually called HTML tags HTML tags are keywords surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag Start and end tags are also called opening tags and closing tags
Working of HTML Tags?
When a WWW browser displays a page it reads from a text file, and looks for special codes or "Tags" that are marked by the < and > signs The general format for a HTML tag is: <tag name>string of text</tag name> As an example, the title for a section may use a header tag that looks like the following: <h3>What are HTML tags?</h3> This tag would tell a WWW browser to display the text "What are HTML tags?" in the style of header level 3
Classification of Tags
Singular Tags :- Those tags which have only opening tag not having closing tags e.g. < br > < hr > etc Paired Tags : - Those Tags which have both opening & closing tags e.g. < body > < / body > etc.
Common Tags Used

< html > < / html > Opens and closes the HTML document. < title > < / title > This is the title of your page and will appear at the top of your browsers window. < head > </ head > what you are not going to see on page. < body > < / body > what are you going to see on page. <h1 > </ h1> to <h6> </h6> Heading Tags <b> text </b> Bold text. <i> text </i> Italic text. <u> text </u> Underline text. <br> (no closing) Line break. <hr> (no closing) Horizontal line.
TAG with Attributes

Attributes are associated with each tag to further define the tags. Every tags in HTML having some attributes which enhance its working
< Tag_Name attributes = value >
HTML elements can have attributes Attributes provide additional information about the element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value"
Working with < BODY > Tag

The body element defines the document's body. The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.
Attributes
background bgcolor text
Value
image Name Color name Color name
Description
Specifies a background image for a document Specifies a background color for a document Specifies a background color for a document
Example
background = 1 . Jpg bgcolor= red text = black
link
alink vlink
Color name
Color name Color name
Specifies color for a link in a web page

Specifies color for a Active link in a web page Specifies color for a Visited link in a web page
link = cyan
alink = cyan vlink = cyan
Working with Color

aliceblue
antiquewhite
Codes
#90EE90
#D3D3D3
#F0F8FF
#FAEBD7
lightgreen
lightgrey
aqua
aquamarine azure beige bisque black blanchedalmond blue blueviolet brass * brown burlywood
#00FFFF
#7FFFD4 #F0FFFF #F5F5DC #FFE4C4 #000000 #FFEBCD #0000FF #8A2BE2 #B5A642 #A52A2A #DEB887
lightpink
lightsalmon lightseagreen lightskyblue lightslategray lightsteelblue lightyellow lime limegreen linen magenta maroon
#FFB6C1
#FFA07A #20B2AA #87CEFA #778899 #B0C4DE #FFFFE0 #00FF00 #32CD32 #FAF0E6 #FF00FF #800000
Working with < heading > Tag

The Heading < h1 ------ h6 > tags are used to create text headers for a document etc. H1 is the largest header & H6 is the smallest header.
Attributes
align
Value
Center , Left , Right
Description
Specifies the alignment of an text according to value.
Example
align = center
Working with < heading > Tag
Working with < Font > Tag

The font tag is used to set the face (type), color, and size of the characters in a text .
Attributes color face size Value Any color Like Arial 1 to 7 Description color attribute is used to set the color of the text attribute sets the font face (type) of the text, such as Arial or Courier Size attribute is used to set the size of text range is 1 to 7 Example color = red Face = arial Size= 6
Working with < Font > Tag
Working with < image > Tag

The < img > tag embeds an image in an HTML page .
Attributes
src alt align border Hspace Vspace Height Width Title
Value
Image path Any Text Top , bottom, middle , left , right pixels Pixels Pixels Any Text
Description
Specifies the URL of an image Specifies an alternate text for an image Specifies the alignment of an image according to surrounding elements Specifies the width of the border around an image Specifies the white space on left and right side of an image or Top & Bottom of image Specifies Height & Width of Image Display text as tool tip for image
Example
src = 1 . Jpg alt = Any Msg align = top Border = 5 hspace = 10 height= 10 Width= 5 Title = any Msg
Working with < image > Tag
Meaning of Hyperlink
hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a
A new section within the current document.
move the cursor over a link in a Web page, the arrow will turn into a little hand.
When you
Normal Text or Hyperlinks

Appear
Blue in color
The Hyperlink text / image is underlined. When the mouse cursor is placed over it, the standard arrow shaped mouse cursor changes to the shape
of a hand.
The color of link can be overwrite by the attributes of body tag.

Attributes Link Value Any Color Description Link on the Web Page Example Link = yellow
Alink
Vlink
Any Color
Any Color
Active Link on Web page

Visited Link on Web Page
Alink = Yellow
Vlink = Yellow
Type of links
Linking can be of Two Types
External Linking
Internal Linking
These are the links to files not on your own site or page
These are the links to parts of files in your own site or page
Working with < anchor > Tag

The <
a > anchor tag is used to create link between different web pages. It can be of two types Internal & External Linking.
< a href = URL
of Web page >
Any Text < / a >
Absolute URL
It will show the entire path of the file
Relative URL
It describe the location of the desired file with reference to the location of the file that contain URL itself.
http://abcd/mail/new.html
mail/new.html
External Linking
Attributes Value Description An absolute URL - points to another web site (like href="http://www.example.com/default.htm") A relative URL - points to a file within a web site (like href="default.htm") An anchor URL - points to an anchor within a page (like href="#top") Example href URL href= http://www.yahoo.co m/
target
_top _self _self _parent
Where Linked Document is opened
Target = _blank
< a href = http : // www.yahoo.com/ > Yahoo < / a >
< a href = / f1.html > Click me </ a>
Internal Linking
Attributes name href Value Any name # anchor section Description Name of Anchor Section Linking with anchor section Example Name = BCA href = # anchor section
< a name = Location name > < a href = # location name > Click me </ a>
Example:
<<H1>Table
of Contents</H1> <A href="#section1">Introduction</A><BR> <A href="#section2">Some background</A><BR> <A href="#section2.1">On a more personal note</A><BR> ...the rest of the table of contents... ...the document body.. . <H2> <A name="section1">Introduction</A> </H2> ...section 1... <H2> <A name="section2">Some background</A> </H2> ...section 2... <H3> <A name="section2.1">On a more personal note</A> </H3> ...section 2.1..
OUTPUT
Table of Contents Introduction Some background On a more personal note ...the rest of the table of contents... ...the document body... I Introduction ...section 1... 1 Some background ...section 2... 1
On a more personal note ...section 2.1... 1
Working with < hr > Tag

The <HR
Attributes color size Width Align
>
element inserts a horizontal line.

Value Description specifies the color of the horizontal line Set the size of the line Set the width of the line Alignment of line Example color = red size=4 Width=200 Align= left
Any color Any num Any num Left , center , right
<hr size="5" width="300" align="left">
Working with < Paragraph > Tag

The < P > element defines a paragraph of text. One blank line is inserted between paragraphs.
Attributes align
Value
Description
Example align = center
Center , Left , Right
Specifies the alignment of an image according to surrounding elements
< p align = center > God is Great </ p >
Working with < base > Tag

< HEAD > Tag. It is used to specify a base URI, or URL, for relative links. For example, you can set the base URL once at the top of your page, then all subsequent relative links will use that URL as a starting point.
This tag is placed under < head > < base href = Z:/Images/> </head>
Working with < base > Tag

<html> <head> <base href="http://www.quackit.com/html/" > </head> <body> <p>Learn about <a href=index.html">Intro to HTML</a></p> </body> </html>
The link above will actually resolve to http://www.quackit.com/html/index.html regardless of the URL of the current page. This is because the base URL (http://www.quackit.com/html/) is prepended to the (relative) URL indicated in the link (index.html)
Working with <table> Tag

any information in tabular form or in the form of Rows & Columns. It can be basically used as drawing different interfaces for developing any web application.
Table tag is Used to represent Table tag denotes the beginning of a table Each Table has Each table row ( TR ) can contain : Table Data (
caption tag for providing name of Table Table Row ( TR ) tag used to form a single row with in a table TD ) tag used to put data in a cell Table Heading ( TH ) used to put text as heading in a cell.
Attributes of <table> Tag

Attributes Border, bordercolorlight, bordercolordark Cellspacing Cellpadding Bgcolor, background ( for img ) Hspace , Vspace Width , Height Align Rules Value Pixels Pixels Pixels color name Pixels Pixels Center , Left , Right None Size of Border Specifies Space between cells Specifies space within cells sets the background color of the marquee. Specifies the white space on left and right side of an table Specifies the width & height of table Specifies the alignment of an table according to surrounding elements Weather inside border display or not Description Example Border=5 Cellspacing=10 Cellpadding=10 bgcolor = yellow hspace = 10 Width=10 align = center Rules=none
Working with < tr > Tag
Working with < tr > Tag

<TR BGCOLOR="#00FF00"> <TD><IMG SRC="rrose.gif" ALT="rose"></TD> <TD>Image is a transparent .gif.</TD> </TR>
Working with < td > Tag
Single cell
<TD>Image is a transparent .gif.</TD>
Working with < table > Tag

<TABLE BORDER="7" CELLPADDING="7" CELLSPACING="10"> <TR BGCOLOR="#00FF00"> <TD><IMG SRC="rrose.gif" ALT="rose"></TD> <TD>Image is a transparent .gif.</TD> </TR> </TABLE>
Result : -
Working with < table > Tag

<TABLE BGCOLOR=red" BORDER="7" CELLPADDING="7" CELLSPACING="10"> <TR> <TD>The table has a red background</TD> <TD><PRE> </PRE></TD> </TR> <TR> <TD BGCOLOR=blue">BGCOLOR in TD/H or TR overrides BGCOLOR in the TABLE tag.</TD> <TD><PRE> </PRE></TD> </TR> </TABLE>
RowSpan & ColSpan

Table cells can attributes many down") indicate how many columns or rows a cell should take up.
span across more than one column or row. The COLSPAN ("how many across") and ROWSPAN ("how
RowSpan & ColSpan
The colspan attribute of the TD element specifies the number of columns spanned by the cell, and the rowspan attribute specifies the number of rows spanned by the cell
Working with ColSpan Tag
Working with RowSpan Tag
Nested Tables
When User declare or uses a table inside another table as a its data member.
By:-Lect.Mohit Verma ( DBIMCS )
Nested Tables
<TABLE BORDER="7" CELLPADDING="10" CELLSPACING="10" BGCOLOR=blue"> <CAPTION ALIGN="BOTTOM">Butterfly</CAPTION> <TR> <TD> <TABLE BORDER="7" CELLPADDING="10" CELLSPACING="10" BGCOLOR=red> <TR> <TD><IMG SRC="bfly.gif" ALT="butterfly"></TD> </TR> </TABLE> </TD> </TR> </TABLE>
Miscellaneous TAGS
Working with < marquee > Tag

With this tag user can scroll any text or img as per its requirement.
Attributes behavior direction bgcolor Hspace Vspace Scrollamount , scrolldelay Width Height Value Alternate , slide , scroll Left , right , up, down color name Description indicates how the contents scroll. indicates which direction the marquee scrolls BGCOLOR sets the background color of the marquee. Specifies the white space on left and right side of an marquee or Top & Bottom of marquee Specifies speed which it move Specifies the width & height of marquee text Example Behavior=alternate Direction = right bgcolor = yellow
Pixels
hspace = 10
speed Pixels
Scrollamount=20 Width=10
Working with < List > Tags

This tag can be used to make any kind of list weather Ordered or Unordered.
< UL > for Unordered List it contain < Li > List item Tag init <OL > for Ordered List it contain <Li> List item init. <ul> <li>first list item</li> <li>second list item</li> <li>third list item</li> </ul>
<ol> <li>first list item</li> <li>second list item</li> <li>third list item</li> </ol>
Output 1. First list item 2. Second list item 3. Third list item

Tag Attributes Value Circle Disc square Description The type attribute of the UL element changes the marker type. Example type = disc
<UL>
Type
<ul> <li type="disc">first list item</li> <li type="circle">second list item</li> <li type="square">third list item</li> </ul>
Tag
Attributes
Value
Description
Example Start = 5
< li >
start
Any Value
From where to start
Working with < Sub > Tags

The <sub> tag defines subscript text. Subscript text appears half a character below the baseline. Subscript text can be used for chemical formulas, like H2O.
< body > H < sub > 2 < / sub > O.
</body>
Working with < Sup > Tags

The <sup> tag defines subscript text. Subscript text appears above a character below the baseline. Sup script text can be used for mathematical formulas, like
< body >
a < sup > 2 < / sup > + b <sup> 2 </sup > .

</body>

HTML Tags

Transféré par

Informations du document

Description originale:

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

HTML Tags

Transféré par

Droits d'auteur :

Formats disponibles

Steps to Create a HTML Doc.

Open a text editor Create your HTML document

Head - not displayed with body Body

Structure of HTML Page

Save with .html or .htm Extension

Structure of HTML Page

Steps to Create a HTML Doc.

Open a text editor Create your HTML document

Head - not displayed with body Body

TAGS & Attributes

Meaning of HTML TAG

Working of HTML Tags?

Common Tags Used

TAG with Attributes

Working with < BODY > Tag

Specifies color for a link in a web page

Working with Color

Working with < heading > Tag

Working with < heading > Tag

Working with < Font > Tag

Working with < Font > Tag

Working with < image > Tag

Working with < image > Tag

Normal Text or Hyperlinks

The color of link can be overwrite by the attributes of body tag.

Active Link on Web page

Working with < anchor > Tag

of Web page >

Any Text < / a >

_top _self _self _parent

Where Linked Document is opened

< a href = http : // www.yahoo.com/ > Yahoo < / a >

< a href = / f1.html > Click me </ a>

On a more personal note ...section 2.1... 1

Working with < hr > Tag

element inserts a horizontal line.

Any color Any num Any num Left , center , right

<hr size="5" width="300" align="left">

Working with < Paragraph > Tag

Example align = center

Center , Left , Right

Specifies the alignment of an image according to surrounding elements

< p align = center > God is Great </ p >

Working with < base > Tag

Working with < base > Tag

Working with <table> Tag

Working with <table> Tag

Working with <table> Tag

Attributes of <table> Tag

Working with < tr > Tag

Working with < tr > Tag

Working with < td > Tag

<TD>Image is a transparent .gif.</TD>

Working with < table > Tag

Working with < table > Tag

RowSpan & ColSpan

RowSpan & ColSpan

Working with ColSpan Tag

Working with RowSpan Tag

By:-Lect.Mohit Verma ( DBIMCS )

Working with < marquee > Tag

Working with < List > Tags

Working with < List > Tags