HTML. The World Wide Web Protocols Addresses HTML.

The World Wide Web

Protocols

Addresses HTML

Introduction to HTML HTML is a MARKUP language Using HTML tags and elements, you can:

Control the appearance of the page and the content. Publish online documents and retrieve online

information using the links inserted in the HTML document.

Create on-line forms. These forms can be used to collect information about the user, conduct transactions, and so on.

Insert objects - - audio clips, video clips, ActiveX components, Java applets - - in the HTML document.

HTML syntax:<HTML>

<HEAD>

<TITLE>Welcome to HTML</TITLE>

<BODY>

<H3>My first HTML document</H3>

</BODY>

</HTML>

Displaying the page

Browsers and Editors

Browsers Netscape's Navigator Microsoft's Internet Explorer

Editors Microsoft FrontPage Notepad

HTML Tags HTML tag is used to mark the beginning

and end of an HTML document. <HTML> . . . </HTML>

The HTML tag is comprised of: <ELEMENT ATTRIBUTE = value> Element Attribute Value

Continue.. <BODY BGCOLOR = lavender>

<HTML><HEAD><TITLE>Welcome to HTML</TITLE><BODY BGCOLOR = lavender><H3>My first HTML document</H3></BODY></HTML>

Changing attributes

Structure of an HTML document The HTML section The Header section. The BODY section.

<HTML>

<HEAD>

<TITLE>Welcome to the world of HTML</TITLE>

</HEAD>

<BODY>

<P>This is going to be real fun</P>

</BODY>

</HTML>

Basic HTML elements Block-level elements

Headers (H1 to H6) Paragraphs (P) List Items (LI) Horizontal Rules (HR).

Inline or text level elements I, B and FONT (character emphasis) A (hypertext links) BR (line breaks) APPLET (embedded objects) IMG (images)

Headings<HTML>

<HEAD>

<TITLE>Introduction to HTML</TITLE>

<H1>Introduction to HTML</H1>






</HEAD>

</HTML>

Using headings

Paragraphs <HTML><HEAD><TITLE>Welcome to HTML</TITLE><BODY BGCOLOR = lavender><H3>My first HTML document</H3><P>This is going to be real fun<H2>Using another heading</H2><P> Another paragraph element </BODY></HTML>

output

Continue..<HTML><HEAD><TITLE>Welcome to HTML</TITLE><BODY BGCOLOR = lavender><H3>My first HTML document</H3><P>This is going to be real fun<H2>Using another heading</H2><P> Another paragraph element <ADDRESS><P><A href="some address">Click here to register for

a free newsletter</A> </ADDRESS></BODY></HTML>

Output

Horizontal Rule

<HR> Attributes

align Width Size Noshade

Continue..

<HR noshade size = 5 align = center width = 50%</HR>

<HR size = 15 align = left width = 80%</HR>

Breaks <HTML>

<HEAD>

<TITLE>Welcome to HTML</TITLE>

<BODY BGCOLOR = lavender>

<H3>My first HTML document</H3>

<P>This is going to be real fun

<H2>Using another heading</H2>

<BR>

<H1>This should surprise you</H1>

<P> Another paragraph element

Continue..<ADDRESS>

<A href="some address">Click here to register for a free newsletter</A>

</ADDRESS>

</BODY>

</HTML>

Output

Using Fonts <FONT> … </FONT>

Color Size Face

Example<HTML> <HEAD><TITLE>Welcome to HTML</TITLE> </HEAD><BODY><H3><FONT SIZE = 3 COLOR = HOTPINK FACE =

Arial>My first HTML document</FONT></H3><P>This is <FONT COLOR = BLUE SIZE = 6>going

</FONT>to be real fun </BODY> </HTML>

Using fonts

Adding Color

<HTML><HEAD><TITLE>Learning HTML</TITLE></HEAD><BODY BGCOLOR=lavender><H2><FONT COLOR = LIMEGREEN>Welcome to HTML</FONT></H2><P><FONT COLOR = RED>This is good fun</FONT></P></BODY> </HTML>

