Structuring a Web Page - HTML5 Foundations - page 44

Figure 2-15 A sample directory structure.
Relative paths refer to the location of the desired file relative to the location of the current page. For example, if your
stylesheet is contained within a folder named css that is in the same folder as the current HTML document, you
could use the following path to link to the file:
href="css/style.css"
In this path, you specify that the CSS file is located in the css folder and that the file name is style.css .
Refer to the file structure shown in Figure 2-15. Suppose your current file is page.html , and you want to show the
path to the same stylesheet. You can traverse folders using double periods, as in the following example:
href="../css/style.css"
This example refers to the style.css file in the css folder above the current file, page.html . You start at the
page.html file, go up one folder (using ../ ), enter the css folder, and finally, select the style.css file.
Absolute paths refer to the specific location of a file starting from the root directory. For the purpose of web page
links, the root is the top-level directory, for example:
http://example.com/
You could use either of the following as an absolute path to refer to your stylesheet:
href="/css/style.css"
or
href="http://example.com/css/style.css"
Both paths point to the same file.
Summary
You learned about a number of HTML elements, including some that are brand new in HTML5. Most of these new
HTML5 elements have semantic meaning and should be used for some applications and not for others. This can be
confusing, but in this chapter, you used them correctly to build the layouts of your page templates.
HTML documents include a lot of information that is not directly presented to the user. You learned how to use the
<meta> element to embed information within your web pages that can be used by web browsers, search engines,
and other computer programs.
Finally, you learned how CSS is used to describe how elements can be styled by the web browser. You even hooked
up a stylesheet to the example website to make it much more pleasing to the eye.
In Chapter 3, you learn about the HTML elements used for marking up content in your web pages. You look at how
headings work, as well as learning about lists, tables, images, and captions. You continue working on the website for
Joe's Pizza Co. This time you will add some content to each page and create some navigation so that visitors can eas-
ily browse through the website.