Samples of HTML and CSS Coding

Last Updated:   6/11/24  20:48                 Jeffrey Knauth

---

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 3 Heading

This Is an Altered Type 3 Heading, Rounded

This Is an Altered Type 4 Heading

This Is an Altered Type 4 Heading, Now Glowing

This Is an Altered Type 4 Heading with Shadowed Text

---

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.

---

The short, fat object below is also a horizontal line, showing such lines can be formatted as you desire,

---

---

            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 (floated to the left) and an unordered list with the same five items (floated to the right) with a paragraph of garbage oozing in between.

1. Here is item a.
2. Here is item b.
3. Here is item c.
4. Here is item d.
5. Here is item e.

• Here is item a.
• Here is item b.
• Here is item c.
• Here is item d.
• Here is item e.

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. Praesent nonummy. In qwertyuf erat. Duis nibh pede, accumsan eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla zindretry ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis.

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.

1. 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

2. 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.  A row is highlighted when the cursor hovers over it.

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: .

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

---

---

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:

• HTML Tutorials
• CSS Tutorials

Below are some 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. There are many books available, e.g., search Amazon for "Eric Meyer" and "Elizabeth Castro".

• Mozilla Development Network references and guides
• W3C school
• HTML Standard  (the continuation of HTML standard work after HTML5)

Here are some useful reference pages:

• HTML tags
• CSS properties
• Colors
• Character sets, including special characters