introduction to programming the www i cmsc 10100-1 winter 2004 lecture 3
DESCRIPTION
3 Reminder Hw1 due this Thurs. MacLab tutorials MacLab Register online Make an appointment if you need helpTRANSCRIPT
![Page 1: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/1.jpg)
Introduction to Programming the WWW ICMSC 10100-1
Winter 2004Lecture 3
![Page 2: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/2.jpg)
2
Today’s Topics
• Text formatting Fonts, colors Control white space and special characters
• Images
![Page 3: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/3.jpg)
3
Reminder
• Hw1 due this Thurs.• MacLab tutorials• Register online• Make an appointment if you need help
![Page 4: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/4.jpg)
4
Fonts
• Basic tag: <font></font> formats contained text
• Attributes face size color
![Page 5: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/5.jpg)
5
Font faces
• The face attributes tells browser what font face (or "typestyle") to use for the text
• Fonts installed on browsers varies widely: age, platform, user preferences
• It is best to specify type faces in groups since different computers use different type fonts:
face=“Arial, Helvetica, Geneva, sans-serif” face=“Times, Courier, Courier New, serif”• Browsers select a default if none of the faces are
found
![Page 6: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/6.jpg)
6
Font faces (cont’d)
• Best to stick with “safe” fonts and use other features for effect (HTML pp. 26-27)
• Generic font families sans-serif fonts: Arial, Helvetica, Geneva, etc serif fonts: Times, Times New Roman monospaced fonts: Courier, Courier New Suggestions
• serif for body, sans for title• use <tt></tt> for monospaced
![Page 7: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/7.jpg)
7
Font sizes
• Size is controlled by the size attribute Can specify an “absolute” size
• value of “1” through “7”, “3” indicates normal• depends on browser and font face
Can specify a “relative” size• value from “-2” to “+4”• This is relative to the current font size
• Example: font_example.html
![Page 8: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/8.jpg)
8
Font colors
• Controlled with the “color” attribute Most browsers recognize a list of text names
• aqua, black, blue, green, red, etc• See HTML p. 43 for a list
Also recognize RGB codes in hexadecimal Prefer to use 216 “Web safe” colors
• They are fairly consistent across platforms• Ref: 216 Web-safe color table
![Page 9: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/9.jpg)
9
Hexadecimal Colors
• hexadecimal notation Base 16 instead of 10 (uses 0 - 9 plus A - F) “FF” = 15 * 16 + 15 * 1 = 255; “13” = 1 * 16 + 3 = 19 Use “#” followed by three two-digit numbers in
sequence for a color• E.g: red = #ff0000
In total, we have 16,777,216 colors (224) (why?) Example:
• colors.html• bgcolorexample.html
![Page 10: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/10.jpg)
10
A note about fonts
• <font></font> is deprecated Still part of HTML standard but will be removed in the
future Cascading Style Sheets (CSS) is a better solution
• Why deprecated elements? Easier to “get going” than CSS Still be recognized by browsers for a good while Lots of existing HTML uses them, so you should be
able to read/understand that code• Ref: Break the <font> Habit
![Page 11: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/11.jpg)
11
Controlling white space
• HTML browsers do their own thing with white space Example: whitespace.html
• There are some ways around this: nonbreaking white space: line breaks: <br> block quotes: <blockquote> preformatted text: <pre> preformatted plain text: <plaintext> (obsolete)
![Page 12: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/12.jpg)
12
Text styles
• Styles bring better readability• Content-based text styles
The style tags have specific usage or meaning Can be rendered in different ways by browsers
• Physical styles Tell browser to display text in a particular physical
style
• Example: textstyle.html
![Page 13: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/13.jpg)
13
Special Text Characters• Special characters include those
Can not be typed from keyboard. e.g: ® Have special meaning. e.g: <, >, &
• The solution is using character entity character reference
• consists of an ampersand (&), a pound sign (#), a numerical value, and a semicolon (;). for example, < is <
• Numeric value is the character position number in ASCII table entity reference
• consists of an ampersand (&), a character string, and a semicolon (;). for example, < is <
• Example: specialchar.html
![Page 14: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/14.jpg)
14
Images
• Background images• Inline images
specifying a source file flowing text size and other attributes
![Page 15: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/15.jpg)
15
Background images
• Set with the background attribute of body• Can be used along with bgcolor• The picture is tiled to fill the screen
Make sure the tiling looks nice Make sure the image doesn’t conflict with text
• Make the file be small for fast downloads• Example:
backgoundexample.html
![Page 16: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/16.jpg)
16
Inline images
• Use the standalone <img> tag with attributes to control: image file to include (required) alternate text if image is not displayed
(required) Border and spacing image alignment within text height and width of image
![Page 17: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/17.jpg)
17
Including the file
• src attribute specifies the image file• Can be:
URL for online file (this can be risky!) local file with absolute or relative path
• alt attribute gives alternate text: text-only browser error loading image voice-text converter
• Example: imgexample.html
![Page 18: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/18.jpg)
18
Image alignment
• To control over the alignment of images with the surrounding text default alignment is typically ugly
• The align attribute helps “left” and “right” push image to edge and flow
text around it “bottom”, “top”, “middle” are used if image
appears within the text• Example:
image-examples.html Images.html
![Page 19: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/19.jpg)
19
Image border and spacing
• The border attribute Control the thickness of the border The value is an integer in pixels (default is 0) Useful when rendering image as hyperlink
• The hspace and vspace attributes Specify the number of pixels of extra space to leave
between the image and the text on its left and right sides
• Example: Image-border-spacing.html
![Page 20: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/20.jpg)
20
Resizing the image
• Specify the height and width• Preserve the aspect ratio• This affects the size the image appears,
not the size of the file Use Photoshop or other tool to create smaller
image file with coarser resolution, etc
• Example: imgexample_resize.html
![Page 21: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/21.jpg)
21
Image File Formats
• GIF: Graphics Interchange Format
• JPEG: Joint Photographic Experts Group
• PNG: Portable Networks Graphics
![Page 22: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/22.jpg)
22
GIF (Graphics Interchange Format)
• Uses an adaptive 8-bit color palette 256 colors at most
• Especially suitable for line art and cartoons
• Can work well for some photographs• Patent issues
LZW algorithm for image compression
![Page 23: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/23.jpg)
23
GIF (cont’d)
• GIF dithering in photos Example: gifdithering.html
• Image compression is lossless• Coo features
Interlaced GIF Transparent GIF Animated GIF
![Page 24: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/24.jpg)
24
Interlaced GIFs
• Displays images incrementally equals to progressive JPEG example: car-interlaced.gif
• Gives users something to look at while the image is still downloading
• Any GIF image can be converted to an interlaced GIF Tools: GiFFY, convert
![Page 25: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/25.jpg)
25
Transparent GIFs
• Transparent regions in an image allow the background color or pattern of a Web page to show through
• Any GIF image can be made transparent by specifying one color in the image that defines its transparent regions
• How to make transparent GIFs? The background of a photograph can be made transparent
after some graphics editing
• Examples transparent-background.html transparent-foreground.html
![Page 26: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/26.jpg)
26
Animated GIFs
• The GIF file format supports cartoon animations• An animated GIF is stored in a single GIF file• Use same rule to display an animated GIF• Tools to create animated GIF images
Animagic GIF
• Examples Rolling Star Traffic Light
![Page 27: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/27.jpg)
27
JPEG (Joint Photographic Experts Group)
• Uses a fixed 24-bit color palette (millions of colors)
• Especially suitable for high-resolution photographs
• Uses lossy file compression trades image quality for memory savings very good for minimizing bandwidth you control the trade-off when you save the image
• Example: lossy.html Lossy compression only supported by JPEG
![Page 28: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/28.jpg)
28
PNG(Portable Network Graphics)
• W3C free stand-in format for GIF• Often smaller than GIF• Lossless (like GIF)• Does not support animation
![Page 29: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/29.jpg)
29
Thumbnail previews
• Use lossy file compression to create a small (light bandwidth) thumbnail version of the original image Usually make the thumbnail sketch a link to a
big sized image (bandwidth intensive) Users can decide if they want to click through
to the original image• Example
thumbnail.html
![Page 30: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/30.jpg)
30
How to make thumbnails
• Load image in a program (e.g. Photoshop)• Reduce the image quality under the save
options• Set a small height and width in the page• Will be covered in the PhotoShop tutorial
![Page 31: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/31.jpg)
31
Convert image files
• Use the command “convert” in Linux Part of Image Magic installed in our department Linux system Can get (via fink) version for Mac OSX can reduce image quality, do interlacing convert -quality 10 foo.jpg foo.tn.jpg More details about how to use “convert”
![Page 32: Introduction to Programming the WWW I CMSC 10100-1 Winter 2004 Lecture 3](https://reader035.vdocuments.mx/reader035/viewer/2022062412/5a4d1af37f8b9ab05997f8ba/html5/thumbnails/32.jpg)
32
Battling bandwidth limitations
• Images consume more bandwidth than text files, so use images no larger than 30-40KB whenever possible dial-up users have to wait for image files >= 100KB
• Always specify height and width attributes for images so the browser can “work around” each image while it is downloading
• Don’t put any large images at the top of a Web page
• Use interlaced GIFs and progressive JPEGs