Guide to changing the appearance of a Web page with HTML and cascading style sheets (CSS)

tutorials4u.com

Home HTML Tutorial

Tutorials

T171 News. Tips

1 Required Programs

2. First Web Page

3 Page Appearance

4 Colour RGB System

4a Colour Names

5 Tables

6 Graphics

7 Linking.

8 Lists

9 Meta tags

10 Frames

11 Uploading

12 CSS

13 Scripts

14 Site Promotion

15 Site Design

16 Forms

99 Web Glossary

Information

Recommended Books

Editors and Authoring

Hosting

Link to us

Search engines

Useful Links

Software

Webmaster

Tools

Templates

3. Changing the Appearance of a Page

Page Contents - Changing the Appearance

Introduction
Elements	<B> Bold text <EM> Emphasised text <I> Italic text <Strong> Strong text
Heading Elements	<H1> Heading 1 <H6> through to Heading 6
Attribute	Exercise 1. Align Exercise 2 Emphasis Exercise 3. Headings
FONT Element	color size face Additional attributes Exercise 4. FONT Element attributes
Improve your Web Page	Exercise 5. Page01.htm

Lesson Introduction - Changing the Appearance

In this lesson you will learn how to change the appearance of your page. You will be able to:

Change the appearance of the text.
Changing the colour of the text.
Change the colour of the background.
Change the alignment.
Use headings.
Be introduced to Cascading Style Sheets (CSS)

So far the 2 web pages you have produced are displayed using the default settings of your browser. You will soon be learning methods of changing these default settings to something of your own choice.

Some of the methods that have been used for a long time to produce the effect that you require are being replaced by newer methods that use Style Sheets. The older methods are said to be deprecated, these will be pointed out.

Changing the settings are achieved by using elements

Search this site for a word or phrase. Place phrases inside "double quotes"

Adding additional elements such as the bold element. The following start and end tags are used  
E.g. This is bold text
Adding attribute to current elements.
Using a Cascading Style Sheet. ( CSS )

 Emphasised text, Italic text Strong text

John McGuinn

Top.

Elements

Element	Description / Comments / Examples	End Tags	Attribute
<B>	<B> Bold text </B> results in Bold text	Req.	title (IE only)
<EM>	<EM> Emphasised text </EM> results in Emphasised text, usually rendered in italics	Req.
<I>	<I> Italic text </I> results in Italic text	Req.
<Strong>	<STRONG>Strong text </STRONG> results in Strong text, usually rendered in boldface often identical to bold text.	Req.
There are 6 heading tags H1- H6. H1 is the most important, H6 the least. These tags can use for your pages headings and sub headings. If you wish to create a table of contents then these tags should be used in proper sequence. A Heading element includes all the font changes, paragraph breaks before and after, and white space necessary to display the heading.
<H1> <H2> <H3> <H4> <H5> <H6>	<H1>Heading 1 example.</H1> <H2>Heading 2 example.</H2> <H3>Heading 3 example.</H3> <H4>Heading 4 example.</H4> <H5>Heading 5 example.</H5> <H6>Heading 6 example.</H6> See below example results of 3 of these elements. Heading 1 example. Heading 2 example. Heading 6 example. Because I am using a Cascading Style sheet (CSS) I have had to roughly assimilate the result that you will obtain from using these elements.	Req.	align
<FONT> Deprecated	A FONT element is a container for the required element attributes.		color, face, id, point-size, size, style, weight.
<BASEFONT> Deprecated	The BASEFONT element sets the base font size for the page. This element is placed just after the BODY element. The default size is 3 <BASEFONT size="4"> will increase the font size from the default setting Later FONT size changes are relative to the BASEFONT size		size

Top.

Attribute

These are used in conjunction with suitable elements, extending their capabilities. They are placed within the opening tag of the element. The format used is

<TAGNAME attribibuteName="value">

Exercise 1. Attribute- align

Step 1. Create a blank Web page

Open Notepad or your HTML editor, and start a new file. Write the required HTML code to produce a blank Web page. As far as possible do this from memory. Refer to Required HTML Elements in Tutorial 2, if required

Step 2. Save as... tut3-exercise.htm.

Save as... tut3-exercise.htm to the folder my-web-pages.

Step 3. View tut3-exercise.htm in your Browser

Open your Browser and select file tut3-exercise.htm as demonstrated in Tutorial 2-View your page in a Web browser

Check that you have an empty Web page.

Step 4. Enter code

Enter code between the <BODY> </BODY> tags, as below. The use of copy and paste can be used if you like.

<BODY>

     <P>Align sample without using align</P>
     <P align="center">To align sample centre must use American spelling center</P>
     <P align="right">Align sample right</P>
     <P align="left">Align sample left</P>

</BODY>

Step 5. Save, Refresh and Check.

Save the amended file, Refresh the browser and check the display in the browser to ensure that every thing is working correctly. The result should appear as below. The border represents the edge of your browser window

Align sample without using align

To align sample centre must use American spelling center

Align sample right

Align sample left

If required, correct your code and repeat Step 5.

Step 6. Narrow the Browser window

Ensure the browser window is not maximised, then slowly drag the right edge of the window to the left, narrowing the window.

Watch the effect in the lines of text.
- Although the alignment is retained.
- The text will wrap onto the next line, as the window narrows.

This step demonstrates how your page can change appearance depending on the width of the Browsers window.

Users with different screen resolutions will see your page differently. Carefully laid out designs can be ruined if this is not taken into consideration.

Deprecated

Deprecated element or attribute are being replaced by newer methods, such as style sheets.

Deprecated elements may become obsolete in future versions of HTML. At the moment they are supported by Browsers to maintain backward compatibility.

The level of support for Style sheets varies from Browser to Browser.

