HTML - HyperText Markup Language
I strongly suggest you download the HTML and CSS documentation sets from Web Design Group and install it where you can refer to it easily. You'll use these references extensively to understand the HTML and CSS elements and attributes.
HTML Basics
HTML is a simple language designed for formatting text and graphics. It's designed for creating documents that are published on the world-wide-web. It gets its name from its ability to contain hyperlinks (or just 'links') to other web addresses. All websites contain HTML. Although you can get tools to write your HTML for you, it's easy enough to learn...
|
INFO: HTML's ability to embed links in documents is one of the cornerstone technologies of the internet. It was designed initially for use in scientific context - to allow links to referenced documents. It's called a 'markup' language simply because you can mark up which part of the document has a special property (i.e. a link to another page). There are other markup languages in use, all are a subset of SGML (Standard Generalised ....) or XML (eXtensible Markup Language). |
Most of what you write in your web pages will be normal text: sales copy, product information, world takeover plans, whatever. When you want to define the formatting of some text - then you surround that text with an HTML tag... Defining the look of that text is pretty much all that HTML tags do!
All HTML tags start with '<' and end with '>'.
HTML Tags are case insensitive - so <b> is the same as <B>.
When you want the formatting to stop, you write the same tag, but with a '/' after the opening '<'. For example:
The <b> tag makes text bold.
This sentence in HTML looks like this:
...makes text <b>bold</b>
TIP: To see the source code for any web page, just right click with your mouse on the web page and select 'View Source' from the menu. This will bring up an editor containing the raw HTML. (This works better with webpages that use frames as the main menu 'View Source' only shows one of the frames.)
When you right click with your mouse on the something in Windows - it's the context menu that appears.
You can always save web pages onto your own computer so you can read them offline later! Just click on the 'File' menu, then 'Save As'. Using a website extractor program, you can download an entire website in one go, then read it offline. See the Tools module in Lesson 1 for more info.
|
HTML is an interpreted language - your browser (Internet Explorer / Netscape etc) creates the formatted web page from the source code it receives. It interprets the code into the visual page you see...
In other words the browser renders or paints the web page from the instructions that are the HTML. That's why different browsers can show the same page differently. That's also why you can see the source code itself when you click on 'View Source' - because it's been downloaded to your computer.
Cascading Style Sheets
The HTML standard which defines how you should be writing your code has gone through a number of revisions since it's inception. The current version of the standards is 4.0, but many people are still writing version 3 code...
The change has been (amongst other things) towards using Cascading Style Sheets (CSS). Style sheets are a way of providing greater consistency and control in the formatting of your web pages.
You can now specify the look of all the HTML elements like tables, paragraphs, lists etc. in a separate section of the page - even a separate file. This section or file is your style sheet. This means if you want to change the look of your website - you change values in the style sheet!
Style info can be located in three different places:
- Linked. The style info is held in a separate file.
<head>
<link rel="stylesheet" href="mystylesheet.css" type="text/css">
</head>
- Embedded. The style info is held in The head section of the document. This can override Linked settings.
<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE TYPE="text/css">
H1 { font-size:x-large; color:red }
H2 { font-size:9; color:#006 }
</STYLE>
</HEAD>
- Inline. This is actually in the body of the document. It can overide embedded settings. You specify style info for a single section using this syntax. (The span tag is a generic container):
<span STYLE="font-family:arial; font-size:10pt">Example Text</span>
Linked style sheets usually have the extension .css. The style sheet for this site is called ../ews.css
For a complete CSS documentation set - see the resources section below.
If a page contains <font> tags, the (deprecated) <b> or <i> tags, and doesn't contain sytle info in the <head> section of the page - then it's HTML Version 3.2 code. Most of the example pages were written in HTML 3.2, only index4.html uses styles.
There are a number of example files included with the course. You can download them from the free scripts download page. Details on the files can be found in the setup page.
Learning The HTML Tags
Writing HTML is no more difficult than learning to use most editors and you'll pick it up quickly!
Most of the tags you'll use are the simple ones already in the example files. The main effects they can have are:
- Text Formatting: i.e. bold <b>, italic <i>, underline <u>, font <font ... color, size ...>...
- Table Formatting: i.e. create table <table ... spacing, size, ...>, start row <tr ...>, start column <td ...alignment, ...>...
- Lists: i.e. ordered (numbered) <ol>, unordered <ul> lists
- Graphics <img ...>.
- Hyperlinks <a ...>.
- Forms <form ...>
Using forms you can create forms containing fields that your customers fill in, and a 'submit' button.
All HTML forms have an 'action' attribute that defines what to do with the form data once the 'submit' button is clicked. Form data is usually sent to a script that does something with it. Common uses for forms are contact/feedback, auto responders, guest books, and order forms.
You'll use forms later to create the 'order' buttons on your website.
The best way to learn HTML is to start creating your website... This is the next page Creating your home page. In the meantime you can see some HTML in action:
Open the example file index4.html, and any 'inspirational' pages you've downloaded and locate the tags mentioned below. Get used to reading the HTML and learn the basic tags.
The example pages and the pages you downloaded during the research section of the last lesson can be used as your templates / inspiration as you create your pages in the next module. (You can also use any page template you find - there are some great free sources of web page templates - see the resources section below.)
HTML Colours
Lots of things on a webpage can have a colour (or actually a 'color') attribute. The Page Body, Fonts, Table Cells, Links... All can have a color value set for them.
The way this is done is by specifying the individual amounts of red, green and blue you want in the color. The range is from 0-255 for each of these three primary colours. This give a colour pallette of 256 x 256 x 256 = 16,777,216 colours.
Each quantity of colour (R/G/B) is specified as a 2 digit hexadecimal number. Don't worry it's quite simple to use. Hex numbers go from 0 to F (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. = 16 numbers), so '00' is no colour, 'FF' is maximum colour.
Each HTML color is defined like this: color='#RRGGBB'.
Some examples:
- #000000 - Black
- #880000 - Medium Red
- #FF0000 - Bright Red
- #008800 - Medium Green
- #FFBB00 - Orange
- #000044 - Dark Blue
- #AAAAAA - Light Grey
You'll probably find it quite intuitive when you get the hang of it. You can guess the color values, and you may be surprised how often you're correct, but there are more accurate methods of deriving colours...
Most graphics programs have a 'colour picker' tool which allows you to choose a color from a pallette, they always show the individual primary color values, and often show the colour's hex values.
Arachnophilia helps you to enter colour tags - look under Tools/Insert HTML Tag/Color Tag.
There are lots of freeware HTML colour pickers out there. Nonags has a whole page of them.
Some online utilities:
Tables
To create page layouts in HTML there are two methods available: using tables or divisions.
Using divisions is supposed to be more browser friendly and better coding. The different navigation bars in The Webmaster's Bureau are positioned using divisions (if you shrink the window - the course navigation panel goes to the bottom of the page!). Check out the code for it's home page. You also need to see the contents of ../ews.css which contains the style sheet info.
Tables are much easier to manage because they allow you to set the sizes of all the different sections of your page exactly! (Dreamweaver has a 'page layout' view in which you design the page layout in boxes - it then creates the HTML code to draw the table for you.)
In order to build websites, using tables for formatting is quite sufficient. It's quite easy, with a bit of practice, to imagine a webpage as a table made up of cells of different sizes, and then to write the HTML to create it. In many cases, you can just cut and paste some example code, and make a few modifications to achieve your intended result.
Tables in HTML are built up sequentially. They start from the top left corner, moving to the right - by columns, and down - by rows.
For example. A table definition in English (and HTML) would look something like this:
- Open table with a light blue background, a thin border, and cell padding of 10 pixels...
(<table bgcolor="#CCCCFF" border=1 cellpadding=10>)
- Create a new row (<tr>)
- Create a new cell (<td>)
- [[[ Cell 1 Content ]]]
- Close cell (</td>)
- Create a new cell(<td>)
- [[[ Cell 2 Content ]]]
- Close cell(</td>)
- Close row(</tr>)
- [[[ Optionally, create next row etc... ]]]
- Close table(</table>)
| [[[ Cell 1 Content ]]] | [[[ Cell 2 Content ]]] |
Various attributes can be set to change the look of a table or it's cells. For example:
- Table width can be set to an absolute value - or a proportion of the page size.
- The alignment of text and object in a table cell can be set using the align attribute of the td tag.
- Cells can span more than 1 column using the colspan attribute of the td tag.
So you'd build up a page by creating a big table to contain everything, then putting your different parts (headings, columns, etc) in different cells.
The col tag can be used to set attribute for an entire column at once.
The th tag is analogous to the td tag, but defines a header element - usually displayed in a bolder font etc.
The thead, tbody and tfoot elements are designed to allow large arrays of tabulated data to scroll in the body while the head and the foot of the table remain static and visible on the screen. These tags aren't well supported by older browsers so ensure you test them.
For a complete list of all the tags, attributes and values available, refer to one of the HTML reference documents listed in the resources section below...
Resources
| Books (from Amazon.com) |
HTML and XHTML: the Definitive Guide
by Chuck Musciano, Bill Kennedy |
An excellent reference for any Web Author wanting to understand HTML 4 & XHTML. |
HTML Pocket Reference
by Jennifer Niederst |
Just the right blend of explanation, tips, and technical reference. This little 96-page guide is based on the longer book and provides a complete alphabetical list of the tags and attributes available in HTML 4.0. |
CSS Pocket Reference
by Eric A. Meyer |
The CSS Pocket Reference briefly introduces CSS and then lists all CSS1 properties, plus the CSS1 pseudo-elements and pseudo-classes. Since browser incompatibility is the biggest obstacle to CSS adoption, we've also included a comprehensive guide to how the browsers have implemented support for CSS1. For anyone who wants to correctly implement CSS, this is a handy condensed reference to all the details in the larger volume, Cascading Style Sheets: The Definitive Guide. |
Eric Meyer on CSS: Mastering the Language of Web Design with Cascading Style Sheets
by Eric A. Meyer |
Eric Meyer is a genius. Not only is he an expert in the field of CSS, but he is also graced with the ability to explain the subject so that anyone can understand it. |
Designing CSS Web Pages
by Christopher Schmitt |
Beyond the mechanics of CSS to how to think in the language of web design, and avoid the common pitfalls. Strong focus on foundations of CSS and CSS design sets as well as using SVG, PNG, and Alternative CSS. |
| HTML Manuals / Reference |
Web Design Group |
Download page: Get HTML 4 / 3.2 and CSS documentation for download. (These are the same docs as included with Evrsoft's 1stPage.) If you don't understand a particular tag, or want to check the attributes and options available, then this should be your first place to look. Download these manuals and keep 'em in your 'Manuals' directory! |
HTML 3.2 Quick Reference Manual |
A concise reference manual for HTML. |
|
W3Schools.com HTML Reference. |
Well presented, up-to-date, complete information on all aspects of HTML. Some great tutorials too. |
|
HTML Bare Bones |
A very basic list of all the HTML tags |
|
HTML 4.0 'Character Entity References' AKA...
The HTML Document Character Set
| A list of all the characters available and how to get them to display in your web pages. E.g. the text & shows the ampersand character '&', > shows the greater than symbol '>'... |
Page Layouts / Templates
These are a great way to get inspiration for your web pages and also to improve your understanding of HTML.
Some of the templates contain frames and/or javascript. |
FreeLayouts.com
| Have over 500 free page templates - each can be voted on - so they have ratings. |
FreeSiteTemplates
| Have a few hundred free web page templates |
FreeWebTemplates
| Have lots of free web page templates and commercial ones too. |
Steve's Web Templates
| Some nice free web page templates, commercial ones too. |
4Layouts.com.
| 625 Free Templates... |
Google Search...
| For the keywords: free web page templates |
|
|