Output

Choosing Alignment of text Value

Left Center Right Justify

Example<HTML> <HEAD>

<TITLE>Learning HTML</TITLE> </HEAD>

<BODY BGCOLOR=lavender>

Continue..<H2 align = center><FONT COLOR =

LIMEGREEN>Welcome to HTML</FONT></H2>

<P align = right><RIGHT><FONT COLOR = RED>This is good fun</FONT></P>

</BODY>

</HTML>

output

Using special characters Greater than (>)

> Less than (<)

< Quotes

" Ampersand

& Space

Lists

Unordered lists Ordered lists Definition lists

Unordered lists<HTML> <HEAD><TITLE>Learning HTML</TITLE> </HEAD><BODY><UL>

<LI>Monday<LI>Tuesday<LI>Wednesday<LI>Thursday<LI>Friday

</UL></BODY></HTML>

Customized bullets

<UL TYPE = SQUARE> Square bullets

<UL TYPE = DISC> Sphere bullets <UL TYPE = CIRCLE> Round bullets

Ordered lists<HTML> <HEAD>

<TITLE>Learning HTML</TITLE> </HEAD>

<BODY>

<OL>

<LI>Monday

<LI>Tuesday

<LI>Wednesday

<LI>Thursday

<LI>Friday

</OL>

</BODY></HTML>

Customized Numbers Upper Roman

<LI TYPE = I> Lower Roman

<LI TYPE = i> Uppercase

<LI TYPE = A> Lowercase

<LI TYPE = a> Begin numbering with a digit other than “1”

<OL START = n> [ Default ]

Definition lists <HTML> <HEAD><TITLE>Learning HTML</TITLE> </HEAD><BODY><DL>

<DT>Sunday<DD>The first day of the week

<DT>HTML<DD>HyperText Markup Language

<DT>Internet<DD>A network of networks

Continue..<DT>TCP/IP

<DD>Transmission Control Protocol / Internet Protocol

</DL>

</BODY>

</HTML>

Output

Introduction to Hyperlinks

Types of Links Internal Links

Internal links are links to sections within the same document or within the same web site.

External Links External links are links to pages on other

web sites or servers.

Internal and External links

- - - - - - -

- - - - - - -

- - - - - - -

- - - - - - -

- - - - - - -

- - - - - - -

- - - - - - -

- - - - - - -

- - - - - - -

- - - - - - -

Creating Hyperlinks

To create a hyperlink, you have to specify two components: The full address or URL of the file to be

linked The hotspot that will provide the link. The

hotspot may be a line of text or even an image.

About Addresses absolute URL relative URL

About anchors The syntax is: <A HREF= “URL”>Hypertext</A>

The syntax of HREF is A HREF =<protocol://host.domain:port/path/filename”>Hypertext</A>

Protocol is the protocol type. Some of the commonly used protocols are:

Host.domain - - is the Internet address of the server Port - - is the port number of the destination

server Hypertext – is the text or images that the user

must click to activate the link

Linking Linking to other documents

Absolute pathnames Relative pathnames

Linking to sections of the same document

Linking to a specific point is another document

Using e-mail Using an identifier

Linking to other documents<HTML> <HEAD>

<TITLE> Using links</TITLE> </HEAD>

<BODY>

<H1><CENTER><FONT SIZE = 3 COLOR = HOTPINK>CREATING LINKS</FONT></CENTER></H1>

<BR>

<BR>

Continue..<P>

This page is all about creating links to documents.

<A HREF = "Doc2.htm">Click here to view document 2</A>

</BODY>

</HTML>

Linking to other documents Absolute pathnames

C:\mydirectory\htmlexamples\Doc2.htm. Relative pathnames

<A HREF= "..\Doc3.htm">Next page</A>