The following elements are deprecated:
APPLET, BASEFONT, CENTER, DIR, FONT, ISINDEX, MENU, S, STRIKE, and U.

Exercise 2. Emphasis

Step 1.

Start with the HTML code from the end of the previous exercise.

Step 2. Elements- B EM I and STRONG

Emphasise the single words 'default', 'centre', right'' and 'left' using a different element each time from the following elements
B EM I and STRONG.

Step 3. Nesting Elements

Emphasise the single word 'American' nesting 2 elements as follows.

 <B><I>Word</I></B>

 <I><B>Word</B></I>

Do check that you have a first in, last out sequence. The start and end tags should pair up from the centre outwards. The following are wrong. Some browsers may be able to handle this error, and display as you intended. Others can be confused by tags in the wrong order.

 <B><I>Word</B></I>
 <I><B>Word</I></B>

Step 4. Save, Refresh, Check the result

Depending on the browser the result displayed by the B and strong element is probably the same, also the result of I and EM are probably the same.

Exercise 3. Headings

Step 1.

Start with the HTML code from the end of the previous exercise. Then add the following immediately before the end </BODY> tag

<H1>Heading 1 example.</H1>
<H2>Heading 2 example.</H2>
<H3>Heading 3 example.</H3>
<H4>Heading 4 example.</H4>
<H5>Heading 5 example.</H5>
<H6>Heading 6 example.</H6>

Step 2. Save, Refresh, Check the result

The display of the 6 headings will be at the headings default settings and will vary from large to small text. You will soon learn how to change the appearance of these headings using CSS, Cascading Style Sheets.

Top.

FONT Element.

The FONT element is Deprecated , click on the link to read the side panel if you do not know its meaning.

I learnt my HTML using the FONT element, therefore I'm am using FONT in these tutorials. Slowly I am learning more about CSS and changing over to using styles. Try to master CSS rather than relying on deprecated elements.

Many sites use the FONT element, and you should be know how it is coded for backward compatibility.

Fonts have the following attributes
color, face, id, point-size, size, style, weight.

Attribute color

The color attribute can be entered in 2 formats (Remember to use the American spelling)

Using a color name
Using an hexadecimal number

Using a color name:

A full list of color names is in tutorial-04a-colour-names.htm but the majority of these colours are not web colour safe. This is described in tutorial 4 Colour . In your experiments you can use the following which are the only web colour safe colour names.

red, blue, green, cyan, magenta, yellow, white and black.

Example:

 <FONT color="red"> Sample text </FONT>

Using an hexadecimal number

Using a hexadecimal red green blue code. Full details of this is given in tutorial 4 Colour
Example:

 <FONT color="#FF0000"> Sample text </FONT>

Attribute size

The size attribute can be entered in 2 formats

As an absolute format
Or as a size change.

Absolute format

Sample text 
Where aNumber is an integer in the range 1 to 7

Example:

 <FONT size="5"> Sample largish text </FONT>

Size change

Sample text 
Where aSign is either + or -
aNumber is a positive integer in the range 1 to 4 or a negative integer in the range 1 to 3

The + or - changes are relative to the browsers default size. The browsers default size can be changed by the deprecated BASEFONT element. BASEFONT does not alter the size of text within tables

Examples:

 <FONT size="+4"> Sample larger  text </FONT> 
 <FONT size="-2"> Sample smaller  text </FONT>

Additional FONT attributes that are available.

Attribute face

In a word processor you talk about changing a font, i.e. the name of the font being used. In HTML this is the face attribute of a font.

You may have a very long list of fonts available on your computer, but the user may only have a few fonts installed. The browser can only display the fonts that are on that computer.

It is best there fore to use the more popular fonts if you wish the viewer to see the font you have used.

The popular fonts are:

Arial
Verdana
Geneva
Georgia
Courier New
Times New Roman
Times

Example of using the attribute face

Text

Because of what I have said above, it is usual to give alternative choices for the face attribute, delimited by commas. Usually you end the list with one of the 2 generic font faces, serif or sans-serif. This is done as follows.

Text

In this example the browser will use the Arial font if installed, else it will try Verdana.

**More FONT attributes**
Attribute	Comment
id	A case sensitive distinguishing identifier. Can be used with a style rule
point-size	NN 4 not IE. Use style sheets instead.
style	Use with style sheets
weight	Better to use style sheets

Exercise 4. FONT Element

Remember that the FONT element is Deprecated so do not spend too much time on it.

You can also combine attributes within an element, so try the following

 <FONT size="5" color="red"  face="Arial, Verdana,  sans-serif"> 
 Sample largish text </FONT>

Continue with the file you produced in Exercise 3, and use the font element and its attributes to alter the size and colour of some of the text in the align section. Do not use the FONT element on the heading elements.

As usual Save, Refresh and check the result.

When you are happy with using the Elements and attributes in this tutorial, save your file.

Top.

Improve your Web Page

Exercise 5. Page01.htm

Open the file page01.htm that you produced in Exercise 3 Tutorial 2.

Use the Elements and attributes that have learnt about in this tutorial and improve the look of your page. Concentrate on using the heading elements to create a structure to your page. You will probably only need to use heading 1 and 2, and possibly 3. It will depend on the layout of your page.

Emphasise a few words or phrases as required, with B, EM. I and strong elements.

Get into the habit of saving on a regular basis. It is frustrating to lose work if your computer crashes.

Top.

Leisure Time - book your holiday or flights with our UK sponsors

			Last minute	Save 10%
Book a Thomas Cook holiday	Book a Thomson holiday	Book a Portland Holidays Direct	Last minute	Save 10%

Thomas Cook flights	Thomson holiday flights	Flybe Cheap flights	British Airways flights	My Travel flights