Calendar shuffle I shifted a few topics around for this week and next Grading Progress Clicker...

Announcements

Calendar shuffle I shifted a few topics around for this

week and next Grading Progress

Clicker Registration DONE

GoPost Biographies DONE

Week 1 Discussions Started

Lab 1 and 2 Started

2012-01-23 Katherine Deibel, Fluency in Information Technology 1

XHTML—The Language of the Web(continued)

Fluency with Information Technology


Katherine Deibel

INFO100 and CSE100

Katherine Deibel

Last time…

Introduced HTML/XHTML Syntax rules

Whitespace

Basic tags Today

More tags

More files

Style


Making the web "webby"No being bitten by radioactive spiders


Many many files

A Web page can be made up of any number of files: The html file itself

Several image files

External CSS file(s)

External JavaScript file(s)


Single Pages are Dull

The web is about linking multiple web pages together Linking to other pages on a site

Linking to other sites Links also go to non-HTML files

Images

Word documents

PDFs

Etc.


Link: <a>

Link, or "anchor", to another page Requires a hyperlink reference (use

href attribute) to specify the destination URL<p> What would you do for a <a href="http://www.icecreamusa.com/klondike/"> Klondike Bar</a>?</p>


Tag Attributes & Values

href is an attribute of anchor; a URL is its value

<a href="http://pixar.com">Pixar</a> Sometimes we need attributes,

sometimes not href is used for describing paths to

other files


PathsAbsolute vs. Relative


Katherine Deibel, Fluency in Information Technology 10

Tags with Paths

Some HTML tags point to other files <a href="a web page file"></a>

<img src="an image file" />

<link href="" rel="stylesheet" type="text/css" />

A path describes where the browser should look for a file The path is usually a value given to an

href or src attribute

2012-04-06

Specifying Paths

Absolute: External Web sites<a href="http://www.washington.edu">UW</a>

Relative: Within same Web site

<a href="index.html">Home</a>


Absolute & Relative Pathnames

absolute path: complete URL/path starting from the root folder http://courses.washington.edu/fit100/sp11/index.php

http://courses.washington.edu/fit100/sp11/images/

relative path: path that is relative to some folder index.php

images/

../css/


Use Relative Paths If Possible

Relative paths make it easy to move whole websites.

For example, if my website moved from foo.com to bar.com, then the following would cease to work:

The right way:


<a href="page2.html">Next page</a>

<a href="http://www.foo.com/page2.html">Next page</a>

Example


Referencing magritte.html from russell.html: The biography of

<a href="../art/magritte.html">Magritte</a>

Relative Path From A To B

Figure out how to get to the folder containing B from the folder containing A.

To go up a level, refer to the parent folder as two dots (../).

To go down a level, refer to the subfolder's name.

Use slashes after each folder listed.


Moving Across Directories


Starting from russell.html <a href="../art/magritte.html">Magritte</a>

Curr. Dir.: bios/sci/




Curr. Dir.: bios/

.. moves us up one directory level




Curr. Dir.: bios/art/

/art moves down intothe art directory

Images<img src="…" alt="…’ />


Image: <img />

Inserts an image Requires the src

attribute to specify the path to the image file

src acts basically the same as href


<img src="monorailpanda.jpg" /><img src="images/monoraildog.jpg" /><img src="http://zapatopi.net/blog/monorailcat.jpg" />

Common Image File Formats

.gif Graphics Interchange Format

Pronunciation: jif (like the peanut butter) .jpg, .jpeg

Joint Photographic Experts Group is the name of the committee that created the standard

Pronunciation: JAY-peg .png

Portable Network Graphics

Pronunciation: ping or Pee-Enn-Gee2012-04-06 Katherine Deibel, Fluency in Information Technology 21

The alt attribute

What if an img does not display?Cannot be seen by the user?

The alt attribute provides an alternative text description

<img src="…" alt="brief description" />


alt in action


alt in action


<img alt="Photo of myself holding Gus, my little brother who is a shih tzu." src="…" />

What goes in alt?

