HTML for Lists

HTML can be used to format lists of things. Some lists belong in a specific order, and some can be arranged in any order.

An example of an ordered list would be a series of steps in a set of instructions; it makes no sense to randomly change the sequence of the listed items. Track listings on music CDs are also ordered lists.

An example of an unordered list would be items that you want to pack in your suitcase; it typically wouldn’t matter what order the items were listed in.

In HTML, we use the <ol> element for ordered lists. Ordered lists are numbered (starting from 1) by default.

We use the <ul> element for unordered lists. Unordered listed are bulleted by default.

Inside each list, individual items are known as list items. Each list item is contained within an <li>element.

Each list in an HTML document has:

  • Only one list element: either <ol> or <ul>
  • One or more list item elements (<li>) nested within the list element.

Below is an example of an ordered list: instructions from a recipe. Notice that the entire list begins with an open ol tag and ends with a close ol tag. Within the <ol> element, there are three list items, each enclosed within a <li> element.

<ol>
<li>Preheat oven to 425.</li>
<li>Place fish in oiled baking dish.</li>
<li>Bake for 25 minutes.</li>
</ol>

HTML Exercise 2, Part A

  1. Begin a new web page in a root folder named for a topic of your choice.
  2. Create a new empty document in Adobe Edge Code and save it as index.html inside your root folder.
  3. Give the page a <title> and an <h1> that match your topic.
  4. Create two lists on the page: one ordered and one unordered, each with three or more list items.
  5. Put an <h2> element above each list to introduce each.
  6. Test in a browser.

HTML for Links

What makes the web so powerful is its ability to link from one document to another. This digital kind of link is otherwise known as a hyperlink, or anchor element. There are many kinds of hyperlinks, described below. The basic structure of a hyperlink is:

<a href=”path”>label</a>

The a stands for anchor. The href is short for hyper-reference. The label is the text (or image) that appears on the web page and typically conceals the link’s path (the URL).

Here is an example of a link written within a paragraph of text:

<p>Check out my <a href=”portfolio.html”>artwork</a>!</p>

Absolute Paths

Links to locations outside of the current website required that you identify the entire URL. This is known as an absolute path. The absolute path in the link below is http://google.com.

<a href=”http://google.com”>Google</a>

Relative Paths

Relative paths describe the location of another document in relation to the current document, both within the same domain name/website.

If they are both inside the same folder, you would just put the file name as the path.

<a href=”about.html”>About Our Company</a>

If the destination document is in a folder one level down from the current page, the folder name would be the first part of the path, followed by a forward slash (/), followed by the file name.

<a href=”about/index.html”>About Our Company</a>

If the destination document is in a folder one level up from the current page, the path would begin with two periods (..), followed by a forward slash (/), followed by the file name. The two periods instruct the browser to “back up” in the file structure.

<a href=”../index.html”>About Our Company</a>

Email Links

Anchor elements can also be used to provide a link to an email address. The critical part here is to begin the path withmailto:

<a href=”mailto:[email protected]”>Email me!</a>

Image Links

Images can be used in place of text labels, so that a user can click on an image to jump to another document or website. Simply swap the label text with an <img> element:

<a href=”http://facebook.com”><img src=”images/facebook-icon.gif” alt=”Facebook” /></a>

HTML Exercise 2, Part B

  1. Add a new <h2> at the bottom of your web page that says “Links”.
  2. Add four <p> elements under it.
  3. Each <p> element will contain one of each of these types of links:
    • relative path
    • absolute path
    • email link
    • image link
  4. Test in a browser.

Line Breaks and Other Empty Elements

Empty elements don’t have any content, and therefore they don’t have closing tags. They just do their thing and are done. Because they don’t have closing tags, we “close” them inside of themselves by ending in a space and then />.

A few empty elements are described below.

The empty element <br> is used to create a single line break within a block element such as <p> or <h1>; it is an inline element.

<p>Sweet dreams are made of this<br>
Who am I to disagree?</p>

The empty element <hr> is used to create a horizontal rule (line); it is a block element. A 75% wide horizontal rule is displayed below:


The empty element <img src=”” alt=””> is used to place an image on the page; it is an inline element.

HTML Exercise 2, Part C

  1. Add a new <h2> at the bottom of your web page that says “Line Breaks”.
  2. Add one <p> element under it.
  3. In the <p> element, paste in four lines from a poem or song.
  4. After each of the first three lines, add a <br> tag so that the next line starts on a new line in the browser.
  5. Test in a browser.

