Markup Language. Made up of elements Elements create a document tree

Size: px

Start display at page:

Download "Markup Language. Made up of elements Elements create a document tree"

Georgiana Parrish
5 years ago
Views:

1 <HTML> Patrick Behr

2 Markup Language HTML is a markup language HTML markup instructs browsers how to display the content Provides structure and meaning to the content Does not (should not) describe how it should be displayed Made up of elements Elements create a document tree

3 Elements Begins with a start tag, ends with an end tag Element is everything from the start tag to the end tag Can contain Text Attributes Other elements <tag>content</tag>

4 Elements Begin with a start tag, ends with an end tag Element is everything from the start tag to the end tag Can contain Text Attributes Other elements <tag>content</tag> Start Tag

5 Elements Begin with a start tag, ends with an end tag Element is everything from the start tag to the end tag Can contain Text Attributes Other elements <tag>content</tag> End Tag

6 Elements Begin with a start tag, ends with an end tag Element is everything from the start tag to the end tag Can contain Text Attributes Other elements <tag>content</tag> Element

7 Attributes Configures or modifies an element Name-Value pair Defined in the start tag <tag attribute= value >content</tag> Attribute

8 Empty Elements Begin with a start tag. There is no end tag. Element is the start tag Can contain Attributes <meta charset= utf-8 > Element

9 Empty Elements Begin with a start tag. There is no end tag. Element is the start tag Can contain Attributes <meta charset= utf-8 > <br> <col> <hr> <img> <input> <link> <meta> Element

10 Empty Elements Begin with a start tag. There is no end tag. Element is the start tag Can contain Attributes <meta charset= utf-8 /> End tag

11 Document Tree The tree of elements encoded in the source document. Each element in this tree has exactly one parent, with the exception of the root element, which has none. Root

12 Document Tree The tree of elements encoded in the source document. Each element in this tree has exactly one parent, with the exception of the root element, which has none. Root

13 Document Tree The tree of elements encoded in the source document. Each element in this tree has exactly one parent, with the exception of the root element, which has none. Root

14 Document Tree The tree of elements encoded in the source document. Each element in this tree has exactly one parent, with the exception of the root element, which has none. Root

15 HTML <!doctype html> <html> <head> <title>my Webpage</title> </head> <body> <p>this is a paragraph</p> <p>another paragraph</p> </body> </html>

16 HTML Markup <!doctype html> <html> <head> <title>my Webpage</title> </head> <body> <p>this is a paragraph</p> <p>another paragraph</p> </body> </html>

17 HTML Content <!doctype html> <html> <head> <title>my Webpage</title> </head> <body> <p>this is a paragraph</p> <p>another paragraph</p> </body> </html>

18 HTML Content

19 HTML Markup <!doctype html> <html> <head> <title>my Webpage</title> </head> <body> <p>this is a paragraph</p> <p>another paragraph</p> </body> </html> Document type declaration

20 HTML Markup <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>my Webpage</title> </head> <body> <p>this is a paragraph</p> <p>another paragraph</p> </body> </html>

21 HTML Markup <!doctype html> <html> Root Element <head> <title>my Webpage</title> </head> <body> <p>this is a paragraph</p> <p>another paragraph</p> </body> </html>

22 HTML Markup <!doctype html> <html> <head> <title>my Webpage</title> </head> <body> <p>this is a paragraph</p> <p>another paragraph</p> </body> </html> End Tag

23 HTML Markup <!doctype html> <html> <head> <title>my Webpage</title> </head> <body> <p>this is a paragraph</p> <p>another paragraph</p> </body> </html> Element

24 HTML Markup <!doctype html> <html> <head> Child <title>my Webpage</title> </head> <body> <p>this is a paragraph</p> <p>another paragraph</p> </body> </html>

25 HTML Markup <!doctype html> <html> <head> Parent <title>my Webpage</title> </head> <body> <p>this is a paragraph</p> <p>another paragraph</p> </body> </html>

26 HTML Markup <!doctype html> <html> <head> <title>my Webpage</title> </head> <body> Child <p>this is a paragraph</p> <p>another paragraph</p> </body> </html>

