TP HTML W

khereddine nassoubi
TP Devlopment WEB
Exercice 1 :
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Text</title>
</head>
<body>
<h1 align=center>Internet: le réseau des réseaux </h1>
<p align="justify">
<b>Internet</b> et les réseau infomatique mondial qui rend
accessible au public des services comme le
<b>courrieur électronique </b> et le<b> word wide web</b>. ses
utilisateurs sont sont designes par le néologisme "internaute".
Techniquement ,internet se définit comme le réseau public mondial
utilisant le protocole
de communication IP (<b>I</b>nternet <b>P</b>rotocol).
</p>
<p align="left">
Internet ayant été populatrisé par l'apparition du world wide, les
deux sont parfois confondus par le public non averti. En réalité, le
web est une des applications d'internet, comme le sont courrier
éelectronique, la messagerie instantanée et les systèmes de partage
de fichiers poste à poste.
</p>
<p align="right">
<i>Source:wikipédia: l'encyclopédie libre </i>
</p>
</body>
khereddine nassoubi
</html>
Exercice 2 :
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Listes imbriquées</title>
</head>
<body>
<h1>Les Chapitres importants</h1>
<ol type="I">
<li>Programmation C
<ul>
<li> Concept de base</li>
<li>Entrées/soties</li>
<li>Tableaux</li>
</ul>
</li>
khereddine nassoubi
<li>Programme avancée C
<ul>
<li> Poiteurs</li>
<li>Liste</li>
<li>Arbres</li>
</ul>
</li>
<li>HTML
<ul>
<li> Documents structurés</li>
<li>Liens hypertextes</li>
<ol type="1">
<li> Liens internet</li>
<li> liens externes</li>
</ol>
<li>Tableaux</li>
</ul>
</li>
</ol>
</body>
</html>
khereddine nassoubi
Exercice 3 :
Page 1 : TATIN DE TOMATES CERISE
<html>
<head>
<title>TATIN DE TOMATES CERISE</title></head>
<body>
<h1> TATIN DE TOMATES CERISE </h1>
<div>
<h2>INGRÉDIENTS</h2>
<p>Nb de personnes : 6</p>
<p>
<ul>
<li> 1 pâte feuilletée (si possible allégée)</li>
<li>500 g de tomates cerise</li>
<li>6 c. à soupe de vinaigre balsamique</li>
khereddine nassoubi
<li>4 c. à soupe de sucre de canne complet </li>

<li>1 gousse d’ail </li>
<li>Quelques feuilles de basilic </li>
<li> Sel & poivre </li>
</ul>
</p>
</div>
<div>
<h2>PRÉPARATION </h2>
<p>
Préparation : 20 min Cuisson : 40 min </p>
<p>
<ol>
<li>Préchauffez le four à 200°C.</li>
<li>Pelez et pressez l’ail.</li>
<li>Lavez les tomates cerise. </li>
<li>Versez dans une poêle antiadhésive le sucre, le vinaigre, le miel et
l’ail.</li>
<li>Chauffez à feu vif jusqu’à obtenir un sirop. </li>
<li> Ajoutez les tomates cerise, baissez le feu et laissez confire 10
minutes, en remuant de temps en temps. </li>
<li> Tapissez un moule à tarte de papier de cuisson, et versez-y le
contenu de la poêle.</li>
<li> Salez et poivrez. </li>
<li>Déroulez la pâte par-dessus, et rentrez bien les bords à l’intérieur
du moule.</li>
<li>Enfournez. Baissez le four à 180°C et laissez cuire 30 minutes.</li>
<li>À la sortie du four, retournez la tarte sur une assiette. </li>
<li>Servez avec une belle salade, et consommez sans abuser !
</li></ol></p>
khereddine nassoubi
</div>
<a href='Thon.html'> Tarte au thon, tomates et fromage blanc </a>
</body>
</html>
Page 1 : THON
<html>
<head>
<title> TARTE AU THON TOMATES FROMAGE BLANC </title></head>
<body>
<h1> TARTE AU THON TOMATES FROMAGE BLANC </h1>
<div>
<h2>INGRÉDIENTS</h2>
<p>Nb de personnes : 6</p>

