View
2.463
Download
1
Category
Preview:
DESCRIPTION
Citation preview
Introduction dans la Programmation Web
(X)HTML
Plan du courseXHTML et HTML Structure d’un documentLes principales marquages du HTML
TitresParagraphesLinksTableauxFormulairesImages
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
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>
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>
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
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
La structure d’un document XHTML<html>
<head><title>le titre du document</title>
</head><body><!-- le contenu du document --></body>
</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
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>
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
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>
Contenu et formatage<p>paragraphe</p><br/> - ligne nouveau<em> - texte souligne<strong> - strong text<small> - small text<sub> <sup>
ListesListes ordonnées <ol>Listes a puces– <ul>Eléments du chaque liste - <li>Exemple:
<ul><li>rouge</li><li>vert</li>
</ul>
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>
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.
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>
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
Tables example<table border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<table border="1">
<tr>
<td colspan="2"> </td>
<!-- only 3 cells because 1 spans on 2 columns-->
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<!-- only 3 cells because 1 above spans on 2 rows -->
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
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 »
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”/>
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>
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
HTML Special Characters& - &‘ ‘ (space) - “ - "< - <> - >
Others:http://www.w3scho
ols.com/tags/ref_entities.asp
http://www.w3schools.com/tags/ref_symbols.asp
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
Recommended