Difference between revisions of "HTML:Essentials"
| Line 88: | Line 88: | ||
A paragraph tag is <nowiki><P></nowiki> and the end tag is <nowiki></P></nowiki>. The paragraph tag is one of the simple tags as we defined earlier, and can be used like the | A paragraph tag is <nowiki><P></nowiki> and the end tag is <nowiki></P></nowiki>. The paragraph tag is one of the simple tags as we defined earlier, and can be used like the | ||
| − | + | tag, in that we don’t have to specify attributes and values. | |
''[[HINT]]: Refer back to Chapter 2 for a refresher on names, attributes and values.'' | ''[[HINT]]: Refer back to Chapter 2 for a refresher on names, attributes and values.'' | ||
Revision as of 10:16, 29 August 2007
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 02 – The Basics Of HTML 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 <P> and the end tag is </P>. The paragraph tag is one of the simple tags as we defined earlier, and can be used like the
tag, in that we don’t have to specify attributes and values.
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 <BR> but there is no such thing as a </BR> - it does not exist because it is not needed.
For example, try the following:
This is my first line<BR>This is my second<BR>Here is a third
Matthew's Rule 2 – Use <BR> Sparingly
Excessive use of <BR> 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 <BR> 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 vs. STRONG
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 <B></B> tags. When a browser finds text that is within this tag pair, it makes the text appear bold.
Try this:
<B>This is bold</B>but this is not
TIME TO PRACTICE
Using your long text web page you are developing, use the bold tags to highlight some key words.
HOWEVER, as you will know from your lectures, the more modern approach to website development is to put the user in control for a number of reasons, such as different browser platforms, accessibility, usability, and so on. As such, there are alternative ways to achieving bold text that allows the user to control the experience. One of which is by using Cascading Style Sheets (CSS) – see the last chapter of this workbook, another is by using an alternative tag <STRONG></STRONG> - by using STRONG, you are defining what text you want to appear as stronger than normal, but allowing the user/browser to determine how to accomplish the task. This is a preferred modern method of writing web pages.
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.
Matthew’s Rule 3 – Use <STRONG> or CSS, not <B>
For the purposes of the exercises in this workbook and any related assessments, you are required to use either <STRONG> or CSS to control the strength of text, not the bold tag. Usage of the bold tag will reduce your grades.
Italic vs. <EM>
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 <I></I> tags. When a browser finds text that is within this tag pair, it makes the text appear italic.
Try the following:
<I>This is italic</I>but this is not
TIME TO PRACTICE
Using your long text web page from the previous page, use the italic tags to highlight some key words.
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 <EM></EM> tags.
TIME TO PRACTICE
Using your long text web page, replace the italic tags with <EM> tags.
Matthew's Rule 4 – Use <EM> or CSS, not <I>
For the purposes of the exercises in this workbook and any related assessments, you are required to use either <EM> 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 <U></U> as deprecated, meaning that browsers will likely still make text within the <U> 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.
Matthew's Rule 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 <STRONG> and <EM> 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:
This example shows how to <STRONG><EM>combine</EM></STRONG> tags to enhanced effect.
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>
Matthew's Rule 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 <FONT></FONT> 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 <P> we can control the font, size and colour by controlling the style attribute of the paragraph tag.
It’s important that we look at this closely, because this is the first instance that we are experimenting with Cascading Style Sheets (CSS). There is a full chapter on CSS at the end of this workbook, but we’ll closely look at these examples as they will be important from now on. 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
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.
Matthew’s Rule 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 Sizes
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 handheld 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 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 for 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.
Matthew's Rule 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.
Font Colors
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 greyscale 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 http://www.w3schools.com/html/html_colornames.asp
<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?
color
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 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.
Ready to move on?
If you're happy that you've practiced enough with the content in this section, try 04 - Hyperlinks
