25
Introduction dans la Programmation Web (X)HTML

IPW 2eme course - HTML

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: IPW 2eme course - HTML

Introduction dans la Programmation Web

(X)HTML

Page 2: IPW 2eme course - HTML

Plan du courseXHTML et HTML Structure d’un documentLes principales marquages du HTML

TitresParagraphesLinksTableauxFormulairesImages

Page 3: IPW 2eme course - HTML

HTMLHTML – HyperText Markup LanguageLangage de marquages – utilise des balises

pour decrire des pages webLa version du HTML utilise maintenant –

4.01 - http://www.w3.org/TR/html401/ - depuis 1999!!

HTML 5 – travail en progrèsXHTML - http://www.w3.org/TR/xhtml1/ -

mêmes marquages mais utilise des contraintes du XML

XML – extension markup language – langage générique pour structurer d’information dans des fichiers texte

Page 4: IPW 2eme course - HTML

Qu’est que c’est un tag htmlMots clef entre “<“ et “>”Il ya habituellement une balise de début et une

balise de finexemple:

<tag>…</tag>Balises vides

<tag />Attributs

Un attribut est une pair nom=“valeur” Il est dans une balise<tag attribut=“valeur”> … </tag>

Page 5: IPW 2eme course - HTML

Caractéristiques des tagsLes tags doivent être toujours ferme “/>”Tags doivent être écrites en bas de casseLes tags doivent être correctement

emboîtés <tag1><tag2></tag2></tag1><tag1><tag2></tag1></tag2>

Page 6: IPW 2eme course - HTML

HTML and XHTMLLe navigateur fonctionnes sur « meilleur

effort » quand il essaye a interpréter un fichier HTML

=> un des raisons les mêmes pages sont représentés dans un façon diffèrent sur navigateurs différents

Les navigateurs sont devenu grandes et plus lentes parce que ils doivent représenter tout sortes des documents

XHTML – une syntaxe plus stricte que HTML => plus facile a interpréter par les navigateurs

Page 7: IPW 2eme course - HTML

Structure d’un documentLa structure logique d’un document

Le titre du documentLes titres des sectionsLe contenu

Les paragraphesL’information qui est dans des tableauxLes listes des items (ordonnées ou non ordonnées)

Petit exemple du façon dans lequel nous pouvons structurer un document en utilisant Word

Page 8: IPW 2eme course - HTML

La structure d’un document XHTML<html>

<head><title>le titre du document</title>

</head><body><!-- le contenu du document --></body>

</html>

Page 9: IPW 2eme course - HTML

La section « head »Contient information sur le document<title> - le titre du document<link> - le lien vers un resource utilise par la

page (<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />)

<meta> - information supplémentaire sur la page – mots clef, type du contenu, description – utilise par des navigateurs et robots

<script> - des références aux fichiers javascript

Page 10: IPW 2eme course - HTML

Exemple section “head”<head> <title>W3Schools Online Web Tutorials</title> <link rel="shortcut icon" href="favicon.ico" type="image/x-

icon" /> <meta http-equiv="Content-Type" content="text/html;

charset=ISO-8859-1" /> <meta name="Keywords"

content="XML,tutorial,HTML,DHTML,CSS,XSL,XHTML,JavaScript,ASP,ADO,VBScript,DOM, " />

<meta name="Description" content="HTML XHTML CSS JavaScript XML XSL ASP SQL ADO VBScript Tutorials References Examples" />

<link rel="stylesheet" type="text/css" href="stdtheme.css" /> </head>

Page 11: IPW 2eme course - HTML

La section « body »Contient les tags qui sont affiches dans le

navigateurLa section « body » doit contenir

SEULEMENT du contenuL’information du style doit être mis en

documents extérieursNous allons voir les éléments du section «

body » et nous allons le tester par construire une page web simple

Page 12: IPW 2eme course - HTML

HeadingsLes titres des sectionsH1…H6Utilises par des moteurs de recherche

pour comprendre la structure des documents

Ne doit pas être utilise pour des raisons de style (pour faire le texte plus gros et plus haut)

<h1>titre du document</h1><h2> titre de la première section</h2>

<h3> titre de la première sous-section</h3>

Page 13: IPW 2eme course - HTML

