Text and more style

HTML elements

The required elements in an html web page are:

  • html
  • head
  • title
  • body (it could be replaced by a frameset element, but that is rare nowadays.)

Other elements we have seen:

  • a (week 2)
  • p (week 2)
  • style (week 3)
  • link (week 3)

Two more elements:

  • div
  • span

Containers

The contents of the body element are the things that actually appear in the web page. The contents of the head element are just used in managing the page.

The required elements in an html web page are:

  • the html element, which contains all the other elements.
  • the head element, which is first inside the html element.
  • the title element, which is inside the head element.
  • the body element, inside the html element. (it could be replaced by a frameset element, but that is rare nowadays.)

Other elements:

  • the a element, which can be put in the body. (week 2)
  • the p element, which can be put in the body. (week 2)
  • the style element, which can be put in the head. (week 3)
  • the link element, which can be put in the head. (week 3)

Two more elements:

  • the div element, which can be put in the body.
  • the span element, which can be put in the body.

Block and in-line containers

The containers in the body are either block containers or in-line containers.
Block containers always begin on a new line, and end at the end of a line.
In-line containers do not cause any new lines; they are just included with the text.

Block containers:

  • the p element
  • the div element

In-line containers:

  • the a element
  • the span element

RULE 1:   block containers cannot be put inside in-line containers.
RULE 2:   block containers cannot be put inside p containers.

Containers with style

You can use external style sheets, an internal style element, and a style attribute to give style to a container. The style for a container will affect some things within the container.

The sample shows the four containers we are using in the body.
The div container is usually used with some style, because the only other thing it does is to provide a block.
The span container is always used with some style, because it does not do anything else.

id and class

Sometimes we wish to give an element a unique id. We can do this with the id attribute. Example:
<p id="george"> . . .

Sometimes we wish to give several elements the same class name. We can do this with the class attribute. Example:
<p class="smith"> . . .
<p class="smith"> . . .
<div class="smith"> . . .

div elements are frequently given an id or class, or both.
span elements are almost always given an id or class, or both.
Other kinds of elements may be given an id or class, or both.
This is very useful when we want to apply styles to specific elements. See the sample.

space

No matter how many spaces you type between words, you only get one space when you see the web page. If you want an extra space, you can use the special character &nbsp;   nbsp stands for non-breaking space. Always put an ampersand at the beginning of a special character, and a semicolon at the end. We will see more special characters later.

Example:
hello &nbsp; &nbsp; there
produces:
hello     there

text-indent style

In most printed and written material, the first line is indented, to show the beginning of a paragraph. In web pages, this is sometimes done, and sometimes not. That is because the p element generates a blank line before the beginning of the paragraph, which shows the beginning of the paragraph.

indents can be provided at the beginning of each paragraph with the text-indent style rule. Example:
p { text-indent: 25px }

br and hr

Two simple elements are br and hr.
br ends a line, and causes the following material to be on the next line.
hr draws a horizontal line after the current line.

br and hr are NOT containers; there is nothing inside "go to the next line" or a horizontal rule. So, there are no end tags </br> or </hr>
It is necessary to show that these tags have no end tags. This is done by ending the tag with space, slash, and the greater than symbol:

<br />
<hr />

Preformatted text

There are many html elements and css rules that help us specify the format for our pages. Almost always we will use them to control the way our pages are displayed.

Occasionally you may wish to take control of exactly how the text is spaced on the page. I use this to display the source code for samples. If you do this, you must be careful to make sure the lines are not too long. Long lines can cause various problems. If you need to do this, use the pre container. You can look at the source code for the left side of any of my samples, to see how I use the pre container.

Quotes

A short quote is one word to a couple of lines long.
In English it is enclosed in quotes.
In HTML it is enclosed in the q container.

Occasionally you will see a long quotation in a book.
A long quote is one paragraph to a few paragraphs in length.
In English it is NOT enclosed in quotes, but its entire length is indented from both the left and right margins.
In HTML it is enclosed in the blockquote container.

The sample shows <br /> and <hr /> tags, as well as q and blockquote containers.

Box model

The box model is very important.
Let's look at a sample, that shows the box model.
The box model applies to all container elements. The sample uses div boxes.
We will apply some styles, to help see the parts of the box:

height
height of the box.
width
width of the box.
background-color
background color of the content area and padding.
border
width, style, and color of the border.
margin
width of the margin, which is outside the border.
padding
width of the padding, which is inside the border.

Box side

You can specify the style for one or more of the sides of the box.
You can do this for margin, padding, border, border-style, border-color, or border-width.
You must apply border-style to get a border; border-width and border-color are optional.
You can apply the border-style, border-width, and border-color separately, or specify border with any of them.
We can see some of these in the sample.

Align

The text-align property can be used to align text to the left, right, center, or to justify the text.
Left is common for correspondence and personal writing. Center is good for titles. Right is not used much. Justify aligns both the left and right margins. Almost all books were justified. Some newer books, including Wendy Willard's text book are left aligned; I suppose it is cheaper. Example:
p {text-align: justify;}

There is also a vertical-align property. It aligns things with respect to the line of text. Values include baseline, middle, sub, super, text-top, text-bottom, top, and bottom. I hope the support for vertical-align is getting better. Older browsers do not support vertical-align consistently and well.

Lab 4

Now you are ready to build your lab 4 web page.
Follow the link on the left to read the lab 4 requirements and build your lab 4 web page.

Put your web page on the Internet

Upload your index.html page and your lab 4 page to our Internet server, voyager.
Do this the same way you uploaded your lab 2 page.

Complete Lab 4

You have built your lab 4 web page and uploaded it to voyager.
Look at the page with your Firefox browser, to make sure the page works correctly on voyager.
Then, log in to Catalyst and submit assignment 4. The submission should provide the following information:

  • It should say that you have completed Lab 4.

Reading assignment

Reading assignments are in HTML, A Beginner's Guide, by Wendy Willard.

Chapter 4

Organize Sections of Text
Use div and p to organize sections of text.
In the book, the second paragraph of Organize Sections of Text is somewhat confusing. It says the div tag does nothing by itself - it doesn't even cause a line break
I might have said that both the p and div tags are block containers, so they start on new lines and end at the end of a line. A difference is that the p tag produces a blank line before and after a paragraph, while the div tag does not. See the sample.

Table 4-1 shows commas in the border-color example. Omit the commas; just spaces should be used.
Add headings
This section and following sections are not assigned until next week.

An alternate text is Even More Excellent HTML by Timothy T. Gottleber and Timothy N. Trainor. This book gives both new and older techniques. You may read in this book, if you wish. Chapters 5, and 8 (previously assigned - read more this week).