Week 2

Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 1

Some More About You

Median Rank

HTML CSS Javascript PhP MySQL Design SEO Mobile Apps

4

3

2 2 2 2

1 1

n = 37

A Message From The Dean

Recap

• Introductions • Class Objectives• XAMPP Review• Stuff about WWW & HTML• HTML Crash Course sections

– Introduction to HTML– How to code a Web Page (partial)

Agenda

• Continue HTML Crash Course sections– How to code a Web Page– How to code tables

• CSS Crash Course sections– Introduction to CSS– How to work with CSS– How to code selectors– How to work with text & lists

Some stuff about Today

• We will build and style Mike’s Bait & Tackle shop web app (pages 173-7) – Home page: index.html – About us page: about.html

• You will need to use 2 image files emailed to you. – face.jpg– star.gif

• For homework you will (1) refactor CSS code and create separate external link and (2) you will apply CSS styling to table in about.html in same file





*Updates for this class

• XHMTL rules supersede by HTML5 and will be noted where appropriate


Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 12


Tags that create lists

Tag Description

<ul> Creates an unordered list.

<ol> Creates an ordered list.

<li> Creates a list item for an unordered or ordered list.

<dl> Creates a definition list. It contains pairs of <dt> and <dd> tags.

<dt> Creates a term in a definition list.

<dd> Creates a definition in a definition list that’s indented.


Examples of list tags <ul> <li>Unordered List</li> <li>Ordered List</li> <li>Definition List</li> </ul> <ol> <li>XHTML</li> <li>CSS</li> <li>JavaScript</li> </ol> <dl> <dt>Local Area Network</dt> <dd>A network of computers directly connected to each other.</dd> <dt>Wide Area Network</dt> <dd>A network of LANs connected by routers.</dd> </dl>


The lists in a web browser

A little more about Lists1. Go to a breakfast meeting.2. Get a haircut at lunch.3. Go shopping after work and

buy:• French’s Frogs’ Legs• Spamburger Helper• Chemical Cola• Bucket of Lowfat Lard

<ol> <li>Go to a breakfast meeting.</li> <li>Get a haircut at lunch.</li> <li>Go shopping after work and buy: <ul> <li>French's Frogs' Legs</li> <li>Spamburger Helper</li> <li>Chemical Cola</li>

<li>Bucket of Lowfat Lard</li> </ul> </li> </ol>

Exercise #2




Common XHTML character entities

Entity Character

& &

< <

> >

© ©

® ®

™ ™

¢ ¢

° º

± ±

A non-breaking space that will always be displayed.


Exercise #3






Attributes of the <a> tag

Attribute Description

href Specifies the URL for a link.

target Specifies where the destination document should be loaded.

name Creates an anchor within a web page.




The <a> tags in a web browser

More on Document Relative Links

Creating hyperlinks from sourcepage.html to other pages in the site when Destination page is in the same directory folder as source page

<a href="page1.html">Go To Page 1</a>

Document-relative links use directions from the source page to the destination page.

Adapted from MediaCollege.com


Creating hyperlinks from sourcepage.html to other pages in the site when Destination page is in a folder inside the source page's folder

<a href="directory2/page2.html">Go To Page 2</a>




Creating hyperlinks from sourcepage.html to other pages in the site when destination page is in a folder outside the source page's folder using special instruction (../)

<a href="../directory3/page3.html">Go To Page 3</a>

<a href="../../index.html">Go To The Index Page</a>



Site-Root Relative Links

The link begins at the same level as your domain (mysite.com) and works down the path <a href="/main-directory/directory4/page4.html">Go To Page 4</a>

Site-root-relative links use a single forward-slash ( / ) to signify the instruction


Exercise #4


Q: What type of link are these?




Attributes of the <img> tag


src The URL of the image to display.

alt Alternate text to display in place of the image. This text is read aloud by screen readers.

longdesc A long description of the image.

height The height to use for the image in pixels or a percentage.

width The width to use for the image in pixels or a percentage.


Image files


Image formats supported by most browsers GIF (Graphic Interchange Format)

JPEG (Joint Photographic Experts Group)

PNG (Portable Network Graphics)

Exercise #5




The tags for working with tables

Tag Description

<table> Marks the start and end of a table.

<tr> Marks the start and end of each row.

<th> Marks the start and end of each heading cell within a row.

<td> Marks the start and end of each data cell within a row.


Common attributes of the <table> tags


border The thickness of the cell borders in pixels.

cellspacing The space between table cells in pixels.

cellpadding The padding between the cell borders and the contents of the cells.

width The width of the table in pixels or a percentage.

summary A text description of the contents of the table.

Common attributes of the <table> and <tr> tags


align Controls the horizontal alignment of the content in the row.

valign Controls the vertical alignment of the content in the row.

A little more on Tables

Tables are built horizontally, one row at a time– Rows get divided into columns

The content of a table is not shown until the entire table is loaded

– If you have extremely long pages, you should divide it into two or more tables - allows the user to start reading the upper content while the rest of the page is loading.


The tags for a simple table <table border="1" cellspacing="1" cellpadding="3" summary="First Quarter Sales By Region"> <tr align="center"> <th>Region</th> <th>Jan</th> <th>Feb</th> </tr> <tr align="right"> <th>West</th> <td>$15,684.34</td> <td>$18,467.86</td> </tr> <tr align="right"> <th>Central</th> <td>$22,497.14</td> <td>$13,371.34</td> </tr> </table>


The table in a web browser


Common attributes of the <th> and <td> tags


colspan Causes a cell to span multiple columns.

rowspan Causes a cell to span multiple rows.

align Controls the horizontal alignment of the content of the cell.

valign Controls the vertical alignment of the content of the cell.




The table in a web browser

Exercise #6



HTML5 &The Document Object Model

Web Technology Stack

HTML

CSS

JavaScript

Structure – What does this logically mean?

Presentation – What does it look like?

Behavior – What does it do?

Richness of the

Experience

PHP

MySQL

Behavior – What does it do?

Data – What does it know?

Quiz: Logical or Presentation

source: P. Griffiths, "HTML Dog: The Best-Practice Guide to XHTML&CSS, " New Raider, 2007

Quiz: Logical or Presentation

source: P. Griffiths, "HTML Dog: The Best-Practice Guide to XHTML&CSS, " New Raider, 2007

The stillbirth of Cascading Style Sheets

• Created and did not published) style sheet language when inventing HyperText Markup Language in 1990– Fundamental belief: User will want

to control the styling

Reasons why CSS is the bastard child

• Browsers implemented CSS incorrectly and patchy CSS support creates inconsistencies

• Authors' lack of familiarity with CSS syntax and required techniques

• Poor support from authoring tools


Chapter 5

A crash course in CSS



A web page before CSS has been applied


The same page after CSS has been applied



The parts of a CSS rule set

h1 { color: blue; font-size: 14pt;}

selector

valueproperty

declaration


Another CSS rule set body { margin-top: 0; background-color: dodgerBlue; font-family: Georgia, "Times New Roman", Times, serif; font-size: 10pt; }

A CSS rule set with a complex selector h1, #footer, .gray { color: gray; }


A CSS comment /* This is a CSS comment */






CSS Media (Device) TypeType Description

all All media type devices

aural Speech and sound synthesizers

braille Braille tactile feedback devices

embossed Paged braille printers

handheld Small or handheld devices

print Printers

projection Projected presentations (slides)

screen Computer screens

tty Fixed-pitch character grid devices (teletypes and terminals)

tv Television-type devices



Common units of measurement

Symbol Name Type

px pixels absolute

pt points absolute

em ems relative

% percentages relative

Four ways to specify font size font-size: 12pt; font-size: 16px; font-size: 1em; font-size: 100%;

Two ways to specify width width: 760px; width: 80%;







The elements displayed in a browser

A little more on tag-based selectors

Adapted from Maxdesign.com.au

A little more on class-based selectors




A little more on universal selector



A little more on descendent selectors



A little more on Child Selectors





Pseudo-class selectors

Name Description

:link A link that hasn’t been visited.

:visited A link that has been visited.

:hover An element when the mouse is hovering over it.

:active An element that’s currently active.

:first-child An element that’s the first child element.




The pseudo-class selectors in a web browser


Cascade is postponed to later



Three of the five generic font families

Name Description

serif Fonts with tapered, flared, or slab stroke ends.

sans-serif Fonts with plain stroke ends.

monospace Fonts that use the same width for each character.

Examples of three common font families Times New Roman is a serif font. It is the default for most web

browsers.

Arial is a sans-serif font. It is widely used.

Courier New is a monospace font.


How to specify a font family font-family: "Times New Roman", Times, serif; font-family: Arial, Helvetica, sans-serif; font-family: "Courier New", Courier, monospace;

How to specify font styles, weights, and variants font-style: italic; font-weight: bold; font-variant: small-caps;


How to specify font size and line height font-size: 12pt; font-size: 150%; font-size: 1.5em; /* same as 150% for font-size */ line-height: 14pt; line-height: 120%; line-height: 1.2em; /* same as 120% for line-height */


The syntax for the shorthand font property font: [style] [weight] [variant] size[/line-height] family;

How to use the shorthand font property font: italic bold 14px/16px Arial, sans-serif; font: small-caps 150% "Times New Roman", Times, serif; font: 90%/120% "Comic Sans MS", Impact, sans-serif;

Exercise #8





How to transform text text-transform: uppercase;

Valid values uppercase lowercase capitalize none

How to add decorations to text text-decoration: underline;

Valid values underline overline line-through blink none


How to indent the first line of text text-indent: 2em; text-indent: 25px; text-indent: 10%;

How to horizontally align text text-align: left;

Valid values left center right justify


The XHTML for one heading and three paragraphs <h3>Mike's Bait & Tackle Shop</h3> <p>We have all the gear you'll need to make your next fishing trip a great success!</p> <p class="contact"><a href="contact.html">Contact us</a> to place your order today!</p> <p class="copyright">© 2008</p>

The CSS for the text h3 { text-align: center; text-transform: uppercase; text-decoration: underline overline; } p { text-indent: 2em; } .contact { text-indent: 0em; } .copyright { text-align: right; }


The text in a browser

Exercise #9






XHTML for a list example <ol> <li>Windows</li> <li>Mac OS</li> <li>Linux</li> </ol> <ul> <li>Internet Explorer</li> <li>Firefox</li> <li>Safari</li> </ul>

CSS for a list example ol { list-style-type: upper-alpha; } ul { list-style-type: circle; }


The list example displayed in a web browser


How to use an image as a bullet list-style-image: none; /* default value */ list-style-image: url("star.gif");

An image as a bullet in the web browser

Exercise #10


Homework

1. Refactor CSS code done in class and create main.css and create external link to both home and about web pages

2. Apply CSS styling rules to table in about web page and place new styling rules in main.css
