Linux Professional Institute Learning Logo.
Skip to main content
  • Home
    • All Resources
    • LPI Learning Materials
    • Become a Contributor
    • Publishing Partners
    • Become a Publishing Partner
    • About
    • FAQ
    • Contributors
    • Roadmap
    • Contact
  • LPI.org
032.3 Lesson 1
Topic 031: Software Development and Web Technologies
031.1 Software Development Basic
  • 031.1 Lesson 1
031.2 Web Application Architecture
  • 031.2 Lesson 1
031.3 HTTP Basics
  • 031.3 Lesson 1
Topic 032: HTML Document Markup
032.1 HTML Document Anatomy
  • 032.1 Lesson 1
032.2 HTML Semantics and Document Hierarchy
  • 032.2 Lesson 1
032.3 HTML References and Embedded Resources
  • 032.3 Lesson 1
032.4 HTML Forms
  • 032.4 Lesson 1
Topic 033: CSS Content Styling
033.1 CSS Basics
  • 033.1 Lesson 1
033.2 CSS Selectors and Style Application
  • 033.2 Lesson 1
033.3 CSS Styling
  • 033.3 Lesson 1
033.4 CSS Box Model and Layout
  • 033.4 Lesson 1
Topic 034: JavaScript Programming
034.1 JavaScript Execution and Syntax
  • 034.1 Lesson 1
034.2 JavaScript Data Structures
  • 034.2 Lesson 1
034.3 JavaScript Control Structures and Functions
  • 034.3 Lesson 1
  • 034.3 Lesson 2
034.4 JavaScript Manipulation of Website Content and Styling
  • 034.4 Lesson 1
Topic 035: NodeJS Server Programming
035.1 NodeJS Basics
  • 035.1 Lesson 1
035.2 NodeJS Express Basics
  • 035.2 Lesson 1
  • 035.2 Lesson 2
035.3 SQL Basics
  • 035.3 Lesson 1
How to get certified
  1. Topic 032: HTML Document Markup
  2. 032.3 HTML References and Embedded Resources
  3. 032.3 Lesson 1

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 id attribute must not contain whitespace (spaces, tabs, etc.) and must be unique within the document.

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

  1. The HTML document located at http://www.lpi.org/articles/linux/index.html has an <img> tag whose src attribute points to ../logo.png. What is the complete absolute path to this image?

  2. Name two reasons why the alt attribute is important in <img> tags.

  3. 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?

  4. 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

  1. 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?

  2. 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?

  3. 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 and alt.

  • 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>, its href attribute, and special targets.

  • How to use URL fragments, also known as hash anchors.

Answers to Guided Exercises

  1. The HTML document located at http://www.lpi.org/articles/linux/index.html has an <img> tag whose src attribute points to ../logo.png. What is the complete absolute path to this image?

    http://www.lpi.org/articles/logo.png

  2. 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.

  3. 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.

  4. 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

  1. 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 the a tag: <a href="pic1.jpeg" target="gallery">First picture</a>.

  2. 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.

  3. 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 the id attribute of the element is not present.

Linux Professional Insitute Inc. All rights reserved. Visit the Learning Materials website: https://learning.lpi.org
This work is licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.

Next Lesson

032.4 HTML Forms (032.4 Lesson 1)

Read next lesson

Linux Professional Insitute Inc. All rights reserved. Visit the Learning Materials website: https://learning.lpi.org
This work is licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.

LPI is a non-profit organization.

© 2023 Linux Professional Institute (LPI) is the global certification standard and career support organization for open source professionals. With more than 200,000 certification holders, it's the world’s first and largest vendor-neutral Linux and open source certification body. LPI has certified professionals in over 180 countries, delivers exams in multiple languages, and has hundreds of training partners.

Our purpose is to enable economic and creative opportunities for everybody by making open source knowledge and skills certification universally accessible.

  • LinkedIn
  • flogo-RGB-HEX-Blk-58 Facebook
  • Twitter
  • Contact Us
  • Privacy and Cookie Policy

Spot a mistake or want to help improve this page? Please let us know.

© 1999–2023 The Linux Professional Institute Inc. All rights reserved.