CSCI 220: HTML Authoring & WWW Programming

Basic HTML Formatting

A note about editors

There are a number of fine programs available to help you write html documents. We will allow (in fact encourage) you to use an editor if it will help you. However, use of such editors is not an alternative to using the tags. We will concentrate on the code that can be created with any text editor in any environment. If you learn the tags this way, you will be prepared to deal with any editor available. My personal preference is a straight text editor with a macro language, but again, the editor doesn't really matter as much as the problem - solving ideas. For now, stick to something you know, like pico.

Terminology

  1. Tags = An HTML "command"
    Three components:
    1. Left angle bracket: <
    2. The command itself: br
    3. Right angle bracket: >

    Example:<br>

  2. Containers = pair of tags (opening & closing) which contain an item or items subject to the command
    Three componenets:
    1. Opening tag: <h1>
    2. Contained items: blah blah blah
    3. Closing tag: </h1>
    Putting these together, we get: <h1>blah blah blah</h1>

  3. HTML commands are not case sensitive, <BR> and <br> mean the same thing.

The Bare Essentials

The "Bare-bones" HTML document:
  1. <html></html> = Denotes the entire html file
  2. <head></head> = The "header" of the document
    Example: JavaScript functions are defined here
    See also pp. 53-58 of the book
  3. <title></title> = The title displayed in the title bar of the browser
    Also defines what your page will be called if someone bookmarks it
  4. <body></body> = the body of your document (e.g. your main HTML file)

Thus, our "bare-bones" HTML document might look something like this:

<html>
<head>
<title>

</title>
</head>
<body>

</body>
</html>

Stylistic Note: Keep the opening and closing tags on separate lines to improve readability.

You might want to create a "template" document containing just these tags as a starting point for creating any new web document.

Line Breaks

Commands telling the browser to start the subsequent text on a new line. Just hitting Return/Enter won’t do it (unless you use the <pre></pre> tags, but more on that later), you need to specifically tell the browser "I want to go to a new line". They are single tag commands, not containers. Thus they apply until a subsequent command (such as another break) supersedes them.

  1. Line breaks:
    1. <br> => Standard (takes you to the next line)
    2. <p> => Paragraph (breaks two lines)

  2. <hr> => Horizontal rule = Inserts a horizontal line across the screen

    Several optional attributes which you can set:

    1. size = x
    2. width = x
    3. align = x
    4. noshade

    Examples: <hr size = 5 align = left noshade>

Fonts

There’s a difference between the font preferences which you set in your browser and the <font></font> HTML tags.

<font></font> allows you to set two attributes:

  1. Size => Lets you adjust the size of the font
    Two kinds:
    1. Absolute = range of values between 1 - 7 (default is 3)
      <font size = 5></font>
    2. Relative = makes the new font larger or smaller relative to the base font
      Increment with + (larger) or - (smaller)
      <font size = -2></font> (Makes new font size 1)

  2. Color => Lets you set the color of the text being displayed (default is black)
    Must use hex codes: a string of six hexadecimal digits (0 - 9 & a - f) preceded by #

    Example:<font color = #ffffff></font>

    Less-frequently used coding system of three numbers between 0 & 255:
    255, 255, 255 = white
    0, 0, 0 = black

Headings

Boldfaced text which acts as a heading for a section of a document.

Syntax:
<hx></hx> where x is a value between 1 and 6 (1 creates largest heading & 6 smallest)
Alignment (left,right, center) can also be specified
<h3 align = center></h3>

Highlighting

HTML supports three types of text highlighting (besides headings):
  1. Bold
    Physical: <b></b>
    Logical: <strong></strong>
  2. Italic
    Physical: <i></i>
    Logical: <em></em>
  3. Underline => <u></u>

Logical styles "configure themselves" to user’s browser settings: (i.e. <strong> does not necessarily have to be bold if the user doesn’t want it to be). See p.70 of the text for a list of other logical styles.

Justification

Center => <center></center>

Backgrounds

Background colors & images give pages "personality" & variety.

Set in the <body> tag:

  1. Background Color: <body bgcolor = #xxxxxx>
    As with font colors, background colors are set with hexadecimal or 0-255 codes
    Example: <body bgcolor = #ffffff> => all white background
  2. Background Image: <body background = image_url>
    Example: <body background = "./images/background.gif">

    Two main ways to obtain background images for your pages:

    1. Download them
    2. "Grab" the image with your browser (actually, for background images, this only works on MS Internet Explorer)
    3. Provide a hypertext link to an image (not recommended) - it’s slow & unreliable.

Lists

HTML provides several means of creating lists to suit your particular needs:
  1. Ordered (outline format)
    You can create an outline just as you would in a word processor, with capital & lowercase Roman Numerals, capital & lowercase letters & decimal digits.

    Basic syntax:
    <ol type = x> (where x is one of the five list types)
    <li>
    </ol>

    Ordered list types that can be declared are as follows:

    1. type = A
    2. type = a
    3. type = I
    4. type = i
    5. type = 1

    If you want to start at some place other than the first value (e.g. 4), use the additional start = x syntax:
    <ol type = 1 start = 4>

    You can "nest" list types to create a list that looks like:

    1. Topic 1
      1. Sub-topic 1
      2. Sub-topic 2
        1. Item 1
    2. Topic 2

  2. Unordered (bullet points)
    Probably the most common type of list that you will see on web pages. The syntax is straightforward & they offer a simple way of highlighting a sequence of individual items.

    <ul> => unordered list opening tag
    <li> => list item
    </ul> => closing tag

    You can also specify any of the following bullet types:

    1. Filled Circles
      • <ul type = disc>
    2. Filled Squares
      • <ul type = square>
    3. Unfilled Squares
      • <ul type = circle>

  3. Definition (allows you to set a title & then indent the definition)
    Again the syntax is pretty straightforward:
    <dl> => definition list opening tag
    <dt> => the definition title
    <dd> => the definition itself ("definition data")
    </dl> => definition list closing tag

  4. Menu =>
  5. Directory =>

Special Commands

  1. <pre></pre> => Preformatted text
    Allows you to display text "as-is"
  2. <blockquote></blockquote>
    Lets you create an indented paragraph
  3. Need to use special characters for HTML reserved-characters
    &ltp&rt will display <p>

Nesting Commands

A good example is the "bare-bones" HTML document itself. The head, title and body tags are said to be "nested" within the html tags.

Allows us to perform multiple commands upon an item or series of items in an HTML document. It is generally a good idea to indent each subsequent container to enhance readability. List tags inherently possess some "automatic formatting" qualities which can cause conflicts (& pretty bizarre results) if used improperly. When nesting lists within lists, try too localize the list definitions as much as possible. If you are going to insert a bulleted list somewhere in an ordered list, define the bulleted list at it’s location in the document.

Lab Assignment

Create a resume for yourself using html markups.
Use the following guidelines:
Most importan of all,

Have FUN!!

More Information


© 1996, Ted D. Biggs, Dept. of Computer and Information Science,
Indiana University, Purdue University, Indianapolis
email: tbiggs@klingon.iupucs.iupui.edu