Week 2

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

Median Rank
4
n = 37

3

2 2 2 2

1 1

HTML CSS Javascript PhP MySQL Design SEO Mobile
Apps

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

The HTML for home and about us pages
<!DOCTYPE html>
<html lang="en">


<head>
<title>Mike's Bait and Tackle Shop</title>
<meta charset="UTF-8" />
</head>


<body>

<section id="page">

Slide 8

<header id="header">
</header>

<section id="main">
<nav id="sidebar">
</nav>

<article id="content">
</article>
</section>

<footer id="footer">
</footer>
</section>

</body>
</html>

Slide 9

Chapter 4

A crash course
in XHTML*

Slide 10

*Updates for this class

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

Slide 11

Agenda
· Introduction to HTML
· How to code a Web Page
Þ Head section
Þ Core Attributes
Þ Text
Þ Lists
· How to code tables
· How to code forms

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.

Slide 13

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>

Slide 14

The lists in a web browser

Slide 15

A little more about Lists
1. Go to a breakfast meeting. <ol>
2. Get a haircut at lunch. <li>Go to a breakfast meeting.</li>
3. Go shopping after work and <li>Get a haircut at lunch.</li>
buy: <li>Go shopping after work and buy:
• French’s Frogs’ Legs <ul>
• Spamburger Helper <li>French's Frogs' Legs</li>
• Chemical Cola <li>Spamburger Helper</li>
• Bucket of Lowfat Lard <li>Chemical Cola</li>
<li>Bucket of Lowfat Lard</li>
</ul>
</li>
</ol>

The HTML list for the home page

<h2>New Products</h2>
<ul>
<li>Ultima 3000 Two-handed fly rod</li>
<li>Phil's Faux Shrimp Fly - Size 6</li>
<li>Titanium Open Back Fly Reel –
Black</li>
</ul>

Slide 18

Agenda
Þ Head section
Þ Core Attributes
Þ Text
Þ Lists
Þ Special Characters

Slide 19

Common XHTML character entities
Entity Character
& &
< <
> >
© ©
® ®
™ ™
¢ ¢
° º
± ±
  A non-breaking space that will always be displayed.

Slide 20

Examples of character entities
<h1>Mike's Bait & Tackle Shop</h1>
<p>Here is some sample HTML code:</p>
<p><code><h1>Heading 1 Goes
Here</h1></code></p>
<p> </p>
<p>© 2008 Mike's Bait & Tackle Shop</p>

The character entities in a web browser

Slide 21

<head>
<title>Mike's Bait & Tackle Shop</title>

<body>

</section>

<footer id="footer">
<p class="copyright">© 2008 Mike's Bait &amp
Tackle Shop</p>
</footer>

Slide 23

The HTML for the home page

<p class="first">Welcome to Mike's Bait
& Tackle Shop!
We have all the gear you'll need to make
Your next fishing trip a great success!</p>

<h2>New Products</h2>
<ul>
<li>Ultima 3000 Two-handed fly rod</li>
<li>Phil's Faux Shrimp Fly - Size 6</li>
<li>Titanium Open Back Fly Reel –
Black</li>
</ul>

Slide 24

The HTML for about us page
<h2 class="first">Sales</h2>
<p>Big Mike says sales hit an all time high!</p>

<p> </p>

Slide 25

Agenda
Þ Head section
Þ Core Attributes
Þ Text
Þ Lists
Þ Links

Slide 26

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.

Slide 27

An absolute link to a web page on a different web
site
<p>Search for our books on
<a href="http://www.amazon.com"
target="_blank">Amazon.com</a>.
</p>

Slide 28

A document relative relative link to another web
page in a different directory on our web site
<p>Go view our <a href="../products.html">product
list</a>.</p>

A document relative link to another web page in
the same directory on our web site
<p>Read about the <a href="/services.html">services
we provide</a>.</p>

Slide 29

The <a> tags in a web browser

Slide 30

More on Document Relative Links

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

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>

Adapted from MediaCollege.com


page.

site when Destination page is in a folder inside the source
page's folder
<a href="directory2/page2.html">Go To Page 2</a>



page.

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
Site-root-relative links use a single forward-slash ( / ) to signify the instruction

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>


The HTML for home page
<nav id="sidebar">
<ul class="nav">
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="about.html">About Us</a></li>
</ul>

Q: What type of link are these?

Slide 36

The HTML for About Us page
<nav id="sidebar">
<ul class="nav">
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="index.html">Home</a></li>
</ul>

Slide 37

Agenda
Þ Head section
Þ Core Attributes
Þ Text
Þ Lists
Þ Links
Þ Images

