HTML. UC Berkeley Graduate School of Journalism

Transcription

1 HTML UC Berkeley Graduate School of Journalism

2 Webpages are made of three

3 Webpages are made of three HTML

4 Webpages are made of three HTML CSS

5 Webpages are made of three HTML CSS JavaScript

6 Webpages are made of three HTML CSS JavaScript CONTENT

7 Webpages are made of three HTML CSS JavaScript DESIGN

8 Webpages are made of three HTML CSS JavaScript FUNCTION

9 HyperText Markup Language

10 HyperText Markup Language

11 What is HTML?

12 What is HTML? At its core, HTML is about identifying information in a webpage, specifying what is an article, headline, paragraph, etc.

13 What is HTML? At its core, HTML is about identifying information in a webpage, specifying what is an article, headline, paragraph, etc. HTML is not (should not) be about presentation or design; that comes later with CSS.

14 What is HTML? At its core, HTML is about identifying information in a webpage, specifying what is an article, headline, paragraph, etc. HTML is not (should not) be about presentation or design; that comes later with CSS. HTML is defined by a standard's committee called W3C. But it is up to each browser/ vender to adhere to those standards.

15 How do we create HTML?

16 How do we create HTML? HTML is written in plain text.

17 How do we create HTML? HTML is written in plain text. You need a plain text editor to write HTML, you cannot use MS Word or other word processors.

18 How do we create HTML? HTML is written in plain text. You need a plain text editor to write HTML, you cannot use MS Word or other word processors. We can save the text file with the.html extension, and open it up in a web browser. When we test a webpage, we are viewing it locally.

19 How do we create HTML? HTML is written in plain text. You need a plain text editor to write HTML, you cannot use MS Word or other word processors. We can save the text file with the.html extension, and open it up in a web browser. When we test a webpage, we are viewing it locally. When we're done, we can save it to a web server, where it will be viewable to anyone with the web address (URL).

20

21 Shaky Times, Strong Journalism By Margaret Sullivan November 3, :09 am Although the finances at The Times aren t strictly within my brief as public editor, I take a keen interest in them. After all, the health of the company is bound to affect the journalism. (One clear indication of that: For cost- cutting reasons, 100 newsroom buyouts or layoffs are in progress this month and next.) So the coverage and commentary that followed last week s third- quarter financial statements are worth pulling together here. Here are some highlights, plus interpretation.

22 Shaky Times, Strong Journalism By Margaret Sullivan November 3, :09 am Although the finances at The Times aren t strictly within my brief as public editor, I take a keen interest in them. After all, the health of the company is bound to affect the journalism. (One clear indication of that: For cost- cutting reasons, 100 newsroom buyouts or layoffs are in progress this month and next.) So the coverage and commentary that followed last week s third- quarter financial statements are worth pulling together here. Here are some highlights, plus interpretation. Headline

23 Shaky Times, Strong Journalism By Margaret Sullivan November 3, :09 am Although the finances at The Times aren t strictly within my brief as public editor, I take a keen interest in them. After all, the health of the company is bound to affect the journalism. (One clear indication of that: For cost- cutting reasons, 100 newsroom buyouts or layoffs are in progress this month and next.) So the coverage and commentary that followed last week s third- quarter financial statements are worth pulling together here. Here are some highlights, plus interpretation. Headline Byline

24 Shaky Times, Strong Journalism By Margaret Sullivan November 3, :09 am Although the finances at The Times aren t strictly within my brief as public editor, I take a keen interest in them. After all, the health of the company is bound to affect the journalism. (One clear indication of that: For cost- cutting reasons, 100 newsroom buyouts or layoffs are in progress this month and next.) So the coverage and commentary that followed last week s third- quarter financial statements are worth pulling together here. Here are some highlights, plus interpretation. Headline Byline Date

