1. HTML

2. The World Wide Web Protocols Addresses HTML

3. 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.

4. HTML syntax: Welcome to HTML My first HTML document

5. Displaying the page

6. Browsers and Editors Browsers Netscape's Navigator Microsoft's Internet Explorer Editors Microsoft FrontPage Notepad

7. 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

8. Continue.. Welcome to HTML My first HTML document

9. Changing attributes

10. 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

11. 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)

12. Headings Introduction to HTML

13. Using headings

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

15. output

16. 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

17. Output

18. Horizontal Rule Attributes align Width Size Noshade

19. Continue.. 

20. 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

21. Continue.. Click here to register for a free newsletter

22. Output

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

24. Using fonts

25. Adding Color Learning HTML Welcome to HTML This is good fun

26. Output

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

28. Continue.. Welcome to HTML This is good fun

29. output

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

31. Lists Unordered lists Ordered lists Definition lists

32. Unordered lists Learning HTML Monday Tuesday Wednesday Thursday Friday

33. Customized bullets Square bullets Sphere bullets Round bullets

34. Ordered lists Learning HTML Monday Tuesday Wednesday Thursday Friday

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

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

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

38. Output

39. 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.

40. Internal and External links - - - - - - -

41. 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

42. 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

43. 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

44. Linking to other documents Using links CREATING LINKS

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

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

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

48. 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.

49. Output

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

51. Output

52. Using e-mail Internet Introduction to HTML Unity and Variety

53. Continue.. Send your queries to John Greene

54. Output

56. Continue..

57. 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.

58. Continue.. CREATING LINKS This is document 2. This page is displayed when you click the hyperlink in Document 1

59. Continue.. Back Home Next page

60. Output

61. Frames and Tables

62. 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

63. Tables Information on the page is grouped into tables.

64. 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 …….

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

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

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

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

69. Table Captions and Headers Table Caption Headers Example - creating a table with captions and headers } }

70. Creating Tables Example - the html code given below creates a table with 3 Rows and 6 Columns and 4 headers Headers Columns

71. Inserting Images The IMG tag where position is either TOP, BOTTOM, or MIDDLE.

72. Continue.. Scrolling Hyperimages

73. 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

74. Adding Sound The BGSOUND element is not supported by Netscape Navigator MIDI music is, only synthesized music

75. 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.

76. 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* }

77. FRAMESET Tag - Using ROWS attribute Row / Cols attribute value expressed in terms of percentage

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

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

80. 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”>

81. 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

82. 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">

83. Nested Frames Example illustrating the use of Nested Frames

84. 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

85. 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

86. Linked Frames (Contd…) 2 ) Create a file call.htm with Frameset and Frame tags with the code to display the SHOW.HTM document

87. Linked Frames (Contd…) Clicking the hyperlink indiatimes.com in the Frame A will display the Indiatimes.com Home Page

88. 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">

89. TARGET Attribute Example Frame A <A HREF=http://www.netscape.com TARGET="Second Horizontal Frame"> Netscape Home Page Frames Document View.htm Call.htm

90. 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”

92. HTML Tags