1. NSWI142 – Web Applications Lecture 2 – HTML Martin Nečaský, Ph.D. necasky@ksi.mff.cuni.cz Web Applications (NSWI142 ), Lecture 21

2. 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 Web Applications (NSWI142 ), Lecture 22

3. What is HTML? Web Applications (NSWI142 ), Lecture 23 Simple web page Simple web page This is a web page with HTML5 markup.

4. 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 Web Applications (NSWI142 ), Lecture 24

5. 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 " ' ` Web Applications (NSWI142 ), Lecture 25

6. HTML Code Analysis in a browser, on a concrete URL? Web Applications (NSWI142 ), Lecture 26

7. Evolution of HTML Web Applications (NSWI142 ), Lecture 27 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

8. Evolution of HTML WhatWG – http://whatwg.org/html http://whatwg.org/html – "Living Standard" (see Last Updated) W3C – http://www.w3.org/TR/html5/ http://www.w3.org/TR/html5/ – discuss standardization process stages of a document (draft, CR, R) What is the relationship between WhatWG and W3C? Web Applications (NSWI142 ), Lecture 28

9. Web of Documents Current World Wide Web is sometimes referred to as Web of Documents Web Applications (NSWI142 ), Lecture 29 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

10. HTML Markup Web Applications (NSWI142 ), Lecture 210

11. Hyperlinks  links to resources which are exposed to user of current document to navigate to those resources  two forms – Google attribute href specifies URL of linked resource content is visible to user (may be text or any inline HTML element) – … attribute id specifies identifier which can be linked from other places of the same document... – …... or from other documents – … 11

12. 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 Web Applications (NSWI142 ), Lecture 212

13. Text Level Semantics Web Applications (NSWI142 ), Lecture 213 ElementDescription 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

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

15. Sectioning Content This article summarizes technologies... HTML CSS We will start with HTML. First, we will go to history. Then, we will deal with actual 5.0. Did you know that SGML is a predecessor of HTML? CSS is the second technology. Home Contact Another article

16. 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)

17. Sectioning Content NSWI117 – Summary of technologies HTML We will start with HTML. Home Contact

18. 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)

19. Section Headings NSWI117 -... Summary... At this page,... HTML About HTML... HTML History HTML Today CSS About CSS... 1.NSWI117 - … 1.HTML 1.HTML History 2.HTML Today 2.CSS

20. Section Headings NSWI117 -... Summary... At this page,... HTML About HTML... HTML History HTML Today CSS About CSS... 1.NSWI117 - … 1.HTML 1.HTML History 2.HTML Today 2.CSS

21. Section Headings NSWI117 -... Summary... At this page,... HTML About HTML... HTML History HTML Today CSS About CSS... 1.NSWI117 - … 1.HTML 1.HTML History 2.HTML Today 2.CSS

22. Grouping Content 22 ElementDescription 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 First item Second item: HI HELLO GOOD MORNING Third item 23

24. Tables 24 ElementDescription table thead table head tbody table body tfoot table footer tr table row th table head td table data (cell)

25. Sample Table Web Applications (NSWI142 ), Lecture 225 Name Email Address Joe White joe@white.abc Lloyd Ave, Boston Bill Black bill@black.def ---

26. 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 Web Applications (NSWI142 ), Lecture 226

27. Sample Grouped Table Cells Web Applications (NSWI142 ), Lecture 227 Adults 2 Adult 1 34 2 Adult 2 32 Children 3 Child 1 4 1 Child 2 8 2 Child 3 12

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

29. 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?fullNa me=aaa&password=bbb&age=19&product=B MW&product=AUD&product=MER http://www.example.org/myform/send?fullNa me=aaa&password=bbb&age=19&product=B MW&product=AUD&product=MER 30 Name: Phone: Email: Preferred delivery time: Comments: Submit order

31. 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 32 Name: Password: Age: 0-18 : 19-65 : 66-* : Product: BMW Audi Mercedes

33. 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 Name: Password: 34

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

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

37. 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 Product: BMW Audi Mercedes Skoda Chevrolet Toyota Ford 38

39. 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)

40. Readable forms Name: Contact information Phone: Email: Timing Preferred delivery time: Comments: Submit order Submit order

41. 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)

42. Forms in HTML5 Search Phone URL Email Date Time Datetime Number Range Color Submit

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

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

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

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

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

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 48

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

50. Document Structure Technologies for … <meta http-equiv="content-type" content="text/html; charset=utf-8" />

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

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

53. More on Links Link typelinkaDescription alternate HHAlternate representation of current document author HHAuthor of document icon ER-Icon representing current document stylesheet ER-Stylesheet for current document licence HHCopyright license covering current document first HHFirst document of a series current document is part of last HHLast document of a series current document is part of next HHNext document in a series current document is part of

54. More on Links NSWI117 – Materials <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" /> Author: <a href="http://www.ksi.mff.cuni.cz/~necasky" rel="author"> Martin Nečaský

55. HTML Markup – 4.01 vs. 5 no sense to go through particular differences in this lecture see http://www.w3.org/TR/html5-diffhttp://www.w3.org/TR/html5-diff Web Applications (NSWI142 ), Lecture 255