CMPT 470: Web-based Information Systems

Size: px

Start display at page:

Download "CMPT 470: Web-based Information Systems"

Jodie Harper
5 years ago
Views:

1 CMPT 470: Web-based Information Systems Spring 2018 Week 2: HTML & CSS

2 Reminder: 2

3 HTML 3

4 Book: Dive into HTML5 each chapter includes a frank discussion of your options if you need to support older browsers. HTML5 features like geolocation (Chapter 6) and video (Chapter 5) were first provided by browser plugins like Gears or Flash. Other features, like canvas (Chapter 4), can be emulated entirely in JavaScript. This book will teach you how to target the native features of modern browsers, without leaving older browsers behind 4

5 HTML5 Based on HTML4 New features: Canvas Video Geolocation 5

6 Components to Good Webpage Design CONTENT Messages to convey to your audience Proper grammar Elements: text, images, videos, audios, supplements (e.g. pdf) INTERACTION Provide appropriate response/reactions to audience Via web programming STRUCTURE Give meaning to each element Hyperlinks (to link pages) Meta data (about the data) Via markup, e.g. HTML STYLE Enhance message Describe visual properties of each element Via style sheets (CSS)

7 HTML: quick review 7

8 8

9 9

10 What is structure? Structure is a fundamental, tangible or intangible notion referring to the recognition, observation, nature, and permanence of patterns and relationships of entities 10

11 A simple HTML5 file DTD <!DOCTYPE html> <html lang="en"> (Document Type Declaration) <head> <title>about Me</title> </head> <body> <h1>about me</h1> <p>welcome</p> <h2>hobbies</h2> <p>blah, blah</p> </body> </html>

12 A simple HTML5 file DTD Opening tag Content <!DOCTYPE html> <html lang="en"> <head> <title>about Me</title> </head> <body> An element <h1>about me</h1> <p>welcome</p> <h2>hobbies</h2> <p>blah, blah</p> Closing tag </body> </html>

13 A simple HTML5 file DTD Opening tag Content <!DOCTYPE html> <html lang="en"> <head> <title>about Me</title> </head> <body> <h1>about me</h1> Closing tag <p>welcome</p> <h2>hobbies</h2> <p>blah, blah</p> </body> </html>

14 A simple HTML5 file DTD Opening tag Content <!DOCTYPE html> <html lang="en"> <head> <title>about Me</title> </head> <body> <h1>about me</h1> Closing tag <p>welcome</p> <h2>hobbies</h2> <p>blah, blah</p> </body> </html>

15 A simple HTML5 file DTD Opening tag Content <!DOCTYPE html> <html lang="en"> <head> <title>about Me</title> </head> <body> <h1>about me</h1> Closing tag <p>welcome</p> <h2>hobbies</h2> <p>blah, blah</p> </body> </html>

16 A simple HTML5 file h1: 1 st -level heading h2: 2 nd -level heading <!DOCTYPE html> <html lang="en"> <head> <title>about Me</title> </head> <body> <h1>about me</h1> <p>welcome</p> <h2>hobbies</h2> <p>blah, blah</p> </body> </html>

17 A simple HTML5 file Proper nesting <!DOCTYPE html> <html lang="en"> <head> <title>about Me</title> </head> <body> <h1>about me</h1> <p>welcome</p> <h2>hobbies</h2> <p>blah, blah</p> </body> </html>

18 A simple HTML5 file Improper nesting <!DOCTYPE html> <html lang="en"> <head> <title>about Me</title> </head> <body> <h1>about me</h1> <p>welcome</p> <h2>hobbies</h2> <p>blah, blah</p> </html> </body>

19 A simple HTML5 file Only contents inside <body> are rendered in browser window. <!DOCTYPE html> <html lang="en"> <head> <title>about Me</title> </head> <body> <h1>about me</h1> <p>welcome</p> <h2>hobbies</h2> <p>blah, blah</p> </body> </html>

20 A simple HTML5 file Contents of <head> are not! <!DOCTYPE html> <html lang="en"> <head> <title>about Me</title> </head> <body> <h1>about me</h1> <p>welcome</p> <h2>hobbies</h2> <p>blah, blah</p> </body> </html>

