HTML HTML/XHTML HyperText Mark-up Language Basic language for WWW documents Format a web page s look, position graphics and multimedia elements Describe document structure and formatting Platform independent: High-level language, No machine code HTML is rendered to a graphic format by the browser markup tags suggests the Web browser how to display the page 1 2 HTML / XHTML HTML: Loose syntax Few syntactic rules: not enforced by HTML processors Browsers are forgiving XHTML: (extensible HTML) Stricter syntax HTML tag/attribute: lowercase HTML 1995: HTML 2.0: simple 1997: HTML 3.2: Standardized by the World Wide Web Consortium (W3C) Proprietary tags 1999: HTML 4.01, A clean up of 4.0 3 variations: strict, transitional, frameset 2000: XHTML 1.0 (x: extensible) Reformation of HTML 4.01 using XML, strict syntax No new elements/attributes, difference: syntax 2001: XHTML 1.1: drop frames XHTML 2.0: idea: not backward compatible, abandoned HTML 5, 2008 3 4
HTML5: design principles HTML5: design principles Compatibility Backward compatible Utility Render correctly: id= myname, id=myname, ID= myname Interoperability Simplify syntax, e.g., DOCTYPE definition Precise specification: well-defined behaviors Aim: browser interoperability 5 Universal access Support users with disabilities Html5 work across all devices and platforms Reduce the need for external plug-ins More markup to replace scripting Device independent (PC, iphone, Android) 6 Basic Structure of HTML5 <!DOCTYPE html> <html> <!-- This is comment --> <head> <title> </head> <body> </body> </html> Specifies html version browser renders it properly This is title, describing the content </title> This is body, main part of the page HTML tree structure Indentation <!DOCTYPE html> <html> <head> <title> My title </title> </head> <body> <h1> My header </h1> <a href= > My link </a> </body> </html> 7 8
HTML Syntax HTML: consists of a tree of HTML elements Each element begins with a start tag, ends with an end tag An element can define attributes within its start tag HTML Information is generally enclosed inside paired tags Like <tag> information </tag> Example: Paragraph tag: <p> and </p> Tells browser this is a paragraph, and the presentation is left to the browser to determine Line break: <br /> Marks a line break within phrasing content Commonly used tags Less than 50 tags Practice!! 9 10 Common Tags XHTML: Extensible HyperText Markup Language Stricter and cleaner version of HTML Syntax Rules XHTML documents must be well-formed Must have basic structure <html> <head> <title> </title> </head> <body> </body> </html> Sub elements must be in pairs and correctly nested <b> It is <i> italic </b></i> Should be rewritten as <b> It is <i> italic </i> </b> 11 12
Syntax Rules All XHTML elements must be closed, in lower case <p> </p> <br /> <hr /> <img src= /> Remember the extra space before / Syntax Rules Attribute minimization is forbidden Wrong: <input checked>, <option selected> Correct <input checked= checked /> <option selected= selected > Tag names must be in lowercase Attribute values must be quoted Wrong <table WIDTH= 100% >, <table width=100%> Should be <table width= 100% > 13 14 Example - HTML HTML 5 15 16
Browser compatibility www.caniuse.com www.findmebyip.com 17 18 div Separate semantics (meaning and structure) from presentation (formatting) Div: used to identify different parts of a document for different formatting HTML: new elements to replace typical divs HTML 5 Forms 19 20
Syntax Syntax Fieldset: group related elements in a form (draws a box around those elements) Legend: create a text label within fieldset Basic structure <form id= myform > <fieldset> <legend> Caption for the fieldset </legend> <label for= fn > First Name </label> <input id= fn name= fn type= text /> </fieldset> </form> 21 The form tag attributes Action Specifies the server-side program or script that will process the form data <form action= http://www.../formprocess.php > Method Get post id (or name) Identifies the form 22 Input Input <input type= text id= firstname placeholder= input your first name /> Placeholder: Show when the user has not yet entered any values <input type= password id= pwd /> <input type= checkbox id= browser > <input type= radio name= browser > Same name: <input value= IE /> Internet Explorer <br /> <input value= FF /> Firefox <br /> 23 <select id= browser > <option value= IE > Internet Explorer </option> <option value= FF > Firefox </option> <select> <input type= submit value= Submit /> <input type= reset value= Clear /> <input type= button value= click /> No default action, associate with a JavaScript function 24
Email & URL <input type= email /> Validate user s input Changes from browser to browser Opera: needs to have @ only Firefox: (x)@(x).(x) Mobile device: on-screen keyboard <input type= url /> Numbers Traditional way: combo box Spinner control for numbers <input id="age" name="age" type="number" min="10" max="90" step="1" value="10" /> 25 Firefox Opera 26 Slider Firefox Auto complete system <label for="ano"> Choose a number </label> <input id="ano" name="ano" type="range" min="10" max="90" step="1" value="50" onchange="yno.value=this.value" /> <output name="yno"> 50 </output> <datalist>: choose from the predefined options or type sth else in the text box Opera 27 28
Mandatory fields Regular expressions Keyword: required <input type= text required /> <input type= email required placeholder= Insert your email /> Email must be entered before the form can be submitted Regular expressions: Specify a pattern for matching strings of text E.g., phone number: 8 digits: ^\d{8}$ <input type= text name= phoneno required pattern= ^\d{8}$ /> 29 30 Date and Time <input type= date /> <input type= time /> <input type= datetime /> <input type= month /> <input type= week /> 31