CMPT 165 - cs.sfu.ca€¦ · philosophia, nostro recusabo posidonium ne mea. Cu clita aperiri cum, eam ad labore philosophia. Ius cotidieque efficiantur ad. Noster integre intellegat

CMPT 165 Unit 3 – CSS – Part 1

Sept. 24th, 2015

Summary of key concepts/terms • Components of good website designs… and why?

• Structure of a markup file: DTD vs. head vs. body

• Elements vs. tags vs. content: know the difference

• Tags examined so far:

– List <ol><ul><li><dl><dt><dd>

– Image <img>

– Anchor <a>

– Usage info: http://www.w3schools.com/tags/

• Other important concepts:

– Tags vs. attributes

– Relative vs. absolute URL (from last Thurs.)

• Terms to keep in mind (more late)

– Style vs. semantic meaning of an element

– Usability + accessibility issues

2 CMPT 165 D1 (Fall 2015)

http://www.w3schools.com/tags/

(Templates for) defining lists

3

<h1>Unordered list</h1>

<ul>

<li></li>

</ul>

<h1>Ordered list</h1>

<ol>

<li></li>

</ol>

<h1>Definition list</h1>

<dl>

<dt>Term</dt><dd>Description</dd>

</dl>

<dt>: definition term <dd>: definition description

CMPT 165 D1 (Fall 2015)

What’s wrong?

<img href="http://troy.lib.sfau.ca/screens/banner_left.jpg"

alt="The library logo">

<img src="http://troy.lib.sfau.ca/screens/banner_left.jpg"

alt="The library logo"/>

<img src="http://www.w3.org/2015/05/logoWWW2015.png"

alt="Another logo" width=50%" height="25%" />

<img src="http://www.w3.org/2015/05/logoWWW2015.png"

alt="Another logo" width="50%” height="25%" />

4 CMPT 165 D1 (Fall 2015)

And how about this? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<h1>EXERCISE 1

<title>exercise1</title>

</h1>

<body>

<head>CMPT165 Lab 01</head>

<p>Lorem ipsum dolor sit amet, eum ad insolens sadipscing

philosophia, nostro recusabo posidonium ne mea. Cu clita aperiri

cum, eam ad labore philosophia. Ius cotidieque efficiantur ad.

Noster integre intellegat has ex. Eu pro volutpat tractatos.

Salutatus forensibus no quo.

</p>

<p1>Eum ad insolens sadipscing philosophia, nostro recusabo

posidonium ne mea. Cu clita aperiri cum, eam ad labore philosophia.

Ius cotidieque efficiantur ad. Noster integre intellegat has ex. Eu

pro volutpat tractatos. Salutatus forensibus no quo.</p1>

</body>

</html>

CMPT 165 D1 (Fall 2015) 5

And how about this? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


<html>

<h1>EXERCISE 1


</h1>

<body>

<head>CMPT165 Lab 01</head>



cum, eam ad labore philosophia. Ius cotidieque efficiantur ad.

Noster integre intellegat has ex. Eu pro volutpat tractatos.

Salutatus forensibus no quo.

</p>

<p1>Eum ad insolens sadipscing philosophia, nostro recusabo

posidonium ne mea. Cu clita aperiri cum, eam ad labore philosophia.

Ius cotidieque efficiantur ad. Noster integre intellegat has ex. Eu

pro volutpat tractatos. Salutatus forensibus no quo.</p1>

</body>

</html>

CMPT 165 D1 (Fall 2015) 6

Q: Was it easy to read this code? Q: How would you improve its readability?

CMPT 165 D1 (Fall 2015)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


<html>

<head>


</head>

<body>

<h1>CMPT165 Lab 99</h1>

<!–- Intro about myself -->



cum, eam ad.</p>

<!–- Code below was as extension from lab 2 -->

<p>Eum ad insolens sadipscing philosophia, nostro recusabo

posidonium ne mea. Cu clita aperiri cum, eam ad labore

philosophia.</p>

</body>

</html>

How about this ?

7

Indentation

Add comments to remind yourself of things

Indentation

Use spaces generously… It’s free!

Ways to improve code readability

1. Spacing

2. Indentation

3. Add comments: 

4. Other ideas?

