HTML5, JavaScript, and jQuery 24-Hour Trainer - Cameron Dane

Скачать книгу

that can be added anywhere inside a paragraph as a hint to the browser that this would be a good place to add a line break.

      If you would like a line break within a paragraph, you can use the br tag. This is also a self-closing tag so it can be used as follows:

      HTML supports several other tags for encapsulating blocks of text. The final one you will look at in this section is the blockquote element, which can be used to capture quoted text, optionally with a citation:

This structure is slightly more complex: The blockquote tag contains the quote, while cite, which is an optional child tag, captures the source of the quote. Figure 2.3 shows an example of this tag in Chrome.

Figure 2.3

      Notice that the blockquote is indented and that the cite element displays in italics. Again, these are browser defaults rather than part of the HTML5 specification.

      Finally, as your web pages become more complex, you may find cases where you would like to add comments to remind you what the markup means. Comments can be added as follows, and will not display to the user:

      Links and Images

      HTML pages naturally consist of far more than text. This section will introduce two of the most fundamental tags found in most web pages: hyperlinks and images.

      I will assume you know what hyperlinks are: They are a mechanism for referencing another HTML document and can be clicked to allow the user to navigate to that document.

      Start by creating a new page in the same folder as the page you developed in the previous section, but call this one page2.html. Add some contents to this page so that you can distinguish it when it loads.

      Now, in the original HTML file, add the following paragraph:

If you reload the page, this HTML will generate the text found in Figure 2.4.

Figure 2.4

      Notice that the text displayed to the user is derived from the content of the a tag, while the page that is loaded when the link is clicked can be found in the href attribute.

      This particular URL is referred to as a relative URL because it does not start with a forward slash or a domain name. The browser will attempt to find page2.html in a location relative to the page currently being displayed.

      If you had created page2.html in a subfolder called sub, the URL would be represented as follows:

      When running a website inside a web server, it is also possible to use absolute URLs. These begin with a leading / and require the full path for the file to be specified.

      It is also possible to add URLs to other websites. For example:

      You will also notice that the a tag does not cause an implicit new line to be generated in the document. This is because, unlike most of the other tags you have examined, it has a display type of inline.

      Hyperlinks can be surprisingly complex. As you progress through the book you will see more interesting features of hyperlinks, such as the manner in which they can encode parameters, but 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.

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

Скачать книгу