for now a basic understanding is sufficient.
Images can be inserted into an HTML page with the img tag. I seldom use the img tag anymore: I typically use CSS to embed images as the background of other tags because this provides greater control for positioning the image, but it is important to understand how this tag works.
You can either find an image you would like to use or download photo1.jpg from the Lesson 2 files at the book's website.
Now, add the following to the HTML page:
If you view this in Chrome, it will display in much the same way as you see in Figure 2.5.
This is the first tag you have examined with multiple attributes.
● The src attribute is used to specify the location of the file. Just like hyperlinks, this can be an absolute or a relative URL, or it can even reference an image on another website.
● The title attribute is used to specify a tooltip that will be displayed to the reader when the reader hovers over the image with her mouse cursor, and to describe the image to screen readers.
● The width attribute is used to specify the width of the image in pixels. It is also possible to specify a height, but if just width or height is specified, the image will be scaled appropriately.
Browsers support many different image types, but by far the most common are PNG, GIF, and JPEG images.
The img tag previously supported a number of other presentation-orientated attributes. These are deprecated in HTML5, and CSS properties should be used instead.
Note
When a feature is deprecated, it is still available to use, and will probably still work, but it is strongly suggested that you find an alternative because support may be removed entirely in the future.
Try It
This Try It is an opportunity to experiment with the tags that have been discussed in this lesson. You do not necessarily need to follow this lesson exactly; just try to create an interesting web page from the tags that have been introduced.
Lesson Requirements
You will need the template.html file from Lesson 1, a text editor, and a web browser.
Step-by-Step
1. Open the template.html page in your text editor.
2. Add an h1 element to the page and include some header text.
3. Add some paragraphs to the web page using the p tag, and split some paragraphs across multiple lines with the br tag.
4. Add a quote to the page along with a citation, using the blockquote and cite tags.
5. Find an image you would like to include in the page, and add it at the bottom. Make the image a fixed width, and allow the browser to determine the correct height.
6. Add a hyperlink to your page to point to another page in a subfolder of the current page.
7. Add a hyperlink to an external website such as Google.
8. Although I have not covered it, attempt to turn the image into a hyperlink so that it loads another page when it is clicked. Hint: The image will need to be a child element of the hyperlink.
My example can be found in the Lesson 2 resources on the tryit.html website.
Reference
Please select the video for Lesson 2 online at www.wrox.com/go/html5jsjquery24hr . You will also be able to download the code and resources for this lesson from the website.
Lesson 3
Lists and Tables
In this lesson, you will look at two important ways content can be structured in web pages: lists and tables.
Lists
Lists are common to anyone who has worked with word processing tools such as Microsoft Word: They are the bulleted and numbered lists that are used for capturing a sequence of points. HTML lists are very similar to these lists. In this section, I introduce the three types of list provided by HTML.
Unordered lists
Unordered lists are used to create the familiar set of bullet points seen in Word documents. In order to create an unordered list, a set of li elements is placed inside an ul element. li stands for “list item,” while ul stands for “unordered list.”
The following is an example:
If you save this in an HTML file and open it in Chrome, it will display like the example in Figure 3.1.
The li tag is self-closing, so I have omitted the ending tag. Obviously, this could have been included without affecting the display of the list.
Although unordered lists are simple, once they are combined with CSS, they can become very powerful. Whenever you see a horizontal list of navigation links at the top of a web page, there is a good chance that they were created from an unordered list.
Ordered Lists
Ordered lists are identical to unordered lists, except they use the ol tag rather than the ul tag. The only visual difference between the two lists is that ordered lists are numbered:
Figure 3.2 illustrates how this displays.
Any element can be used as the content for an li tag; thus, it is possible to nest lists within lists. The following example lists an unordered list inside an ordered list:
The result of this can be seen in Figure 3.3.
Description
