HTML

UNIT 3 FORMATTING TEXT

Back to the index| Previous | Next

Competences: To write a web page with with headers and paragraphs.

Contents: The tags b, i, br, hr, p, h1, h2, h3 ...
The style tag and the css syntax

The text in our web page can be mark out, by dividing it in paragraphs, giving headers to the sections or emphasizing some words or periods with appropriate tags.

The tag b (as bold)

We have seen this tag in the previous lesson!
Code Output
<b> Hello </b> to everybody!!!
 Hello to everybody!!!
This is a simple text (not formatted) This is a simple text (not formatted)
<b> This is a bold text </b> This is a bold text


The tag i (as italic)

As you can see, it's very simple!
Code Output
<i> Hello </i> to everybody!!!
 Hello to everybody!!!
This is a simple text (not formatted) This is a simple text (not formatted)
<i> This is a italic text </i> This is a italic text
<b;><i> This is a bold and italic text </i></b> This is a bold and italic text


We can use these tags in the web forum, too!!

The br and hr tag

Code Output
What is the output of this <br /> tag? What is the output of this
tag?
What is the output of this <hr /> tag? What is the output of this
tag?


The p tag (as paragraph)

The tag p marks off a section of text like a paragraph, by inserting a new line at the beginning and at the end of the paragraph.

Code Output
Simple text.
<p> This is a paragraph. It doesn't need the tag br! </p>		 Simple text.

This is a paragraph. It doesn't need the tag br!



The h1, h2, h3 ... tags

These tags mark off a text as a header of first, second, third .. level

Code Output
<h1> 1 </h1>

Header 1

<h2> Header 2 </h2>

Header 2

<h3> Header 3 </h3>

Header 3



Let's assign a personal style to the tags

We can assign a personal style to the p, h1, h2 ... tags or to the whole body too.
A good practice is to separate the page style from its contents: the information about the page layout can be inserted in the STYLE tag.
This tag can be setted in the HEAD section.

<head>
<style>.. </style>
</head>

In the STYLE tag, we must specify the selector, that's to say the element we want to assign to a personal style (the paragraph p, the header h1, the whole body...), then we have to specify (between curly brackets) some properties and their respective values.

Some propertyValues
font-sizelarge, medium, small, x-small...
font-familyArial, Verdana, Times New Roman....
text-alignleft, right, center

The sintax (CSS sintax) is: selector {property:value; property:value;.... }

An exemple
<head>
<style>
h1 {font-size:large; font-family:Arial; text-align:center; }
p {font-size:x-small; font-family:Arial; text-align:left; }
</style>
</head>

Interactive test

To practise, go on the site w3schools!

Write your web presentation!

  1. Open your file index.htm with a text editor.
  2. Write a short presentation of yourself or some other text
  3. Divide your text in paragraphs (tag p) and give it a header (tag h1).
  4. If you want, personalize your tags by a style (tag style in the head section).
  5. Save the modified file
  6. Put this file in your work area in the Comenius site
    (The old file will be deleted!)
  7. Write a message in the forum "Formatting text" to inform that your page is ready!


Ludovica Battista

Back to the index| Previous | Next