21 A simple HTML5 file Not displayed in window but important! <!DOCTYPE html> <html lang="en"> <head> <title>about Me</title> </head> <body> <h1>about me</h1> <p>welcome</p> <h2>hobbies</h2> <p>blah, blah</p> </body> </html>

22 22

23 23

24 Essence of Exercise 1 Part 1: Compose content. Part 2: Perform semantic markup. <!DOCTYPE html> <html lang="en"> <head> <title>about Me</title> </head> <body> <h1>about me</h1> <p>welcome</p> <h2>hobbies</h2> <p>blah, blah</p> </body> </html>

25 Essence of Exercise 1 Part 1: Compose content. Part 2: Perform semantic markup. <!DOCTYPE html> <html lang="en"> <head> <title>about Me</title> </head> <body> <h1>about me</h1> <p>welcome</p> <h2>hobbies</h2> <p>blah, blah</p> </body> </html>

26 More about elements Most are enclosed; e.g.: <h1>this is a heading</h1> Opening tag + content + closing tag Some elements do not have content: e.g. horizontal line (=rule), line breaks These are called empty tags : <hr/> <br/> e.g. <p>this is a paragraph.</p><br/> <p>this is another paragraph.</p> 26

27 Important notes XHTML: tags must be in lower cases, e.g. <BODY> 27

28 Important notes What s wrong? <p><i>validator will <em>not</i></em> approve this.</p> Ordering of tags matters! 28

29 Another note <h2>this is a subheading</h2> <h2>this is a subheading</h2> <h2>this is a subheading</h2> White spaces are ignored all rendered same way 29

30 Annotate each piece of content to give semantic meaning to form better content structure <h1> The coolest dissertation <p> <h2> I. Introduction </h2> <h2> II. Body </h2> <h3> II.A - Topic 1 </h3> <h4> II.A.i - Subtopic A <h4> II.A.ii - Subtopic B <h3> II.B - Topic 2 </h3> <h4> II.B.i - Subtopic A <h4> II.B.ii - Subtopic B <h2> III. Conclusions </h2> By ABC </h1> </p> h1: top heading h2: 2 nd level heading h4 is a subheading of h3 </h4> </h4> </h4> </h4> 30

31 TECH EVAL FOR CMPT 470 Which (sub)heading tags do we need? How many p tags? Which other tags would you use? 31

32 <blockquote> <h2> <p> <h1> TECH EVAL FOR CMPT 470 </h2> </h1> </blockquote> </p> <p><i> </i></p> <h2> <p> </h2> </p> <h3> <p> </h3> </p> <h3> <p> </h3> </p> <h4> <p> </h4> </p> 32

33 Perform markup properly Think purely on semantics; forget styling; e.g.: <p>i want to do a <strong>cool</strong> project!</p> <body> <p><strong>about me</strong></p> <p>welcome!</p> <p><strong>hobbies</strong></p> <p>blah, blah</p> </body> 33

34 Perform markup properly Think purely on semantics; forget styling; e.g.: <p>i want to do a <strong>cool</strong> project!</p> <body> <p><strong>about me</strong></p> <p>welcome!</p> <p><strong>hobbies</strong></p> <p>blah, blah</p> </body> <body> <h1>about me</h1> <p>welcome!</p> <h2>hobbies</h2> <p>blah, blah</p> </body> 34

35 Reasons for proper markup Make your content more accessible to general public; e.g. users with impaired vision cannot perceive the meaning of bolding : Impaired viewers rely on screen readers that read out content to them. Styling tags do not have (universal) semantic meaning. <p>lorem ipsum dolor sit amet, net has luptatum eu. <b>quodsi vocibus eligendi euismod</b> accusam aliquando cotdeque duo. </p> 35

36 Reasons for proper markup Make your content more accessible to general public; e.g. users with impair vision <p>lorem ipsum dolor sit amet, net has luptatum eu. <strong>quodsi vocibus eligendi euismod</strong> accusam aliquando cotdeque duo. </p> 36

37 HTML: terminology & concepts What do you remember? 37

38 HTML: terminology & concepts tag element content attributes values accessible document structure semantic styling 38

