powerpoint presentation filemarkup language •html is a markup language •html markup instructs...
Post on 19-Aug-2018
250 Views
Preview:
TRANSCRIPT
<HTML>Patrick Behr
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”
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>
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
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
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
• Configures or modifies an element
• Name-Value pair
• Defined in the start tag
Attributes
<tag >content</tag>
Attribute
attribute=“value”
• 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”>
• 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>
• 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” />
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
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
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
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
HTML
<!doctype html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<p>This is a paragraph</p>
<p>Another paragraph</p>
</body>
</html>
HTML Markup
<!doctype html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<p>This is a paragraph</p>
<p>Another paragraph</p>
</body>
</html>
HTML Content
<!doctype html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<p>This is a paragraph</p>
<p>Another paragraph</p>
</body>
</html>
HTML Content
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
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>
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
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
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
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
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
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
<!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
<!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
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
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
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
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
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
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.
Character Encoding
Character Encoding
Encoding
Character Encoding
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
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
Title & Description
<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.
<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.
<style>
body { font-family: arial, helvetica; }
</style>
<style>
Provides CSS used to style the document.
<link rel="stylesheet" href="URL to the file">
<link>
Used to reference an external resource, most commonly used to embed external stylesheets.
<link rel="stylesheet" href="URL to the file">
<link>
Used to reference an external resource, most commonly used to embed external stylesheets.
<link rel="stylesheet" href="URL to the file">
<link>
Used to reference an external resource, most commonly used to embed external stylesheets.
<script>console.log(‘Your JavaScript goes here’);
</script>
<script>
Used to embed JavaScript.Can be inline …
<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!
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”
Relative URL
Relative URL
You are here
/webRoot/pages/webpage.html
Relative URL
<script src="../../scripts/hellacool.js">
Relative URL
Parent directory
<script src="../../scripts/hellacool.js">
Relative URL
Parent directory
<script src="../../scripts/hellacool.js">
Relative URL
“scripts” directory
<script src="../../scripts/hellacool.js">
Relative URL
“hellacool.js”
<script src="../../scripts/hellacool.js">
Relative URL
<img src=“/images/pretty_picture.bmp">
Relative URL
<img src=“/images/pretty_picture.bmp">
Root directory
Relative URL
<img src=“/images/pretty_picture.bmp">
“images” directory
Relative URL
<img src=“/images/pretty_picture.bmp">
“pretty_picture.bmp”
Relative URL
<link rel="stylesheet" href="styles/trendy.css">
Relative URL
<link rel="stylesheet" href="styles/trendy.css">
“styles” directory
Relative URL
<link rel="stylesheet" href="styles/trendy.css">
“trendy.css” file
<head>
Adding Content
Adding Content
Headings
Headings
Paragraphs
Paragraphs
Lists
Lists
Lists
Lists
Block vs Inline Elements
Block vs Inline Elements
Block vs Inline Elements
Inline Elements
Inline Elements
Anchors (links)
Anchors (links)
URL to link to
Anchors (links)
Text to display
Anchors (links)
Anchors (links)
Anchors (links)
Opens in a new tab
Anchors (links)
Prevents hackingwindow.opener
Anchors (links)
Anchors (links)
Use an image
Anchors (links)
Anchors (links)
Download a file
Anchors (links)
Anchors (links)
Anchors (links)
Menu Items
Menu Items
Forms
Forms
Where data goes
Forms
HTTP method to use
Forms
Name of the parm
Forms
Forms
Forms
action=“form.html"
Forms
method=“get”
Forms
parm = value
Widgets
Widgets
Widgets
Widgets
Widgets
Widgets
Widgets
Widgets
Widgets
Widgets
Widgets
Widgets
Widgets
Widgets
Widgets
Widgets
Widgets
Widgets
Widgets
Widgets
Widgets
Widgets
Widgets
Widgets
Widgets
Widgets
Widgets
Widgets
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” >
Forms
Submit button
Forms
Button text
Forms
Tables
Tables
Tables
Tables
Tables
Tables
Tables
Tables
Tables
Tables - Semantics
Tables - Semantics
Tables - Semantics
Typical Website Layout
Table Layout
<div> Layout
HTML5 Semantics
<header>
<nav>
<section>
<article>
<aside>
<footer>
<div> Layout
HTML5 Elements
<datalist>
<output>
<input type=“color”>
<canvas>
<svg>
<audio>
<video>
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”>
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”>
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
Summary
• Metadata is data about data• Language
• Character encoding
• Title
• Description
• External files
• URL (relative and absolute)
Summary
• Content• Headings
• Paragraphs
• Lists (ordered & unordered)
• Block vs Inline
• Anchors (links)
• Forms & Widgets
• Tables
• Layout
• Social Media
Questions?
Thank you!
Please, please, pleaseFill out your survey!!
Twitter: @P_Behr
LinkedIn: Patrick-Behr
Website:patrickbehr.com
top related