1 / 13

HTML Elements and Structuring Documents

Learn about the HTML elements and how to structure documents using headings, white space, links, inline images, color, lists, and tables.

cspinney
Télécharger la présentation

HTML Elements and Structuring Documents

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. chapter4 An HTML v4.1 Primer xhtml is “v5.0”

  2. HTML Elements  Table 4.1 • html elements • container elements • <h2> text </h2> -- open tag, close tag • empty elements • <hr> --no close tag • Elements for Bold and Italic (deprecated) • <b> .. </b> • <i> .. </i>

  3. web page structure <html> <head><title>I’d rather be ..</title> </head> <body> <h1> I’d rather be ...</h1> <h2> … skiing!!! </h2> <hr> <img src="ski.jpg"> </body> </html>

  4. STRUCTURING DOCUMENTS • Headings in HTML • h1, h2, …, h6 • HTML Format vs. Display Format: White Space • Attributes in HTML • <p align=“center”> … </p> • <body text=“navy” bgcolor=“ivory”> …

  5. white space in html <h3>White Space in HTML</h3> Any sequence of white-space characters is rendered as a single space. <br> For example, here is one space: and here are five spaces: How are they rendered by your browser? Solutions: <pre> .. </pre> &nbsp;

  6. MARKING LINKS WITH ANCHOR TAGS • Two Sides of a Link • href + anchor text • Absolute Pathnames (URLs) • <a href=http://www.uoregon.edu> UO </a> • Relative Pathnames • <a href=“contact.html”> Contact Info </a>

  7. Inline Images <img src=“pipe.jpg” width=“250” height=“150” alt=“pipe.jpg” > (eg) ski.html .gif, .jpg, .png image formats

  8. Inline Images: Alignment <img src=“jwocky.jpg” width=“250” height=“150” alt=“jabberwocky.jpg” > Attribute: align Values for wrapping text around images: left, right (but no center) align=“left”  image aligns to the left, text flows around the right side of the image align=“right”  image aligns to the right, text flows around the left side of the image

  9. Inline Images: Alignment • Jabberwocky w/image & text wrap • Jabberwocky in Wikipedia • Jabberwocky in Klingon • Other Translations align attribute is deprecated in html 4.01  use CSS float attribute

  10. HANDLING COLOR Colors by Name (140 ttl) or Number • CSS Standard Color names (16) • extended color names (124) • introduced by Netscape & supported by all modern browsers • hex triples: chartreuse = #7FFF00 beige #F5F5DC

  11. HANDLING LISTS W3Schools: HTML Lists

  12. HANDLING TABLES W3Schools: Tables

  13. Next:XHTML ?=? HTML v5.0 W3Schools: XHTML

More Related