Although I could spend pages explaining the differences between HTML, XML, XHTML, and HTML5, I think we'll just begin with the basics using the currently accepted methods.To design, build, and develop web pages you really don't need any specialized programs. Although programs like DreamWeaver and Front Page are great, all we really need is a text editor. On a PC we can use Notepad, but I recommend Notepad++ (NEVER Microsoft Word). On a Mac you can use TextEdit or TextWrangler.
Every HTML page will have two main components: A Head and a Body.
A basic HTML5 web page template:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title Goes Here</title>
<meta charset="utf-8">
</head>
<body>
... body text and more HTML5 tags go here ...
</body>
</html>Testing: Next you can test your document. Generally it's easiest to simply double-click the icon of the file that you saved. This will open the web page in your default browser (i.e. Internet Explorer). You can also right-click the icon (if you're using a PC) and select, "Open With..." and choose which browser you would like to test. The first few pages you create will most likely look the same on all browsers and computer platforms,
Header Element: The H1 to H6 tags are used for Headers in a web page, moving from largest to smallest. As you'll find out later in the course, the H1 and H2 tags are the most important because they get indexed more readily by Google. Also, Header tags are used by Accessibility programs (i.e. screen readers) and some page indexing programs.
Breaking Text: The 'p' tag (short for paragraph) will break the text and add a blank line. The 'br' tag (short for break) will break the text and continue immediately on the next line.
Lists: Lists help you display information on your page in an easily readable format. The types of lists below are actually show in a list -- in this case, an ordered list (although I will use an unordered list a little later).
- Ordered Lists: These are generally numbered and imply an order or importance. They can be indicated using the "ol" (ordered list) tag with individual items being added with 'li' tags. HTML5 now offers a 'reversed' attribute, which is nice for doing a countdown.
- Unordered Lists: These are generally bulleted lists and imply no particular order or importance. Be aware, however, that Unordered Lists are considered obsolete and are being deprecated because they convey no value.
- Description List: HTML5 introduces this "new type of list" -- which is basically exactly like the "definition list" which has been deprecated -- kind of. It's basically the same thing.
Special Characters: The copyright symbol © is an example of a "special character" that you may want to add to your web page. Doing the &___; with "copy" in place of the lines will give you the correct symbol. Another use would be to substitute nbsp (non breaking space) which lets you separate words/characters by more than one space.
Div Element: This is a way of saying that everything between the 'div' and the '/div' is a specific "division". A block of "stuff" separated by a blank line on top and bottom. We'll be learning some other useful structural elements as well, but for now let's focus on the Divs.
Hyperlink Elements: Hyperlinks make web pages interactive. They are the "buttons" that users can click on to navigate to other pages or open other files. When creating hyperlinks, try to keep accessibility in mind. For example, if someone [a visually impaired person, for example] is using a screen reader, a link which says "Search the course schedule" is more useful than "More information".
Div Element: This is a way of saying that everything between the 'div' and the '/div' is a specific "division". A block of "stuff" separated by a blank line on top and bottom. We'll be learning some other useful structural elements as well, but for now let's focus on the Divs.
Hyperlink Elements: Hyperlinks make web pages interactive. They are the "buttons" that users can click on to navigate to other pages or open other files. When creating hyperlinks, try to keep accessibility in mind. For example, if someone [a visually impaired person, for example] is using a screen reader, a link which says "Search the course schedule" is more useful than "More information".
- Anchor Tags: "Anchors" (used with the 'a' tag) is a link to another page or file.
- Absolute Hyperlinks: Using the anchor tag, this is the way we would link to an absolute address. For example:
will always point to that specific address. It's like telling a cab driver to take you to 123 North Main Street, Lakeport, California and park in the alley behind the red fence. No matter where you are [or where the taxi is] they will find that place.<a href="http://www.mypage.com/pictures/me.jpg">My Picture</a> - Relative Hyperlinks: Using the anchor tag, this will link to a relative address. For example,
would open mypage.html if it existed in the current folder. It's equivalent to telling a cab driver to stop at the red house. Obviously if you're on a different street, the red house will be a DIFFERENT red house -- or there may not BE a red house. The positive to using a relative hyperlink is that if you use the same collection of pages in a different site, you don't have to change every link.<a href="mypage.html">My Page</a> - Email Hyperlinks: Again, using the anchor tag you will specify a link which will open an email program. For example:
would [if equipped] open an email program and compose a new email to rgriffith@mendocino.edu. Note: Some people set up their programs to show "Email Me" instead of showing their email address. This is not recommended since many people don't have email programs set up to automatically open when clicked. People often highlight the email address, copy it, and paste it into a program like Gmail.<a href="mailto:rgriffith@mendocino.edu">rgriffith@mendocino.edu"</a>
HTML Validation: W3C has a validation service at http://validator.w3.org which HTML coders can use to validate the syntax of their web pages. It's definitely worth trying, especially if you're having trouble finding pesky little problems (missing semicolons, for example).
These are a couple of previous tutorials which I have not updated since the release of HTML5, but they should give you a pretty good handle on what is going on here.