Some Final Formalities

To make your pages validate, you’ll need these bits included in your HTML markup.

  • Put the DOCTYPE declaration at the top of the code:
    <!doctype html>
  • Add a meta tag inside the head which identifies the content type:
    <meta charset=”utf-8″>

If you’re used to extra lengthy doctypes and meta charset tags from XHTML, welcome to HTML5! Things are a bit simpler now.

HTML Exercise 2, Part D

  1. Add the <doctype> declaration at the very top of your code.
  2. Add the <meta> tag for charset within your <head> element.
  3. Test in a browser.

CSS Basics

CSS stands for Cascading Style Sheets. CSS is used to control the presentation of your pages. That is, the HTML handles the content and basic structure, but the CSS makes it all look really nice. More about this topic in Content vs. Structure vs. Presentation below.

A single file of CSS can control the look and feel for an entire website. This means that your website looks consistent from page to page. It also means that you can make a site-wide visual change in a split second. CSS is wirtten a little differently from HTML.

CSS Syntax

  • CSS rules can be created for HTML elements, for classes called from the HTML, or for IDs called from the HTML.
  • A CSS rule has two main parts: a selector, and one or more declarations.
  • The selector is the HTML element, class or ID you want to style.
  • Each declaration consists of a property and a value.
  • The property is the style attribute you want to change. Each property has a value. The property and value are separated by a colon.
  • CSS declarations always ends with a semicolon, and declaration groups are surrounded by curly braces.
CSS syntax

To make the CSS more readable, you can put one declaration on each line, like this:

p {
color:red;
text-align:center;
}

CSS and HTML Comments

Comments allow you to put notes inside your code without affecting the content or presentation of your pages. This helps you organize and keep track of your code, especially in large files. It can also help you with debugging your code: just temporarily comment out a region of code and see if the problem persists.

HTML comments begin with <!– and end with –>, like this:

<!– Main Navigation –>

CSS comments begin with /* and end with */, like this:

/* Footer styles */

Inline CSS vs. Internal CSS vs. External CSS

Inline CSS

  • inline CSS appears as an attribute within an HTML open tag
  • this CSS affects only the content within that particular HTML element
<p style="color: #ccc;">Hello, world!</p>

Internal CSS

  • internal CSS appears within the head element of a page
  • this CSS affects only the current page
<head>
<title>My Web Site</title>
<style type="text/css">
<!--
p {
color: #CCC;
}
-->
</style>
</head>

External CSS

  • external CSS appears in its own file (a style sheet ), separate from the HTML files, with the file extension of .css
  • the external CSS file does not include the style tags you see in internal CSS
  • use a link element to link in the head element of the HTML file to the external style sheet (see Link to the CSS Filebelow)

Link to the CSS File

The best practice is to contain all CSS styles in an external style sheet, rather than using internal nor inline styles. You must link to the external style sheet from within the html page using a <link> tag. The <link> tag must be nested inside the page’s <head> element.

<link type="text/css" rel="stylesheet" href="styles.css">

By the way , that <link> tag is also an empty element!

HTML Exercise 2, Part E

  1. Create a new empty document and save it as styles.css inside your root folder.
  2. Link to this CSS stylesheet from within the <head> of index.html.
  3. Add a simple CSS style to styles.css.
  4. Test in the browser to see whether your stylesheet link is working.
  5. Add a few more CSS styles to the stylesheet and test again.

Moving Internal CSS to an External File

We always want to contain all our CSS styles in an external style sheet. However, sometimes you’ll find that you’ve accidentally ended up with some internal CSS. Here’s how to move it over.

  1. If you don’t already have an external styles sheet, create a blank file and name it styles.css.
  2. Link from the HTML file to the CSS file as described above in Link to the CSS File.
  3. Cut the styles from the HTML file: select only the CSS (not the <style> tags nor the comment tags), and press Ctrl+X (PC) or Cmd+X (Mac).
  4. Paste the styles into styles.css: press Ctrl+V (PC) or Cmd+V (Mac).

The Box Model

All elements on a web page conform to what is called the box model. It’s how CSS sees HTML elements. CSS treats every single element as if it were represented by a box, block and inline elements alike.

Between the box and the border is the padding.

Between the border and the next element on the page is the margin.

the box model

The CSS width assigned to the box is added to the border thickness (times 2), the padding (times 2), and the margin (times 2) when calculating the total width of the element.

