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
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)
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.
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 e-mail 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.
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
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.
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 http://www.indiatimes.com 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=http://www.netscape.com 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”