Sep
04

XHTML cheat sheet

Filed Under (Web Design) by mflinn on 04-09-2008

The XHTML cheat sheet provides an at-a-glance perspective of common XHTML practices; it’s one of the few times when cheating won’t ruin your karma.

Document Type Definition (1 of 3 required)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Allows for virtually no elements of presentation (recommended)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Allows for varying degrees of presentation

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Allows for frames layouts; not recommended

Basic (all required)

<html></html>

Creates an (X)HTML page

<head></head>

Creates an area not considered page content

<title></title>

Browser window title (goes in the <head> section)

<body></body>

Creates the visible portion of the page

Character encoding (required)

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

The most common character encoding: ISO-8859-1 (Western Europe)

Style sheet references

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

A basic reference to a Cascading Style Sheet (CSS) file titled “site.css” (typically 4.0+ browsers)

<style type="text/css" media="all">@import "doc.css";</style>

A sophistocated reference to a Cascading Style Sheet (CSS) file titled “doc.css” (typically 5.0+ browsers)

Text

<h1></h1>

Creates the most important heading

<h6></h6>

Creates the least important heading

<p></p>

Creates a paragraph

<div></div>

Creates a block-level box (couple div with CSS formatting)

<span></span>

Creates an inline box (couple span with CSS formatting)

<em></em>

Emphasizes text (italics)

<strong></strong>

Strong emphasis for text (bold)

<sub></sub>

Makes text subscript

<sup></sup>

Makes text superscript

<br />

Creates a line break

Lists

<ul></ul>

Creates an unordered list

<ol></ol>

Creates an ordered (numbered) list

<li></li>

Creates a list item (place in a list)

<dl></dl>

Creates a definition list

<dt></dt>

Creates a definition term (place in a definition list)

<dd></dd>

Creates a definition (place in a definition list)

Links

<a href="URL"></a>

Creates a hyperlink (replace URL with link)

<a href="mailto:EMAIL"></a>

Creates an email link (replace EMAIL with email address)

Images

<img src="filename.jpg" width="200" height="100" alt="My 1997 Honda CRV" />

Places an image that is 200 pixels wide by 100 pixels high and has an alternate description (alt) of “My 1997 Honda CRV”

Tables

<table></table>

Creates a table

<tr></tr>

Creates a table row (place in a table)

<td></td>

Creates a table cell (place in a table row)

<th></th>

Creates a table header (place in a table)

(a Sample of) Special Characters

–

EN dash: -

—

EM dash: -

’

Apostrophe: ‘

“

Open double quote: ”

”

Close double quote: ”

−

Hyphen: -

‘

Open single quote: ‘

’

Close single quote (Apostrophe): ‘

…

Ellipsis: … Read the rest of this entry »

Aug
27

HTML Beginner Tutorial

Filed Under (Web Design) by mflinn on 27-08-2008

This HTML Beginner Tutorial assumes that you have no previous knowledge of HTML or CSS.

The thing to keep in mind is that HTML and CSS are all about separating the content (HTML) and the presentation (CSS). HTML is nothing more than fancy structured content and the visual formatting of that content will come later when we tackle CSS.

Contents

  • Getting Started - What you need to do to get going and make your first HTML page.
  • Tags, Attributes and Elements - The stuff that makes up HTML.
  • Page Titles - Titles. For Pages. Difficult to get your head around, I know…
  • Paragraphs - Structuring your content with paragraphs.
  • Headings - The six levels of headings.
  • Lists - How to define ordered and unordered lists.
  • Links - How to link things together.
  • Images - Adding something a bit more than text…
  • Tables - How to use tabular data.

Getting Started

Most of the stuff on the web is no different than the stuff on your computer - it’s just a whole load of files sorted into a whole load of directories.

HTML files are nothing more than simple text files, so to start writing in HTML, you need nothing more than a simple text editor.

Notepad is a common text editor (on Windows this is usually found under the Programs > Accessories menu).

Type this in to your text editor:

This is my first web page

Now create a folder called ‘html’ in your C drive (or anywhere else you fancy) and save the file as “myfirstpage.html”. It is important that the extension “.html” is specified - some text editors, such as Notepad, will automatically save it as “.txt” otherwise.

To look at HTML files, they don’t even need to be on the web. Open a web browser such as Firefox or Internet Explorer and in the address bar, where you usually type web addresses, type in the location of the file you just saved (for example, “c:\html\myfirstpage.html”) and hit return. Alternatively, go to the File menu of the browser, select Open, and browse for the file.

Pow. There it is. Your first web page. How exciting. And all it took was a few typed words. We’ve said here to use a basic text-editor, such as Notepad, but you may be tempted to use a dedicated software program such as Macromedia Dreamweaver.

You should be very careful when using these programs, especially if you are a beginner, because they often throw in unnecessary or non-standard code to “help” you.

Tags, Attributes, and Elements

Tags

The basic structure of an HTML document includes tags, which surround content and apply meaning to it.
Change your document so that it looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-strict.dtd">
<html>
<body>
This is my first web page
</body>
</html>

