Chapter 6 Marking Up With (X)HTML: A Hypertext Markup Language Primer HTML is HyperText Markup Language XHTML is EXtensible Hypertext Markup Language Notation (encoding) for specifying Web page content and formatting Know the meaning of and use hypertext terms Use HTML tags to structure a document Use HTML tag attributes Use HTML tags to link to other files Explain the differences between absolute and relative pathnames Use Cascading Style Sheets to style a Web page Use HTML to encode lists and tables
Web Pages Web pages are created, stored, and sent in encoded form A browser converts them to what we see on the screen Hypertext Markup Language (HTML) is the main language used to define how a Web page should look Features like background color, font, and layout are specified in HTML
Marking Up with (X)HTML Tags describe the parts of a web page and how it should look Formatting with Tags: Words or abbreviations enclosed in angle brackets < > Typically come in pairs (beginning and end): <title> </title> HTML Tags not case-sensitive, XHTML tags are The actual text between tags displays used case Remember: View-->Source or Page Source
HTML ELEMENTS <title> is an example of a start or open tag </title> is an example of an end or close tag The first “word” or token in between the brackets is usually called an element. Elements define the tag – that is they indicate the basic purpose of the tag. Elements can be followed by attributes. Attributes specify various details or properties of the tag – they change the effect or display of the tag and its contents. Note that attributes go in the start or open tags, not the close tags!
Basic (X)HTML Web Page File Four Required Structural tags and comments: <html xmlns=“http://www.w3.org/1999/xhtml” > <head> <!--preliminary & other material goes here, including the --> <title>Page Title Goes Here</title> </head> <body> <!-- main visible content of the page goes here --> </body> </html> Note: comment tags. So a 5th required tag. Note all closely
Gather Your Tools For making Web pages you need 2 tools: Web browser (like IE, Safari, or FireFox) Simple text editor (like TextPad or NotePad) We will write (X)HTML as plain ASCII text (not in Word or other word-processor!) Make a file with the basic (X)HTML Web page source shown previously. Test it! Save this text in a file named something like “SkeletonPage.html” This basic page is a template, or a model: you can use it to start future web pages. Macintosh: TextEdit or TextWrangler Windows option: Notepad ++ You must use a text editor to write HTML Text editors do not include this extra information, browsers like their files! Browsers want Web pages written in ASCII characters only Think of ASCII as the normal keyboard characters with “nothing strange” Text editors figure out what language you are writing in and color code your HTML to make it easier to read Book prefers FireFox, Iona standard on IE – test with both! Firefox is a free open source browser Open source means that the program code is publicly available, and any programmer can contribute improvements to it Firefox is the browser referenced throughout this book It is available at www.mozilla.com/en-US/firefox/all.html
Growing Good XHTML How to get your (X)HTML source files written correctly (good syntax) and well (good style)? The slow-n-steady construction strategy: Start with a good, working page (like the template we saved), add tags and content in small amounts, then save and test (check in a browser) early and often. Compose-and-Check. Error? Check recent changes. Use Editor and Browser: Save, Check, Repeat. Use <!– Comments --> liberally! Online Validation Service (currently optional)
Tags for Bold and Italic Bold: <b> </b> Italic: <i> </i> Tag pair surrounds the text to be formatted You can apply more than one kind of formatting at a time <b><i>Veni, Vidi, Vici!</i></b> produces: Veni, Vidi, Vici! Tags can be in any order, but have to be nested correctly Some tags do not surround anything. In HTML they may work without a separate closing tag. XHTML self-closes. <hr> inserts horizontal line Use XHTML version: <hr /> <br> inserts a line break Use XHTML version: <br />
Singleton Tags A few tags are not paired They do not have a matching ending tag For those tags, the closing angle bracket > of the singleton tag is replaced by /> Examples: <hr /> produces a horizontal line <br /> “breaks” the text to the next line Many more tags: book, labs, lookup online. www.w3schools.com/tags/default.asp
Structuring Documents Markup language describes how a document's parts fit together Headings (look and meaning): Choice of six levels of heading tags to produce headings, subheadings, etc. (A hierarchy!) Headings display material in a large font on a new line. (X) HTML like the following: <h1>Pope</h1><h2>Cardinal</h2><h3>Archbishop</h3> produces: (A hierarchy!) Pope Cardinal Archbishop
(X)HTML Code vs. Display Format (X)HTML text was run together on one line, but displayed formatted on separate lines (X)HTML source tells the browser how to produce the formatted page based on the meaning of the tags, not on how the source code looks But (X)HTML should still be written in a structured (indented) way to make it easier for people to read, understand, and edit. Use spacing and indenting. <h1>Pope</h1> <h2>Cardinal</h2> <h3>Archbishop</h3>
White Space Space that has been inserted for readability Tabs New lines ([Return], [Enter] key, etc.) Browser turns any sequence of white space characters into a single space before processing the (X)HTML source Exception: Preformatted information between <pre> and </pre> tags is displayed as it appears in the source
Brackets in (X)HTML: Escape Symbol What if our web page needed to show a math relationship like 0 < p > r The browser would interpret < p > as a paragraph tag, and would not display it To show angle brackets, use escape symbol — ampersand (&) — then an abbreviation (or numeric code), then a semicolon (;) < displays as <
Special Characters < < > > & & < < > > & & (non-breaking space) &mdash – (em dash) and many more. Full list at: http://www.w3.org/TR/REC-html40/sgml/entities.html
Accent Marks in (X)HTML Letters with accent marks use the escape symbol as well. Case matters! Ampersand, then letter, then the name of the accent mark (or code), then a semicolon: é displays as é ñ displays as ñ Full list at http://www.w3.org/TR/REC-html40/sgml/entities.html
Example Accent Marks in (X)HTML
Putting it All Together With just these few tags we can make an interesting Web page (see following slide) Title is shown in the browser title bar Russell’s paradox is in bold face In the (X)HTML source, paragraphs are indented more than <h2> headers for readability Horizontal line between the two paragraphs spans the width of the browser window An acute accent appears in Magritte’s first name French phrase is in italics, as is the word picture
Attributes in (X)HTML Properties such as text alignment require more information than so far given. For example: Justification, can specify left, right, or center Attributes appear inside the angle brackets of a start tag (after the element word), followed by an equal sign, and a value in double quotes: <p align="center"> (default justification is left) Another example: Horizontal rule attributes width and size (thickness) can be specified or left to default: <hr width="50%" size="3" />
Marking Links With Anchor Tags There are two sides of a hyperlink: Anchor text (the text in the current document that is highlighted. What you click.) Hyperlink reference (the location, address or URL of the other Web page) Begin with <a followed by a space Give the link reference using href="filename" Close the start anchor tag with > Then type the text to be displayed for this link End the hyperlink with </a> tag
Anchor Tags: Path to files Absolute pathnames: Reference pages at other web sites using complete URLs: http://server/directory_path/filename Relative pathnames: Reference pages stored in same directory (then only the name of the file), or in the local directory structure. Relative pathnames are more flexible: we can move web files around as a group Relative pathnames can specify a path deeper or higher in the directory structure: In these anchor tags, the hyperlink reference is an entire URL The Web browser needs to know how/where to find the page A URL is made from: a protocol specification, http:// a domain or IP address, www.bioz.com a path to the file, /bios/sci/russell.html
File directories and relative pathnames If we are at file bios/sci/russell.html then the source file for Magritte can be designated with the relative path : ../../art/magritte.html ./subdir/filename ../subdir/filename . Current directory . . Parent directory More Details During Lab! Going “Deeper” in a Folder When the file containing the anchor and the referenced file are in the same folder—we just give the file name <a href="russellbio.html">Russell</a> When the referenced file is “deeper” in the directory, we simply give the path from the current folder down to the file <a href="biographies/russellbio.html">Russell</a> Going “Higher” in a Hierarchy But, what about moving higher up in the hierarchy This is a UNIX operating system technique Navigating up to another folder: add ../ to the beginning of the href attribute <a href /biographies/russellbio.htm ”> Russell </a> Each ../ moves up one level higher in the hierarchy
Including Pictures With Image Tags Image Tag Format: <img src="filename" alt= "description" /> src stands for source. -- alt is alternate text Absolute and relative pathname rules apply alt value specifies an alternate text description GIF and JPEG Images GIF: Graphic Interchange Format JPEG: Joint Photographic Experts Group PNG: Portable Network Graphics Tell browser which format image is in using filename extension (.gif, .jpg or .jpeg, .png) The alt tag was introduced to assist persons who are visually impaired Screen readers don’t know what the image is, but they can read the description of the alt tag HTML requires alt tags When an image is not available or loads slow, browsers display the alt information GIF (pronounced is jif ) (Graphics Interchange Format) best suited for cartoons and simple drawings JPEG (pronounced JAY·peg) Joint Photographic Experts Group appropriate for high-resolution photographs and complex artwork PNG are newer forms of GIF and can also be used on Web pages PNG stands for Portable Network Graphics format To tell the browser which format the image is in, the file name should include one of these extensions: .gif, .png, .jpg, or .jpeg Pronunciation The creators of the format pronounced GIF with a soft "G" /ˈdʒɪf/ as in "gin". An alternative pronunciation uses a hard "G" /ˈɡɪf/ as in "graphics", reflecting the expanded acronym. Both pronunciations are given as correct by the Oxford English Dictionary[2] and the American Heritage Dictionary.[3] According to Steve Wilhite, the creator of the GIF format, the original pronunciation deliberately echoes the American peanut butter brand, Jif, and the employees of CompuServe would often say "Choosy developers choose GIF", spoofing this brand's television commercials.[4] This pronunciation was also identified by CompuServe in their documentation of a graphics display program called CompuShow.[4]
“Clickable” Pictures Pictures can be used as links by combining the <img> tag with an anchor tag <a href="fullsize.jpg"> <img src="thumbnail.jpg" /> </a> Here, the <img …> picture becomes the clickable “hot spot” for the anchor tag (instead of text) The browser will display the picture “thumbnail.jpg” then allow the user to click on the picture as a link to the file “fullsize.jpg”
Attributes for Image Tags The displayed image size can be adjusted (despite the actual size of the raw image) <img src=“puffer.jpg” width=“200” height=“200” /> Will make an image 200 x 200 pixels, even if the file “puffer.jpg” is 2400 x 2400 pixels (for example) If you leave out one dimension attribute the browser will display the missing one to match the same proportions as the original image. (Algebra! Or test and check.) However, the Browser will do as told, even to the point of distorting images. Some more examples: <img src=“puffer.jpg” width=“200” height=“100” /> <img src=“puffer.jpg” width=“100” height=“200” /> Attributes An additional specification included inside a tag The abbreviations href, src, and alt are attributes Attributes have the form name="value“ the name, such as href, is the attribute the text in quotes, such as, biographies/russellbio.html, is the value Values are always enclosed in quotes
Browser will do as told, even to the point of distorting images (original is 2400x2400 square):
Positioning an Image in the Document Text is laid out from left to right, top to bottom By default, images are inserted at the point in the text layout where the <img> tag is specified in the HTML, and the text lines up with the bottom of the image In (X)HTML to make text flow around an image, use the style attribute in the <img> tag, with the value “float:left” or “float:right” (Compare with WP) HTML : 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, and text flows around it. To put image on separate line, enclose it within <p> … </p> paragraph tags
Style Attribute Perhaps the most useful attribute, controls long list of properties about the look of a Web page Place style= inside the tag for content to modify <span> … </span> tags can be used to apply styles where no other tag is appropriate. Style is one attribute, its value (in quotes) can have many properties in a list (semi-colon separated) <body style=“background-color: black; color: green”> sets page back color, and text color for the entire body <h1 style=“text-align: center; color: yellow; font-family: arial”> affects the h1 header only, sets font, color, justification The value of the style has a standard form: style = "property_name : specification”
Handling Color (HTML) Color is used for both background and text NOTE: Purple is a tricky choice for background color - visited links may then be hidden! bgcolor attribute (deprecated) of body tag gives solid background color. Use style. Use hexadecimal color numbers or Use predefined color terms color attribute can be used with body text, link, or font tags. Better – use style attribute. http://en.wikipedia.org/wiki/HTML_colors
Applying Style to Improve our Page Add links with (local) path names to local bios Special background and text colors Color change on the “This sentence is false” text New color styling for the headings The horizontal line has been shortened to 75 percent of the browser window width, centered Added an image, put it to the right side, and flowed text around it to the left Advanced style: Use Cascading Style Sheets To be covered if there is time. See book, online, CS Web courses and Minor Page 181 for example. Cascading Style Sheets, a general system for styling Web documents.
Handling Lists Unnumbered (bulleted) list: Ordered (numbered) list: <ul> and </ul> tags begin and end the list <li> and </li> tags begin and end the items within the list Ordered (numbered) list: <ol> and </ol> tags begin and end the list Uses the same <li> tag Sublists: Insert lists within lists (between <li> </li> tags) Definitional list: <dl> and </dl> tags begin and end the list <dt> and </dt> surround the terms to be defined <dd> and </dd> surround the definitions
Handling Tables Table begins and ends with <table> and </table> tags. Has a border attribute. A “2-dimensional” list Rows are enclosed in table row tags, <tr> and </tr> Cells of each row are surrounded by table data tags, <td> and </td>. The browser aligns cells to form columns. Create a caption centered at the top of the table with <caption> and </caption> tags Column headings are created as first row of table by using <th> and </th> tags instead of table data tags
How Is Information Organized? Hierarchical classification. Intuitive (?) Example: Family Tree Information is grouped into a small number of categories, each of which is easily described (top-level classification) Information in each category is divided into subcategories (second-level classifications), then third-level classifications, and so on Eventually the classifications become small enough for you to look through the whole category to find the information you need
Design of Hierarchies General rules for design and terminology of hierarchies: Root is usually at the top "Going up in the hierarchy" means classifications becomes more inclusive or general "Going down in the hierarchy" means the classifications become more specific The greater-than (>) symbol is a common way to show going down through levels of classification. Straight lines used in diagrams. Example Path: Home > Music > Browse Artists > C > Cave Singers
Levels in a Hierarchy A one-level hierarchy has only one level of "branching"—no subdirectories To count levels, remember There is always a root There are always "leaves"— the items themselves The root and leaves usually do not count as levels Groupings may overlap (one item can appear in more than one category), or be partitioned (every category appears only once) Number of levels may differ by category, even in the same hierarchical tree
How Are Web Sites Organized? Homepage is the top-level classification for the whole Web site (index.html) Can a web site have multiple home pages? Classifications are the roots of hierarchies that organize large volumes of similar types of information Topic clusters are sets of related links (for example: navigation links) Single links connect to very specialized pages