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

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 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 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 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: 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

Documents

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