chapter 4: creating tables in a web site using an external style sheet

123
Dr. Chen, Management Information Systems - HTML Chapter 4: Applying CSS Styles to Webpages [Learning by Doing] Jason C. H. Chen, Ph.D. Professor of MIS School of Business Administration Gonzaga University Spokane, WA 99258 [email protected]

Upload: makala

Post on 25-Feb-2016

45 views

Category:

Documents


1 download

DESCRIPTION

Chapter 4: Creating Tables in a Web Site Using an External Style Sheet. Jason C. H. Chen, Ph.D. Professor of MIS School of Business Administration Gonzaga University Spokane, WA 99258 [email protected]. Chapter Objectives. Define table elements - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

Chapter 4:Applying CSS Styles to

Webpages[Learning by Doing]

Jason C. H. Chen, Ph.D.Professor of MIS

School of Business AdministrationGonzaga UniversitySpokane, WA [email protected]

Page 2: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML2

fitness04.htmlUse the work done from html03 (fitness03.html etc.) as the framework

to further revise them as stated in (4) [below]:4. Modify three *.html files and the styles.css file as follows (and read the text book, pp.140-174):a) modify three *.html files as shown in Figure 3-a, 3-b, 3-c respectively. Hints: i) change from fitness03.html to fitness04.html such as file name and those appear in the <nav> tag ii) add <link rel="stylesheet" href="css/styles.css”> as the css file will manage many features (eg., visual effects) on three *.html files iii) modify <img …> tag into (WHY?)<a href="fitness04.html"><img src="images/ffc_logo.png" alt="Forward Fitness Club logo" height="275" width="845"></a>b) Complete the new styles.css as illustrated on pp.153-174 (only a template file provided to you)

Page 3: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML3

• Explain the importance of separating design from content

• Describe Cascading Style Sheets (CSS)• Define inline, embedded, and external styles and

their order of precedence• Describe a CSS rule and its syntax• Explain the difference between a selector, property,

and value• Create styles that use text and color properties• Explain the difference between inline and block

content

Objectives

Page 4: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML4

• Describe the CSS box model and how to apply margins, padding, and borders

• Create an external style sheet and link it to an HTML page

• Create styles that use padding, border, and margin properties

• Float (display) an image• Create styles that use list properties• Add comments to an external style sheet• Validate a CSS file

Objectives (continued)

Page 5: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML5

Type the following URLsCreating and understanding styles.css is the major task for this assignmentFor exercisehttp://barney.gonzaga.edu/~chenta/html04/exercise/fitness04.htmlhttp://barney.gonzaga.edu/~chenta/html04/exercise/fitness04.html

http://barney.gonzaga.edu/~chenta/html03/exercise/fitness03.htmlhttp://barney.gonzaga.edu/~chenta/html03/exercise/fitness03.html

For hwhttp://barney.gonzaga.edu/~chenta/html04/hw/ski04.htmlhttp://barney.gonzaga.edu/~chenta/html04/hw/ski04.html

http://barney.gonzaga.edu/~chenta/html03/hw/ski03-v2.htmlhttp://barney.gonzaga.edu/~chenta/html03/hw/ski03-v2.html

Page 6: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

fitness03.html

about.html contact.html

html03(exercise)

Page 7: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

What is (are) major differences between html03

vs. html04?

html04(exercise) fitness04.html

about.htmlcontact.html

box-shadow

Page 8: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

html04(exercise) fitness04.html

about.htmlcontact.htmlstyles.css

visual effectreusable codes

Page 9: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

[exercise]

[hw]

Page 10: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML10

HTML vs CSS• HTML5

– Provides the structural foundation of a webpage– However, it lacks an important element of ______

appeal such as color, formatting text and adding margins, borders, and shadows.

• Cascading Style Sheets (CSS)– Determines the __________ for a webpage– CSS can format a webpage in an unlimited number of

ways: a) change background color, b) increase size of text

or bolding, c) apply margins to a section, and d) add borders to elements

formatting

visual

Page 11: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML11

• Style – It is a _____ that defines the appearance of an element on a webpage

• Style sheet – It is the set of CSS style rules• Style sheets provide a means to separate style from

content (described in html code) because it gives the flexibility to redesign or rebrand a website

• A single CSS style sheet file containing the defined styles can be attached to several webpages to apply the styles to all the attached pages

Using Cascading Style Sheets

rule

Page 12: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

Figure 4-10

CSS file vs. HTML file

ContentStyles manages “visual” effects

Page 13: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML13

• To center all of the elements of a webpage using a single style rule, set the left and right margins to auto

• In addition, set the width to 80% so that the elements do not span 100 percent of the browser window (i.e., __% room reserved for each side).

To Center Content

<!– in fitness04.html --> <body><div id="container">……</div></body>

/* Style for container centers the page and sets the element width */#container {

width: 80%;margin-left: auto;margin-right: auto;

}

More about selector and a declaration will be explained later.

10

Page 14: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

(80%)10% 10%

Page 15: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

header

nav

main

footer

div id=“container”

Four Basic HTML5 Semantic Elements

HTML provides new tools for improving/structuring webpage design, including semantic elements for specific types of content

fitness04.html will be used for illustration of the relationship between styles sheet (css file) and html file

Page 16: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

div id=“container”

header

nav

