Website Construction for Visual Artists

More HTML

Some common HTML tags for formatting text

<b> </b>	Boldface
<i> </i>	Italics
<p> </p>	Paragraph This is a block-level element, meaning that this tag forces a "carriage-return" -- it makes the content encapsulated, and the browser will enforce a bit of space before and after the block of content. It is more proper to use the <p> for creating paragraphs, rather than the double-<br> I demonstrated on the previous page.
<h#> </h#>	Header text Replace the # with a 1 for the largest heading titles, 2 for medium, and 3 will typically be larger than your regular text. You can use 4, 5 and 6, which should make text smaller, but I find these too unpredictable. In any case, the visitor's browser settings will control the actual sizing, unless you control it with CSS. Like the <p> tag, <h> is a block-level element that enforces a carriage-return. "More HTML" up top is contained in <h1> </h1> tags, while "Some common HTML tags for formatting text" is contained in <h3> </h3> tags.
&nbsp;	Extra space between characters You can hit the spacebar 100 times while typing an HTML document, but browsers will only allow 1 space between characters. For example: " &nbsp; &nbsp; &nbsp; text" creates three extra spaces before the word "text".

ISO entities

In theory, any non-alphanumeric character (anything that isn't a letter or a number) must be replaced with a small piece of script or browsers can't guarantee that they'll work correctly. Technically, this isn't usually the case, but it is still worth going over. The most common punctuation and non-alphanumerics are quite safe: . , ? ! : ; ' " - + = @ $ / ( ) %. I do use & to replace the & symbol and # to replace the # symbol, because these used to be a bit dodgy -- probably because these characters are involved in the creation of ISO entities themselves.

You can also use them to create non-English characters:

caché   is written as caché
año       is written as año

Here's a chart of ISO entities. Keep in mind the the numeric entities tend to be more reliable than the character entities (although   has never failed me).

Where folks writing webpages really run into problems is when the text is cut'n'pasted from a word processor document, which uses different digital information to create punctuation marks (I also have seen small problems with text pasted from email readers). Quotation marks, apostrophes and dashes are common offenders. If you paste from such a document, you would be safe to go through the text and retype punctuation marks (or better, use the Replace function in your text-editor). And even safer to use ISO entities.

HTML attributes

Sometimes, HTML tags have attributes. This means that there is extra information about the HTML element within the < > brackets. Such as:

<a href="...">
<img src="..." border="1" >
<table width="100%">

The information between the quotation marks is known as the value associated with that attribute. I'll be referring to attributes and values later.

The <div> tag

This tag doesn't have many uses in raw HTML -- it's handier when the designer is using CSS. But, you can use this to align content to the left, right or center of the page. For example:



    Renders...






    Renders...



This tag will work for any content: text, images, even tables.

Comment tags

<!-- -->

<!--This is how to hide a message in an HTML document-->

There are many uses for the comment tags when writing webpages

• Labelling: leaving notes to yourself about blocks of HTML script (in a lengthy document) -- it's purpose, it's location in the rendered page, etc.
• Hiding bits of template HTML code, so you can cut'n'paste instead of retyping.
• Hiding content that isn't quite ready for public consumption.
• Problem-solving: when trying to figure out why a page isn't working out in my browser, I'll sometimes hide pieces of my HTML temporarily to try to locate the source of the trouble.

Next:   HTML tables           Top