25 Shaky Times, Strong Journalism By Margaret Sullivan November 3, :09 am Although the finances at The Times aren t strictly within my brief as public editor, I take a keen interest in them. After all, the health of the company is bound to affect the journalism. (One clear indication of that: For cost- cutting reasons, 100 newsroom buyouts or layoffs are in progress this month and next.) So the coverage and commentary that followed last week s third- quarter financial statements are worth pulling together here. Here are some highlights, plus interpretation. Headline Byline Date Paragraphs

26 Shaky Times, Strong Journalism By Margaret Sullivan November 3, :09 am Although the finances at The Times aren t strictly within my brief as public editor, I take a keen interest in them. After all, the health of the company is bound to affect the journalism. (One clear indication of that: For cost- cutting reasons, 100 newsroom buyouts or layoffs are in progress this month and next.) So the coverage and commentary that followed last week s third- quarter financial statements are worth pulling together here. Here are some highlights, plus interpretation. Headline Byline Date Paragraphs Paragraphs

27 HTML Tags <p> </p>

28 HTML Tags LEFT-ANGLE BRACKET <p> </p> RIGHT-ANGLE BRACKET

29 HTML Tags <p> </p>

30 HTML Tags <p> </p> Opening tag

31 HTML Tags FORWARD SLASH <p> </p> Closing tag

32 HTML Tags FORWARD SLASH <p> </p> Paragraph text goes between tags

33 HTML Tags <p> </p> TAG NAME

34 HTML Tags <p> </p>

35 HTML Tags <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

36 HTML Webpage Giants win World Series By Jeremy Rue Oct. 28, 2012 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <h2>giants win World Series</h2> <span>jeremy Rue</span> <time>oct. 28, 2013</time> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

37 HTML Webpage How it looks in browser Giants win World Series By Jeremy Rue Oct. 28, 2012 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <h2>giants win World Series</h2> <span>jeremy Rue</span> <time>oct. 28, 2013</time> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

38 HTML Webpage How it looks in HTML Giants win World Series By Jeremy Rue Oct. 28, 2012 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <h2>giants win World Series</h2> <span>jeremy Rue</span> <time>oct. 28, 2013</time> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

39 HTML Webpage Giants win World Series By Jeremy Rue Oct. 28, 2012 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <h2>giants win World Series</h2> <span>jeremy Rue</span> <time>oct. 28, 2013</time> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

40 Paragraph Tag <p> </p> Surrounds text paragraphs.

41 Heading Tags <h1> </h1> Used to mark varying levels of headings.

42 Heading Tags <h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> Used to mark varying levels of headings.

43 Heading Tags The Daily Whatever Martians invade earth First vessels sighted over Berkeley, Calif. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

44 Heading Tags The Daily Whatever Martians invade earth First vessels sighted over Berkeley, Calif. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <h1>the Daily Whatever</h1> <h2>martians invade earth</h2> <h3>first vessels sighted over Berkeley, Calif.</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

45 Emphasis Tags <strong> </strong> <em> </em> Used within text blocks to mark words/sentences as having emphasis

46 Emphasis tags in action Education is what survives when what has been learned has been forgotten. <p><strong>education</strong> is <em>what</em> survives when what has been learned has been forgotten.</p>

47 Image Tag <img />

48 Attributes <img/>

49 Attributes <img src="photo.jpg" />

50 Attributes attribute name <img src="photo.jpg" />

51 Attributes attribute name <img src="photo.jpg" /> equals symbol

52 Attributes attribute name value in quotes <img src="photo.jpg" /> equals symbol

53 Paragraph Tag with ID attribute <p></p>

54 Paragraph Tag with ID attribute <p id="container"></p>

55 Paragraph Tag with ID attribute attribute name <p id="container"></p>

56 Paragraph Tag with ID attribute attribute name <p id="container"></p> equals symbol

57 Paragraph Tag with ID attribute attribute name value in quotes <p id="container"></p> equals symbol

58 Paragraph Tag with CLASS <p></p>