main

footer

fitness04.html

Page 17: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

div id=“container”

header

nav

main

footer

fitness04.html and contact.html w/ styles04.cs

px: one pixel is equal one dot on the screenem: relative to the browser’s default font size

box-shadow: h-shadow v-shadow blur color;

Page 18: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

div id=“container”

header

nav

main

footer

fitness04.html and contact.html w/ styles04.css (cont.)

Page 19: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

div id=“container”

header

nav

main

footer

about.html w/ styles.css

There are three images (Weights and Cardio) with the same class name of ‘equip’

Page 20: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

div id=“container”

header

nav

main

footer

about.html w/ styles.css

styles.cssabout.html

Page 21: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML21

Explain the handout on about.html & styles.css

Page 22: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML22

• Comments provide additional information about the area where the styles are applied or other helpful explanations, such as what the styles do

• The syntax for a comment is as follows:/* Place your comment here */

Adding Comments to CSS Files

Page 23: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML23

• Style sheets are said to “cascade” because each type of style has a specified level of precedence (or priority) in relationship to the others

• CSS properties can be inherited from a parent element through a principle called inheritance

• If a selector has more than one CSS rule, specificity determines which CSS rule to apply

Style Sheet Precedence

Page 24: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML24

• Each CSS rule consists of a selector and a declaration• A declaration consists of a property and a value, separated by a colon and

followed by a semicolon

CSS Basics

what to style defines the exact formatting of the style

• The property identifies the style quality or characteristic to apply, such as – color (text color)– background-color– text-indent– border-width– font-style

Page 25: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML25

CSS Syntax• A CSS rule-set consists of a selector and a declaration block:

• The selector points to the HTML element you want to style.• The declaration block contains one or more declarations

separated by semicolons.• Each declaration includes a CSS property name and a value,

separated by a colon.• A CSS declaration always ends with a semicolon, and

declaration blocks are surrounded by curly braces.

footer { font-size: .70em; text-align: center; margin-top: 20px; }

Page 26: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML26

• A style rule begins with a selector, which specifies the element to style

• A selector can be – an HTML element name, i.e., four basic semantic elements– an id attribute value e.g., <div id="container">– a class attribute value, e.g., <img class="equip" … >

• An id or a class selector is used to apply styles to p elements

Selectors

See more on p.152; 165

Page 27: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML27

• An id selector uses the id attribute value of an HTML element to select a single element

• For example, to style the div id="container" element (in the *.html file), use #container (in styles.css file) as the selector

Selectors (continued)

/* Style for container centers the page and sets the element width */#container {

width: 80%;margin-left: auto;margin-right: auto;

}

Page 28: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML28

• A class selector is used to select elements that include a certain class attribute

• For example, to style class=“equip“ (in *.html file), use .equip (in styles.css file) as the selector (see next slide)

Selectors (continued 1)

.equip {float: left;padding-right: 20px;}

Page 29: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

<img class="equip" src="images/equipment1.jpg" alt="Weight Equipment" height="195" width="260">

.equip {float: left;padding-right: 20px;

}float (display) on the left side padding on the right

from the image class

ul { margin-bottom: 50px; list-style-position: inside; }

Page 30: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

To style the div id="container" element, _____ is used as the selector.

a. .container b. #container c. :container d. %container

ANSWER: ________ b

Page 31: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML31

• The header section appears at the top of a webpage and thus needs formatting that makes the header contents stand out and attract visitors to the page

• The nav section should be formatted differently from the other structural elements as it should be prominent and easy to find on the webpage

• The main section should be formatted using the display property

Creating Style Rules for Structural Elements

Page 32: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML32

• To apply text and box model properties to the main section and have them appear as intended, the display property is used

• Create a style rule that formats the footer section by defining the font size, text alignment, and top margin of the footer element

Creating Style Rules for Structural Elements (continued)

Page 33: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML33

To Create a Style Rule for the Header Element

Figure 4-19

Page 34: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML34

To Create a Style Rule for the nav Element

Figure 4-21 See table 4-2 (HTML p.147) for Font Size Measurement Unitse.g., em Relative to the default font size of the elementand %, px, pt

Page 35: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML35

To Create a Style Rule for the nav Element (cont.)

Figure 4-21 (complete)

/* Style for nav specifies text properties, padding, margins, and borders */nav {

font-family: Georgia, "Times New Roman", serif;font-size: 1.25em;font-weight: bold;text-align: center;padding: 15px;margin-top: 10px;margin-bottom: 10px;border-radius: 20px;border-top: 5px solid #FFFFFF; /* White */border-bottom: 5px solid #FFFFFF; /* White */

}

Page 36: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML36

Using Fluid Layouts

Page 37: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML37

CSS Text Properties

Page 38: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML38

To Create a Style Rule for the Main Element

Figure 4-24

Page 39: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML39

To Create a Style Rule for the Footer Element

Page 40: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML40

• Consider the following example: (in about.html)

<img class="equip" src="images/equipment1.jpg" alt="Weight Equipment" height="195" width="260">

– The img element displays the equipment1.jpg image– The first attribute and value, class="equip", assigns this

element to the equip class– Including the class="equip" attribute and value in each

img element helps format all the elements assigned to the equip class with a single style rule

Creating Style Rules for Classes

Note: ‘equip’ can be ‘equip-1’ or ‘equip-2’ etc.

Page 41: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML41

• To indicate a class name as a selector, include a period (.) before the class name

• Float property – It positions an element to the right or left of other elements

• Clear property – It removes the float effect from a webpage

Creating Style Rules for Classes (continued)

Page 42: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML42

For example, the following style rule adds 20 pixels of padding to the right side of elements in the equip class:

Creating Style Rules for Classes (continued 1)

.equip {float: left;padding-right: 20px;

}

[about.html]

[about.html] [styles.css]

Page 43: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML43

• The CSS list-style properties are used to control the appearance of numbered and bulleted lists

• Lists marked with the <ul> and </ul> tags display a solid bullet before each list item

• Lists marked with the <ol> and </ol> tags display Arabic numerals (1, 2, 3, and so on) before the list items

• For example,ul {

list-style-type: square; /* or circle */list-style-position: inside; /* outside*/list-style-image: url(arrow.png);

}

Using CSS List Properties

Page 44: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

http://www.w3schools.com/cssref/pr_list-style.asp

http://www.w3schools.com/cssref/pr_list-style.asp

CSS list-style property

Page 45: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML45

• The list-style-position property specifies if the list-item markers should appear inside or outside the content flow.

• Outside: Keeps the marker to the left of the text. The bullets appears outside the content flow. This is default.

• Inside: Indents the marker and the text. The bullets appear inside the content flow

Using CSS List Properties (continued)

1. Lorem ipsum dolor sit amet,consectetur adipiscing elit.

Page 46: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

div id=“container”

header

nav

main

footer

about.html w/ styles04.css

Page 47: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML47

• After creating a CSS file, link it to all the webpages that will use its styles

• Insert a link element on the HTML page within the <head> and </head> tags

• The link element uses two attributes:– rel– href

• The rel attribute uses the stylesheet value to indicate that the document is linked to a style sheet

Linking an HTML Document to a CSS File

Page 48: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML48

• The href attribute value specifies the file path or file name of the CSS file

• Following is an example of a link to a style sheet named styles.css and stored in the css folder:

<link rel="stylesheet" href="css/styles.css">• The type="text/css" attribute and value is also commonly

used within a link element to reference a CSS file

Linking an HTML Document to a CSS File (continued)

<head> <!– in fitness04.html --><link rel="stylesheet" href="css/styles.css"><title>Forward Fitness Club</title><meta charset="utf-8">

</head>

why?

Page 49: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

styles.cssabout.html contact.html

visual effectreusable codes

html04(exercise)

fitness04.html

Page 50: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

public_html [web folder]

index.htmlmyself.pptxmyresume.docx

hw(new folder)

images [folder]

