02 - HTML

HTML
Web development
SUPINFO International University http://www.supinfo.com
HTML
Objectives
At the end of this course you will be able to:
Use tools to work with HTML
Create a website with HTML

Validate your websites
Create forms with HTML
HTML
Course plan
Introduction Basic HTML tags What else about HTML? Validation Forms
HTML
INTRODUCTION
Introduction
Presentation
An HTML file have the extension .html
An HTML file is constructed by predefined tag
Well learn the tags step by step
Introduction
Presentation
Tags surrounded by < and >
<tag_name>
2 types of tags:
Pairs one:
<p></p>
Empty one:
<br />
Tags names are always lowercases in XHTML

Introduction
Block tags
Datas layout Displayed on vertical axe Used to structure the page with different "blocks" Examples: <p>, <h1>, <h2>, etc
Introduction
Inline tags
Formatting data Displayed by horizontal axe Must be surrounded by Block tags Examples: <span>, <em>, <strong>, etc
Introduction
Tools
A lot of tools are available ! To write HTML :
Source code editors :
Notepad++ TextMate
IDE :
Adobe Dreamweaver Aptana WebStorm
Introduction
Tools
A lot of tools are available ! To edit, debug, monitor HTML, CSS, and JS live in your browser:
On Firefox: Firebug extension Chrome and Opera have a built-in inspector
Questions ?
HTML
BASIC HTML TAGS

Basic HTML tags
Step by step
Were going to write a simple web page
A simple Resume
In order to discover some basic HTML tags Without CSS for now
At the end, youll design your own Resume !
Basic HTML tags
Step by step
Page Title Main Title
Links to anchors
Imag e Paragraph
Ordered list
Basic HTML tags
Step by step
Unordered list Secondary Title
Table
Hyperlink
Basic HTML tags
Step 1: Structure
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> </head> <body> </body> </html>
Basic HTML tags
Step 1: Structure
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Declares to the browser the Document Type Definition (DTD) to which the document conforms
Needed in XHTML!
A Document Type Declaration should be placed before the root element

We always choose the strict validation for this course
Basic HTML tags
Step 1: Structure
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > ... </html>
Block type tag Root of the document Contains <head> and <body> tags
Basic HTML tags
Step 1: Structure
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > ... </html>
Two required attributes:

xmlns xml:lang
In XHTML 1.1, we must precise the namspace used by the
document and his language (no conflict)
Basic HTML tags
Step 1: Structure
<head> ... </head>
Block type tag containing headers:

<title>
Page's title (for example, its the name of the window browser)
<style> and <link />

Include styles (CSS)
Basic HTML tags
Step 1: Structure
<head> ... </head>

<script>
Include JavaScript
<meta />
Help for referencing
Basic HTML tags
Step 1: Structure
<body> ... </body>

Contains all the element which describe the content of the document
Paragraphs Images Etc
Basic HTML tags
Step 2: Page title

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <title>My resume</title> </head> <body> </body> </html>
Basic HTML tags
Step 3: Titles
<hn>...</hn> Six tags defining titles:
<h1>This is heading 1</h1> <h3>This is heading 3</h3> <h5>This is heading 5</h5> <h2>This is heading 2</h2> <h4>This is heading 4</h4>
<h6>This is heading 6</h6>
Basic HTML tags
Step 3: Titles
... <body> <h1>Brice ARGENSON</h1> <h3>Programming Language</h3> <h3>Foreign Languages</h3> <h3>More about me ?</h3> </body> ...
Basic HTML tags
Step 4: Paragraphs
<p>...</p> Defines a paragraph Automatically adds a new line <br /> Used to break a line Empty tag
... <body> <p>First Paragraph</p> <p>Second <br/> Paragraph</p> </body> ...
<body> <h1>Brice ARGENSON</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt purus non enim semper tempor sed vitae erat. <br/>
Paragraphs
Donec eu velit non nunc hendrerit pulvinar. Sed commodo neque at nibh rhoncus ut tincidunt purus semper. </p> <h3>Programming Languages</h3> ...
<h3>More about me?</h3> <p> One solution : Googlize me ! </p> </body>

Basic HTML tags
Step 4: Paragraphs
Basic HTML tags
Step 5: Lists
<ol>...</ol> Defines an Ordered list Each element is defined by: <li></li>
<ol> <li>HTML</li> <li>Javascript</li> </ol>
Basic HTML tags
Step 5: Lists
<ul>...</ul> Defines an Unordered list Each element is defined by: <li></li>
<ul> <li>HTML</li> <li>Javascript</li> </ul>
Lists
... <body> <h1>Brice ARGENSON</h1> <ol> <li>Programming Languages</li> <li>Operating Systems</li> <li>Foreign Languages</li> </ol> ... <h3>Programming Languages</h3> <ul> <li>PHP</li> <li>Ruby</li> <li>JavaScript</li> </ul> </body> ...
Basic HTML tags
Step 5: Lists
Basic HTML tags
Step 6: Links and anchors

