Latest revision as of 15:00, 12 July 2011

Main Page >> Website fundamentals >> Workbook >> HTML >> Essential Tags

Introduction

This chapter contains the essentials for formatting text on a web page. The tags in this section control most of the formatting you will ever want to do. You should practice the use of ALL the tags in this section EXTENSIVELY before progressing to the next section.

Heading Tags

Heading tags are used to create headings and subheadings in your document. There are six sizes of heading available for you to use, but it is likely that you will only use a few of them.

HINT: You should use headings sparingly, as they tend to distract the reader from the content of the web page if they are overused.

For example, the following tags:

<H1>Whale</H1><H2>Elephant</H2><H3>Horse</H3><H4>Dog</H4>
 <H5>Cat</H5><H6>Mouse</H6>

When opened in a web browser, your web page should look like this:

TIME TO PRACTICE
- Now you have a go at the example above. Remember to start with the "Standard Web Page Structure" from HTML:Basics and add the text in the blue box above in the appropriate place. Include an appropriate title. You may wish to save the examples as you follow them. Refer to the section of "Saving Your Work" for instructions on how to save your examples.

Additional Exercises

Experiment with putting text in and around the heading tags to see how the rest of the text in the document flows when the browser comes across a heading. For example, try the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <HTML>
 <HEAD>
 <TITLE> put your title here </TITLE>
 </HEAD>
 <BODY>
 <H1>Heading 1</H1>
 <P>Hello</P>
 <H2>My name is</H2>
 <P>Fred</P>
 </BODY>
 </HTML>

Aligning Headings

If we wanted a heading to be centred horizontally on the page, we would use the "ALIGN" attribute and the value "center"

HINT: Note the American spelling of the word "center"

<H1 style="text-align:center">Whale</H1>

...which would look like this...

You can also align text to the right hand side of the page like this…

<H1 style="text-align:right">Whale</H1>

...which would look like this...

In order to align the text to the left hand margin, you could use align="left", but you don’t have to, because the browser does this by default.

Structuring Text

It is important to note at this stage, that a web browser ignores carriage returns (or blank lines, line feeds, new lines) in a web page. New lines are not rendered as you would expect them to be in something like a text editor.

For example, try the following web page, and notice the difference in where the line breaks are in your source code when compared to the rendered web page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <HTML>
 <HEAD>
 <TITLE> put your title here </TITLE>
 </HEAD>
 <BODY>
 <H1 style="text-align:center">The Alphabet</H1>
 <P>The alphabet is made up of 26 letters.
 A is the first letter,
 B is the second,
 and so on until Z, the 26th letter.
 </P> 
 </BODY>
 </HTML>

As you can see from the example above, the carriage returns or new lines we put in our HTML are not displayed in the web page. There are a number of ways in which we can achieve the results we are looking for.

Paragraph Tags

Paragraph tags are interpreted by the browser as the start and end of a paragraph, and are the simplest way to separate long text in a web page into logical sections, the same way as in a book, or this workbook for example. A paragraph tag is made up of a start tag and an end tag. The start tag is and the end tag is .

HINT: Refer back to Chapter 2 for a refresher on names, attributes and values.

For example, try the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <HTML>
 <HEAD>
 <TITLE> put your title here </TITLE>
 </HEAD>
 <BODY>
 <H1 style="text-align:center">The Alphabet</H1>
 <P>The alphabet is made up of 26 letters.</P>
 <P>A is the first letter,</P>
 <P>B is the second,</P>
 <P>and so on until Z, the 26th letter.</P>
 </BODY>
 </HTML>

TIME TO PRACTICE
- Create a web page with at least a few hundred words on a subject of your choice. Save this somewhere safe as we will be using it many times in the coming exercises.
- Experiment with using paragraph and heading tags to split the text into logical sections. Save this page, as you will be amending it in coming exercises. Ensure you have started with the "web page standard structure"

Line Breaks

A line break can be used to force a carriage return in your text. It is VERY IMPORTANT to note that a line break is one of the few tags in HTML that does not have a closing tag. The line break tag is but there is no such thing as a - it does not exist because it is not needed.

For example, try the following:

<P>This is my first line<BR>This is my second<BR>Here is a third</P>

HTML Good Practice 2 – Use Sparingly

Excessive use of to control the formatting of a document is bad practice – there are better formatting controls (paragraphs, tables, Cascading Style Sheets, etc.) that you will cover later in this workbook. Excessive use of in your exercises and related assessments will likely reduce your grades.

TIME TO PRACTICE
- Using the Alphabet HTML code example on the previous page, try to add
  tags in the correct places so that the rendered web page looks like the HTML, that is, with the correct line breaks in the correct places.

HINT: When the workbook refers to HTML code, it means the web page as it looks in a text editor, so that you can see all the HTML tags.

Bold

There are a number of ways to control the "strength" of displayed text in HTML. Text which is stronger than normal text is what we usually call BOLD text.