html04[folder for HTML#4]

For html04

exercise(new folder)

fitness04.htmlabout.htmlcontact.html

images [folder]

images [images folder]

book.gif, events.gifgcan.gif, wall.gifmailbox.gif, worm.gif 

ffc_logo.pngequipment1.jpgequipment2.jpgequipment3.jpg

ski.jpgstyles.css skistyles04.css

css[folder]

css[folder] ski04.html

legal.pdf

css [folder]

styles-web1.cssstyles-myweb.css

 

Your Personal Web Page

Page 51: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

public_html [web folder]

index.htmlmyself.pptxmyresume.docx

hw(new folder)

images [folder]

html04[folder for HTML#4]

For html04

exercise(new folder)

fitness04.htmlabout.htmlcontact.html

images [folder]

images [images folder]

book.gif, events.gifgcan.gif, wall.gifmailbox.gif, worm.gif 

ffc_logo.pngequipment1.jpgequipment2.jpgequipment3.jpg

ski.jpgstyles.css skistyles04.css

css[folder]

css[folder] ski04.html

legal.pdf

css [folder]

styles-web1.cssstyles-myweb.css

 

What’s new here?How do you create it?

Page 52: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

public_html [web folder]

index.htmlmyself.pptxmyresume.docx

hw(new folder)

images [folder]

html04[folder for HTML#4]

For html04

exercise(new folder)

fitness04.htmlabout.htmlcontact.html

images [folder]

images [images folder]

book.gif, events.gifgcan.gif, wall.gifmailbox.gif, worm.gif 

ffc_logo.pngequipment1.jpgequipment2.jpgequipment3.jpg

ski.jpgstyles.css skistyles04.css

css[folder]

css[folder] ski04.html

legal.pdf

css [folder]

styles-web1.cssstyles-myweb.css

 

What’s new here?How do you create it?

Page 53: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

about.html, contact.html and styles.css

Use your intelligence to study how about.html and contact.html interface with styles.css

Page 54: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML54

Your turn (html04/exercise)/fitness04.html

• It is required to “Validate” and “View” your HTML and CSS codes and debug/correct the code before you submit the assignment (see HTML 173 for validating CSS files (note: the URL for validating CSS is http://jigsaw.w3.org/css-validator/)

• the URL for validating CSS is http://jigsaw.w3.org/css-validator/)

Page 55: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

• Create a folder of html04 under mis235-0x-public_html on c: (or d:)• Create a folder of exercise under html04 • Create a folder of images under html04/exercise/• Create a folder of css under html04/exercise/• Next create the following folders for hw• Create a folder of hw under html04• Create a folder of images under html04/hw/• Create a folder of css under html04/hw/

Steps before downloading web resources

Page 56: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML56

Your turn … ‘exercise’(Applying CSS Styles to Webpages)

1. Therefore, the Web Design Directory Structure for html04 shall be: public_html/html04/exercise (for fitness04.html) and public_html/html04/hw (for ski04.html) plus images and css folders under each one.2. Download the following (7) data files that were created in html03 (exercise): fitness03.html, about.html, contact.html, four image files and a new styles sheet, styles.css (the major task for this assignment) from Bb (available under Assignments Web Assignments and Resources) to your PC3. Rename fitness03.html to fitness04.html

Your Web Page directory structure should be organized as in Figure 2.

Page 57: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

public_html [web folder]

index.htmlmyself.pptxmyresume.docx

hw(new folder)

images [folder]

html04[folder for HTML#4]

For html04

exercise(new folder)

fitness04.htmlabout.htmlcontact.html

images [folder]

images [images folder]

book.gif, events.gifgcan.gif, wall.gifmailbox.gif, worm.gif 

ffc_logo.pngequipment1.jpgequipment2.jpgequipment3.jpg

ski.jpgstyles.css skistyles04.css

css[folder]

css[folder] ski04.html

legal.pdf

css [folder]

styles-web1.cssstyles-myweb.css

 

Figure 2. Web Design Directory Structure for html04 Assignment

Page 58: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

4. Modify three *.html files and the styles.css file as follows (and read the text book, pp.140-174):a) modify three *.html files as shown in Figure 3-a, 3-b, 3-c respectively. Hints: i) change from fitness03.html to fitness04.html such as file name and those appear in the <nav> tag ii) add <link rel="stylesheet" href="css/styles.css”> as the css file will manage many features (e.g., visual effects) on three *.html files iii) modify <img .. > tag as follows: <a href="fitness04.html"><img src="images/ffc_logo.png" alt="Forward Fitness Club logo" height="275" width="845"></a>b) Complete the new styles.css as shown in Figure 3-d (partial codes only) and illustrated on pp.153-174 (Hint: Enter from Line 1 through Line 67 as shown on pp. 159-169) When you done do the followings:c) upload *.html files and save them to the right folder (i.e., html/public/html04/exercise/ d) upload styles.css and save it in the right folder (html_public/html04/exercise/css/)e) upload the four image files and save them to the right folder (html_public/html04/exercise/images/)

Page 59: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

4. Important instructionss are summarized as follows:

a) modify three *.html files as shown in Figure 3-a, 3-b, 3-c respectively. i) change from fitness03.html to fitness04.html such as file name and those appear in the <nav> tagii) add <link rel="stylesheet" href="css/styles.css”> as the css file will manage many features (e.g., visual effects) on three *.html filesiii) modify <img .. > tag as follows: <a href="fitness04.html"><img src="images/ffc_logo.png" alt="Forward Fitness Club logo" height="275" width="845"></a>b) Complete the new styles.css as shown in Figure 3-d (partial codes only) and illustrated on pp.153-174 (Hint: Enter from Line 1 through Line 67 as shown on pp. 159-169)

Page 60: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