A brief description of the image Bad:

A yellow diamond with a black s-shaped curve with an arrow on top

Good:Road sign: a winding curve


What goes in alt?

All img tags should have alt If image is only for layout purposes,

leave the alt value blank

<img src="spacer.png" alt="" />


CSS—Stylizing the WebFluency with Information Technology


Katherine Deibel

INFO100 and CSE100

Katherine Deibel


Our Web Pages are Bland

The pages you will make for the XHTML Lab (lab 4) are… very very VERY DULL! No colors

No fancy fonts

Simple layouts

Look very 1997 Where’s the style?

2012-01-23

Cascading Style Sheets

The idea: Separate content from form Content: What is said on a page

Form: How the page looks Appearance is set in one place

Easy to set the style for multiple pages

Style sheets can be swapped for an instant change in appearance


CSS Zen Garden

Website that shows the power of CSShttp://www.csszengarden.com/ Same HTML

Multiple variations on the CSS Let’s see what CSS can do


CSS Zen: Raw HTML Page


CSS Zen: Simple


CSS Zen: Make ’em Proud!


CSS Zen: Under the Sea


h2 {line-height:1.5em;margin: 10px 10px 10px 0;font-size: 1.3em; color: #fff;background-color: #036;padding: 0 5px;border: 1px solid #656C43;

}

What's a Style?

A style is a list of formatting rules Separate from the content

Applied to selected content


h2 {line-height:1.5em;margin: 10px 10px 10px 0;font-size: 1.3em; color: #fff;background-color: #036;padding: 0 5px;border: 1px solid #656C43;

}

What's a Style?


h2 {line-height: 1.5em;margin: 10px 10px 10px 0;font-size: 1.3em; color: #fff;background-color: #036;padding: 0 5px;border: 1px solid #656C43;

}

What's a Style?


<h2><a name="Overview">Overview</a></h2>

What's a Style Sheet?

A style sheet is a list of styles Available for that document

Can be applied to other documents as well Styles can be modified New styles can be added

Changes take effect throughout your site!


HTML Style Rules

th {background-color: blue;} Style rule Selector Declaration Property Value


th cell th cell

td cell td cell

th cell th cell

td cell td cell

Unstyled Styled

HTML Style Rules



th cell th cell

td cell td cell

th cell th cell

td cell td cell

Unstyled Styled

Where Goeth Styles?


Three Ways to Include Styles

Style rules within a single tag Styles in the page’s <head></head> Separate CSS file with styles


Styling a Single Tag

All HTML tags have a style attribute The attribute’s value is a list of style

rules separated by semicolons ( ; ) Affects what is inside the tag


<span style="color:red; font-style:italic"> <p>This is red italic text</p> <p style="color:blue;">This is blue italic text</p> <p style="font-weight:bold;">This is red, bold, italic text</p></span>

Example


<span style="color:red; font-style:italic"> <p>This is red italic text</p> <p style="color:blue;">This is blue italic text</p> <p style="font-weight:bold;">This is red, bold, italic text</p></span>

This is red, italic textThis is blue, italic textThis is red, bold, italic text

Styles in <head></head>

Add a list of styles and style rules to the head of an HTML page

Affects only that page


<html><head> <style type="text/css"> h1 { /* H1 in orange text and centered */

color:orange; text-align:center; }

</style></head><body>…








Style tag requires a value indicating that

it is CSS syntax








Text between /* and */ are comments and are

ignored by browsers

Example


<html><head> <style type="text/css"> body { background-color: blue} h1 {

color: yellow; text-align: center; } p {

color: white; font-style: italic; } </style></head><body> <h1>Header 1</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </body></html>

Header 1Paragraph 1

Paragraph 2

Linking to a CSS Style Sheet Separate text file with styles Linked to in the header field Allows multiple pages to share styles Syntax:

Link tag: <link … />

href: file path to css file

rel: relationship to page (stylesheet)

type: type of file (text/css)


<link href="STYLEFILE.css" rel="stylesheet" type="text/css" />

When To Use

Style rules within a single tag Special cases of formatting