The traditional way of making text bold, is to use the tags. When a browser finds text that is within this tag pair, it makes the text appear bold.

Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <HTML>
 <HEAD>
 <TITLE> put your title here </TITLE>
 </HEAD>
 <BODY>
 <P><B>This is some bold text</B> and this is not</P>
 </BODY>
 </HTML>

TIME TO PRACTICE
- Using your long text web page you are developing, use the bold tags to highlight some key words.

Strong

As we have discussed earlier, the modern approach to building web pages is to separate the content from the presentation. By using <BOLD> tags, you are forcing both the content and the presentation together, not separating them. Using the bold tag, you (the web page designer) are forcing your opinion of how a webpage should look on your visitors. The more appropriate approach to identify some content in a stronger way than the norm is to use the  tag.

Strong enables the client to determine how they want to present STRONG content. For example, perhaps a client wants to make all strong content very large and green, flashing text. By using STRONG, you enable them to do this. By using BOLD, you do not.

Whilst BOLD conforms to strict HTML 4.01, you should replace all instances of BOLD with STRONG as a matter of best practice.

TIME TO PRACTICE
- Using the long text web page from the previous examples, replace the bold tags with STRONG. This is a good opportunity to practice using the "find and replace" features of your text editor – a very valuable skill.

HTML Good Practice 3 – Use or CSS, not

For the purposes of the exercises in this workbook and any related assessments, you are required to use either or CSS to control the strength of text, not the bold tag. Usage of the bold tag will reduce your grades.

Italic

There are a number of ways to control the "emphasis" of displayed text in HTML. Text which is emphasised more than normal text is what we usually call ITALIC text, and is used for quotations, speech, and similar types of text.

The traditional way of making text italic, is to use the tags. When a browser finds text that is within this tag pair, it makes the text appear italic.

Try the following:

<P><I>This is italic</I>but this is not</P>

TIME TO PRACTICE
- Using your long text web page from the previous page, use the italic tags to highlight some key words.

EM-phasis

As we have discussed with the BOLD tags, the practice of forcing the browser to render emphasised text in italics is becoming outdated. Cascading Style Sheets (CSS) offer some greater control for both the author and the reader in terms of emphasised text, as you will see in the final chapter, but there is an alternate tag that performs the same function, but puts the user in control, namely the (short for emphasis) tags.

TIME TO PRACTICE
- Using your long text web page, replace the italic tags with tags.

HTML Good Practice 4 – Use or CSS, not

For the purposes of the exercises in this workbook and any related assessments, you are required to use either or CSS to control the emphasis of text, not the italic tag. Usage of the italic tag will reduce your grades.

Underlining Text

It is possible to underline text in web pages, however this practice has become outdated due primarily to the fact that most users expect underlined text to be a Hyperlink – see next chapter. Also, the HTML standards list the underline tags as deprecated, meaning that browsers will likely still make text within the tag underlined, but authors should no longer use this function. As such, whilst it is possible to underline text, you are recommended against doing so.

HTML Good Practice 5 – Do not underline text unless it is a hyperlink

For the purposes of the exercises in this workbook and any related assessments, you should not underline any non-hyperlink text. Doing so will likely decrease your grade.

Combining Tags

It is possible to combine tags together to make enhanced use of different formatting commands. The and tags from the sections previously are a good example. It is possible to create a word or words that are both bold and emphasised.

For example, try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <HTML>
 <HEAD>
 <TITLE> put your title here </TITLE>
 </HEAD>
 <BODY>
 <P>This example shows how to <STRONG><EM>combine</EM></STRONG> tags to enhanced effect.</P>
 </BODY>
 </HTML>

When using multiple tags together, HTML standards dictate that the closing tags must be in the reverse order of the opening tags. This is easier to demonstrate than it is to discuss.

This is correct NOTE: do not type this in - it is to demonstrate the concept, but it won't render anything

<TAG1><TAG2><TAG3>This is my text</TAG3></TAG2></TAG1>

Anything else, like the following, is wrong:

<TAG1><TAG2><TAG3>This is my text</TAG1></TAG2></TAG3>

HTML Good Practice 6 – Combination tags must be closed correctly

For the purposes of the exercises in this workbook and any related assessments, you should close all combination tags in the correct order. Failure to do so will likely decrease your grade.

Controlling Fonts using CSS

In previous versions of HTML, the way to control the font, size and colour of text was by using the tags. These are now deprecated in version 4.01 of the HTML specifications – meaning basically that as authors you should not use them any more. It is now considered better practice to control the font of a section of text by using the style attribute of the section, for example, using the paragraph tag we can control the font, size and colour by controlling the style attribute of the paragraph tag.

These examples use a form of CSS called "Inline Style."

Almost all tags can have a style attribute. The style attribute controls the visual representation of the contents of that tag and is very versatile. The value of the style attribute is written in a slightly different language to HTML and this subtle difference is critical in getting the desired results.

Inline Style syntax is always in lowercase, and is made up of one or many names and values – the name is the thing we want to change and the value is what we want to change it to.

font-family

font-family

