Beginning HTML and CSS.

COMM 750, Web Studies/Digital Media
Instructor: Ross Collins

I. Beginning HTML
II. Beginning CSS

I. HTML

Hyper Text Markup Language is a computer language used to create web pages. Writing HTML script is not like programming, as programmers will tell you. But it is sort of related to it, in that you need to know certain commands, and it needs to be perfect, or a page will not "render" (show up in the browser). HTML is based on plain text, called "text only" in some word processors, or "ASCII text" (American Standard Code for Information Exchange, pronounced "ask-key"). Most HTML mark-up instruction is based on "tag pairs," that is, the side brackets (<>) between which are placed instructions. The pairs usually include an opening instruction, and then a forward slash to indicate the end of the instruction, such as <HTML>, </HTML>. You can code in upper or lower case; HTML is not case-sensitive. But filenames are, so if you save a web page as coLLins.htm, it won't open if you link it as collins.htm.

You can code HTML in most any word processor, saved as "text only," but many webmasters prefer dedicated HTML editors such as BBEdit. These also often include validators that will check your code for bugs (coding errors).

HTML codes can be grouped by category:

Basic tags, such as <HTML>, </HTML>: these define your document.
Font tags: font style, bold, italic, colors, center, etc.
Image tags: image size, alignment, border, background, etc.
Link tags: links to images, other web pages, content.
List tags: to set up a variety of lists.
Table tags: to set up a web page as several tables, or nesting tables.
Form tags: to allow people to fill out forms, questionnaires.
Frame tags: to set up a web site using frames.
Style sheet tags: to indicate how an entire web site should look.
JavaScript: allows a variety of other capabilities, such as rollovers, animation, etc.
Meta tags: to help search engines find your web site.

Practice HTML exercise
Open BBEdit (if available), TextWrangler, or TextEdit (on the Macintosh). Note: If you're using TextEdit, in the Preferences menu, choose Plain Text. After writing your code, Choose Format, and Make Plain Text.

Keyboard this code:

<html>
<head>
<title>(Your name) practice site</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>

Save as practice.htm. You must include the htm or html file extension, or the file won't render in a browser. Now open a web browser. Choose Open File, and open practice.htm. "Hello, World" is a traditional first greeting of programmers working with a new program. Who am I to argue with tradition?

Note the <html> tag pairtells a browser what sort of file this is; the <head> tag pair contains the title and, if used, meta tags and JavaScript. The <body> tag pair contains the rest of the document. <h1> tag pair is a headline size, from 1 to 6, 1 being largest.

Basic HTML exercise.

II. CSS

While HTML was written by scientists who were most concerned with basic readability, CSS (Cascading Style Sheets) code aims to give web designers more tools to control page presentation. Using CSS designers can more precisely control placement of text and graphics, avoid awkward HTML placement workarounds such as tables, and even add a few dynamic features such as simple rollovers without resorting to JavaScript. In fact, now that most updated browsers support standard CSS, many webmasters are moving sites from straight HTML to CSS.

CSS does not, however, replace HTML. HTML is the base of all documents displayed on the World Wide Web. CSS instead reconfigures HTML tags to produce new attributes. For instance, in HTML the tag pair <h1> </h1> produces headline text of a certain size. CSS can redefine this tag pair to produce a different size headline, as well as a different font, color, spacing, and a wide variety of other variations not available in HTML. CSS can be hand-coded, but also is available through CSS software or Dreamweaver, the dominant web design software in professional use.

Advantages of CSS include not only ability to define qualities of a document not available in HTML, but also to save time by defining a separate CSS document that can be applied to all other web site pages, and changed as necessary. One change on the document changes the entire web site, saving tedious hours. Also an advantage is the faster loading time of the more lightly coded CSS-based web pages.

CSS terminology differs from that of HTML. A CSS "rule" defining an element on a page consists of a selector, a property and a value. The selector is the tag in HTML, such as <p> for paragraph. Property is how you can change that particular element, such as color. Value is how you change it, such as red. The whole rule:

p
{
color: red;
}

You can add other properties to one rule, or one (or more) properties to several selectors. In the example below, four HTML heading tags are given the same property and value.

h1, h2, h3, h4
{
font-family: arial;
}

Each time an HTML document uses any of these heading tags, the resulting text will be in arial typeface.

Often a web designer will wish to have different attributes for the same selector. Say you wish to have some paragraphs in green, and others emphasized with, oh, plum. To do this, you set up two classes of paragraph:

p.normal
{
color: green;
}

p.emphasize
{
color: plum;
}

You can call your classes whatever you want. In an HTML document, then, you merely evoke the class you wish to use:

For more information, check out the World Wide Web Consortium's self-paced CSS tutorial.

Basic CSS exercise.