Now save the document again, go back to the web browser and select “refresh” (which will reload the page).
The appearance of the page will not have changed at all, but the purpose of HTML is to apply meaning, not presentation, and this example has now defined some fundamental elements of a web page.

The first line on the top that starts <!DOCTYPE… is to let the browser know that you know what the hell you’re doing. You may think that you don’t actually know what you’re doing yet, but it’s important to stick this in. If you don’t, browsers will switch into “quirks mode” and act in a very peculiar way.
To get back to the point, <html> is the opening tag that kicks things off and tells the browser that everything between that and the </html> closing tag is an HTML document. The stuff between <body> and </body> is the main content of the document that will appear in the browser window.

Closing tags

The </body> and </html> close their respective tags. ALL HTML tags should be closed. Although older versions of HTML lazily allowed some tags not to be closed, latest standards require all tags to be closed. This is a good habit to get into anyway.

Not all tags have closing tags like this (<html></html>) some tags, which do not wrap around content will close themselves. The line-break tag for example, looks like this : <br />. We will come across these examples later. All you need to remember is that all tags must be closed and most (those with content between them) are in the format of opening tag → content → closing tag.

Attributes

Tags can also have attributes, which are extra bits of information. Attributes appear inside the opening tag and their value is always inside quotation marks. They look something like <tag attribute=”value”>Margarine</tag>. We will come across tags with attributes later.

Elements

Tags tend not to do much more than mark the beginning and end of an element. Elements are the bits that make up web pages. You would say, for example, that everything that is in-between and includes the <body> and </body> tags is the body element. As another example, whereas ‘<title>’ and ‘</title>’ are tags, ‘<title>Rumple Stiltskin</title>’ is a title element

Page Titles

To add a title to your page, change your code so that it looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My first web page</title>
</head>
<body>
This is my first web page
</body>
</html>

We have added two new elements here, that start with the head tag and the title tag (and see how both of these close).

The head element (that which starts with the <head> opening tag and ends with the </head> tag) appears before the body element (starting with <body> and ending with </body>) and contains information about the page. The information in the head element does not appear in the browser window.

We will see later on that other elements can appear inside the head element, but the most important of them is the title element.

If you look at this document in the browser (save and refresh as before), you will see that “My first web page” will appear on the title bar of the window (not the actual canvas area). The text that you put in between the title tags has become the title of the document (surprise!). If you were to add this page to your ‘favourites’ (or ‘bookmarks’, depending on your browser), you would see that the title is also used there.

Paragraphs

Go back to your text editor and add another line to your page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My first web page</title>
</head>
<body>
This is my first web page
How exciting
</body>
</html>

Look at the document in your browser.

You might have expected your document to appear as you typed it, on two lines, but instead you should see something like:

This is my first web page How exciting.

This is because web browsers don’t usually take any notice of what line your code is on. It also doesn’t take any notice of spaces (you would get the same result if you typed “This is my first web page       How exciting”).

If you want text to appear on different lines, you need to explicitly state that.
Change your two lines of content so that they look like this:

<p>This is my first web page</p>
<p>How exciting</p>

The p tag is for paragraph.

Look at the results of this. The two lines will now appear on two lines.

Think of the HTML content as if it were a book - with paragraphs where appropriate.

Emphasis

You can emphasise text in a paragraph using em (emphasis) and strong (strong emphasis). These are two ways of doing pretty much the same thing, although traditionally, browsers display em in italics and strong in bold.

<p>Yes, that <em>is</em> what I said. How <strong>very</strong> exciting.</p>

Line breaks

The line-break tag can also be used to separate lines like this:

This is my first web page<br />
How exciting

However, this method is over-used and shouldn’t be used if two blocks of text are intended to be separate from one another (because if that’s what you want to do you probably want the p tag).

Note that because there’s no content involved with the line-break tag, there is no closing tag and it closes itself with a “/” after the “br”.

Headings

They are h1, h2, h3, h4, h5 and h6, h1 being the almighty emperor of headings and h6 being the lowest pleb.

Change your code to the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h1>My first web page</h1>
<h2>What this is</h2>
<p>A simple page put together using HTML</p>
<h2>Why this is</h2>
<p>To learn HTML</p>
</body>
</html>

Note that the h1 tag is only used once - it is supposed to be the main heading of the page and shouldn’t be used multiple times.

h2 to h6 however, can be used as often as you desire, but they should always be used in order, as they were intended. For example, an h4 should be a sub-heading of an h3, which should be a sub-heading of an h2.

Lists

There are three types of list; unordered lists, ordered lists and definition lists. We will look at the first two here.

Unordered lists and ordered lists work the same way, except that the former is used for non-sequential lists with list items usually preceded by bullets and the latter is for sequential lists, which are normally represented by incremental numbers.

The ul tag is used to define unordered lists and the ol tag is used to define ordered lists. Inside the lists, the li tag is used to define each list item.

Change your code to the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h1>My first web page</h1>
<h2>What this is</h2>
<p>A simple page put together using HTML</p>
<h2>Why this is</h2>
<ul>
<li>To learn HTML</li>
<li>To show off</li>
<li>Because I've fallen in love with my computer and want to give
her some HTML loving.</li>
</ul>
</body>
</html>

