html. the world wide web protocols addresses html
TRANSCRIPT
![Page 1: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/1.jpg)
HTML
![Page 2: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/2.jpg)
The World Wide Web
Protocols
Addresses HTML
![Page 3: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/3.jpg)
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.
![Page 4: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/4.jpg)
HTML syntax:<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
<BODY>
<H3>My first HTML document</H3>
</BODY>
</HTML>
![Page 5: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/5.jpg)
Displaying the page
![Page 6: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/6.jpg)
Browsers and Editors
Browsers Netscape's Navigator Microsoft's Internet Explorer
Editors Microsoft FrontPage Notepad
![Page 7: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/7.jpg)
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
![Page 8: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/8.jpg)
Continue.. <BODY BGCOLOR = lavender>
<HTML><HEAD><TITLE>Welcome to HTML</TITLE><BODY BGCOLOR = lavender><H3>My first HTML document</H3></BODY></HTML>
![Page 9: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/9.jpg)
Changing attributes
![Page 10: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/10.jpg)
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>
![Page 11: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/11.jpg)
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)
![Page 12: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/12.jpg)
Headings<HTML>
<HEAD>
<TITLE>Introduction to HTML</TITLE>
<H1>Introduction to HTML</H1>
<H2>Introduction to HTML</H2>
<H3>Introduction to HTML</H3>
<H4>Introduction to HTML</H4>
<H5>Introduction to HTML</H5>
<H6>Introduction to HTML</H6>
</HEAD>
</HTML>
![Page 13: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/13.jpg)
Using headings
![Page 14: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/14.jpg)
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>
![Page 15: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/15.jpg)
output
![Page 16: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/16.jpg)
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>
![Page 17: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/17.jpg)
Output
![Page 18: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/18.jpg)
Horizontal Rule
<HR> Attributes
align Width Size Noshade
![Page 19: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/19.jpg)
Continue..
<HR noshade size = 5 align = center width = 50%</HR>
<HR size = 15 align = left width = 80%</HR>
![Page 20: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/20.jpg)
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
![Page 21: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/21.jpg)
Continue..<ADDRESS>
<A href="some address">Click here to register for a free newsletter</A>
</ADDRESS>
</BODY>
</HTML>
![Page 22: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/22.jpg)
Output
![Page 23: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/23.jpg)
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>
![Page 24: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/24.jpg)
Using fonts
![Page 25: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/25.jpg)
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>
![Page 26: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/26.jpg)
Output
![Page 27: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/27.jpg)
Choosing Alignment of text Value
Left Center Right Justify
Example<HTML> <HEAD>
<TITLE>Learning HTML</TITLE> </HEAD>
<BODY BGCOLOR=lavender>
![Page 28: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/28.jpg)
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>
![Page 29: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/29.jpg)
output
![Page 30: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/30.jpg)
Using special characters Greater than (>)
> Less than (<)
< Quotes
" Ampersand
& Space
![Page 31: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/31.jpg)
Lists
Unordered lists Ordered lists Definition lists
![Page 32: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/32.jpg)
Unordered lists<HTML> <HEAD><TITLE>Learning HTML</TITLE> </HEAD><BODY><UL>
<LI>Monday<LI>Tuesday<LI>Wednesday<LI>Thursday<LI>Friday
</UL></BODY></HTML>
![Page 33: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/33.jpg)
Customized bullets
<UL TYPE = SQUARE> Square bullets
<UL TYPE = DISC> Sphere bullets <UL TYPE = CIRCLE> Round bullets
![Page 34: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/34.jpg)
Ordered lists<HTML> <HEAD>
<TITLE>Learning HTML</TITLE> </HEAD>
<BODY>
<OL>
<LI>Monday
<LI>Tuesday
<LI>Wednesday
<LI>Thursday
<LI>Friday
</OL>
</BODY></HTML>
![Page 35: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/35.jpg)
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 ]
![Page 36: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/36.jpg)
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
![Page 37: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/37.jpg)
Continue..<DT>TCP/IP
<DD>Transmission Control Protocol / Internet Protocol
</DL>
</BODY>
</HTML>
![Page 38: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/38.jpg)
Output
![Page 39: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/39.jpg)
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.
![Page 40: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/40.jpg)
Internal and External links
- - - - - - -
- - - - - - -
- - - - - - -
- - - - - - -
- - - - - - -
- - - - - - -
- - - - - - -
- - - - - - -
- - - - - - -
- - - - - - -
![Page 41: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/41.jpg)
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
![Page 42: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/42.jpg)
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
![Page 43: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/43.jpg)
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
![Page 44: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/44.jpg)
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>
![Page 45: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/45.jpg)
Continue..<P>
This page is all about creating links to documents.
<A HREF = "Doc2.htm">Click here to view document 2</A>
</BODY>
</HTML>
![Page 46: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/46.jpg)
Linking to other documents Absolute pathnames
C:\mydirectory\htmlexamples\Doc2.htm. Relative pathnames
<A HREF= "..\Doc3.htm">Next page</A>
![Page 47: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/47.jpg)
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>
![Page 48: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/48.jpg)
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>
![Page 49: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/49.jpg)
Output
![Page 50: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/50.jpg)
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>
![Page 51: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/51.jpg)
Output
![Page 52: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/52.jpg)
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>
![Page 53: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/53.jpg)
Continue..<ADDRESS>
<A HREF="mailto:[email protected]">Send your queries to John Greene</A>
</ADDRESS>
</BODY>
</HTML>
![Page 54: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/54.jpg)
Output
![Page 55: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/55.jpg)
Output
![Page 56: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/56.jpg)
Continue..
![Page 57: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/57.jpg)
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.
![Page 58: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/58.jpg)
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
![Page 59: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/59.jpg)
Continue..<BR> <BR>
<A HREF= "c:\Doc1.htm">Back Home</A>
<BR> <BR>
<A HREF= "..\Doc3.htm">Next page</A>
</BODY>
</HTML>
![Page 60: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/60.jpg)
Output
![Page 61: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/61.jpg)
Frames and Tables
![Page 62: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/62.jpg)
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
![Page 63: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/63.jpg)
Tables
Information on the page is grouped into tables.
![Page 64: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/64.jpg)
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>
![Page 65: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/65.jpg)
Table Tags TD Tag
<TD> ……</TD>
Attributes
Align
Colspan
Rowspan
Syntax<TABLE><TR>
<TD ALIGN=”…” COLSPAN=”…” ROWSPAN=”..”</TD>
</TR></TABLE>
![Page 66: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/66.jpg)
Creating Tables
Example - Creating a simple table with two rows and two columns using the table tags
}
}
![Page 67: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/67.jpg)
<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
![Page 68: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/68.jpg)
Table Captions and Headers
Caption Tag <CAPTION>…</
CAPTION> ALIGN Attribute
TH Tag <TH>……</TH>
![Page 69: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/69.jpg)
Table Captions and Headers
Table Caption
Headers
Example - creating a table with captions and headers
}
}
![Page 70: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/70.jpg)
Creating Tables
Example - the html code given below creates a table with 3 Rows and 6 Columns and 4 headers
Headers
Columns
![Page 71: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/71.jpg)
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">
![Page 72: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/72.jpg)
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>
![Page 73: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/73.jpg)
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
![Page 74: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/74.jpg)
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
![Page 75: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/75.jpg)
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.
![Page 76: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/76.jpg)
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*
}
![Page 77: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/77.jpg)
FRAMESET Tag - Using ROWS attribute
Row / Cols attribute value expressed in terms of percentage
<HTML><HEAD><FRAMESET ROWS=30%,30%,40%>
</FRAMESET></HTML>
![Page 78: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/78.jpg)
Row / Cols attribute value expressed in terms of pixels
<HTML><HEAD><FRAMESET COLS=200,400”>
</FRAMESET></HTML>
FRAMESET Tag - Using COLS attribute
![Page 79: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/79.jpg)
Row / Cols attribute value expressed in terms of As*
<HTML><HEAD><FRAMESET ROWS=100, 40%, *>
</FRAMESET></HTML>
FRAMESET Tag - Using ROWS attribute
![Page 80: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/80.jpg)
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>
![Page 81: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/81.jpg)
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
![Page 82: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/82.jpg)
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>
![Page 83: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/83.jpg)
Nested Frames
<FRAMESET ROWS=… , …> <FRAME SRC=" ….”> <FRAMESET COLS= .. , ..>
<FRAME SRC="…" > <FRAME SRC="…”>
</FRAMESET> </FRAMESET>
Example illustrating the use of Nested Frames
![Page 84: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/84.jpg)
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
![Page 85: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/85.jpg)
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>
![Page 86: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/86.jpg)
Linked Frames (Contd…)
2) Create a file call.htm with Frameset and Frame tags with the code to display the SHOW.HTM document
![Page 87: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/87.jpg)
Linked Frames (Contd…)
Clicking the hyperlink indiatimes.com in the Frame A will display the Indiatimes.com Home Page
![Page 88: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/88.jpg)
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">
![Page 89: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/89.jpg)
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
![Page 90: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/90.jpg)
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”
![Page 91: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/91.jpg)
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
![Page 92: HTML. The World Wide Web Protocols Addresses HTML](https://reader038.vdocuments.site/reader038/viewer/2022110319/56649c7c5503460f9493034f/html5/thumbnails/92.jpg)
<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