The Basics - The Essential Guide to HTML5 - page 5

In most cases, you will create something within the body of the web page that youll think of as a title, but it
wont be the HTML title! Figure 1-3 also shows the body of the web page: the short piece of text. Notice
that the words html, head, title and body do not appear. The tags “told” the browser how to display the
HTML document.
We can do much more with text, but let's go on to see how to get images to appear. This requires an img
element. Unlike html , head , and body elements that use starting and ending tags, the img element just
uses one tag. It is called a singleton tag. Its element type is img (not image) and you put all the information
with the tag itself using what are termed attributes. What information? The most important item is the name
of the file that holds the image. The tag
<img src="frog.jpg"/>
tells the browser to look for a file with the name frog and the file type jpg. In this case, the browser looks in
the same directory or folder as the HTML file. You can also refer to image files in other places and Ill show
this later. The src stands for source. It is termed an attribute of the element. The slash before the >
indicates that this is a singleton tag. There are common attributes for different element types, but most
element types have additional attributes. Another attribute for img elements is the width attribute.
<img src="frog.jpg" width="200"/>
This specifies that the image should be displayed with a width of 200 pixels. The height will be whatever is
necessary to keep the image at its original aspect ratio. If you want specific widths and heights, even if
that may distort the image, specify both width and height attributes.
Tip: Youll see examples (maybe even some of mine) in which the slash is omitted and which work
just fine, but it is considered good practice to include it. Similarly, youll see examples in which there
are no quotation marks around the name of the file. HTML is more forgiving in terms of syntax
(punctuation) than most other programming systems. Finally, youll see HTML documents that start
with a very fancy tag of type !DOCTYPE and have the HTML tag include other information. At this
point, we don't need this so I will keep things as simple as I can (but no simpler, to quote Einstein).
Producing hyperlinks is similar to producing images. The type of element for a hyperlink is a and the
important attribute is href .
<a href=" http://faculty.purchase.edu/jeanine.meyer" >Jeanine Meyer's Academic
Activities </a>
As you can see, this element has a starting and ending tag. The content of the element, whatever is
between the two tags—in this case, Jeanine Meyer's Academic Activities—is what shows up in blue and
underlined. The starting tag begins with a . One way to remember this is to think of it as the most important
element in HTML, so it uses the first letter of the alphabet. You can also think of an anchor, which is what
the a actually stands for, but that isn't as meaningful for me. The href attribute (think hypertext
reference) specifies the web site where the browser goes when the hyperlink is clicked. Notice that this is
a full Web address (called a Universal Resource Locator, or URL, for short).
We can combine a hyperlink element with an img element to produce a picture on the screen that a user
can click on. Remember that elements can be nested within other elements. Instead of putting text after
the starting <a> tag, put an <img> tag: