In this lesson you will learn how to change the appearance of your page by some very east to use HTML Tags.
- Exercise 1. Heading, Sub headings & Paragraphs
- Exercise 2. Emphasis
- Change the appearance of Heading, Sub headings & Paragraphs with Inline CSS Styles (Cascading Style Sheets)
- Changing the colour of the text.
- Change the colour of the background.
- Change the alignment.
- 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. Some of the older methods are said to be Deprecated these will be pointed out.
HTML Tags Used
<h1> <h2> <h3> <h4> <h5> <h5> <p>
- Open your index.html file you made in the last Tutorial in your web or text ediitor
- Delete the following line
<p>Your Page CONTENT goes here and is in a paragraph</p>
- In it's place insert the following several lines. Ensure that these lines are placed between the opening and closing Body tags
<h1>Heading 1 example.</h1> <p>This is in a paragraph</p> <h2>Heading 2 example.</h2> <p>This is in another paragraph</p> <h3>Heading 3 example.</h3> <p>This is my third paragraph</p> <h4>Heading 4 example.</h4> <p>Here is the fourth paragraph</p> <h5>Heading 5 example.</h5> <p>Followed by the fifth paragraph</p> <h6>Heading 6 example.</h6> <p>Finally the last paragraph</p>
- You can either copy & paste the above or type it into the editor
Tip Frequently Save your Files as you amend them, so that you do not loose your work if your computer crashes.
- View the index.html file in a browser.
Tip leave the browser window open, then you only have to refresh the browser after you modify your source code and save it.
See location of Refresh button in IE Browser, Chrome Browser or Firefox Browser
- Check your results with the image below
View Result of Exercise
Reduced size image of Result
The headings and paragraphs are at there default settings for text colour, font used, text size and wether bold or normal.
Note how the heading sizes become smaller and are displayed in a bold style. Headings 5 & 6 are normally smaller than the default paragraph size.
Below you will start to learn how to change these default setting
- There are
6 heading tags <h1>, <h2>, <h3>, <h4>, <h5> and <h6>
- By default the browsers dislaythe text is in a bold styling. <h1> has the largest text size & <h6> the smallest.
- The use of these tags helps with SEO, Search Engine Optimisation which helps with your page appearing higher in the search engine results after you have submitter your site to the search engines.
- <h1> to <h6> tags are Block tags, that means that they
- Appear on there own line
- Have a built in space before (above) and after (below) the element
- <h1> is the most important heading and can be regarded as the pages Main Heading.
- Only one <h1> tag should be used on a page. Using more that one is reguarded as Spam by the Search Engines
- The <h1> tag should contain important key words and / or key phrases for that page
- Example the <h1> tag for this page is
<h1>HTML & inline CSS styling, Page Appearance</h1>
<h2> through to <h6> Subheadings
- <h2> is the main sub heading
- Any number of h2> through to <h6> Subheadings can be used on a page
- You use should these tags in logical sequence.
- <h5> & <h6> tags are not used very often.
Start with the HTML code from the end of the previous exercise.
Step 2. Elements- B EM I MARK & STRONG
Emphasise the single words 'default', 'centre', right'' and
'left' using a different element each time from the following
B EM I and STRONG.
Step 3. Nesting Elements
Emphasise the single word 'American' nesting 2 elements as follows.
<i><strong>Word</strong></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.
Step 4. Save, Refresh, Check the resultDepending 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.
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 for h1 to small text for h6. You will soon learn how to change the appearance of these headings using CSS, Cascading Style Sheets.
The 2 terms Tags & Elements are often interchanged
<h1> Main Heading only use one on a page
<h2> to <h6> Subheadings
<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>
<i> Italic text </i> results in Italic text
Use the <em> tag rather than the <i> tag
In HTML 4.01, the <strong> tag defines strong emphasized text, but in HTML5 it defines important text. It is usually rendered by browsers in a Bold Font
<strong>This is Important text</strong>