Basic Web Page with Links

Click on a tag to jump to its section:
<html> | <head> | <body> | formatting: <h#>, <p>, <br />, and <hr /> | links: <a> | lists: <ul> and <ol>

This lesson covered many things one needs to know to get a web page started; <html>, <head>, <body> and more -- including links to allow you to link to other pages, and create lists.

The page itself (<html> tag):

This is an easy one. Quite simply, the page should begin with a <html> and end with a </html> -- all other code falls between these two tags.

The head section (<head> and <title> tags):

The main use of the <head> section is to put a <title> on the page -- one that shows up on the web browser's title bar or tab. Other uses are: definitions for a/an external CSS and/or JavaScript file (covered on other pages) and "meta" tags to define various bits of data, such as keywords, author, and more.

Click here for more information on <meta> tags used in the <header>.

The body section (<body> tag):

All HTML code that does not go into the <head> section will go into this section. So, to take the first three points together, a basic web page structure looks like this:

Formatting (<h#>, (<p>, (<br />, and (<hr /> tags):

Basic ways to format your page involve using some, or all, of these tags: the heading tags, of which there are six (<h1> ... <h6>), the paragraph tag (<p>), the line break tag (<br />), and the horizontal rule tag (<hr />). With the exception of the line break and horizontal rule tags (which are "self-closing"), all must be closed properly.

Firstly, the six heading tags:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

The paragraph tag (<p>), is a tag with allows you to organize the text into, well, paragraphs. Each paragraph is separated by a line of whitespace.

Paragraph 1

Paragraph 2

The line break tag (<br />) lets you insert one, or more, line breaks where you want them. Unlike the paragraph tag, it does not insert a line of whitespace.

This sentence
has a line break tag in it.

Finally, the horizontal rule tag (<hr />). All it does it draw a line all the way across the screen.

Links (<a> tag):

The <a> tag is used to create links to a file, a path/file, an URL, or an anchor within a page. It is used like this:

Click here for more information on <a> attributes.

Lists (<ul> and <ol> tags):

Lists are used to present data in an ordered way -- like I did in the links section, above. There are two types of lists: ordered <ol></ol> (using letter or numbers) and unordered <ul></ul> (using bullet points). In either case, each item in the list is enclosed with <li></li> tags. Usage:

You can nest lists, too. Nesting ordered lists do not automatically change the number/letter type for each level; they have to use the start="" attribute. Nesting unordered lists <ul> will automatically produce different bullet point characters for each level, up to three:

An ordered list using the start="" attribute (starting with 53):

  1. Item 1
  2. Item 2
  3. Item 3

An ordered list using the type="" attribute (lower case Roman numerals) and links:

  1. Click here for more information on <ol> attributes.
  2. Click here for more information on <ul> attributes.

Click on a tag to jump to its section:
<html> | <head> | <body> | formatting: <h#>, <p>, <br />, and <hr /> | links: <a> | lists: <ul> and <ol>

During this assignment, I learned that certain HTML tags have been deprecated, such as <center></center>. I also learned that other tags now need to be "self closing", such as <br /> and <hr />.