powerpoint presentation · •html is a markup language •html markup instructs browsers how to...

<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



Elements

End Tag

<tag>content</tag>




Elements

Element

<tag>content</tag>




• 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”>




Empty Elements

Element

<meta charset=“utf-8”>

<br><col><hr><img><input><link><meta>




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

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>


</head>

<body>



</body>

</html>

HTML Content

<!doctype html>

<html>

<head>


</head>

<body>



</body>

</html>

HTML Content

HTML Markup

<!doctype html>

<html>

<head>


</head>

<body>



</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>


</head>

<body>



</body>

</html>

Root Element

HTML Markup

<!doctype html>

<html>

<head>


</head>

<body>



</body>

</html> End Tag

HTML Markup

<!doctype html>

<html>

<head>


</head>

<body>



</body>

</html>

Element

HTML Markup

<!doctype html>

<html>

<head>


</head>

<body>



</body>

</html>

Child

HTML Markup

<!doctype html>

<html>

<head>


</head>

<body>



</body>

</html>

Parent

HTML Markup

<!doctype html>

<html>

<head>


</head>

<body>



</body>

</html>

Child

<!doctype html>

<html>

<head>


</head>

<body>



</body>

</html>

HTML Markup

Parent

<!doctype html>

<html>

<head>


</head>

<body>



</body>

</html>

HTML Markup

Siblings

HTLM <head>

<!doctype html>

<html>

<head>


</head>

<body>



</body>

</html>

Metadata

HTML <body>

<!doctype html>

<html>

<head>


</head>

<body>



</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>


</head>

<body>



</body>

</html>

Language

Character Encoding

<!doctype html>

<html lang=“en”><head>

<meta charset=“utf-8”><title>My Webpage</title>

</head><body>


</body>

</html>

Encoding

Character Encoding

<!doctype html>

<html lang=“en”><head>

<meta charset=“utf-8”><title>My Webpage</title>

</head><body>


</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>


</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>


</body></html>

Title

Title & Description

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


Relative URL

“scripts” directory


Relative URL

“hellacool.js”


Relative URL

<img src=“/images/pretty_picture.bmp">

Relative URL


Root directory

Relative URL


“images” directory

Relative URL


“pretty_picture.bmp”

Relative URL

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

Relative URL


“styles” directory

Relative URL


“trendy.css” file

<head>

Adding Content

Headings

Paragraphs

Block vs Inline Elements

Inline Elements

Anchors (links)

Anchors (links)

URL to link to

Anchors (links)

Text to display

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)

Menu Items

Forms

Where data goes

Forms

HTTP method to use

Forms

Name of the parm

Forms

action=“form.html"

Forms

method=“get”

Forms

parm = value

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

Tables

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

powerpoint presentation · •html is a markup language •html markup instructs browsers how to...

Documents