add images, color & extras making your html more exciting
Post on 21-Dec-2015
223 views
TRANSCRIPT
Add Images, Color & Extras
Making your HTML more exciting
Getting Images
Find on the InternetMake ourselvesDigitize
Getting Images
Free or Fee -- be carefulhttp://webcom.missouri.edu/ilibrary/http://www.corbis.comhttp://www.barrysclipart.comhttp://www.hemera.comOthers you have used???
Getting Images
You create Software packages
Photoshop, PaintShop Pro, PrintShop
Check out products on Amazon.comBig Box of Art
3 files per image
Master image High quality--stored offline
Access image Full screen--Web delivery
Thumbnail image Small view-- Web delivery
TIFF (.TIF)
Used for master imageReproduction qualityFor future useUncompressedUsually large file - stored offlineExample: joplinscore.tif
JPEG (.jpg)
PhotographsUsed often on web pagesCompressedColors-- up to 16.7 millionLarger files than .gifExample: joplinscore.jpg
GIF (.gif)
Use for line drawings, logos, iconsSupports animationOnly understands 256 colors (8 bit)Can be transparent (web page
background shows through)Usually smaller file than other formatsExample: joplinscore.gifPNG
File Formats
Uncompressed TIFF: Tagged Image File Format
Compressed JPEG or JPG: Joint Photographic Experts
Group GIF: Graphics Interchange Format
Compression
File compressions are algorithms used to extract ‘extraneous’ information to make the file smaller
Information removedQuality decreases
HTML -- Color
ColorPredefined Color NamesRGB color values (lots of charts on
Web)
Now for some extras
Meta tagsDTDSpecial charactersComments
HTML -- Meta tags
Meta tags<meta http-equiv=“Content-Type”
content=“text/html; charset=iso-8859-1”><meta name=“description” content=“A
short paragraph about the page.”><meta name=“keywords”
content=“library, libraries, MU libraries”><meta name=“author” content=“Barbara
Knotts”>
Meta Tags
How are they used Search engine indexing Can we prevent indexing
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
Google example (similar info. on Yahoo help)http://www.google.com/remove.html
Now for some extras
Document Type Definition (long entry above <html> tag defining HTML version used)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
More Extras
Special charactersExamples
(nonbreaking space)St.&npsp;Louis
& (ampersand)Milk & Cookies
" (quotation mark)"Go Cards"
More Extras
Comment
Begin <!--Nothing below will display
End -->Check out source of
bengal.missouri.edu/~knottsb
More Extras
Checking your html http://validator.w3.org http://htmlvalidator.com http://www.anybrowser.com/
siteviewer.html
HTML -- Let’s Review
HTML’s basic four tags<html></html><head></head><title></title><body></body>
Document Type Definition (long entry above <html> tag defining HTML version used)
HTML -- Let’s Review
Container vs empty tagsContainer <p></p>; <a></a>Empty <br>
Attributes (modify HTML tags)<img src=“my.jpg” height=“25”
width=“30” alt=“My Image”>Four attributes (src, height, width,
alt)
HTML -- Let’s Review
Heading Elements - varies font sizeLevels 1 (largest) to 6 (smallest)<h1></h1>Inserts a line break before and after
Paragraph Tag<p></p>Inserts a line break before and after
HTML -- Let’s Review
Line Break Tag<br>Manual line break
Text formatting<b></b> <em></em><i></i> <strong></strong><u></u> (would you use???)
HTML -- Let’s Review
TablesTags to remember
<table><tr><td><td></tr></table>Table attributes to remember
cellpadding, cellspacing, border, width, summary, heading
Table data cell attributes to rememberalign, valign, colspan, rowspan
Create Your Own (you should be able to do for Portfolio)
DTDFour required tagsMetaLink
bookmark
ImageListCombination of
above
TableColorHeadingFonts Paragraph/Line
breakMailto:StylesCombination