59 Paragraph Tag with CLASS <p class="subhead"></p>

60 Paragraph Tag with CLASS attribute name <p class="subhead"></p>

61 Paragraph Tag with CLASS attribute name <p class="subhead"></p> equals symbol

62 Paragraph Tag with CLASS attribute name value in quotes <p class="subhead"></p> equals symbol

63 Anchor Tag, or link, with HREF <a></a>

64 Anchor Tag, or link, with HREF <a href="

65 Anchor Tag, or link, with HREF <a href=" Hyperlink Reference

66 Anchor Tag, or link, with HREF <a href=" Hyperlink Reference URL where user will go when they click this link

67 Anchor tag in action <p>to find answers to your questions, try using <a href="

68 Anchor tag in action <p>to find answers to your questions, try using <a href=" To find answers to your questions, try using Google.

69 Anchor tag in action <p>to find answers to your questions, try using <a href=" To find answers to your questions, try using Google.

70 <header> </header> Nesting

71 Nesting <header> <h1>the Daily Whatever</h1> <h2>a publication about nothing</h2> </header>

72 Nesting <header> <h1>the Daily Whatever</h1> <h2>a publication about nothing</h2> </header>

73 Nesting Unordered Lists <ul> <li>list item </li> <li>list item </li> <li>list item </li> <li>list item </li> </ul>

74 Nesting Unordered Lists <ul> <li>list item </li> <li>list item </li> <li>list item </li> <li>list item </li> </ul>

75 Nesting Unordered Lists <ul> <li>list item </li> <li>list item </li> <li>list item </li> <li>list item </li> List item List item List item List item </ul>

76 Review

77 WHAT IS THE FOLLOWING TAG USED FOR? <p>

78 WHAT IS THE FOLLOWING TAG USED FOR? <p> To denote a paragraph

79 WHERE DO I PUT THE TEXT TO DESIGNATE THIS AS A HEADER? <h1> </h1>

80 WHERE DO I PUT THE TEXT TO DESIGNATE THIS AS A HEADER? here <h1> here </h1> or here

81 WHERE DO I PUT THE TEXT TO DESIGNATE THIS AS A HEADER? here <h1> here </h1> or here Between the tags.

82 WHAT IS WRONG WITH THE FOLLOWING SET OF TAGS? <p>some text<p>

83 WHAT IS WRONG WITH THE FOLLOWING SET OF TAGS? <p>some text<p> It's missing the forward slash in the closing tag, like so: </p>

84 WHAT PART OF THIS TAG IS THE ATTRIBUTE? <a href="

85 WHAT PART OF THIS TAG IS THE ATTRIBUTE? <a href=" href="

86 WHAT PART OF THE TAG IS THE ATTRIBUTE? <img src="photo.jpg" alt="sunset">

87 WHAT PART OF THE TAG IS THE ATTRIBUTE? <img src="photo.jpg" alt="sunset"> Two attributes: src="photo.jpg" alt="sunset"

88 HOW DO I INDICATE IN A VISUAL WAY THAT A <P> TAG IS INSIDE AN <ARTICLE> TAG? <article> <p>hello World</p> </article>

89 HOW DO I INDICATE IN A VISUAL WAY THAT A <P> TAG IS INSIDE AN <ARTICLE> TAG? <article> <p>hello World</p> </article> Indent

90 WHAT ARE THE TWO MAIN PARTS WHERE THE HTML CODE IS ORGANIZED ON A WEBPAGE?

91 WHAT ARE THE TWO MAIN PARTS WHERE THE HTML CODE IS ORGANIZED ON A WEBPAGE? The <head> for meta information The <body> for content

92 Let's build a webpage

93 DOCTYPE <DOCTYPE html> It means we're this document is HTML5

94 The HTML tag <DOCTYPE html> <html> </html> Your whole webpage goes between these tags.

95 The HEAD and BODY tags <head> </head> <body> </body Your whole webpage goes between these tags.

