Euro PC Solutions BlogHTML - Organising Text In XHTML

HTML – Organising Your Text

Right, so now you have learnt how to make a white page but I think it would be nice to do a bit more.

The first step for filling in your site is to write the text that needs to go in…to give it content. As you will see writing text is very easy, but we need to separate the different kinds of text.

In this chapter we will see :

How to write paragraphs
How titles work
How to make certain words more important
And finally, we will see some of the less used tags that you still need to know

Paragraphs

So, you want to put text in your web site but you don’t know how ?
In XHTML things are quite simple : everything works in paragraphs. Each paragraph goes between the tags <p> & </p> (p for paragraph )

Below is an example of some text :

<p>Hello and welcome to my site ! This is my first test as I am learning how to code in HTML. At the moment the page is a bit empty but come back in 2 or 3 days when I've learnt a bit more and you might be surprised !</p>

<p> means the beginning of a paragraph
</p> means the end of a paragraph

As I told you in the last chapter the content of the site is written between the tags <body> and </body>
So now we just need to put our paragraph between those two tags and we’ll be able to see our text in our page !

I’ll retake our code from last time and add the paragraph :

<!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 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 as I am learning how to code in HTML. At the moment the page is a bit empty but come back in 2 or 3 days when I've learnt a bit more and you might be surprised !</p>
</body>
</html>

Recopy the code and try it, you will see the result.
OK, I admit it’s nothing special but it’s a good start
Let’s not stop there. We’re going to see how to start a new line now in XHTML. It seems simple enough but it doesn’t quite work like your every day text editor.

Starting A New Line

In XHTML if you press on the “Enter” button, it won’t create a new line. Try the following code :

<!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 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 as I am learning how to code in HTML.
     At the moment the page is a bit empty but come back in 2 or 3 days when I've learnt a bit more and you might be surprised !
     </p>
</body>
</html>

And as you may notice nothing has changed ! It’s exactly the same as before !
However as you might guess, there is a way to do it. In any case, no matter how many times you press “Enter” nothing will be changed

In fact, if you want to write a second paragraph, you simply need to start a second <p> tag.
Your code will then be completely filled with lots of paragraph tags !

An example :

<!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 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 as I am learning how to code in HTML.
     </p>
     <p>At the moment the page is a bit empty but come back in 2 or 3 days when I've learnt a bit more and you might be surprised !
     </p>
</body>
</html>

As you can see this does work but you jump a line.

But what if I just want to start a new line instead of jumping a line ?

Well, you might already have guessed…there exists a tag especially for this !
It is a solo tag to say that we want to start a new line : <br /> which means line break. You must necessarily put this tag inside a paragraph, so I don’t want to see anybody putting <br /> outside of <p></p>.
Here is the code that will give us the presentation we wanted :

<!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 site !</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
     <p>Hello and welcome to my site !<br />
     This is my first test as I am learning how to code in HTML.
     </p>
     <p>At the moment the page is a bit empty but come back in 2 or 3 days when I've learnt a bit more and you might be surprised !
     </p>
</body>
</html>

You are allowed to put several <br /> tags simultaneously inside a paragraph but once you know CSS this won’t be necessary.

Right, a quick summary :

<p></p> : organises the text into paragraphs.
<br /> : starts a new line

Now that we know how to write paragraphs, let’s see how to create headings.

Headings

Writing paragraphs is good, but inserting headings (or titles) is even better
In XHTML, we’ve been spoilt, we’re allowed to use six different levels of headings.
By that I mean we can say, “This is a very important title”, “This title is a bit less important”, “This title is even less important” etc…So we have 6 different title tags that we can use :

<h1> </h1> : means “very important heading”. Generally this is used for the name of the web site.
<h2> </h2> : means “important heading”. Use this to give titles to your different pages and main categories.
<h3> </h3> : the same but a bit less important. (Call it a subtitle if you want)
<h4> </h4> : even less important heading.
<h5> </h5> : unimportant heading
<h6> </h6> : really unimportant heading

