Admin & Today s Agenda

Size: px

Start display at page:

Download "Admin & Today s Agenda"

Monica White
5 years ago
Views:

1 Admin & Today s Agenda FYI: Boshra s and Guri s office hours switched this week Take-home exercises: any one done them??? Key materials in Unit 4 2 new concepts New tags CMPT 165 D1 (Fall 2015) 1

2 And before I start Thank you very much to those who participated at the Terry Fox Run last Friday Some photo updates from Guri 2

3 CMPT 165 D1 (Fall 2015) 3

4 And from your fellow classmates CMPT 165 D1 (Fall 2015) 4

5 CMPT 165 D1 (Fall 2015) 5

6 CMPT 165 D1 (Fall 2015) 6

7 CMPT 165 D1 (Fall 2015) 7

8 Big thank you to those who actually did the run: Alvin Austin G. Austin J. David $ and again, to those who kindly sponsored! CMPT 165 D1 (Fall 2015) 8

9 CSS Level 1 Style support for: Colour of element text, backgrounds, etc. Font properties: typeface and emphasis Alignment of elements (text, images, etc.) Text formatting: e.g. spacing Boxing: margin, border, padding, and positioning Unique identification Generic classification: explained later CMPT 165 D1 (Fall 2015) 9

10 The id attribute Provides an identity for an element e.g. <img id="myprofilepic" src="pic.png" /> Try to use meaningful id so you can remember easily <ol id="menu_list"> Should be unique for proper anchoring CMPT 165 D1 (Fall 2015) 10

11 Linking elements within the same page Use # + id attribute <h1>an ESSAY FOR CMPT 165</h1> <blockquote>anyone who </blockquote > <h2>1. INTRO</h2> <p id="p1" >Lorem ipsum dolor sit amet, ne has solet pe. Est </p> top <h2>2. METHODS</h2> <p id="p2" >Lorem ipsum dolor sit amet, ne has solet percipitur, voluptaria mnesarchum ea eum. Est ep.</p> <a href="#p1">top</a> <h3>2.1 Xafsdd</h3> <p id="p3" >Sipsum dolor sit amet, ne has solet percipitur, voluptaria mnesarchum ea Lorem ipsum dolor sit amet, ne has solet afdafsafdsf. voluptaria mnesarchum ea mnesarchum ea Lorem ipsum dolor sit CMPT 165 D1 (Summer 2005) 11

12 Linking elements within the same page Use # + id attribute <h1>an ESSAY FOR CMPT 165</h1> <blockquote>anyone who </blockquote > <h2>1. INTRO</h2> <a href="#p2">skip</a> <p id="p1" >Lorem ipsum dolor sit amet, ne has solet pe. Est </p> skip skip top <h2>2. METHODS</h2> <a href="#p3">skip</a> <p id="p2" >Lorem ipsum dolor sit amet, ne has solet percipitur, voluptaria mnesarchum ea eum. Est ep.</p> <a href="#p1">top</a> skip top top <h3>2.1 Xafsdd</h3> <a href="#p4">skip</a> <p id="p3" >Sipsum dolor sit amet, ne has solet percipitur, voluptaria mnesarchum ea Lorem ipsum dolor sit amet, ne has solet afdafsafdsf. voluptaria mnesarchum ea mnesarchum ea Lorem ipsum dolor sit CMPT 165 D1 (Summer 2005) 12

13 Example CMPT 165 D1 (Fall 2015) 13

14 Uses: The id attribute 1) For anchoring parts within the same webpage Instantiate: <h1 id="a_meaningful_name"></h1> Reference (refer to the element as): #a_meaningful_name 2) For styling a specific element #p1 { color: red; } CMPT 165 D1 (Fall 2015) 14