96 The HEAD and BODY tags <head> </head> Information about the page (metadata) that the user doesn't see. <body> </body Your whole webpage goes between these tags.

97 The HEAD and BODY tags <head> </head> Information about the page (metadata) that the user doesn't see. <body> </body Actual webpage content. Your whole webpage goes between these tags.

98 Structure of a standard webpage

99 Structure of a standard webpage <DOCTYPE html>

100 Structure of a standard webpage <DOCTYPE html> <html> </html>

101 Structure of a standard webpage <DOCTYPE html> <html> <head> </head> </html>

102 Structure of a standard webpage <DOCTYPE html> <html> <head> </head> <body> </body> </html>

103 Structure of a standard webpage <DOCTYPE html> <html> <head> </head> <body> </body> </html>

104 Structure of a standard webpage <DOCTYPE html> <html> <head> </head> <body> </body> </html>

105 Structure of a standard webpage <DOCTYPE html> <html> <head> </head> <body> </body> </html> Metadata about the page

106 Structure of a standard webpage <DOCTYPE html> <html> <head> </head> <body> </body> </html> Metadata about the page Actual webpage content

107 Character Set <head> <meta charset="utf- 8"> </head> Goes inside the <head>, allows webpage to accept widest range of characters (Greek, Cyrillic, Latin, Chinese, Arabic )

108 TITLE Tag head> <meta charset="utf- 8"> <title>my Cool Webpage</title> /head> Title tag shows up when people bookmark the page

109

110 The BODY tag <body> </body> The content of your page (parts people see) go here

111 Parts of a webpage

112 Parts of a webpage <header> <h1>

113 <article> Parts of a webpage

114 Parts of a webpage Headline/ subhead <h2><h3>

115 Paragraphs <p><img> Parts of a webpage

116 Parts of a webpage

117 The BODY tag <body> <header> <h1>my Cool Page</h1> </header> </body> <header> is like the masthead of a newspaper

118 The BODY tag <header> <h1>my Cool Page</h1> </header> <article> </article> <article> or <section> will house the main content.

119 The BODY tag <article> <h2>article headline</h2> <img src="photo.jpg" alt="pic"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit</p> </article> The content of your page (parts people see) go here

120 Structure of a standard webpage <body> </body>

121 Structure of a standard webpage <body> <header> <h1>the daily whatever</h1> </header> </body>

122 Structure of a standard webpage <body> <header> <h1>the daily whatever</h1> </header> <article> </article> </body>

123 Structure of a standard webpage <body> <header> <h1>the daily whatever</h1> </header> <article> <h2>martians invade earth</h2> </article> </body>

124 Structure of a standard webpage <body> <header> <h1>the daily whatever</h1> </header> <article> <h2>martians invade earth</h2> <img src="photo.jpg" alt="picture" /> </article> </body>

125 Structure of a standard webpage <body> <header> <h1>the daily whatever</h1> </header> <article> <h2>martians invade earth</h2> <img src="photo.jpg" alt="picture" /> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inci ut labore et dolore magna aliqua.llit anim i laborum.</p> </article> </body>

126 Structure of a standard webpage <body> <header> <h1>the daily whatever</h1> </header> <article> <h2>martians invade earth</h2> <img src="photo.jpg" alt="picture" /> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inci ut labore et dolore magna aliqua.llit anim i laborum.</p> </article> </body>

127 Structure of a standard webpage <body> <header> <h1>the daily whatever</h1> </header> <article> <h2>martians invade earth</h2> <img src="photo.jpg" alt="picture" /> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inci ut labore et dolore magna aliqua.llit anim i laborum.</p> </article> </body>

128 Structure of a standard webpage <body> <header> <h1>the daily whatever</h1> </header> <article> <h2>martians invade earth</h2> <img src="photo.jpg" alt="picture" /> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inci ut labore et dolore magna aliqua.llit anim i laborum.</p> </article> </body>

129