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: http://www.example.com/some/place/there.html
      Just goes there.
    2. Others depend on the URL of the page you're coming from. Suppose we're coming from http://www.example.com/some/random/place/there.html
      1. Relative URLs (file names) are in the same directory. Replace just the last part with the URL.
        1. other.html goes to http://www.example.com/some/random/place/other.html
        2. pics/dia.png goes to http://www.example.com/some/random/place/pics/dia.png
      2. Starting with a slash just keep the server name. /a/whole/different/folder.html goes to http://www.example.com/a/whole/different/folder.html.
      3. The .. goes to the parent folder.
        1. ../upper.jpg goes to http://www.example.com/some/random/upper.jpg. Notice that the folder name place was removed.
        2. ../../meese/moose.html goes to http://www.example.com/some/meese/moose.html
        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