IPW 2eme course - HTML
-
Upload
vlad-posea -
Category
Technology
-
view
2.463 -
download
1
description
Transcript of IPW 2eme course - HTML
![Page 1: IPW 2eme course - HTML](https://reader038.fdocuments.fr/reader038/viewer/2022111806/5482dfc5b07959600c8b48dc/html5/thumbnails/1.jpg)
Introduction dans la Programmation Web
(X)HTML
![Page 2: IPW 2eme course - HTML](https://reader038.fdocuments.fr/reader038/viewer/2022111806/5482dfc5b07959600c8b48dc/html5/thumbnails/2.jpg)
Plan du courseXHTML et HTML Structure d’un documentLes principales marquages du HTML
TitresParagraphesLinksTableauxFormulairesImages
![Page 3: IPW 2eme course - HTML](https://reader038.fdocuments.fr/reader038/viewer/2022111806/5482dfc5b07959600c8b48dc/html5/thumbnails/3.jpg)
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](https://reader038.fdocuments.fr/reader038/viewer/2022111806/5482dfc5b07959600c8b48dc/html5/thumbnails/4.jpg)
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](https://reader038.fdocuments.fr/reader038/viewer/2022111806/5482dfc5b07959600c8b48dc/html5/thumbnails/5.jpg)
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](https://reader038.fdocuments.fr/reader038/viewer/2022111806/5482dfc5b07959600c8b48dc/html5/thumbnails/6.jpg)
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](https://reader038.fdocuments.fr/reader038/viewer/2022111806/5482dfc5b07959600c8b48dc/html5/thumbnails/7.jpg)
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](https://reader038.fdocuments.fr/reader038/viewer/2022111806/5482dfc5b07959600c8b48dc/html5/thumbnails/8.jpg)
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](https://reader038.fdocuments.fr/reader038/viewer/2022111806/5482dfc5b07959600c8b48dc/html5/thumbnails/9.jpg)
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](https://reader038.fdocuments.fr/reader038/viewer/2022111806/5482dfc5b07959600c8b48dc/html5/thumbnails/10.jpg)
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](https://reader038.fdocuments.fr/reader038/viewer/2022111806/5482dfc5b07959600c8b48dc/html5/thumbnails/11.jpg)
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](https://reader038.fdocuments.fr/reader038/viewer/2022111806/5482dfc5b07959600c8b48dc/html5/thumbnails/12.jpg)
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](https://reader038.fdocuments.fr/reader038/viewer/2022111806/5482dfc5b07959600c8b48dc/html5/thumbnails/13.jpg)
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](https://reader038.fdocuments.fr/reader038/viewer/2022111806/5482dfc5b07959600c8b48dc/html5/thumbnails/14.jpg)
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](https://reader038.fdocuments.fr/reader038/viewer/2022111806/5482dfc5b07959600c8b48dc/html5/thumbnails/15.jpg)
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](https://reader038.fdocuments.fr/reader038/viewer/2022111806/5482dfc5b07959600c8b48dc/html5/thumbnails/16.jpg)
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](https://reader038.fdocuments.fr/reader038/viewer/2022111806/5482dfc5b07959600c8b48dc/html5/thumbnails/17.jpg)
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](https://reader038.fdocuments.fr/reader038/viewer/2022111806/5482dfc5b07959600c8b48dc/html5/thumbnails/18.jpg)
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](https://reader038.fdocuments.fr/reader038/viewer/2022111806/5482dfc5b07959600c8b48dc/html5/thumbnails/19.jpg)
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>
![Page 20: IPW 2eme course - HTML](https://reader038.fdocuments.fr/reader038/viewer/2022111806/5482dfc5b07959600c8b48dc/html5/thumbnails/20.jpg)
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](https://reader038.fdocuments.fr/reader038/viewer/2022111806/5482dfc5b07959600c8b48dc/html5/thumbnails/21.jpg)
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](https://reader038.fdocuments.fr/reader038/viewer/2022111806/5482dfc5b07959600c8b48dc/html5/thumbnails/22.jpg)
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](https://reader038.fdocuments.fr/reader038/viewer/2022111806/5482dfc5b07959600c8b48dc/html5/thumbnails/23.jpg)
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](https://reader038.fdocuments.fr/reader038/viewer/2022111806/5482dfc5b07959600c8b48dc/html5/thumbnails/24.jpg)
HTML Special Characters& - &‘ ‘ (space) - “ - "< - <> - >
Others:http://www.w3scho
ols.com/tags/ref_entities.asp
http://www.w3schools.com/tags/ref_symbols.asp
![Page 25: IPW 2eme course - HTML](https://reader038.fdocuments.fr/reader038/viewer/2022111806/5482dfc5b07959600c8b48dc/html5/thumbnails/25.jpg)
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