If you look at this in your browser, you will see a bulleted list. Simply change the ul tags to ol and you will see that the list will become numbered.

Lists can also be included in lists to form a structured hierarchy of items.

Replace the above list code with the following:

<ul>
<li>To learn HTML</li>
<li>
To show off
<ol>
<li>To my boss</li>
<li>To my friends</li>
<li>To my cat</li>
<li>To the little talking duck in my brain</li>
</ol>
</li>
<li>Because I've fallen in love with my computer and want to give her
some HTML loving.</li>
</ul>

Et voila A list within a list. And you could put another list within that. And another within that. And so on and so forth.

Links

So far you’ve been making a stand-alone web page, which is all very well and nice, but what makes the internet so special is that it all links together.

The ‘H’ and ‘T’ in ‘HTML’ stand for ‘hypertext’, which basically means a system of linked text.
An anchor tag (a) is used to define a link, but you also need to add something to the anchor tag - the destination of the link.

Add this to your document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h1>My first web page</h1>
<h2>What this is</h2>
<p>A simple page put together using HTML</p>
<h2>Why this is</h2>
<p>To learn HTML</p>
<h2>Where to find the tutorial</h2>
<p><a href="http://www.htmldog.com">HTML Dog</a></p>
</body>
</html>

The destination of the link is defined in the href attribute of the tag. The link can be absolute, such as “http://www.htmldog.com”, or it can be relative to the current page.

So if, for example, you had another file called “flyingmoss.html” then the line of code would simply be <a href=”flyingmoss.html”>The miracle of moss in flight</a> or something like this.

A link does not have to link to another HTML file, it can link to any file anywhere on the web.

A link can also send a user to another part of the same page they are on. You can add an id attribute to just about any tag, for example <h2 id=”moss”>Moss</h2>, and then link to it by using something like this: <a href=”#moss”>Go to moss</a>. Selecting this link will scroll the page straight to the element with that id.
The a tag allows you to open the link in a newly spawned window, rather than replacing the web page the user is on, which at first thought may sound like a good idea as it doesn’t take the user away from your site.
There are a number of reasons why you shouldn’t do this however.

From a usability point of view, this method breaks navigation. The most commonly used navigation tool on a browser is the “back” button. Opening a new window disables this function.

On a wider, more general usability point, users do not want new windows to be popping up all over the place. If they want to open a link in a new window then they can choose to do so themselves.

Images

hings might seem a little bland and boring with all of this text formatting. Of course, the web is not just about text, it is multi-media and the most common form of media is the image.

The img tag is used to put an image in an HTML document and it looks like this:

<img src="http://www.htmldog.com/images/logo.gif" width="157" height="70"
alt="HTML Dog logo" />

The src attribute tells the browser where to find the image. Like the a tag, this can be absolute, as the above example demonstrates, but is usually relative. For example, if you create your own image and save it as “alienpie.jpg” in a directory called “images” then the code would be <img src=”images/alienpie.jpg”…
The width and height attributes are necessary because if they are excluded, the browser will tend to calculate the size as the image loads, instead of when the page loads, which means that the layout of the document may jump around while the page is loading.

The alt attribute is the alternative description. This is used for people who cannot or choose not to view images. This is a requirement in the latest versions of HTML.

Note that, like the br tag, because the img tag does not have a closing tag, it closes itself, ending with “/>”
The construction of images for the web is a little outside of the remit of this website, but it is worth noting a few things…

The most commonly used file formats used for images are GIFs and JPEGs. They are both compressed formats, and have very different uses.

GIFs can have no more than 256 colours, but they maintain the colours of the original image. The lower the number of colours you have in the image, the lower the file size will be.

GIFS SHOULD BE USED FOR IMAGES WITH SOLID COLOURS.

JPEGs on the other hand use a mathematical algorithm to compress the image and will distort the original slightly. The lower the compression, the higher the file size, but the clearer the image.

JPEGS SHOULD BE USED FOR IMAGES SUCH AS PHOTOGRAPHS.

Images are perhaps the largest files a new web designer will be handling. It is a common mistake to be oblivious to the file size of images, which can be extremely large. Web pages should download as quickly as possible, and if you keep in mind that most people still use modems that download at less than 7Kb a second (realistically it is less than 5Kb), you can see how a large file will greatly slow down the download time of a full page.

You need to strike a balance between image quality and image size. Most modern image manipulation programs allow you to compress images and the best way to figure out what is best suited for yourself is trial and error.

Tables

Across the worldwide web, HTML tables are used and abused to layout pages. The correct use for tables is to do exactly what you would expect a table to do - to structure tabular data.

There are a number of tags used in tables, and to fully get to grips with how they work is probably the most difficult area of this HTML Beginners Tutorial.

Copy the following code into the body of your document and then we will go through what each tag is doing:

<table>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
<tr>
<td>Row 4, cell 1</td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
</tr>
</table>

The table element defines the table.

The tr element defines a table row.

The td element defines a data cell. These must be enclosed in tr tags, as shown above.

If you imagine a 3×4 table, which is 12 cells, there should be four tr elements to define the rows and three td elements within each of the rows, making a total of 12 td elements.