CMPT 165 D1 (Fall 2015) 8

<h1>Common fruits in BC</h1>

<ul>

<li>Apples

<ul><li>Granny smith</li>

<li>Golden delicious</li>

</ul>

</li>

<li>Oranges

<ul><li>Naval

oranges</li><li>Mandarin oranges

</li></ul></li>

<li>Bananas</li>

</ul>

<h1>Common fruits in BC</h1>

<ul>

<li>Apples

<ul>

<li>Granny smith</li>

<li>Golden delicious</li>

</ul>

</li>

<li>Oranges

<ul>

<li>Naval oranges</li>

<li>Mandarin oranges </li>

</ul>

</li>

<li>Bananas</li>

</ul>

vs.

Questions?

INTERACTION

• Give feedback/responses to your audience

Web-programming

(Python, Javascript, PHP, etc.)

STYLE

• Describe visual properties of each element

Cascading Style Sheets (CSS)

Elements to good webpage designs

CONTENT

• Messages to your audience

You provide in this course

reminder: typos/grammar? (professionalism/ impression)

10

STRUCTURE

• Give semantic meaning to each element

• “Meta” data (meta=about)

Done via a markup language

CMPT 165 D1 (Fall 2015)

Effect of styling

• What do sites look like without style?

• To turn on/off:

11 CMPT 165 D1 (Fall 2015)

Cascading Style Sheets (CSS)

A sheet defining styles …

Why “cascading”?

– Answered later

Why CSS?

– By now, you should know what it serves

– E.g. you want “center-align” all your paragraphs

– To center-align, one way is to add attributes in your markup:

<p align="center">

12 CMPT 165 D1 (Fall 2015)

Structure of an essay The coolest dissertation

By ABC

I. Introduction

II. Body

II.A - Topic 1

II.A.i - Subtopic A

II.A.ii - Subtopic B

II.B - Topic 2

II.B.i - Subtopic A

II.B.ii - Subtopic B

III. Conclusion 13

<h1> </h1>

<p align="center"> </p>

<h2> </h2>

<h2> </h2>

<h2> </h2>

<h3> </h3>

<h3> </h3>

<h4> </h4>

<h4> </h4>

<h4> </h4>

<h4> </h4>

A complete example

CMPT 165 D1 (Summer 2005) 14

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>Title</title>

</head>

<body>

<h1>Heading</h1>

<p align="center">This is Paragraph1.</p>


</body>

</html>

Q: What happens when you have an essay of 8 paragraphs?

A: Specify align attribute for each paragraph???


<html>

<head>


</head>

<body>

<h1>Heading</h1>









</body>

</html>

…But what if you have 100 paragraphs???

<style> tag

15


<html>

<head>


</head>

<body>

<h1>Heading</h1>



</body>

</html>


<html xmlns="http://www.w3.org/1999/xhtml">

<head>


<style type="text/css">

p {

text-align: center;

}

</style>

</head>

<body>

<h1>Heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>

Demo

<style> tag

16

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>


<style type="text/css" media="all" >

p {

text-align: center;

}

h1 {

text-align: center;

color: red;

}

</style>

</head>

<body>

<h1>Heading</h1>



</body>

</html>

Required attribute Optional attribute

CMPT 165 D1 (Fall 2015)

Selector: an HTML element that you want to style

selector1 {

property_1: value_1;


…

property_N: value_N;

}

selector2 {



…

property_M: value_M;

}

CSS syntax

17

ol {

list-style-type: circle;

start: a;

}

p {

text-align: center;

}

vs. “Attribute specification”

in older versions of HTML

name_of_attribute="value"

<p align=" center"> Note: declarations are separated by semicolons!

Declaration

CMPT 165 D1 (Fall 2015)

“Curly brace”

3 ways to define visual styles

1. In the header 2. “Inline”

CMPT 165 D1 (Summer 2005) 18

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>


</head>

<body>

<h1>Heading</h1>

<p style=“text-align: center;

color: blue;”>This is a

paragraph.</p>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>


<style type="text/css”>

p{

text-align: center;

color: blue;

}

</style>

</head>

<body>

<h1>Heading</h1>


</body>

</html>

3 ways to define visual styles

1. In the header

2. Inline

