1 / 55

NSWI142 – Web Applications

NSWI142 – Web Applications. Lecture 2 – HTML Martin Nečaský , Ph.D. necasky @ksi.mff.cuni.cz. What is HTML?. HTML = H yper t ext M arkup L anguage World Wide Web's markup language language for describing the structure of Web pages

lana
Download Presentation

NSWI142 – Web Applications

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  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 2

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

  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 2

  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 2

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

  7. Evolution of HTML HTML 2.0 1995 XML 1.0 HTML 3.2 1997 2001 2000 HTML 4.01 XHTML 1.0 XHTML 1.1 1999 HTML 5 XHTML 2 2014 2010 www.whatwg.org www.w3.org Web Applications (NSWI142 ), Lecture 2

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

  9. Web of Documents • Current World Wide Web is sometimes referred to as Web of Documents Web Applications (NSWI142 ), Lecture 2

  10. HTML Markup <!DOCTYPE html> <html lang="en"> <head> <!-- HTML head --> </head> <body> <!-- HTML body --> </body> </html> Web Applications (NSWI142 ), Lecture 2

  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 hrefspecifiesURL of linked resource • content is visible to user (may be text or any inline HTML element) • <a id="Paragraph2">…</a> • attributeid 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>

  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 2

  13. Text Level Semantics Web Applications (NSWI142 ), Lecture 2

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

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

  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 hNiff they are both from the same section and M= N • hgroupelement • 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 <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> • NSWI117 - … • HTML • HTML History • HTML Today • CSS

  20. 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> • NSWI117 - … • HTML • HTML History • HTML Today • CSS

  21. 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> • NSWI117 - … • HTML • HTML History • HTML Today • CSS

  22. Grouping Content

  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

  25. Sample Table <table> <thead> <tr> <th>Name</th><th>Email</th><th>Address</th> </tr> </thead> <tbody> <tr> <td>Joe White</td> <td>joe@white.abc</td> <td>Lloyd Ave, Boston</td> </tr> <tr> <td>Bill Black</td> <td>bill@black.def</td> <td>---</td> </tr> </tbody> </table> Web Applications (NSWI142 ), Lecture 2

  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 2

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

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

  31. Forms – element input • basic form input field • attribute namespecifies name which identifies the field • for script which processes data on server • attribute typespecifies 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:&nbsp; <input type="text" name="fullName" maxlength="5" /><br/> Password:&nbsp; <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>

  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 <form method="post" action="http://www.example.org/myform/send"> <p> Name:&nbsp; <input type="text" name="fullName" maxlength="5" /><br/> Password:&nbsp; <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>

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

  37. Forms – element select • list of options user selects from • element option • content – value shown to user • attributevalue – submitted value • attributeselected="selected" – default value • attributemultiple="multiple" • allows user to select more values • attributesize • 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>

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

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

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

  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"> ... </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

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