1. Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Introduction to Computers CS1100.01 Dr. Zhizhang Shen Chapter 4: Talking in HTML: A Hypertext Markup Language Primer

2. 1-2 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-2 What about it? Computers used to be a computing machine, i.e., it computes data. They are now mostly used as a communication machine to facilitate the exchange of information by doing lots of computing. The most common way is via WEB, as directed with a program written in HTML

3. 1-3 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-3 Program with HTML Tags describe how a web page should look like. Formatting with Tags: –Words or abbreviations enclosed in angle brackets –Come in pairs (beginning and end): –Tags are not case-sensitive, but the actual text between the tags is. For example, – The Alto Computer

4. 1-4 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-4 Tags for Bold, Italic, and underline Bold: Italic: Underline: –Tag pair surrounds the text to be formatted You can apply more than one kind of formatting at a time Veni, Vidi, Vici! produces: Veni, Vidi, Vici! –Tags can be in any order, but have to be nested in pairs Some tags do not surround anything, so they don't have an ending form. Closing angle bracket is replaced by /> – inserts a horizontal rule (line) – inserts a line break

5. 1-5 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-5 From beginning to the end Begins with and ends with Preliminary material goes here, including … Main content of the page goes here

6. 1-6 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-6 Structuring documents Markup language describes how a document's parts fit together Headings: –Choice of eight levels of heading tags to produce headings, subheadings, etc. –Headings display material in large font on a new line Pope Cardinal Archbishop produces: Pope Cardinal Archbishop

7. 1-7 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-7

8. 1-8 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-8 HTML format vs. display format HTML source tells the browser how to produce the formatted web pages based on the meaning of the tags. But HTML is usually written in a structured (indented) form to make it easier for the readers, programmers, team members, to understand Pope Cardinal Archbishop

9. 1-9 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-9 White Space White space are inserted for readability –Spaces –Tabs –New lines Browser turns any sequence of white space characters into a single space before processing HTML –Exception: Preformatted information between and tags is displayed as it appears

10. 1-10 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-10

11. 1-11 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-11

12. 1-12 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-12 More interesting symbols What if our web page needs to show a math relationship like 0 r The browser would interpret as a paragraph tag, and would not display it To show angle brackets, use escape symbol — ampersand (&) — then an abbreviation, then a semicolon (;) < displays as < > displays as > & displays as &

13. 1-13 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-13 Special Characters << >> && (non-breaking space) &mdash– (em dash) Full list at http://www.w3.org/TR/REC-html40/sgml/entities.html

14. 1-14 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-14 Accent marks in HTML Letters with accent marks use the escape symbol Ampersand, then letter, then the name of the accent mark, then semicolon &eactue; displays as é ñ displays as ñ Full list at http://www.w3.org/TR/REC-html40/sgml/entities.html

15. 1-15 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-15

16. 1-16 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-16 Attributes in HTML For justification, we need to specify left, right, or center Attributes appear inside the angle brackets of start tag, after tag word, with equal sign, value in double quotes. Do not use “fancy/smart quotes!!!” (default justification is left) Horizontal rule attributes: width and size (thickness) can be specified or left to default

17. 1-17 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-17 Hook them together with links There are two sides of a hyperlink: 1.Anchor text (the text in the current document that is highlighted) 2.Hyperlink reference (the address of a Web page / target of the link) Begin with <a followed by a space Give the link reference using href="filename" Close the start anchor tag with > Text to be displayed for this link End anchor tag with Anchor Text Seen

18. 1-18 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-18 Get real… Absolute pathnames: Reference pages at other web sites using complete URLs http://server/directory_path/filename FIT

19. 1-19 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 3-19 How to structure all these pages? We organize them into folders. Directory, or folder, is a named collection of files, other directories, or both Directory Hierarchy: Directories can contain other directories, which can contain other directories, etc. –Down, or lower in the hierarchy, means moving into subdirectories –Up, or higher in the hierarchy, means into enclosing (parent) directories

20. 1-20 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 3-20 File Structure (cont'd) Part of the directory hierarchy is shown in the pathnames of URL's. http://www.nasm.si.edu/galleries/ga1100/pioneer.html Page is given by pathname: /galleries/ga1100/pioneer.html Each time we pass a slash (/), we move into a subdirectory or into the file (lower in the hierarchy)

21. 1-21 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 3-21

22. 1-22 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 3-22 Organizing the Directory When a URL ends in a slash, the browser looks for a file called index.html in that directory –http://www.widget.com/ and http://www.widget.com/index.html are the samehttp://www.widget.com/ http://www.widget.com/index.html If the browser does not find an index.html file, the browser automatically tries to display a directory listing (index) of the files there Why are hierarchies important? –People use them to organize their thinking and work –Directories are free; there is no reason not to use them

23. 1-23 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-23 How to include pictures Image Tag Format: –src short for source –Absolute and relative pathname rules apply Pictures can be used as links using anchor tag

24. 1-24 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-24 Including pictures GIF and JPEG Images –GIF: Graphic Interchange Format 8 bits (256 colors or levels of gray) –JPEG: Joint Photographic Experts Group 24 bits (millions of colors – full color; levels of compression) –Tell browser which format image is in using filename extension (.gif,.jpg or.jpeg)

25. 1-25 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-25 Where should I put them? By default, images are inserted in the page at the point where the tag is specified in the HTML, and the text lines up with the bottom of the image Align attribute can line up image with top of line of text, middle, or bottom Align left, center, or right attribute puts the image on the side of the browser window — text flows around it To put image on separate line, enclose within paragraph tags Can specify how large the image should be displayed (in pixels) with height and width attributes

26. 1-26 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-26 Red, yellow or blue? Color is used for both background and text bgcolor attribute of body tag gives solid background color –Use hexadecimal color numbers (0-9 A-F) (magenta) –Or use predefined color terms color attribute can be used with body text, link, or font tags text

27. 1-27 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-27

28. 1-28 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-28

29. 1-29 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-29

30. 1-30 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-30

31. 1-31 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-31

32. 1-32 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-32

33. 1-33 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-33 Handling lists Unnumbered (bulleted) list: – and tags begin and end the list – and tags begin and end the items within the list Ordered (numbered) list: – and tags begin and end the list –Uses the same tags Sublists: Insert lists within lists (between tags) Definitional list: – and tags begin and end the list – and surround the terms to be defined – and surround the definitions (indented)

34. 1-34 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-34 How about tables? Tables begin and end with and tags Rows are enclosed in table row tags, and Cells of each row are surrounded by table data tags, and Create a caption centered at the top of the table with and tags Column headings are created as first row of table by using and tags instead of table data tags Check out the examples, starting at page 110.

35. 1-35 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-35 Controlling text with tables Tables can control arrangement of information on a page e.g., a series of links listed across the top of the page could be placed in a one-row table to keep them together –If the window is too small to display all the links, table keeps them in a row and a scroll bar is added –If the tags are not in a table, the links will wrap to the next line instead –Let’s check out an example

36. 1-36 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-36

37. 1-37 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-37

38. 1-38 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-38

39. 1-39 Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley 4-39 Homework Multiple choices: all of them Complete Exercises 5, 6, 7, and 8. Finish Exercise 3 in the labnotes, then send in the link. Try to do as an impressive work as you could.