032.3 Lesson 1
Certificate: |
Web Development Essentials |
---|---|
Version: |
1.0 |
Topic: |
032 HTML Document Markup |
Objective: |
032.3 HTML References and Embedded Resources |
Lesson: |
1 of 1 |
Introduction
Any modern web page is rarely made of just text. It comprises many other types of contents, such as images, audio, video and even other HTML documents. Along with external content, HTML documents can contain links to other documents, which makes the experience of browsing the Internet much simpler.
Embedded Content
File exchange is possible over the Internet without web pages written in HTML, so why is HTML the chosen format for web documents and not PDF or any other word processing format? One important reason is that HTML keeps its multimedia resources in separate files. In an environment such as the Internet, where information is often redundant and distributed at different locations, it is important to avoid unnecessary data transfers. Most of the time, new versions of a web page pull in the same images and other support files as previous versions, so the web browser can use the previously fetched files instead of copying everything over again. Furthermore, keeping the files separate facilitates the customization of multimedia content according to the client’s characteristics, such as their location, screen size, and connection speed.
Images
The most common type of embedded content are images that accompany the text. Images are kept separately and are referenced inside the HTML file with the <img>
tag:
<img src="logo.png">
The <img>
tag does not require a closing tag. The src
property indicates the source location for the image file. In this example, the image file logo.png
must be located in the same directory as the HTML file, otherwise the browser will not be able to display it. The source location property accepts relative paths, so the dot notation can be used to indicate the path to the image:
<img src="../logo.png">
The two dots indicate that the image is located inside the parent directory relative to the directory where the HTML file is. If the filename ../logo.png
is used inside an HTML file whose URL is http://example.com/library/periodicals/index.html
, the browser will request the image file at the address http://example.com/library/logo.png
.
The dot notation also applies if the HTML file isn’t an actual file in the filesystem; the HTML browser interprets the URL as if it is a path to a file, but it is the HTTP server’s job to decide whether that path refers to a file or to dynamically generated content. The domain and the proper path are automatically added to all requests to the server, in case the HTML file came from a HTTP request. Likewise, the browser will open the proper image if the HTML file was opened directly from the local filesystem.
Source locations beginning with a forward slash /
are treated as absolute paths. Absolute paths have complete information for the image’s locations, so they work regardless of the HTML document’s location. If the image file is located at another server, which will be the case when a Content Delivery Network (CDN) is used, the domain name must also be included.
Note
|
Content Delivery Networks are composed of geographically distributed servers that store static content for other websites. They help to improve performance and availability for heavy accessed sites. |
If the image can’t be loaded, the HTML browser will show the text provided by the alt
attribute instead of the image. For example:
<img src="logo.png" alt="The Company logo">
The alt
attribute is also important for accessibility. Text-only browsers and screen readers use it as a description for the corresponding image.
Image Types
Web browsers can display all the popular image types, such as JPEG, PNG, GIF, and SVG. The dimensions of the images are detected as soon as the images are loaded, but they can be predefined with the width
and height
attributes:
<img src="logo.png" alt="The Company logo" width="300" height="100">
The only reason for including dimension attributes to the <img>
tag is to avoid breaking the layout when the image takes too long to load or when it can not be loaded at all. Using the width
and height
attributes to change the image’s original dimensions may result in undesirable results:
-
Images will be distorted when the original size is smaller than the new dimensions or when the new proportion ratio differs from the original.
-
Downsizing large images uses extra bandwidth that will result in longer loading timings.
SVG is the only format that doesn’t suffer from these effects, because all of its graphical information is stored in numerical coordinates well suited for scaling and its dimensions don’t affect the file size (hence the name Scalable Vector Graphics). For example, only the position, side dimensions, and color information are necessary to draw a rectangle in SVG. The particular value for every single pixel will be dynamically rendered afterwards. In fact, SVG images are similar to HTML files, in the sense that their graphic elements are also defined by tags in a text file. SVG files are intended for representing sharp-edged drawings, such as charts or diagrams.
Images that don’t fit these criteria should be stored as bitmaps. Unlike vector based image formats, bitmaps store color information for every pixel in the image beforehand. Storing the color value for each pixel in the image generates a very large amount of data, so bitmaps are usually stored in compressed formats, such as JPEG, PNG, or GIF.
The JPEG format is recommended for photographs, because its compression algorithm produces good results for shades and blurry backgrounds. For images where solid colors prevail, the PNG format is more appropriate. Therefore, the PNG format should be chosen when it is necessary to convert a vector image to a bitmap.
The GIF format offers the lowest image quality of all the popular bitmap formats. Nevertheless, it is still widely used because of its support for animations. Indeed, many websites employ GIF files to display short videos, but there are better ways to display video content.
Audio and Video
Audio and video contents may be added to an HTML document in more of less the same way as images. Unsurprisingly, the tag to add audio is <audio>
and the tag to add video is <video>
. Obviously, text-only browsers aren’t able to play multimedia content, so the <audio>
and <video>
tags employ the closing tag to hold the text used as a fallback for the element that could not be shown. For example:
<audio controls src="/media/recording.mp3">
<p>Unable to play <em>recording.mp3</em></p>
</audio>
If the browser doesn’t support the <audio>
tag, the line “Unable to play recording.mp3” will be shown instead. The use of closing </audio>
or </video>
tags allows a web page to include more elaborate alternative content than the simple line of text permitted by the alt
attribute of the <img>
tag.
The src
attribute for <audio>
and <video>
tags works in the same way as for the <img>
tag, but also accepts URLs pointing to a live stream. The browser takes care of buffering, decoding, and displaying the content as it is received. The controls
attribute displays playback controls. Without it, the visitor will not be able to pause, rewind, or otherwise control the playback.
Generic Content
An HTML document can be nested into another HTML document, similarly to the insertion of an image into an HTML document, but using the tag <iframe>
:
<iframe name="viewer" src="gallery.html">
<p>Unsupported browser</p>
</iframe>
Simpler text-only browsers don’t support the <iframe>
tag and will display the enclosed text instead. As with the multimedia tags, the src
attribute sets the source location of the nested document. The width
and height
attributes can be added to change the default dimensions of the iframe
element.
The name
attribute allows developers to refer to the iframe and change the nested document. Without this attribute, the nested document cannot be changed. An anchor
element can be used to load a document from another location inside an iframe instead of the current browser window.
Links
The page element commonly referred to as a web link is also known by the technical term anchor, hence the use of tag <a>
. The anchor leads to another location, which can be any address supported by the browser. The location is indicated by the href
(hyperlink reference) attribute:
<a href="contact.html">Contact Information</a>
The location can be written as a relative or absolute path, as with the embedded contents discussed earlier. Only the enclosed text content (e.g., Contact Information
) is visible to the visitor, usually as clickable underlined blue text by default, but the item displayed over the link can also be any other visible content, such as images:
<a href="contact.html"><img src="contact.png" alt="Contact Information"></a>
Special prefixes can be added to the location to tell the browser how to open it. If the anchor points to an email address, for example, its href
attribute should include the mailto:
prefix:
<a href="mailto:info@lpi.org">Contact by email</a>
The tel:
prefix indicates a phone number. It’s particularly useful for visitors viewing the page on mobile devices:
<a href="tel:+123456789">Contact by phone</a>
When the link is clicked, the browser opens the location’s contents with the associated application.
The most common use of anchors is to load other web documents. By default, the browser will replace the current HTML document with content at the new location. This behavior can be modified by using the target
attribute. The _blank
target, for example, tells the browser to open the given location in a new window or new browser tab, depending on the visitor’s preferences:
<a href="contact.html" target="_blank">Contact Information</a>
The _self
target is the default when the target
attribute is not provided. It causes the referenced document to replace the current document.
Other types of targets are related to the <iframe>
element. To load a referenced document inside an <iframe>
element, the target
attribute should point to the name of the iframe element:
<p><a href="gallery.html" target="viewer">Photo Gallery</a></p>
<iframe name="viewer" width="800" height="600">
<p>Unsupported browser</p>
</iframe>
The iframe element works as a distinct browser window, so any links loaded from the document inside the iframe will replace only the contents of the iframe. To change that behaviour, the anchor elements inside the framed document can also use the target
attribute. The _parent
target, when used inside a framed document, will cause the referenced location to replace the parent document containing the <iframe>
tag. For example, the embedded gallery.html
document could contain an anchor that loads itself while replacing the parent document:
<p><a href="gallery.html" target="_parent">Open as parent document</a></p>
HTML documents support multiple levels of nesting with the <iframe>
tag. The _top
target, when used in an anchor inside a framed document, will cause the referenced location to replace the main document in the browser window, regardless if it is the immediate parent of the corresponding <iframe>
or an ancestor further back in the chain.
Locations Inside Documents
The address of an HTML document may optionally contain a fragment that can be used to identify a resource inside the document. This fragment, also known as the URL anchor, is a string following a hash sign #
at the end of the URL. For example, the word History
is the anchor in the URL https://en.wikipedia.org/wiki/Internet#History
.
When the URL has an anchor, the browser will scroll to the corresponding element in the document: that is, the element whose id
attribute is equal to the anchor in the URL. In the case of the given URL, https://en.wikipedia.org/wiki/Internet#History
, the browser will jump straight to the “History” section. Examining the HTML code of the page, we find out that the title of the section has the corresponding id
attribute:
<span class="mw-headline" id="History">History</span>
URL anchors can be used in the href
attribute of the <a>
tag, either when they are pointing to external pages or when they are pointing to locations inside the current page. In the latter case, it is enough to put start with just the hash sign with the URL fragment, as in <a href="#History">History</a>
.
Warning
|
The |
There are ways to customize how the browser will react to URL anchors. It is possible, for example, to write a JavaScript function that listens to the hashchange window event and triggers a customized action, such as an animation or an HTTP request. It is worth noting, however, that the URL fragment is never sent to the server with the URL, so it cannot be used as an identifier by the HTTP server.
Guided Exercises
-
The HTML document located at
http://www.lpi.org/articles/linux/index.html
has an<img>
tag whosesrc
attribute points to../logo.png
. What is the complete absolute path to this image? -
Name two reasons why the
alt
attribute is important in<img>
tags. -
What image format gives good image quality and keeps the file size small when it is used for photographs with blurry points and with many colors and shades?
-
Instead of using a third-party provider such as Youtube, what HTML tag lets you embed a video file in an HTML document using only standard HTML features?
Explorational Excercises
-
Assume that an HTML document has the hyperlink
<a href="pic1.jpeg">First picture</a>
and the iframe element<iframe name="gallery"></iframe>
. How could you modify the hyperlink tag so the image it points to will load inside the given iframe element after the user clicks on the link? -
What will happen when the visitor clicks a hyperlink in a document inside an iframe and the hyperlink has the target attribute set to
_self
? -
You notice that the URL anchor for the second section of your HTML page is not working. What is the probable cause of this error?
Summary
This lesson covers how to add images and other multimedia content using the proper HTML tags. Moreover, the reader learns the different ways hyperlinks can be used to load other documents and point to specific locations inside a page. The lesson goes through the following concepts and procedures:
-
The
<img>
tag and its main attributes:src
andalt
. -
Relative and absolute URL paths.
-
Popular image formats for the Web and their characteristics.
-
The
<audio>
and<video>
multimedia tags. -
How to insert nested documents with the <iframe> tag.
-
The hyperlink tag
<a>
, itshref
attribute, and special targets. -
How to use URL fragments, also known as hash anchors.
Answers to Guided Exercises
-
The HTML document located at
http://www.lpi.org/articles/linux/index.html
has an<img>
tag whosesrc
attribute points to../logo.png
. What is the complete absolute path to this image?http://www.lpi.org/articles/logo.png
-
Name two reasons why the
alt
attribute is important in<img>
tags.Text-only browsers will be able to show a description of the missing image. Screen readers use the
alt
attribute to describe the image. -
What image format gives good image quality and keeps the file size small when it is used for photographs with blurry points and with many colors and shades?
The JPEG format.
-
Instead of using a third-party provider such as Youtube, what HTML tag lets you embed a video file in an HTML document using only standard HTML features?
The
<video>
tag.
Answers to Explorational Exercises
-
Assume that an HTML document has the hyperlink
<a href="pic1.jpeg">First picture</a>
and the iframe element<iframe name="gallery"></iframe>
. How could you modify the hyperlink tag so the image it points to will load inside the given iframe element after the user clicks on the link?Using the
target
attribute of thea
tag:<a href="pic1.jpeg" target="gallery">First picture</a>
. -
What will happen when the visitor clicks a hyperlink in a document inside an iframe and the hyperlink has the target attribute set to
_self
?The document will be loaded inside the same iframe, which is the default behaviour.
-
You notice that the URL anchor for the second section of your HTML page is not working. What is the probable cause of this error?
The URL fragment after the hash sign doesn’t match the
id
attribute in the element corresponding to the second section, or theid
attribute of the element is not present.