CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A...
Transcript of CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A...
![Page 1: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/1.jpg)
CMPT 165 Unit 3 – CSS – Part 1
Sept. 24th, 2015
![Page 2: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/2.jpg)
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)
![Page 3: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/3.jpg)
(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)
![Page 4: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/4.jpg)
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)
![Page 5: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/5.jpg)
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
![Page 6: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/6.jpg)
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) 6
Q: Was it easy to read this code? Q: How would you improve its readability?
![Page 7: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/7.jpg)
CMPT 165 D1 (Fall 2015)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>exercise1</title>
</head>
<body>
<h1>CMPT165 Lab 99</h1>
<!–- Intro about myself -->
<p>Lorem ipsum dolor sit amet, eum ad insolens sadipscing
philosophia, nostro recusabo posidonium ne mea. Cu clita aperiri
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!
![Page 8: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/8.jpg)
Ways to improve code readability
1. Spacing
2. Indentation
3. Add comments: <!-- text in here is ignored by browser -->
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.
![Page 9: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/9.jpg)
Questions?
![Page 10: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/10.jpg)
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)
![Page 11: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/11.jpg)
Effect of styling
• What do sites look like without style?
• To turn on/off:
11 CMPT 165 D1 (Fall 2015)
![Page 12: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/12.jpg)
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)
![Page 13: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/13.jpg)
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>
![Page 14: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/14.jpg)
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>
<p align="center">This is Paragraph2.</p>
</body>
</html>
Q: What happens when you have an essay of 8 paragraphs?
A: Specify align attribute for each paragraph???
<!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>
<p align="center">This is Paragraph2.</p>
<p align="center">This is Paragraph3.</p>
<p align="center">This is Paragraph4.</p>
<p align="center">This is Paragraph5.</p>
<p align="center">This is Paragraph6.</p>
<p align="center">This is Paragraph7.</p>
<p align="center">This is Paragraph8.</p>
</body>
</html>
…But what if you have 100 paragraphs???
![Page 15: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/15.jpg)
<style> tag
15
<!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>
<p align="center">This is Paragraph2.</p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<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
![Page 16: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/16.jpg)
<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>
<title>Title</title>
<style type="text/css" media="all" >
p {
text-align: center;
}
h1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Required attribute Optional attribute
CMPT 165 D1 (Fall 2015)
![Page 17: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/17.jpg)
Selector: an HTML element that you want to style
selector1 {
property_1: value_1;
property_2: value_2;
…
property_N: value_N;
}
selector2 {
property_1: value_1;
property_2: value_2;
…
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”
![Page 18: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/18.jpg)
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>
<title>Title</title>
</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>
<title>Title</title>
<style type="text/css”>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
![Page 19: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/19.jpg)
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>
<title>Title</title>
<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>
remove
CMPT 165 D1 (Fall 2015)
![Page 20: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/20.jpg)
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>
<title>Title</title>
<link href=“my_style.css" type="text/css" />
</head>
<body>
<h1>Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</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)
![Page 21: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/21.jpg)
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)
![Page 22: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/22.jpg)
CSS: Summary
What?
“Cascading” stylesheet?
– “Cascading”: answered later
Why CSS?
– You should know
How?
<style>
<link>
22 CMPT 165 D1 (Fall 2015)
![Page 23: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/23.jpg)
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)
![Page 24: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/24.jpg)
Q/A
![Page 25: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/25.jpg)
25
http://cmpt165.cs.sfu.ca/ ~ /demos /SFU_logo.png lisat
Remote Local
![Page 26: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/26.jpg)
Absolute vs. Relative URL SFU_logo.png + index.html in same folder (demos)
26
<!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>
<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)
![Page 27: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/27.jpg)
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
<!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>
<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)
![Page 28: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/28.jpg)
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?
28
<!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>
<img src="http://cmpt165.csil.sfu.ca/
~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
![Page 29: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/29.jpg)
Absolute vs. Relative URL SFU_logo.png now moved to another subfolder test
Q: what is the relative URL for the SFU_logo.png file?
29
<!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>
<img src="http://cmpt165.csil.sfu.ca/
~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
![Page 30: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/30.jpg)
Questions?
![Page 31: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/31.jpg)
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)
![Page 32: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/32.jpg)
Questions?
![Page 33: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/33.jpg)
CMPT 165 Unit 3 – CSS – Colour
Sept. 24th, 2015
![Page 34: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/34.jpg)
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)
![Page 35: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/35.jpg)
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)
![Page 36: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/36.jpg)
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)
![Page 37: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/37.jpg)
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)
![Page 38: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/38.jpg)
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)
![Page 39: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/39.jpg)
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)
![Page 40: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/40.jpg)
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
![Page 41: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/41.jpg)
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)
![Page 42: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/42.jpg)
We’ll look more on colour specification next class…
![Page 43: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/43.jpg)
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)
![Page 44: CMPT 165 - cs.sfu.ca · CMPT 165 D1 (Fall 2015) 2 (Templates for) ... Cu clita aperiri cum, ... A sheet defining styles …](https://reader030.fdocuments.net/reader030/viewer/2022020413/5b4f9ecd7f8b9a3e6e8cb60b/html5/thumbnails/44.jpg)
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