Best Practices for Choosing Colors
Besides using colors that are culturally sensitive, other best practices
include the following:
The color wheel is a chart that shows the organization of colors in
a circular manner. The method of display is an attempt to help you visualize the
relationships between primary, secondary, and complementary colors. Color
schemes are developed from working with the color wheel; understanding color
schemes can help you determine the color palette to use consistently throughout
your website. For example, knowing something about color relationships will hopefully enable you to avoid using orange text
on a light blue background, or bright blue text on a brown background.
Some common color schemes in web design are as follows:
The hexadecimal color format is
• Use a natural palette of colors. This doesn’t mean you
should use earth tones, but instead refers to using colors that one would
naturally see on a casual stroll around town—avoid ultrabright colors that can
cause eye strain.
• Use a small color palette. You don’t need to use 15
different colors to achieve your goals. In fact, if your page includes text and
images in 15 different colors, you might reevaluate the message you’re
attempting to send. Focus on three or four main colors with a few complimentary
colors, at the most.
• Consider your demographics. You are likely not able to
control your demographics and thus have to find a middle ground that
accommodates everyone. The colors enjoyed by younger people are not necessarily
those appreciated by older people, just as there are color biases between men
and women and people from different geographic regions and cultures.
Some common color schemes in web design are as follows:
• Analogous—Colors that are adjacent to
each other on the color wheel, such as yellow and green. One color is the
dominant color and its analogous friend is used to enrich the display.
• Complementary—Colors that are
opposite from each other on the color wheel, such as a warm color (red) and a
cool color (green).
• Triadic—Three colors that are equally
spaced around the color wheel. The triadic scheme provides balance while still
allowing rich color use.
Using Hexadecimal Values for Colors
To remain standards-compliant, as well as to retain precise control over the colors in your website, you can reference colors by their hexadecimal value. The hexadecimal value of a color is an indication of how much red, green, and blue light should be mixed into each color. It works a little bit like Play-Doh—just mix in the amounts of red, blue, and green you want to get the appropriate color.The hexadecimal color format is
#rrggbb,
in which rr, gg, and
bb are two-digit hexadecimal values for the red (rr),
green (gg), and blue (bb) components of the color. If you’re not familiar with
hexadecimal numbers, don’t sweat it. Just remember that FF is the
maximum and 00 is the minimum. Use one of the following codes for
each component:
•
FF means full brightness.
•
CC means 80% brightness.
•
99 means 60% brightness.
•
66 means 40% brightness.
•
33 means 20% brightness.
•
For example, bright red is 00 means none of this color
component.#FF0000, dark green is
#003300, bluish-purple is #660099, and medium-gray is
#999999. To make a page with a red background and dark green text,
the HTML code would look like the following:
<body style="background-color:#FF0000;
color:#003300">
Using CSS to Set Background, Text, and Border Colors
<?xml version="1.0"
encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Background, Text, and Border Colors</title>
</head>
<body>
<h1>Background, Text, and Border Colors</h1>
<p style="background-color:#CCCCCC;
border:1px solid #000000; color:#FF0000">
Grey paragraph, black border, red text with a
<span style="color:#FFA500">orange span</span>.</p>
<div style="width:300px; height:75px; margin-bottom: 12px;
background-color:#000000; border:2px dashed #FF0000; color: #FFFFFF">
Black div, red border, white text. </div>
<table border="1">
<tr>
<td style="background-color: #00FF00">Green Table Cell</td>
<td style="background-color: #FF0000">Red Table Cell</td>
</tr>
<tr>
<td style="background-color: #FFFF00">Blue Table Cell</td>
<td style="background-color: #0000FF">Yellow Table Cell</td>
</tr>
</table>
<blockquote style="background-color:#0000FF;
border:4px dotted #FFFF00; color:#FFFFFF"><p>Blue blockquote,
yellow border, white text.</p></blockquote>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Background, Text, and Border Colors</title>
</head>
<body>
<h1>Background, Text, and Border Colors</h1>
<p style="background-color:#CCCCCC;
border:1px solid #000000; color:#FF0000">
Grey paragraph, black border, red text with a
<span style="color:#FFA500">orange span</span>.</p>
<div style="width:300px; height:75px; margin-bottom: 12px;
background-color:#000000; border:2px dashed #FF0000; color: #FFFFFF">
Black div, red border, white text. </div>
<table border="1">
<tr>
<td style="background-color: #00FF00">Green Table Cell</td>
<td style="background-color: #FF0000">Red Table Cell</td>
</tr>
<tr>
<td style="background-color: #FFFF00">Blue Table Cell</td>
<td style="background-color: #0000FF">Yellow Table Cell</td>
</tr>
</table>
<blockquote style="background-color:#0000FF;
border:4px dotted #FFFF00; color:#FFFFFF"><p>Blue blockquote,
yellow border, white text.</p></blockquote>
</body>
</html>
Placing Images on a Web Page
To put an image on a web page, first move the image file into the same folder as the HTML file or in a directory namedimages for easy
organization.Insert the following HTML tag at the point in the text where you want the image to appear. Use the name of your image file instead of myimage.gif:
<img src="myimage.gif" alt="My Image" />
<?xml version="1.0"
encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>A Spectacular Yosemite View</title>
</head>
<body>
<h1>A Spectacular Yosemite View</h1>
<p><img src="hd.jpg" alt="Half Dome" /></p>
<p><strong>Half Dome</strong> is a granite dome in Yosemite National Park,
located in northeastern Mariposa County, California, at the eastern
end of Yosemite Valley. The granite crest rises more than 4,737 ft
(1,444 m) above the valley floor.</p>
<p>This particular view is of Half Dome as seen from Washburn
Point.</p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>A Spectacular Yosemite View</title>
</head>
<body>
<h1>A Spectacular Yosemite View</h1>
<p><img src="hd.jpg" alt="Half Dome" /></p>
<p><strong>Half Dome</strong> is a granite dome in Yosemite National Park,
located in northeastern Mariposa County, California, at the eastern
end of Yosemite Valley. The granite crest rises more than 4,737 ft
(1,444 m) above the valley floor.</p>
<p>This particular view is of Half Dome as seen from Washburn
Point.</p>
</body>
</html>
Aligning Images
Horizontal Image Alignment
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title>More Spectacular Yosemite Views</title>
</head>
<body>
<h1>More Spectacular Yosemite Views</h1>
<p><img src="elcap_sm.jpg" alt="El Capitan" width="100"
height="75" style="float:left; padding: 6px;"/><strong>El
Capitan</strong> is a 3,000-foot (910 m) vertical rock formation
in Yosemite National Park, located on the north side of Yosemite
Valley, near its western end. The granite monolith is one of the
world's favorite challenges for rock climbers. The formation was
named "El Capitan" by the Mariposa Battalion when it explored the
valley in 1851.</p>
<p><img src="tunnelview_sm.jpg" alt="Tunnel View" width="100"
height="80" style="float:right; padding: 6px;"/><strong>Tunnel
View</strong> is a viewpoint on State Route 41 located directly east
of the Wawona Tunnel as one enters Yosemite Valley from the south.
The view looks east into Yosemite Valley including the southwest face
of El Capitan, Half Dome, and Bridalveil Falls. This is, to many, the
first views of the popular attractions in Yosemite.</p>
</body>
</html>
<head>
<title>More Spectacular Yosemite Views</title>
</head>
<body>
<h1>More Spectacular Yosemite Views</h1>
<p><img src="elcap_sm.jpg" alt="El Capitan" width="100"
height="75" style="float:left; padding: 6px;"/><strong>El
Capitan</strong> is a 3,000-foot (910 m) vertical rock formation
in Yosemite National Park, located on the north side of Yosemite
Valley, near its western end. The granite monolith is one of the
world's favorite challenges for rock climbers. The formation was
named "El Capitan" by the Mariposa Battalion when it explored the
valley in 1851.</p>
<p><img src="tunnelview_sm.jpg" alt="Tunnel View" width="100"
height="80" style="float:right; padding: 6px;"/><strong>Tunnel
View</strong> is a viewpoint on State Route 41 located directly east
of the Wawona Tunnel as one enters Yosemite Valley from the south.
The view looks east into Yosemite Valley including the southwest face
of El Capitan, Half Dome, and Bridalveil Falls. This is, to many, the
first views of the popular attractions in Yosemite.</p>
</body>
</html>
Vertical Image Alignment
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title>Small But Mighty Spectacular Yosemite Views</title>
</head>
<body>
<h1>Small But Mighty Yosemite Views</h1>
<p><img src="elcap_sm.jpg" alt="El Capitan" width="100"
height="75" style="vertical-align:text-top;"/><strong>El
Capitan</strong> is a 3,000-foot (910 m) vertical rock formation
in Yosemite National Park.</p>
<p><img src="tunnelview_sm.jpg" alt="Tunnel View" width="100"
height="80" style="vertical-align:text-bottom;"/><strong>Tunnel
View</strong> looks east into Yosemite Valley.</p>
<p><img src="upperyosefalls_sm.jpg" alt="Upper Yosemite Falls"
width="87" height="100" style="vertical-align:middle;"/><strong>Upper
Yosemite Falls</strong> are 1,430 ft and are among the twenty highest
waterfalls in the world. </p>
<p><img src="hangingrock_sm.jpg" alt="Hanging Rock" width="100"
height="75" style="vertical-align:baseline;"/><strong>Hanging
Rock</strong>, off Glacier Point, used to be a popular spot for people
to, well, hang from. Crazy people.</p>
</body>
</html>
<head>
<title>Small But Mighty Spectacular Yosemite Views</title>
</head>
<body>
<h1>Small But Mighty Yosemite Views</h1>
<p><img src="elcap_sm.jpg" alt="El Capitan" width="100"
height="75" style="vertical-align:text-top;"/><strong>El
Capitan</strong> is a 3,000-foot (910 m) vertical rock formation
in Yosemite National Park.</p>
<p><img src="tunnelview_sm.jpg" alt="Tunnel View" width="100"
height="80" style="vertical-align:text-bottom;"/><strong>Tunnel
View</strong> looks east into Yosemite Valley.</p>
<p><img src="upperyosefalls_sm.jpg" alt="Upper Yosemite Falls"
width="87" height="100" style="vertical-align:middle;"/><strong>Upper
Yosemite Falls</strong> are 1,430 ft and are among the twenty highest
waterfalls in the world. </p>
<p><img src="hangingrock_sm.jpg" alt="Hanging Rock" width="100"
height="75" style="vertical-align:baseline;"/><strong>Hanging
Rock</strong>, off Glacier Point, used to be a popular spot for people
to, well, hang from. Crazy people.</p>
</body>
</html>
Turning Images into Links
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title>More Spectacular Yosemite Views</title>
<style type="text/css">
div.imageleft {
float:left;
clear: all;
text-align:center;
font-size:9px;
font-style:italic;
}
div.imageright {
float:right;
clear: all;
text-align:center;
font-size:9px;
font-style:italic;
}
img {
padding: 6px;
border: none;
}
</style>
</head>
<body> <h1>More Spectacular Yosemite Views</h1>
<p><div class="imageleft">
<a href="http://www.flickr.com/photos/nofancyname/614253439/"><img
src="elcap_sm.jpg" alt="El Capitan" width="100" height="75"/></a>
<br/>click image to enlarge</div><strong>El Capitan</strong>
is a 3,000-foot (910 m) vertical rock formation in Yosemite National
Park, located on the north side of Yosemite Valley, near its western
end. The granite monolith is one of the world's favorite challenges
for rock climbers. The formation was named "El Capitan" by the
Mariposa Battalion when it explored the valley in 1851.</p>
<p><div class="imageright">
<a href="http://www.flickr.com/photos/nofancyname/614287355/"><img
src="tunnelview_sm.jpg" alt="Tunnel View" width="100" height="80"/></a>
<br/>click image to enlarge</div><strong>Tunnel View</strong> is a
viewpoint on State Route 41 located directly east of the Wawona Tunnel
as one enters Yosemite Valley from the south. The view looks east into
Yosemite Valley including the southwest face of El Capitan, Half Dome,
and Bridalveil Falls. This is, to many, the first views of the popular
attractions in Yosemite.</p>
</body>
</html>
<head>
<title>More Spectacular Yosemite Views</title>
<style type="text/css">
div.imageleft {
float:left;
clear: all;
text-align:center;
font-size:9px;
font-style:italic;
}
div.imageright {
float:right;
clear: all;
text-align:center;
font-size:9px;
font-style:italic;
}
img {
padding: 6px;
border: none;
}
</style>
</head>
<body> <h1>More Spectacular Yosemite Views</h1>
<p><div class="imageleft">
<a href="http://www.flickr.com/photos/nofancyname/614253439/"><img
src="elcap_sm.jpg" alt="El Capitan" width="100" height="75"/></a>
<br/>click image to enlarge</div><strong>El Capitan</strong>
is a 3,000-foot (910 m) vertical rock formation in Yosemite National
Park, located on the north side of Yosemite Valley, near its western
end. The granite monolith is one of the world's favorite challenges
for rock climbers. The formation was named "El Capitan" by the
Mariposa Battalion when it explored the valley in 1851.</p>
<p><div class="imageright">
<a href="http://www.flickr.com/photos/nofancyname/614287355/"><img
src="tunnelview_sm.jpg" alt="Tunnel View" width="100" height="80"/></a>
<br/>click image to enlarge</div><strong>Tunnel View</strong> is a
viewpoint on State Route 41 located directly east of the Wawona Tunnel
as one enters Yosemite Valley from the south. The view looks east into
Yosemite Valley including the southwest face of El Capitan, Half Dome,
and Bridalveil Falls. This is, to many, the first views of the popular
attractions in Yosemite.</p>
</body>
</html>
Embedding Multimedia Files
A MIME type is an identifier for uniquely identifying different
types of media objects on the Internet. MIME stands for Multipurpose Internet
Mail Extensions, and this name comes from the fact that MIME types were
originally used to identify email attachments. These MIME types should be used
in the
Following are the MIME types for several popular sound and video formats you might want to use in your web pages:
type attribute of the <object> tag to
identify what kind of multimedia object is being referenced in the
data attribute.Following are the MIME types for several popular sound and video formats you might want to use in your web pages:
• WAV
Audio—
audio/x-wav
• AU Audio—
audio/basic
• MP3 Audio—
audio/mpeg
• MIDI
Audio—
audio/midi
• WMA
Audio—
audio/x-ms-wma
•
RealAudio—
audio/x-pn-realaudio-plugin
• AVI—
video/x-msvideo
• WMV—
video/x-ms-wmv
• MPEG
Video—
video/mpeg
•
QuickTime—
video/quicktime
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title>Fun in the Pond</title>
</head>
<body> <h1>Fun in the Pond</h1>
<div style="float:left; padding:3px">
<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
width="320" height="305">
<param name="type" value="video/x-ms-wmv" />
<param name="URL" value="pond.wmv" />
<param name="uiMode" value="full" />
<param name="autoStart" value="false" />
<embed width="320" height="305" type="video/x-ms-wmv"
src="pond.wmv" controls="All" loop="false" autostart="false"
pluginspage="http://www.microsoft.com/windows/windowsmedia/" />
</object>
</div>
<p>Michael's backyard pond is not only a fun hobby but also
an ongoing home improvement project that is both creative and
relaxing.</p>
<p>He has numerous fish in the pond, all Koi from various places
as far as Japan, Israel, and Australia. Although they don't bark,
purr, or fetch anything other than food, these fish are his pets,
and good ones at that.</p>
</body>
</html>
<head>
<title>Fun in the Pond</title>
</head>
<body> <h1>Fun in the Pond</h1>
<div style="float:left; padding:3px">
<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
width="320" height="305">
<param name="type" value="video/x-ms-wmv" />
<param name="URL" value="pond.wmv" />
<param name="uiMode" value="full" />
<param name="autoStart" value="false" />
<embed width="320" height="305" type="video/x-ms-wmv"
src="pond.wmv" controls="All" loop="false" autostart="false"
pluginspage="http://www.microsoft.com/windows/windowsmedia/" />
</object>
</div>
<p>Michael's backyard pond is not only a fun hobby but also
an ongoing home improvement project that is both creative and
relaxing.</p>
<p>He has numerous fish in the pond, all Koi from various places
as far as Japan, Israel, and Australia. Although they don't bark,
purr, or fetch anything other than food, these fish are his pets,
and good ones at that.</p>
</body>
</html>
Activity:
Design something (based on your preference topic) that will incorporate images and multimedia files. Also, the images should be horizontally and vertically aligned and clickable.
Walang komento:
Mag-post ng isang Komento