Slide 38

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.

Slide 39

An <image> tag
<p><img src="../images/logo.gif" alt="Murach Logo" /></p>

The image in a web browser

Slide 40

Image formats supported by most browsers
GIF (Graphic Interchange Format)
JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)

Slide 42

<img src="face.jpg" alt="Mike's Face">
<p> </p>

Slide 44

Agenda

Slide 45

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.

Slide 46

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.

Slide 47

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>

Slide 49

The table in a web browser

Slide 50

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.

Slide 51

A table with spanned columns and rows
<tr align="center">
<th colspan="2" rowspan="2">Sales</th>
<th colspan="3">First Quarter</th>
</tr>
<tr align="center">
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
</tr>
<tr align="right">
<th rowspan="3">Regions</th>
<th>West</th>
<td>$15,684.34</td>
<td>$18,467.86</td>
<td>$17,379.67</td>
</tr>

Slide 52

The table tags (continued)
<tr align="right">
<th>Central</th>
<td>$22,497.14</td>
<td>$13,371.34</td>
<td>$25,693.80</td>
</tr>
<tr align="right">
<th>East</th>
<td>$25,741.06</td>
<td>$31,633.25</td>
<td>$26,712.55</td>
</tr>
</table>

Slide 53

The table in a web browser

Slide 54

<img src="face.jpg" alt="Mike's Face">
<p> </p>

<tr align="center">
<th colspan="2" rowspan="2">Sales</th>
<th colspan="3">First Quarter</th>
</tr>
<tr align="center">
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
</tr>

Slide 56

<tr align="right">
<th rowspan="3">Regions</th>
<th>West</th>
<td>$15,684.34</td>
<td>$18,467.86</td>
<td>$17,379.67</td>
</tr>
<tr align="right">
<th>Central</th>
<td>$22,497.14</td>
<td>$13,371.34</td>
<td>$25,693.80</td>
</tr>
<tr align="right">
<th>East</th>
<td>$25,741.06</td>
<td>$31,633.25</td>
<td>$26,712.55</td>
</tr>
</table>

Slide 57

HTML5 &
The Document Object Model

Web Technology Stack
Data – What does it know?

Behavior – What does it do?

Behavior – What does it do?

Presentation – What does it look like?

Structure – What does this logically mean?

Richness
of the
Experience

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

Slide 67

Agenda
· Introduction to CSS
· How to work with CSS
· How to code selectors
· How to work with text & lists
· How to work with Box Model
· How to position elements

Slide 68

A web page before CSS has been applied

Slide 69

The same page after CSS has been applied

Slide 70

Agenda
Þ Basic Syntax

Slide 71

The parts of a CSS rule set
selector

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

property value

Slide 72

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;
}

Slide 73

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

Slide 74

Terms
· rule set – consists of a selector and declaration block
· selector – HTML identifier
· declaration block – a list of declarations
· declaration – a property/value pair
· property – attribute of a style
· value – characteristic of the property

Slide 75

Agenda
Þ Basic Syntax
Þ Linking

Slide 76

Two ways to include an external style sheet
With the <link> tag (the best practice)

<head>
<link rel="stylesheet" href="../styles/main.css" />
</head>

With the <style> tag and the @import directive

<head>
<style> @import "../styles/main.css";</style>
</head>

Slide 77

Embedding styles (not recommended)
Embedding a style sheet in the head section
<head>

<style>
h1 {
color: blue;
font-size: 14pt;
}
</style>
</head>

Using the style attribute of an inline tag
<span style="color: red; font-size: 14pt;">
Warning!</span>

Slide 78

Including external style sheets for specific media
Including a style sheet for printing the page
<link rel="stylesheet" href="../styles/main_print.css"
media="print" />

Including a style sheet for a handheld device
<link rel="stylesheet"
href="../styles/main_handheld.css"
media="handheld" />

Slide 79

CSS Media (Device) Type
Type 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

Agenda
Þ Basic Syntax
Þ Linking
Þ Measurements

Slide 81

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%;

Slide 82

Agenda
Þ Basic Syntax
Þ Linking
Þ Measurements
Þ Colors

Slide 83

Three ways to specify colors
With a color name
color: silver;

With an RGB (red-green-blue) value
color: rgb(50%, 25%, 25%);

color: rgb(128, 64, 64)
/* Using three integers from 0 to 255 */

With an RGB value that uses hexadecimal numbers
color: #cd5c5c;

color: #a6f;
/* Expands to #aa66ff */

Slide 84

Agenda
Þ Basic selectors

Slide 85

