introduction to programming the www i cmsc 10100-01 summer 2003 lecture 2
TRANSCRIPT
Introduction to Programming the WWW I
Introduction to Programming the WWW I
CMSC 10100-01
Summer 2003
Lecture 2
2
Today’s topicsToday’s topics
• Fonts (cont’d)
• Lists
• Formatting
• Colors
• Image basics
• Some basic techniques
• Links
3
FontsFonts
• Basic tag: <font></font> formats contained text
• Attributes face,size,color
• Presentational and informational elements
• Browsers font issues
• Deprecated elements and attributes
4
Font facesFont faces
• Controlled with the face attribute.
• See HTML pp. 26-27 for a discussion, list of safe fonts
• Fonts installed on browsers varies widely: age, platform, user preferences
• Best to stick with “safe” fonts and use other features for effect
5
More on font facesMore on font faces
• Arial is a sans-serif font• Times is a serif font• sans-serif vs. serif
Webopedia explanation
• Suggestion: serif for body, sans for title• You should specify a list of fonts for
Windows, Mac, others
• Browsers select a default if none of the faces are found
• See “Web Design” Chapter 3 for guidelines
6
Font sizesFont sizes
• Size is controlled by the size attribute Can specify an “absolute” size• value of “1” through “7”• depends on browser and font face
Can specify a “relative” size• value of “+n” or “-n” for some n• This is relative to the current font size
• Example: font_example.html
7
Font colorFont color
• Controlled with the “color” attribute Most browsers recognize a list of text names• aqua, black, blue, fuchsia, etc• See HTML p. 43 for a list
Also recognize RGB codes in hexadecimal There are 216 “Web safe” colors that are fairly
consistent across platforms• 216 Web-safe color table
• More on colors later
8
Presentation and InformationPresentation and Information
• HTML provides two ways of emphasizing (bold and italic) text: Presentational elements• <b></b> for bold• <i></i> for italic
Informational elements• <strong></strong> is usually bold• <em></em> is usually italic• Gives more information to text-voice conversion
9
Issues with browsers and fonts
Issues with browsers and fonts
• Choice of fonts installed on browsers varies widely based on: Age of browser Platform (Mac, Win, Linux) Overriding user preferences
• To avoid difficulties it is best to: Stick to safe fonts Not rely too much on fonts for effect
10
Deprecated elementsDeprecated elements
• <font></font> is deprecated Still part of HTML standard Could be removed at some (unspecified) time
in the future There is now a better way to do it:• CSS (Cascading Style Sheets)• CSS helps with separating document organization
from document display
11
Why learn/use deprecated elements
Why learn/use deprecated elements
• Easier to “get going” than CSS
• Will still be around and recognized by browsers for a good while
• Lots of existing HTML uses them, so you should be able to read/understand that code
• We’ll switch to CSS later in the quarter
12
ListsLists
• Three kinds of lists: Ordered Unordered Definition lists
• Frequently used in Web programming Sets out big ideas Table of contents List of links
13
Ordered listsOrdered lists
• Used to specify a sequence of things top-ten list set of instructions outline
• Begun and ended with <ol></ol>• Each element in the list is <li></li>• Example:
Orderedlist1.html
14
Attributes for ordered listsAttributes for ordered lists
• We can set two attributes The type of symbols used
• Arabic numerals (type=1, default)• capital or lower case letters (type=A or type=a)• capital or lower case Roman numerals (type=I or type=i)
The start value
• Example: Orderedlist2.html
• These attributes are deprecated and can be controlled better through CSS
15
Unordered listsUnordered lists
• Used for more general collection of items list of links ingredients for a recipe rather than
instructions
• Example Unorderedlist.html
16
Definition listsDefinition lists
• Not just for definitions• Can be for longer descriptions, etc• Uses <dl></dl> tag to begin and end list• Rather than using <li></li> to denote
list items, has terms and definitions <dt></dt> <dd></dd>
• Example: definitionlist.html
17
Some more formattingSome more formatting
• HTML browsers do their own thing with white space
• There are some ways around this: nonbreaking white space: line breaks: <br> block quotes: <blockquote> preformatted text: <pre> Preformatted plain text: <plaintext>
18
Nonbreaking white spaceNonbreaking white space
• The code produces a single white space The ampersand and semicolon are required Useful for inserting spaces by hand
19
Line breakLine break
• We’ve seen <br> already
• It can be used to add multiple sets of spaces
• Use this rather than <p> to add spaces
20
Block quotesBlock quotes
• Sets off a quotation, important note, etc.
• Should be contained within <p></p>
• Usage: <blockquote></blockquote>
• Example: Blockquote.html
21
Preformatted textPreformatted text
• Useful for putting in “visual” poetry or computer code
• Typically appears in a monospaced font
• Usage: <pre></pre>
• Example: Preexample1.html Same code without <pre>
22
Preformatted plain textPreformatted plain text
• <plaintext></plaintext>
• Obsolete already!
• Replaced by <pre>, since it's behavior can be very odd on some browsers
23
ColorsColors
• Names: see HTML p. 43
• Hexadecimal (base 16 instead of 10) uses 0 through 9 plus A through F “AB” = 10 * 16 + 11 * 1 = 171; “13” = 1 * 16 + 3 = 19 To make a color, use three two-digit numbers in
sequence In total, we have 16,777,216 colors (224), why?
• Web-safe colors: subset of RGB colors
• Example: colors.html
24
ImagesImages
• Background images including the file some tips
• Inline images specifying a source file flowing text size and other attributes
25
Background imagesBackground 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 small for fast downloads• Can use with • Example:
backgoundexample.html bgcolorexample.html
26
Inline imagesInline images
• Use the standalone <img> tag with attributes to control: image file to include alternate text if image is not displayed image alignment within text height and width of image• Customize the size of the image
27
Including the fileIncluding 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
28
Image alignmentImage alignment
• 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
29
Resizing the imageResizing 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
30
Text editorsText editors
• If you are working on your own Mac/Windows machine, you will need a text editor Windows Notepad Mac OS9 SimpleText (or OSX in Classic) Mac OSX TextEdit
• Also good to know a Unix text editor - we’ll cover this later
31
Using text editorsUsing text editors
• Windows, Mac OS9 are easy - just type in the html, save as myfile.html, and view
• TextEdit for OSX is a little fussierGo to TextEdit-->Preferences…Select New Document Attributes --> Plain text radio buttonDeselect Saving --> “append .txt extension” check box
32
Introduction to UnixIntroduction to Unix
• Not so easy to begin learning as Win/Mac Very useful in networking, Web servers• We’ll cover some basics
directory structure and navigation copying, deleting files Permissions getting files from home or lab to the right
place on the network See the Perl/CGI book for more information
33
DirectoriesDirectories
• Much like folders in Win/Mac.
• My home directory is referred to as ~hai This is short for /home/hai or something like
that (depends on the system)
• When you log in, you are in your home directory.
34
Basic directory commandsBasic directory commands
• The command ls tells you what is in the current directory
• The command pwd tells you what directory you are in
• The command cd followed by a directory name changes your current directory cd .. goes “up” one directory in the tree cd takes you “home”
35
Making a directoryMaking a directory
• All your homework will be turned in to ~<yourhome>/html/cmsc10100/hw<x>, where x is the number of the assignment.
• From “home”, type in mkdir html (creates the html directory)
cd html (changes to the html directory)
mkdir cmsc10100 cd cmsc10100 mkdir hw1 cd hw1
36
Now what?Now what?
• You are now “in” the directory for your first homework assignment. Type pico Type in a “hello world” html file. Type control-o and then a name for the file.
This saves the file. Check other pico commands online.• Here is a list
Type control-X to exit.