Home Presentations Web Skills
Projects
Text Box

HTML Advanced Workshop Help Sheet

http://pws.prserv.net/usinet.jkbaumg/presentations/html2.html
workshop by Jessica Baumgart
jkbaumg@attglobal.net
Tuesday, March 28; Monday, April 3; and Wednesday, April 5

If you are printing this page, you might want to print the page source to use as a guide to the HTML code. You can get to the page source by using your Web browser's command to view the page source.

The workshop help sheet for the first part of this workshop, HTML Introduction, is available online at: http://pws.prserv.net/usinet.jkbaumg/presentations/html1.html.

  1. Links: look like this: <a href="URLhere">linkedtext</a>
    You can link to all sorts of things:

    Helpful hints for creating links:

    Use the URL or text that makes sense to the user for links. Links that say "Go here" aren't particularly useful.
    Use the complete URL as the linking text especially if your Web page could be used as a printed document.
    When making an e-mail link, type the e-mail address as the link so that users who don't have a browser with an e-mail function can at least see the e-mail address and copy it.

  2. Lists: Three kinds of lists give maximum flexibility for layout. They automatically format the page for you with indentations and numbers or bullets for list items. Lists can be nested, too, like the lists above in the links section.
    <ol></ol>: indicates an "ordered" or numbered list. Each list item is indicated by an <li>. A closing </li> is optional. This page is a long ordered list.
    <ul></ul>: indicates an "unordered" or bulleted list. Each list item is indicated by an <li>. A closing </li> is optional. The links section above is an unordered list.
    <dl></dl>: indicates a definition list. Each list item is indicated by a <dd>. A closing </dd> is optional. The helpful hints section of the links section is a definition list. This list does not use bullets or numbers to highlight list items.

  3. Images: Image tags let you choose a file, describe the image in an alternate tag for non-graphical browser users, control placement of the graphic, and control size. Image tags look like: <img src="filenameorURL" alt="name or description of image">. Other attributes, like width="numberofpixels", height="numberofpixels", and align="center", are optional and go inside the same carrots as the image tag.
    The code for this image looks like: <img src="../images/snwmnmelt.gif" alt="melted snowman by Jessica Baumgart" align="right"> melted snowman by Jessica Baumgart

    A page with images you can use to practice is available at: http://pws.prserv.net/usinet.jkbaumg/presentations/images.html.


  4. Tables: Tables can be used for more than just tabular data. Many people use them for layout as well. The basic table format looks like this:
    Table Code Interpretation
    <table>
    <tr><td></td><td></td></tr>
    <tr><td></td><td></td></tr>
    </table>
    		 <td></td> indicates a data cell
    <tr></tr> indicates a row of the table
    Table headings can be created by using <th></th>. These tags tell the browser which rows contain heading information for your table. Some browsers make this information bold. The headers above use the <th></th>tags.

    There are additional codes for manipulating data in tables, too.


    This table shows some of these features. Notice the changes?
    There are other tables on this page. Can you spot them?

  5. Metadata: Metadata is data about the Web page, like its creator, contents, and rights management information. One of the best known sets of metadata is the Dublin Core. It has 15 elements, including Creator, Subject, Description, and Date. This page has Dublin Core metadata on it. Metadata goes between the <head></head> tags. Although few search engines use metadata today, some people look for it on the page to provide further information.

    The format for metadata varies based on the type. Dublin Core looks like this:
    <meta name="DC.Creator.PersonalName" content="Baumgart, Jessica">

    For more examples, look at the top of this page's code.

  6. Style Sheets:

    If this text looks different to you, that's because your browser is reading the commands that trigger the formatting specified in the Style Sheet. (If it doesn't look any different, try adjusting your preferences to enable or read style sheets.) Style Sheets are used to control the way content looks across different browsers. You can control many things using them, like background color or image, link and text colors, font style and size, and spacing. Style sheets can either be embedded (placed in the document between the <head></head> tags) or linked. Older browsers do not interpret style sheets. Users can turn them off in new browsers, so it is likely that a surfer will not read your style sheet at all. You should be aware of the way your page looks with and without style sheets so you can make any adjustments in the code to cover times when the style sheet won't be read.

    A style sheet looks like this:
    <style>
    /* basic defaults */
    a:link { color: #990033;
    text-decoration: underline }
    a:visited { color: #1c711a;
    text-decoration: underline }
    a:active { color: #000000;
    text-decoration: underline }
    BODY {background-image: url(http://www.sit.wisc.edu/images/bg2.gif)}
    table { margin-left: 0em }
    /* left-column formatting */
    .lcol { font-family: palatino, serif;
    font-size: small;
    text-align: center;
    margin-right: .5em }
    p.lcolhead { text-align: center;
    font-family: palatino, serif;
    font-size: small }
    /* main body formatting */
    div.sub1 { margin-left: +2em }
    div.termsub1 { margin-left: +1em }
    div.sub2 { margin-left: +2em }
    /* nested subdivisions */
    div.termsub2 { margin-left: +1em }
    /* terminal pages use smaller margins */
    div.sub3 { margin-left: +2em }
    div.termsub3 { margin-left: +1em }
    .menu { font-family: helvetica, sans-serif }
    /* used mainly for headings */
    .option { font-family: helvetica, sans-serif }
    /* used mainly for text */
    p.txt { font-family: palatino, serif;
    text-indent: 1.75em }
    /* miscellaneous formatting */
    kbd { font-family: monaco, courier, monospace }
    p.intro { font-family: palatino, serif }
    .dbnote { font-style: italic; font-size: smaller }
    .dbname { text-transform: uppercase }
    </style>

    The style sheet for this page looks a bit different and is shorter.

    To "turn on" any of these styles, you must use normal HTML tags combined with a "class" designation with the codes, like this: <p class="txt">



  7. More Help:

    Dublin Core Metadata Initiative: http://purl.org/dc/

    HTML: Resources on the Web: http://www.library.wisc.edu/libraries/Memorial/htmlhelp.htm

    Library Instruction: Web Page Development Resources: http://www.library.wisc.edu/libraries/Instruction/webdev.htm

    World Wide Web Consotium's HyperText Markup Language Home Page: http://www.w3.org/MarkUp/

    World Wide Web Consortium's Cascading Style Sheets: http://www.w3.org/Style/CSS/