15 The id attribute <p> Q1: Gfe dsf sdf? </p> <p> A1: dsf jjf jsf.</p> <p> Q2: Fsjf jsadf? </p> <p> A2: Sbjffa al eef. </p> p { font-family: sans-serif } <p> Q3: Msjf jsadf? </p> <p> A3: Pbjff. La al. </p> Browser: Q1: Gfe dsf sdf? A1: dsf jjf jsf. Q2: Fsjf jsadf? A2: Sbjffa al eef. Q3: Msjf jsadf? A3: Pbjff. La al. CMPT 165 D1 (Fall 2015) 15

16 The id attribute <p id= q1 > Q1: Gfe dsf sdf? </p> <p> A1: dsf jjf jsf.</p> <p> Q2: Fsjf jsadf? </p> <p> A2: Sbjffa al eef. </p> p { font-family: sans-serif } <p> Q3: Msjf jsadf? </p> <p> A3: Pbjff. La al. </p> Browser: Q1: Gfe dsf sdf? A1: dsf jjf jsf. Q2: Fsjf jsadf? A2: Sbjffa al eef. Q3: Msjf jsadf? A3: Pbjff. La al. CMPT 165 D1 (Fall 2015) 16

17 The id attribute <p id= q1 > Q1: Gfe dsf sdf? </p> <p> A1: dsf jjf jsf.</p> <p> Q2: Fsjf jsadf? </p> <p> A2: Sbjffa al eef. </p> p { font-family: sans-serif } #q1{ font-style: bold; } <p> Q3: Msjf jsadf? </p> <p> A3: Pbjff. La al. </p> Browser: Q1: Gfe dsf sdf? A1: dsf jjf jsf. Q2: Fsjf jsadf? A2: Sbjffa al eef. Q3: Msjf jsadf? A3: Pbjff. La al. CMPT 165 D1 (Fall 2015) 17

18 The id attribute <p id= q1 > Q1: Gfe dsf sdf? </p> <p> A1: dsf jjf jsf.</p> <p id= q2 > Q2: Fsjf jsadf? </p> <p> A2: Sbjffa al eef. </p> <p id= q3 > Q3: Msjf jsadf? </p> <p> A3: Pbjff. La al. </p> Browser: Q1: Gfe dsf sdf? A1: dsf jjf jsf. Q2: Fsjf jsadf? A2: Sbjffa al eef. Q3: Msjf jsadf? A3: Pbjff. La al. CMPT 165 D1 (Fall 2015) If you have 5 questions? p { font-family: sans-serif } #q1{ font-style: bold; } #q2{ font-style: bold; } #q3{ font-style: bold; } #q4{ font-style: bold; } #q5{ font-style: bold; } An alternative: group into single declaration 18

19 The id attribute <p id= q1 > Q1: Gfe dsf sdf? </p> <p> A1: dsf jjf jsf.</p> <p id= q2 > Q2: Fsjf jsadf? </p> <p> A2: Sbjffa al eef. </p> <p id= q3 > Q3: Msjf jsadf? </p> <p> A3: Pbjff. La al. </p> Browser: Q1: Gfe dsf sdf? A1: dsf jjf jsf. Q2: Fsjf jsadf? A2: Sbjffa al eef. Q3: Msjf jsadf? A3: Pbjff. La al. CMPT 165 D1 (Fall 2015) If you have 5 questions? p { font-family: sans-serif } #q1,#q2,#q3,#q4,#q5{ font-style: bold; } An alternative: group into single declaration 19

20 The id attribute <p id= q1 > Q1: Gfe dsf sdf? </p> <p> A1: dsf jjf jsf.</p> <p id= q2 > Q2: Fsjf jsadf? </p> <p> A2: Sbjffa al eef. </p> <p id= q3 > Q3: Msjf jsadf? </p> <p> A3: Pbjff. La al. </p> Browser: Q1: Gfe dsf sdf? A1: dsf jjf jsf. Q2: Fsjf jsadf? A2: Sbjffa al eef. Q3: Msjf jsadf? A3: Pbjff. La al. But what if you have 1000 Q s!? p { font-family: sans-serif } #q1,#q2,#q3,#q4,#q5{ font-style: bold; } CMPT 165 D1 (Fall 2015) 20

