Ch. 4: HTML

HTML = HyperText Markup Language.
Plain text is simply formatted. Example: Source Page
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
Headings: <h1>, <h2>, <h3>.
Entities.
1. Starts with &.
2. Stuff that's markup otherwise: Say < for <
3. Stuff not on the keyboard.
  1. ö for ö.
  2. ÷ for ÷.
  3. λ for λ.
  4. Complete List.
4. Example: Source Page
Attributes
1. Specified inside the opening tag.
2. name=“value”
3. Modify the behavior of the tag.
4. Example: Source Page
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
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.
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,
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
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?
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
Lists.
1. <ul> for un-ordered (bullet) lists.
2. <ol> for ordered (numbered) lists.
3. List members denoted with <li>.
4. Example: Source Page
Tables
1. Enclose in <table>.
2. Tables a sequence of <tr>.
3. Rows a sequence of <td>.
4. Various attributes.
5. Example: Source Page

black	silver	white	gray
red	fuchsia	maroon	purple
blue	navy	aqua	teal
lime	green	yellow	olive