CMPT 165 Unit 3 CSS Part 1. Sept. 24 th, 2015

Size: px

Start display at page:

Download "CMPT 165 Unit 3 CSS Part 1. Sept. 24 th, 2015"

Laurence Francis
6 years ago
Views:

1 CMPT 165 Unit 3 CSS Part 1 Sept. 24 th, 2015

2 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: 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

3 (Templates for) defining lists <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 3

4 What s wrong? <img href=" alt="the library logo"> <img src=" alt="the library logo"/> <img src=" alt="another logo" width=50%" height="25%" /> <img src=" alt="another logo" width="50% height="25%" /> 4

5 And how about this? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <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> 5

6 And how about this? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <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> Q: Was it easy to read this code? Q: How would you improve its readability? 6

7 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <html> <head> </head> <body> " <title>exercise1</title> <h1>cmpt165 Lab 99</h1> <! - Intro about myself --> How about this? Indentation Indentation Use spaces generously It s free! Add comments to remind yourself of things <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> 7

8 Ways to improve code readability 1. Spacing 2. Indentation <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> 3. Add comments:  4. Other ideas? 8 vs.

9 Questions?

10 Elements to good webpage designs CONTENT Messages to your audience You provide in this course reminder: typos/grammar? (professionalism/ impression) INTERACTION Give feedback/responses to your audience Web-programming (Python, Javascript, PHP, etc.) STRUCTURE Give semantic meaning to each element Meta data (meta=about) Done via a markup language STYLE Describe visual properties of each element Cascading Style Sheets (CSS) 10

11 Effect of styling What do sites look like without style? To turn on/off: 11

12 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

13 Structure of an essay <h1> The coolest dissertation </h1> <p align="center"> By ABC </p> <h2> I. Introduction </h2> <h2> II. Body </h2> <h3> II.A - Topic 1 </h3> <h4> II.A.i - Subtopic A </h4> <h4> II.A.ii - Subtopic B </h4> <h3> II.B - Topic 2 </h3> <h4> II.B.i - Subtopic A </h4> <h4> II.B.ii - Subtopic B </h4> <h2> III. Conclusion </h2> 13

14 A complete example <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN " <html> <head> <title>title</title> </head> <body> <h1>heading</h1> </body> </html> Q: What happens when you have an essay of 8 paragraphs? A: Specify align attribute for each paragraph??? <p align="center">this is Paragraph1.</p> <p align="center">this is Paragraph2.</p> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN " <html> <head> <title>title</title> </head> <body> But what if you have 100 paragraphs??? <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> CMPT 165 D1 (Summer 2005) 14

15 <style> tag <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN " <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 " <html xmlns=" <head> <title>title</title> <style type="text/css"> p { text-align: center; Demo } </style> </head> <body> <h1>heading</h1> <p>this is a paragraph.</p> <p>this is another paragraph.</p> </body> </html> 15

16 <style> tag <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html xmlns=" <head> <title>title</title> <style type="text/css" media="all" > p { Required attribute Optional attribute 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> 16

17 CSS syntax 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; } Note: declarations are separated by semicolons! Curly brace Declaration 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"> 17

18 3 ways to define visual styles 1. In the header 2. Inline <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <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> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title>title</title> </head> <body> <h1>heading</h1> <p style= text-align: center; color: blue; >This is a paragraph.</p> </body> </html> </body> </html> CMPT 165 D1 (Summer 2005) 18

19 3 ways to define visual styles 1. In the header 2. Inline 3. In a separate CSS file: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title>title</title> <style type="text/css"> p { text-align: center; remove } </style> </head> <body> <h1>heading</h1> <p>this is a paragraph.</p> <p>this is another paragraph.</p> </body> </html> 19

20 Linking to an external stylesheet second_page.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " index.html <html> <head> <html> <title>page 2</title> <head> <link href= my_style.css" type="text/css" /> </head> <title>title</title> <body> <link href= my_style.css" type="text/css" /> </head> <h1>heading</h1> <body> <p>this is yet another page.</p> </body> <h1>heading</h1> </html> <p>this is a paragraph.</p> <p>this is another paragraph.</p> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " my_style.css p { text-align: center; } 20

