home -- outline -- lectures -- assignments -- discussion -- tips -- links --



Intro to the Web: Wednesday, Jan 14

Block Elements - <P>
  • Encapsulates paragraph
  • Can omit first <P> ,and can always omit </P>
  • Attributes: ALIGN={LEFT|CENTER|RIGHT}
  • Default: <P ALIGN=LEFT>
  • Browser starts new line and inserts blank line.

Headings
  • <H1> ... <H6> -- 1 largest, 6 smallest
  • Contain only text
  • Attributes: ALIGN={LEFT|CENTER|RIGHT}
  • H3 same size as normal text
  • e.g. <H1> title, <H2> section titles, or <H2> title, <H3> section titles, etc.
Small Headings
  • <H5>, <H6> can be used for "boilerplate".
    • .g. <H6>Copyright Pink Poodles Inc.</H6>e

Content-Based Style Tags
  • <CITE> -- bibliographic citation (italic)
  • <CODE> -- computer code (monospaced)
  • <EM> -- emphasis (italic)
  • <STRONG> -- more emphasis (bold)

Physical Style Tags
  • <B> -- bold
  • <I> -- italic
  • <TT> -- monospaced
  • <U> -- underlined
  • <SUB>, <SUP> -- subscript, superscript

Physical Style Tags, cont.
  • <BIG>, <SMALL> -- increase, decrease size of text (by 20%); can be nested

Global Font Control
  • Set the size of the base (default) font
    • <BASEFONT SIZE = 1|2|3|4|5|6|7>
      • Size 3 is the default.
      • Absolute font size is controlled by the user/browser.
      • Nonstandard but accepted: After a </BASEFONT> the base font size is reset to 3.

Local Font Control
  • Change the current font size/color
    • <FONT [SIZE = [+,-] 1|2|3|4|5|6|7][COLOR=...]> ... </FONT>
      • Relative size changes are based off the current base font size.
    • <BIG> ... </BIG>
    • <SMALL> ... </SMALL>
      • Increments/Decrements the current font size by one.

Example: Font Size
    <BASEFONT SIZE=3>Small
    <BASEFONT SIZE=5>Bigger
    <FONT SIZE=+1>Bigger!
    <BIG>Bigggerrr!</BIG>
    </FONT>
    <FONT SIZE=+4>No Bigger!</FONT>

Line Breaks
  • Break
    • <BR [CLEAR=left|right|all]>
      • Creates newline.
      • Clear attribute starts text after images.
  • No Break
    • <NOBR> ... </NOBR>
      • Forces enclosed text onto a single line, possibly outside of the Web browser's window.

Layout
  • Pre-formatted Element
    • <PRE [ALIGN=left|center|right]> ... </PRE>
      • Maintains integrity of rows and columns.
      • Uses monospaced font.
      • Style tags allowed, so must use character entities for '<', '>', '&'.
  • Centered Text
    • <CENTER> ... </CENTER>
      • Centers enclosed text

Example: Preformatted Text 
    <PRE>
Tall and tan and young and lovely
    The girl from Ipanima goes walking
           
           And when she passes
    Each man she passes
goes "Ahhhhhhh"...

    When she walks it's like a samba 
        that sways so cool and 
               swings so gently
           that when she passes
        each man she passes
        
  goes "Ahhhhh ".. 
         
</PRE>

Formatting Elements
  • Blockquote Element
    • <BLOCKQUOTE> ... </BLOCKQUOTE>
      • Usually indents text.
      • Nested style tags allowed.
  • Address Element
    • <ADDRESS> ... </ADDRESS>
      • Usually identifies the Web page author's address.
      • Usually in italics.

Special Characters
  • How do we output characters used by HTML, such as '<', '>', '&'?
  • Use a character entity:
    • &lt; &gt; &amp;
    • &#60; &#62; ...
  • Character entities also used for extended character set (©, ®, ç, ...)
    • &copy; &reg; &ccedil; ...

Example: Source
    <BASEFONT SIZE=7>
    To display &lt;, use &amp;lt;<BR>
    To display &copy;, use &amp;copy;<BR>
    To display &eacute;, use &amp;eacute;<BR>
    <P>
    <ADDRESS>
    kris@cs.uchicago.edu; &lt;Kristian Hammond&gt;
    </ADDRESS>