<a>...</a> Used to create:
A link to another resource
Three types:
Absolute links
<a href="http://web.com/Path/file.html">My link</a>
Basic HTML tags

Three types:
Relative links
<a href="file.html">My link</a>
Anchor links
Direct jump to a specific section of a document
<a href="file.html#myAnchor">My link</a>
Basic HTML tags

Two ways to create a named anchor:
Use the name attribute of <a> tag
But not supported in HTML 5
<a name="myAnchor">My text</a>
Use the id attribute available in any tag (preferred)

<a href="file.html#myAnchor">My link</a>
Links and anchors
... <h1>Brice <ol> <li><a <li><a <li><a </ol>

...
ARGENSON</h1> href="#Dev">Programming Languages</a></li> href="#OS">Operating Systems</a></li> href="#Foreign">Foreign Languages</a></li>
<h3 id="Dev">Programming Languages</h3> ...
<h3 id="OS">Operating Systems</h3> ...

<h3><a name="Foreign">Foreign Languages</a></h3> ...
...
Links and anchors
<h3>More about me?</h3>

<p> One solution: <a href="http://www.google.fr/#q=%22Brice+Argenson%2 2"> Googlize me! </a> </p> ...
Basic HTML tags
Basic HTML tags
Step 7: Pictures
Used to display a picture, empty tag Two attributes required:
src="url" alt="alternative text"
Title: tool tip

Basic HTML tags
Step 7: Pictures
Example:
<img src="picture.jpg" alt="A picture" title="My picture" />
RULES about attributes:

Must be written in the start tag Attribute names in lowercase in XHTML
...
<h1>Brice ARGENSON</h1>
Pictures
<img src="tux-brice.png" alt="A picture" title="My picture" />
<ol> <li><a href="#Dev">Programming Languages</a></li> <li><a href="#OS">Operating Systems</a></li> <li><a href="#Foreign">Foreign Languages</a></li> </ol>
...
Basic HTML tags
Step 7: Pictures
Basic HTML tags
Step 8: Tables
<table>...</table> Divided into rows (Table Rows): <tr>...</tr>
Each row may contains:

Headers (Table Header): <th>...</th> Datas (Table Data): <td>...</td>
Tags td and th makes cells!

Basic HTML tags
Step 8: Tables
<table>...</table> Usages:
Classification of data Display in tabular format
Bad usage:
Layout!
<table> <tr> <th>Line <th>Line </tr> <tr> <td>Line <td>Line </tr> <tr> <td>Line <td>Line </tr> </table>
1, Header 1</th> 1, Header 2</th>
Tables - Example
2, Cell 1</td> 2, Cell 2</td>
3, Cell 1</td> 3, Cell 2</td>
Basic HTML tags
Step 8: Tables
Merging cells Two attributes:
colspan: width in number of cells rowspan: height in number of cells
Of course you can use both colspan and rowspan on the same cell
<table> <tr> <th colspan="2">Header</th> </tr> <tr> <td>1</td> <td rowspan="2">Merging two lines</td> </tr> <tr> <td>2</td> </tr> <tr> <td colspan="2"> Fusionning two cells </td> </tr> </table>
Tables Merge example
...
<h3><a name="Foreign">Foreign Languages</a></h3>
<table> <tr> <th colspan="2" rowspan="2"></th> <th colspan="5">Level</th> </tr> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> </tr>
...
Tables
...
<tr> <th rowspan="3">English</th> <th>Read</th> <td></td><td></td><td></td><td></td><td>X</td> </tr> <tr> <th>Spoken</th> <td></td><td></td><td>X</td><td></td><td></td> </tr> <tr> <th>Written</th> <td></td><td></td><td></td><td>X</td><td></td> </tr> </table> ...
Tables
Basic HTML tags
Step 8: Tables
Basic HTML tags
Step 8: Tables
Why the table doesnt have border? You have to use CSS to declare table style Or use the border attribute of the table tag
Deprecated! But useful cause you dont know CSS yet
Basic HTML tags
Step 8: Tables
<h3><a name="Foreign">Foreign Languages</a></h3> <table border="1"> ... </table>
Questions ?
HTML
WHAT ELSE ?
What else ?
Comments
Invisible to Web browsers Utilities:
Projects resumption after a long time Projects resumption by an other web developer Team working
<!- This is a comment that can help you in the future -->
What else ?
Special characters
Characters entities for some special characters Main case:
& <HTML Code or # + unicode> ;
Example:
<p> Web'n'Dev © </p>
What else ?
Specials characters
Spaces are trimmed in HTML
Many spaces will be merged into one
<p> Web'n'Dev rocks</p>
You can use (Non Breakable SPace)

