Basic Web Page with Links

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:

{FILE | PATH | URL | ANCHOR} can reference:

FILE: HTML file name:
bobsgreatsite.html
This method will only call a web page that is in the same path as the existing web page.

PATH: path and file name: The location of the page being referenced is relative to the location of the current web page. Take care when using this; an incorrect relative path can cause the link to work improperly.

URL: A fully qualified domain name with file name or path/file name specified: Both methods define a path that is absolute, meaning that where it is located is not dependent on the current page's location. This method can be used for all web page calls, particularly if you desire certainty.

ANCHOR: jump a location within an HTML page, with the name of an in-page anchor preceded by a # sign: This method can be used with just the anchor (used within the page that is currently being viewed), the path / filename with the anchor appended, or the full URL with the anchor appended to the end.

The "Text to be shown as the link." portion will the the text that the user clicks on to follow the link. By default, this will be underlined to let the user know it is a link.
There are other attributes that can be used, such as setting the target="" of the link. This allows the page to be open in a new window/tab (_blank) or create page in the same frame (_self).

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:

Level One
Level One

Level Two
Level Two

Level Three
Level Three

Level Two
Level Two

Level One
Level One

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

Item 1
Item 2
Item 3

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

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