21 Solution: the class attribute <p id= q1 > Q1: Gfe dsf sdf? </p> <p> A1: dsf jjf jsf.</p> <p id= q2 > Q2: Fsjf jsadf? </p> <p> A2: Sbjffa al eef. </p> <p id= q3 > Q3: Msjf jsadf? </p> <p> A3: Pbjff. La al. </p> Browser: Q1: Gfe dsf sdf? A1: dsf jjf jsf. Q2: Fsjf jsadf? A2: Sbjffa al eef. Q3: Msjf jsadf? A3: Pbjff. La al. But what if you have 1000 Q s!? p { font-family: sans-serif } #q1,#q2,#q3,#q4,#q5{ font-style: bold; } CMPT 165 D1 (Fall 2015) 21

22 Solution: the class attribute <p class= ques > Q1: Gfe dsf sdf? </p> <p> A1: dsf jjf jsf.</p> <p class= ques > Q2: Fsjf jsadf? </p> <p> A2: Sbjffa al eef. </p> <p class= ques > Q3: Msjf jsadf? </p> <p> A3: Pbjff. La al. </p> p { font-family: sans-serif }.ques { font-style: bold; } Browser: Q1: Gfe dsf sdf? A1: dsf jjf jsf. Q2: Fsjf jsadf? A2: Sbjffa al eef. Q3: Msjf jsadf? A3: Pbjff. La al. CMPT 165 D1 (Fall 2015) 22

23 id, class attributes id attribute Instantiate as attribute of tag: <p id="intro_para">hello!</p> class attribute Instantiate attribute of tag: <h1 class="class_name">h</h1> Reference via: #intro_para Reference:.class_name Anchoring in html: <a href="#intro_para">top</a> Styling in CSS: #intro_para { color: red; } Styling in CSS:.class_name { color: red; } CMPT 165 D1 (Fall 2015) 23

24 id vs. class? id vs. class explained: There is a unique ID for every student An element should have a single id A student may been in many classes (i.e. not unique) An element may be have multiple classes Usage: If an element has some unique property, use id When some visual properties need to be reapplied, use class Unique vs. Repeated CMPT 165 D1 (Fall 2015) 24

25 CSS Level 1 Style support for: Colour 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 of elements: id Generic classification of elements: class CMPT 165 D1 (Fall 2015) 25

26 Questions? 26

27 Some important markup tags seen so far Block <p> <h1> <hr> <ol> <ul> <li> <blockquote> The <cite> tag defines the title of a work (e.g. a book, a song, a movie, a TV show, a painting, a sculpture, etc.). Inline <b> <i> <em> <strong> <tt> <sub> <sup> <cite> 27

28 Block vs. Inline elements 28

29 Block vs. Inline elements Block Nature of use: structural Inline Nature of use: used along with text Guidelines: - Contain inline elements, e.g.: <h1>you<em>can</em>!</h1> - Can be inside another block element - Not inside an inline element! Guidelines: - May contain another inline element, e.g.: <q>you <em>can</em>!</q> - Usually must be inside block elements! i.e. Cannot be directly inside <body> Behaviours*: Expands across the page Drop below other elements Behaviours*: Flows along with text *without using style rules See 29

30 Expands across the page Next element is forced to next line Flows along with text 30

31 Important markup tags learned so far Block <p> <h1> <hr> <ol> <ul> <li> <blockquote> <a>? Inline <b> <i> <em> <strong> <tt> <sub> <sup> <cite> 31

32 Anchor tags are inline elements But Exceptions In older version of markup, may be placed directly in the body! <a> cannot contain another <a> Also does not make sense Paragraph, header tags semantically Cannot be placed in within each other; wrong: <p><p>abcdefg</p></p> Its content must be an inline element; wrong: <h1><p>abcdefg</p></h1> 32

33 Exceptions <ol>, <ul> must contain other elements (<li>) CMPT 165 D1 (Fall 2015) 33

