powerpoint presentation filemarkup language •html is a markup language •html markup instructs...
TRANSCRIPT
![Page 1: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/1.jpg)
<HTML>Patrick Behr
![Page 2: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/2.jpg)
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”
![Page 3: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/3.jpg)
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>
![Page 4: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/4.jpg)
Elements
Start Tag
<tag>content</tag>
• 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
![Page 5: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/5.jpg)
Elements
End Tag
<tag>content</tag>
• 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
![Page 6: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/6.jpg)
Elements
Element
<tag>content</tag>
• 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
![Page 7: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/7.jpg)
• Configures or modifies an element
• Name-Value pair
• Defined in the start tag
Attributes
<tag >content</tag>
Attribute
attribute=“value”
![Page 8: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/8.jpg)
• Begin with a start tag. There is no end tag.
• Element is the start tag
• Can contain• Attributes
Empty Elements
Element
<meta charset=“utf-8”>
![Page 9: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/9.jpg)
• Begin with a start tag. There is no end tag.
• Element is the start tag
• Can contain• Attributes
Empty Elements
Element
<meta charset=“utf-8”>
<br><col><hr><img><input><link><meta>
![Page 10: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/10.jpg)
• Begin with a start tag. There is no end tag.
• Element is the start tag
• Can contain• Attributes
Empty Elements
End tag
<meta charset=“utf-8” />
![Page 11: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/11.jpg)
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 rootelement, which has none.
Root
![Page 12: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/12.jpg)
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 rootelement, which has none.
Root
![Page 13: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/13.jpg)
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 rootelement, which has none.
Root
![Page 14: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/14.jpg)
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 rootelement, which has none.
Root
![Page 15: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/15.jpg)
HTML
<!doctype html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<p>This is a paragraph</p>
<p>Another paragraph</p>
</body>
</html>
![Page 16: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/16.jpg)
HTML Markup
<!doctype html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<p>This is a paragraph</p>
<p>Another paragraph</p>
</body>
</html>
![Page 17: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/17.jpg)
HTML Content
<!doctype html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<p>This is a paragraph</p>
<p>Another paragraph</p>
</body>
</html>
![Page 18: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/18.jpg)
HTML Content
![Page 19: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/19.jpg)
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
![Page 20: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/20.jpg)
HTML Markup
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>My Webpage</title></head><body>
<p>This is a paragraph</p><p>Another paragraph</p>
</body>
</html>
![Page 21: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/21.jpg)
HTML Markup
<!doctype html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<p>This is a paragraph</p>
<p>Another paragraph</p>
</body>
</html>
Root Element
![Page 22: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/22.jpg)
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
![Page 23: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/23.jpg)
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
![Page 24: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/24.jpg)
HTML Markup
<!doctype html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<p>This is a paragraph</p>
<p>Another paragraph</p>
</body>
</html>
Child
![Page 25: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/25.jpg)
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
![Page 26: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/26.jpg)
HTML Markup
<!doctype html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<p>This is a paragraph</p>
<p>Another paragraph</p>
</body>
</html>
Child
![Page 27: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/27.jpg)
<!doctype html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<p>This is a paragraph</p>
<p>Another paragraph</p>
</body>
</html>
HTML Markup
Parent
![Page 28: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/28.jpg)
<!doctype html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<p>This is a paragraph</p>
<p>Another paragraph</p>
</body>
</html>
HTML Markup
Siblings
![Page 29: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/29.jpg)
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
![Page 30: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/30.jpg)
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
![Page 31: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/31.jpg)
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
![Page 32: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/32.jpg)
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
![Page 33: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/33.jpg)
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
![Page 34: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/34.jpg)
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.
![Page 35: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/35.jpg)
Character Encoding
![Page 36: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/36.jpg)
Character Encoding
Encoding
![Page 37: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/37.jpg)
Character Encoding
![Page 38: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/38.jpg)
Description
<!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>
Description
![Page 39: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/39.jpg)
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
![Page 40: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/40.jpg)
Title & Description
![Page 41: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/41.jpg)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Viewport
Used to control the width and scale of the page for mobile devices.
![Page 42: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/42.jpg)
<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.
![Page 43: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/43.jpg)
<style>
body { font-family: arial, helvetica; }
</style>
<style>
Provides CSS used to style the document.
![Page 44: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/44.jpg)
<link rel="stylesheet" href="URL to the file">
<link>
Used to reference an external resource, most commonly used to embed external stylesheets.
![Page 45: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/45.jpg)
<link rel="stylesheet" href="URL to the file">
<link>
Used to reference an external resource, most commonly used to embed external stylesheets.
![Page 46: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/46.jpg)
<link rel="stylesheet" href="URL to the file">
<link>
Used to reference an external resource, most commonly used to embed external stylesheets.
![Page 47: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/47.jpg)
<script>console.log(‘Your JavaScript goes here’);
</script>
<script>
Used to embed JavaScript.Can be inline …
![Page 48: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/48.jpg)
<script src=“URL to the file”></script>
<script>
Used to embed JavaScript.Can be inline or reference an external file.You still need the </script> tag!
![Page 49: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/49.jpg)
URL
Uniform Resource Locator…a.k.a. “web address”
Can be absolute:“https://developer.mozilla.org/en-US/docs/Web/HTML”
Can be relative:“../scripts/javascript.js”
![Page 50: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/50.jpg)
Relative URL
![Page 51: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/51.jpg)
Relative URL
You are here
/webRoot/pages/webpage.html
![Page 52: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/52.jpg)
Relative URL
<script src="../../scripts/hellacool.js">
![Page 53: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/53.jpg)
Relative URL
Parent directory
<script src="../../scripts/hellacool.js">
![Page 54: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/54.jpg)
Relative URL
Parent directory
<script src="../../scripts/hellacool.js">
![Page 55: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/55.jpg)
Relative URL
“scripts” directory
<script src="../../scripts/hellacool.js">
![Page 56: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/56.jpg)
Relative URL
“hellacool.js”
<script src="../../scripts/hellacool.js">
![Page 57: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/57.jpg)
Relative URL
<img src=“/images/pretty_picture.bmp">
![Page 58: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/58.jpg)
Relative URL
<img src=“/images/pretty_picture.bmp">
Root directory
![Page 59: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/59.jpg)
Relative URL
<img src=“/images/pretty_picture.bmp">
“images” directory
![Page 60: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/60.jpg)
Relative URL
<img src=“/images/pretty_picture.bmp">
“pretty_picture.bmp”
![Page 61: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/61.jpg)
Relative URL
<link rel="stylesheet" href="styles/trendy.css">
![Page 62: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/62.jpg)
Relative URL
<link rel="stylesheet" href="styles/trendy.css">
“styles” directory
![Page 63: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/63.jpg)
Relative URL
<link rel="stylesheet" href="styles/trendy.css">
“trendy.css” file
![Page 64: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/64.jpg)
<head>
![Page 65: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/65.jpg)
![Page 66: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/66.jpg)
Adding Content
![Page 67: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/67.jpg)
Adding Content
![Page 68: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/68.jpg)
Headings
![Page 69: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/69.jpg)
Headings
![Page 70: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/70.jpg)
Paragraphs
![Page 71: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/71.jpg)
Paragraphs
![Page 72: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/72.jpg)
Lists
![Page 73: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/73.jpg)
Lists
![Page 74: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/74.jpg)
Lists
![Page 75: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/75.jpg)
Lists
![Page 76: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/76.jpg)
Block vs Inline Elements
![Page 77: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/77.jpg)
Block vs Inline Elements
![Page 78: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/78.jpg)
Block vs Inline Elements
![Page 79: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/79.jpg)
Inline Elements
![Page 80: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/80.jpg)
Inline Elements
![Page 81: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/81.jpg)
Anchors (links)
![Page 82: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/82.jpg)
Anchors (links)
URL to link to
![Page 83: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/83.jpg)
Anchors (links)
Text to display
![Page 84: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/84.jpg)
Anchors (links)
![Page 85: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/85.jpg)
Anchors (links)
![Page 86: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/86.jpg)
Anchors (links)
Opens in a new tab
![Page 87: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/87.jpg)
Anchors (links)
Prevents hackingwindow.opener
![Page 88: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/88.jpg)
Anchors (links)
![Page 89: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/89.jpg)
Anchors (links)
Use an image
![Page 90: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/90.jpg)
Anchors (links)
![Page 91: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/91.jpg)
Anchors (links)
Download a file
![Page 92: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/92.jpg)
Anchors (links)
![Page 93: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/93.jpg)
Anchors (links)
![Page 94: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/94.jpg)
Anchors (links)
![Page 95: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/95.jpg)
Menu Items
![Page 96: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/96.jpg)
Menu Items
![Page 97: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/97.jpg)
Forms
![Page 98: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/98.jpg)
Forms
Where data goes
![Page 99: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/99.jpg)
Forms
HTTP method to use
![Page 100: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/100.jpg)
Forms
Name of the parm
![Page 101: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/101.jpg)
Forms
![Page 102: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/102.jpg)
Forms
![Page 103: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/103.jpg)
Forms
action=“form.html"
![Page 104: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/104.jpg)
Forms
method=“get”
![Page 105: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/105.jpg)
Forms
parm = value
![Page 106: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/106.jpg)
Widgets
![Page 107: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/107.jpg)
Widgets
![Page 108: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/108.jpg)
Widgets
![Page 109: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/109.jpg)
Widgets
![Page 110: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/110.jpg)
Widgets
![Page 111: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/111.jpg)
Widgets
![Page 112: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/112.jpg)
Widgets
![Page 113: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/113.jpg)
Widgets
![Page 114: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/114.jpg)
Widgets
![Page 115: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/115.jpg)
Widgets
![Page 116: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/116.jpg)
Widgets
![Page 117: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/117.jpg)
Widgets
![Page 118: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/118.jpg)
Widgets
![Page 119: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/119.jpg)
Widgets
![Page 120: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/120.jpg)
Widgets
![Page 121: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/121.jpg)
Widgets
![Page 122: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/122.jpg)
Widgets
![Page 123: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/123.jpg)
Widgets
![Page 124: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/124.jpg)
Widgets
![Page 125: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/125.jpg)
Widgets
![Page 126: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/126.jpg)
Widgets
![Page 127: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/127.jpg)
Widgets
![Page 128: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/128.jpg)
Widgets
![Page 129: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/129.jpg)
Widgets
![Page 130: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/130.jpg)
Widgets
![Page 131: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/131.jpg)
Widgets
![Page 132: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/132.jpg)
Widgets
![Page 133: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/133.jpg)
Widgets
![Page 134: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/134.jpg)
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=“email” type=“hidden”type=“color” type=“file”type=“password” type=“button” >
![Page 135: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/135.jpg)
Forms
Submit button
![Page 136: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/136.jpg)
Forms
Button text
![Page 137: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/137.jpg)
Forms
![Page 138: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/138.jpg)
Tables
![Page 139: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/139.jpg)
Tables
![Page 140: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/140.jpg)
Tables
![Page 141: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/141.jpg)
Tables
![Page 142: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/142.jpg)
Tables
![Page 143: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/143.jpg)
Tables
![Page 144: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/144.jpg)
Tables
![Page 145: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/145.jpg)
Tables
![Page 146: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/146.jpg)
Tables
![Page 147: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/147.jpg)
Tables - Semantics
![Page 148: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/148.jpg)
Tables - Semantics
![Page 149: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/149.jpg)
Tables - Semantics
![Page 150: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/150.jpg)
Typical Website Layout
![Page 151: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/151.jpg)
Table Layout
![Page 152: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/152.jpg)
<div> Layout
![Page 153: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/153.jpg)
HTML5 Semantics
<header>
<nav>
<section>
<article>
<aside>
<footer>
![Page 154: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/154.jpg)
<div> Layout
![Page 155: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/155.jpg)
HTML5 Elements
<datalist>
<output>
<input type=“color”>
<canvas>
<svg>
<audio>
<video>
![Page 156: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/156.jpg)
Social Media
• Facebook Open Graph• <meta property=“og:url” content=“https://www.yoursite.com/page”>
• <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=“http://example.com/img.jpg”>
![Page 157: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/157.jpg)
Social Media
• Twitter cards• <meta name=“twitter:card” content=“summary”>
• <meta name=“twitter:site” content=“@flickr”>
• <meta name=“twitter:title” content=“Island Photos”>
• <meta name=“twitter:description” content=“View the album on Flickr.”>
• <meta name=“twitter:image” content=“https://example.com/img.jpg”>
![Page 158: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/158.jpg)
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
![Page 159: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/159.jpg)
Summary
• Metadata is data about data• Language
• Character encoding
• Title
• Description
• External files
• URL (relative and absolute)
![Page 160: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/160.jpg)
Summary
• Content• Headings
• Paragraphs
• Lists (ordered & unordered)
• Block vs Inline
• Anchors (links)
• Forms & Widgets
• Tables
• Layout
• Social Media
![Page 161: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/161.jpg)
Questions?
![Page 162: PowerPoint Presentation fileMarkup Language •HTML is a markup language •HTML markup instructs browsers how to display the content •Provides structure and meaning to the content](https://reader035.vdocuments.site/reader035/viewer/2022081514/5b78b0f47f8b9a6a498c05ed/html5/thumbnails/162.jpg)
Thank you!
Please, please, pleaseFill out your survey!!
Twitter: @P_Behr
LinkedIn: Patrick-Behr
Website:patrickbehr.com