Hypertext Markup Language

Hypertext Markup Language
Martin Kruliš, Martin Nečaský by Martin Kruliš (v1.1)

What is HTML? HTML = Hypertext Markup Language Web Page
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 by Martin Kruliš (v1.1)

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=" markup.</p> </body> </html> Explain what is a semi-structured document and markup. Explain basic structure of HTML documents. Explain that there are links. Open the document in a browser. Explain that there are some default rules for displaying the document. Explain that the default rules can be redefined with CSS. Explain that we can do much more – JavaScript Explain that today HTML is more about building Web applications than simple documents like this one. by Martin Kruliš (v1.1)

HTML Syntax 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, … by Martin Kruliš (v1.1)

Document Object Model …
HTML Syntax body h1 p img Document src DOM Example Document Object Model … alt html DOM Tree Example <html> <body> <h1>DOM Example</h1> <p> Document Object Model is an API … </p> <img src="url" alt="text"> ... </body> </html> … by Martin Kruliš (v1.1)

HTML Syntax 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 > by Martin Kruliš (v1.1)

HTML Syntax Comments Entities Enclosed in 
Not displayed when page is rendered Entities &entity-name; Provide a way to encode special characters <, >, &, " - <, >, &, " - non-braking space Numerically represented characters ü - “ü” by Martin Kruliš (v1.1)

Evolution of HTML www.whatwg.org www.w3.org HTML 2.0 HTML 3.2 XML 1.0
1995 HTML 2.0 1997 HTML 3.2 XML 1.0 2000 2001 1999 HTML 4.01 XHTML 1.0 XHTML 1.1 Most things in this and future lectures are in common for 4.01 and 5. Even though HTML 5 is current standard, it is important to know also 4.01, since it is still in use. HTML 5 2014 XHTML 2 2010 by Martin Kruliš (v1.1)

Evolution of HTML WhatWG W3C http://whatwg.org/html
"Living Standard" (see Last Updated) W3C Formal standardization process Stages of W3C a document (draft, CR, R) by Martin Kruliš (v1.1)

Web of Documents 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 by Martin Kruliš (v1.1)

Web of Documents Web Page
Web Page Web Page Web Page Web Page Web Page Web Page Web Page Explain, how browsing and crawling of the cloud works. Web Page Web Page Web Page by Martin Kruliš (v1.1)

Hyperlinks Hyperlink Elements
Links to external resources, which are exposed to user of the current document as means to browse <a href=" 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=" by Martin Kruliš (v1.1)

HTML Body Markup in HTML(5) Body Text-level semantics elements
Denote parts of the text in a HTML document with a specific semantics Sectioning content Grouping content Tables, forms External sources (images) Hyperlinks … by Martin Kruliš (v1.1)

Text-Level Semantics Element Description em strong small s cite abbr
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 Note that the elements should specify semantics, not formatting (e.g., difference between strong and b). by Martin Kruliš (v1.1)

Sectioning Content 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 by Martin Kruliš (v1.1)

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> <div><a href="...">Home</a><a href="...">Contact</a></div> </article> <article>Another article</article> by Martin Kruliš (v1.1)

Headers and Footers 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. by Martin Kruliš (v1.1)

Sectioning Content <article> <header>
<h1>NSWI117 – Summary of technologies</h1> </header> <section> <h1>HTML</h1> <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)

Headings Heading Elements h1 – h6 Before HTML5 Headings in 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) by Martin Kruliš (v1.1)

Section Headings in HTML5
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 For more details about the outline algorithm, check out the following links by Martin Kruliš (v1.1)

Section Headings Example
<body> <h1>NSWI </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)

<body> <h1>NSWI </h1> <p>At this page, ...</p> <section> <h2>HTML</h2> <p>About HTML ...</p> <h3>HTML History</h3> </section> <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)

<body> <h1>NSWI </h1> <p>At this page, ...</p> <section> <h1>HTML</h1> <p>About HTML ...</p> <h1>HTML History</h1> </section> <h6>HTML Today</h6> <h1>CSS</h1> <p>About CSS ...</p> </body> Sections Structure NSWI142 - … HTML HTML History HTML Today CSS by Martin Kruliš (v1.1)

Section Headings in HTML5
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 by Martin Kruliš (v1.1)

This is not a complete list!
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 item This is not a complete list! by Martin Kruliš (v1.1)

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: HI HELLO GOOD MORNING Third item by Martin Kruliš (v1.1)

Tables Element Description 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 by Martin Kruliš (v1.1)

Table Example Name Email Address Joe White [email protected]
<thead> <tr> <th>Name</th><th> </th><th>Address</th> </tr> </thead> <tbody> <td>Joe White</td> <td>Lloyd Ave, Boston</td> <td>Bill Black</td> <td>---</td> </tbody> </table> Name Address Joe White Lloyd Ave, Boston Bill Black --- by Martin Kruliš (v1.1)

