Web Page Appearance HTML Inline Element CSS styling Tutorial

Page Menu.

Introduction

Exercise - Headings, Sub headings & Paragraphs

Headings, Sub headings & Paragraphs Explanation

<h1> Heading 1

<h6> through to Heading 6

Elements

<strong> important text

<EM> Emphasised text

<i> Italic text

<mark> Highlight text </mark>

Emphasis Exercise 2

Introduction - Changing the Appearance of a Web Page

In this lesson you will learn how to change the appearance of your page by some very east to use HTML Tags.

The

1. Exercise 1. Heading, Sub headings & Paragraphs
2. Exercise 2. Emphasis
3. Change the appearance of Heading, Sub headings & Paragraphs with Inline Element CSS Styles (Cascading Style Sheets)
   1. Changing the colour of the text.
   2. Change the colour of the background.
   3. Change the alignment.
4. 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.

John McGuinn

Exercise 1 - Heading, Sub headings & Paragraphs

HTML Tags Used

<h1>  <h2>  <h3>  <h4> <h5>  <h5>  <p>

1. Open your index.html file you made in the last Tutorial in your web or text editor
2. Delete the following line
   <p>Your Page CONTENT goes here and is in a paragraph</p>
   
3. 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>     

4. You can either copy & paste the above or type it into the editor
5. Save 
   Tip Frequently Save your Files as you amend them, so that you do not loose your work if your computer crashes.
6. 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
7. Check your results with the image below 

View Result of Exercise

Explanation Headings & Sub Headings <h1> to <h6>

• There are 6 heading tags <h1>, <h2>, <h3>, <h4>, <h5> and <h6>
  
  
• By default the browsers display the 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 Element tags, that means that they
  • Appear on there own line
  • Have a built in space before (above) and after (below) the element

<h1> Main Heading

• <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 regarded 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 Element 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.

Exercise 2. Emphasis

Step 1.

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 elements
B EM I and STRONG.

Step 3. Nesting Elements

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

 <strong><i>Word</i></strong>

or

 <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.

 <strong><i>Word</strong></i>
 <i><strong>Word</i></strong>

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.

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.

Tags & Elements used on this page

The 2 terms Tags & Elements are often interchanged

<b>

Example
<b>This is bold text</b>

To emphasize important text use the <strong> tag rather than the <b> tag. The actual visual look of the 2 elements is identical in most browsers, but has a difference to search engines.

End Tag Required

Inline Element

<em>

<em> Emphasised text </em> results in Emphasised text, usually rendered in italics

End Tag Required

Inline Element

<h1> to <h6>

<h1> Main Heading only use one on a page
<h2> to <h6> Subheadings

Example
<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>

End Tag Required

Block Element

<i>

<i> Italic text </i> results in Italic text

Use the <em> tag rather than the <i> tag

End Tag Required

Inline Element

<mark>

<mark>This is highlighted text</mark>

End Tag Required

Inline Element

<strong>

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

Example

<strong>This is Important text</strong>

End Tag Required

Inline Element