<p><ul>
<li>1 pâte brisée 200 g de thon naturel</li>
khereddine nassoubi
<li>5 tomates </li>

<li> 100 g fromage blanc </li>
<li>Moutarde thym </li>
<li>3 oeufs sel</li>
<li>poivre</li>
</ul></p>
</div>
<div>
<h2><p>PRÉPARATION</h2></p>
<p>Préparation 25 min Cuisson : 45 min </p>
<p><ol>
<li>Préchauffez votre four à th.6 (180°C).</li>
<li>Faites sortir la pâte brisée du frigo 20 min avant.</li>
<li>Emiettez le thon dans un grand récipient.
<li>Dans un récipient adapté, mélangez ces miettes de thon avec 1 c.
à soupe de moutarde.</li>
<li>Lavez les tomates, coupez-les afin de les épépiner puis coupez-les
en petits dés sur une planche de cuisine. </li>
<li>Faites chauffer une poêle et faites-y cuire les dés de tomates
pendant quelques min. </li>
<li>Ajoutez le thym.</li>
<li>Mettez le thon sur la pâte brisée, puis recouvrez-le de tomates et
thym poêlés.</li>
<li>Cassez les oeufs dans un bol et battez-les avec le sel, le poivre et
le fromage blanc.</li>
<li>Arrosez les tomates et le thon avec ce mélange d'oeufs battus.
Enfournez pendant 45 min.</li>
<li>Servez la tarte chaude ou froide dans un plat de service
accompagnée d'une salade verte.</li>
</ol></p>
khereddine nassoubi
</div>
<a href='Tatin.html'> Tatin de tomates cerises </a>
</body>
</html>
Exercice 4 :
<!Doctype HTML>
<html>
<head>
<meta charset="utf-8"/>
<title> Ma page </title>
</head>
<body>
<h1 align="center"> INTRODUCTION AU DEVELOPPEMENT WEB
</h1>
<h2 align="center"> Sommaire </h2>
<ol type="1">
<a href="#lien1">
<li> Terminologies</a>
khereddine nassoubi
<ul type="disc">
<li><a href="#A">Internet</li></a>
<li><a href="#B">Le Web ou World Wide Web
(WWW)</li></a>
<li><a href="#C">Hypertexte</li></a>
<li><a href="#D">Un navigateur Web</li></a>
<li><a href="#E">Site Web</li></a>
<li><a href="#F">Page Web</li></a>
<li><a href="#G">L'adresse Web</li></a>
</ul>
<a href="#lien2">
<li> Les étapes de construction d'un site Web</a>
<ol type="i">
<li><a href="#AA">La planification</li></a>
<li><a href="#BB">Le développement du
contenu</li></a>
<li><a href="#CC">La conception
graphique</li></a>
<li><a href="#DD">La programmation</li></a>
<li><a href="#EE">L’hébergement et le
référencement</li></a>
<li><a href="#FF">La maintenance</li></a>
</ol>
</ol>
<br>
<p id="lien1">1.Terminologies </p><hr width="80%">
<ul type="disc">
khereddine nassoubi
<li><p id="A"><strong>Internet</strong>: Un système de