For example, the following CSS makes a box 332px wide. It has a 1px border (2px total), 20px of padding (40px total), and 20px of margin (40px total). Add that 82 pixels to the box’s width of 250px, and you get 332 pixels.

#panel {
width: 250px;
border: solid 1px;
margin: 20px;
padding: 20px;
}

Content vs. Structure vs. Presentation

The page content includes such things as the text and images which actually appear in the browser window.

The page structure is created by the HTML markup. Structure defines your page pieces according to their functions and meanings, such as headings, body text, lists, hyperlinks, or divs for content areas.

More about semantic markup

All of the page’s presentation should be defined in the CSS. Presentation includes such things as colors, background images, font type and size, and the layout of content areas.

content, structure, presentation

Validating your Documents

You should always run your HTML and CSS files through a validator to determine if you have properly coded them. Below I’ve decoded some of the most common errors (listed alphabetically) that result from a validation test, and how to fix them in most cases.

Remember to only worry about the FIRST error in a list of errors. Fix it and upload your HTML or CSS file again for validation.

You will also need to rely on your own understanding of proper HTML and CSS syntax.

Some Common HTML Validation Errors / Warnings

an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified

Your attribute value is missing double quotes. Put double quotes on both sides of an attribute value, like this:

<div id=”footer”>

character “&” is the first character of a delimiter but occurred as data

The ampersand (“&”) is a special character in HTML. It should be replaced by the character entitity &amp; in the code.

document type does not allow element “______” here

This error message often comes up for any line of code if there is a missing close tag right before it. Find and close any elements with missing close tags.

document type does not allow element “body” here

You have placed a <body> tag within the main content of your page, or you may have duplicate open <body> tags. Move or remove the <body> tag, as appropriate.

document type does not allow element “li” here; missing one of “ul”, “ol”, “menu”, “dir” start-tag

Your list is either missing an open <ul> or <ol> tag, or that tag is in the wrong place.

document type does not allow element “p” here; missing one of “object”, “applet”, “map”, “iframe”, “button”, “ins”, “del” start-tag

You may have tried to nest a block element inside an inline element. For example, in the following code the <h1> element (a block element) is nested inside an <a> element (an inline element.) Always place block elements outside inline elements.

<a href=”creations.html”><h1>My Creations…</h1></a>

document type does not allow element “title” here

You have probably opened your <title> tag twice. Change the second one to a close </title> tag.

end of document in prolog

Believe it or not, sometimes the validator has errors itself. Try the page again in a few minutes, or try the Validate by Direct Input tab.

end tag for “br” omitted, but OMITTAG NO was specified

The break tag (an empty element) is written incorrectly as <br>. Rewrite it as <br />.

end tag for “p” omitted, but OMITTAG NO was specified

You have an open <p> element which was not closed. Put </p> in an appropriate location to close the <p> element.

end tag for element “div” which is not open

You have too many close </div> tags. Remove the extra one.

ID “menu” already defined

You have used an ID attribute more than once. Any given ID name can be used only once on an HTML page. Remove any duplicates.

required attribute “alt” not specified

You have an image tag which is missing the required “alt” attribute. Add the “alt” attribute and describe the image. Example:

<img src=”images/brick.jpg” alt=”photo of a red brick wall” />

there is no attribute “bgColor”

You are attempting to use an attribute with a tag that does not exist in the W3C recommendation. You should probably be using CSS instead to get what you want.

Some Common CSS Validation Errors / Warnings

Family names containing whitespace should be quoted.

You have a font name which contains more than one word and it is not surrounded by quotations marks. Add quotation marks around any font name consisting of more than one word.

Parse Error }

There is an extra } symbol. Remove it.

Parse Error Lexical error at line 1, column 18. Encountered: “/” (47), after : “<style type=u0094text”

You have put the HTML <style> tag inside a CSS document. Remove it.

Value Error : ________ is not a style value

You have put the wrong kind of value with your property. For example, in this bit of code, the border-top-style is not supposed to be a numerical value:

border-top-style: 800;

Value Error : ________ attempt to find a semi-colon before the property name. add it

The line above the line specified is missing its ending semi-colon. Make sure that all declarations end in a semi-colon.

Value Error : color ________ is not a color value

You have a missing pound sign (#) if front of the hexadecimal value representing your color. Add it.

HTML Exercise 2, Part F

  1. Validate your index.html at http://validator.w3.org/#validate_by_upload; fix any errors.
  2. Validate your styles.css at http://jigsaw.w3.org/css-validator/#validate_by_upload; fix any errors.
  3. Test again in the browser.