3A - Styling

30/10/2011 13:19

Text Formatting

HTML allows you to present text in certain styles to add depth and meaning to the presentation. Words can be italicized and bolded, for example. In HTML, text format tags fall into two categories, logical and physical. Logical tags focus on the actual use of the formatting, such as citing a source or the emphasizing of a point. Physical tags, on the other hand, are more literal, and they tell the computer to recognize the text as specifically italicized, bolded, or some other different style.

Many web designers try to use logical tags more than physical tags, for as web software becomes more advanced, they'll be able to give more utility to certain tags. But that's not to say there's anything wrong with physical tags - they're easier to remember than logical tags, especially when you want to just bold or italicize something. (Personally, I prefer

physical tags and rarely use logical ones, but that's just me.) All style tags are used the same way - you place a starting tag (without the slash) before the desired text, and then a closing tag (with the slash) at the end of the text. So, let's say I want to put part of the following phrase in bold:

Welcome to my website. Please email me if you have the chance.

I want to emphasize how much I want people to write me, so I've decided to put the words "email me" in bold. So, I code it like this:

Welcome to my website. Please email me if you have the chance.

By utilizing the bold tag (the ), I get the following result:

Welcome to my website. Please email me if you have the chance.

Confused? Don't worry. Just remember that html code always starts with < >. Using these style tags is really easy. After you've tried it out, it'll make perfect sense. In any case, here is a list of the common physical and logical tags.

Physical Styles

 and  are used to bold text.

 and  are used to italicize text.

<tt> and </tt> will give you typewriter, or fixed-width, text.

All of these have examples with the code and the and word.

Logical Styles

and 

Used for emphasis. Usually appears as italics. Example: If you like the Rolling Stones, visit their web page at https://stones.com.

Used for citing books, movies, etc. Usually appears as italics. Example:Howard Gardner discusses Multiple Intelligences theory in Frames of Mind.

<code> and </code> Used for presenting computer code. Appears as a fixed-width font. Example: 10 if x=y then go to 40

<kbd> and </kbd>

Used for user keyboard entry. Usually appears as either a bold fixed-width font. Example: To get the manual on the listserv, type in man listproc.

 and 

Used for strong emphasis. Usually appears as bold. Example: If you have any problems, please contact the webmaster!

<var> and </var>

Used to represent variables - i.e, something the user must replace with their own information. Usually appears as italics. Example: REVIEW LISTNAME will list the users subscribed to a given listserv.

Special Characters (Escape Sequences)

Four characters of the ASCII character set - the left angle bracket (<), the right angle bracket (>), the ampersand (&) and the double quote (") - are used in HTML to represent certain aspects of markup tags. Because of this, they cannot be used as part of a text document without a little bit of assistance. Additionally, accent marks and other less common characters can not appear without special help. Instead, you represent these characters with codes known as escape sequences, which must be included in the usual brackets for them to be recognized. Some of the more common codes:

⁢ is the escape sequence for is the escape sequence for <

> is the escape sequence for is the escape sequence for >

& is the escape sequence for &

" is the escape sequence for "

&ouml is the escape sequence for ö: a lowercase o with an umlaut

&ntide is the escape sequence for ñ: a lowercase n with an tilde

&Egrave is the escape sequence for È: an uppercase E with a grave accent

A full list of supported characters can be found at DeGrave's website. Chances are, though, you won't use them too often, so don't lose any sleep if you don't become an expert in them.

Horizontal Rules

The

tag produces a horizontal line the width of the browser window. It's often used as a way to break up information in your document. So far, I've used them a bunch of

times in the Crash Course. Check this out:

Neat, isn't it? You can even designate the width of the rule with the following command:

In the part of the tag where you see the letter X, you would instead put the percentage of the screen you want the horizontal rule to take up. So, if I include WIDTH=50%, the results would look cool. check it out.

At 10%, it would look like what?

Additionally, if you wanted to make your line thicker, you can also include SIZE=Y, with Y equaling the number of pixels wide you wish the line to be. Our final example demonstrates this:

ends up appearing as what? Try it.

Horizontal rules can be really handy sometimes, but don't overuse them without good reason, or you'll annoy your website users. (note - just in case you're wondering, there's no closing corresponding closing tag for a horizontal rule, so you only need to have one

tag for each time you want to use it.

Now, the HR tag has a lot of editing features. Below are all the major sub-sections this tags uses. You should be able to understand how to use all of them by this point

	width="number%" - Percentage of the screen that the HR tag covers
	width="number" - Amount of pixels that the HR tag covers
	align="left/right/center" - The alignment of the HR tag on the screen if you specify a width
	size="number" - Amount of pixels that the hr tag covers vertically
	noshade - Deletes the shading below a regular HR tag

Centering Text

Thanks to the folks at Netscape, there's now an unofficial HTML tag that will allow you to center text and even objects on your screen. It's called

The Center Tag.

The center tag is simply. Place it before the text or object you wish to center, and when you want to stop centering, complete it with a tag. As you can see above, I used the centering tag like this:

<center> The Center Tag <center>

Centering helps spice up documents, but always remember to include a tag when you're done, or everything else on your page below it will be centered as well.

Don't forget to end the tag when you do centering or it will center everything complete.

—————

Back