communication qui permet aux ordinateurs autour du monde de
communiquer et de s'échanger des informations entre
eux.</li></p>
<li><p id="B"><strong>Le Web ou World Wide Web
(toile d’araignée mondiale) ou le WWW</strong> : est un système
hypertexte public fonctionnant sur Internet et qui permet de
consulter, avec un
navigateur, des pages mises en ligne dans des
sites.</li>
<li><p id="C"><strong>Hypertexte</strong> :
Ensemble de textes et d’autres documents qui peuvent être
consultés à partir d’un système d’envoi hiérarchisé.</li>
<li><p id="D"><strong>Un navigateur web (browser)</strong> : est
un logiciel destiné à la consultation des ressources du World Wide
Web. 3 Terminologies (suite)</li>
<li><p id="E"><strong>Site Web</strong> : un
ensemble de pages qui peuvent être consultées en suivant des
hyperliens à l'intérieur du site.</li>
<li><p id="F"><strong>Page Web</strong> : Elle
présente une partie d’un site Web. C’est un document électronique
écrit dans un langage informatique appelé HTML (Hypertext
Markup Language).</li>
<li><p id="G"><strong>L'adresse Web</strong>
d'un site correspond à l'URL (Uniform Resource Locator :
localisateur uniforme de ressource) d'une page web, utilisée pour
identifier les pages et les sites web.</li>
</ul>
<p id="lien2">2. Les étapes de construction d'un site
Web</p><hr width="80%">
khereddine nassoubi
<ol type="i">
<li><p id="AA">La planification</li></p>
<ul type="disc">
<li>La première page rencontrée : page
d'accueil. Elle présente le contenu du site.</li>
<li>Un site se compose d'une ou
plusieurs pages, ou de quelques pages longues.</li>
<li>Le haut de la page comprend la
bannière.</li>
</ul>
<li><p id="BB">Le développement du
contenu</li></p>
<ul type="disc">
<li>La page d'accueil doit attirer les visiteurs
sans les submerger d'informations.</li>
<li>Il faut veiller à une présentation
simple et à un texte court.</li>
<li>En plus, il faut ajouter des
illustrations pour transmettre l’image.</li>
<li>Pas de textes trop longs sur les
pages.</li>
<li>Il faut utiliser uniquement les
informations les plus indispensables.</li>
<li>Si on doit inclure des documents
longs, il faut les diviser en sections avec des titres.</li>
<li>Après, on crée un index ou une table
des matières en haut de la page, avec des liens à chaque
section.</li>
khereddine nassoubi
<li>Si on souhaite fournir un accès à de

nombreux documents, on doit ajouter une fonction de
recherche.</li>
<li>Il est préférable d’utiliser des
graphiques pour améliorer le site, mais on doit minimiser leur taille
autant que possible.</li>
</ul>
<li><p id="CC">La conception graphique</li></p>
<ul type="disc">
<li>On peut enrichir le site à travers quelques
bons graphiques placés sur la page d'accueil.</li>
<li>Les exigences relatives à :</li>
<ul style="list-style-type:'- '">
<li>la taille des fichiers,</li>
<li>au choix des couleurs
et</li>
<li>la résolution d'écran sont à
prendre en considération.</li>
</ul>
<li>La clé de la création de graphiques
appropriés est de maintenir une faible taille de fichier. De cette
façon, ils sont chargés rapidement.</li>
<li>Les graphiques Web sont dans l'un
des deux formats suivants :</li>
<li>JPEG (méthode de compression
développée par le Joint Photographic Experts Group, pour les
images photographiques ).</li>
khereddine nassoubi
<li>GIF (Graphics Interchange

Format, un système de compression développé par Compuserve
pour les graphiques ).</li>
</ul>
<li>Pour convertir les graphiques dans un
format Web, il faut utiliser un logiciel d'édition d'images pour créer
ou modifier les images.</li>
</ul>
<li><p id="DD">La programmation</li></p>
<ul type="disc">
<li>Une fois le contenu créé, on doit convertir
les informations dans une forme lisible sur le Web.</li>
<li>On peut convertir les fichiers textes
au format HTML et les graphiques au format GIF ou JPEG.</li>
<li>Après on doit chercher un endroit
pour héberger le site.</li>
</ul>
<li><p id="EE">L'hébergement et le
référencement</li></p>
<ul type="disc">
<li>Héberger les sites par un fournisseur de
services Internet ou par une société d'hébergement sur le Web.</li>
<li>On distingue deux principales
catégories d'hébergeurs :</li>
<li>les hébergeurs gratuits : Ils
prêtent gratuitement un espace disque sur un serveur.</li>
<li>les hébergeurs
professionnels : garantit un service de qualité et de sécurité.</li>
</ul>
khereddine nassoubi
<li>Le référencement est l'ensemble des

