HTML and CSS Reference
In-Depth Information
what font to use if the preferred font is not available on the user's computer. You can specify the margin
and padding or vary independently the margin-top, margin-left, padding-top, and so forth.
Testing and uploading the application
You need to have all the files, in this case the single HTML file plus all image files, in the same folder
unless you are using full Web addresses. For the links to work, you need to have the correct addresses
for all
href
attributes. My examples show how to do this for HTML files in the same folder or for HTML files
somewhere else on the Web.
You can start testing your work even if it is not completely done. For example, you can put in a single
img
element or a single
a
element. Open up a browser, such as Firefox, Chrome, or Safari (I didnt mention
Internet Explorer because it does not yet support some of the HTML5 features Ill be using in other
tutorials, though support is coming in IE9). In Firefox, click on File and then Open file and browse to your
HTML file. In Chrome, press Ctrl on the PC (CMD on the MAC) and o and then browse to the file and click
OK to open it. You should see something like my examples. Click on the hyperlinks to get to the other
sites. Reload the page using the reload icon for the browser and observe the different time. If you don't
see what you expect—something like my examples—you need to examine your code. Common mistakes
are
•
missing or mismatched opening and closing tags.
•
wrong name for image files or HTML files, or wrong file extension for the image files. You can
use image files of type JPG, GIF, or PNG but the file extension named in the tag must match
the actual file type of the image.
•
missing quotation marks. The color coding, as available in TextPad and some other editors,
can help you identify this.
Summary
In this chapter, you learned how to compose HTML documents with text, images, and hyperlinks. This
included
•
the basic tags, including
html
,
head
,
title
,
style
,
script
,
body
.
•
the
img
element for displaying images.
•
the
a
element for hyperlinks.
•
simple formatting using a style element written following Cascading Style Sheet (CSS) rules.
•
a single line of JavaScript code to provide date and time information.
This chapter was just the beginning, though its possible to produce beautiful and informative web pages
using basic HTML, with or without Cascading Style Sheets. In the next chapter, you will learn how to
include randomness and interactivity in an application, and how to use the canvas element, the critical
feature of HTML5.
