nswi142 – web applications

Web Applications (NSWI142 ), Lecture 2 1

NSWI142 – Web Applications

Lecture 2 – HTMLMartin Nečaský, Ph.D.

[email protected]


What is HTML?

• HTML = Hypertext Markup Language• World Wide Web's markup language• language for describing the structure of Web

pages• Web page = semi-structured document with

structure denoted in a form of HTML markup


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>


HTML Syntax

• HTML document consists of a tree of elements and texts– Browsers represent the tree in Document Object

Model (DOM) which can be manipulated with JavaScript


HTML Syntax

• Elements have to be nested, they cannot overlap

• Element can have zero or more attributes– attribute consists of name and value– value is optional– value is optionally enclosed in single or double

quotes• quotes are mandatory when value contains one of " ' `

< >


HTML Code Analysis

• in a browser, on a concrete URL?


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

http://www.whatwg.org/

http://www.w3.org/


Evolution of HTML

• WhatWG– http://whatwg.org/html– "Living Standard" (see Last Updated)

• W3C– http://www.w3.org/TR/html5/– discuss standardization process• stages of a document (draft, CR, R)

• What is the relationship between WhatWG and W3C?

http://whatwg.org/html

http://whatwg.org/html

http://www.w3.org/TR/html5/


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

HTML Markup

<!DOCTYPE html><html lang="en"> <head>  </head> <body>  </body></html>

11

Hyperlinks links to resources which are exposed to user of current

document to navigate to those resources two forms

– <a href="http://www.google.com">Google</a>• attribute href specifies URL of linked resource• content is visible to user (may be text or any inline HTML element)

– <a id="Paragraph2">…</a>• attribute id specifies identifier which can be linked from other

places of the same document ...– <a href="#Paragraph2">…</a>

• ... or from other documents– <a href="http://www.google.com#Paragraph2">…</a>


HTML Body Markup (HTML5)

• text level semantics elements– enable to denote parts of the text in a HTML

document with a specific semantics• sectioning content• grouping content• tables, forms• images• hyperlinks• generic constructs


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

Sectioning Content• content of document is divided into sections• sections are divided to subsections• section element

– generic section• article element

– self-contained section– independently distributable and reusable – e.g. blog post or newspaper article

• aside element– denotes section related to content around and is considered separate around

that content– e.g. did-you-know aside box

• nav element– denotes section with navigation links

Sectioning Content<article> <p>This article summarizes technologies ...</p> <nav> <a href="...">HTML</a><a href="...">CSS</a> </nav> <section> <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><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>

Section Headers and Footers

• header element– distinguishes header of the nearest section

(hierarchically)– intended (but not required) to contain heading

(h1 – h6)• footer element– distinguishes footer of the nearest section

(hierarchically)

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>

Section Headings

• h1 – h6 element– heading of nearest section– number gives relative rank– hM has higher rank than hN if one of the following is true

• M < N and hM and hN are in the same section• hN is in subsection of section of hM

– hM has the same rank as hN iff they are both from the same section and M = N

• hgroup element– heading of nearest section– groups a set of h1 – h6 elements when heading has multiple

levels (e.g. heading with subheadings or alternative titles)

Section Headings<hgroup> <h1>NSWI117 - ...</h1> <h2>Summary ...</h2></hgroup><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>

1. NSWI117 - …1. HTML

1. HTML History2. HTML Today

2. CSS

Section Headings<body> <hgroup> <h1>NSWI117 - ...</h1> <h2>Summary ...</h2> </hgroup> <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>

1. NSWI117 - …1. HTML


2. CSS

Section Headings<body> <hgroup> <h1>NSWI117 - ...</h1> <h2>Summary ...</h2> </hgroup> <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>

1. NSWI117 - …1. HTML


2. CSS

22

Grouping ContentElement Description

p Represents a paragraph

pre Represents a block of preformatted text

div Element with no special meaning. It is just a block of text.

main Represents a block with a dominant content of another block.

ul Represents an unordered list

ol Represents an ordered list

li Represents a list item

23

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>

24

Tables

Element Description

table table

thead table head

tbody table body

tfoot table footer

tr table row

th table head

td table data (cell)


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


Grouping Table Cells

attribute colspan of element td groups actual and following cells on the same row

to a single cell specifies the number of grouped cells

attribute rowspan of element td groups actual and following cells on the same

column to a single cell specifies the number of grouped cells


Sample Grouped Table Cells<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>

Forms

• allows to get data from users• form is component of Web page composed of form

controls• user can interact with form controls by providing data

which can be sent to server for further server-side processing

• element form– attribute method

• value post – data in HTTP request body (non-visible for user)• value get – data in HTTP request URI (visible for user)

– attribute action – URI where data are sent by browser

Forms

• input, textarea and select elements– various types of controls for providing data by user

• button element– buttons

30

Sample Form

• http://www.example.org/myform/send?fullName=aaa&password=bbb&age=19&product=BMW&product=AUD&product=MER

<form method="get" action="http://www.example.org/myform/send">

<p>Name: <input /></p> <p>Phone: <input /></p> <p>Email: <input /></p> <p>Preferred delivery time: <input /></p> <p>Comments: <textarea></textarea></p> <button>Submit order</button>

