Embed Size (px)
DESCRIPTION
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). Interprets HTML Performs the actions. instructions. - PowerPoint PPT Presentation
Citation preview
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
BROWSERHTML processor
(software prgram)
instructions data
text, pictures, etc.HTML
tags
Interprets HTMLPerforms the actions
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<br>Here … and there</body>
</html>
WARNING: This is not a complete page. It will not work.
Observations
Two types of commands 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?
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
Tutorialhttp://www.htmlcodetutorial.com/
Practicehttp://www.w3schools.com/html/default.asp
Cheat Sheet: Bare Bones Guide to HTMLhttp://werbach.com/barebones/download.html
Special symbols < 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 Means that you need a special way to display “&” too:
&
Fundamental Page Elements
Within <head> <title> -- what will appear at the top of the window
Within <body> Attributes on <body>
Background color or picture Colors for links Will discuss colors and pictures later
Text Attributes Effects
Bold <b> </b> Italic <i> </i> Underline <u> </u>
Alignment ALIGN=LEFT|RIGHT|CENTER|JUSTIFY Attribute on paragraph, heading, …
Font <font> </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: http://werbach.com/barebones/download.html
Structural Components
Headings <h> </h> Citations <cite> </cite> Quotations <q> </q>
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 <ul> <li> </li> </ul>
Unordered Numbers or letters <ol> <li> </li> </ul>
Definition Terms and definitions <dl> <dt> </dt> <dd> </dd> </dl>
Tables Two dimensions Format options Headings
Tables Need to define
Table <table> </table> Row <tr> </tr> Header (optional) <th> </th> Data <td> </td> Caption (optional) <caption> </caption>
Formatting size Borders
Can contain anything Other tables Pictures …
Animation on a Computer
Let’s look at some animated clips 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-255. (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
<a name=“anchor"></a> To move to an anchor point
<a href="#anchor">Link text</a> 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 <a href=“other page">Link text</a>
Pictures
Inserting with <img> tag Positioning Borders Size
