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: Welcome to HTML My first HTML document

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.... The HTML tag is comprised of: Element Attribute Value

Continue.. Welcome to HTML My first HTML document

Changing attributes

Structure of an HTML document The HTML section The Header section. The BODY section. Welcome to the world of HTML This is going to be real fun

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 Introduction to HTML

Using headings

Paragraphs Welcome to HTML My first HTML document This is going to be real fun Using another heading Another paragraph element

output

Continue.. Welcome to HTML My first HTML document This is going to be real fun Using another heading Another paragraph element Click here to register for a free newsletter

Output

Horizontal Rule Attributes align Width Size Noshade

Continue.. 

Breaks Welcome to HTML My first HTML document This is going to be real fun Using another heading This should surprise you Another paragraph element

Continue.. Click here to register for a free newsletter

Output

Using Fonts … Color Size Face Example Welcome to HTML My first HTML document This is going to be real fun

Using fonts

Adding Color Learning HTML Welcome to HTML This is good fun

Output

Choosing Alignment of text Value Left Center Right Justify Example Learning HTML

Continue.. Welcome to HTML This is good fun

output

Using special characters Greater than (>) > Less than (<) < Quotes " Ampersand & Space

Lists Unordered lists Ordered lists Definition lists

Unordered lists Learning HTML Monday Tuesday Wednesday Thursday Friday

Customized bullets Square bullets Sphere bullets Round bullets

Ordered lists Learning HTML Monday Tuesday Wednesday Thursday Friday

Customized Numbers Upper Roman Lower Roman Uppercase Lowercase Begin numbering with a digit other than “1” [ Default ]

Definition lists Learning HTML Sunday The first day of the week HTML HyperText Markup Language Internet A network of networks

Continue.. TCP/IP Transmission Control Protocol / Internet Protocol

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: Hypertext The syntax of HREF is A HREF = Hypertext 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 Using an identifier

Linking to other documents Using links CREATING LINKS

Continue.. This page is all about creating links to documents. Click here to view document 2

Linking to other documents Absolute pathnames C:\mydirectory\htmlexamples\Doc2.htm. Relative pathnames Next page

Linking to sections of the same document Using Links Internet Introduction to HTML Unity and Variety Internet

Continue.. The internet is a network of networks. Introduction to HTML Hyper Text Markup Language is a standard language. Unity and Variety The basic rule is that of unity and Variety.

Output

Linking to a specific point in another document Main document Internet Introduction to HTML Unity and Variety

Output

Using Internet Introduction to HTML Unity and Variety

Continue.. Send your queries to John Greene

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.. CREATING LINKS This is document 2. This page is displayed when you click the hyperlink in Document 1

Continue.. Back Home Next page

Output

Frames and Tables

Session Objectives n Include Table and Frame components in Web Pages n Work with Shared Borders n Use FrontPage Components like: u Hover Buttons u Hit Counters u Table of Contents u Banner Ads u Search Form Component

Tables Information on the page is grouped into tables.

Table Tags Table Tag ….. Attributes Align Border Cell Padding Cell spacing Syntax <TABLE ALIGN=”…” BORDER=”...” CELL PADDING=”..” CELL SPACING =“..” WIDTH=”..” > ………… …….. TR Tag ….. Attributes BGColor Syntax …….

Table Tags n TD Tag u …… n Attributes u Align u Colspan u Rowspan n Syntax <TD ALIGN=”…” COLSPAN=”…” ROWSPAN=”..”

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

CRICKET TEAMS INDIA SOUTH AFRICA NEW ZEALAND SRILANKA ROW SPAN - EXAMPLE

Table Captions and Headers Caption Tag … ALIGN Attribute TH Tag ……

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 where position is either TOP, BOTTOM, or MIDDLE.

Continue.. Scrolling Hyperimages

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 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 Attributes ROWS COLS Syntax Frames and other HTML tags Frames n 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

Row / Cols attribute value expressed in terms of pixels FRAMESET Tag - Using COLS attribute

Row / Cols attribute value expressed in terms of As* FRAMESET Tag - Using ROWS attribute

FRAME Tag …... Frame tag Attributes SRC NAME SCROLLING MARGIN WIDTH MARGIN HEIGHT Syntax <FRAME SRC = ” Value” NAME =”Value” SCROLLING=”Value” MARGIN WIDTH=”Value” MARGIN HEIGHT=”Value”>

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 Tag Example illustrating the use of SRC, NAME, SCROLLING attributes of the FRAME tag display two html documents in two separate frames Frames Document <FRAME SRC="A3.htm” NAME="First Horizontal Frame” Scrolling="Yes"> <FRAME SRC="A4.htm" NAME="Second Horizontal Frame">

Nested Frames 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 Frame A Indiatimes Home Page

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 Frame A <A HREF= TARGET="Second Horizontal Frame"> Netscape Home Page Frames Document 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”

HTML Tags