[Site map] You are here --- > Newbies Paradise > Tutorials > Official > Website > Reading a tutorial

Managing text

	Author : M@teo21 Creation : : on 01/23/2007 11:13:23 AM Last modification: : on 01/30/2007 05:05:03 PM Rate and comment this tutorial Print this tutorial

Alright, the blank page is nice and all, but your website may not be very successfull if you leave it like that.

The first step to "fill" your website, is to write text in it... to give it content. We will see that writing text is very easy but there are different sorts of text you have to know about.
In fact, here is what we will be covering in this chapter:

How to write paragraphs.
How to use titles.
How to emphasize words inside your text.
Finally, we'll see a few "scarce" tags that you must know because you might need them some day.

Shall we? Come on, you will see, it's not that difficult!

Chapter Contents :

Paragraphs
Titles
Emphasizing text
Some uncommon (yet useful) tags
Quiz

Paragraphs

So you want to write some text in your webpage, but you do not know how to proceed?
With xHTML, things are pretty easy: it works with paragraphs. Each paragraph is located between the <p> and </p> tags (which stands for "paragraph").
Take a look at this piece of code, it is a small paragraph written in xHTML:

Code: HTML

<p>Hello and welcome to my website! This is my first test, so be nice please. I learn step by step how it works thanks to the Newbies Paradise's tutorials. For now, it's a bit empty, but come back in 2 or 3 days when I have learnt more stuff, I can guarantee you will be stunned!</p>

<p> starts the paragraph.
</p> ends it.

As I told you in the previous chapter, we write the content of our website between the <body></body> tags.
Setting our paragraph between those 2 tags is enough, and we will finally have our first Web page with text!

Thus, I take back exactly the same code seen before, and add my paragraph to it:

Code: HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD xHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
        <head>
                <title>Welcome to my website!</title>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        </head>
        <body>
                <p>Hello and welcome to my website! This is my first test, so be nice please. I learn step by step how it works thanks to the Newbies Paradise's tutorials. For now, it's a bit empty, but come back in 2 or 3 days when I have learnt more stuff, I can guarantee you will be stunned!</p>
        </body>
</html>

Try it!

Test it, you will see the result!
Well, OK, that is not heaven yet, but it is a good start.

There is still a long way to go, we are not going to stop at this point. We are now going to see something special in xHTML: how to make a line break. It may seem easy, but it does not really work like with a regular text editor...

Making a line break

With xHTML, if you push the "Enter" button, it is not going to create a new line as you are used to seeing.
So try this:

Code: HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD xHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
        <head>
                <title>Welcome on my site!</title>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        </head>
        <body>
                <p>
                   Hello and welcome to my site!
                   This is my first test, so be nice please. I learn step by step how it works thanks to the Newbies' Paradise's tutorials.
                   For now it is a bit empty, but come back in 2 or 3 days when I have learnt more stuff, I can guarantee you will be stunned!
                </p>
        </body>
</html>

Try it!

Well, that is the same text as before! Nothing changed!

However, as you probably guessed, there is a way to make it work. Nevertheless, typing crazy on "Enter" will not help.

Actually, if you want to write a second paragraph, using a second <p> tag is enough.
At the end, your xHTML code should be full of paragraph tags!

An example :

Code: HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD xHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
   <head>
       <title>Welcome on my site!</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body>
       <p>
           Hello and welcome to my site!
           This is my first test, so be nice please. I learn step by step how it works thanks to the Newbies Paradise's tutorials.
       </p>
       
       <p>
            For now, it's a bit empty, but come back in 2 or 3 days when I have learnt more stuff, I can guarantee you will be stunned!
       </p>
   </body>
</html>

Try it!

Yes, but what if I just want to have a line feed within a paragraph, and not make a line break?

Guess what: the "Create a line feed" tag exists!
It is a standalone tag, which just tells we need a line feed: <br />. You have to put it inside a paragraph, that means that I do not want to see any <br /> outside the <p></p> tags. Finally, here is the source code which displays what we want:

Code: HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD xHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
   <head>
       <title>Welcome to my website!</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body>
       <p>
           Hello and welcome to my website!<br />
           This is my first test, so be nice please. I learn step by step how it works thanks to the Newbies Paradise's tutorials.
       </p>
       
       <p>
           For now, it is a bit empty, but come back in 2 or 3 days when I have learnt more stuff, I can guarantee you will be stunned!
       </p>
   </body>
</html>

Try it!

Theoretically, you can put several <br /> tags in a row to create several line breaks, but you will not need to do this when you know about CSS.

Alright, is everything ok?

<p> </p>: to organize a text with paragraphs.
<br />: to perform a line feed.

Now we know how to write paragraphs, let's see how to create titles!

Titles