Styles in the page’s <head></head> Unique page requirements

Separate CSS file with styles Always try to use these

Makes managing a site much easier


CSS SelectorsStyling the Specific


Three Types of Selectors

By element Apply to all instances of a particular

element By id

Apply to all content with a specific id By class

Apply to specified instances of any tag


Select by element (tag)

Apply to all instances of a specific tag

All first-level headers will be in italics and in red text

All paragraphs will be indented by 5 pts and will have a top margin of 10 pts


h1 { font-style: italic; color: red; }

p { text-indent: 5pt; margin-top: 10pt; }

Select by id


<div id="menu"> <h3>INFX 503 <ul> <li><a href="index.shtml"> Home</a></li> <li><a href="overview.shtml">Course Overview</a></li> <li><a href="comms.shtml">Course Communications</a></li> <li><a href="instructor.shtml">Instructor</a></li> …</div>

#menu{ text-align: left; background-color: #036; color: #FFFF99; width: 200px; float: left; padding: 20px 10px;}

css

html

Select by id


<div id="menu"> <h3>INFX 503 <ul> <li><a href="index.shtml"> Home</a></li> <li><a href="overview.shtml">Course Overview</a></li> <li><a href="comms.shtml">Course Communications</a></li>

<li><a href="instructor.shtml">Instructor</a></li> …</div>

#menu{ text-align: left; background-color: #036; color: #FFFF99; width: 200px; float: left; padding: 20px 10px;}

css

html

#name indicates an id in cssid is an optional attribute in

html tagsIdeally, each tag on a page

should have a unique id

Select by class


<p> A powerful feature of CSS is the <span class="keyterm">class selector</span>. Class selectors are based on HTML tag <span class="keyterm">class attributes</span>. They can be used to assign styles to a set of elements that are defined in the markup.</p>

html.keyterm { line-height: 200%; font-weight: bold; font-style: italic; color: red;}

css

A powerful feature of CSS is the class selector. Class selectors are

based on HTML tag class attributes. They can be used to assign

styles to a set of elements that are defined in the markup.

Renders in the browser as:

Select by class


<p> A powerful feature of CSS is the <span class="keyterm">class selector</span>. Class selectors are based on HTML tag <span class="keyterm">class attributes</span>. They can be used to assign styles to a set of elements that are defined in the markup.</p>

html.keyterm { line-height: 200%; font-weight: bold; font-style: italic; color: red;}

css

A powerful feature of CSS is the class selector. Class selectors are

based on HTML tag class attributes. They can be used to assign

styles to a set of elements that are defined in the markup.

Renders in the browser as:

.name indicates an id in cssclass is an optional attribute in html tagsMultiple tags can be in the same classA tag can be in multiple classes:

<div class="classA classB classC"> … </div>


Combining Selectors

Limit to a specific class and tage.g., only for links that go offsite (a class)

2012-01-23

a.offsite { font-style: italic; color: yellow; }

Limit to a specific element in a specific divisione.g., only for first-level headers in cast list

h1 { font-size: 150%; font-weight: bold; }

#castlist h1 { font-size: 100%; font-style: italic; }


Combining Selectors

2012-01-23




Heading 1

Heading 1

General first-level header

Cast list first-level header


Combining Selectors

2012-01-23




Heading 1

Heading 1

Note that the cast list heading is also in boldface due to the previous h1 style.

Styling multiple selectors

Style multiple selectors by separating with commas


All Heading 6's

All Heading 5's

All Heading 4's

All Heading 3's

All Heading 2's

All Heading 1's

h1, h2, h3, h4, h5, h6 { font-style: normal; font-weight: bold; background-color: blue; color: yellow; text-align: center;}

CSS Layout


Blocks versus Inline

The Very Basics of CSS Layout

Two fundamental types of tags Blocks

Starts on a new line

Spacing above and below Inline

Does not trigger a new line

Flows with surrounding elements


Blocks versus Inline


Block (space above and below)

Inline

Block Tags