<p> Web'n'Dev rocks</p>
What else ?
Specials characters
Special case for the accents Rule: & + used letter + abbrevation + ;
Description Abbreviation
Grave accent
Acute accent Circumflex accent Cedilla Umlaut mark Tilde
grave
acute circ cedil uml tilde
What else ?
Specials characters
Examples:
Code
Display
è
é â ç ü &tilde;
What else ?
Other HTML tags

There are a lot of other tags in XHTML.
You can find a list of them here: http://www.w3schools.com/tags/default.asp
Questions ?
HTML
Exercices
Its your turn to work! Create your own Resume
With a complete civil status A picture representing you A quick description of yourself Your education All your competences Your professional experiences Your hobbies
HTML
VALIDATION
Validation
Definition
Validate Fact to confirm that requirements have been met.
Validation
Why validate?
Validate is essential for normalization:
Universal accessibility Portability Speed production Easily controls Documents durability Referencing
Validation
Validation types
There are three validation types:
Transitional Frameset Strict
Were going to see them in more details

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
Validation
Transitional
Use normalization smooth Accept some banned tags
<font/> <center/>
Inadvisable to use!
Validation
Frameset
Frames, though normalizations Accept some banned tags Use <iframe> tag <body> tag replaced by <frameset>
Validation
Strict
Coding properly! Dont accept style tags
<font/> <center />
Advised to use! We always use the strict validation!

Validation
Validate!
http://validator.w3.org/ Possibility to validate by:
URI, file upload, copy of source code
Limit:
Validation for only one page
Advice: if you have several errors, always correct the first one, and revalidate your document.
Validation
Validate!
http://www.validateur.ca/ Multi-pages validator Use the W3C validation service English and French version
Questions ?
HTML
Exercices
Try to validate some websites:
http://www.google.com http://www.supinfo.com http://www.w3.org
Validate your Resume webpage

Validation type must be Strict Correct your HTML code if needed
HTML
FORMS
Forms
Usages
Very important for dynamic web Allows user to insert datas Sending and receiving datas
Forms
Main structure
<form id="myForm" action="page.html" method="post"> <!- Form codes --> </form>
Attributes:
Action: page handling data Method: Submitting methods
Attribute name forbidden!
Forms
Submitting methods - GET

Data sent by the URL
<URI>?name1=value1&name2=value2
Security troubles Authorized number of characters depends on the browser (Some are limited to 255)
Forms
Submitting methods - POST

Data sent by the HTTP request body
Almost unlimited authorized number of characters Invisible to the user in his browser Still visible in the HTTP request message
Just a little more secure than GET
Forms
Input elements
The input tag:
Type text
Displays text fields Optionals attributes: size, maxlength,
<input type="text" name="firstname" value="textfield" />
Forms
Input elements
The input tag:
Type password
Characters entered by the user are replaced by *
<input type="password" name="pass" value="1234" />
Forms
Input elements
The input tag:
Type checkbox
Displays a checkbox to select or unselect Optional attribute: checked
<input type="checkbox" name="day" value="6" checked="checked" /> Saturday
Forms
Input elements
The input tag:
Type radio
User can choose between different options
<input type="radio" name="sex" value="m" /> Man <input type="radio" name="sex" value="f" checked="checked" /> Woman
Forms
Input elements
The input tag:
Type submit
Button Send forms datas
<input type="submit" value="Send contents" />
Forms
Input elements
The input tag:
Type reset
Button Reset all the controls values
<input type="reset" value="Reset values" />
Forms
Input elements
The input tag:
Type button
Button Doesnt implement specific functionnalities
<input type="button" value="No Action" />
Forms
Input elements
The input tag:
Type image
Displays an image Works as a submit input
<input type="image" src="go.png" alt="Go" />
Forms
Input elements
The input tag:
Type hidden
Hidden control Invisible to the user
<input type="hidden" name="hide" value="Invisible" />
Forms
Input elements
The input tag:
Type file
Files selection POST method and attribute enctype required in <form>
<form id="form1" method="post" enctype="multipart/form-data"> <input type="file" name="file_send" /> </form>
Forms
Other elements
The button tag:
Displays a specific button
HTML can be displayed inside
<button name="send" type="submit"> Envoyer <img src="accept.png" alt="wow" /> </button> <button name="delete" type="reset"> Effacer <img src="delete.png" alt="oops" /> </button>
Forms
Other elements
Menus:
Tags
<select></select> <optgroup></optgroup> <option></option>
Attributes
size multiple selected
Forms
Other elements
Menus:
<select name="FrenchDepartments"> <optgroup label="Alsace"> <option value="67">Bas-Rhin</option> <option value="68">Haut-Rhin</option> </optgroup> <optgroup label="Corse"> <option value="2B">Haute-Corse</option> <option value="2A">Corse-du-Sud</option> </optgroup> </select>
Forms
Other elements
Labels:
Tag <label></label> Used to identify controls Implicit version:
<label> <input type="radio" name="sex" value="h" /> Homme </label>
Forms
Other elements
Labels:
Tag <label></label> Used to identify controls Explicit version:
<input type="radio" name="sex" value="f" id="femme" /> <label for="femme">Femme</label>
Prefer to use the explicit way