34 Important markup tags learned so far Block <p> <h1> <hr> <ol> <ul> <li> <blockquote> <img>? Inline <b> <i> <em> <strong> <tt> <sub> <a> <sup> <cite> 34

35 Few asked when answers already in Study Guide Please read guide more carefully!

36 Important markup tags learned so far Block <p> <h1> <hr> <ol> <ul> <li> <blockquote> Inline <b> <i> <em> <strong> <tt> <sub> <a> <sup> <img> <cite> 36

37 Important markup tags learned so far Block <p> <h1> <hr> <ol> <ul> <li> <blockquote> <p> This is paragraph. <br/> This is another paragraph. </p> Inline <b> <i> <em> <strong> <tt> <br> <sub> <a> <sup> <img> <cite> <br>? 37

38 Important markup tags learned so far Block <p> <h1> <hr> <ol> <ul> <li> <blockquote> Inline <b> <i> <em> <strong> <tt> <br> <sub> <a> <sup> <img> <cite> <abbr>? 38

39 Abbreviation The <abbr> tag Inline elements: <abbr title="hypertext Markup Language">HTML</abbr> Provides a form of interaction Nice way of separating high and low level information Omitting the title attribute will not give validation error But you should not omit it! Reminder: A global attribute (Required in your E2) Demo CMPT 165 D1 (Fall 2015) 39

40 Important markup tags learned so far Block <p> <h1> <hr> <ol> <ul> <li> <blockquote> <div> Inline <b> <i> <em> <strong> <tt> <br> <sub> <a> <sup> <img> <cite> <span> 40

41 Generic Tags <div> division Generic block element Used to divide a webpage into related parts <span> span Generic inline element Mostly used to style a specific parts of content 41