</form>

http://www.example.org/myform/send?fullName=aaa&password=bbb&age=19&product=BMW&product=AUD&product=MER



Forms – element input• basic form input field• attribute name specifies name which identifies the field

– for script which processes data on server

• attribute type specifies kind of field– text – input is one line of text

• + attribute maxlength – maximal text length

– password – same as text but hidden input characters (do not use GET)– radio – exclusive choice (radio buttons) from set of fields with the

same name• + attribute value – value send to server when field is selected• + attribute checked="checked" – default choice

– checkbox – multiple choice, same logic as radio

32

Sample Form<form method="post" action="http://www.example.org/myform/send"> <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="MER">Mercedes<br/> </p> </form>

Forms – element input

• attribute type specifies kind of field– submit – submission button• + attribute value contains displayed button value

– reset – reset button• + attribute value contains displayed button value

– hidden – submitted value hidden to user– file – file submission

34

Sample Form<form method="post" action="http://www.example.org/myform/send"> <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>

Forms – element input

• field might be further specified• maxlength attribute– maximum number of characters allowed in field

• size attribute– number of characters visible in field

• value attribute– specifies default field value

• disabled attribute– specifies that field is disabled when form loads

Sample input<form> <input name="full_name" maxlength="32" size="16" value="Martin Nečaský" disabled="true" title="First name followed by family name." /> <button>Submit order</button></form>

Forms – element select

• list of options user selects from• element option– content – value shown to user– attribute value – submitted value– attribute selected="selected" – default value

• attribute multiple="multiple"– allows user to select more values

• attribute size– number of options displayed to user

38

Sample select<form method="post" action="http://www.example.org/myform/send"> <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>

Readable forms

• form may be made better readable• fieldset element

– Groups semantically related fields• legend element

– field-set label• label element

– field label• title attribute

– may serve as hint for input field– note: this is general attribute (may be used with any HTML

element)

Readable forms<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>Preferred delivery time: <input /></label></p> </fieldset> <p><label>Comments: <textarea></textarea></label></p> <button>Submit order</button></form>

<form> <input title="First name followed by family name." /> <button>Submit order</button></form>

Forms in HTML5

• new types in HTML 5– search (search field)– tel (phone field)– url (absolute URL field)– email (email field)– date, time, datetime (date/time field)– number (number field)– range (number field)– color (color field)

Forms in HTML5<form> <p>Search <input name="search_field" type="search" /></p> <p>Phone <input name="tel_field" type="tel" /></p> <p>URL <input name="url_field" type="url" /></p> <p>Email <input name="email_field" type="email" /></p> <p>Date <input name="date_field" type="date" /></p> <p>Time <input name="time_field" type="time" /></p> <p>Datetime <input name="datetime_field" type="datetime" /></p> <p>Number <input name="number_field" type="number" /></p> <p>Range <input name="range_field" type="range" /></p> <p>Color <input name="color_field" type="color" /></p> <button>Submit</button></form>

Forms in HTML5• field might be further specified• autocomplete attribute

– values on/off– allows to disable field value autocomplete

• autofocus attribute– gives field focus when page loads

• pattern attribute– regular pattern for field value validation

• placeholder attribute– hint for user to help with filling the field

• required attribute– field value is required

Forms in HTML5<form> <input name="phone" autocomplete="off" autofocus="autofocus" pattern="[0-9]{9}" placeholder="Fill in your 9-digit phone number." required="required" /> <button>Submit order</button></form>

Forms in HTML5

• … and even more (HTML 5)• min attribute– minimal value of numerical field

• max attribute– maximal value of numerical field

• step attribute– step for numerical field

• etc.

Submitting Forms

• when form is submitted data is converted by encoding algorithm and send to selected destination using given method (get/post)

• enctype attribute of element form– specifies encoding algorithm– application/x-www-form-urlencoded– multipart/form-data– text/plain

Submitting Forms<form enctype="application/x-www-form-urlencoded" action="http://www.pizzeria.it/order" method="get"> ...

</form>

48

Images

• element img• image in document• attribute src– image URL

• attributes width and height– image size in pixels– good practice

• attributes alt and title

Document Metadata

• data about document inside element head• title

– document title or name– should identify document for users even used out of context

• base– specifies document base URL for resolving relative URLs

• link– links document to other resources

• style– embeds style information inside document

• meta– other metadata

Document Structure<html> <head> <title>Technologies for …</title> <base href="http://www.ksi.mff.cuni.cz/index.html" /> <link rel="stylesheet" href="default.css" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head></html>

More on Links

• link represents relationship of particular type between current document and other web resource

• elements link and a• two kinds of links (according to HTML 5.0 specification)

– links to external resources• links to resources which augment/further specify current document

– hyperlinks• links to resources which are exposed to user of current document to

navigate to those resources

• kind depends on element used and relationship type

More on Links

• 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

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

More on Links<html> <head> <title>NSWI117 – 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/~necasky" rel="author"> Martin Nečaský</a> </footer> </body></html>


HTML Markup – 4.01 vs. 5

• no sense to go through particular differences in this lecture

• see http://www.w3.org/TR/html5-diff

http://www.w3.org/TR/html5-diff