Irregular Tables 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 by Martin Kruliš (v1.1)

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> <td colspan="2">Children</td> <td>3</td> <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 34 Adult 2 32 Children 3 Child 1 4 1 Child 2 8 Child 3 12 by Martin Kruliš (v1.1)

Forms HTML Form Element <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 by Martin Kruliš (v1.1)

Forms Form Controls input textarea select button 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 by Martin Kruliš (v1.1)

Forms Example <form method="get"
action=" 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> !!! Get request must not change anything at server side (it must be nullipotent) !!! But this example is not completely wrong. The newcustomer.php may for instance show a confirmation form which repeats all the data and sends them again via POST request after the user confirms them (by clicking on the submit button) once more. Submit button works as a link to an assembled URL: ?name=John+Smith&phone= & time=5pm&comments=unleashed+dog+at+house by Martin Kruliš (v1.1)

Forms 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 by Martin Kruliš (v1.1)

Element input Example <form method="post" action=" <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>Product:<br> <input type="checkbox" name="product1" value="BMW">BMW<br> <input type="checkbox" name="product2" value="AUD">Audi<br> <input type="checkbox" name="product3" value="POR">Porsche<br> </form> by Martin Kruliš (v1.1)

Forms Element <input> Attribute type specifies type of the input
submit – submission button + attribute value contains displayed button value reset – reset button 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 by Martin Kruliš (v1.1)

Element input Example <form method="post" action=" <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)

Forms 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 by Martin Kruliš (v1.1)

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)

Forms 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 by Martin Kruliš (v1.1)

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)

Forms 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) by Martin Kruliš (v1.1)

Form Elements Example <form ... >
<p><label>Name: <input ... ></label></p> <fieldset> <legend>Contact information</legend> <p><label>Phone: <input ... ></label></p> <p><label> <input ... ></label></p> </fieldset> <legend>Timing</legend> <p> <label for="time">Preferred delivery time:</label> <input id="time" title="Time in hh:mm format." ... > </p> <p><label>Comments: <textarea></textarea></label></p> <button>Submit Order</button> </form> by Martin Kruliš (v1.1)

Forms in HTML5 Element <input> New HTML5 Types
search - search query field tel - phone number field url - absolute URL (e.g., page address) field - 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 by Martin Kruliš (v1.1)

Forms in HTML5 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 required attribute Field value is mandatory for form submission placeholder attribute Hint for the user to help with filling the field by Martin Kruliš (v1.1)

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)

Submitting Forms 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 application/x-www-form-urlencoded Default. Characters are encoded, so they can be safely send as a query part of an URL (spaces are converted to "+" symbols, and special characters are converted to ASCII HEX values, …). multipart/form-data No characters are encoded. This value is required when you are using forms that have a file upload control. text/plain Spaces are converted to "+" symbols, but no special characters are encoded. by Martin Kruliš (v1.1)

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)

application/x-www-form-urlencoded fullname=Martin+Kruli%C5%A1&gender=M&studen t=1&tag=%23a%26Hx9%25 text/plain fullname=Martin Kruliš gender=M student=1 tag=#a&Hx9% by Martin Kruliš (v1.1)

multipart/form-data Content-Disposition: form-data; name="fullname" Martin Kruliš Content-Disposition: form-data; name="gender" M Content-Disposition: form-data; name="student" 1 Content-Disposition: form-data; name="tag" #a&Hx9% by Martin Kruliš (v1.1)

Images 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 Please note that alt attribute is mandatory (even though many HTML coders fail to include it). by Martin Kruliš (v1.1)

Document Metadata 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, … by Martin Kruliš (v1.1)

Document Metadata <html> <head>
<title>Technologies for …</title> <base href=" <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> Explain applicability of http-equiv meta tags. In HTML5, the <meta http-equiv="content-type" content="text/html; charset=utf-8"> construction can be replaced by shorter <meta charset=“utf-8"> In HTML5, this particular construction can be shorten to <meta charset="utf-8"> by Martin Kruliš (v1.1)

More on Links 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) by Martin Kruliš (v1.1)

More on Links Link Specification href attribute rel 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 by Martin Kruliš (v1.1)

More on Links Link type link a Description alternate H
Alternate representation of current document author Author of document icon ER - Icon representing current document stylesheet Stylesheet for current document licence Copyright license covering current document first First document of a series current document is part of last Last document of a series current document is part of next Next document in a series current document is part of by Martin Kruliš (v1.1)

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=" rel="author"> Martin Kruliš</a> </footer> </body> </html> by Martin Kruliš (v1.1)

HTML Markup – 4.01 vs. 5 Differences
No sense to go through particular differences in this lecture See by Martin Kruliš (v1.1)

Discussion by Martin Kruliš (v1.1)

Hypertext Markup Language

Similar presentations

Presentation on theme: "Hypertext Markup Language"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Hypertext Markup Language

Similar presentations

Presentation on theme: "Hypertext Markup Language"— Presentation transcript:

Similar presentations

About project

Feedback