27 HTML Markup <!doctype html> <html> <head> <title>my Webpage</title> </head> <body> <p>this is a paragraph</p> <p>another paragraph</p> </body> </html> Parent

28 HTML Markup <!doctype html> <html> <head> <title>my Webpage</title> </head> <body> <p>this is a paragraph</p> <p>another paragraph</p> </body> </html> Siblings

29 HTLM <head> <!doctype html> <html> <head> <title>my Webpage</title> </head> <body> <p>this is a paragraph</p> <p>another paragraph</p> </body> </html> Metadata

30 HTML <body> <!doctype html> <html> <head> <title>my Webpage</title> </head> <body> <p>this is a paragraph</p> <p>another paragraph</p> </body> </html> Content

31 Metadata Data that provides data about other data Use the <meta> tag Describes: Language Character encoding Author Description Viewport Behavior that robots ( crawlers ) should use Other

32 Language <!doctype html> <html lang= en > <head> <title>my Webpage</title> </head> <body> <p>this is a paragraph</p> <p>another paragraph</p> </body> </html> Language

33 Character Encoding <!doctype html> <html lang= en > <head> <meta charset= utf-8 > <title>my Webpage</title> </head> <body> <p>this is a paragraph</p> <p>another paragraph</p> </body> </html> Encoding

34 Character Encoding <!doctype html> <html lang= en > <head> <meta charset= utf-8 > <title>my Webpage</title> </head> <body> <p>this is a paragraph</p> <p>another paragraph</p> </body> </html> Encoding UTF-8 is recommended. Do not use CESU-8, UTF-7, BOCU-1 and SCSU because XSS vulnerable.

35 Character Encoding

36 Character Encoding Encoding

37 Character Encoding

38 Description <!doctype html> <html lang= en > <head> <meta charset= utf-8 > Description <meta name= description content= Describe your website here > <title>my Webpage</title> </head> <body> <p>this is a paragraph</p> <p>another paragraph</p> </body> </html>

39 Title <!doctype html> <html lang= en > <head> <meta charset= utf-8 > <meta name= description content= Describe your website here > <title>my Webpage</title> </head> <body> <p>this is a paragraph</p> <p>another paragraph</p> </body> </html> Title

40 Title & Description

41 Viewport <meta name="viewport" content="width=device-width, initial-scale=1.0"> Used to control the width and scale of the page for mobile devices.

42 <meta http-equiv="x-ua-compatible" content="ie=edge"> Allows developers to determine which version of IE should be used to render the page. Should mostly be irrelevant (IE < 11), but you ll probably see it.

43 <style> <style> body { font-family: arial, helvetica; } </style> Provides CSS used to style the document.

44 <link> <link rel="stylesheet" href="url to the file"> Used to reference an external resource, most commonly used to embed external stylesheets.

45 <link> <link rel="stylesheet" href="url to the file"> Used to reference an external resource, most commonly used to embed external stylesheets.

46 <link> <link rel="stylesheet" href="url to the file"> Used to reference an external resource, most commonly used to embed external stylesheets.

47 <script> <script> console.log( Your JavaScript goes here ); </script> Used to embed JavaScript. Can be inline

48 <script> <script src= URL to the file ></script> Used to embed JavaScript. Can be inline or reference an external file. You still need the </script> tag!

49 URL Uniform Resource Locator a.k.a. web address Can be absolute: Can be relative:../scripts/javascript.js

50 Relative URL

51 Relative URL You are here /webroot/pages/webpage.html

52 Relative URL <script src="../../scripts/hellacool.js">

53 Relative URL Parent directory <script src="../../scripts/hellacool.js">

54 Relative URL Parent directory <script src="../../scripts/hellacool.js">

55 Relative URL scripts directory <script src="../../scripts/hellacool.js">

56 Relative URL hellacool.js <script src="../../scripts/hellacool.js">

57 Relative URL <img src= /images/pretty_picture.bmp">

58 Relative URL Root directory <img src= /images/pretty_picture.bmp">

