Chapter 4: Marking Up With HTML: A HttMkL PiHypertextMarkupLanguagePrimerFluency with Information TechnologyThird EditionbyLawrence SnyderLawrence SnyderCopyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-WesleyMarking Up with HTML•Tagsdescribe how a web page should lookTagsdescribe how a web page should look• Formatting with Tags:Wd bb iti l di lb kt<>–Words or abbreviations enclosedin anglebrackets<>– Come in pairs (beginning and end):•<title></title>•<title></title>– Tags are not case-sensitive, but the actual text between the tags isg1-2Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley4-2Tags for Bold, Italic, and underline• Bold: <b> </b>•Italic:<i></i>Italic:i/i• Underline: <u> </u>– 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, so they don't have an ending form. Closing angle bracket is replaced by />–<hr /> inserts a horizontalrule(line)1-3Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley4-3()– <br /> inserts a line breakAn HTML Web Page FileBegins with <html> and ends with </html><html><head>Preliminary material goes here, including<title> … </title></head></head><body>Main content of the page goes hereMain content of the page goes here</body></html>1-4Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley4-4</html>Structuring Documents• Markup language describes how a document's pggparts fit together• Headings:g– Choice of eight levels of heading tags to produce headings, subheadings, etc.–Headings display material in large font on a new line<h1>Pope</h1> <h2>Cardinal</h2> <h3>Archbishop</h3>produces:PopeCardinalArchbishop1-5Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley4-51-6Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley4-6HTML Format vs. Display Format• HTML text was run together on one line, but gdisplayed formatted on separate lines• HTML source tells the browser how to produce th f tt d i b d th i ftheformattedimagebased on the meaning ofthe tags, not on how the source instructions look•But HTML is usually written in a structured•But HTML is usually written in a structured(indented) form to make it easier for people to understand<h1>Pope</h1><h2>Cardinal</h2><h3>Archbishop</h3>1-7Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley4-7<h3>Archbishop</h3>White Space•White space that has been inserted for readabilityWhite space that has been inserted for readability– Spaces– Tabs– New lines• Browser turns any sequence of white spaceyq pcharacters into a single space before processing HTML– Exception: Preformatted information between <pre> and </pre> tags is displayed as it appears1-8Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley4-81-9Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley4-91-10Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley4-10Brackets in HTML: The Escape Symbol• What if our web page needed to show a math pgrelationship like0 < 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, then a semicolon (;)semicolon (;)< displays as <> displays as >&dil &1-11Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley4-11&displays as &Special Characters• < <• > >• &&p;• (non-breaking space)•&mdash–(em dash)&mdash(em dash)•Full list at•Full list athttp://www.w3.org/TR/REC-html40/sgml/entities.html1-12Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley4-12Accent Marks in HTML•Letters with accent marks use the escape symbolLetters with accent marks use the escape symbol• Ampersand, then letter, then the name of the accent mark then semicolonaccent mark,then semicoloné displays as éñ displays as ñ• Full list athtt // 3 /TR/RECht l40/ l/ titi ht lhttp://www.w3.org/TR/REC-html40/sgml/entities.html1-13Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley4-131-14Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley4-14Attributes in HTML• Properties such as text alignment require more informationinformation• 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!!!”quotes.Do not usefancy/smart quotes!!!<p align = "center">(default justification is left)• Horizontal rule attributes: width and size (thickness) can be specified or left to default<hr width="50%"size="3"/>1-15Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley4-15<hr width= 50% size= 3 />Marking Links With Anchor Tags• 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>Close the start anchor tag with• Text to be displayed for this link• End anchor tag with </a><a href="target_of_the_hyperlink">Anchor Text Seen</a>Anchor Text Seen1-16Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley4-16Anchor Tags (cont'd)•Absolute pathnames:Reference pages atAbsolute pathnames:Reference pages atother web sites using complete URLshtt // /di t th/filhttp://server/directory_path/filename<a href="http://www aw com/snyder/index html">FIT</a><a href="http://www.aw.com/snyder/index.html">FIT</a>1-17Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley4-17Anchor Tags (cont'd)• Relativepathnames: Referencepages stored to ppgthe same directory (give only the name of the file)Read <a href="/filename">this file</a>Read <a href=./filename >this file</a>.– Relative pathnames are more flexible — we can move web files around as a group– Relative pathnames can also specify a path deeper or higher in
View Full Document
Unlocking...