techniques qui permettent d'inscrire un site dans les moteurs de
recherche ou dans les annuaires.</li>
<li>Le référencement de sites web
s'articule par la mise en place des deux stratégies distinctes et
complémentaires : le référencement naturel et les liens
sponsorisés.</li>
<li>La première stratégie passe par une
phase d'indexation (prise en compte) du site par les outils de
recherche, puis une phase de positionnement (se positionner dans
les premiers résultats lors derecherches sur certains mots-clés).</li>
<li>La seconde stratégie s'apparente à de
la gestion de budgets de publicité.</li>
</ul>
<li><p id="FF">La maintenance</li></p>
<ul type="disc">
<li>Tout comme une maison, un site Web
nécessite un entretien régulier.</li>
<li>Il ne faut pas commettre l'erreur de
penser qu'une fois en ligne, c'est terminé.</li>
<li>On doit ajouter un nouveau contenu
et mettre à jour l'existant.</li>
</ul>
</ol>
</body>
</html>
khereddine nassoubi
khereddine nassoubi
Exercice 5 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Lexique d'Internet </title>
</head>
<body>
<h4 align="center"> PETIT LEXIQUE INTERNET </h4>

<p>Cliquer sur le mot dont vous voulez connaitre sa définition:</p>
<h4 align="center"><a href="#AA">DNS</a> - <a
href="#BB">FTP</a> - <a href="#CC">HTML</a> - <a
khereddine nassoubi
href="#DD">HTTP</a> - <a href="#EE">Internet</a> - <a

href="#FF">IP</a> - <a href="#GG">Lien ou Hyperlien</a></h4>
<hr width="80%">
<br/><br/>
<p id="AA"><strong>DNS</strong> (Domain Name Server): Système

situé sur un site Internet et permettant de traiter les réquêtes en
retrouvant les numéros IP à partir des URLs demandées.</p>
<br/><br/><hr width="80%">
<p id="BB"><strong>FTP</strong> (File Transfer Protocol):

Protocole de transfert de fichiers sur Internet entre un serveur FTP
et un logiciel client FTP.</p>
<p id="CC"><strong>HTML</strong> (HyperText Markup Language):

Langage de description des pages web.</p>
<p id="DD"><strong>HTTP</strong> (HyperText Transfer Protocol):

Protocole de transfert de données sur Internet entre un serveur
web et un navigateur dédié aux pages HTML. </p>
khereddine nassoubi
<p id="EE"><strong>Internet</strong> : voir la page "<a href="D:\

Info\Développement Web 1 et multimédia\INFO1.1
G1\TP2/Internet.html">Internet: le réseau des réseaux</a>"</p>
<br/><br/><br/><hr width="80%">
<p id="FF"><strong>IP</strong> (Internet Protocol): nom du

protocole de transfert de données entre deux réseaux distants qui a
donné son nom au réseau Internet.</p>
<br/><br/><br/><hr width="80%">
<p id="GG" align="top"><strong>Lien ou Hyperlien</strong> :

association d'une URL à une zone cliquable de l'écran.</p>
<a href="mailto:contact@formation-web.tn"><img src="D:\
Info\Développement Web 1 et multimédia/monimage.jpg"
alt="Photo de Montagne"/></a>
<pre>Contactez-nous
Source:<a
href="http://www.apiguide.net/08aide/lexique.htm">API
Guide</a></pre>
</table>
</body>
</html>
khereddine nassoubi

TP HTML W

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

TP HTML W

Uploaded by

Copyright:

Available Formats

khereddine nassoubi

<p>Nb de personnes : 6</p>

<li>4 c. à soupe de sucre de canne complet </li>

<p>Nb de personnes : 6</p>

<li>5 tomates </li>

<li><p id="A"><strong>Internet</strong>: Un système de

<li>Si on souhaite fournir un accès à de

<li>GIF (Graphics Interchange

<li>Le référencement est l'ensemble des

<h4 align="center"> PETIT LEXIQUE INTERNET </h4>

href="#DD">HTTP</a> - <a href="#EE">Internet</a> - <a

<p id="AA"><strong>DNS</strong> (Domain Name Server): Système

<p id="BB"><strong>FTP</strong> (File Transfer Protocol):

<p id="CC"><strong>HTML</strong> (HyperText Markup Language):

<p id="DD"><strong>HTTP</strong> (HyperText Transfer Protocol):

<p id="EE"><strong>Internet</strong> : voir la page "<a href="D:\

<p id="FF"><strong>IP</strong> (Internet Protocol): nom du

<p id="GG" align="top"><strong>Lien ou Hyperlien</strong> :

You might also like