The font-family component of style controls which font the text is rendered in.

<P style="font-family: Arial">Hello, this should be in Arial Font</P>

This example shows how we can change the font of the paragraph by changing the font-family name to the value Arial. Notice carefully the syntax of the style attribute’s value. The font-family has a ":" symbol after it, followed by the name of the font we want to use. We can change the font to any font that is installed on the machine that the web page will be viewed on NOT the fonts available on the author’s machine. For example, if the author has the Tahoma font installed on their machine, and the viewer of that web page does not, the text will appear in the default font for their browser. Also, font changes should be used sparingly – too many fonts make a page difficult to read – try to stick to some basic fonts that are available to most visitors (Courier, Arial, and Times.) Most PC users using Microsoft Operating systems should have Georgia and Verdana also – those fonts are specifically designed for ease of reading when displayed on a webpage, and have been used in this workbook.

TIME TO PRACTICE
- Change some fonts in your long web page exercise used previously.

HTML Good Practice 7 – Use fonts changes sparingly and carefully

As not all fonts can be rendered by the users of your web pages, try to stick to a few common fonts and use them sparingly. Failure to do this may result in lower grades for assessments.

font-size

font-size

The size of the font can also be controlled; however this facility comes with many warnings.Let’s discuss the warnings first.

Whilst you can change the size of the text in your document you should refrain from specifying exact sizes. Exact or fixed sizes of fonts (like 20 point text for example) cause problems for users using alternative browsers, like hand-held computers that have small screens. Most browsers allow the user to change the size of all the text in a web site – Internet Explorer’s and Firefox's text-size control can be found in the View menu for example. This helps people with sight difficulties see web pages more clearly. However, using fixed or exact sizes stops this function from working.

It is much better to use what we call relative or proportional sizing in your fonts (and other web page elements that we’ll discuss later) as it offers the user more control over how they want to see your site, but still allows you the author the power to make one section of text bigger than another.

In order to use proportional sizing, CSS provides some keywords to control sizes or you can control the size as a percentage (with 100% being "normal" size). Following are some examples:

<P style="font-size: small">This is small</P> <P style="font-size: large">This is large</P>

Font size keywords are xx-small, x-small, small, medium, large, x-large, and xx-large

<P style="font-size: 75%">This is small</P><P style="font-size: 150%">This is large</P>

TIME TO PRACTICE
- Change some font sizes in your long web page example previously used. Use the text size changer in your browser (on the View menu in Internet Explorer) to see how the user can control part of the experience of viewing your pages.

HTML Good Practice 8 – Font sizes should be proportional, not fixed

Font sizing can cause problems for your users. Use font sizes that the user can control. Failure to do this may result in lower grades for assessments.

color

color

As in the previous examples of font family and sizes, colour is also controllable but also has warnings.

The first warning is that some colours are usually reserved in web pages to show hyperlink usage (covered in next chapter) – your browser will show hyperlinks in blue underlined text most of the time, and visited links are usually shown in purple underlined text. You should not use these colours in your content to avoid confusion. Also, not everyone can view colours in their browsers – some only show web pages in grey or even black and white. Finally, care must be taken with the colour of text in context with the colour of the background. White text on white background will be invisible, yellow text on white is very difficult to read, as is dark blue on black, and so on. Make sure there is sufficient contrast (difference between text colour and background) in your colour scheme, and also avoid colours which are difficult to read for long periods (bright green on bright pink is hard on the eyes.)

There are two different ways of setting the colour of text – using colour names or colour hex values. The HTML specification provides for a basic set of 16 colour names

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

but most PC users can display millions of colours. A good resource to find the codes and names of colours can be found at [1]

<P style="color: aqua">This is a light-blue-ish</P><P style="color: red">This is red</P>
<P style="color: #8A2Be2">This is violet</P><P style="color: #D2691E">This is chocolate</P>

HINT: Notice how the word "color" is spelt in American English?

TIME TO PRACTICE
- Using your long text web page, experiment with using colours in your page, perhaps combining them with heading tags to have coloured headings. Remember not to use blue or purple with underlined text.

Combination Font Changes

It was shown earlier how multiple tags could be used to combine effects on text. In a similar fashion, it is possible to combine multiple effects of the attributes of the font tag, however the way this is done is different for the inline CSS.

<P style="font-family: Georgia; font-size: large; color: green">This is the text to be displayed</P>

Notice how the different aspects of the change (family, size and color) are all separated with ";" symbols – this is critical or none of the changes will work.

TIME TO PRACTICE
- Using your long text web page, experiment with using AT LEAST ONE example of a multiple attribute font tag

Ready to move on?

A considerable number of new topics have been introduced in this chapter. It is VITAL that you experiment with these extensively before progressing. Understanding of the topics in this chapter is CRITICAL to your success in all areas of web development, as well as ALL of the assessments for this module.

If you're happy that you've practiced enough with the content in this section, try HTML:Hyperlinks

Related Pages

Difference between revisions of "HTML:Essentials"