Linking to sections of the same document<HTML> <HEAD><TITLE>Using Links</TITLE> </HEAD><BODY><A HREF = "#Internet">Internet</A><BR> <BR><A HREF = "#HTML">Introduction to HTML</A><BR> <BR><A HREF = "#Consistency">Unity and Variety</A><BR> <BR><A name = "Internet">Internet</A><BR> <P>

Continue..The internet is a network of networks.

</P>

<A name=“HTML”> Introduction to HTML</A>

<BR> <P>

Hyper Text Markup Language is a standard language.

</P>

<A name=“Consistency”> Unity and Variety</A>

<BR>

<P>

The basic rule is that of unity and Variety.

</P> </BODY> </HTML>

Output

Linking to a specific point in another document <HTML> <HEAD><TITLE>Main document</TITLE> </HEAD><BODY><A HREF = "c:\Doc1.htm#Internet">Internet</A><BR> <BR><A HREF = "c:\Doc1.htm#HTML">Introduction to

HTML</A><BR> <BR><A HREF = "c:\Doc1.htm#Consistency">Unity and

Variety</A></BODY> </HTML>

Output

Using e-mail<HTML> <BODY>

<A HREF = "c:\Doc1.htm#Internet">Internet</A>

<BR> <BR>

<A HREF = "c:\Doc1.htm#HTML">Introduction to HTML</A>

<BR> <BR>

<A HREF = "c:\Doc1.htm#Consistency">Unity and Variety</A>

<BR> <BR> <BR>

Continue..<ADDRESS>

<A HREF="mailto:[email protected]">Send your queries to John Greene</A>

</ADDRESS>

</BODY>

</HTML>

Output

Continue..

Adding color to links You can add some color to the world of

the links. LINK - - the default color is blue. Stay with it

because users associate blue with links on a page. A different color may confuse the user.

ALINK - - stands for active link. When the user clicks the link you can change the color.

VLINK - - stands for visited link. The default color is purple, but the choice is yours.

Continue..<HTML>

<BODY LINK = blue ALINK = HOTPINK>

<H1><CENTER><FONT SIZE = 3 COLOR = HOTPINK>CREATING LINKS</FONT></CENTER></H1>

<BR> <BR>

<P>

This is document 2. This page is displayed when you click the hyperlink in Document 1

Continue..<BR> <BR>

<A HREF= "c:\Doc1.htm">Back Home</A>

<BR> <BR>

<A HREF= "..\Doc3.htm">Next page</A>

</BODY>

</HTML>

Output

Frames and Tables

Session Objectives Include Table and Frame components in Web Pages Work with Shared Borders Use FrontPage Components like:

Hover Buttons Hit Counters Table of Contents Banner Ads Search Form Component

Tables

Information on the page is grouped into tables.

Table Tags Table Tag

<TABLE>…..</TABLE> Attributes

Align Border Cell Padding Cell spacing

Syntax<TABLE ALIGN=”…”

BORDER=”...” CELL PADDING=”..” CELL SPACING =“..”

WIDTH=”..” >

………………..

</TABLE>

TR Tag <TR>…..</TR>

Attributes BGColor

Syntax

<TABLE><TR BGColor=”… “>

…….</TR>

</TABLE>

Table Tags TD Tag

<TD> ……</TD>

Attributes

Align

Colspan

Rowspan

Syntax<TABLE><TR>

<TD ALIGN=”…” COLSPAN=”…” ROWSPAN=”..”</TD>

</TR></TABLE>

Creating Tables

Example - Creating a simple table with two rows and two columns using the table tags

}

}

<HTML><TABLE BORDER=5> <TD ROWSPAN=2> CRICKET TEAMS </TD> <TD> INDIA</TD> <TD> SOUTH AFRICA</TD> <TR> <TD> NEW ZEALAND</TD> <TD> SRILANKA</TD> </TR></TABLE></HTML>

ROW SPAN - EXAMPLE

Table Captions and Headers

Caption Tag <CAPTION>…</

