Text and style

The required elements in an html web page are:

• html
• head
• title
• body

Other elements we have seen:

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

Two more elements:

• div
• span

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.

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.

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.

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.

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.

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 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     there
produces:
hello     there

In some 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 }

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 common 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 />

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.

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.

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.

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.

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.

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.

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

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 Canvas and submit assignment 4. The submission should provide the following information:

• It should say that you have completed Lab 4.

Read information that your find relivant from the book you selected.