http://a3nm.net http://pierre.senellart.com Fabian M. Suchanek With some material from Antoine Amarilli HTML and Pierre Senellart
Introduction Page Structure  HTML tags Forms Multimedia Charsets Overview 2
blah blah ... 2. sends file 3. displays file Displaying Web pages Client Server 1. requests file 3
Disneyland declares its independence. [...] M. Mouse: "We have had enough of the health reform and stuff!" What the server sends What the client displays 4 Displaying Web pages ?
<h1> Disneyland declares its independence. </h1> [...] M. Mouse:  <em> We have had enough of the health reform and stuff! </em> What the server sends What the client displays 5 HTML markup
<h1> Disneyland declares its independence. </h1> HTML  (the Hypertext Markup Language) is a system of tags that structure a text document. • basically a text document  annotated  with tags    of the form  <tag> ... </tag> • standardized by the W3C (World Wide Web Consortium),    which unites industrial partners (Microsoft, Google, Apple,..)    and academic partners (INRIA, MIT, ...) • describes the  structure  of the document,    not its layout. The layout is described by another language (CSS).    (de facto: HTML tags determine a great part of the layout) • describes the static part of the Web page, not dynamic parts. 6 HTML important
• First attempt at a structured markup language:  SGML •  HTML  inspired from SGML, versions 1 to 4 • attempt to define a more general language:  XML •  XHTML : HTML that conforms with XML,    i.e. a stand-alone tag has to "self-close":  <br /> •  HTML 5 : Current standard, exists in an XML-compliant version   and a “normal” version   =>  HTML exists in numerous different versions!   =>  In general, browsers are very forgiving    and will try to display anything. Example <h1> Disneyland declares its independence. </h1> 7 History of HTML
• You cannot use arbitrary tags, but only the ones defined in HTML • Most tags  open  (as in  <h1> ) and  close  (as in  </h1> • Tags can be nested, as in this example:             <h1> Disneyland declares its  <em> independence </em> </h1>     • some tags are stand alone tags, as  <br>   These do not open or close, but stand on their own • whitespace does not matter • capitalization in tags does not matter:  <h1>  =  <H1> <h1> Disneyland declares its independence. </h1> 8 Basic principles of HTML
This is  <em> emphasized </em> He used  <strong> strong language </strong>   <strong> <em> This is  </string> a mess  </em>   White space       really    does not matter... Emphasizing (usually rendered in italic) Importance (usually rendered in bold) Non-conforming code (usually rendered unpredictably) • In theory, HTML describes the  structure  of the document    and leaves the layout to the client. • De facto,  <em>  is used as a synonym for italic 9 Examples of HTML
In reality, people write completely non-conforming HTML code <h1>Disneyland      <em>Legoland...</h1></em> • The Web browser company    does not want to bother the    Web user with error messages • The browser has to be    compatible with all historic    versions of HTML =>  Web browsers are    extremely fault tolerant Example 10 Theory and Reality
• Out of  idealism • Non-standard HTML might  appear differently  in   different browsers, or different future versions   of the browser • Non-standard HTML is possibly rendered badly in    non-vanilla devices , such as mobile phones,    audio readers, etc. • Non-standard HTML code is more  difficult to maintain ,   debug, and re-use The W3C offers an  HTML validator http://validator.w3.org/ 11 Why write good code? important
I hear and I forget.    I see and I remember.       I do and I understand. Confucius 12
> Blackboard, baby!
<h1> Disneyland declares Independence. </h1> M. Mouse marries Michele Obama. 14 Try it out Type something like this in a text editor Save it as  test.html Open it in a browser Change seats to distribute laptops (and previous expertise)
Introduction Page Structure  HTML tags Forms Multimedia Charsets Overview 15
An HTML document has a certain standard structure: <!DOCTYPE html> <html>   <head>     <meta charset="UTF-8">     <title>This appears in the window title</title>   </head>   <body>      <h1>Disneyland invaded by US</h1>       ...   </body> </html> “Doctype declaration” says we're doing HTML, + version “Head” contains general info “Body” contains content See example 16 Structure of an HTML document Modify your document in this way!
An HTML document has a tree structure — the  DOM tree . <!DOCTYPE html> <html>   <head>     <title>This appears...</title>   </head>   <body>      <h1>Disneyland...</h1>      <h1>Legoland...</h1>   </body> </html> Tree structure is shown by indentation 17 DOM Tree html head body title h1 h1 This appears... Disneyland Legoland important
<h1>Disneyland</h1> The US invades the newly founded country. <!‐‐ suckers!! I wanted to emigrate there ‐‐> Comments are enclosed in <!‐‐  ...  ‐‐> They are ignored by the browser, but serve documentation. Comments can also hide portions of the document: The US invades the newly founded country. <!‐‐   Get this prepared, just in case.  <em>But Goofy strikes back and wins the battle</em> ‐‐> 18 Comments
<div>   <h1>First Headline</h1>   <p>First paragraph</p>   <p>Second paragraph</p>   <div>     <h2>Sub-Headline</h2>     <p>First paragraph...  </p>   </div> </div>   <div>     <h1>Second Headline</h1> ... The standard  structure of the page body is <div> starts a section (usually with a blank line) <p> starts a paragraph (usually with a blank line) <h1>,... <h6> marks a headline <div> can contain <p> but not vice sersa. 19 Page body structure important
<div>   <h1>First Headline</h1>   <p>First paragraph   <p>Second paragraph </div> <div>   <h1>Second Headline</h2>   <p>First paragraph...  </div> Closing tags can be omitted in some situations <p> cannot contain <p> so omitting </p>  is safe <div> can contain <div> therefore we have to close it to avoid nesting In general, it is recommended to close all opening tags in order to avoid ambiguities. 20 Optional closing tags
Introduction Page Structure  HTML tags Forms Multimedia Charsets Overview 21
Paragraphs, headlines, and some other tags can only contain inline content . This is normal text    breaks<br> between lines   here is<sub>subscript</sub> <sup>superscript</sup>   <q>quotation</q>   <code>computer code</code> 22 Inline content ½
<strong>important (bold)</strong> <em>emphasized</em> <mark>marked (highlighted)</mark> <small>small</small> <b>bold</b> <s>incorrect (strike-through)</s> <u>stylistically different (underlined) <i>alternate (italic)</i> Paragraphs, headlines, and some other tags can only contain inline content . This is 23 Inline content 2/2
<a href="http://disneyland.gov">Government</a> What distinguishes a Web document from plain text are its links  to other pages. Links are inline content, too. Government Some tags can have  attributes . These take the form  attribute="value" The HTML specification says which tags can have which attributes. Clicking on the content will redirect the browser to the given URL. 24 Links important
Links can be  absolute  (i.e. given by a complete URL) or  relative  to the current document path. /quux .. bar2.html baz/toto.html #top http://example.com/quux http://example.com/foo http://example.com/foo/bar2.html http://example.com/foo/baz/toto.html http://example.com/foo/bar.html#top The purpose of the  #  fragment is to  scroll  to the position in the document. It is not actually sent to the server. 25 Link Resolution Let's consider the document  http://example.com/foo/bar.html Link Resolves to
<ul>   <li>First item</li>   <li>Second item</li> </ul>   <ol>   <li>First item</li>   <li>Second item</li> </ol>   <dl>   <dt>USA</dt>       <dd>United States</dd> </dl> There are 3 types of lists in HTML. Lists are not inline. 26 Lists U nordered  L ists with  L ist  I tems O rdered  L ists with  L ist  I tems with  D efinition  T erms D efinition  L ists and  D efinition er...  D efinitions
<table>   <tr>        <td> no </td>       <td> food </td>   </tr>   <tr>        <td> on this </td>        <td> table </td>   </tr> </table> 27 Start table Start first table row Tables First row, first cell End first table row Start second table row First row, second cell important
<table>   <caption>My Table</caption>   <tr>        <th> Column 1 </th>       <th> Column 2 </th>   </tr>   <tr>        <td> still </td>        <td> no food </td>   </tr> ... 28 Nicer Tables caption Column headers
<iframe src="http://en.wikipedia.org/wiki/Mickey_Mouse"> </iframe> frame  is a page within the page. • Can be annoying for the   user (e.g., if link is clicked   within frame) • Poses security problems • Renders unpredictably =>  avoid 29 Frames
<details> <summary>Please read this</summary> <p>Wow, you are reading it!</p> </details> 30 Fancy (new) stuff in HTML5 •click*
<meter value="2" min="0" max="10">2 out of 10</meter><br> <meter value="0.6">60%</meter> Downloading progress: <progress value="80" max="100"> </progress> 31 Fancy (new) stuff in HTML5
<nav><a...>Home</a></nav> <article> <header>   <h1>Headline</h1>   <p>Header information</p>  </header> <section>...</section>  <footer>   Posted by Daisy Duck.   <address>Disneyland</address>  </footer> </article> HTML5 defines several tags to give  semantic structure to a document. 32 Semantic Structure Group navigation links Delimit articles Delimit headlines Delimit sections Delimit footer Identify an address
Introduction Page Structure  HTML tags Forms Multimedia Charsets Overview 33
Order your Disneyland passport here: <form name="input" action="action.asp" method="get">   <fieldset>     <legend>Personalia:</legend>     Name: <input type="text" name="personName"><br>     Password: <input type="password" name="pwd"><br>   </fieldset>   <input type="submit" value="Submit"> </form> 34 Forms ask users for input
Order your Disneyland passport here: <form name="input" action="action.asp" method="get"> Which file to request from the server when "Submit" is clicked Name of this form (there can be several forms on a page) HTTP method GET or POST 35 Forms ask users for input
Order your Disneyland passport here: <form name="input" action="action.asp" method="get">   <fieldset>     <legend>Personalia:</legend>       </fieldset>   <input type="submit" value="Submit"> </form> Fieldset structures fields that belong together Legend explains fieldset submit button 36 Forms ask users for input
Order your Disneyland passport here: <form name="input" action="action.asp" method="get">   <fieldset>     <legend>Personalia:</legend>     Name: <input type="text" name="personName"><br>     Password: <input type="password" name="pwd"><br> Different types of fields behave differently A name identifies the field Try it out! Passwords are still transmitted in plain text to the server!! 37 Text and Passwords
Please tell us about your previous romantic relationships:<br> <textarea name="romantic" cols="40" rows="5"> Yes, just go ahead </textarea> Try it out! 38 Text areas
<fieldset>   <legend>Gender</legend>   <input type="radio" name="sex" value="male">Male<br>   <input type="radio" name="sex" value="female">Female<br>   <input type="radio" name="sex" value="other">Not sure   <input type="checkbox" name="sexchange" value="change">     Change planned </fieldset> Try it out! adding checked ="checked" will check the box 39 Radio Buttons and Check Boxes
<select name="age"> <option value="20">Less than 20</option> <option value="100">20 years - 100 years</option> <option value="1000">100 years - 1000 years</option> <option value="inf" selected="selected">Immortal</option> </select> Try it out! Adding  selected ="selected"  will select an option 40 Drop down lists
Upload picture: <input type="file" name="picture"> • The browser will display an upload button    and an upload dialog upon click • Because of the size of the file, the HTTP method  POST    should be chosen 41 Files
Favorite color: <input type="color" name="favcolor"> Birthday: <input type="date" name="bday"> Party: <input type="datetime" name="party"> Email: <input type="email" name="email"> Age: <input type="number" name="age" min="1" max="130"> Age: <input type="range" name="age2" min="1" max="130"> Telephone: <input type="tel" name="telephone"> Pick up time: <input type="time" name="pickuptime"> Homepage: <input type="url" name="homepage"> Inputs are checked syntactically by the browser. Mobiles show different keyboard. Try it out! 42 Validated input
The form can contain  hidden fileds These can serve to store information on the client side, which will be send back to the server upon form submission. <input type="hidden" name="userId" value="user132"> Attention: The client could modify these fields by hand, which could cause trouble on the server side! 43 Hidden fields
<form name="input" action="action.asp" method="get">   <fieldset>     <input type="text" name="FirstName">   </fieldset>   <input type="submit" value="Envoyer"> </form> submit  is the type of the submit button Text of the button can be configured here When the user clicks submit, the browser requests       action.asp?FirstName=Goofy by the HTTP method GET (whatever the user typed) 44 Submitting the form
<form action="monAction.html" method="get">    <fieldset>      <legend> Informations personelles </legend>     Votre prénom :  <input type="text" name="prenom">     Votre date de naissance :        <input type="date" name="dateDeNaissance">     ...    </fieldset>    <input type="submit" value="Envoyer"> </form> Forms: Summary 45 monAction.html?prenom=XYZ&dateDeNaissance=ABC generates GET request for important
Introduction Page Structure  HTML tags Forms Multimedia Charsets Overview 46
• HTML pages can contain multimedia elements    such as  music, videos, images • These elements are usually stored in a separate file    and  linked  from the HTML document <html>   This is princess Jasmine:<br>   <img src="jasmine.jpg"> </html> 47 Multimedia + index.html jasmine.jpg =
<img src="jasmine.jpg" alt="Princess Jasmine" > •  src  specifies the URL of the image file    (relative or absolute) •  alt  is the obligatory attribute to    replace the image    • in case the image is not found    • for blind people    • for text browsers    • for robots JPG image format SVG image format PNG image format 48 Images important
•  JPEG  is a lossy file format best suited for photos •  PNG  is a lossless file format best suited for pixel drawings   such as screen shots •  SVG  is a vector graphic, i.e., it consists of simple elements   and scales without pixelization Image Formats 49 important
<audio src="elvis.mp3" controls>   Your browser does not support audio, click   <a href="elvis.mp3">here</a> </audio> Optional attributes for  <audio> •  controls : Show play, pause, etc. •  autoplay : Start playing automatically (avoid this) •  loop : Repeat the sound in a loop 50 Audio
<audio>   <source src="elvis.mp3" type="audio/mpeg">   <source src="elvis.ogg" type="audio/ogg">   Your browser does not support this audio format. </audio> Audio formats: WAV : Without compression FLAC : Lossless compression MP3 : Most well-known, but has patents on it, bad quality Ogg Vorbis, Opus : Free alternatives to MP3 Speex : Compression optimized for voice HTML5 allows the browser to choose an audio format it supports. 51 Audio Formats
<video width="320" height="240" controls>   <source src="movie.mp4" type="video/mp4">   <source src="movie.ogg" type="video/ogg"> </video> Video formats: H.264 : Most common format, usually wrapped in MP4          Problems with patents. Ogg Theora : A free alternative, not very common WebM : Format proposed by Google Videos work similarly to audio: Try it out! 52 Video
• HTML describes the  structure  of a document   •  tags  take the form      <tag attribute="value" ...> ... </tag>   • HTML can contain  forms  and  multimedia Summary HTML 53