p (para) h1, h2, h3, etc. table hr (horiz. rule) ul (unordered list) ol (ordered list) li (list item) div (general block)


Inline Tags

a (links) img (image) b, i, em, strong acronym span (apply style to part of a page)


<p>The dodo (<span class="speciesname">Raphus cucullatus</span>) was a flightless bird found in the

…</p>

Padding and Margins

Block elements have both internal and external spacing around them

Padding: Distance between internal content and

block border Margin:

Distance between block border and external content


Padding versus Margins


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam felis dui, rutrum vel vehicula ut, posuere eu lectus. Integer sed arcu ac sapien blandit cursus sed ac augue. Etiama leo ligula. Fusce tristique semper urna, in rhoncus purus vehicula non. Maecenas in mi a metus pretium luctus. Aliquam vel turpis ipsum, nec suscipit magna. Etiam fermentum porta sapien, nec tinciduntleo laoreet eu.

Morbi egestas pretium lectus in auctor. Nulla elit tortor, lobortis ac ultricies, adipiscing nec nulla. Sed quis augue dolor, ac congue orci. Cum sociis natoque penatibus et magnis dis parturient montes, ….

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog





MARGIN MARGIN MARGIN MARGIN







PADDING PADDING PADDING





padding: 15px;

margin: 0px;Padding



Margin

padding: 0px;

margin: 15px;

Property: Float

Blocks and images can be set to float to the right or left

Text will flow around the float Usage:


float: right;

CSS Aesthetics


Fonts, Colors, and Borders

Fonts

CSS provides control over multiple aspects of fonts font-family (e.g., Arial or Serif)

font-size (100% or 12pt)

font-style (e.g., italic or normal)

font-weight (e.g., bold or normal)


Colors

Several attributes require color values: p {color: value; }

sets the color of text in paragraphs

h1 {background-color: value; } sets the background color of first-level headers

Several methods for entering color values: Predefined color names

RGB values

Hexadecimal


Predefined Web Colors

147 colors have been predefined for use in HTML and CSS

Examples


Color Name Color RGB Hex

Orange rgb(255,165,0) #ffa500

ForestGreen rgb(34,139,34) #228B22

Purple rgb(128,0,128) #800080

Red rgb(255,0,0) #ff0000

DarkGray rgb(169,169,169) #a9a9a9

Brown rgb(165,42,42) #a52a2a

DodgerBlue rgb(30,144,255) #1e90ff

LightPink rgb(255,182,193) #ffb6c1

RGB values

Colors can be defined as a mixture of red, green, and blue saturation:

rgb( vR, vG, vB);

vR is value of red from 0 to 255

vG is value of green from 0 to 255

vB is value of blue from 0 to 255

Example: sets paragraph text to greenp { color: rgb(0,255,0); }


Hexadecimal Colors

CSS can also accept colors as hexadecimal numbers Take the RGB value of the color

Convert vR, vG, and vB to hexadecimal

(see next slide)

Enter colors as two-digit hex values (six digits in all) preceded by a #▪ Black text: color: #000000;

▪ Cyan background: background-color:#00ffff;



Hexadecimal Numbers

Hexadecimal numbers (base 16) 0 in decimal is 00 in hex

10 in decimal is 0a in hex

15 in decimal is 0f in hex

16 in decimal is 10 in hex

…

134 in decimal is 86 in hex

…

255 in decimal is ff in hex2012-01-23

Property: Borders

Border attribute takes three values Color

Width (thickness)

Style Examples

border: yellow thin solid;

border: green 6pt dotted;

border: red thin double;


Content

Content

Content

Property: Borders

You can also specify the right, left, top, and bottom borders

Examples border-left: blue dotted thin;

border-left: blue dotted 3pt;border-top: orange double 3pt;

border-left: blue dotted 3pt;border-top: orange double 3pt;border-right: green solid 10pt;


Content

Content

Content

Calendar shuffle I shifted a few topics around for this week and next Grading Progress Clicker...

Documents

Transcript of Calendar shuffle I shifted a few topics around for this week and next Grading Progress Clicker...