Writing text is good, but providing a title to your text is better.
We are lucky, xHTML provides six different levels for titles.
In other words, there are very important titles, important titles, less important titles, etc. So we have six different tags available:

<h1> </h1>: means "very important title". We usually use it for the main page's title.
<h2> </h2>: means "somewhat important title". You may use this one for your paragraph's titles.
<h3> </h3>: less important title (subtitle).
<h4> </h4>: not very important title.
<h5> </h5>: not important title.
<h6> </h6>: title of no importance.

Be careful: it is not the same thing than the <title> tag which displays the webpage's title into the browser bar! The <h1>, <h2>, etc. tags create titles inside your webpage.

Do not worry about the fact that many tags are available. Usually, you will only need the <h1>, <h2> and <h3> tags (you do not really need six title levels

). Your web browser displays the very important title with a large size font, the somewhat important titles with a smaller one, etc. Try to make a webpage with different titles to see how they look like:

Code: HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD xHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
   <head>
       <title>Welcome to my website!</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>

   <body>
       <h1>Very important title</h1>
       <h2>Somewhat important title</h2>
       <h3>Less important title (subtitle)</h3>

       <h4>Not really important title</h4>
       <h5>Not important title</h5>
       <h6>Really not important title</h6>
   </body>
</html>

Try it!

Here is an example of title tags used within a webpage (you will notice I do not use all of the six tags):

Code: HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD xHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
   <head>
       <title>Newbies Paradise</title>

       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body>
       <h1>Welcome to Newbies Paradise!</h1>

       <p>
           Hello and welcome to my website: Newbies Paradise.<br />
           What is Newbies Paradise?
       </p>

       <h2>Tutorials for beginners</h2>
       <p>
           Newbies Paradises contains tutorials for beginners which do not need any previous knowledge to be understood.
       </p>
       <p>
           This way you will be able to learn how to make a website or to build a 3D map with Hammer, etc.
       </p>

       <h2>An active community</h2>
       <p>
           You have a problem, there is something you do not understand in the tutorials? You need help to design your website?<br />
           Go straight to the forums! You will see that many people experience the same problems and you will surely find someone who will kindly help you.
       </p>
    </body>
</html>

Try it!

Here we are, you have just written your very first webpage!

Okay, but I want my titles to be red and underlined!

We will be able to do this when we use CSS (we will begin with this in the second part of the tutorial). Just keep in mind that <h1> does not mean "Times New Roman, size 16 pt", but "Important title".
With CSS, you will be able to say "I want my important titles to be red, centered, and underlined."

Emphasizing text

If you want to emphasize words within paragraphs, there are two xHTML tags you may use:

The first one make them look "a bit" emphasized.
The second one make them really look emphasized.

We will now see which are these tags and how to use them.

Emphasize a bit

You have to use the <em> </em> tags to emphasize words inside your text a bit. It is very easy to use: you just have to put the words you want to highlight inside the tags and it is done! I will take almost the same example as before and emphasize words inside:

Code: HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD xHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
   <head>
       <title>Welcome to my website!</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body>
       <p>
           Hello and welcome to my website!<br />
           This is my very first test, so <em>be nice</em> please. Right now I learn step by step how it works with the Newbies Paradise's tutorials. For now, it is a bit empty, but come back in 2 or 3 days, I can guarantee you will be stunned!
       </p>
   </body>
</html>

Try it!

As you can see, the text inside the <em> tag is set in italic. Thus, you can use this tag to display words in italic.

Emphasize

To emphasize words, we use the <strong> tag (I think you have already understood what it means :lol:

). It works exactly like <em>:

Code: HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD xHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
   <head>
       <title>Welcome to my website!</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body>
       <p>
           Hello and welcome to my website!<br />
           This is my very first test, so <strong>be nice</strong> please. Right now I learn step by step how it works with the Newbies Paradise's tutorials. For now it's a bit empty, but come back in 2 or 3 days, I can guarantee you will be stunned!
       </p>
   </body>
</html>

Try it!

When shall I use <em> and <strong>?

It depends on how important your text is. If it is a bit important, use <em> and if it is very important, use <strong>.
Same story we came through with titles: the problem is always how emphasized you want your text, it is all up to you.

Some uncommon (yet useful) tags

I know you had to learn many tags in this chapter but this is mandatory if you want to make a proper xHTML webpage.
In spite of what you may think, we memorize them quick enough!

Even though the tags we have seen so far are frequently used (paragraphs, titles...) the ones we are about to discover are rather scarce. Since they are less common, I will not ask you to remember all of them (even if that would be better.

)

I will not list all the tags we can use on text. You will find the whole list in the appendices.

Let's see the following ones:

Subscript or superscript text
Quotations
Acronyms

I guess that will be enough for now.

Subscript or superscript text

You have to use the <sup> tag to set words or letters as superscript text, so they are displayed higher than normal text:

