week 2
DESCRIPTION
TRANSCRIPT
![Page 1: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/1.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 1
![Page 2: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/2.jpg)
Some More About You
![Page 3: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/3.jpg)
Median Rank
HTML CSS Javascript PhP MySQL Design SEO Mobile Apps
4
3
2 2 2 2
1 1
n = 37
![Page 4: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/4.jpg)
A Message From The Dean
![Page 5: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/5.jpg)
Recap
• Introductions • Class Objectives• XAMPP Review• Stuff about WWW & HTML• HTML Crash Course sections
– Introduction to HTML– How to code a Web Page (partial)
![Page 6: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/6.jpg)
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
![Page 7: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/7.jpg)
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
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 7
![Page 8: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/8.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 8
![Page 9: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/9.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 9
![Page 10: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/10.jpg)
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.Slide 10
![Page 11: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/11.jpg)
*Updates for this class
• XHMTL rules supersede by HTML5 and will be noted where appropriate
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.Slide 11
![Page 12: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/12.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 12
![Page 13: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/13.jpg)
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.Slide 13
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.
![Page 14: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/14.jpg)
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.Slide 14
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>
![Page 15: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/15.jpg)
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.Slide 15
The lists in a web browser
![Page 16: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/16.jpg)
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>
![Page 17: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/17.jpg)
Exercise #2
![Page 18: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/18.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 18
![Page 19: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/19.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 19
![Page 20: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/20.jpg)
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.Slide 20
Common XHTML character entities
Entity Character
& &
< <
> >
© ©
® ®
™ ™
¢ ¢
° º
± ±
A non-breaking space that will always be displayed.
![Page 21: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/21.jpg)
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.Slide 21
![Page 22: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/22.jpg)
Exercise #3
![Page 23: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/23.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 23
![Page 24: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/24.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 24
![Page 25: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/25.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 25
![Page 26: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/26.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 26
![Page 27: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/27.jpg)
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.Slide 27
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.
![Page 28: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/28.jpg)
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.Slide 28
![Page 29: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/29.jpg)
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.Slide 29
![Page 30: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/30.jpg)
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.Slide 30
The <a> tags in a web browser
![Page 31: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/31.jpg)
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
![Page 32: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/32.jpg)
More on Document Relative Links
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>
Document-relative links use directions from the source page to the destination page.
Adapted from MediaCollege.com
![Page 33: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/33.jpg)
More on Document Relative Links
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>
Document-relative links use directions from the source page to the destination page.
Adapted from MediaCollege.com
![Page 34: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/34.jpg)
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
Adapted from MediaCollege.com
![Page 35: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/35.jpg)
Exercise #4
![Page 36: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/36.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 36
Q: What type of link are these?
![Page 37: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/37.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 37
![Page 38: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/38.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 38
![Page 39: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/39.jpg)
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.Slide 39
Attributes of the <img> tag
Attribute Description
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.
![Page 40: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/40.jpg)
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.Slide 40
![Page 41: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/41.jpg)
Image files
![Page 42: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/42.jpg)
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.Slide 42
Image formats supported by most browsers GIF (Graphic Interchange Format)
JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)
![Page 43: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/43.jpg)
Exercise #5
![Page 44: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/44.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 44
![Page 45: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/45.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 45
![Page 46: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/46.jpg)
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.Slide 46
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.
![Page 47: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/47.jpg)
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.Slide 47
Common attributes of the <table> tags
Attribute Description
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
Attribute Description
align Controls the horizontal alignment of the content in the row.
valign Controls the vertical alignment of the content in the row.
![Page 48: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/48.jpg)
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.
![Page 49: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/49.jpg)
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.Slide 49
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>
![Page 50: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/50.jpg)
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.Slide 50
The table in a web browser
![Page 51: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/51.jpg)
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.Slide 51
Common attributes of the <th> and <td> tags
Attribute Description
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.
![Page 52: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/52.jpg)
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.Slide 52
![Page 53: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/53.jpg)
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.Slide 53
![Page 54: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/54.jpg)
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.Slide 54
The table in a web browser
![Page 55: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/55.jpg)
Exercise #6
![Page 56: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/56.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 56
![Page 57: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/57.jpg)
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.Slide 57
![Page 58: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/58.jpg)
HTML5 &The Document Object Model
![Page 59: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/59.jpg)
![Page 60: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/60.jpg)
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?
![Page 61: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/61.jpg)
Quiz: Logical or Presentation
source: P. Griffiths, "HTML Dog: The Best-Practice Guide to XHTML&CSS, " New Raider, 2007
![Page 62: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/62.jpg)
Quiz: Logical or Presentation
source: P. Griffiths, "HTML Dog: The Best-Practice Guide to XHTML&CSS, " New Raider, 2007
![Page 63: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/63.jpg)
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
![Page 64: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/64.jpg)
![Page 65: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/65.jpg)
![Page 66: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/66.jpg)
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
![Page 67: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/67.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 67
Chapter 5
A crash course in CSS
![Page 68: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/68.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 68
![Page 69: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/69.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 69
A web page before CSS has been applied
![Page 70: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/70.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 70
The same page after CSS has been applied
![Page 71: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/71.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 71
![Page 72: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/72.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 72
The parts of a CSS rule set
h1 { color: blue; font-size: 14pt;}
selector
valueproperty
declaration
![Page 73: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/73.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 73
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; }
![Page 74: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/74.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 74
A CSS comment /* This is a CSS comment */
![Page 75: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/75.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 75
![Page 76: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/76.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 76
![Page 77: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/77.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 77
![Page 78: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/78.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 78
![Page 79: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/79.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 79
![Page 80: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/80.jpg)
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
![Page 81: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/81.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 81
![Page 82: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/82.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 82
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%;
![Page 83: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/83.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 83
![Page 84: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/84.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 84
![Page 85: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/85.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 85
![Page 86: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/86.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 86
![Page 87: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/87.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 87
![Page 88: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/88.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 88
The elements displayed in a browser
![Page 89: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/89.jpg)
A little more on tag-based selectors
Adapted from Maxdesign.com.au
![Page 90: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/90.jpg)
A little more on class-based selectors
Adapted from Maxdesign.com.au
![Page 91: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/91.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 91
![Page 92: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/92.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 92
![Page 93: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/93.jpg)
A little more on universal selector
Adapted from Maxdesign.com.au
![Page 94: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/94.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 94
![Page 95: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/95.jpg)
A little more on descendent selectors
Adapted from Maxdesign.com.au
![Page 96: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/96.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 96
![Page 97: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/97.jpg)
A little more on Child Selectors
Adapted from Maxdesign.com.au
![Page 98: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/98.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 98
![Page 99: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/99.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 99
![Page 100: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/100.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 100
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.
![Page 101: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/101.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 101
![Page 102: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/102.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 102
![Page 103: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/103.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 103
The pseudo-class selectors in a web browser
![Page 104: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/104.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 104
![Page 105: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/105.jpg)
Cascade is postponed to later
![Page 106: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/106.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 106
![Page 107: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/107.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 107
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.
![Page 108: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/108.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 108
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;
![Page 109: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/109.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 109
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 */
![Page 110: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/110.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 110
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;
![Page 111: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/111.jpg)
Exercise #8
![Page 112: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/112.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 112
![Page 113: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/113.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 113
![Page 114: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/114.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 114
![Page 115: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/115.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 115
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
![Page 116: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/116.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 116
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
![Page 117: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/117.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 117
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; }
![Page 118: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/118.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 118
The text in a browser
![Page 119: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/119.jpg)
Exercise #9
![Page 120: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/120.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 120
![Page 121: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/121.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 121
![Page 122: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/122.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 122
![Page 123: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/123.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 123
![Page 124: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/124.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 124
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; }
![Page 125: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/125.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 125
The list example displayed in a web browser
![Page 126: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/126.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 126
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
![Page 127: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/127.jpg)
Exercise #10
![Page 128: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/128.jpg)
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 128
![Page 129: Week 2](https://reader035.vdocument.in/reader035/viewer/2022081518/54b47d974a795966028b45da/html5/thumbnails/129.jpg)
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
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 129