42 <span> illustrated Lorem ipsum dolor sit amet, cum ea periculis complectitur, ex quo option alienum. Ex tale temporibus mei, graeco fuisset omittam an vel, sed ex brute decore. Ea putant fuisset patrioque eum, atqui integre vivendum cum ex, cu sea sadipscing neglegentur. Mea ne wisi commodo, his eu. No decore voluptua nam. Q: What does this mean??? <p>lorem ipsum dolor sit amet, cum ea periculis complectitur, ex quo option alienum. <span class="cool_quote"> Ex tale temporibus mei, graeco fuisset omittam an vel, sed ex brute decore. </span> Ea putant fuisset patrioque eum, atqui integre vivendum cum ex, cu sea sadipscing neglegentur. Mea ne wisi commodo, his eu. No decore voluptua nam.</p>.cool_quote{ font-family: serif; color: #33b; font-weight: bold; font-style: italic; } 42

43 CMPT 165 D1 (Fall 2015) 43

44 <p>you <em>will</em> make more, because it's <span class="strongest">delicious</span>.</p>.strongest { /*strongest emphasis*/ font-weight: bold; font-style: italic; } CMPT 165 D1 (Fall 2015) 44

45 Generic Tags <div> division Generic block element Used to divide a webpage into related parts <span> span Generic inline element Mostly used to style a specific parts of content 45

46 Uses of <div> (Very powerful tool, but don t abuse usage; complicated markup difficult to maintain) Separate a page into logical sections Typical use: 46

47 Uses of <div> (Very powerful tool, but don t abuse usage; complicated markup difficult to maintain) Separate a page into logical sections Typical use: Header Nav. Body main Footer CMPT 165 D1 (Summer 2005) 47

48 <div> illustrated Header Body Footer <div id="header"> <h1> My Heading </h1> </div> <div id="body"> <p>this is body paragraph1.</p> <p>this is body paragraph2.</p> <p>this is body paragraph3.</p> <p>this is body paragraph4.</p> <p>this is body paragraph5.</p> </div> <div id="footer"> <p>copyright goes here.</p> </div> 48

49 <div> illustrated Nav. Header Body Main Footer <div id="header">  <h1> My Heading </h1> </div> <div id="body">  <div id="nav">  <ul> <li><a href="index.html">home</a></li> <li><a href= me.html">about me</a></li> <li><a href= notes.html">my course notes</a></li> <li><a href= contact.html">contact</a></li> </ul> </div> <div id="main_body">  <p>lorem ipsum dolor sit amet, cum ea periculis complectitur, ex quo option alienum. Ex tale temporibus mei, graeco fuisset omittam an vel, sed ex brute decore. Ea putant fuisset patrioque eum, atqui integre vivendum cum ex. Ea putant fuissetr. Mea ne wisi commodo, his eu. No decore voluptua nam.</p> <p>bom ipsucomplectitur, ex quo option alienum. <i style="font-color;blue;"> Ex tale temporibus mei, graeco fuisset omittam an vel, sed ex brute decore. </i> Ea putant fuisset patr his eu. No decore voluptua nam.</p> </div> </div> <div id="footer">  <p>copyright goes here.</p> </div> 49

50 <div> illustrated /* general styling */ div { padding:.01%; background-color: #afa; border: #5b5 solid.2em; margin:.01%; } #body { height: 50%; } /* specific items */ #header, #footer{ text-align: center; clear: both; } #nav { width: 15%; float: left; min-height: 20em; } #main_body { width: 82%; float: left; min-height: 20em; } <div id="header">  <h1> My Heading </h1> </div> <div id="body">  <div id="nav">  <ul> <li><a href="index.html">home</a></li> <li><a href= me.html">about me</a></li> <li><a href= notes.html">my course notes</a></li> <li><a href= contact.html">contact</a></li> </ul> </div> <div id="main_body">  <p>lorem ipsum dolor sit amet, cum ea periculis complectitur, ex quo option alienum. Ex tale temporibus mei, graeco fuisset omittam an vel, sed ex brute decore. Ea putant fuisset patrioque eum, atqui integre vivendum cum ex. Ea putant fuissetr. Mea ne wisi commodo, his eu. No decore voluptua nam.</p> <p>bom ipsucomplectitur, ex quo option alienum. <i style="font-color;blue;"> Ex tale temporibus mei, graeco fuisset omittam an vel, sed ex brute decore. </i> Ea putant fuisset patr his eu. No decore voluptua nam.</p> </div> </div> <div id="footer">  <p>copyright goes here.</p> </div> 50

51 id vs. class in CSS Today s Summary Block vs. in-line elements Reviewed usage of some tags: e.g. <br/> Introduced new ones: <abbr> <div> <span> CMPT 165 D1 (Fall 2015) 51

52 Questions? 52

53 Take-Home Exercise (from last week) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN " strict.dtd"> <html> <head><title>title</title> <style type="text/css"> p { width: 200px; padding: 10px; padding-left: 20px; margin: 20px; border: 5px solid #000; float: left; height: 500px; } </style> </head> <body> <p>c</p> </body> <html> Given code on the left: 1) What s the box model for all <p> tags? Draw your answers out. 2) And what are its dimensions? CMPT 165 D1 (Fall 2015) 53

54 Take-Home Exercise (from last week) Tell me next class! <h2>definition List</h2> <dl> <dt><em>dashi Broth</em></dt> <dd>a basic broth in Japanese cooking. </dd> </dl> <dl> <dt><em>short Grained Steamed Rice</em></dt> <dd>the most common rice eaten in Japan. </dd> </dl> CMPT 165 D1 (Fall 2015) 54

CMPT 101 Advanced CSS Part 2. (Oct. 8 th, 2015) Oct. 20 th, 2017

CMPT 101 Advanced CSS Part 2. (Oct. 8 th, 2015) Oct. 20 th, 2017 CMPT 101 Advanced CSS Part 2 (Oct. 8 th, 2015) Oct. 20 th, 2017 1. Raise your hand 2. Yell out your seat number. 3. Answer question: Attendance If you did not do your HW6, tell us an example of inline