13 February Building a Web Page HTML Files
13 February Building a Web Page
HTML Files l Two types of information l l l Text Instructions on how to display Instructions are in the form of tags l Tags are indicated by < >
Processing HTML Interprets HTML Performs the actions BROWSER HTML processor (software prgram) HTML tags instructions data text, pictures, etc.
General Structure: HTML Page <html> <! --- most important item in head is the title --- > <head> <meta content="text/html"> <title>Put your title here</title> </head> <! --- body is where the “good stuff” is --- > <body> What will appear on the page Here … and there </body> </html> WARNING: This is not a complete page. It will not work.
Observations l Two types of commands l l l Single commands < command > Start/end commands <c>. . </c> 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? l l l 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 http: //www. htmlcodetutorial. com/ Practice http: //www. w 3 schools. com/html/default. asp Cheat Sheet: Bare Bones Guide to HTML http: //werbach. com/barebones/download. html
Special symbols l l l < and > are special symbols with special meanings How would you print A < B ? Suggestions? < for < and > for > & is an escape symbol, which means that it is handled specially l Means that you need a special way to display “&” too: &
Fundamental Page Elements l Within <head> l l <title> -- what will appear at the top of the window Within <body> l Attributes on <body> l l l Background color or picture Colors for links Will discuss colors and pictures later
Text Attributes l Effects l l Alignment ALIGN=LEFT|RIGHT|CENTER|JUSTIFY l l Bold <b> </b> Italic <i> </i> Underline <u> </u> Attribute on paragraph, heading, … Font <font> </font> with attributes l l l face color Size l More modern way of defining many attributes is a style sheet, which collects the information and let’s you reuse it l Let’s do formatting without Mozilla composer Can use cheat sheet: http: //werbach. com/barebones/download. html l
Structural Components l Headings <h> </h> Citations <cite> </cite> Quotations <q> </q> l Why do you want this instead of just format? l l Presentation – how it looks Semantics – what it means
HTML Getting You Down? l Humor Break
Lists and Tables l l Regular text is a paragraph Lists are more fixed formats l Ordered l l l Unordered l l l Numbers or letters <ol> <li> </ul> Definition l l l Bulleted <ul> <li> </ul> Terms and definitions <dl> <dt> </dt> <dd> </dl> Tables l l l Two dimensions Format options Headings
Tables l Need to define l l l Formatting l l l Table <table> </table> Row <tr> </tr> Header (optional) <th> </th> Data <td> </td> Caption (optional) <caption> </caption> size Borders Can contain anything l l l Other tables Pictures …
Animation on a Computer l l Let’s look at some animated clips What did you see? l l l How many colors? Motion? Is sound the same?
Colors in HTML l l What are three primary colors? HTML uses an RGB (Red-Green-Blue) definition Values are 0 -255. (0, 0, 0) and (255, 255) represent black and white. Which is which? l l Mixing paint vs. mixing light (0, 0, 0) = black; (255, 255) = white
How to indicate colors l l There a set of predefined colors that you can use Or you can write them out as rgb (200, 130, 125)
Referencing Other Pieces l l 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 l l l Accessing local information Accessing remote information How does networking work?
Links l General model l Anchor to click on Pointer to the page Types l Internal l Page Site External
HTML Internal Links l l Internal points are called anchors To create an anchor point l l To move to an anchor point l l l <a name=“anchor"></a> <a href="#anchor">Link text</a> What differences do you observe? Two items l l Anchor is a point, not a piece of text Anchor points have a “#” pre-pended to the name
HTML Local Links l Other pages that are always kept with the current one l l l Not only the same machine, but the same folder All pages are automatically defined as access points Connect with the same access tag l <a href=“other page">Link text</a>
Pictures l l Inserting with <img> tag Positioning Borders Size
- Slides: 23