Comp 150-001, TTh, 11:00-2:00, DH-339, Class 8

HTML

Click here for the old NCSA Beginner's Guide to HTML. Basic page anatomy:

    <html>
    <head>
    ...
    </head>      <!-- close tag -->
    <body>
    ...
    </body>
    </html>

Body tags, such as
Normalized:
Browsers will accept all sorts of variations, many of which are officially allowed in html. But they are not allowed in xml or xhtml, and generally it's best to get it right from the beginning.

Note that when browsers accept nonconforming html, they implicitly insert missing tags. For example, what does
    <p><b>paragraph1<p>paragraph</b>two
get transformed into? Perhaps
    <p><b>paragraph1</b></p><p><b>paragraph</b>two
So it's not "just" a matter of inserting tags.

Play with: <title>
    <b>foo</b>

Logical v Physical styles
Logical: <DFN>, <em>, <cite>, <code>, <kbd>, <samp>, <strong>, <var>
Physical: <b>, <i>, <tt>
Generally it is much better to use logical styles! (why?)
    Normally, <dfn>, <em>, <cite>, <var> display in italics, <code>, <kbd>, <samp> display in fixed-width, and <strong> displays in bold.

    <P align="center">
    <p align="right">
    <font color="red">Hello!</font>

    <hr>
    <hr width=66%>

    MSWord and html: look at an example

    <!-- comment -->

    <body bgcolor = "#FFFFFF" text="#000000">
    "#F5f5cc"
    more colors

There is also <sub>, <sup> and <font>

    TEXT, LINK, VLINK, ALINK


Basics:
<html>
<head>
<title>
<body>
<h1>...<h6>
<b>, <i>, <u>, <strong>, <em>, <tt>, <small>, <big>
<pre>
<p>
<p align="center">
<font color="red" size=-2>
<hr width=nn% align=  size=>


<a> tags
    HREF
    NAME
    TARGET

The URL supplied in a link can be "absolute", beginning "http://", or else relative to the current url. For example, if index.html is your current file, you can refer to <a href="foo.html"> if foo.html is another file in the same directory.

Links to targets:

    <h3><a name="css">CSS basics</a></h2>
    ...
    <a href="#css">see the CSS section above</a>

<IMG src=  Alighn=  Alt=

Ordered lists <OL> and unnumbered lists <ul>

&lt; &gt; &le; &amp; &Egrave; &egrave; &ouml; &ntilde;   The semicolon is part of it! And these are case-sensitive!

Images

<img src="filename" align="top|center|bottom|left|right " height=100 width=35>

Lists

    <ul>
       <li>...</li>
       <li>...</li>
    </ul>
Also <ol>,

Tables:

<table border=5><caption>here it is</caption>
<TR>
<TD> (also <TH>)

Attributes: align, valign, colspan, rowspan, nowrap, ...

Demo table: the one in my comp 150 lab 6, also my comp 170 lab, tabledemo1.

Here's an example from Decker & Hirshfield using colspan and rowspan. Note that figuring out what row or column something is in is not trivial! tabledemo2.

Divisions

The <div> tag is used to create named divisions, eg
    <div id="mymenu">
    ...
    </div>

FRAMES: gotta have them.

Use my home page as demo:
<html>
<head>
<title>Peter Lars Dordal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset cols="240,*" frameborder="NO" border="0" framespacing="0">
    <frame src="menu.html" name="menu">
    <frame src="home.html" name="content">
</frameset>

<noframes>
<body bgcolor="#FFFFFF" text="#000000">
<p>Sorry, your browser does not support frames, so cannot display this website.<br>
</body>
</noframes>
</html>

CSS

Stands for Content Scrambling System, the standard encryption on movie DVDs. It can be undone using the program deCSS, which 2600.com is banned from linking to.

Oh, for web sites it stands for Cascading Style Sheets. Basic idea: demo at www.w3.org/StyleSheets/Core/preview. You get to make some global style changes that affect your entire site's look-and-feel.

Start with Traditional. Here's the CSS for Steely: www.w3.org/StyleSheets/Core/parser.css?family=8&amp;doc=XML. Note that we can actually view this.

We can override basic tags (p, a, table, body, ...), and also provide project-specific tags.

CSS can be
The latter is Not Particularly Helpful, in terms of providing a uniform way of making style changes, but it does allow access to certain formatting features that otherwise might not be there.
  
Note a:link, a:visited, a:active, a:hover, ...

head-section CSS example: www.w3.org/Style/Examples/011/firstcss.
Note in step1 the class="navbar" already in place, and also the <address> tag. Files for this example are step1, step6, and the css file itself. Demo: do the steps (by cut-and-paste from step6 to step1), and then add
      a:hover {
    color: red }
to the ul.navbar li class, probably after a:visited.

Another source of examples is http://www.csstutorial.net/css_tutorial_part1.php. In this example, two-column format is again achieved using CSS, but this time using <div> tags.