that is bec ause <bod y> is one of the sectioning roots. Theref ore, the main Untitled
Section you see in the above outline belongs to the <body> element, which acts as a
sectioning root for the entire page (provided there are no other sectioning roots). If
you want your page outline to have a title, then you should include an appropriate
heading element outside of any other sectioning element ( but inside the sectioning
root). At home, try to add a heading element outside of the <article> element in the
above example (either before or after it) to see what happens. As far as the outline is
concerned, it doesn’t matter where inside an element a heading appears as lo ng as it is
the first one—although it is a little weird to write the page title at the end, or even in
the middle of the document.
Maria: What ha ppens if you include more headings inside a section? Are they hidden
the same way as within the <header > element?
Professor: No. Each subsequent heading within a section implicitly starts a new
section. If a heading has a lower rank th an the one bef ore it, then a new section is
created, which is subordinate to the enclosing section. If, however, a h eading has
the same or higher rank tha n the one before it, the n a new section is created on the
same level in the hierarchy as the en closing section o f that heading. The en closing
section is closed even though its closing tag has not been reached yet because the
newly created section is on the same hierar chical level. Needless to say, that can cause
some confusion. I suggest that for homework you add some headings of different
ranks to different places in our last example and observe what happens. That way, if
you do n’t get lost, you w ill understand things a little better.
Maria: If a heading itself already starts a new section, why then do we need additional
explicit section definitions?
Professor: There are numerous reasons for that, many of which may n ot be quite
evident at first glance. Consider, for example, tha t a website reuses some material from
other sites, say in the form of a news feed. Such a process is called web syndication. It
can easily happen that an article from another web page is pulled under a heading with
a r ank that is lower than that of the include d article. Although the page will still work
fine, th e hierarchy will become disturbed, which could make the page more difficult for
search engines and other software to process. However, if you use HTML5 sectioning
elements, the hierarchy of the sections is defin ed by the placing of the sectioning
elements regardless of the ranks of headings within them.
2.5 Hyperlinks
Professor: All our d iscussion so far was related to the me aningful structure o f a sin gle
web page. A modern website is, h owever, more than just a single page. It is important
that yo u can build from different pages an order ed and logical structure where you r
visitor will promp tly and effortlessly find the r ight in formation. Th at’s an important
part of what we call web design, which is unfortunately not the main focus of our
course. We conc entrate more on how things are done technically, althoug h not in
complete oblivion of web design considerations.
Technically, for connecting one web page with another docu ment, we can establish a
26 Meeting 2. Building a Sound Structure
hyperlink by means of an <a> elemen t and its href attribute:
Another species endemic to
<a href="regions/antarctica.html">Antarctica</a> is the
<a href="species/emperor_penguin.html">Emperor Penguin</a>.
By default, the content of the <a> element with the supplied href attribute is usually
displayed blue and underlined, which is a sign for a visitor that it can be clicked. Apart
from that, the mouse pointer tur ns into a hand when hovered over it.
When a visitor clicks a hyperlink, the br owser loads a new web resource. The des-
tination of the hyperlink is specified as the string value of the href attribute in the
form of a uniform resource locator or URL, also known as a web address. The URL
can be given either in an absolute or relative form. An absolute URL requ ires the
complete path to the destination page to be given, starting with the communications
protocol (for example HTTP, HTTPS, or FTP). After the protoc ol name, there should
be a colon and double slash (://). Next comes the domain name, which identifies a
website. For example ,
www.taylorandfrancis.com or en.wikipedia.org. Fina lly, there
comes another slash and the full path of the linked resource:
protocol ://domain /path_of_the_resource
The URL of the we b page currently display ed in the browser window is usually shown
on top of the browser, inside the address bar.
This is an example of an absolute URL used as a hyperlink de stination:
<a href="http://www.w3schools.com/tags/att_a_href.asp">Read more</a>
Mike: What is a communications protocol?
Professor: This is a set of me ssage formats and rules for exchanging messages in
or be tween computer systems. A browser must know how to c ommunicate with its
environment in order to be able to load and display documen ts. In the same way,
people ho ld to certain protocol rules wh en communicating with other people. For
example, the Jap anese are very formal and have some strict rules about b ehavior in
public:
• Bow whe n greeting someone.
• Remove shoes before entering homes and restaurants.
• If someo ne offers you sake, drink it.
2.5. Hyperlinks 27
Do not tell anyone, but the last one is actually m y favorite.
Don’t worry, though. You don’t have to know much about protocols to use them in
your absolute URLs. You simply copy from the browser’s address bar the complete
address o f the page to which you want to establish a link to and the job’s done.
Mike: Now whe n you mention it, in your pen guin example I have noticed a word file
at the beginning of the URL in the browser’s address bar. Is that also a p rotocol name?
It also bothers me that there is no protocol name in your example code. Or did I miss
something?
Professor: Yes and no. Yes, FILE is a communications protocol and no, you didn’t
miss anything. My penguin example really doesn’t include a protocol because it is not
an abso lute URL.
The FILE protocol is shown in the address bar because we are accessing a file d irectly
through the computer’s local file system rather than thr ough a web server. Whenever
you load a lo cal file in the browser, you will see the FI LE protocol displayed in the
address b ar.
The reason wh y yo u don’t see any protocol name in the penguin exam ple source code
is that I used a relative URL in that example. A relative URL is used to locate a
resource relative to the context in which it exists. To help you understand a difference
between a relative and a n absolute URL, I will give you an example from everyday life.
If you want to write a letter to a friend in A ustralia, you have to write on the envelope
the who le address beginning with the friend’s name and ending with Australia. That
is an absolute address a nd will always be the same no matter where you are sending a
letter. However, if yo u already were in Australia, then the address probably wouldn’t
include Australia. And if you were just a few blocks away, then even the name of the
street wouldn’t be necessary to give someone instructions on how to reach your frien d.
You would simply say: “Walk down the street till the second traffic lights. Turn left
and walk on to the fourth house on the right side of the street and you’re there.” That
is a relative address be cause it is relative to your current location and would change if
you moved to another place.
There are two different types of relative URLs:
• A document-relative URL: If a URL begins with a directory (also called a folder)
or file name, then the URL is relative to the current directory; that is, the dir ec-
tory in which the currently displayed page resides. If, however, the document
contains a <bas e> metadata element, the n the URL is relative to the base URL
given by this element.
• A root-relative URL: If a URL begins with a slash (/), then the URL is relative
to the root directory of the website.
Maria: In the example with penguins on pa ge 27, the URLs beginning with a directory
name are relative URLs, a ren’t they?
Professor: That’s right. They are document-relative URLs.
Mike: I have noticed one more thing on the screensho t on page 27. After the protocol
28 Meeting 2. Building a Sound Structure
name, there are actually three slashes while yo u men tioned that there are o nly two.
Why is that?
Professor: As a matter of fact, there are two slashes. If a computer hosting a page is
the same computer that interprets the URL—which in our case it is—then a domain
name is localhost, which is usually omitted. A slash after a domain name, however,
should not be omitted. That’s why we get th ree slashes.
Back to relative URLs. Sometimes you will see a special notation in the form of a
dot (.) or a double dot (..) at the beginning of a document-relative URL. A single dot
explicitly represents th e current directory. In that sense, the next code is equivalent to
our previous penguin example from page 27:
Another species endemic to
<a href="./regions/antarctica.html">Antarctica</a> is the
<a href="./species/emperor_penguin.html">Emperor Penguin</a>.
With two dots, you can reach the parent directory. Consider there is another directory
at th e same level as our cu rrent directory, named
thingamajig s.
Maria: I feel like I am losing the thread of your explanation. Can you please sketch
the dire ctory tree of the location of these Anta rctica and penguin files?
Professor: Yes, of course. Here it is:
antarctica.h tml
emperor_penguin.html
thingamajigs
acme.html
regions
species
overview.html
Chapter02
As you might have noticed from the screenshot on page 27, our example HTML is
named
overview.html and located in the directory Chapter02, which makes that direc-
2.5. Hyperlinks 29
tory the cur rent one. In the same dire ctory, there are also two subdirec tories named
regions and species. The above code fragment demonstrates how to access the files in
these two directories from within the
overview.html file.
Maria: Is our last code fragment located inside
overview.html?
Professor: I t is indeed.
Suppose now, we want to establish a hyperlink from the same
overview.html document
to point to the
acme.html document, which resides in the thingamajigs directory. We
can arrive at that directory only by first going to its parent, which is at th e same time
the parent of
Chapter02. You move to the parent directory by usin g two dots:
Read about our <a href="../thingamajigs/acme.html">partners</a>
Mike: Is this parent directory named Project42? At least the address bar on the screen-
shot on page 2 7 says it is.
Professor: I didn’t include that information into the above directory tree because the
name is not important. But yes,
Project42 is the parent directory of thingamajigs and
Chapter02. You can also observe the URL in the lower left corner of th e screenshot
on page 27 that is displayed when the mou se cursor hovers over the hyperlink. The
browser expands the relative URL
species/emperor_penguin.html to its absolute form
file:///F:/Project42/species/emperor_penguin.html.
Any more questions?
Mike: Yes. I sometimes notice that certain links open a document not at the beginning
but rather at some specific location. How do you do that?
Professor: This is accomplished by so-called URL fragments. Here’s how it works:
you mark a locatio n in your document to which you want to be able to point a lin k.
Usually you do this with the id attribute on an <a> element:
<a id="something-special">Very important indeed.</a>
When linking to this location, you use the sam e id value preceded by the hash sig n (#)
as the value of the href attribute. So if you want to link to the above very important
location from within the same file, then you simply say:
<a href="#something-special">Read even more.</a>
If yo u want to try this out, y ou should make a document long enough to scroll in the
browser window or y ou won’t notice the effect of following the link.
If you would like to e stablish a link to the above very important location from another
file, all you have to do is prepend the additional (relative or absolute) URL of the
destination file to which you are linking:
30 Meeting 2. Building a Sound Structure
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.