3. In a separate CSS file:

19

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>


<style type="text/css">

p {

text-align: center;

}

</style>

</head>

<body>

<h1>Heading</h1>



</body>

</html>

remove

CMPT 165 D1 (Fall 2015)

Linking to an external stylesheet

20

p {

text-align: center;

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>


<link href=“my_style.css" type="text/css" />

</head>

<body>

<h1>Heading</h1>



</body>

</html>

my_style.css

index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>Page 2</title>

<link href=“my_style.css" type="text/css" />

</head>

<body>

<h1>Heading</h1>

<p>This is yet another page.</p>

</body>

</html>

second_page.html

CMPT 165 D1 (Fall 2015)

3 ways to styling markup

Amount of work?

1. Inline

2. In the header

3. In a separate CSS file

21

Most Least

CMPT 165 D1 (Fall 2015)

CSS: Summary

What?

“Cascading” stylesheet?

– “Cascading”: answered later

Why CSS?

– You should know

How?

<style>

<link>

22 CMPT 165 D1 (Fall 2015)

Key items learned so far • Tags:

List <ol><ul><li><dl><dt><dd>

Image <img>

Anchor <a>

Linking to external data <link>

Styling <style>

http://www.w3schools.com/tags/

• Key concepts:

– Relative vs. Absolute URL

– Attribute specification vs. stylesheet

– attribute=“value” vs. CSS (selector, property, value)

23 CMPT 165 D1 (Fall 2015)

Q/A

25

http://cmpt165.cs.sfu.ca/ ~ /demos /SFU_logo.png lisat

Remote Local

Absolute vs. Relative URL SFU_logo.png + index.html in same folder (demos)

26



<html>

<head><title>Title</title></head>

<body>

<h1>Heading</h1>

<p>

<img src="http://fraser.sfu.ca/

~lisat/demos/SFU_logo.png" />

</p>

<p><img src="SFU_logo.png" /></p>

</body>

</html>

index.html:

CMPT 165 D1 (Fall 2015)

Absolute vs. Relative URL SFU_logo.png + index.html not in same folder

Q: what is the relative URL for the SFU_logo.png file?

27



<html>


<body>

<h1>Heading</h1>

<p>

<img src="http://cmpt165.csil.sfu.ca/

~lisat/SFU_logo.png" />

</p>

<p><img src="../SFU_logo.png" /></p>

</body>

</html>

index.html:

Answer: use “..” (“parent” directory)

/home/lisat/public_html/SFU_logo.png

/home/lisat/public_html/demos/index.html

“parent” directory

CMPT 165 D1 (Fall 2015)

Absolute vs. Relative URL SFU_logo.png + index.html not in same folder


28



<html>


<body>

<h1>Heading</h1>

<p>


~lisat/SFU_logo.png" />

</p>

<p><img src="../../SFU_logo.png" /></p>

</body>

</html>

index.html:

public_html/SFU_logo.png

public_html/d1/d2/index.html

“grandparent” directory?

CMPT 165 D1 (Fall 2015)

/home/lisat/public_html/SFU_logo.png

/home/lisat/public_html/d1/d2/index.html

Absolute vs. Relative URL SFU_logo.png now moved to another subfolder test


29



<html>


<body>

<h1>Heading</h1>

<p>


~lisat/test/SFU_logo.png" />

</p>

<p><img src="../../test/SFU_logo.png"/></p>

</body>

</html>

index.html:

public_html/test/SFU_logo.png

public_html/d1/d2/index.html

“grandparent” directory?

CMPT 165 D1 (Fall 2015)

/home/lisat/public_html/test/SFU_logo.png

/home/lisat/public_html/d1/d2/index.html

Questions?

Putting all in context (from last Tues.) Keywords:

• URL: a resource, e.g. a file: study-guide.pdf, E1.html

• Upload

• Local vs. remote

Steps:

1. You do coursework on your local computer, e.g.

C:\user\165\E1.html

2. When done, you upload files to a remote server that accepts request for resource

– You store these files in a file location on our cmpt165 (remote) server, e.g.

cmpt165.csil.sfu.ca\home\lisat\public_html\E1.html

– Others on Internet may request to view E1.html using this URL:

http:\\cmpt165.csil.sfu.ca\~lisat\E1.html

– Server cmpt165 is configured to look at the location “\home\lisat\public_html”

3. Users request the URL of your work from their browser (e.g. Firefox, etc.)

CMPT 165 D1 (Fall 2015)

Questions?

CMPT 165 Unit 3 – CSS – Colour

Sept. 24th, 2015

CSS: background

• Levels (version number):

– Level 1: released in Dec 1996

– Level 2: released in May 1999

– Level 2.1: released in June 2011

– Level 3 is being developed

– Level 4 is planned for the future

34 CMPT 165 D1 (Fall 2015)

CSS Level 1

Style support for:

• Color of element text, backgrounds, etc.

• Alignment of elements (text, images, etc.)

• Text formatting: e.g. spacing of words, letters, lines

• Font properties: typeface and emphasis

• Boxing: margin, border, padding, and positioning

• Unique identification: explained later

• Generic classification: explained later

35 CMPT 165 D1 (Fall 2015)

Colors

• White

• Silver

• Gray

• Black

• Red

• Maroon

• Yellow

• Olive

• Orange

• Lime

• Green

• Aqua

• Teal

• Blue

• Navy

• Fuchsia

• Purple

36

17 standard color presets in CSS 1

CMPT 165 D1 (Fall 2015)

RGB model • “primary colors”: Red + Green + Blue

• “Additive” model: i.e. Red + Green = Yellow

Red + Blue = Purple

RGB model/coding:

• A system for specifying colors

• A numerical value reflecting intensity (“strength”) of a color channel: e.g. – 5 is brighter than 0

– 8 is brighter than 2

• 3 channels 3 sets of values, e.g. Bright red given by “900”

37

http://en.wikipedia.org/ wiki/File:AdditiveColor.svg

CMPT 165 D1 (Fall 2015)

RGB model

Examples:

• Bright green?

• Dark green?

• Bright blue?

• Dark red?

• Dark blue?

• Purple?

• Black?

• Gray?

38

Possible RGB encoding:

0 9 0

0 5 0

0 0 9

5 0 0

0 0 5

5 0 5

0 0 0

5 5 5

Red Green Blue

CMPT 165 D1 (Fall 2015)

Color specification Decimal system (base=10):

0 1 2 3 4 5 6 7 8 9

Darkest Brightest

This is not used in CSS! CSS uses hex system…

Hexadecimal system (base=16):

0 1 2 3 4 5 6 7 8 9 A B C D E F

Darkest Brightest

Example:

Brightest red? RGB = X X X?

= F 0 0

39

CMPT 165 D1 (Fall 2015)

RGB model

Examples:

• Bright green?

• Dark green?

• Bright blue?

• Dark red?

• Dark blue?

• Purple?

• Black?

• Gray?

40

0 9 0

0 5 0

0 0 9

5 0 0

0 0 5

5 0 5

0 0 0

5 5 5

0 F 0

0 8 0

0 0 F

8 0 0

0 0 8

8 0 8

0 0 0

8 8 8

Decimal Hexadecimal

0 1 2 3 4 5 6 7 8 9 A B C D E F

Red Green Blue

CMPT 165 D1 (Fall 2015)

0 1 2 3 4 5 6 7 8 9

Always start with hash key (#),

e.g.

p {

background-color: #0F0;

color: #AF0;

}

hr {

border-color: #0a0;

color: black;

}

Colour specification in CSS

41 CMPT 165 D1 (Fall 2015)

We’ll look more on colour specification next class…

Today’s Highlights

• CSS: motivation and practicalities

• So far, things we learned related to CSS:

– RGB color model

– Hexadecimal color coding

– 3 ways to colour specification in both CSS+Markup

43 CMPT 165 D1 (Fall 2015)

Tips for preparing the exams

• Exercise on your own: summarize key concepts seen so far in Unit 1 + Unit 2

• For all coursework: start by writing the code in paper + pen!

CMPT 165 D1 (Fall 2015) 44

CMPT 165 - cs.sfu.ca€¦ · philosophia, nostro recusabo posidonium ne mea. Cu clita aperiri cum, eam ad labore philosophia. Ius cotidieque efficiantur ad. Noster integre intellegat

Documents