COMM 260, Principles of Internet Web-Based Design
Instructor: Ross Collins
Lecture Synopsis Six:
I. Beginning HTML
II. Beginning CSS
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:
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:
<title>(Your name) practice site</title>
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?
Second html exercise.
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:
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
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:
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.
CSS practice exercise.
Copyright 2004 by Ross F. Collins <www.ndsu.edu/communication/collins>