Chapter 7
Adding Graphics
Understanding Images
Images aren’t stored in your HTML files. Images are stored in a separate file.
In order to show a picture in your page, you use the tag in your HTML
file.
The alt Attribute
This provides a short bit of text that’s used instead of the graphic, when necessary.
For example, the web browser that requests the page doesn’t support images.
File Formats for Graphics
GIF- format is sutiable for graphics with a very small number of colors (like simple logos or clip art).
JPEG- format is sutiable for photos that can tolerate some loss of quality.
PNG-format is suitable for all kinds of images.
Compression JPEG gives the best compression as you introduce various problems which are know as compression artifacts. The
most compression artifacts you’ll notice are blocky regions, halos around edges, and a general blurriness.
Images and Style
The tag supports a few optional attributes that you can use to control alignment and borders.
Inline Images in text
If not taking any extra step every image you insert with an tag is placed right into the flow HTML text.
The bottom edge is lined up with the baseline of the text that surrounds.
Adding Captions
Give your pictures a caption above or below the image. Do a inline images by putting a line of text immediately above or
after the picture, separated by line break.
Background Images
CSS makes it possible to set a background image that sits underneath the rest of the page content.
This techniques can be a little distracting, and so it’s fallen out of favor with web gurus in recent years.
Note: Background images can maek your Web site seem tacky. Be wary of using them for a resume page
or a professional business site.
Graphic Text
1. Fire up your favorite image editor or drawing program.
2. Fill in a background color tht matches your web page.
3. Choose your font, and type the text over the background color.
4. Cut your image down to size.
5. Save your picture-GIF or PNG-note: Don’t use JPEG your texzt will have blurred edges.
Chapter 8
Linking Pages
Understanding the Anchor
In HTML you use the anchor tag to create a link that when clicked, tranports the web site reader to another page. The
anchor tag is a straightforward container tag. It looks like this: ….
Inside the anchor tag, you put the clickable content: CLick Me.
Internal and External Links
Links can shuffle you from one page to another in the same Web site, or they can transport you to a completely different Web site on a far-off Web server. Depending on which task you’re performing on which task you’re performing, you use a different type of link.
Internal links point to other pages or resources in your Web site.
External links point to pages or resources in other Web sites
For example if you want visitors to surf from your bio page (MyBio.htm) to another page on your site with your address information (ContactMe.htm) you need to create an internal link.
Linking to Other Types of Content
You can link to a JPEG, GIF, or PNG image file
You can link to a specialized type of file, like a PDF file, a Microsoft Office document, or an audio file.
You can link o a file you want others to download.
You can link to an email message.
Adding Bookmarks
To create a bookmark you use the anchor tag, but with a twist. All you supply is a name attribute that gives your bookmark
a descriptive name. It’s up to you whether you put any text inside the anchor.
Site Management
Nvu, Dreamweaver, FrontPage, and many other HTML editor include site management tools that let you see your entire Web site at a glance.
Link Checkers
A link checker is an automated tool that scans throught one or more of your Web pages. It tests each link it finds by trying
to retrieve the target page which is the page your link is pointing to.
Using Redirects
This is a special instruction that tells the browser to automatically navigate to a new page. The advantage of using a redirect is
that it pevents a broken link, but it doesn’t lock you into the old structure of your Web site if you’ve decided it’s time to make a
change.
WEBSITES
Web Style Guide, 2nd ED. http://webstyleguide.com/index.html
Excellence choices of web designs with great tags and identifers
Smashing Magazine: Top 50 Blog Designs
http://www.smashingmagazine.com/2008/05/08/now-more-than-ever-50-more excelent-blog-designs/
A lot of colorful images and links to other sites for more info.