CAPTION> ALIGN Attribute

TH Tag <TH>……</TH>

Table Captions and Headers

Table Caption

Headers

Example - creating a table with captions and headers

}

}

Creating Tables

Example - the html code given below creates a table with 3 Rows and 6 Columns and 4 headers

Headers

Columns

Inserting Images

The IMG tag<IMG SRC="C:\windows\clouds.gif">

<IMG ALIGN=position SRC="PICTURE.GIF">

where position is either TOP, BOTTOM, or MIDDLE.

<BODY BACKGROUND="c:\windows\clouds.gif">

Continue.. Scrolling <BODY BACKGROUND="c:\windows\clouds.gif"

BGPROPERTIES=FIXED>

Hyperimages<A HREF="c:\Doc1.htm">

<IMG SRC="C:\Clouds.gif" border = 0 ALT="Link to Document 1">

</A>

Image maps Types of Image Maps

Server-side maps Interpreted by a server-based program. When the user

clicks the image map, the browser sends the pixel coordinates to a program on the server. This program interprets the coordinates and performs the required action.

Client-side maps can be stored in HTML files and inserted in an HTML

document along with other HTML elements

Creating Client-side Image maps

Adding Sound

<BGSOUND SRC="path\sound filename"> <BGSOUND src="batman.mid">

The BGSOUND element is not supported by Netscape Navigator

MIDI music is, only synthesized music

Continue.. A digitized audio file contains the information

to reproduce an exact replica of the original sound file. The frequency at which the sound is sampled, determines the quality of the audio file. The higher the frequency, the better the quality of the sound.

FRAMESET Tag <FRAMESET>...</FRAMESET>

FRAMESET Attributes ROWS COLS

Syntax<HTML><HEAD><FRAMESET ROWS=.. OR COLS=..>Frames and other HTML tags</FRAMESET></HTML>

Frames

The value for ROWS/COLS

specified in:

• Pixels

• As a % of Parent Frame

• As*

}

FRAMESET Tag - Using ROWS attribute

Row / Cols attribute value expressed in terms of percentage

<HTML><HEAD><FRAMESET ROWS=30%,30%,40%>

</FRAMESET></HTML>

Row / Cols attribute value expressed in terms of pixels

<HTML><HEAD><FRAMESET COLS=200,400”>

</FRAMESET></HTML>

FRAMESET Tag - Using COLS attribute

Row / Cols attribute value expressed in terms of As*

<HTML><HEAD><FRAMESET ROWS=100, 40%, *>

</FRAMESET></HTML>

FRAMESET Tag - Using ROWS attribute

FRAME Tag

<FRAME>…...</FRAME> Frame tag Attributes

SRC NAME SCROLLING MARGIN WIDTH MARGIN HEIGHT

Syntax

<FRAMESET ROWS/COLS=….. , ….><FRAME SRC = ” Value”

NAME =”Value” SCROLLING=”Value” MARGIN WIDTH=”Value” MARGIN HEIGHT=”Value”>

</FRAME></FRAMESET>

FRAME Tag

Example -illustrating the use of SRC attribute of the frame tag to display two html documents in two separate frames

Frameset COLS attribute in terms of percentage

Frame TagExample illustrating the use of SRC, NAME, SCROLLING attributes of the FRAME tag display two html documents in two separate frames

<HTML> <HEAD> <TITLE>Frames Document</TITLE></HEAD>

<FRAMESET COLS=30%,70%> <FRAME SRC="A3.htm” NAME="First Horizontal Frame” Scrolling="Yes"> <FRAME SRC="A4.htm" NAME="Second Horizontal Frame"> </FRAMESET> </HTML>

Nested Frames

<FRAMESET ROWS=… , …> <FRAME SRC=" ….”> <FRAMESET COLS= .. , ..>

<FRAME SRC="…" > <FRAME SRC="…”>

</FRAMESET> </FRAMESET>