39 HTML: terminology & concepts tag (opening, closing, empty) element content attributes values accessible document structure semantic styling 39

40 Tags vs. Attributes Syntax: - Equal sign - Double quotes What are attributes? Properties about something E.g. Red car textbook of Erin Brown <!DOCTYPE html> <html lang="en"> <head> <title>about Me</title </head> <body> <h1>about me</h1> <p>welcome</p> <h2>hobbies</h2> <p>blah, blah</p> </body> </html> 40

41 Attribute specification What are attributes of an image? Image dimension Width Height Example: <img src="sfu_logo.png" alt="library logo" width="500" height="400"/> source of image an alternative caption dimensions dimensions 41

42 <img> tag An empty tag (no closing tag) Required attributes: src: where the image file is stored; abbreviation of source alt: alternative text to be displayed if file cannot be read <img src=" alt="company logo"/> Optional attributes: height: displayed height width: displayed width (% or pixels) <img src=" alt="company logo" width="500" height="400"/> 42

43 <a> tag <a>: anchor tag creates a hyperlink to a resource Example: <p>this is link to <a href=" Required attributes: href: hyper reference Optional attributes target: where the target page will be displayed type: what type of resource href points to 43

44 Quick Recap 1. Document type declaration (DTD) 2. Head ( meta ) info Not displayed in window In HTML5, simplifies to: <!DOCTYPE html> An element <meta name="author" content="lisa"> <meta name="keywords" content="html reviewed"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 3. Body: displayed content An element 44

45 Quick Recap How about as sauce? (cannot quite see) 45

46 Questions? 46

47 Pair-up activity (20 minutes) p a del ins df q cite blockquote abbr code strong em author title meta name content width src href Task: hand-write a complete and valid HTML5 file that would use all of these. Link: any that you like to introduce to class. 47

48 Pair-up activity (20 minutes) p a del ins dfn q cite blockquote abbr code strong em author title meta name content width src href Task: hand-write a complete and valid HTML5 file that would use all of these. Link: any that you like to introduce to class. 48

49 Pair-up activity (20 minutes) p a del ins dfn q cite blockquote abbr code strong em author title meta name content width src href Q) Which are attributes? 49

50 Pair-up activity (20 minutes) p a del ins dfn q cite blockquote abbr code strong em author title meta name content width src href Q) Which are attributes? 50

51 Pair-up activity (20 minutes) p a del ins dfn q cite blockquote abbr code strong em author title meta name content width src href Overloaded: Both tag and attribute 51

52 Examples <h1><abbr title="computing science">cmpt</abbr> 470: web-based info systems</h1> <p>markup is about <del>styling</del> <ins> giving semantic meaning</ins> of elements.</p> <p>have you tried <cite>dive Into HTML5</cite> yet?</p> <p>what do you think of <cite> <a href=" Dive Into HTML5 </a> </cite>?</p> 52

53 Examples <p> <q>believing is seeing, but seeing is not believing.</q> - Unknown </p> <blockquote> <p>believing is seeing<p> <footer> - <cite> <a href=" Morris</a> </cite> </footer> </blockquote> 53

54 A more complete markup file <!DOCTYPE html> <html lang="en"> <head> <title>about Me</title> <meta name="author" content="me" /> </head> <body> <h1>summary notes for <abbr title="computing science">cmpt</abbr> 470: web-based info systems</h1> <p>markup is about <del>styling</del> <ins> giving semantic meaning</ins> of elements.</p> </body> </html> 54

55 55

56 HTML: Markup for Lists & Sublists 56

57 Lists Display related items in an organized manner (part of visual presentation too) Different uses of lists? Use the same way as in any document/report Summarizes keypoints (e.g. bullets in presentation) Create outlines for large webpages Describe steps in a procedure A set of definitions 57

58 An example structure of a list - Category 1 - Subcategory 1 - Item 1 - Item 2 - Subcategory 2 - Item 1 - Item 2 - Category 2 - Subcategory 1 - Item 1 - Item 2 - Item 3 - Subcategory 2 - Item 1 - Item 2 Ultimately, helps you organize items systematically, e.g. subcategories within categories sub-lists within lists 58