21 3 ways to styling markup 1. Inline 2. In the header 3. In a separate CSS file Amount of work? Most Least 21

22 CSS: Summary What? Cascading stylesheet? Cascading : answered later Why CSS? You should know How? <style> <link> 22

23 Tags: List Image Anchor Key items learned so far Linking to external data Styling <ol><ul><li><dl><dt><dd> <img> <a> <link> <style> Key concepts: Relative vs. Absolute URL Attribute specification vs. stylesheet attribute= value vs. CSS (selector, property, value) 23

24 Q/A

25 ~ lisat /demos/sfu_logo.png Local Remote 25

26 Absolute vs. Relative URL SFU_logo.png + index.html in same folder (demos) index.html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html> <head><title>title</title></head> <body> <h1>heading</h1> <p> <img src=" ~lisat/demos/sfu_logo.png" /> </p> <p><img src="sfu_logo.png" /></p> </body> </html> 26

27 index.html: 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? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html> <head><title>title</title></head> <body> /home/lisat/public_html/sfu_logo.png <h1>heading</h1> /home/lisat/public_html/demos/index.html <p> <img src=" ~lisat/sfu_logo.png" /> </p> <p><img src="../sfu_logo.png" /></p> </body> </html> Answer: use.. ( parent directory) parent directory 27

28 index.html: 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? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html> <head><title>title</title></head> <body> /home/lisat/public_html/sfu_logo.png <h1>heading</h1> /home/lisat/public_html/d1/d2/index.html <p> <img src=" ~lisat/sfu_logo.png" /> </p> <p><img src="../../sfu_logo.png" /></p> </body> </html> grandparent directory? 28

29 index.html: 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? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html> <head><title>title</title></head> <body> /home/lisat/public_html/test/sfu_logo.png <h1>heading</h1> /home/lisat/public_html/d1/d2/index.html <p> <img src=" ~lisat/test/sfu_logo.png" /> </p> <p><img src="../../test/sfu_logo.png"/></p> </body> </html> grandparent directory? 29

30 Questions?

31 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: 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.)

32 Questions?

33 CMPT 165 Unit 3 CSS Colour Sept. 24 th, 2015

34 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

35 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

36 Colors 17 standard color presets in CSS 1 White Silver Gray Black Red Maroon Yellow Olive Orange Lime Green Aqua Teal Blue Navy Fuchsia Purple 36

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.

37 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 wiki/file:additivecolor.svg 3 channels 3 sets of values, e.g. Bright red given by

38 RGB model Red Green Blue Examples: Bright green? Dark green? Bright blue? Dark red? Dark blue? Purple? Black? Gray? Possible RGB encoding:

39 Color specification Decimal system (base=10): Darkest Brightest This is not used in CSS! CSS uses hex system Hexadecimal system (base=16): A B C D E F Darkest Brightest Example: Brightest red? RGB = X X X? = F

40 RGB model Red Green Blue Examples: Bright green? Dark green? Bright blue? Dark red? Dark blue? Purple? Black? Gray? Decimal A B C D E F Hexadecimal 0 F F

41 Always start with hash key (#), e.g. Colour specification in CSS p { } background-color: #0F0; color: #AF0; hr { border-color: #0a0; color: black; } 41

42 We ll look more on colour specification next class

43 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

44 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! 44

Admin. Midterm 1 on. Oct. 13 th (2 weeks from today) Coursework:

Admin. Midterm 1 on. Oct. 13 th (2 weeks from today) Coursework: Midterm 1 on Admin Oct. 13 th (2 weeks from today) Coursework: E1 grade released: please see Karoon (TA) at his office hours (Tues at 12-1pm) E2 due tomorrow E3 posted yesterday; due this Friday 11:59pm