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

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

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

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

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

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

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

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

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

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> Root Element <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> 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> Child <title>my Webpage</title> </head> <body> <p>this is a paragraph</p> <p>another paragraph</p> </body> </html>

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>

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>

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

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

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.

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 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 Root directory <img src= /images/pretty_picture.bmp">

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

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

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

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

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

<head>

Adding Content

Headings

Paragraphs

Lists

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 hacking window.opener

Anchors (links)

Anchors (links) Use an image

Anchors (links)

Anchors (links) Download a file

Anchors (links)

Menu Items

Forms

Forms Where data goes

Forms HTTP method to use

Forms Name of the parm

Forms

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

Forms

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, please Fill out your survey!! Twitter: @P_Behr LinkedIn: Patrick-Behr Website:patrickbehr.com