59 Types of lists 1. Category 1 a. Subcategory 1 i. Item 1 ii. Item 2 b. Subcategory 2 i. Item 1 ii. Item 2 2. Category 2 a. Subcategory 1 ii. Item 1 ii. Item 2 iii. Item 3 b. Subcategory 2 i. Item 1 ii. Item 2 <ol> ordered list 59

60 Types of lists - Category 1 - Subcategory 1 - Item 1 - Item 2 - Subcategory 2 - Item 1 - Item 2 - Category 2 - Subcategory 1 - Item 1 - Item 2 - Item 3 - Subcategory 2 - Item 1 - Item 2 <ol> ordered list <ul> unordered list 60

61 Types of lists ABC This term means abc. <ol> ordered list BCD This term means bcd. DEF This term means def. EFG This term means efg. <ul> unordered list <dl> definition list FGH This term means fgh. 61

62 Creating lists Web browsers - Safari - FireFox - Chrome - IE - Opera Top 5 browsers (?) 1. FireFox 2. Chrome 3. IE 4. Safari 5. Opera Demo <h1>web browsers</h1> <ul> <li>safari</li> <li>firefox</li> <li>chrome</li> <li>ie</li> <li>opera</li> </ul> <h1>top-voted browsers (?)</h1> <ol> <li>firefox</li> <li>chrome</li> <li>ie</li> <li>safari</li> <li>opera</li> </ol> Q: what does tag <li> stand for? Ans: list item 62

63 Creating Sub-lists (lists within lists) Common fruits in BC - Apples - Granny smith - Golden delicious - Oranges - Naval oranges - Mandarin oranges - Bananas <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> 63

64 Types of lists 1. Category 1 a. Subcategory 1 i. Item 1 ii. Item 2 b. Subcategory 2 i. Item 1 ii. Item 2 2. Category 2 a. Subcategory 1 ii. Item 1 ii. Item 2 iii. Item 3 b. Subcategory 2 i. Item 1 ii. Item 2 <ul> unordered list <ol> ordered list <dl> definition list 64

65 Types of lists 1. Category 1 a. Subcategory 1 - Item 1 - Item 2 b. Subcategory 2 - Item 1 - Item 2 2. Category 2 a. Subcategory 1 - Item 1 - Item 2 - Item 3 b. Subcategory 2 - Item 1 - Item 2 <ul> unordered list <ol> ordered list <dl> definition list (or mixture of these) 65

66 (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 66

67 Key concepts reviewed so far Components of good website designs and why? Structure of a markup file: DTD vs. head vs. body Elements vs. tags vs. content vs. attributes vs. values: understand the differences Tags examined so far: List <ol><ul><li><dl><dt><dd> Image <img> Anchor <a> Usage info: Key HTML terminologies: Tags vs. attributes Terms to keep in mind: Style vs. semantic meaning of an element Usability + accessibility issues 67

68 Remaining agenda items i) HTML Topics: tables figure figcaption ii) Exercise 1: Q&A 68

69 Exercise: figures & captions Write markup for below: Image to show: coolpic.png If this file cannot be downloaded, display text as: A cool photo taken at HC. Caption: Photographed by ABC at HC. where HC is an anchor that points to ftp:// 69

70 Exercise: figures & captions Possible solution: <figure> <img width="200" alt="..." src="coolpic.png" /> <figcaption>photo graphed by ABC at <a href="fpt:// </figcaption> </figure> 70

71 Validator for Markup CMPT 165 D1 (Summer 2005) 71

72 CSS: intro 72

73 Components to Good Webpage Design CONTENT Messages to convey to your audience Proper grammar Elements: text, images, videos, audios, supplements (e.g. pdf) INTERACTION Provide appropriate response/reactions to audience Via web programming STRUCTURE Give meaning to each element Hyperlinks (to link pages) Meta data (about the data) Via markup, e.g. HTML STYLE Enhance message Describe visual properties of each element Via style sheets (CSS)

74 Styling Use CSS: a separate language to specify stylerules stylesheet Alternatives? XSLT, SASS What are styles really? e.g. Text: Colour Height Font-family Horizontal line: Colour Thickness 74

Embedding stylerules in HTML <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.