Don’t get these confused with the tag <title> ! <title> is used to show the title of the site in the browser. Headings are used to create titles to be shown in the page.

Don’t be overwhelmed by all the choice of headings. Mainly I only use the <h1>, <h2> and <h3> tags & rarely the others (I don’t often need six different levels of titles ). Your browser will show the important titles in very big, & the less important ones a bit smaller… Try making a web page with titles to see what it gives :

<!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 site !</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
     <h1>Very Important Heading</h1>
     <h2>Important Heading</h2>
     <h3>Sub Title</h3>
     <h4>Not Too Important Heading</h4>
     <h5>Unimportant Heading</h5>
     <h6>Very Unimportant Heading</h6>
</body>
</html>

And now, just to be nice I’ll give you an example with some titles in a page with paragraphs

<!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 site !</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
     <h1>Welcome to Euro PC Solutions !</h1>
     <p>
          Welcome to my site : Euro PC Solutions.<br />
          What do Euro PC Solutions do ?
     </p>

     <h2>Lessons for beginners</h2>
     <p>
          Our blog gives programming lessons for beginners, you don't need any previous knowledge to read our lessons.
     </p>
</body>
</html>

And there you go, now you’ve got a proper web site !

But I want my titles to be underlined, in red & aligned in the centre !

We’ll sort all that out in the second part of the lessons when we learn CSS. The important thing is to remember that <h1> doesn’t mean “Times New Roman, size 16″ but “Very Important Title”.
With CSS, you will be able to say “I want my titles red, underlined & aligned in the centre”

Making Text Stand Out

If you would like to make several important words stand out in a paragraph HTML has included two tags.

The first one lets the words stand out “a bit” from the rest of the paragraph
The second one makes them stand out a lot more

We will see what these tags are & how to use them.

Making Words Stand Out A Bit

To make your text stand out “a bit” we can use the tags <em> </em>. They’re very easy to use, you just put your text that you want to stand out between the 2 tags, and that’s it !
I’ll use the same code as previouslly with some text that I want to stand out :

<!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 site !</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
     <p>Hello and welcome to my site !<br />
     This is my first test as I am learning how to code in HTML. At the moment the page is a bit empty but <em>come back in 2 or 3 days</em> when I've learnt a bit more and you might be surprised !
     </p>
</body>
</html>

Try the code. As you will notice, <em> puts your text in italic. So you can use this tag to make your text go italic.

Making Words Stand Out A Lot

To make text stand out a lot we use the tags <strong> </strong> which means important text. These 2 tags are used in exactly the same way as <em>

I’ll use the same code as before but with <strong> this time :

<!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 site !</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
     <p>Hello and welcome to my site !<br />
     This is my first test as I am learning how to code in HTML. At the moment the page is a bit empty but <strong>come back in 2 or 3 days</strong> when I've learnt a bit more and you might be surprised !
     </p>
</body>
</html>

Once you’ve tested the code you will notice that <strong> makes your text bold

When should I use <em> and when should I use <strong> ?

Really that’s up to you. It depends on the importance of the text you’re promoting. If it’s “a bit” important use <em>, and if the words are very important use <strong>
It’s like with the headings, everything just depends on the importance of the words

A Few Rare (but useful !) Tags

I know that you’ve already learnt quite a few new tags in this chapter but you will need them if you want your site to be a success.
Even though they may seem quite difficult to remember, it’s really quite easy, and with a bit of practice you will remember and use them without any problems It will also help if you write the codes that I give you to test instead of copying & pasting.

Just try to remember “h” like “heading”, “p” like “paragraph” etc…

If the tags I have shown you are used very often (headings, paragraphs, give importance to text…), the ones I am now going to show you are used more rarely.
As they are more rare you don’t need to remember them by heart (even though you should try )

I am not going to show you the complete list of tags, only a few as the list will go on & on. However I will make a cheat sheet later for you

We will see the following tags :

