Hypertext Markup Language Martin Kruliš, Martin Nečaský 29. 10. 2015 by Martin Kruliš (v1.1) 1
by Martin Kruliš (v1.1) 1
Hypertext Markup Language
Martin Kruliš, Martin Nečaský
29. 10. 2015
by Martin Kruliš (v1.1) 2
HTML = Hypertext Markup Language◦ World Wide Web's markup language◦ Language for describing the structure of Web
pages
Web Page◦ Semi-structured document
Form of structured data with non-formal structure model
Basically a plain text interleaved by markers (tags) that impose some form of internal structure
◦ Structure denoted in a form of HTML markup
29. 10. 2015
What is HTML?
by Martin Kruliš (v1.1) 329. 10. 2015
What is HTML?
<!DOCTYPE html><html lang="en"> <head> <title>Simple web page</title> </head> <body> <h1>Simple web page</h1> <p>This is a <em>web page</em> with <a href="http://whatwg.org/html">HTML5</a> markup.</p> </body></html>
by Martin Kruliš (v1.1) 4
HTML Document◦ Is structured as a tree
HTML syntax is in fact an infix serialization of the tree
Browsers represent the tree in Document Object Model (DOM), which can be manipulated with JavaScript
◦ Various types of nodes Elements, text, attributes, comments, …
29. 10. 2015
HTML Syntax
by Martin Kruliš (v1.1) 5
DOM Tree Example<html> <body> <h1>DOM Example</h1> <p> Document Object Model is an API … </p> <img src="url" alt="text"> ... </body></html>
29. 10. 2015
HTML Syntax
body
h1 p img
Document
src
DOM Example Document Object Model
…
alt
html
…
by Martin Kruliš (v1.1) 6
HTML Element◦ Represents a fragment of a web page
Gives semantic meaning to its content◦ Opening and closing tags work as parentheses for
the content (i.e., what falls into the element) Content-less elements may omit closing tag Elements may not cross-overlap
◦ Attributes Name-value pairs specified in opening tag Values are optional and they are optionally enclosed
in single or double quotes (recommended) Quotes are mandatory if the value contains ",', <, or >
29. 10. 2015
HTML Syntax
by Martin Kruliš (v1.1) 7
Comments◦ Enclosed in <!-- and -->◦ Not displayed when page is rendered
Entities◦ &entity-name;◦ Provide a way to encode special characters◦ <, >, &, " - <, >, &, "◦ - non-braking space◦ Numerically represented characters ü - “ü”
29. 10. 2015
HTML Syntax
by Martin Kruliš (v1.1) 829. 10. 2015
Evolution of HTML
HTML 2.0
HTML 3.2
HTML 4.01
XHTML 1.0
XHTML 1.1
1997
1995
1999
2000 2001
HTML 5 XHTML 2 2010
www.whatwg.org
2014
XML 1.0
www.w3.org
by Martin Kruliš (v1.1) 9
WhatWG◦ http://whatwg.org/html◦ "Living Standard" (see Last Updated)
W3C◦ http://www.w3.org/TR/html5/◦ Formal standardization process
Stages of W3C a document (draft, CR, R)
29. 10. 2015
Evolution of HTML
by Martin Kruliš (v1.1) 10
Current World Wide Web is sometimes referred to as Web of Documents◦ HTML as a format for representing documents
published on the Web◦ URLs as unique global identifiers of documents◦ HTTP for localization and accessing documents by
their URLs◦ Hyperlinks between documents to link related
documents on the Web
29. 10. 2015
Web of Documents
by Martin Kruliš (v1.1) 1129. 10. 2015
Web of Documents
Web Page
http://example.com/page.html
Web Page
http://...
Web Page
http://...
Web Page
http://...
Web Page
http://...
Web Page
http://...
Web Page
http://...
Web Page
http://...
Web Page
http://...
Web Page
http://...
Web Page
http://...
by Martin Kruliš (v1.1) 12
Hyperlink Elements◦ Links to external resource, which are exposed to
user of the current document as means to browse
<a href="http://www.google.com">Google</a> Attribute href specifies URL of linked resource Content is visible to user (text or any inline
elements)◦ Identifying fragment of a web page
<p id="Para2"> ... </p> Is then referenced by fragment part of an URL
<a href="#Para2">...</a> <a href="http://www.page.com#Para2">...</a>
29. 10. 2015
Hyperlinks
by Martin Kruliš (v1.1) 13
Markup in HTML(5) Body◦ Text level semantics elements
Denote parts of the text in a HTML document witha specific semantics
◦ Sectioning content◦ Grouping content◦ Tables, forms◦ External sources (images)◦ Hyperlinks◦ …
29. 10. 2015
HTML Body
by Martin Kruliš (v1.1) 1429. 10. 2015
Text Level SemanticsElement Description
em Represents stress emphasis of its content. The level of stress is given by the level of nesting of particular em elements
strong Represents strong importance of its content.
small Represents a side comment.
s Represents no longer relevant or accurate content.
cite Represents a title of a work (book, article, game, software, song, opera, ...).
abbr Represents an abbreviation or acronym, optionally with its expansion in title attribute.
data Represents its content enriched with its machine readable notation in value attribute.
time Represents its content which is a determination of time with machine readable notation in datetime attribute.
i Represents its content in a manner indicating different quality of text
b Represents its content to which attention is being drawn
br Represents a line break
by Martin Kruliš (v1.1) 15
Defining Internal Structure of Document Body◦ Content of document is divided into sections◦ Sections are divided to subsections◦ section element – a generic section◦ article element - self-contained main section
Independently distributable and reusable E.g., a blog post or a newspaper article
◦ aside element – separate section Marginal content E.g., a did-you-know aside box
◦ nav element – section containing navigation links
29. 10. 2015
Sectioning Content
by Martin Kruliš (v1.1) 1629. 10. 2015
Sectioning Content<article> <p>This article summarizes technologies ...</p> <nav> <a href="#html">HTML</a><a href="#css">CSS</a> </nav> <section id="html"> <p>We will start with HTML.</p> <section><p>First, we will go to history.</p></section> <section><p>Then, we will deal with actual 5.0.</p></section> </section> <aside> <p>Did you know that SGML is a predecessor of HTML?</p> </aside> <section id="css"><p>CSS is the second technology.</p></section> <nav> <div><a href="...">Home</a><a href="...">Contact</a></div> </nav></article><article>Another article</article>
by Martin Kruliš (v1.1) 17
Headers and Footers◦ Within a section or for the whole document◦ header element
Distinguishes header of the nearest section (hierarchically)
Intended (but not required) to contain heading elements (h1 – h6)
◦ footer element Distinguishes footer of the nearest section
(hierarchically) Usually contains copyrights, author info, etc.
29. 10. 2015
Headers and Footers
by Martin Kruliš (v1.1) 1829. 10. 2015
Sectioning Content<article> <header> <h1>NSWI117 – Summary of technologies</h1> </header> <section> <header> <h1>HTML</h1> </header> <p>We will start with HTML.</p> </section> <footer> <nav> <div><a href="...">Home</a> <a href="...">Contact</a></div> </nav> </footer></article>
by Martin Kruliš (v1.1) 19
Heading Elements h1 – h6◦ Before HTML5
Six levels of importance (rank) <h1> most important (highest), <h6> least important
◦ Headings in HTML5 Combined with sectioning <section>, <article>, … Attempt to keep some backwards compatibility
Quite difficult to realize though Each section has its own heading hierarchy First heading element in a section is the main
heading of that section (no matter its rank)
29. 10. 2015
Headings
by Martin Kruliš (v1.1) 20
Outline Algorithm◦ First heading (any of <h1>…<h6>) in the section is
the heading of the section◦ Subsequent headings create new implicit sections
Headings of the same or higher rank implicitly close current section and start another one
Headings of lesser ranks open implicit subsections Implicit subsections are closed when ancestor
explicit section is closed
29. 10. 2015
Section Headings in HTML5
by Martin Kruliš (v1.1) 2129. 10. 2015
Section Headings Example<body> <h1>NSWI142 - ...</h1> <p>At this page, ...</p> <h2>HTML</h2> <p>About HTML ...</p> <h3>HTML History</h3> <h3>HTML Today</h3> <h2>CSS</h2> <p>About CSS ...</p></body>
Sections Structure
• NSWI142 - …• HTML
• HTML History• HTML Today
• CSS
by Martin Kruliš (v1.1) 2229. 10. 2015
Section Headings Example<body> <h1>NSWI142 - ...</h1> <p>At this page, ...</p> <section> <h2>HTML</h2> <p>About HTML ...</p> <section> <h3>HTML History</h3> </section> <section> <h3>HTML Today</h3> </section> </section> <section> <h2>CSS</h2> <p>About CSS ...</p> </section></body>
Sections Structure
• NSWI142 - …• HTML
• HTML History• HTML Today
• CSS
by Martin Kruliš (v1.1) 2329. 10. 2015
Section Headings Example<body> <h1>NSWI142 - ...</h1> <p>At this page, ...</p> <section> <h1>HTML</h1> <p>About HTML ...</p> <section> <h1>HTML History</h1> </section> <section> <h6>HTML Today</h6> </section> </section> <section> <h1>CSS</h1> <p>About CSS ...</p> </section></body>
Sections Structure
• NSWI142 - …• HTML
• HTML History• HTML Today
• CSS
by Martin Kruliš (v1.1) 24
Outline Algorithm◦ Is not currently implemented in graphical
browsers!
How to Fix The Problem◦ Use single heading in each section
Use <h1> everywhere Express importance by <section> nesting
Or use appropriate heading based on nesting level E.g., <h3> in 2nd level (<section><section>…)
◦ Additional help from CSS may be required
29. 10. 2015
Section Headings in HTML5
by Martin Kruliš (v1.1) 2529. 10. 2015
Grouping Content
Element Description
p Represents a paragraph
pre Represents a block of preformatted text
div Element with no special meaning (generic container)
main Represents a block with a dominant content
ul Represents an unordered list
ol Represents an ordered list
li Represents a list itemThis is not a complete list!
by Martin Kruliš (v1.1) 2629. 10. 2015
List Example
<ul> <li>First item</li> <li>Second item: <ol> <li>HI</li> <li>HELLO</li> <li>GOOD MORNING</li> </ol> </li> <li>Third item</li></ul>
• First item• Second item:
1. HI2. HELLO3. GOOD MORNING
• Third item
by Martin Kruliš (v1.1) 2729. 10. 2015
Tables
Element Description
table table
thead table head
tbody table body
tfoot table footer
tr table row
th table head cell
td table data cell
The <thead>, <tbody> and <tfoot> table division may be omitted for simple tables
2829. 10. 2015by Martin Kruliš (v1.1)
Table Example<table> <thead> <tr> <th>Name</th><th>Email</th><th>Address</th> </tr> </thead> <tbody> <tr> <td>Joe White</td> <td>[email protected]</td> <td>Lloyd Ave, Boston</td> </tr> <tr> <td>Bill Black</td> <td>[email protected]</td> <td>---</td> </tr> </tbody></table>
Name Email Address
Joe White [email protected]
Lloyd Ave, Boston
Bill Black [email protected] ---
by Martin Kruliš (v1.1) 29
Spanning Table Cells◦ Virtually grouping content of multiple logical cells
◦ Attribute colspan of element td and th Spans selected cell over several following columns Specifies the number of columns taken by the cell
◦ Attribute rowspan of element td and th Spans selected cell over several following rows Specifies the number of rows taken by the cell
29. 10. 2015
Irregular Tables
by Martin Kruliš (v1.1) 3029. 10. 2015
Irregular Tables<table> <tr> <td colspan="2">Adults</td> <td>2</td> </tr> <tr><td>Adult 1</td><td>34</td><td rowspan="2">2</td></tr> <tr><td>Adult 2</td><td>32</td></tr> <tr> <td colspan="2">Children</td> <td>3</td> </tr> <tr><td>Child 1</td><td>4</td><td>1</td></tr> <tr><td>Child 2</td><td>8</td><td rowspan="2">2</td></tr> <tr><td>Child 3</td><td>12</td></tr></table>
Adults 2
Adult 1 342
Adult 2 32
Children 3
Child 1 4 1
Child 2 82
Child 3 12
by Martin Kruliš (v1.1) 31
HTML Form◦ Component of web page composed of UI controls◦ User can interact with form controls
Adding text, selecting options, clicking on buttons, … Data provided by user can be processed by a script
By Javascript in the browser or by a server script
Element <form>◦ Attribute method – HTTP method used for transfer
post – data are transferred in HTTP request body get – data are encoded in URL (query part)
◦ Attribute action – URL where the data are sent to
29. 10. 2015
Forms
by Martin Kruliš (v1.1) 32
Form Controls◦ input
Basic input controls Various types based on input attributes
◦ textarea Input for longer (multi row) texts
◦ select Selection list with options
◦ button Submit or reset button
29. 10. 2015
Forms
by Martin Kruliš (v1.1) 3329. 10. 2015
Forms Example
<form method="get" action="http://www.example.org/newcustomer.php"> Name: <input name="name" ... > Phone: <input name="phone" ... > Preferred delivery time: <input name="time" ... > Comments: <textarea name="comments"></textarea> <button type="submit">Submit Order</button></form>
Submit button works as a link to an assembled URL:http://www.example.org/newcustomer.php ?name=John+Smith&phone=555-1234& time=5pm&comments=unleashed+dog+at+house
by Martin Kruliš (v1.1) 34
Element <input> - basic form input field◦ Attribute name specifies identifier of the field
For script which processes the data on the server◦ Attribute type specifies type of the input
text – input is one line of text + attribute maxlength – maximal text length
password – same as text, but obscures input with * radio – exclusive choice (radio buttons) from set of
fields with the same name + attribute value – value send to server (when selected) + attribute checked="checked" – default choice
checkbox – multiple choice, similar logic as radio
29. 10. 2015
Forms
by Martin Kruliš (v1.1) 3529. 10. 2015
Element input Example<form method="post" action="http://www.example.org/script.php"> <p> Name: <input type="text" name="fullName" maxlength="5"><br> Password: <input type="password" name="password"><br> </p> <p>Age:<br> 0-18: <input type="radio" name="age" value="0"><br> 19-65: <input type="radio" name="age" value="19"><br> 66-*: <input type="radio" name="age" value="65"><br> </p> <p>Product:<br> <input type="checkbox" name="product" value="BMW">BMW<br> <input type="checkbox" name="product" value="AUD">Audi<br> <input type="checkbox" name="product" value="POR">Porsche<br> </p> </form>
by Martin Kruliš (v1.1) 36
Element <input>◦ Attribute type specifies type of the input
submit – submission button + attribute value contains displayed button value
reset – reset button + attribute value contains displayed button value
hidden – submitted value hidden to user Fixed value, user cannot change it
file – file submission Browser allows selecting file on local disk, which is then
uploaded to the server
29. 10. 2015
Forms
by Martin Kruliš (v1.1) 3729. 10. 2015
Element input Example
<form method="post" action="http://www.example.org/script.php"> <p> Name: <input type="text" name="fullName" maxlength="5"><br> Password: <input type="password" name="password"><br> </p> <input type="hidden" name="requestCode" value="H38aJJJ"> <input type="submit" value="Submit Form"> <input type="reset" value="Reset Form"> </form>
by Martin Kruliš (v1.1) 38
Element <input>◦ The control element might be further specified◦ maxlength attribute
Maximum number of characters allowed in a text field
◦ size attribute Number of characters visible in a text field
◦ value attribute Specifies default/selected field value
◦ disabled="disabled" attribute Specifies that field is disabled when form loads
29. 10. 2015
Forms
by Martin Kruliš (v1.1) 3929. 10. 2015
Element input Example
<form ... > <input name="full_name" maxlength="32" size="16" value="Martin Nečaský" disabled title="First name followed by family name."> <button type="submit">Submit</button></form>
by Martin Kruliš (v1.1) 40
Element <select>◦ List of options user selects from◦ Sub-element <option>
Content is shown to the user Attribute value – submitted value Attribute selected="selected" – default value
◦ Attribute multiple="multiple" Allows user to select more values
◦ Attribute size Number of options (rows) displayed at once If size=1, the list is shown as drop-down-list box
29. 10. 2015
Forms
by Martin Kruliš (v1.1) 4129. 10. 2015
Element select Example
<form ... > <p>Product:<br> <select name="product" size="4" multiple="multiple"> <option value="BMW">BMW</option> <option value="AUD" selected="selected">Audi</option> <option value="MER">Mercedes</option> <option value="SKO">Skoda</option> <option value="CHE">Chevrolet</option> <option value="TOY">Toyota</option> <option value="FOR">Ford</option> </select> </p> </form>
by Martin Kruliš (v1.1) 42
Additional Form Elements◦ Making the form structured and better readable◦ <fieldset> element
Groups logically related fields◦ <legend> element
Caption for a <fieldset> element◦ <label> element
Caption for a control element (e.g., <input> element)
◦ title attribute Balloon tip hint for a field (This is attribute may be used with any HTML
element)
29. 10. 2015
Forms
by Martin Kruliš (v1.1) 4329. 10. 2015
Form Elements Example<form ... > <p><label>Name: <input ... ></label></p> <fieldset> <legend>Contact information</legend> <p><label>Phone: <input ... ></label></p> <p><label>Email: <input ... ></label></p> </fieldset> <fieldset> <legend>Timing</legend> <p> <label for="time">Preferred delivery time:</label> <input id="time" title="Time in hh:mm format." ... > </p> </fieldset> <p><label>Comments: <textarea></textarea></label></p> <button>Submit Order</button></form>
by Martin Kruliš (v1.1) 44
Element <input> New HTML5 Types◦ search - search query field◦ tel - phone number field◦ url - absolute URL (e.g., page address) field◦ email - email address field◦ date, time, datetime - date/time field◦ number – number (entered as text) field◦ range - number (entered by slide bar) field◦ color – color selection field◦ Unsupported types are treated as text inputs
29. 10. 2015
Forms in HTML5
by Martin Kruliš (v1.1) 45
HTML5 <input> Attributes◦ autocomplete attribute
Turns automatic completion of a field on/off◦ autofocus attribute
Turns the focus to the field when the page loads◦ pattern attribute
Regular expression for field value validation◦ placeholder attribute
Hint for the user to help with filling the field◦ required attribute
Field value is mandatory for form submission
29. 10. 2015
Forms in HTML5
by Martin Kruliš (v1.1) 4629. 10. 2015
Element select Example
<form ... > <input name="phone" autocomplete="off" autofocus="autofocus" pattern="[0-9]{9}" placeholder="Fill in your 9-digit phone number" required="required"> <button>Submit</button></form>
by Martin Kruliš (v1.1) 47
When Form Is Submitted …◦ Data are encoded into HTTP request made for
selected URL using given method (GET/POST) In case of GET request, the data are encoded to URL
◦ enctype attribute of element <form> specifies the format of the encoded data (for POST requests) application/x-www-form-urlencoded multipart/form-data text/plain
29. 10. 2015
Submitting Forms
by Martin Kruliš (v1.1) 4829. 10. 2015
Submitting Forms Example
<form method="post" action="?" enctype="..."> Full Name: <input name="fullname" type="text"><br> Gender: <input name="gender" type="radio" value="M"> male, <input name="gender" type="radio" value="F"> female<br> <input name="student" type="checkbox" value="1"> student<br> <input type="hidden" name="tag" value="#a&Hx9%"> <button type="submit">Submit</button></form>
by Martin Kruliš (v1.1) 49
application/x-www-form-urlencoded
fullname=Martin+Kruli%C5%A1&gender=M&student=1&tag=%23a%26Hx9%25
text/plain
fullname=Martin Krulišgender=Mstudent=1tag=#a&Hx9%
29. 10. 2015
Submitting Forms Example
by Martin Kruliš (v1.1) 50
multipart/form-data-----------------------------88242493723271
Content-Disposition: form-data; name="fullname"
Martin Kruliš
-----------------------------88242493723271
Content-Disposition: form-data; name="gender"
M
-----------------------------88242493723271
Content-Disposition: form-data; name="student"
1
-----------------------------88242493723271
Content-Disposition: form-data; name="tag"
#a&Hx9%
-----------------------------88242493723271--
29. 10. 2015
Submitting Forms Example
by Martin Kruliš (v1.1) 51
Element <img>◦ Include image in the document contents◦ Attribute src – the URL of an image to be loaded◦ Attributes width and height - image size in pixels
It is a good practice to let the browser know the size before the image is loaded (or if it fails)
◦ Attribute alt – alternative textual representation Briefly describes, what the image shows Used, when the image loading fails
◦ Attribute title – same as in form controls
29. 10. 2015
Images
by Martin Kruliš (v1.1) 52
Additional Information about The Document ◦ Inside element <head>◦ <title> - document title or name
Identify document for users (browser window caption)◦ <base> - URL base for resolving relative addresses◦ <link> - links document to other resources
Cascading stylesheet files, for instance◦ <style> - embeds style information inside
document Contents is written in CSS stylesheet syntax
◦ <meta> - additional metadata and HTTP supplements Description, keywords, document author, …
29. 10. 2015
Document Metadata
by Martin Kruliš (v1.1) 5329. 10. 2015
Document Metadata
<html> <head> <title>Technologies for …</title> <base href="http://www.ksi.mff.cuni.cz/index.html">
<link rel="stylesheet" href="default.css"> <style type="text/css"> body { font-size: 12pt; } </style>
<meta name="keywords" content="html, example"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head></html>
In HTML5, this particular construction can be shorten to <meta charset="utf-8">
by Martin Kruliš (v1.1) 54
HTML5 Definition of Link◦ Link represents relationship of particular type
between current document and other web resource
◦ Syntactically defined by elements <link> and <a>◦ Two kinds of links (according to HTML5 spec.)
Links to external resources Augment/further specify current document
Hyperlinks Exposed to the user to navigate between resources
The kind depends on the element used and on the relationship type (attribute rel)
29. 10. 2015
More on Links
by Martin Kruliš (v1.1) 55
Link Specification◦ href attribute
URL of resource linked by relationship◦ rel attribute
Type of relationship◦ media attribute
Media linked resource applies to E.g., print, screen, all
◦ type attribute MIME type of linked resource text/html, application/xhtml+xml, text/css, application/pdf
29. 10. 2015
More on Links
by Martin Kruliš (v1.1) 5629. 10. 2015
More on LinksLink type link a Description
alternate H H Alternate representation of current document
author H H Author of document
icon ER - Icon representing current document
stylesheet ER - Stylesheet for current document
licence H H Copyright license covering current document
first H H First document of a series current document is part of
last H H Last document of a series current document is part of
next H H Next document in a series current document is part of
by Martin Kruliš (v1.1) 5729. 10. 2015
More on Links<html> <head> <title>NSWI142 – Materials</title> <link rel="stylesheet" href="default.css" type="text/css" media="screen"> <link rel="stylesheet" href="default-print.css" type="text/css" media="print"> <link rel="alternate" href="materials.pdf" type="application/pdf" media="print"> </head> <body> <footer>Author: <a href="http://www.ksi.mff.cuni.cz/~krulis" rel="author"> Martin Kruliš</a> </footer> </body></html>
by Martin Kruliš (v1.1) 58
Differences◦ No sense to go through particular differences in
this lecture◦ See http://www.w3.org/TR/html5-diff
29. 10. 2015
HTML Markup – 4.01 vs. 5
by Martin Kruliš (v1.1) 5929. 10. 2015
Discussion