13 February Building a Web Page

HTML Files Two types of information Text Instructions on how to display Instructions are in the form of tags Tags are indicated by

Processing HTML BROWSER HTML processor (software prgram) instructionsdata text, pictures, etc. HTML tags Interprets HTML Performs the actions

General Structure: HTML Page Put your title here What will appear on the page Here … and there WARNING: This is not a complete page. It will not work.

Observations Two types of commands Single commands Start/end commands.. Logically, what is the difference between them? Tags can have additional information associated with them -- attributes Blanks don’t matter

Algorithm exercise: How does Find work? Tags and text are all characters Question: Will Find get words that are tags (e.g., Find on “body”)? Describe the algorithm

HTML Web Resources Tutorial Practice Cheat Sheet: Bare Bones Guide to HTML

Special symbols are special symbols with special meanings How would you print A < B ? Suggestions? < for & is an escape symbol, which means that it is handled specially Means that you need a special way to display “&” too: &

Fundamental Page Elements Within -- what will appear at the top of the window Within Attributes on Background color or picture Colors for links Will discuss colors and pictures later

Text Attributes Effects Bold Italic Underline Alignment ALIGN=LEFT|RIGHT|CENTER|JUSTIFY Attribute on paragraph, heading, … Font with attributes face color Size More modern way of defining many attributes is a style sheet, which collects the information and let’s you reuse it Let’s do formatting without Mozilla composer Can use cheat sheet:

Structural Components Headings Citations Quotations Why do you want this instead of just format? Presentation – how it looks Semantics – what it means

HTML Getting You Down? Humor Break

Lists and Tables Regular text is a paragraph Lists are more fixed formats Ordered Bulleted Unordered Numbers or letters Definition Terms and definitions Tables Two dimensions Format options Headings

Tables Need to define Table Row Header (optional) Data Caption (optional) Formatting size Borders Can contain anything Other tables Pictures …

Animation on a Computer Let’s look at some animated clipsclips What did you see? How many colors? Motion? Is sound the same?

Colors in HTML What are the three primary colors? HTML uses an RGB (Red-Green-Blue) definition Values are (0,0,0) and (255,255,255) represent black and white. Which is which? Mixing paint vs. mixing light (0,0,0) = black; (255,255,255) = white

How to indicate colors There are a set of predefined colors that you can use Or you can write them out as rgb (200, 130, 125)

Referencing Other Pieces Access to pictures and links Most common error Need complete information for an external picture or link Need to make sure local references are moved with the page

Retrieving information on a computer Accessing local information Accessing remote information How does networking work?

Links General model Anchor to click on Pointer to the page Types Internal Page Site External

HTML Internal Links Internal points are called anchors To create an anchor point To move to an anchor point Link text What differences do you observe? Two items Anchor is a point, not a piece of text Anchor points have a “#” pre-pended to the name

HTML Local Links Other pages that are always kept with the current one Not only the same machine, but the same folder All pages are automatically defined as access points Connect with the same access tag Link text

Pictures Inserting with tag Positioning Borders Size