59 Relative URL images directory <img src= /images/pretty_picture.bmp">

60 Relative URL pretty_picture.bmp <img src= /images/pretty_picture.bmp">

61 Relative URL <link rel="stylesheet" href="styles/trendy.css">

62 Relative URL styles directory <link rel="stylesheet" href="styles/trendy.css">

63 Relative URL trendy.css file <link rel="stylesheet" href="styles/trendy.css">

64 <head>

66 Adding Content

67 Adding Content

68 Headings

69 Headings

70 Paragraphs

71 Paragraphs

72 Lists

73 Lists

74 Lists

75 Lists

76 Block vs Inline Elements

77 Block vs Inline Elements

78 Block vs Inline Elements

79 Inline Elements

80 Inline Elements

81 Anchors (links)

82 Anchors (links) URL to link to

83 Anchors (links) Text to display

84 Anchors (links)

85 Anchors (links)

86 Anchors (links) Opens in a new tab

87 Anchors (links) Prevents hacking window.opener

88 Anchors (links)

89 Anchors (links) Use an image

90 Anchors (links)

91 Anchors (links) Download a file

92 Anchors (links)

93 Anchors (links)

94 Anchors (links)

95 Menu Items

96 Menu Items

97 Forms

98 Forms Where data goes

99 Forms HTTP method to use

100 Forms Name of the parm

101 Forms

102 Forms

103 Forms action= form.html"

104 Forms method= get

105 Forms parm = value

106 Widgets

107 Widgets

108 Widgets

109 Widgets

110 Widgets

111 Widgets

112 Widgets

113 Widgets

114 Widgets

115 Widgets

116 Widgets

117 Widgets

118 Widgets

119 Widgets

120 Widgets

121 Widgets

122 Widgets

123 Widgets

124 Widgets

125 Widgets

126 Widgets

127 Widgets

128 Widgets

129 Widgets

130 Widgets

131 Widgets

132 Widgets

133 Widgets

134 Widgets <input type= text type= range type= number type= reset type= checkbox type= submit type= radio type= url type= date type= week type= time type= month type= type= hidden type= color type= file type= password type= button >

135 Forms Submit button

136 Forms Button text

137 Forms

138 Tables

139 Tables

140 Tables

141 Tables

142 Tables

143 Tables

144 Tables

145 Tables

146 Tables

147 Tables - Semantics

148 Tables - Semantics

149 Tables - Semantics

150 Typical Website Layout

151 Table Layout

152 <div> Layout

153 HTML5 Semantics <header> <nav> <section> <article> <aside> <footer>

154 <div> Layout

155 HTML5 Elements <datalist> <output> <input type= color > <canvas> <svg> <audio> <video>

156 Social Media Facebook Open Graph <meta property= og:url content= > <meta property= og:type content= article > <meta property= og:title content= The best site ever! > <meta property= og:description content= Description goes here > <meta property= og:image content= >

157 Social Media Twitter cards <meta name= twitter:card content= summary > <meta name= twitter:site > <meta name= twitter:title content= Island Photos > <meta name= twitter:description content= View the album on Flickr. > <meta name= twitter:image content= >

158 Summary HTML is a markup language Made up of elements Elements may have attributes Elements can be nested Form a document tree Browser parses the document and creates the DOM

159 Summary Metadata is data about data Language Character encoding Title Description External files URL (relative and absolute)

160 Summary Content Headings Paragraphs Lists (ordered & unordered) Block vs Inline Anchors (links) Forms & Widgets Tables Layout Social Media

161 Questions?

162 Thank you! Please, please, please Fill out your survey!! LinkedIn: Patrick-Behr Website:patrickbehr.com

MODULE 2 HTML 5 FUNDAMENTALS. HyperText. > Douglas Engelbart ( )

MODULE 2 HTML 5 FUNDAMENTALS. HyperText. > Douglas Engelbart ( ) MODULE 2 HTML 5 FUNDAMENTALS HyperText > Douglas Engelbart (1925-2013) Tim Berners-Lee's proposal In March 1989, Tim Berners- Lee submitted a proposal for an information management system to his boss,