Show
We browse the Internet in search of interesting and informative content, which we usually find in the form of plain text. To accompany this plain text, HTML provides ways to embed rich media in the form of images, audio tracks, and videos, as well as to embed content from another web page in the form of an inline frame. The ability to include images, audio tracks, videos, and inline frames within websites has been around for some time. Browser support for images and inline frames has generally been pretty good. And while the ability to add audio tracks and videos to a website has been around for years, the process has been fairly cumbersome. Fortunately, this process has improved and is much easier with support directly from HTML. Today, we can freely use images, audio, video, and inline frames knowing that this content is supported across all major browsers. Adding ImagesTo add
images to a page, we use the In conjunction with the The alternate text, “A black, brown, and white dog wearing a kerchief,” shown in place of a missing image Supported Image FormatsImages come in a variety of different file formats, and each browser may support (or not support) different
formats. By and large, the most commonly supported formats online are Sizing ImagesIt is important to identify the size of an image in order to tell the browser how large the image should be before the page even loads; thus the browser can reserve space for the image and render the page faster. There are a few different ways to size images so that they work well on a page. One option is to use the Additionally, images may be sized using the
Specifying either a width or height will cause the other dimension to adjust automatically to maintain the aspect ratio of the image. As an example, if we want an image to be
While using the Positioning ImagesWe can use a number of different approaches to position images on a web page. By default images are positioned as inline-level elements;
however, their positions may be changed using CSS, specifically the Inline Positioning ImagesThe
Leaving images untouched in their default positioning isn’t too common. More often than not, images are displayed as block-level elements or are floated flush to one side. Block Positioning ImagesAdding the
Positioning Images Flush Left or RightSometimes displaying an image as Remembering back to Lesson 5,
“Positioning Content,” we recall that the Floating an image is a start; however, all other content will align directly against it. To provide spacing around an image, we’ll use the
When to Use an Image Element vs. a Background ImageThere are two primary ways to add images to a web page. One way, as covered here, is to use the The The The In PracticeNow that we know how to add and position images on a page, let’s take a look at our Styles Conference website and see where we can add a few images.
Now both our home and Speaker pages are looking pretty sharp. Our Styles Conference home page after adding images to each section that teases another page Our Styles Conference Speakers page after adding images for each of the speakers Adding AudioHTML5 provides a quick and easy way to add audio files
to a website by way of the
Audio AttributesSeveral other attributes may accompany the src attribute on the The By
default, the
To display the
When present on the Lastly, the When the Audio Fallbacks & Multiple SourcesAt the moment, different browsers support different audio file formats, the three most popular of which are To begin, we’ll remove
the Using a Because it was introduced in HTML5, some browsers may not support the
To review the previous code, the In addition to the Adding VideoAdding video in HTML5 is very similar to adding audio. We use the
With the Since videos take up space on the page, it doesn’t hurt to specify their dimensions, which is most commonly done with
Customizing Audio & Video ControlsBy default, the Additionally, if a customized player uses the Poster AttributeOne additional attribute available for the
Poster Attribute DemoFor performance reasons this video demo is hosted locally, however you may still review and edit this code on CodePen. Please download the video.Video FallbacksAs with the
One additional fallback option that could be used in place of a plain text fallback is to use a YouTube or Vimeo embedded video. These video hosting websites allow us to upload our videos, provide a standard video player, and enable us to embed our videos onto a page using an inline frame. HTML5 Audio & Video File FormatsBrowser support for the There are a few tools that help to convert an audio or video file into different formats, and a quick search will provide an abundance of options. Adding Inline FramesAnother way to add content to a page is to embed another HTML page within the current page. This is done using an inline frame, or Many pages use the
Adding Inline Frames DemoFor security reasons CodePen doesn’t allow The Pages referenced within the In PracticeInline frames provide a great way to add dynamic content to a page. Let’s give this a shot by updating our Venue page with some maps.
We now have a Venue page, complete with maps for the different locations of our conference. Our Styles Conference Venue page, which now includes inline frames Demo & Source CodeBelow you may view the Styles Conference website in its current state, as well as download the source code for the website in its current state. View the Styles Conference Website or Download the Source Code (Zip file) Semantically Identifying Figures & CaptionsWith HTML5 also came the introduction of the FigureThe
Figure CaptionTo add a caption or legend to the Additionally, the
Not all forms of media need to be included within a SummaryAlongside text, media is one of the largest parts of the web. Use of images, audio, and video has only grown over recent years, and it isn’t likely to slow down. Now we know how to incorporate these forms of media into our designs and how we can use them to enrich the content on our websites. Within this lesson we covered the following:
We’re coming into the homestretch of learning HTML and CSS, with only a few more components left to introduce. Next on the list are forms. Resources & Links
What are picture formatting options that control the manner in which text wraps around a picture or other object?Glossary. What graphic is a designer quality visual representation you can use to display information in a Word document?A SmartArt graphic is a visual representation of your information and ideas. You create one by choosing a layout that fits your message.
What is the symbol that indicates to which paragraph an image is attached?Glossary. Are visual representations of information that can help communicate your message or ideas more effectively?Visual communication is the practice of using visual elements to communicate information or ideas. Types of visual communication include animated GIFs, screenshots, videos, pie charts, infographics, and slide deck presentations. Getting your message across in a clear, concise way can be difficult with words alone.
|