Easier to manage CSS later
Forms
Other elements
Textarea:
Text field that may content many lines Attributes: cols, rows
<textarea cols="25" rows="10" name="comments"> Put your text here </textarea>
Forms
Other elements
Fieldset and legend:
Aggregate controls around a thematic
<fieldset> <legend>Informations</legend> <label for="last">Lastname:</label> <input type="text" name="last" /> <label for="first">Firstname :</label> <input type="text" name="first" /> </fieldset>
Forms
Specifics attributes
Type hidden
readonly (<input/>, <textarea/>) disabled (<button/>, <input/>, <optgroup/>, <option/>, <select/>, <textarea/>)
Forms
Specifics attributes
Accessibility attributes
tabindex (<a>,<input/>, <button>, <select/>,<textarea/>)
accesskey (<a>,<input/>, <button>, <label/>,<legend/>,<textarea/>)
Questions ?
Forms
Exercices
Create a new HTML page named contact.html and reproduce this form:
Add a hyperlink to this form in your Resume

HTML
INTRODUCTION TO HTML5
Semantic markups
Semantic
Most websites have some common uses of generic blocks:
<div id="header"> <div id="nav"> <div class="article"> <div id="sidebar">
<div class="section">
<div id="footer">
Semantic markups
Semantic
HTML5 introduces the following new markups:
<header> <nav> <article> <sidebar>
<section>
<footer>
<body> <header></header> <article> <section>  </section> <section>  </section> </article> <aside>  </aside> <footer></footer> </body>
Semantic Example
Semantic markups
Section
The section element represents a generic section of a document
A chapter for example
<section> <h1>Chapter 2 : Basic HTML tags</h1> <p> HTML markup consists of several key components, including elements [], character-based data types, character references and entity references
</p>
</section>
Semantic markups
Section
The section element is not a generic container element
Use div when an element is needed only for styling purposes or as a convenience for scripting Use article when it would make sense to syndicate the contents of the element
Semantic markups
Article
The article element represents a self-contained composition independently distributable or reusable
News Blog posts
<article id="comment-6"> <header> <h4>John Doe</h4> </header> <p>Very good course ;-)</p> </article>
Semantic markups
Nav
The nav element represents a section of navigation links
<nav> <h1>Navigation</h1> <ul> <li><a href="/">Home</a></li> <li><a href="/about.html">About</a></li> </ul> </nav>
Semantic markups
Header
The header element represents the header of a section
<header> <h1>Introduction to HTML5</h1> <p class="author-line">By Brice Argenson</p> </header>
Semantic markups
Footer
The footer element represents a footer for its nearest ancestor sectioning content
<footer> <p> 2012 SUPINFO International University</p> </footer>
Introduction to HTML 5
Aside
The aside element is for content that is tangentially related to the content around it
Useful for marking up sidebars
<aside> <h1>Archives</h1> <ul> <li><a href="/2012/01/">January 2012</a></li> <li><a href="/2012/02/">February 2012</a></li> </ul> </aside>
Media Markups
Audio & Video

There are more and more Audio and Video on the web Until now, you had to use non standardize technologies like Java Applets or Flash
Need specific plug-in
Media Markups
Audio
The audio new element represents a sound or audio stream
Content may be provided inside the audio element