Contenu et formatage<p>paragraphe</p><br/> - ligne nouveau<em> - texte souligne<strong> - strong text<small> - small text<sub> <sup>

Page 14: IPW 2eme course - HTML

ListesListes ordonnées <ol>Listes a puces– <ul>Eléments du chaque liste - <li>Exemple:

<ul><li>rouge</li><li>vert</li>

</ul>

Page 15: IPW 2eme course - HTML

Liens<a href=“url absolue ou relative”

target=“”>texte ou image</a>« target » représente ou le lien doit être

ouvertS’il manque – la même page“_blank” – nouvelle fenêtre

<a name=“le nom d’une ancre dans le même document> texte ou image </a>

<a href=“#nom d’une ancre”>text or image</a>

Page 16: IPW 2eme course - HTML

Images<img src=“url absolue ou relative”

alt=“texte alternative texte pour le cas ou l’image ne peut pas être affichée ou compris”/>

L’attribut “alt” est obligatoire XHTML! l’attribut « src » peut être un url complet:

http://host/path_to_file ou un chemin relative a la page curent.

Page 17: IPW 2eme course - HTML

TableauxLes tableaux doivent être utilise seulement

pour présenter d’information tabulaireIls ne doivent pas être utilise pour faire le

design de la page<table>

<tr> <!--table row) --><td > table cell</td>

</tr></table>

Page 18: IPW 2eme course - HTML

Tablescolspan

Il est utilisé pour avoir une cellule qui s'étend sur plusieurs colonnes

Attribut de l’element tdrowspan

utilisé pour avoir une durée de cellule sur plusieurs lignes

Attribut de l’element tdBorder

Si la table a une bordure ou nonAttributs de la table de l'élément

Page 19: IPW 2eme course - HTML

Tables example<table border="1">

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

</table>

<table border="1">

<tr>

<td colspan="2">&nbsp;</td>

<!-- only 3 cells because 1 spans on 2 columns-->

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td rowspan="2">&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<!-- only 3 cells because 1 above spans on 2 rows -->

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

</table>

Page 20: IPW 2eme course - HTML

Formulaires (form)Nécessaire pour collecter et envoyer data

vers le serveur <form action=“script du serveur qui va

utiliser le data” method=“la methode HTTP utilise – GET ou POST”>

Un formulaire contient plusieurs types de « input »

Page 21: IPW 2eme course - HTML

Form InputsText input <input type=“text” name=“” />Checkbox <input type=“checkbox”

name=“” value=“”/>Radio <input type=“radio” name=“”

value=“”/>Text area <textarea name=“”></textarea>Submit <input type=“submit”

value=“name on the button”/>

Page 22: IPW 2eme course - HTML

Form example<form method="post" action="script.php">

Username: <input type="text" name="username" /><br />

Password:<input type="password" name="password" /><br />

Country:

<select name="country">

<option value="eng">England</option>

<option value="fra">France</option>

<option value="rou" selected="selected">Romania</option>

</select> <br />

Address: <textarea name="address"></textarea><br />

Type of account:

<ul><li>Normal <input type="radio" name="account" value="normal" /></li>

<li>Special <input type="radio" name="account" value="special" /></li>

</ul>

Do you want to subscribe to our newsletter <input type="checkbox" name="subscription"/><br />

<input type="submit" value="Register" />

</form>

Page 23: IPW 2eme course - HTML

HTML Special CharactersCertains caractères spéciaux <,>,' ', &

doivent être représentés de manière différente en HTML

Il ne devrait y avoir une confusion entre le contenu de la page et la syntaxe

Les caractères spéciaux sont représentées comme: &code;

« code » est généralement une séquence de 3-4 lettres qui représente le caractère

Page 24: IPW 2eme course - HTML

HTML Special Characters& - &amp;‘ ‘ (space) - &nbsp;“ - &quot;< - &lt;> - &gt;

Others:http://www.w3scho

ols.com/tags/ref_entities.asp

http://www.w3schools.com/tags/ref_symbols.asp

Page 25: IPW 2eme course - HTML

ConclusionsDans ce course – seulement les tags les

plus importantes; vous allez découvrir plus dans votre travail

HTML doit être utilise pour présenter le contenu d’une page web