Ch. 3 HTML5, CIS 110 13F
Upcoming SlideShare
Loading in...5
×
 

Ch. 3 HTML5, CIS 110 13F

on

  • 630 views

Presentation Slides from Web Dev & Des Foundations, 6ed (Pearson).

Presentation Slides from Web Dev & Des Foundations, 6ed (Pearson).

Statistics

Views

Total Views
630
Views on SlideShare
630
Embed Views
0

Actions

Likes
0
Downloads
12
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Ch. 3 HTML5, CIS 110 13F Ch. 3 HTML5, CIS 110 13F Presentation Transcript

  • WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 3 Key Concepts Copyright © Terry Felke-Morris Wednesday, October 23, 13 1
  • LEARNING OUTCOMES  Apply inline, embedded (aka internal), external style sheets  Configure element, class, id, and contextual selectors  Use the W3C CSS Validator Copyright © Terry Felke-Morris Wednesday, October 23, 13 2
  • CASCADING STYLE SHEETS (CSS)  CSS Demo: http://www.csszengarden.com  CSS:  Desktop publishing style sheet technology for Web Dev  W3C standard => cross-platform Copyright © Terry Felke-Morris Wednesday, October 23, 13 3
  • CSS ADVANTAGES Separates style (CSS) from structure (HTML) Styles can be stored in a separate file => Easier site maintenance Copyright © Terry Felke-Morris Wednesday, October 23, 13 4
  • TYPES OF CASCADING STYLE SHEETS (1) External Embedded (aka Internal) Inline Copyright © Terry Felke-Morris Wednesday, October 23, 13 5
  •  Inline Styles CASCADING STYLE SHEETS ◦ body section ◦ HTML style attribute ◦ applies to one element  Embedded/Internal Styles ◦ head section ◦ HTML style element ◦ applies to entire web page  External Styles ◦ Separate .css file ◦ Connect to web page w/link element in head section Copyright © Terry Felke-Morris Wednesday, October 23, 13 6
  • CSS SYNTAX  Style sheets are composed of Style Rules  Style Rule: Selector & Declaration Copyright © Terry Felke-Morris Wednesday, October 23, 13 7
  • CSS Example Web page w/ blue text, yellow background: body { color: blue; background-color: yellow; } OR use HEX triple color codes (ch. 7-8, FIT5): body { color: #0000FF; background-color: #FFFF00; } Copyright © Terry Felke-Morris Wednesday, October 23, 13 8
  • COMMON CSS PROPERTIES  Table 3.1 Common CSS Properties: ◦ background-color ◦ color ◦ font-family ◦ font-size ◦ font-style ◦ font-weight ◦ line-height ◦ margin ◦ text-align ◦ text-decoration ◦ width Copyright © Terry Felke-Morris Wednesday, October 23, 13 9
  • USING COLOR ON WEB PAGES monitors display color as intensities of Red/Green/Blue light RGB values 0 .. 255 Hexadecimal numbers (base 16) are shorthand notation: 0 .. 255 == 00 .. FF Copyright © Terry Felke-Morris Wednesday, October 23, 13 10
  • HEXADECIMAL COLOR VALUES  # indicates hex digits  Hex pairs 00 .. FF  Three hex pairs => RGB as HEX TRIPLE #000000 black #FFFFFF white #FF0000 red #00FF00 green #0000FF blue #CCCCCC grey Copyright © Terry Felke-Morris Wednesday, October 23, 13 11
  • INLINE CSS  Inline CSS  Style Attribute Example: <h1 style="color:#ff0000">Heading text is red</h1> Copyright © Terry Felke-Morris Wednesday, October 23, 13 14
  • CSS EMBEDDED/INTERNAL STYLES  Style element in head section => Internal Style Sheet  Rules apply to entire web page <style> body { background-color: #000000; color: #FFFFFF; } </style> Copyright © Terry Felke-Morris Wednesday, October 23, 13 16
  • CSS properties for configuring text:  font-weight  font-style  font-size  font-family Copyright © Terry Felke-Morris Wednesday, October 23, 13 19
  • THE FONT-FAMILY PROPERTY p {font-family: Arial, Verdana, “Courier New”, sans-serif;} Copyright © Terry Felke-Morris Wednesday, October 23, 13 21
  • CSS SELECTORS simple selector => selects html element(s) class selector => selects "class" of elements id selector => selects ONE element on a web page  contextual selector (aka descendent) => selects all nested elements Copyright © Terry Felke-Morris Wednesday, October 23, 13 23
  • USING CSS WITH “CLASS” Define the class: <style> .new { color: #FF0000; font-style: italic; } </style> Apply the class: <p class=“new”>This is text is red and in italics</p> <h4 class=“new”>More Red Italics</h4> Copyright © Terry Felke-Morris Wednesday, October 23, 13 24
  • USING ID SELECTORS Define the id Selector: Web Field Trip: octothorn, octalthorp, octatherp, octothorpe (#) <style> #new { color: #FF0000; font-size:2em; font-style: italic; } </style> Apply the id selector: <p id=“new”>This is text is red, large, and in italics</p> Copyright © Terry Felke-Morris Wednesday, October 23, 13 25
  • CONTEXTUAL SELECTOR Select element within context of its container (parent) element. AKA descendent selector example applies only to <style> #footer a { color: green; } </style> links located w/in element tagged id=’footer’ Copyright © Terry Felke-Morris Wednesday, October 23, 13 26
  • SPAN ELEMENT Purpose: style content inline no empty space above/below a span inline display, not block display Copyright © Terry Felke-Morris Wednesday, October 23, 13 27
  • SPAN ELEMENT EXAMPLE <style> .companyname { font-weight: bold; font-size: larger; } </style> <p>Your needs are important to us at <span class=“companyname">Acme Web Design</span>. We will work with you to build your Web site.</p> Copyright © Terry Felke-Morris Wednesday, October 23, 13 28
  • EXTERNAL STYLE SHEETS CSS style rules stored in a .css file  may contain style rules only  may not contain any HTML tags Copyright © Terry Felke-Morris Wednesday, October 23, 13 29
  • EXTERNAL STYLE SHEETS 2 Multiple web pages can associate with the same external style sheet file. site.css body {background-color:#E6E6FA; color:#000000; font-family:Arial, sans-serif; font-size:90%; } h2 { color: #003366; } .nav { font-size: 16px; font-weight: bold; } index.html clients.html about.html Etc… Copyright © Terry Felke-Morris Wednesday, October 23, 13 30
  • EXAMPLE External Style Sheet: color.css body { background-color: #0000FF; color: #FFFFFF; } To link 110/p3/demo.html to 110/css/color.css: <head> <link rel="stylesheet" href="../css/color.css"> </head> Copyright © Terry Felke-Morris Wednesday, October 23, 13 32
  • CENTERING PAGE CONTENT WITH CSS #container { margin-left: auto; margin-right: auto; width:80%; } Example: services.html Copyright © Terry Felke-Morris Wednesday, October 23, 13 34
  • THE “CASCADE” Copyright © Terry Felke-Morris Wednesday, October 23, 13 35
  • W3C CSS VALIDATION  http://jigsaw.w3.org/css-validator/ Copyright © Terry Felke-Morris Wednesday, October 23, 13 36
  • Ch. 3 Assessment: Learning Outcomes - Know the following Copyright © Terry Felke-Morris Wednesday, October 23, 13 37
  • Ch. 3 Assessment: Learning Outcomes - Know the following Copyright © Terry Felke-Morris Wednesday, October 23, 13 37