Elements that can be selected by tag, id, or class
<body>
<div id="main">
<p>Here is a list of links:</p>
<ul class="nav">
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
</ul>
</div>

<div id="footer">
<p class="copyright inactive">Copyright 2009</p>
</div>
</body>

Slide 86

CSS rule sets that select by tag, id or class

Tag
body { font-family: Arial, sans-serif;}

Id
#main { border: 2px solid black; padding: 0.2em;}

Class
.nav { list-style-type: square; }
.copyright { text-align: right; }
.inactive { color: gray; }

Slide 87

The elements displayed in a browser

Slide 88

A little more on tag-based selectors
CSS rule sets that select by tag

em { color: blue; }

Adapted from Maxdesign.com.au

A little more on class-based selectors
CSS rule sets that select by class
.big {font-size: 110%; font-weight: bold;}


Agenda
Þ Basic selectors
Þ Advance selectors

Slide 91

Other ways to code selectors
The universal selector
* { color: black; }

Slide 92

A little more on universal selector
* { color: blue; }


Descendant elements
#footer p { font-size: 10pt; }
ul a { color: green; }
ul * { color: green; }

Slide 94

A little more on descendent selectors

p em { color: blue; }

ul em { color: blue; }



Child elements
#main > p { font-size: 12pt; }
ul.nav > li { margin-left: 20px; }

Slide 96

A little more on Child Selectors
div > em { color: blue; }


Attributes
input[type=submit] {
border: 1px solid black;
color: white;
background-color: blue;
}

Tag and class
ul.nav { list-style-type: square; }

Multiple selectors
h1, h2, h3 { color: blue; }
p, ul.nav > li {
font-family: "Times New Roman", serif;
}

Slide 98

Agenda
Þ Basic selectors
Þ Advance selectors
Þ Pseudo-selectors

Slide 99

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.

Slide 100

XHTML for pseudo-class selectors
<div id="main">
<p>Welcome to Mike's Bait and Tackle Shop.
We have all the gear
you'll need to make your next fishing trip a great
success!</p>
<ul class="nav">
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
</ul>
<p><a href="contact.html">Contact us</a> to place
your order today!</p>
</div>

Slide 101

The CSS for pseudo-class selectors
a:link {
color: black;
}
a:visited {
color: gray;
}
a:hover {
font-weight: bold;
}
a:active {
color: green;
}
#main > p:first-child {
text-indent: 1em;
}

Slide 102

The pseudo-class selectors in a web browser

Slide 103

Agenda
Þ Selectors for tags, ids, & classes
Þ Other types of selectors
Þ Pseudo-selectors
Þ How cascade rules work

Slide 104

Agenda
Þ Styling Fonts

Slide 106

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.

Slide 107

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;

Slide 108

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 */

Slide 109

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;

Slide 110

The CSS for the home page
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 81.25%;
line-height: 1.4em;
}

h1, h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
}

h1 {
font-size: 150%;
}

h2 {
font-size: 120%;
}

Slide 112

a {
font-weight: bold;
}

.copyright {
font-size: 80%;
}

Slide 113

Agenda
Þ Styling Fonts
Þ Formatting Fonts

Slide 114

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

Slide 115

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

Slide 116

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; }

Slide 117

The text in a browser

Slide 118

a {
text-decoration: none;
}

.copyright {
text-align: right;
}

Slide 120

Agenda
Þ Styling Fonts
Þ Formatting Fonts
Þ Formatting Lists

Slide 121

How to format the numbers for ordered lists
list-style-type: decimal;
/* default value, 1, 2, 3, ... */

list-style-type: decimal-leading-zero;
/* 01, 02, 03, ... */

list-style-type: lower-alpha;
/* a, b, c, ... */

list-style-type: upper-alpha;
/* A, B, C, ... */

list-style-type: lower-roman;
/* i, ii, iii, iv, v, ... */

list-style-type: upper-roman;
/* I, II, III, IV, V, ... */

list-style-type: lower-greek;
/* α, β, γ, δ, ε, ... */

Slide 122

How to format the bullet for unordered lists
list-style-type: disc;
/* default value, solid circle */

list-style-type: circle;
/* hollow circle */

list-style-type: square;
/* square */

Slide 123

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; }

Slide 124

The list example displayed in a web browser

Slide 125

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

Slide 126

ul.nav {
list-style-type: none;
}

#content ul {
list-style-image: url("star.gif");
}

Slide 128

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

Slide 129

Week 2

More Related Content

Similar to Week 2 (20)

More from A VD (11)

Recently uploaded (20)

Week 2

Editor's Notes