Unit 3: Using HTML and CSS for Colors, Special Characters, Images, and Multimedia Content
In this unit, we will learn syntax and establish guidelines for creating visually interesting websites. This unit is divided into five subunits. The first subunit addresses the use of color on the Web, and demonstrates how to incorporate colored text, backgrounds, and apply color to other website elements. This subunit also discusses special considerations that should affect color choice, but a full discussion of this topic should be pursued in the course of studying graphic design for the Web. The second subunit addresses the use of special characters like punctuation marks, accented letters, and special symbols on the Web. The third and fourth subunits discuss how to include images and video in HTML documents, and the final unit discusses how to format these media objects using CSS.
Completing this unit should take you approximately 7 hours.
Upon successful completion of this unit, you will be able to:
- use hex codes to specify colors for elements of a web document;
- use entity references and/or ISO Latin-1 codes to put special characters in a web document;
- embed images or video from external websites in an HTML document;
- include images or video from a local server in an HTML-based webpage;
- format images and video using CSS;
- troubleshoot common problems with images and video, including problems with original source material (e.g. too large, inappropriate resolution, wrong format) and problems with presentation; and
- compare and contrast the syntax used to put images and video on the Web using HTML4 and HTML5.
3.1: Colors on the Web
3.1.1: Some Different Approaches to Specifying Color in HTML and CSS
You have already encountered several examples of specifying color using CSS and/or HTML and are probably wondering how to figure out color specification on your own. This chapter discusses the different ways that color is specified on the Web, providing examples that you can adapt for experimentation with your own example webpage.
3.1.2: Selecting Colors Wisely for Web Publishing
While designing color schemes for maximum readability is a topic best addressed in a graphic design-focused course on web design, Color Scheme Designer is a tool than can help you develop interesting and pleasing color schemes. The tool can export these color schemes for use in HTML and CSS or it can be configured to specify the colors in HTML Hex codes, RGB color space, or other formats, depending on the color-naming conventions you are following after reading about Color in CSS.
Like many web tools, Color Scheme Designer's usefulness will become apparent only if you experiment with the features built into its relatively simple design. Try to produce a few different pleasing color combinations and then apply them to elements of your example website using multiple, differently named external style sheets.
3.2: Special Characters in HTML Documents
You have already begun formatting text using CSS, but you may have realized that some punctuation marks and special characters tend to create problems when they are included in your HTML file. This chapter will provide you with the special codes you need to include these characters.
3.3: Putting Images on the Web using HTML
Images are such a core part of the Web experience that we can hardly imagine a webpage without at least some illustrative or decorative photographs or illustrations. Including images inline in a website is very easy. Read all four pages under the "Including Pictures" heading on the Introduction to HTML/XHTML website.
Move an image you would like to use on your website into your working directory. Next, use the examples on this site to include this image in your example website. Then, see if you can make that image into a hyperlink to a website elsewhere on the Web - or to a separate example page that you are developing. Don't worry too much about formatting it now, as you will learn to format it using CSS later.
This is an optional, supplementary reading that provides some extra information about images in websites. If you have successfully included inline pictures in your example site, you are unlikely to need this reading, but if you are having problems, it may be of some use.
3.4: Putting Video on the Web using HTML
Including video in can be a very complex process and generally is treated in more advanced classes that discuss technologies like Flash. Even so, it is often the case that a simple website needs embedded video, so this course includes the following information to help you get started on including this feature in your websites. Fortunately, the emerging HTML5 standard will make video significantly easier to manage. If you do not intend to include video content on your site, you may skip this subunit.
This article includes much of the nitty-gritty information about encoding, decoding, and playing video on the Web. It also includes a thorough discussion of including video in an HTML file using the newer HTML5 standard, including a discussion of compatibility issues. Since HTML5 has not yet been adopted by the entire web community, older techniques are discussed below.
This article introduces the concept of Flash video and points you towards both intermediate and advanced techniques for creating a Flash player on your site.
This segment offers an example of how the "object" and "embed" tags can be used to embed a video in a website. You will need to click through to external resources and tutorials to successfully make use of this example.
3.5: Using CSS for Graphical Formatting
3.5.1: Background Colors and Images Using CSS
Background properties in CSS allow you to specify colors or images as the backgrounds to create visual interest on a website.
Create a few style sheets with which to experiment with background properties. Try applying colored backgrounds to elements of your HTML file. Then, try applying images as backgrounds.
3.5.2: The Element-Box Model in CSS
These articles provides a very clear explanation of the element-box model (or simply "the box model") in relation to borders and margins and padding.
Be sure to read both articles.
Read these articles, which discuss the fundamentals of laying-out, organizing, and graphically formatting an HTML document using CSS depend on a thorough understanding of the element-box model.
After experimenting with the interactive elements on each of these pages, try to use the element-box model to modify the paragraphs, headings, tables, lists, and images you have included in your example webpage.
3.5.3: Positioning and Sizing Elements using CSS
This article provides a very clear explanation of some simple use cases for alignment and indentation using inline and embedded CSS. Note that he uses the "<div>" tag, which we have not yet learned about. Don't worry: the techniques for indentation and alignment he provides are useful for all of the elements you have already learned!
Oftentimes, you will want to select where or what size on a page you want an element to display. The CSS positioning properties allow you complete control over where elements appear. Ultimately, we will use these properties to create sophisticated designs; for now, however, after experimenting with the interactive elements on these pages, try to use the CSS positioning properties to place images of different sizes in different places on your example webpage. Make sure that you master the "float" properties so that you can wrap words around an image.
Ultimately, we will use these properties to create sophisticated designs; for now, however, after experimenting with the interactive elements on the above pages, try to use the CSS positioning properties to place images of different sizes in different places on your example webpage. Make sure that you master the "float" properties so that you can wrap words around an image.
3.5.4: Formatting Tables using CSS
The default styles for tables often do not match with the graphical design specifications for a website. Fortunately, CSS allows us to modify many of the graphical characteristics of tables.
Using you have already learned about the box model and the techniques demonstrated in this chapter, try applying CSS sizing and positioning styles to the tabular data in your example webpage.
3.5.5: Formatting Lists using CSS
The default styles for lists are often quite limiting; in order to develop lists that match your graphic design specifications, you will usually need to use CSS to change how the semantic content stored in HTML lists is displayed. In the next unit, we will learn to use CSS to style special lists to create menus for multi-page websites.
Using you have already learned about the box model and the techniques demonstrated in the above chapter, try styling the lists in your example webpage.
Unit 3 Assessment
Take this assessment to see how well you understood this unit.
- This assessment does not count towards your grade. It is just for practice!
- You will see the correct answers when you submit your answers. Use this to help you study for the final exam!
- You can take this assessment as many times as you want, whenever you want.