Code: HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD xHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
   <head>
       <title>A short history lesson...</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body>
       <h1>A short history lesson...</h1>
              <p>
           <em>Did you know?</em><br />
           xHTML language is a language we use to make websites at the dawn of the XXI<sup>st</sup> century.<br />
           Before, at the end of the XX<sup>th</sup> century, we used HTML language, which is slowly phasing out to let xHTML take the lead.
       </p>
   </body>
</html>

Try it!

We use the <sub> tag to set words or letters as subscript text.
Well, from now on, I will not give you the whole xHTML code but just the part we are dealing with. Here, I will use subscript text in a mathematic formula:

Code: HTML

1
2
3

<p>
   x<sub>n</sub> = x<sub>n - 1</sub> - 2x<sub>n-2</sub>
</p>

Try it!

OK, this will only be useful to the ones who need formulas but who knows: we could have Maths geeks in the inside!

Quotations

There are two types of quotations:

Short quotations: we use them within a paragraph and specify the actual quote between the <q> tag, which works like <em>, <strong>, <sup> etc. For instance:

Code: HTML
1
<p>Do you remember the sentence Neil Armstrong said when he walked on the Moon? <q>That's one small step for man, one giant leap for mankind</q>. It was on July, 21<sub>st</sub> 1969...</p>
Try it!

With an up-to-date browser, there are quotation marks around the quote. That would be normal, but nothing happens with IE (test it!). The <q> tag does not display anything special with IE, but no worries, you will be able to choose how you want your quotations to look like with CSS.

Big quotations, out of a single paragraph: we use the <blockquote> tag to make big quotations. You have to set <p> tags inside the blockquote just like that:

Code: HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD xHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Welcome to my website!</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body>
       <h1>The Raven</h1>
              <p>This is the beginning of one of <em>Edgar Alan Poe</em>'s most famous poems:</p>
              <blockquote>           
              <p>
               Once upon a midnight dreary, while I pondered, weak and weary, <br />
               Over many a quaint and curious volume of forgotten lore, <br />
               While I nodded, nearly napping, suddenly there came a tapping, <br />
               As of some one gently rapping, rapping at my chamber door. <br />
               "'Tis some visitor," I muttered, "tapping at my chamber door - <br />
                           Only this, and nothing more."<br />
              </p>
              </blockquote>
   </body>
</html>

Try it!

Note that big quotations are slightly shifted on the right.

The <q> and <blockquote> tags are both used to quote, but what is the real difference between them?

Actually, there are two sorts of tags in xHTML:

Inline tags: these are tags we use inside paragraphs like <strong>, <em>, <q>, etc.
Block tags: these tags allow you to make "blocks" in your page. The first one we learned was <p> but there are also the title tags, <h1>, <h2>, <blockquote>... You may NOT put title or big quotation tags inside a paragraph. These tags are blocks.

Acronyms

An acronym is made of initials we use to shorten names like xHTML, FBI, NASA etc.

The thing with acronyms is that we do not always know what they stand for, so you have to set your acronym within the acronym tag and then we will have to use an attribute to explain what it means.

Here is an example:
Code: HTML

1	<p><acronym title="eXtensible HyperText Markup Language">xHTML</acronym>is the language we use to make a website.</p>

Try it!

As you can see, the acronym's definition appears when your mouse touches the word.

Note that Firefox underlines acronyms but IE does not do anything on them...

Quiz

Which of the following tags should be used to set a paragraph?

<q> </q>
<p> </p>
<paragraph> </paragraph>

Which one of the following tags creates a line feed within a paragraph?

<br />
<line />
<br>

How will something very important be displayed when enclosed within the "strong" tag?

Bold
Italic
Underlined

Which one of the following titles is the most important?

<h4>
<h5>
<h6>

Which one of the following tags sets superscript text?

<em>
<sub>
<sup>

Which one of the following tags is an inline tag?

<p>
<blockquote>
<sub>

Which one of the following tags is a block tag?

<em>
<acronym>
<h5>

What is the "title" attribute of the <acronym> tag used for?

To set a page's title.
To display the acronym's complete name.
To underline the acronym in dotted lines.

This chapter was a bit longer than the previous ones, but it really represents a solid and important basis for your learning curve of xHTML.
I know there are a bunch of new tags to memorize, but this is necessary. With some practice, it will come just like that and you will not have to do any kind of effort to remember a tag.

If you think it is too much for you, you may, for now, ignore the last part's tags (Some scarce (but useful!) tags). Nevertheless, it is mandatory:

To undertsand how a webpage is structured with paragraphs, and how to create line breaks.
To know how to use titles (depending on their importance, we use <h1>, or <h2> etc.)
To know how to highlight your text thanks to <em> (weak insistence) and <strong> (strong insistence).

If everything seems clear to you, you can go to the next chapter with no fear.