Samples of HTML and CSS Coding

Last Updated: 10/16/19 02:00 Jeffrey Knauth

This file contains samples of HTML and CSS coding. This is certainly not meant to be an example of good page design, but instead tries to give you a feeling for the capabilities you have in HTML and CSS. These languages are easy to use and experiment with. Here are some accompanying notes you can print. The idea is for you to look at the source code that produces the various elements of this page to see how they are created. Then you can experiment to produce something better for your own pages.

You can see the source code by right-clicking a blank area in the browser display window and then selecting "View Source" or similar wording in the menu. Firefox users can also use Ctrl-U to view the source. In addition, Firefox users can use the DOM Inspector (if installed) to see many more details.

Beware of the rendering differences among various browsers, e.g., Internet Explorer vs. Firefox. That is, different browsers may display exactly the same source code quite differently. This is not a desirable situation. Generally Firefox does a much better job of handling CSS than Internet Explorer does. One thing to try is shrinking or expanding the browser window sideways and observing how the document elements are rearranged in the now smaller or larger window.

This Is How a Default Type 1 Heading Appears

This Is How a Default Type 2 Heading Appears

This Is How a Default Type 3 Heading Appears

This Is How a Default Type 4 Heading Appears

This Is How a Default Type 5 Heading Appears

This Is How a Default Type 6 Heading Appears

Below are a few headings that have been altered with CSS. The heading type numbers really have no significance here because with CSS you can make any format changes you desire. You could make a Type 1 heading be tiny and a Type 6 be huge if you wanted, although that would probably be a bad idea because it might confuse you or others who later maintain the document. The point here is that CSS gives you total control over the appearance of the headings (and everything else).

This Is an Altered Type 1 Heading

This Is an Altered Type 3 Heading

This Is an Altered Type 4 Heading

Here is a short paragraph.

Here is a longer paragraph with some test text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus. Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan turpis at erat.

The lines above and below this paragraph are horizontal rules, which are created by an HR tag for each rule (line). Horizontal rules are used to separate the various sections of this sample file to visually separate the sections. By the way, CSS was used to give this and other paragraphs a special background color. The #FFFF66 in the P.hilite CSS code for this paragraph specifies a color. See this color chart for a quick reference for matching the hex numbers after a # to a desired color.

            This shows how the PRE tag can be used to
            preserve spacing in a simple text table.

                  A       B        C        D
               --------  ----   -------  -------
               antelope  bear   caribou  dolphin
               ant       bass   cat      duck
                         bat             deer
                                         dog

Here is an ordered list containing five items, followed by an unordered list with the same five items.

Here is item 1.
Here is item 2.
Here is item 3.
Here is item 4.
Here is item 5.

Here is item 1.
Here is item 2.
Here is item 3.
Here is item 4.
Here is item 5.

Lists can be nested in any combination and to multiple levels. You can specify the type of list item identifiers to use: 1,2,3... or a,b,c... or i,ii,iii..., or graphics of various types, etc. Note that indenting the source lines helps you keep things straight about which end tag goes with which begin tag, but the browser pays no attention to such indenting in the body section of the source file; the actual indenting is controlled by what is specified in the CSS style section of the source file.

The first nested list (unordered) will follow this line.
- Item 1
- Item 2
  - First item in a nested, nested list
  - Second item in a nested, nested list
- Item 3
The second nested list (ordered) will follow this line.
1. Item 1
2. Item 2
3. Item 3
4. Item 4

Here is a definition list:

Item 1

Data about item 1

Item 2

Data about item 2

The data happens to need another paragraph.

Item 3

Data about item 3, which happens to include an unordered list

Here is subitem sam.
Here is subitem mary.
Here is subitem sue.

Item 4

Data about item 4

Sample Table

PC Model	Configuration Date	Price	Configuration Notes
Dell Dimension 3000	7/25/05	$934.01	2.8 GHz, Norton Internet Security
Dell Dimension 3000	7/29/05	$1054.36	(exactly the same configuration as used on 7/25/05)
Dell Dimension 3000	8/02/05	$1085.00	(exactly the same configuration as used on 7/25/05)
Dell Dimension 3000	8/05/05	$931.98	(exactly the same configuration as used on 7/25/05)

Intrex Standard Series	8/01/05	$1034.76	2.67 GHz, Norton AntiVirus, SpySweeper, no firewall
Intrex Standard Series	8/05/05	$1045.36	2.67 GHz, Norton AntiVirus, SpySweeper, no firewall

Below is another table, but using a different format.

Event	Date	Time	Person Making Reservation	Status	Comments
Christmas Recovery	12/25/05	9 AM to 5 PM	Santa Claus	Half paid	R & R for SC and his crew
Groundhog Fiesta	2/02/06	8 AM to 5 PM	Charlie Brown	Paid in full
Presidents Day (Shopping Day)	2/22/06	5 AM to ...	George and Abe	Unpaid

A comment immediately preceded this paragraph. Notice that it is not displayed by the browser although you can see it in the source code.

Under this set of words is a link to my website's home page. Since index.htm is the default page for the site, it could also be done simply with this link.

Here is how to include an image inline: Sample Image .

Here is how to display an image when a user clicks on a link.

By using DIV and a previously specified CSS class, you can give formatting characteristics to all the text in that division.

Here is some more text and then an ordered list, all inside the division, so they all get the formatting for that division: green and centered. Note that doing center on a list like this isn't too good if the list item lines have different lengths.

Here is item ein.
Here is item dos.
Here is item trois.
Here is item quattro.
Here is item funf.

By using a BR tag after this word,
the browser is told to break the line at that point
and a second BR just caused the second line break.

Here is a more practical use:

George Xavier Wilson
513 Valley Place
Raleigh, NC 27609

For inline emphasis, now for some bold text followed by some italics and underlining and a combination of those three and a To be or not to be quote (which does not appear to work in IE) with emphasis on this which can be even more strongly emphasized by using color and size (or not).

References

This "Sample HTML and CSS" web page and the associated notes should be enough to get you started. There are many online tutorials on these topics. For example, here are some Google searches:

Below are some books and online documents that provide detailed information about what attributes and values can be used with HTML tags, how CSS is structured, and what attributes and values can be used with its rules, plus many other topics not covered in this brief summary. (Later editions are available; I won't try to keep this list updated since Google and Amazon searches, for example, will do a better job for you.)

Here is some reference material about specific topics: