time it is of the utmost imp ortance for the person writing the code. Notice how the start
and end tags of nested elements “see” each other. This “visibility” is made possible by
indenting the content of an element. Th at way, the structure of th e document stand s
out more clearly before th e writer. In such a small document the advantage may not be
evident at first glance, but believe m e, when a document’s size reache s several hundred
lines, you want to have some order in y our code.
Another friendly feature that helps programmers find their way through the chaos
of computer code are comments. In HTML, comments are enclosed in a so-called
comment tag, which starts with a left angle bra cket, an exclamation mark, an d two
hyphe ns (<!– –), and ends w ith two hyphens and a right angle bracket (– –>). For
example:
<!-- This is a comment and will not be visible in the browser. -->
Comments are completely ignored by the browser but quite useful for writing a short
human-readable summary of code, for example. With p roper c omments, you don’t
need to decipher the code every time you need to upgrade it. Even if it is your own
code, human readable remarks will help you trem endously to understand it later. An-
other practical use of comments is to temporarily switch off parts of code during test-
ing and experimenting.
If yo u work in a team, or pla n to make your co de public, it is a go od idea to include
your name, contact information, and a licensing notice in comments at the to p of y our
code. That way, p eople will have a chance to con ta ct you in case they have questions
about the code.
While comments ar e not visible in the browser window, be aware that they are acces-
sible to the web page viewer through the
View page source menu comma nd. So, don’t
use c omments to wr ite filthy remarks about your boss or mother-in-law.
1.5 Formatting a Page
Professor: When I was a little b oy, my mother used to read me fairy tales fro m the
book by Joseph Jacobs, an Australian folklorist, and I still can’t do without them.
That’s why we’re going to mark up the beginning of The Rose-Tree as our next exam-
ple. We will ne ed three more elements f or the job: a main heading (th e <h1> ele ment)
for the title, an image (the <img> element) to include a fancy decorative capital letter,
and quotes (the <q> elemen t) for quoted speech.
In HTML, you can use six different levels of headings defined by the elements from
<h1> to <h6>. <h1> defines the most importa nt heading while <h6> defines the least
important heading. Since our fairy tale on ly has on e heading, we will of course use
the <h1>:
<h1>The Rose-Tree</h1>
With the image element, as you might have guessed, you can include a picture into a
page. You do tha t by specifying the file in which the picture is stored using the src
8 Meeting 1. Content and Structure
attribute: the value of the src attribute is th e name of the file. Note that <img> is
an empty element so it only has the opening tag. If the imag e is not a key part of
the content, then it is a go od idea to include the al t attribute as well. This attribute
provides a textual equivalent to show in case the image cannot be displayed or until it
is downloaded.
Our fairy tale begins with a letter T. You can use some graphic software to draw a
decorative T and save it to the image file named
T.jpg. The final code for our image
element looks like this:
<img src="T.jpg" alt="T">
Because the decorative capital letter is not an essential part of the content, I provided
alternative text, which is obviou sly the letter T.
Incidenta lly, not all image fo rmats are supported by browsers. The most commonly
used formats that are supported are
.gif , . jpg and .png. In the above code, I used only
the file name without any path as the value of the s rc attribute. Tha t means that the
file r esides in the same folder as the HTM L file that contains the above <img> element.
Should the ima ge file be stor ed e lsewhere, I would have to prepend the correspon ding
path to it.
The <q> element is used to represent some quoted content and is usually rendered as
a pair of quotes around the marked c ontent.
OK, le t’s p ut it all together. The following code goes into the <body> element:
<!-- From the e-book English Fairy Tales, collected and
-- edited by Joseph Jacobs. Belongs to the public domain.
-- Source: www.authorama.com
-->
<h1>The
Rose-Tree</h1><p><img src="T.jpg" alt="T">here
was once upon a time a good man who had two children:
a girl by a first wife, and a boy by the second. The girl was
as
white as milk, and her lips were like cherries. Her hair
was like golden silk, and it hung to the ground. Her brother
loved her dearly, but her wicked stepmother hated her.
<q>Child,</q> said the
stepmother one day, <q>go to the grocer’s shop and buy me
a pound of candles.
</q> She gave her the money; and the little girl
went, bought the candles, and started on her return. There
was a stile to cross. She
put down the candles whilst she
got over the
stile. Up came a dog and ran off with the candles.</p><p>She
went back to the grocer’s, and she got a second bunch.
1.5. Formatting a Page 9
She came to the stile, set down the candles, and proceeded to
climb
over. Up came the dog and ran off with the candles.</p>
<p>
She went again to the grocer’s,
and she got a third bunch; and
just the same
happened. Then she came to her stepmother crying, for she had
spent all the money and had lost three bunches of candles.</p>
Deliberately, I made a me ss out of the text and tags so that the structure of the docu-
ment is not obvio us at first glance. The rendering, however, is quite appea ling.
Maria: I notice that the browser doe s not obey your original text for matting.
Professor: Well
.... Yes and no. Actually it ob eys the rules per fectly, it’s just that the
rules are a little different from what you might have expected.
The first thing you may have no ticed is that the browser ignores space s, tabs and
newlines. OK, it does not ignore them comp le te ly. For example, if there is a separation
between words, it is re placed by a sing le space regardless of w hat I have actually put
there: a space, tab, newline, or even more of them. A rule of thumb is that spaces,
tabs, and newlines are ign ored unless they represent the only separation between two
entities—words, for example. Even then they are replac ed by a single space. If there
exists some other separator like, for example, a tag or equals sign (=), then spaces
are not needed at all and it doesn’t matter whether they are there or not—the result is
10 Meeting 1. Content and Structure
always the same.
That said, there are a few cases where you should be careful about spaces:
• Do not put any spaces before the element n ame in the opening or closing tag. It
would be wrong to write < p> or < /p> or </ p>.
• Do not put any unnecessary spaces between double quotes when writing at-
tribute values. In that sense, lang="en" is quite different from lang=" en "
while lang = "e n" is still O K while it does not change the meaning.
• You should always put spaces between two attributes of the same ele ment, even
when there’s a quotation mark at the end of a value. For examp le , it would be in-
correct to write <img src="T.jpg"alt="T"> instead of <img src="T.jpg"
alt="T">.
It is important at this point that you start seeing HTML as a language that gives a
document a structure and meaning rather than a specific look. How a page looks is
taken care of b y the browser. Later, we will control the document’s look by means of
CSS.
Mike: I have a question. If spaces and newlines do not affect the text formatting, how
can you tell the browser to start, for example, some text on a new line?
Professor: This kind of formatting is implied in the element meaning or semantics.
For example , it is usual practice that a head ing or a paragraph is displayed as a block
of text occupying the whole line—nothing else can be positioned on the same line in
a browser window. In other words, a line break is inserted before and after a hea ding
or paragraph. We say that such eleme nts have a block display. On the other hand, an
image can ha ppily inhabit a line to gether w ith other elements, if there is enough space,
of co urse. Su ch elemen ts are said to have an inline display.
You’ll see later that it is possible to change a type of display for an element using
CSS. Doing that, however, d oes not change the intr insic HTML categoriz ation of el-
ements. For this reason we will use the terms inline element and block element to
denote elements that have an inline or block display by default.
Mike: But what if I simply want to break a line without making a paragraph or using
any other block element? Is there a way to do that?
Professor: There’s an element for breaking a line called <br>, which is short for
break. Paradoxically, that eleme nt should not be used for breakin g lines unless you
are bre aking lines because you want to convey some meaning. Typical examples are
breaking lines in poems o r postal addresses. I f you want to break a line because
you are introducing a new paragraph, then yo u shouldn’t use the <br> element. A
paragra ph is a meaning by itself and doesn’t need other elements to promote lin e
breaks. If you don’t like the amount of space between paragraphs, however, that’s not
a matter of semantics. You ta ke care of stuff like that by using CSS.
Mike: I’ll try to remember that, but I think I ’ll have to wait to get some experience to
fully understand it.
1.5. Formatting a Page 11
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.