Superscript & Subscript
Quotations
Acronyms

And I find that that’s more than enough

Putting Text Into Superscript or Subscript

To put words into superscript the tags are <sup> </sup>
These tags will make the text go a bit higher and are used in the same way as before.

<!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 site !</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
     <h1>A Bit Of History...</h1>

     <p>
          <em>Did you know ?</em><br />
          XHTML is the language that allows us to make web sites at the beginning of the 21<sup>st</sup> century.<br />
          At the end of the 20<sup>th</sup> century HTML was being used but was replaced with XHTML.
     </p>
</body>
</html>

Try it and you’ll see that the text is higher.
To make the text go lower we use subscript. The tags are <sub> </sub>
Right from now on I’m not going to give the complete code, just the bit that we’re interested in (it’s starting to get a bit repetitive )

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

Right I admit that subscript will probably only be any use to mathematicians, I couldn’t find any other use for it However there may be some maths lovers following these lessons

Quotations

There are 2 types of quotations :

Short quotations inside paragraphs : short quotations are put inside a paragraph. You surround your quotation with <q> </q>. It works in exactly the same way as <em>, <p>, <strong> etc… Here’s a short quotation :
```
<p>Do you remember the famous quotation by Neil Armstrong when he touched down on the moon ? <q>That's one small step for [a] man, one giant leap for mankind</q>. He said it on 20 July 1969</p>
```
On the more recent browsers such as Firefox the quotation is surrounded by apostrophes. However on some of the older versions of Internet Explorer (7 & below I think) nothing in particular happens. Don’t worry though, we can sort this out with CSS.

Long quotations outside paragraphs : If you need a long quotation, you must use the tags <blockquote> </blockquote> You put the paragraph tags inside the quote like this :

<!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 site !</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
     <h1>Rain Rain Go Away</h1>
     <p>Rain Rain go away is a <em>nursery rhyme</em> :</p>
     <blockquote>
          <p>
               Rain rain go away,<br />
               Come again another day.<br />
               Little Johnny wants to play<br />
               Rain rain, go to Spain,<br />
               Never show your face again !<br />
          </p>
     </blockquote>
</body>
</html>

When you’ve tested this code you’ll notice that long quotations are slightly indented to the right.

So <q> and <blockquote> are both used to insert quotations. But what’s the difference between them ?

In XHTML there are two types of tags :

Inline Tags : These tags are used inside a paragraph. They are mainly <strong>, <em>, <q> etc…
Block Tags : These tags are used to structure the page using “blocks”. The first one we learnt was <p> but there are also the heading tags <h1> <h2>, <blockquote>. For this reason you must not put a heading or long quotation inside a paragraph. Each element creates a new block.

Acronyms

An acronym is a group of initials used to shorten a long name, for example XHTML, FBI, CSA etc…

The problem with acronyms is that we don’t always know what they mean. So that visitors know what you’re talking about put your initials inside the tags <acronym> </acronym>
Another new thing is the use of “title” as an attribute. Title lets us show a description in a small box.

As always an example is better than loads of talk

<p><acronym title="eXtensible HyperText Markup Language">XHTML</acronym> is the language used to create web sites.</p>

As you can see when you pass your cursor over the initials the full name appears

This chapter was a lot longer than the other ones but truly is a solid base to go from to learn XHTML.
I know there are a lot of new things to remember, but they are necessary. With a bit of practice, you’ll be using these tags without any problems & will have to think less about the names of the tags

If you find that there is too much to remember just take your time, there is no need to rush on to the next chapter. And if you still can’t remember everything just leave the last three tags to one side for the moment. In any case I’ve made a chapter with all the tags at the end of the lessons.
However you do need to know how to :

Structure the page using paragraphs and how to start a new line
Use headings (according to their importance : <h1>, <h2>…)
Make words stand out using <em> (a bit important) & <strong> (very important)

If all this is clear to you, and you can remember most of the tags, then you can go on to the next chapter without any worries

Euro PC Solutions Blog