Ch. 4: HTML
  1. HTML = HyperText Markup Language.
  2. Plain text is simply formatted. Example: Source Page
  3. Basic markup
    1. Most tags have start and end versions enclosing text.
      <tag> . . . </tag>.
    2. Tags are case-insensitive.
    3. Spaces and line breaks are ignored; indenting does not matter.
    4. The contents of the file should be enclosed in <html> tags.
    5. Within the <html> pair should be <head> and <body> pairs.
    6. The <title> is displayed on the browser stripe.
    7. <p>, <i>, <b>, <tt>.
    8. The browser has great freedom formatting HTML
    9. Example: Source Page
  4. Headings: <h1>, <h2>, <h3>.
  5. Entities.
    1. Starts with &.
    2. Stuff that's markup otherwise: Say &lt; for <
    3. Stuff not on the keyboard.
      1. &ouml; for ö.
      2. &divide; for ÷.
      3. &lambda; for λ.
      4. Complete List.
    4. Example: Source Page
  6. Attributes
    1. Specified inside the opening tag.
    2. name=“value”
    3. Modify the behavior of the tag.
    4. Example: Source Page
  7. Links
    1. This is the hyper in hypertext: Links take you somewhere else when clicked.
    2. <a href="URL">displayed text</a>
    3. Displays the text; clicking takes you to the URL
    4. Example: Source Page
  8. Style attribute.
    1. The style attribute applies a list of settings that control how the item appears.
      Style can contain one setting or a list separated by semicolon.
    2. Alternative to some of the tags we've seen.
    3. Example: Source Page
    4. Span and div tags.
  9. CSS
    1. The style attribute is one use of Cascading Style Sheets (CSS). Style can be specified in a number of ways.
    2. A style section in the header applies to the whole document.
      1. Can apply a style to a tag of a given type.
      2. Can assign classes to tags, and styles to classes.
    3. A page can link to a style sheet document.
      1. Allows common styles for all the pages at a site.
      2. Reduces number of bytes the browser must download.
    4. The closest specification wins.
    5. Example: Source Page, Style Document,
  10. Images.
    1. <img src="URL">
    2. Image stored in a separate file.
    3. Formats: GIF, JPEG, others.
    4. Inserted as a particularly large character.
    5. No </img>.
    6. Example: Source Page
  11. URLs for links or images have several forms.
    1. Absolute URL:
      Just goes there.
    2. Others depend on the URL of the page you're coming from. Suppose we're coming from
      1. Relative URLs (file names) are in the same directory. Replace just the last part with the URL.
        1. other.html goes to
        2. pics/dia.png goes to
      2. Starting with a slash just keep the server name. /a/whole/different/folder.html goes to
      3. The .. goes to the parent folder.
        1. ../upper.jpg goes to Notice that the folder name place was removed.
        2. ../../meese/moose.html goes to
        3. Using .. is the middle is allowed, but generally useless. Do you see why?
  12. Colors.
    1. Sixteen standard HTML color names:
      black silver white gray
      red fuchsia maroon purple
      blue navy aqua teal
      lime green yellow olive
    2. Plus 130 CSS standard color names for a total of 147 color names available on all browsers.
    3. Numeric colors
      1. Specify intensities for each red, blue and green, 0-255.
      2. Can specify the actual number, the percentage, or hexadecimal.
        # = rgb(, , ) = rgb(%, %, %)
      3. Hex represents each range as 00 to FF, without separators. More on this in Chapter 7.
      4. The hex form is most commonly used; older browers may not work with the others.
    4. Commonly used in style settings: color:, background-color:.
    5. Example: Source Page
  13. Lists.
    1. <ul> for un-ordered (bullet) lists.
    2. <ol> for ordered (numbered) lists.
    3. List members denoted with <li>.
    4. Example: Source Page
  14. Tables
    1. Enclose in <table>.
    2. Tables a sequence of <tr>.
    3. Rows a sequence of <td>.
    4. Various attributes.
    5. Example: Source Page