1. Week 1 8/10/2015iSTTS, 2008

2. Agenda Introduction to HTML Creating and publishing a Web page Validating a document Main HTML elements Block-level HTML elements Text-Level HTML elements Creating Hypertext links Adding images to documents Table Frames 8/10/2015iSTTS, 2008

3. The World Wide Web Definitions The World Wide Web The set of computers on the Internet that support HTTP Not a separate network HTTP The HyperText Transfer Protocol The protocol used by a WWW client (e.g. Netscape Internet Explorer) to request documents from a WWW server (i.e. the program running at Web sites like amazon.com or yahoo.com) HTML 8/10/2015iSTTS, 2008

4. HTML File HTML stands for Hyper Text Markup Language An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension 8/10/2015iSTTS, 2008

5. HTML Document Template My First Page My First Heading Welcome to My Page 8/10/2015iSTTS, 2008 Goes on browser’s title bar Main heading. Often used as title. HTML Comment Replace with body of WWW page

6. HTML Elements HTML documents are text files made up of HTML elements. HTML elements are defined using HTML tags. 8/10/2015iSTTS, 2008

7. HTML Elements ( cont’d) HTML Element This text is bold The HTML element starts with a start tag: The HTML element ends with an end tag: 8/10/2015iSTTS, 2008

8. Tag Attributes Tags can have attributes. Attributes provide additional information to an HTML element. 8/10/2015iSTTS, 2008

9. Basic HTML Tags The most important tags in HTML are tags that define headings, paragraphs and line breaks. 8/10/2015iSTTS, 2008

10. Basic HTML Tags TagDescription Defines an HTML document Defines the document's body to Defines header 1 to header 6 Defines a paragraph Inserts a single line break Defines a horizontal rule Defines a comment 8/10/2015iSTTS, 2008

11. HTML Text Formatting TagDescription Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text Defines superscripted text 8/10/2015 iSTTS, 2008

12. HTML Character Entities Some characters like the < character, have a special meaning in HTML, and therefore cannot be used in the text. To display a less than sign (<) in HTML, we have to use a character entity. 8/10/2015iSTTS, 2008

13. HTML Character Entities ResultDescription Entity Name Entity Number non-breaking space   <less than<< >greater than>> &ampersand&& "quotation mark"" 8/10/2015 iSTTS, 2008

14. HTML Lists Unordered Lists Coffee Milk Ordered Lists Coffee Milk 8/10/2015iSTTS, 2008

15. HTML Links This text is a link to a page on this Web site. 8/10/2015iSTTS, 2008

16. HTML Image An image from another folder: <img src="/images/netscape.gif" width="33" height="32"> 8/10/2015iSTTS, 2008

17. Tips for writing tags Use lowercase tags and attributes World Wide Web Consortium (W3C) recommends lowercase tags Always quote attribute values 8/10/2015iSTTS, 2008

18. Simple Table (1 row and 1 column) Table 1 Table 1

19. Simple table 2 (2 row and 3 column) 11 12 13 21 22 23 111213 212223

20. CellPadding and CellSpacing 1 1 1 2 1 3 2 1 2 2 2 3 cellpadding cellspacing

21. Cell Alignment 21 22 23

22. Colspan and Rowspan 1234 5678

23. Colspan 1234 5678 Colspan = 2

24. Rowspan 15 234 678 Rowspan = 2

25. Complex Table use nested table ?

26. Frame Xanth Series by Piers Anthony A Spell for Chameleon Source of Magic Castle Roogna Centaur Aisle Ogre! Source=atas.html Name=topFrame Source=kiri.html Name=leftFrame Source=01.html Name=mainFrame

27. Tag HTML Frame

28. Tag HTML Kiri.html A Spell for Chameleon Source of Magic Castle Roogna Centaur Aisle Ogre! A Spell for Chameleon