75 Embedding stylerules in HTML <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title>title</title> </head> Older version <body> <h1>heading</h1> <p align="center">this is Paragraph1.</p> <p align="center">this is Paragraph2.</p> </body> </html> Deprecated! (know but avoid) 75

76 Better way: <style> tag <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//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> <html xmlns=" <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> 76

77 77

78 CSS syntax Declarations are separated by semicolons! Selector may refer to any number of elements Abstraction: selector1 { Declaration property_1: value_1; property_2: value_2; property_n: value_n; } Curly brace selector2 { property_1: value_1; property_m: value_m; } Examples: ul { list-style-type: circle; } ol { list-style-type: upperroman; } h1 { color: red; } h2, h1 { text-align: center; }

79 <!DOCTYPE html> <html lang="en"> <head> <title>title</title> <style type="text/css" media="all" > p { Required Optional text-align: center; } h1 { font-family: sans-serif; color: red; } </style> </head> <body> <h1>heading</h1> <p>this is a paragraph.</p> <p>this is another paragraph.</p> </body> </html> CMPT 165 D1 (Summer 2005) 79

80 Approaches to styling: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//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> (worse) approach: inline <!DOCTYPE html> <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> (better) approach: internal Embed CSS with <style> tag 80

81 What if we have multiple pages? consistent stylerules require repetitive copying-pasting redundant data home.html <!DOCTYPE html> <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> products.html <!DOCTYPE html> <html> <head> <title> Products </title> <style type="text/css"> p { text-align: center; } </style> </head> <body> <h1> On products </h1> <p>blah, blah, blah</p> </body> </html> 81

82 Best way: external CSS 1. Extract and save the CSS code into a separate file home.html <!DOCTYPE html> <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> products.html <!DOCTYPE html> <html> <head> <title> Products </title> <style type="text/css"> p { text-align: center; } </style> </head> <body> <h1> On products </h1> <p>blah, blah, blah</p> </body> </html> 82

83 Best way: external CSS 1. Extract + save the CSS blocks into a separate file mystyles.css p { text-align: center; } home.html <!DOCTYPE html> <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> products.html <!DOCTYPE html> <html> <head> <title> Products </title> <style type="text/css"> p { text-align: center; } </style> </head> <body> <h1> On products </h1> <p>blah, blah, blah</p> </body> </html> 83

84 Best way: external CSS 2. Use the link tag mystyles.css p { text-align: center; } home.html <!DOCTYPE html> <html> <head> <title>title</title> <style type="text/css"> p { text-align: center; <link href="mystyles.css" type="text/css" } rel="stylesheet" /> </style> </head> <body> <h1>heading</h1> <p>this is a paragraph.</p> <p>this is another paragraph.</p> </body> </html> products.html <!DOCTYPE html> <html> <head> <title> Products </title> <style type="text/css"> p { type="text/css" text-align: center; } <link href="mystyles.css" rel="stylesheet" </style> /> </head> <body> </body> </html> <h1> On products </h1> <p>blah, blah, blah</p> 84

85 Best way: external CSS You may link multiple stylesheets too: mystyles.css p { text-align: center; } home.html <!DOCTYPE html> <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> <link href="mystyles.css" type="text/css" rel="stylesheet" /> <link href="senior.css" type="text/css" rel="stylesheet" /> 85

86 CSS supports Colour of element text, backgrounds, etc. Font properties: typeface and emphasis Alignment of elements (text, images, etc.) Text formatting: e.g. spacing of words, letters, lines Boxing: margin, border, padding, and positioning Unique and generic identification: giving elements classes and unique IDs To be continued. 86

87 CSS: how would you summarize?

88 CSS: how would you summarize? 3 approaches to style Syntax: Abstraction: selector1 { Declaration property_1: value_1; property_2: value_2; property_n: value_n; } Curly brace selector2 { property_1: value_1; property_m: value_m; } Examples: ul { list-style-type: circle; } ol { list-style-type: upperroman; } h1 { color: red; } h2, h1 { text-align: center; }

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

CMPT 165 Unit 3 CSS Part 1. Sept. 24 th, 2015 CMPT 165 Unit 3 CSS Part 1 Sept. 24 th, 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