1. Lecture 3 Creating a Web Page with HTML

2. Objectives §Hypertext Document in WWW p1.4-1.5 §The HTML language p.1.8-1.10 l Definition l Web browsers and HTML l Versions of HTML l Tools for creating HTML documents l HTML syntax l Examples of HTML tags l Basic tags

3. Objectives (con’t) §Creating: p.1.11-1.34 Headings Paragraphs Lists Character tags Special characters Horizontal lines Graphic images §Exercises

4. Hypertext Document in WWW A hypertext document is an electronic file that contains elements that a user can select, usually by clicking a mouse, to open another document. Liner VS. hypertext document

5. Hypertext Markup Language (HTML) §Definition: Language used to create and format Web pages, using a set of special codes, called tags §HTML doesn’t describe how text looks §HTML uses a code that describes the function the text has

6. Web browser & HTML §A Web browser interprets the codes to determine a document’s appearance §Different browsers might display a document differently

7. An Example: A HTML file displayed by two browsers [ref.] [ref.]

8. Why different browsers display a web document differently ? §Portability l different computer platforms l different types of fonts supported e.g. Arial, Gothic l different I/O devices: chunky teletypes high-end workstations non visual media such are speech and Braille §Advantage: frees web page authors worrying about compatibility on different computers and operating systems

9. Why different browsers display a web document differently ? (con’t) §Speed l exact specification on how to display each character dramatically increase file size the time to transfer

10. Versions of HTML §HTML has a grammar or set of rules called syntax §The specifications or standards have been developed by a consortium of web authors, software companies and interested users (World Wide Web Consortium W3C) §Extensions are supported by some browsers to add new possibilities to HTML

11. Versions of HTML (con’t) §5 versions of HTML [ref.][ref.] l HTML 0.0 l HTML 1.0 l HTML 2.0 l HTML 3.2 l HTML 4.01

12. HTML 4.01 Adds support for style sheets, new features to tables and forms...

13. Tools for Creating HTML Documents §HTML documents: text files §Tools: l Text editor e.g. MS note pad l HTML convertor e.g. MS Word l HTML editor l Other design tools: MS FrontPage, Macromedia Dreamweaver

14. HTML syntax §2 elements: l Document content Parts that the user sees l Tags HTML codes that indicate the document content

15. HTML syntax (con’t) Document Content §e.g. Mary Taylor §A tag contains l brackets ( ) that enclose the tag name l properties (optional) additional information that defines the tag’s appearance §Document content: parts the user sees

16. HTML syntax: Two-side tags §Two-sided tags l require both opening and closing tags e.g. Mary Taylor opening tag: tells the browser to turn on the feature and apply it to the document content that follows closing tag: turns off the feature

17. HTML syntax: One-sided tags §require only the opening tag e.g., Graduated May, 1996. M.A. International Grade Point Average: 3.5 overall, 3.9 in major

18. HTML syntax characteristics §Tags are NOT case sensitive l H1=h1 §HTML ignores extra blank space, blank lines or tabs

19. HTML syntax characteristics (con’t) The following HTML statements are the same: To be or not to be. That is the question. To be or not to be. That is the question.

20. Examples of HTML tags

21. Examples of HTML tags (con’t)

22. Basic Tags (example) Displayed at the title line : surround information about the Web page : surround the part that appears in the browser

23. Example Result: Basic Tags

24. Creating Headings §6 levels § Heading text where y is a heading numbered 1- 6

25. Example: Headings

26. Example: Creating headings

27. Example Result: Headings in the browser

28. Creating a paragraph §Syntax: l text

29. Example: paragraph text (no tag)

30. Example Result: Text Not separated into paragraphs

31. Example: tag for paragraphs Satellite Technician (Front Range Media Inc. 1993-1994): Monitored satellite uplink/downlink procedures to assure quality video transmissions. Aided technicians with transmission problem. Associated in the assembly and maintenance of uplink facility. Technical Assistant(Mountain View Bank 1992-1993):Managed data cessing system. Handled user requests anf\d discussed programming option Managed delivery service Salesperson(Computer Visions 1991): Sales and customer support in computers and electronics. Managed commercial accounts in Mountain View and Crabtree locations.

32. Example result: paragraphs with tag

33. Creating lists: Ordered list §List in numeric order Example: Graduated May, 1996. M.A. International Telecommunications Grade Point Average: 3.5 overall, 3.9 in major Dean’s List: September 1994-May 1996 Member, Phi Alpha Omega Honor Society Result: 1.Graduated May, 1996. M.A. International Telecommunications 2.Grade Point Average: 3.5 overall, 3.9 in major 3.Dean’s List: September 1994-May 1996 4.Member, Phi Alpha Omega Honor Society

34. Creating list: Unordered list §List in which list items have no particular order. Example: Graduated May, 1996. M.A. International Telecommunications Grade Point Average: 3.5 overall, 3.9 in major Dean’s List: September 1994-May 1996 Member, Phi Alpha Omega Honor Society Result:  Graduated May, 1996. M.A. International Telecommunications  Grade Point Average: 3.5 overall, 3.9 in major  Dean’s List: September 1994-May 1996  Member, Phi Alpha Omega Honor Society

35. Character tags §Definitions: §Character tag: A tag that is applied to an individual character §Logical tag: Indicates how you want to use text, not necessarily how want it displayed §Physical tag: Indicates exactly how characters are to be formatted

36. Common Logical tags §It indicates how you want it displayed.

37. Example: Logical tags

38. Common Physical tags

39. Example: Physical Character tags

40. Example: Applying character tags

41. Example result: Applying character tags

42. Special characters

43. Example: Special characters 11 Kemper Ave. &#183 Lake View, CO 80517 &#183 (303 555-1012 Result:

44. Horizontal lines §

45. Example: Horizontal line §After the end of Mary’s address line, press Enter §type §Result:

46. Inserting a graphic §Two types l Inline image l External image

47. Inline image §appears directly on the Web page §loaded when the page is loaded §2 types supported by all browsers: l GIF (Graphical Interchange Format) l JPEG (Joint Photographic Experts Group) §Syntax: e.g.

48. External image §Not displayed with the Web page §Browser must have a file viewer §e.g. Shockwave