Example illustrating the use of Nested Frames

Nested Frames

Output- illustrates that the frameset tag defines two vertical frames with 30% and 70% as the size of the window. The second frameset tag which is nested splits the second frame horizontally with 30% and 70% of the size of the window. The source of the first frame is A1.htm and the vertical source of the other two horizontal frames are A2.htm and A3.htm

Nested Frameset

Linked Frames

The frames can also be integrated to display a page from a web site. To the link the page we will have use the Anchor HREF tag.

Example

To link a frame to the home page of Indiatimes.com

1) Create a file SHOW.HTM

<HTML><BODY BGCOLOR=GREEN>

<P>Frame A</P><A HREF=http://www.indiatimes.com >

Indiatimes Home Page </A></BODY></HTML>

http://www.indiatimes.com/

http://www.netscape.com/

Linked Frames (Contd…)

2) Create a file call.htm with Frameset and Frame tags with the code to display the SHOW.HTM document

Linked Frames (Contd…)

Clicking the hyperlink indiatimes.com in the Frame A will display the Indiatimes.com Home Page

TARGET Attribute

The linked page is automatically loaded into the frame from where the link was clicked. To load the page onto a different frame the TARGET attribute is used.

Syntax <A HREF=”……..”

Target="Name of the target Frame Window">

TARGET Attribute Example

<BODY BGCOLOR=green><P>Frame A</P><A HREF=http://www.netscape.com

TARGET="Second Horizontal Frame">Netscape Home Page

</A></BODY>

<HTML> <HEAD> <TITLE>Frames Document</TITLE></HEAD><FRAMESET COLS=30%,70%> <FRAME SRC="VIEW.HTM" > <FRAMESET ROWS=30%,70%> <FRAME SRC="A5.htm” NAME=“First Horizontal Frame"> <FRAME SRC="A1.htm” NAME=“Second Horizontal Frame “> </FRAMESET> </FRAMESET> </HTML>

View.htm

Call.htm

TARGET Attribute Example

Output -Clicking the hyperlink netscape.com in the Frame A will display the Netscape.com Home Page in the frame ‘Second Horizontal Frame”

Tags Description<TABLE>…</TABLE> Marks the beginning and end of the table<TABLE ALIGN=..> Align the text in the left, right or center<TABLE BORDER=..> Specifies the width of the border around

the cells<TABLE CELL PADDING=..> Specifies the space between the content

and inside edge of a cell<TABLE CELL SPACING=..> Specifies the space between the cells in the

table<TABLE WIDTH=..> Specify the width of the table<TR>…</TR> Specifies the table row<TR BGColor=…> Specifies the background color of the row<TD>…</TD> Specifies the table column<TD ALIGN=…> Horizontal alignment of the text within the

cell<TD COLSPAN=…> Width of the cell in terms of number of

columns<TD ROWSPAN=…> Height of the cell in terms of number of

rowss

<TD ROWSPAN=…> Height of the cell in terms of number ofrows

<CAPTION >..</CAPTION> Specify the title of the table<CAPTION ALIGN> Specifies the location of the caption with

respect to the table<TH> … </TH> The tags used to specify the heading of a

column<FRAMESET> ..</FRAMESET>

Marks the beginning and the end of theframe

<FRAMESET ROWS> Specify the number of horizontal windows<FRAMESET COLS> Specify the number of vertical windows<FRAME>…</FRAME> To define the frame container<FRAME SRC> Specify the name of the document<FRAME NAME> Name of the frame window<FRAME SCROLLING> Specify the if the window should have

scrollbars<FRAME MARGIN WIDTH> Specify the left and right margins in the

frame

<FRAME MARGIN HEIGHT> Specify the top and bottom margins<FRAME TARGET> Specify the target window on which the

document is to be displayed.

HTML Tags

HTML. The World Wide Web Protocols Addresses HTML.

Documents

Transcript of HTML. The World Wide Web Protocols Addresses HTML.