Approche graphique
- Nous allons faire une représentation sous forme graphique en bloc sémantique d'une page web
 |
| Exemple de page web |
 |
| Représentation graphique |
Voici un code HTML possible du contenu de la page :
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Surdorei</title>
</head>
<body>
<div id="header">
<h1>Groupe de Samba Surdo'Rei</h1>
<h3> Percussions brésiliennes - La Rochelle </h3>
</div>
<div id="colonne1">
<ul>
<h1>Accueil</h1>
<li>Présentation</li>
<li>Historique</li>
<li>Les musiciens</li>
<li>Intégrer le groupe</li>
<li>Lieu de répétition</li>
</ul>
<ul>
<h1>Spectacles</h1>
<li>Prochainement</li>
<li>Les spectacles</li>
<li>Liste complète</li>
</ul>
<ul>
<h1>Goodies</h1>
<li>Photos</li>
<li>Du son !</li>
<li>Vidéos</li>
</ul>
</div>
<div id="milieu de page">
<ul>
<h1>Spectacles</h1>
<h3>Nos prochaines presentations publiques</h3>
<li>la liste</li>
<li>Information complémentaires</li>
<table border="1">
<tr>
<td colspan="9">prestations données par Surdo'Rei</td>
</tr>
<tr>
<td>2000</td>
<td>2001</td>
<td>2002</td>
<td>2003</td>
<td>2004</td>
<td>2005</td>
<td>2006</td>
<td>2007</td>
<td>2008</td>
</tr>
<tr>
<td>10</td>
<td>15</td>
<td>18</td>
<td>22</td>
<td>26</td>
<td>33</td>
<td>45</td>
<td>52</td>
<td>999</td>
</tr>
</table>
<address>
<a href="prestas@surdorei.com">prestas@surdorei.com</a><br />
</address>
</ul>
</div>
<div id ="colonne2">
<ul>
<h1>Adresses</h1>
<li>Contacts</li>
<li>Espace membres</li>
<li>Méthode samba</li>
<li>Surdo'Rei au Brésil</li>
<li>Liens</li>
</ul>
<ul>
<h1>Festival Kilombo !</h1>
<li>Présentation</li>
<li>Programme 2008</li>
<li>Dossier de presse</li>
<li>Contacts Festival</li>
</ul>
<ul>
<h1>Encontr'oléron</h1>
<li>Acceuil</li>
<li>Souvenirs</li>
<li>Repertoire</li>
</ul>
</div>
<div id="footer">
- Webmaster -
</div>
</body>
</html>
Exercice de codage d'une page
 |
| Internet - Source wikipedia |
Voici le code html de la page :
<html>
<head>
<title> Internet - Source Wikipedia </title>
</head>
<body>
<p><h1>Introduction</h1></p>
<p>Internet est le réseau informatique mondial qui rend accessibles au public des services comme le courrier électronique et le World Wide Web. Ses utilisateurs sont désignés par le néologisme "internaute". Techniquement, Internet se définit comme le réseau public mondial utilisant le protocole de communication IP (Internet Protocol). Internet ayant été popularisé par l'apparition du World Wide Web, les deux sont parfois confondus par le public non averti. Le Web est une des applications d'Internet, comme le sont le courrier électronique, la messagerie instantanée et les systèmes de partage de fichiers poste à poste.</p>
<p>Par ailleurs, du point de vue de la confidentialité des communications, il importe de distinguer Internet des intranets, les réseaux au sein des entreprises, administrations, etc, et des extranets, interconnexions d'intranets pouvant emprunter Internet.</p>
<p>L'accès à Internet peut être réalisé auprès d'un Fournisseur d'accès via divers moyens de télécommunication : soit filaire (réseau téléphonique à bas débit ADSL ou xDSL, câble coaxial, fibre optique, courant électrique porteur CPL), soit sans fil (Wi-Fi, Wimax, Internet par satellite, 3G...).</p>
<p><h1>Sommaire</h1></p>
<p><ol><li>Terminologie</li>
<li>Historique</li>
<li>Gouvernance</li>
<ol><li>Au niveau régional (continents) </li></ol>
<li>Statistiques</li>
<li>Aspects juridiques</li>
<li>Technique</li>
<ol><li>Connexions grand-public</li>
<li>Protocoles</li>
</ol>
</ol>
</p>
<p><a href="http://fr.wikipedia.org/wiki/Internet">cliquer ici pour lire la suite</a> </p>
<table border="1">
<caption>Monthly savings</caption>
<tr>
<td><h4><div align="center">Internet</div></h4></td>
<td><h4><div align="center">Représentation</div></h4></td>
</tr>
<tr>
<td>Visualisation des multiples chemins à travers une portion d'Internet.</td>
<td><img src="http://upload.wikimedia.org/wikipedia/commons/d/d2/Internet_map_1024.jpg" width="170" height="150" border="0" /></td>
</tr>
<tr>
<td>Source Wikipedia</td>
<td>nom.prenom@internet.com</td>
</tr>
</table>
<p><h1>Citation</h1></p>
<p><blockquote>Se connecter à internet, c'est y rencontrer des centaines de gens avec qui vous n'auriez jamais eu envie d'avoir quelque rapport que ce soit.</blockquote>
<p><blockquote><em>Dave Barry</em></blockquote></p>
</body>
</html>