5. When done, test fitness04.html by entering your URL (http://barney.gonzaga.edu/~your_userID/html04/exercise/fitness04.html) on the Web Browser. You also can check the result of your program on the following URL http://barney.gonzaga.edu/~chenta/html04/exercise/fitness04.html

8. What/How you should turn in: Notifying your instructor by uploading HTML#4 message (fitness04.html) to the Blackboard (not via email). See detailed instruction on the document of “Instruction_Web_Assignments_Bb” available on the Bb. Please note that you should click “Write Submission” to enable the text editor box. Enter the following information in the “2. Assignment Submission” window 

Dr. Chen, Here is my HTML#4 (fitness04.html) assignment. http://barney.gonzaga.edu/~your_userID/html04/exercise/fitness04.html <Your Full Name> bmis235-02 (or bmis235-03 or bmis235-05)

Make the URL linkable

Page 61: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML61

PART IIApplying CSS Styles to Webpages

• hw – ski04.html

Page 62: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML62

Type the following URLsCreating and understanding styles.css is the major task for this assignmentFor exercisehttp://barney.gonzaga.edu/~chenta/html04/exercise/fitness04.htmlhttp://barney.gonzaga.edu/~chenta/html04/exercise/fitness04.html

http://barney.gonzaga.edu/~chenta/html03/exercise/fitness03.htmlhttp://barney.gonzaga.edu/~chenta/html03/exercise/fitness03.html

For hwhttp://barney.gonzaga.edu/~chenta/html04/hw/ski04.htmlhttp://barney.gonzaga.edu/~chenta/html04/hw/ski04.html

http://barney.gonzaga.edu/~chenta/html03/hw/ski03-v2.htmlhttp://barney.gonzaga.edu/~chenta/html03/hw/ski03-v2.html

Page 63: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

skistyles04.css

visual effectreusable codes

(ski03.html)

(ski04.html)

[hw]

Page 64: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

Figure 4-10

CSS file vs. HTML file

ContentStyles manages “visual” effects

Page 65: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML65

Using Style Sheets

• CSS supports three types of style sheets (and precedence):– inline:

• to change the style within an individual HTML tag

• overrides embedded and external style sheet– embedded (internal) – not recommended for CSS3

• to change the style of one Web page• overrides external style sheets

– external (or linked)• to change the style of multiple pages in a web

site

Page 66: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML66

• Inline style – It is used to add a style to the start tag for an element, such as a heading or paragraph, using the style attribute

Inline Styles

<a href="#top"><span style="font-size:small; color:bluewhale;">Go to the Top of the Page! </span></a>

Do you have any “inline styles” in your previous HWs? (Web2)

Page 67: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

In <h1 style="font-color: navy">Special Note</h1>, the _____ is everything between the quotation marks.

a. tagging note b. declaration c. style rule d. marked up text

ANSWER: _______ c

Page 68: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

Inline Styles – another example<!DOCTYPE html><!– inline example: inline_styles_example.html --><html><body><h1 style="color:blue;">This is a Blue Heading</h1></body></html>

Available in /html04/class_demo_styles/ inline_styles_example.htmlhttp://barney.gonzaga.edu/~chenta/html04/class_demo_styles/inline_styles_example.html

<div class="gotop"> <a href="#top"><span style="font-size:small; color:bluewhale;">Go to the Top of the Page! </span></a> </div> .gotop {

text-align: center; }class selector (p.152, 165)

Why red?

Page 69: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML69

• An embedded style sheet, also called an internal style sheet, includes the style sheet within the opening <head> and closing </head> tags of the HTML document

Embedded (Internal) Style Sheets

<head><title>Forward Fitness Club</title><style> body {background-color:lightgrey;} h1   {color:blue;} p    {color:green;}</style> </head>

Page 70: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

Embedded (Internal) Styles - example<!DOCTYPE html><!– embedded example: internal_embedded_styles_example.html --><html><head><style>body {background-color: lightgray;}h1 {color: blue;}p {color: green;}</style></head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>

Available in /html04/class_demo_styles/http://barney.gonzaga.edu/~chenta/html04/class_demo_styles/internal_embedded_styles_example.html

However, ‘embedded’ styles is not recommended by CSS3

Page 71: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML71

• An external style sheet – It is a CSS file that contains all of the styles that can be applied to more than one page in a website

• External style sheets are also called linked style sheets

• An external style sheet is a text file with the .css extension

• To apply an external style sheet, link it (or attach it) to a webpage using a link in the head section of the webpage

External Style Sheets

Page 72: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML72

• External style sheet provides flexibility to quickly change webpage formats because the styles used in it are applied to every page linked to it

• Changing the look of an entire website is sometimes called reskinning the website

External Style Sheets (continued)

http://barney.gonzaga.edu/~chen/misall/web/datafiles/demo/demo_color_names.htmlhttp://barney.gonzaga.edu/~chen/misall/web/datafiles/demo/demo_color_names.html

/* in css file of web2: Style for body specifies a background color */body { background-image: url("../images/wall.gif") ;}

<head> <link rel="stylesheet" href="css/styles-myweb.css"> <title>Home Page for Jason Chen</title> <meta charset="utf-8"> </head>

Click here for Color link

Page 73: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

External Styles - example<!DOCTYPE html><!– external example: external_styles_example.html --><html><head> <link rel="stylesheet“ href="css/styles_example.css"> <title>External Styles Example</title> <meta charset="utf-8"></head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>

/* file name: styles_example.css */body { background-color: lightgray; }

h1 { color: blue; }

p { color:green; }

Available in /html04/class_demo_styles/ external_styles_example.htmlhttp://barney.gonzaga.edu/~chenta/html04/class_demo_styles/external_styles_example.html

Page 74: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

External Style Sheets (continued)

/* file name: fitness04.html */<head>

<link rel="stylesheet" href="css/styles.css"><title>Forward Fitness Club</title><meta charset="utf-8">

</head>

/* in css file of fiteness04: Style for body specifies a background color */body {

background-color: #FFFF99; /* Pale Canary color [close to Yellow] */}……

Page 75: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

With a(n) _____ style, one adds a style to the start tag for an element. a. embedded b. inline c. semantic d. external

Answer: _______b

Page 76: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

The code:<head><title>My Website</title<style>body { background-color: green; } </style></head>exemplifies a(n) _____ style sheet where the style rule is placed between the opening <style> and closing </style> tags. a. embedded b. external c. inline d. linked

ANSWER: _________ a

Page 77: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

fitness.04.html

<!DOCTYPE html><!-- This website template was created by: Student's First Name Student's Last NameFile name: fitness04.html --><html lang="en"><head> <link rel="stylesheet" href="css/styles.css"><title>Forward Fitness Club</title><meta charset="utf-8"></head><body><div id="container">

………</body></html>

/* Style sheet file name: styles.css*//* Style for body specifies a background color */body {

background-color: #FFFF99; /* Pale Canary [close to Yellow] color */}

/* Style for container centers the page and sets the element width */#container {

width: 80%;margin-left: auto;margin-right: auto;

}

Page 78: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

<header> <img src="images/ffc_logo.png" alt="Forward Fitness Club Logo" height="277" width="846"> </header>

/* Style for header specifies top and bottom margins, background color, rounded border, shadow, and alignment */header {

margin-top: 10px; margin-bottom: 20px;background-color: #FFFFFF; /* White */border-radius: 10px; /*rounded */box-shadow: 12px 12px 12px #000000; /* Black */text-align: center; }

fitness.04.html (cont.)

box-shadow: h-shadow v-shadow blur color;

Page 79: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

Syntax:box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;box-shadow: none|h-shadow v-shadow blur-area blur spread color

http://www.w3schools.com/cssref/playit.asp?filename=playcss_box-shadowhttp://www.w3schools.com/cssref/playit.asp?filename=playcss_box-shadow

Page 80: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML80

• A declaration consists of a property and a value, separated by a colon and followed by a semicolon

CSS Basics (Review)

what to style defines the exact formatting of the style

• The property identifies the style quality or characteristic to apply, such as – color (text color)– background-color– text-indent– border-width– font-style

Page 81: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML81

CSS Syntax• A CSS rule-set consists of a selector and a declaration block:

• The selector points to the HTML element you want to style.• The declaration block contains one or more declarations

separated by semicolons.• Each declaration includes a CSS property name and a value,

separated by a colon.• A CSS declaration always ends with a semicolon, and

declaration blocks are surrounded by curly braces.

footer { font-size: .70em; text-align: center; margin-top: 20px; }

Page 82: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

<!DOCTYPE html><!-- text_shadow.html --><html><head> <style> h1 { text-shadow: 2px 2px #FF0000;} </style></head><body><h1>Text-shadow effect</h1><p><b>Note:</b> Internet Explorer 9 and earlier do not support the text-shadow property.</p></body></html>Available in /html04/class_demo_styles/text-shadow-not_CSS3.htmlhttp://barney.gonzaga.edu/~chenta/html04/class_demo_styles/text-shadow-not_CSS3.html

Not supported by CSS3 as it should be included in an external css file (see styles.css)

Page 83: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

<!DOCTYPE html><!-- text-shadow.html --><html><head> <link rel="stylesheet" href= "css/styles_text-shadow.css"> <title>Text Shadow Example</title> <meta charset="utf-8"></head><body><h1>Text-shadow effect</h1><p><b>Note:</b> Internet Explorer 9 and earlier do not support the text-shadow property.</p></body></html>

Available in /html04/class_demo_styles/text-shadow.htmlhttp://barney.gonzaga.edu/~chenta/html04/class_demo_styles/text-shadow.html

/* file name: styles_text-shadow.css */h1 { text-align: left; color: darkblue;text-shadow: 2px 2px 4px red; }

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

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;http://www.w3schools.com/cssref/css3_pr_text-shadow.asphttp://www.w3schools.com/cssref/css3_pr_text-shadow.asp

Page 84: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

In the context of a style rule including a selector and a declaration, _____ formats h1 elements using blue text.

a. <h1>color=blue</h1> b. h1 {color: blue;} c. {color: blue}<h1> d. h1 (color=blue;)

ANSWER: ________ b

Page 85: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML85

CSS Text Properties

Page 86: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML86

CSS Text Properties (continued 1)[see next two slides for more details]

Page 87: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML87

Using Fluid Layouts

Page 88: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML88

Using Fluid Layouts (cont.)

Page 89: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML89

• HTML uses color names or codes to designate color values

• Two types of color codes can be used with CSS:– Hexadecimal– RGB

• Hexadecimal values consist of a six-digit number code that corresponds to RGB (Red, Green, Blue) color values

CSS Colors

Click here for Color link

http://barney.gonzaga.edu/~chen/misall/web/datafiles/demo/demo_color_names.htmlAvailable in Bb (Assignments & Cases Web Design and Resources Class Demos

Class Demoscolor names, safety palette, text styles, Commonly Used HTML Characters

Page 90: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML90

CSS Colors (continued)• To use a color in a style rule declaration, use the color value

as the property value• For example, to style a background color as gray use,

background-color: #808080; or backgound-color: gray;

Page 91: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML91

• HTML elements are positioned on the webpage as a block or as inline content

• A block element appears as a block because it starts and ends with a new line, such as the main element or a paragraph element

• Inline elements are displayed without line breaks so they flow within the same line (see skistyles04.css)

• Inline content always appears within block elements

Understanding Inline Elements and Block Elements

li { list-style-type: none; /*remove bullets on list items*/ display: inline; /*display list items as inline vs. block*/ }

<li><a href="events.html">Events</a> | </li><li><a href="lessons.html">Lessons</a> | </li><li><a href="snowreports.html">Snow Reports</a> | </li><li><a href="employment.html">Employment</a> </li>

ski04.html(block element)

skistyles04.css

vs.

Page 92: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML92

• Each block element such as a header, nav, main, and footer element is displayed in a browser as a box with content

• The CSS box model describes content boxes on a webpage

CSS Box Model

Page 93: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML93

• Each content box can have margins, borders, and padding

• The margin provides passive white space between block elements or between the top or bottom of a webpage

• The border separates the padding and the margin of the block element

• Padding is the passive white space between the content and the border of a block element

CSS Box Model (continued)

Page 94: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML94

CSS Box Model (continued 1)

Page 95: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

The _____ property rounds the corners of a block element’s border.

a. border b. border-style c. border-radius d. box-shadow

ANSWER: ________ c

/* styles.css (in fitness03.html) */header { margin-top: 10px; margin-bottom: 20px; background-color: #FFFFFF; border-radius: 10px; box-shadow: 12px 12px 12px #000000; text-align: center; }

Page 96: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML96

• To indicate a class name as a selector, include a period (.) before the class name

• Float property – It positions an element to the right or left of other elements

• Clear property – It removes the float effect from a webpage

Creating Style Rules for Classes (continued)

.clearfloat { clear: both; }/*clear the float on the class="clearfloat" in the htmlNo floating elements allowed on either the left or the right sideOtherwise, it may be displayed from whatever it was left previously*/

SEE NEXT SLIDE

<h3 class="clearfloat">Children's Lessons</h3>

Page 97: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

<!DOCTYPE html><html><head><style>img { float: left; }.clearfloat { clear: both;}</style></head><body><img src="logocss.gif" width="95" height="84"><p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>

<p class="clearfloat">This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p></body></html>

Embedded (Internal) Style SheetsNot recommended, demonstration purpose

filename: clear_example-v2.htmlSee ski04styles04.html

Page 98: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

<!– in ski04.html -- ><h3 class="clearfloat">Children's Lessons</h3><p>Children's full day lessons meet … </p>

/* in skistyles04.css */.clearfloat { clear: both; } /*clear the float on the class="clearfloat" in the html*/

If no class of “clearfloat” and .clearfloat

Page 99: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

http://barney.gonzaga.edu/~chenta/html04/ski04.htmlhttp://barney.gonzaga.edu/~chenta/html04/hw/ski04.html

margin-right: 2%;

/* in skistyles04.css */.rightmargin { margin-right: 2%; /*add a 2% right margin to class="rightmargin"*/}

<! - - in ski04.html - - ><header id="top"><a href="http://www.breckenridge.com"> <img src="images/ski.jpg" alt="happy skiers" height="228" width="341" class="rightmargin"></a>

Page 100: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML100

• The following steps validate a CSS file– Open the browser and type http://jigsaw.w3.org/css-

validator/ in the address bar to display the W3C CSS Validation Service page

– Tap or click the By file upload tab to display the Validate by file upload information

– Tap or click the Browse button to display the Choose File to Upload dialog box

– Navigate to your css folder to find the styles.css file (Figure 4–41)

To Validate the CSS File

Page 101: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML101

To Validate the CSS File (continued)

Page 102: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML102

– Tap or click the styles.css document to select it– Tap or click the Open button to upload the

selected file to the W3C CSS validator– Tap or click the Check button to send the

document through the validator and display the validation results page (Figure 4–42)

To Validate the CSS File (continued 1)

Page 103: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML103

To Validate the CSS File (continued 2)

Page 104: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

[exercise]

[hw]

Page 105: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

http://barney.gonzaga.edu/~chenta/html04/ski04.htmlhttp://barney.gonzaga.edu/~chenta/html04/hw/ski04.html

margin-right: 2%;

Page 106: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

Differences?

Page 107: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML107

Test the HTMLhttp://barney.gonzaga.edu/~chenta/html03/ski03-v2.htmlhttp://barney.gonzaga.edu/~chenta/html03/hw/ski03-v2.html

http://barney.gonzaga.edu/~chenta/html04/ski04.htmlhttp://barney.gonzaga.edu/~chenta/html04/hw/ski04.html

http://barney.gonzaga.edu/~chenta/html04/ski04-blink.htmlhttp://barney.gonzaga.edu/~chenta/html04/hw/ski04-blink.html

http://barney.gonzaga.edu/~your_ID/html04/hw/ski04.html

Page 108: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML108

Your turn (html04/exercise)/fitness04.html

Page 109: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

• Create a folder of html04 under mis235-0x-public_html on c: (or d:)• Create a folder of exercise under html04 • Create a folder of images under html04/exercise/• Create a folder of css under html04/exercise/• Next create the following folders for hw• Create a folder of hw under html04• Create a folder of images under html04/hw/• Create a folder of css under html04/hw/

Steps before downloading web resources

Page 110: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

• Download four data files, ski04.html, legal.pdf, ski.jpg, and skistyles04.css (the new styles sheet) from Bb (available under Assignments Web Assignments and Resources) and save them in the right folder on your PC or H: drive as shown in Figure 1.

Two Major Tasks:• Modify ski04.html with instructions listed on pages 180-181

(with minor changes). For example, add/modify two tags of <link … > and <img …> and add class=”clearfloat” to <h3> tag (see steps 2 and 11).

• modify the new styles sheet file, skistyles04.css, with the instruction listed on page 180-181 and upload skistyles04.css in the right folder (html_public/html04/hw/css/). Note that this is the major task for the hw.

Page 111: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

public_html [web folder]

index.htmlmyself.pptxmyresume.docx

hw(new folder)

images [folder]

html04[folder for HTML#4]

For html04

exercise(new folder)

fitness04.htmlabout.htmlcontact.html

images [folder]

images [images folder]

book.gif, events.gifgcan.gif, wall.gifmailbox.gif, worm.gif 

ffc_logo.pngequipment1.jpgequipment2.jpgequipment3.jpg

ski.jpgstyles.css skistyles04.css

css[folder]

css[folder] ski04.html

legal.pdf

css [folder]

styles-web1.cssstyles-myweb.css

 

Figure 2. Web Design Directory Structure for html04 Assignment

Page 112: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML112

What you should do for html04ski04.html) (Extend YK: pp. 179-181)

1. Create a new folders of html04 under public_html directory. Next, create two folders under html04: exercise and hw. Finally, create images and css folders under exercise and hw respectively.• exercise folder and the associated images and css folders will be used for text

book exercise (e.g., fitness04.html and others)• hw folder and the associated images and css folders will be used for your

homework assignment (e.g., ski04.html and others)• Therefore, the Web Design Directory Structure for html04 shall be:

public_html/html04/exercise (for fitness04.html) and public_html/html04/hw (for ski04.html) plus images and css folders under each one.

Your Web Page directory structure should be organized as in Figure 1.

2. Download four data files, ski04.html, legal.pdf, ski.jpg, and skistyles04.css (the new styles sheet) from Bb (available under Assignments Web Assignments and Resources) and save them in the right folder on your PC or H: drive as shown in Figure 1.

Page 113: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML113

3. Open the ski04.html by right clicking the file then select “Open with” finally choose Notepad++ or simply select “Edit with Notepad++”. A sample template of ski04.html is shown in Figure 2.4. Modify the following files:a) modify ski04.html with instructions listed on pages 180-181 (with minor changes). For example, add/modify two tags of <link … > and <img …> and add class=”clearfloat” to <h3> tag (see steps 2 and 11). When done save/upload both ski04.html and legal.pdf in the same folder (html_public/html04/hw/). b) modify the new styles sheet file, skistyles04.css, with the instruction listed on page 180-181 and upload skistyles04.css in the right folder (html_public/html04/hw/css/). Note that this is the major task for the hw.c) save/upload the image file of ski.jpg in the right folder (html_public/html04/hw/images/).

Major Task for ski04.html with the new styles sheet (styles04.css)

Page 114: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML114

5. When done, test ski04.html by entering your URL (http://barney.gonzaga.edu/~your_userID/html04/hw/ski04.html) on the Web Browser. You also can check the result of your program with my URL http://barney.gonzaga.edu/~chenta/html04/hw/ski04.html

8. What/How you should turn in: Fail to provide me with ALL information, you will lose major points

UPLOAD HTML#4 (ski04.html) to the Blackboard (not via email). See detailed instruction on the document of “Instruction_Web_Assignments_Bb” available on the Bb. Please note that you should click “Write Submission” to enable the text editor box. Enter the following information in the “2. Assignment Submission” window:  Dr. Chen,  Here is my HTML#4 (ski04.html) assignment. http://barney.gonzaga.edu/~your_userID/html04/hw/ski04.html <Your Full Name> bmis235-03 (or bmis235-04 or bmis235-05) so that I can record/grade your homework directly on the Bb.

Page 115: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML115

Extra Slides for Text-Shadow

Page 116: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

http://www.w3schools.com/cssref/pr_list-style.asp

http://www.w3schools.com/cssref/pr_list-style.asp

CSS list-style property

Page 117: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

<!DOCTYPE html><html><head><style>ul.a {list-style-position:inside;}ul.b {list-style-position:outside;}ul.c {list-style-position:none;}</style></head><body><p>The following list has list-style-position: inside:</p><ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li></ul>

<p>The following list has list-style-position: outside:</p><ul class="b"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li></ul><p>The following list has list-style-position: none:</p><ul class="c"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li></ul><p>"list-style-position: outside" is the default setting.</p></body></html

Default value: outside (the same as none)See: html04/class_demo_styles/list_style_position.htmlhttp://barney.gonzaga.edu/~chenta/html04/class_demo_styles/list_style_position.html

Page 118: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML118

To Create a CSS File and a Style Rule for the Body Element

In Web2/*in css Style for body specifies a background color */body {background-image: url("../images/wall.gif"); }

In styles.css

; /* Pale Canary color [close to Yellow] */

Page 119: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML119

• One way to align webpage content is to use the text-align property, which applies to block elements

• The text-align property can use left (the default), center, right, or justify as its value

• For example, the following rule centers an h1 element: h1 {

text-align: center;color: blue; }

Aligning Webpage Content

/* the followings are added (styles-h1_p.css */h1 { text-align: left; color: blue; text-shadow: 2px 2px 4px red; }p { text-align: center; color: darkred; }

Available in /html04/exercise/fitness04-h1_p.htmlhttp://barney.gonzaga.edu/~chenta/html04/exercise/fitness04-h1_p.htmlAvailable in /html04/exercise/about-h1_p.htmlhttp://barney.gonzaga.edu/~chenta/html04/exercise/about-h1_p.html

Page 120: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

What is (are) differences between

fitness04.html &

fitness04-h1_p.html ?

fitness04-h1_p.htmlabout-h1_p.html&styles-h1_p.css; in /chenta/html04/exercise/

Page 121: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

/* the followings are added (styles-h1_p.css */h1 { text-align: left; color: blue; text-shadow: 2px 2px 4px red; }p { text-align: center; color: darkred; }

Page 122: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

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

Difference between these two versions?

Page 123: Chapter 4: Creating Tables in a Web Site Using an External Style Sheet

Dr. Chen, Management Information Systems - HTML

Chapter 4 Complete

HTML5 & CSS8th Edition