1 / 33

Chapter 4 Marking up with HTML

Chapter 4 Marking up with HTML. Marking up with HTML. With HTML words that will appear on the Web page are surrounded by formatting tags <title>Tiger Woods, Masters Champion</title> Tags are not case sensitive <p><b><i>Veni, Vidi, Vichi!</i></b></p> (nesting of tags)

alessa
Download Presentation

Chapter 4 Marking up with HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 4 Marking up with HTML

  2. Marking up with HTML • With HTML words that will appear on the Web page are surrounded by formatting tags • <title>Tiger Woods, Masters Champion</title> • Tags are not case sensitive • <p><b><i>Veni, Vidi, Vichi!</i></b></p> (nesting of tags) • Few tags are not paired and do not have a / ending form (<hr> horizontal line, <br> break)

  3. Marking up with HTML • An HTML Web page has the following structure: <html> <head> beginning material goes here (title) </head> <body> main content of the page </body> </html>

  4. Marking up with HTML • You write HTML using a basic text editor such as NotePad (Windows), SimpleText (Mac), BBText (UNIX), or the like

  5. Structuring Documents • Headings in HTML • HTML gives us eight levels of headings to choose from (<h1> and </h1>, <h2> and </h2>, and so on) • Higher levels have large fonts • An instruction is written as: <h1>Pope</h1> <h2>Cardinal</h2> <h3>Archbishop</h3> Would print Pope Cardinal Archbishop

  6. HTML format vs. display format HTML text was run together on one line • Displayed text was formatted on separate lines • HTML source tells the browser how to produce formatted image based on the meanings of the tags <h1>Pope</h1> <h2>Cardinal</h2> <h3>Archbishop</h3> Or <h1>Pope</h1> <h2>Cardinal</h2> <h3>Archbishop</h3>

  7. White space • Computer experts call space inserted for readability white space • We create white spaces with spaces, tabs, and new lines • HTML ignores white space • Exception: preformatted information contained within <pre> and </pre> tags • Important when formatting paragraphs (see page 102)

  8. Brackets in HTML Math relationship like: 0 < p > r We use escape symbol – the ampersand (&) &lt; displays as< &gt; displays as> &amp; displays as & <i>0 &lt; p &gt; r</i>

  9. Accent marks in HTML • Letters with accent marks also use the escape symbol • We write ampersand followed by a letter, followed by the name of the accent mark &eacute displays as é &Egrave displays as É &ouml displays as ö You can find a complete list at www.w3.org/MarkUp/html13/latin1.html

  10. Attributes in HTML • How to align or justify text in HTML (page 104) • Horizontal rule attribute • <hr> has attribute – width, specifies how wide the line should be as a percentage of the browser window’s width • Another attribute – size, says how thick the line should be • <hr width=“50%” size=1> • Size one is the minimum thickness • Web page created with HTML, page 106

  11. Two sides of a link • This example has a web page that doesn’t use hypertext at all • There are two parts to hyperlink: text in current document that is highlighted, called the anchor text, and the address of the other Web page, called the hyperlink reference • Both parts of the hyperlink are specified in the anchor tag

  12. Marking links with anchor tags We want to create a link from our Web site to this following Web site http://www.bios.com/bios/sci/russell.html Hyperlink would be displayed with Bertrand’s last name highlighted as Bertrand Russell The anchor tag would look like this: Bertrand<a href=“http://www.bios.com/bios/sci/russell.html”>Russell</a> normal text hyperlink reference anchor In hyperlink a is for anchor, hyperlink reference is using href=“filename”, anchor and end of hyperlink with tag

  13. Absolute pathnames • Magritte’s biography as a hyperlink reference and anchor <a href=“http://www.bios.com/bios/art/magritte.html’>Magritte</a> http:// www.bios.com /bios/sci/russell.html Pathname tells us that these files are two levels down in the directory hierarchy of the site Such complete URLs are called absolute pathnames

  14. Relative pathnames • Link can refer to other Web pages on the same site • These pages are stored on the same or nearby directories • Their anchor tags use relative pathnames If our own bios for Russell and Magritte were for our paradoxes.html page Our anchor tags for the Paradoxes page can use relative references: <a href=“russellbio.html”>Russell</a> And <a href=“magrittebio.html”>Magritte</a>

  15. Hierarchy of directories • Going “deeper” in a directory <a href=“biographies/russellbio.html”>Russell</a> • Going “higher” in the hierarchy my pages biographies russellbio.html magrittebio.html coolstuff paradoxes.html <a href=“../biographies/russellbio.html”>Russell</a> • To go even higher we can write <a href=“../../biographies/russellbio.html”>Russell</a>

  16. Including pictures with image tags • To display pictures we use a tag, but not an anchor tag (no need to refer to the picture, but to display picture on the page) • Image tag format <img src=“filename”> src is source and filename can be pipe.jpg <img src=“pipe.jpg”> • Images are stores in several formats • JPEG (Joint Photographic Experts Group) is best for high resolution photographs and artwork

  17. Including pictures with image tags • GIF (Graphics Interchange Format) is best for cartoons and drawings • How position an image in the document • HTML lays out text in a browser window from left to right from top to bottom • Small image placed in line just like a letter at the point where the image tag occurs • Larger image dropped in the text but the line spacing will be increased

  18. Including pictures with image tags • Align attribute in the image to line up image with top, bottom, middle by using align=“top”, or align=“middle”, or align=“bottom” • We can justify image “right” or “left” • To display image by itself, enclose image tag within paragraph tags • Example of right justification of an image with paragraph flowing around it <img src=“pipe.jpg” align=“right”>

  19. Including pictures with image tags • You can specify how large the picture should be by specifying height and width in pixels <img src=“pipe.jpg” align=“right” height=“130” width=“192”> • Browser can shrink or stretch picture to fit available space • We can use images to fill in a background by tiling <body background=“filename”>

  20. Handling color • To have one solid color for a background and text <body bgcolor=“silver”> • To give text a color <body text=“aqua” link=“olive”> <b><font color=“red”>This statement is false.</font></b>

  21. Color by number • RGB, intensity of each color is specified from 0 to 255 • (0,0,0) produces color black • (255,255,255) color is white • (255,0,0) intense red • (0,255,0) intense green • (0,0,255) intense blue

  22. Color by number • You select custom colors by giving the three RGB intensity values • You can not specify them as a whole numbers • You choose them as pairs of hex digits between 00 and FF • Hexadeximal (hex) digit is one of the symbols (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) from the base-16 or hexadecimal numbering system

  23. Color by number • 00 corresponds to 0 and FF is the same as 255 • In HTML #FF0000 intense red, #00FF00 intense green, and #0000FF intense blue # means that a hexadecimal number is following Table 4.4 on page 114 gives a translation of regular numbers into hexadecimal digit equivalents (255,142,42) carrot orange translated #FF8E2A

  24. Color by number • Numeric colors need two level of translation – first translation of the color into RGB intensities, and then translation of those values into hex digit pairs • Appendix A, Table A.1 shows a standard set of HTML colors and their hex specification • Result of creating links and adding color is on the Figure 4.2, page 114, HTML text page 115

  25. Handling lists • Types of lists: • Unnumbered lists <ul> <li>Luxo Jr.</li> <li>Toy Story</li> <li>Monsters Inc.</li> </ul> • Would give us ·Luxo Jr. · Toy Story · Monsters Inc.

  26. Types of lists • Ordered lists <ol> <li> Hydrogen, H, 1.008,1 </li> <li> Helium, He, 4.0003, 2 </li> <li> Lithium, Li, 6.941, 2 1 </li> </ol> Would look like • Hydrogen, H, 1.008, 1 • Helium, He, 4.003, 2 • Lithium, Li, 6.941, 2 1

  27. Types of lists • A list within a list <ul> <li>Pear</li> <li>Apple</li> <ul> <li>Granny apple</li> <li>Fuji</li> <ul> <li>Cherry</li> </ul> Would produce: · Pear · Apple - Granny Smith - Fuji · Cherry

  28. Types of lists • Definitional list <dl> <dt> Man </dt> <dd> <i>Homo sapiens</i>, the greatest achievement of evolution.</dd> <dt>Woman</dt> <dd> <i>Homo sapiens</i>, the greatest achievement of evolution, and clever enough not to mention it to man. </dd> </dl> • Would be formatted by browsers as Man Homo sapiens, the greatest achievement of evolution. Woman Homo sapiens, the greatest achievement of evolution, and clever enough not to mention it to man.

  29. Types of lists • Compact attribute in molecular biology <dl compact> <dt>A</dt> <dd>Adeline </dd> <dt>C</dt> <dd>Cytosine</dt> <dt>G</dt> <dd>Guanine</dd> </dl> • Would be displayed as A Adeline C Cytosine G Guanine

  30. Handling tables in HTML • Table • Tr-table rorw, td-table data • Would be defined by <table border> <tr> <td>Canada</td> <td>Ottawa</td> <td>English/French</td> </tr> <tr> <td>Iceland</td> <td>Reykjaik</td> <td>Icelandic</td> </tr> </table>

  31. Handling tables • You can give tables captions and column headings • Caption tags <caption> and </caption> • Table headings <th> and </th> • Table on page 119 • Figures 4.3 and 4.4 (page 120) show two different HTML sources, one is listing the links in sequence and the other placing links into a table. When there is enough window space the two solutions look the same.

  32. Handling tables in HTML • When there is a small amount of window space for the full sequence of links, the browser will wrap the links (page 122) • All other Web languages are the variations on the same theme: tags surround all objects and all specify properties of the page • Web authors use Web authoring tools, like Macromedia Dreamweaver, or standard text editors like Microsoft Word or Composer feature of Netscape

  33. Summary • Web pages are stored in an encoded form before browser turns them into the image we see on the screen • HTML is the most widely used form of encoding using tags for formatting • Use of absolute and relative pathnames (URLs are called absolute pathnames, relative pathnames show how to find the referenced file relative to the file in which anchor tag appears) • Two formats for images: JPG and GIF • Colors and tables in HTML • Web pages are built with Web authoring tools, programs that then automatically create the HTML when page design is complete

More Related