Writing paragraphs | Inserting line breaks | Inserting horizontal rules | Creating Links | Inserting an image | Bold and italic text | Making lists | Quoting | Headings & titles | Special characters
Most of your main text will be enclosed by these tags.
<p>Paragraph text</p>
A paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph a paragraph
Another paragraph another paragraph another paragraph another paragraph another paragraph another paragraph
Notice how the <p> tag automatically creates a line break after the end of each paragraph
We can use the <br> tag to create
a line break i.e. it is equivalent to pressing the
return key on a word processor. The <br> tag is
an empty element, that is to say, no content
is inserted between the tags. In HTML it was
acceptable to leave empty elements unclosed, but in
XHTML, this is not allowed. For tags like
this - and others such as the <img> tag - the
tags must either be closed in the normal way, or you
can write it as a self-closing tag, by
placing a forward slash before the >. In this
case, we use <br /> (we could equally write it
as <br></br> with the same effect):
Some text here some text here some text here
Used <br /> to shift this to the next line
To create a dividing line, such as the ones we have used on this page,
to divide sections of text, we can use the hr tag.
This is an empty element, like the br tag, so
remember to either make it self closing <hr />,
or explicitly state the end tag: <hr></hr>
<p>
Some text here some text here some text here
</p>
<hr />
<p>
We made a horizontal rule to divide these paragraphs
</p>
Some text here some text here some text here
We made a horizontal rule to divide these paragraphs
<a href="http://stop-nestle.cjb.net">Stop
Nestle</a>
Here is a link to Stop Nestle.
Here is a link to <a href="http://stop-nestle.cjb.net"
title="Visit the Stop Nestle site">Stop
Nestle</a>
Using the title attribute makes the title text appear in a tooltip when you hover the mouse cursor over it. Try it on the following link.
Here is a link to Stop Nestle.
You can create a link for an e-mail address by using the mailto: syntax in the href attribute.
Send an email to <a
href="mailto:someuser@somedomain.com">the
webmaster</a>
This creates the output:
Send an email to the webmaster
Clicking this link will open your default e-mail application with the recipient address already insterted. You can also use the title attribute for e-mail links as above
<img src="rockchick.gif" alt="rock chick"
width="67" height="100" />
The src attribute tells the browser the url
to get the image from. You can either use a relative
url (as above) or an absolute url (e.g.
http://www.someserver.com/someimage.png). For
relative urls, you can go up one directory by adding
../ to the beginning of the url (e.g.
src="../rockchick.gif"). To go to a folder within
your current folder type the name and a slash (e.g.
src="mypictures/rockchick.gif"). Say you wanted to go
to a folder that was located back one from the folder
your XHTML document is, you could do
src="../homefolder/mypictures/rockchick.gif". You can
keep going back one folder by continually adding
../ (e.g.
src="../../../images/myimage.png"). To go straight to the
root directory (i.e. the furthest back you can go),
add a slash to the beginning of the url (e.g.
src="/samira/images/rockchick.gif").
This may seem confusing at first, but you'll get used to it with a
bit of practice! In the meantime, you can stick to
using absolute urls.
It is required in XHTML 1.0 to add the alt attribute. Omitting it is a syntax error. The reason for the alt attribute is to display an alternative text in case the image does not load. It is also useful for those with visual impairments (Screenreaders read out the alt text). You can also use the longdesc attribute to link to a text file with a longer description of the image. In this case you might write: "Image of a cartoon girl holding an electric guitar. She is wearing... etc etc"
The image width and height are measured in pixels. In this case the image is 67 pixels across and 100 high. You can change these values to make the image bigger or smaller. For example, doubling the width and height:
<img src="rockchick.gif" alt="rock chick"
width="134" height="200" />
Renders as...
... an image twice as large as the original.
Even if you do not wish to resize the image,
including these attributes results in the page
rendering correctly, even before the image has
loaded.
Just like the a element, you can add
the title attribute to images. The syntax is the same.
<p> <img src="rockchick.gif" alt="Keep on rockin'" title="Rock chick" /> </p>
Gives:
Some browsers render the alt attribute as
a tooltip when the user hovers over an image. Others, however, do not. You can
use the title attribute for most XHTML elements, including
<p> and <h1> elements, so that
a tooltip appears when a user hovers over these elements.
To make an image act as a hyperlink, simply enclose the
img tag in an a element.
<a href="http://silver-arrows.cjb.net"
title="Visit Samira's Homepage"><img src="rockchick.gif" alt="rock chick"
width="67" height="100" /></a>
Produces:
Adding border="0" to the img tag
removes the border from the hyperlinked image. We will look at an easier way
to do this in Lesson 6: Advanced CSS.
Try not to leave any whitespace between the a
tag and the img tag, otherwise the whitespace will also act as
a hyperlink. If you want the code to span over more than one line,
split the statement between attributes, like this:
<a href="http://silver-arrows.cjb.net"
title="Visit Samira's Homepage"><img src="rockchick.gif"
alt="rock chick"
width="67" height="100" /></a>
<strong>strong text</strong>
This is normal text...Here is strong text and here is normal again
<em>emphasised text</em>
Normal text emphasised text normal text
Unordered lists use bullet icons:
<ul>
<li>List item
1</li>
<li>List item
2</li>
<li>List item
3</li>
</ul>
You can change the type of icon by assigning type as
circle, square or disc.
e.g. <ul type="square">(This is a legacy HTML
attribute - more of this in the next lesson)
Ordered lists use numbers:
<ol>
<li>List item
1</li>
<li>List item
2</li>
<li>List item
3</li>
</ol>
You can change the type by assigning the type as I, A
or a.
e.g. <ol type="A"> would create a list ordered
as A, B, C etc etc (Again, this is a legacy HTML
attribute)
<blockquote>Quote text
here</blockquote>
O Beetle, how I weep to see
Thee lying on thy poor back!
It is so very sad indeed.
You were so shiny and black.
I wish you were alive again,
But Eliza says wishing it is nonsense and a shame.
The blockquote element is a HTML legacy tag (so you must specify the document type as transitional). It indents all new lines within its tags. There is a way to do this with CSS which we will look at in lesson 6. This will then enable your document to conform to XHTML Strict.
Level headers can be used to give each page and section a title. Use larger headers for more important titles, and smaller headers for labelling such things as sub-sections
<h1>Level 1 Header</h1> all the
way down to level 6:
<h2>Level 2 Header</h2>
<h3>Level 3 Header</h3>
<h6>Level 6 Header</h6>
Writing out the ampersand character (&) on its own in an XHTML document is a syntax error. This is because the ampersand character is used to write special characters, such as the ™ and © signs, accented letters (é, ñ) and so forth. The same applies for the > and < signs, because these are used to write XHTML tags. To place an ampersand in the document, it is necessary to adopt the following syntax: &. This results in &. To write out an é, type é (e acute). Similar expressions are used for other letters, e.g.
à = à (a grave)
To place the < and > signs use the following
syntax:
á = á (a acute)
ç = ç (c cedilla)
é = é (e acute)
è = è (e grave)
ñ = ñ (n tilde)
£ = £ (pound sterling sign)
€ = € (euro sign)
™ = ™ (trademark)
© = © (copyright)
> = >
< = <
Other special types of formatting are:
<del>Strikethrough
text</del>
Here is some normal text. Here is some
strikethrough text.
<sup>superscripted
text</sup>
Here is some normal text here is some superscripted text. Here is normal again
<sub>subscripted text</sub>
Here is some normal text here is some subscripted text. Here is normal again
XHTML 1.0 Quick Reference v1.0 © 2005 Samira Pandor