User agents should show this content to the user only if they dont support the audio element
Media Markups
Audio
Example :
<audio src="http://images.wikia.com/starwars/images/3/38/UlicFal ls.ogg" controls> Your browser doesn't support the HTML5 audio element. </audio>
Media Markups
Video
The new video element is used for playing videos and audio files with captions
Again, content may be provided inside the video element

User agents should show this content to the user only if they dont support the video element
Media Markups
Video
Example :
<video src="myVideo.mp4" poster="movie.jpg" controls> Your browser doesn't support the HTML5 video element. </video>
Media Markups
Common attributes
audio and video have some common attributes
preload: to pre-download the media resource autoplay: to automatically begin playback of the media resource
Media Markups
Common attributes
audio and video have some common attributes
controls: to ask to the user agent to provide its own set of controls loop: to seek back to the start of the media resource upon reaching the end
Media Markups
Alternative sources
The source element allows to specify multiple alternative of sources to a media element
Allows the browser to choose the better source based on its media type or codec support
Media Markups
Alternative sources
Example:
<audio controls autoplay loop>
<source src="song.ogg" type="audio/ogg" />

<source src="song.mp3" type="audio/mpeg" />
Your browser doesn't support the HTML5 audio element.

</video>
Media Markups
Support for audio codecs

Browser Internet Explorer Firefox Google Chrome Apple Safari Opera Android iOS Blackberry Version 9.0+ 3.6+ 6.0+ 5.0+ 10.0+ 2.3+ 3.0+ 6.0+ Codec Support MP3, AAC Ogg Vorbis, WAV Ogg Vorbis, MP3, WAV (since Chrome 9)
MP3, AAC, WAV Ogg Vorbis, WAV MP3, AAC (device dependent) MP3, AAC MP3, AAC
Media Markups
Support for video codecs

Browser Internet Explorer Firefox Google Chrome Apple Safari Version 9.0+ 4.0+ 6.0+ 5.0+ MP4 WebM, Ogg MP4, WebM, Ogg MP4 WebM, Ogg MP4, WebM (since 4.0) MP4 Codec Support
Opera Android iOS
10.6+ 2.3+ 3.0+
Questions ?
Introduction to HTML 5
Exercices
Create a new HTML5 page
Try the two Audio and Video elements!
HTML
The end
Thanks for your attention

02 - HTML

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

02 - HTML

Enviado por

Direitos autorais:

Formatos disponíveis

HTML

SUPINFO International University http://www.supinfo.com

Create a website with HTML

Create forms with HTML

SUPINFO International University http://www.supinfo.com

SUPINFO International University http://www.supinfo.com

Tags names are always lowercases in XHTML

SUPINFO International University http://www.supinfo.com

SUPINFO International University http://www.supinfo.com

SUPINFO International University http://www.supinfo.com

BASIC HTML TAGS

Basic HTML tags

SUPINFO International University http://www.supinfo.com

Basic HTML tags

SUPINFO International University http://www.supinfo.com

Basic HTML tags

Basic HTML tags

SUPINFO International University http://www.supinfo.com

Basic HTML tags

A Document Type Declaration should be placed before the root element

Basic HTML tags

Basic HTML tags

Two required attributes:

document and his language (no conflict)

SUPINFO International University http://www.supinfo.com

Basic HTML tags

Block type tag containing headers:

<style> and <link />

SUPINFO International University http://www.supinfo.com

Basic HTML tags

Block type tag containing headers:

SUPINFO International University http://www.supinfo.com

Basic HTML tags

Block type tag containing headers:

SUPINFO International University http://www.supinfo.com

Basic HTML tags

Step 2: Page title

SUPINFO International University http://www.supinfo.com

Basic HTML tags

<h6>This is heading 6</h6>

SUPINFO International University http://www.supinfo.com

Basic HTML tags

SUPINFO International University http://www.supinfo.com

Basic HTML tags

... <body> <p>First Paragraph</p> <p>Second <br/> Paragraph</p> </body> ...

<h3>More about me?</h3> <p> One solution : Googlize me ! </p> </body>

Basic HTML tags

SUPINFO International University http://www.supinfo.com

Basic HTML tags

SUPINFO International University http://www.supinfo.com

Basic HTML tags

SUPINFO International University http://www.supinfo.com

SUPINFO International University http://www.supinfo.com

Basic HTML tags

SUPINFO International University http://www.supinfo.com

Basic HTML tags

Step 6: Links and anchors

SUPINFO International University http://www.supinfo.com

Basic HTML tags

Step 6: Links and anchors

SUPINFO International University http://www.supinfo.com

Basic HTML tags

Step 6: Links and anchors

You can use (Non Breakable SPace)