1. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU Introduction to HTML Seree Chinodom seree@buu.ac.th

2. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU What is HTML Hyper Text Markup Language. World Wide Web Consortium (W3C). Hyper Text: A collection of text and images that can be accessed in a non-linear way. Markup Language: A way of presenting the text, images and other supported media.

3. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU Physical Markup vs Logical Markup Physical Markup: Emphasis on the presentation. Logical Markup: More emphasis on contents of the document. Later mapped to physical markup. HTML supports both. Logical Markup is recommended.

4. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU Features of HTML Not designed to be WYSIWYG (What You See Is What You Get), rather it is WYSIWYM (What You See Is What You Mean). Easily portable across platforms. Is defined in SGML with general semantics. Adapted for wide range of applications and information presentation.

5. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU Why HTML Describes basic semantics of Web based documents. Web Page Composers may not have complete features. Debugging and modification requires knowledge of HTML. For generating Dynamic Documents.

6. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU Contents of HTML Documents Markup elements –Markup tags –Element Attributes Text / information

7. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU Markup Elements Markup tags enclosed in angle brackets. –Start and end tags. Eg. This is a heading –Standalone tags / Empty tags eg.,

8. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU Structure of HTML document

9. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU An Example - I Introduction to HTML Introduction to HTML Hi folks, welcome to NCST

10. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU An Example - II Today we will learn how to write a HTML document. HTML consists of markup elements used to present the text. These elements includes - Markup Tags Element Attributes

11. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU HEAD Element Contains information about HTML document. Tags inside Head element can appear in any order. Examples of header tags are - META, TITLE, BASE etc.

12. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU TITLE Element It is an optional element. Serves as the label of browser window. Should be as concise as possible. Is used by the search engines.

13. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU BODY element Contains the body proper. Attributes –BACKGROUND = color –BGCOLOR = color –TEXT = color –LINK, ALINK, VLINK = color Color may be specified using hex digits or using pre-defined words.

14. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU (A) Anchor element Specified by start tag and end tag Marks the in between text or image as hyperlink. Attributes –HREF: specifies URL of the file to be fetched. –NAME: marks the text, so it can be the target of hyperlink. –TARGET: specifies the target frame to load file.

15. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU (A) Anchor element contd... Hot Text is rendered in different manner. URL can be partial or full. Partial in case - –Speceified relative to directory of current file. –Use of BASE tag. Attributes of BASE - –HREF: Relative URL for following hyperlinks. –TARGET: Default target window for following hyperlinks.

16. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU IMG element Includes the image file inline with the text Images can float on the page allowing the text to flow around the image. Separate connection to the server is established for each image.

17. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU IMG element contd... Attributes of IMG –SRC –ALT –ALIGN –WIDTH –HEIGHT –BORDER

18. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU P & BR elements marks the beginning of a paragraph and implies a paragraph break. marks end of paragraph and is optional. forces a line break. CLEAR attribute is used to move below floating objects in document.

19. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU Heading elements Six level of headings from H1 to H6. No forced hierarchy in headings. Avoid skipping a heading level. ALIGN attribute specifies the alignment of the heading. –Alignment may be left | right | center | justify. Eg. This is level 1 heading.

20. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU HR element To draw a horizontal line across the screen Terminates the preceding paragraph Commonly used to divide sections within a document Attribute - –ALIGN –SIZE –WIDTH

21. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU Character Highlighting elements Physical Highlighting Elements - –B: Boldface –I: Italic –U: Underline Logical highlighting elements –EM –STRONG –CODE –CITE

22. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU BASEFONT element To specify the default font size. SIZE ranges from 1 to 7 with default as 3. Should appear prior to any displayed text in the BODY of the document. Eg.

23. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU FONT element To change the font size or color of enclosed text. Attributes of FONT are - –SIZE: It can be explicit or can be preceded by ‘+’ or ‘-’ to indicate a change in the size relative to that specified in BASEFONT. –COLOR –FACE

24. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU List elements 5 types of lists - –UL: Unordered List –OL: Ordered List –DL: Definition List –DIR: Directory List –Menu: Menu List A list item is indicated using tag except in definition list. In definition list list item is indicated using and tags.

25. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU Tables TABLE element contains tabular data. Tables are defined as a collection of rows, defined by the TR element. Can contain CAPTION and TR elements. Attributes - –ALIGN –BORDER –CELLSPACING –WIDTH

26. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU Table elements TR element contains a collection of cells, defined by TH and TD elements. TH elements are used for headings. TD elements specify actual table data. Attributes of TR - –ALIGN –VALIGN –BORDER –BACKGROUND / BGCOLOR

27. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU Table elements contd... TD and TH are used to define cells in a row. Cells can occupy more than one row and/or coloumn. Attributes of TD and TH - –ALIGN –VALIGN –BACKGROUND / BGCOLOR –ROWSPAN –COLSPAN –WIDTH

28. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU Example of Table An Example of Tables This is an example of Table Student Marks

29. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU Example of Table contd... S.No. Student ID Marks (out of 100) 01 1330006 84 …

30. COPYRIGHT @ 1999, COMPUTER SCIENCE, BUU Reference Material Webmaster in a Nutshell http://angsila.compsci.buu.ac.th/~seree/lecture/315241