Série N1 HTML

Série N°1 : HTML
 Ouvrir l'éditeur "Notepad++"
...........................................................................................................................
 Enregistrer le fichier sous le nom "TP1" puis réenregistrer le ficher sous le nom
"TP1.html", dans votre dossier de travail, sans fermer l'éditeur "Notepad++"
 Ouvrir les deux fichiers "TP1" et "TP1.html", que remarque vous?
.............................................................................................................................
......................................................................................................................................
..................................................................................................................................
...............................................................................................................................
...........................................................................................................................
 Dans le fichier "TP1.html" taper "F12", qu'est ce qui est ecrit dans l'onglet
"Inspecteur".
...............................................................................................................................................
...............................................................................................................................................
...............................................................................................................................................
......................................................................................................................................
 Revenir à l'éditeur "Notepad++" et le fichier "TP1.html" et écrire le code suivant:
<html>
<head></head>
<body> Lycée 9 avril 1938 </body>
</html>
 Enregistrer, puis taper "F5" dans le navigateur, Que remarquez vous?
..........................................................................................................................
 Ajouter le texte "<title> Mon premier site web </title> " entre <head>.....</head>
 Enregistrer, puis taper "F5" dans le navigateur, Que remarquez vous?

Retenons
1. HTML est l'abréviation de H...................T..............M.....................L....................
2. Le langage HTML est utilisé pour créer ..........................................
3. L'extension d'une page web est .............................
4. <HTML>,<Head>,<Title><Body>,...et autres...... sont des : .................................
5. L'ordre des............... est important? ..................................
6. Il existe des Balises :
 .................................: .......................................................................................... ...........

............................................................................................
 ................................:........................................................................................ .................
.............................................................................................
7. Le Texte entre les balises <Title>...</Title> s'affiche dans ..................................
8. Le signe <... indique que ...........................................
9. Le signe </... indique que ...........................................
10.Le tableau
Balise Rôle S'affiche dans

le doc HTML
<html>......
......................................................................... ...............
</html>
<Head>.........
.......................................................................... ...............
</head>
<Title> ......
.......................................................................... .................
</Title>
<Body>....
.......................................................................... ................
</body>
Série N°2 : HTML
 Ouvrir la page "TP1.html" avec l'éditeur "NotePad++" et le navigateur "Firefox"
 Ajouter la balise suivante au début de la page et avant <htmlt>, actualiser, que
remarquer vous: <! DOCTYPE html>
 Modifier le code comme suite:
<! DOCTYPE html>

<html>
<head>
<title> Mon premier site web </title>
<meta charset = "UTF-8">
</head>
<body> Lycée 9 avril 1938 </body>
</html>
 Actualiser la page avec la touche F5, que remarquer vous
............................................................................................................................
 Ajouter des commentaires dans chaque partie de la page, sachant que un commentaire
s'écrit de la forme suivante : <! -- commentaire -->,
 Actualise la page que remarquer vous
...............................................................................................................................................
................................................................................................................................
 Modifier la balise body comme suite: <Body bgcolor="red"> actualiser, que

remarquez vous
..............................................................................................................................
 Modifier la balise body comme suite: <Body background="Lycée .jpg"> actualiser,

que remarquez vous
...............................................................................................................................
 Ajouter Text="red" dans la balise <Body> actualiser, que remarquez vous?
........................................................................................................................
Retenon
1. Les commentaires servent
a ............................................................................... ..................................................
....................................................................
2. Est ce que la balise  affiche le texte dans la page web? ......................
3. Les balises peuvent avoir des ...........................................
4. Les ......................... s'écrivent dans les balises ou dans un fichier ................
5. Le tableau
Balise Rôle Balise/A

ttribut
<! DOCTYPE html> ....................................................................... ...............
<meta charset = "UTF-8"> ...................................................................... ...............
<! -- commentaire -->, ....................................................................... .................
bgcolor=".............." ..................................................................... ................
background="................"
Text=".............."
Remarque : dans les attribut de couleur on peut écrire la couleur avec trois façon:
 Par le nom de la couleur exp : "red", "blue", "pink",..........

 Par le code en hexadécimal exp: #FF5A28, #000000 correspond à la couleur
noire et #FFFFFF à la couleur blanche
 Par le code RGB exp : rgb(240,96,204)
Série N°3 : HTML

Question 1 Quel est le rôle du navigateur web ?
A. Ecrire du code en HTML et CSS
B. Traduire le code HTML et CSS en un résultat visuel
C. Se connecter au réseau Wifi
D. Fournir votre site web à vos visiteurs
Question 2 Lequel de ces éléments rencontre-t-on en premier dans un code

HTML ?
A. <html>
B. <head>
C. 
D. <!DOCTYPE html>
Question 3 Avec lequel de ces langages peut-on définir le fond du menu de

navigation d'un site en gris ?
A. HTML
B. CSS
C. JavaScript
D. PHP
Question 4 Le contenu de l'une de ces balises correspond au titre principal de

votre page. Il est très important pour les moteurs de recherche. Lequel ?
A. <title>
B. <meta>
C. <h1>
D. <h2>
Question 5 L'un de ces formats d'image est particulièrement adapté au

stockage des photos. Lequel ?
A. PNG
B. JPEG
C. GIF
D. BMP
Série N°4 : HTML
Ouvrir votre TP précédent et faire les rectification nécessaire dans l'ordre que je
vais vous indiquer pour avoir le code ci-dessous:
< ! DOCTYPE html>

<html>
<Head>............................</head>
<BODY BGCOLOR="blue" TEXT="white">
<header>
<center> <h1> Lycée 9 avril 1938 Tunis </h1> </center>
<HR>
<center> <h3> Mon premier site web <SUP>1</SUP> </h3> </center>
</herder>
<nav>
<UL>
<LI><a href = "jeu.py">Jeu</a>
<LI><a href="cours.pdf"><B>cours</B></a>
<LI><a href = "formulaire_inscri.html"><strong>Formulaire</strong></a>
</uL>
<oL>
<LI>><a href = "COURS_python.html"><em> Python </em> </a>
<LI>><a href = "COURS_html.html"> <I> HTML </I> </a>
<LI> ><a href = "COURS_CSS.html"> CSS </a>
</oL>
</nav>
<Section>
<article> .....trouvée sur internet des informations a propos du lycée.....</article>
<aside><img src="Lycée.gif"></aside>
</section>
<footer>
<p>contat : 71 ........</p><p>Directeur: ..............</P>
</footer>
</BODY>
 </html><centre>: ..................................................................................................
..............
 <sup>: ......................................................................................................................
 <hr>: ....................................................................................................................
 <ul>: ........................................................................................................................
 <LI>:......................................................................................................................
 <h1>, <h2> : ........................................................................................................
 <P>: ...........................................................................................................................
Les balises de Structures:
 <Herder>:.................................................................................
 <Nav>:....................................................................................
 <section>:..........................................................................
 <article>:..........................................................................
 <aside>:..................................................................................
 <Footer>:................................................................................
Header
Section
Nav Article
Aside
Acide
Aside
Section
Footer
Série N°5 : HTML/CSS
http://www.delprat.org/cours/index.htm
Compléter le code par les nouvelles modifications et déduire leurs rôle:
< ! DOCTYPE html>
<html>
<Head>..
<link href="style.css" rel="stylesheet"/>
</head>
<BODY > <header>......................................... </herder>
<nav> <UL>
<LI><a href = "jeu.py">Jeu</a>
<LI><a href="cours.pdf"><B>cours</B></a>
<LI><a href = "formulaire_inscri.html"><strong>Formulaire</strong></a>
</uL>
<oL>
<LI>><a href = "COURS_python.html"><em>Python</em>
<LI>><a href = "COURS_html.html"><I>HTML</I>
<LI> ><a href = "COURS_CSS.html">CSS
</oL> </nav>
<Section>
<article> .....trouvée sur internet des informations a propos du lycée.....</article>
<aside><img src="Lycée.jpg"></aside>
</section>
<section>
< article>.......presenter vous dans qlq lignes.......... </article>
<aside><img src="nomprenom.jpg"></aside>
</section> <footer>.....................................................</footer>
</BODY></html>
Dans le fichier "style.CSS" écrire le code qui suit:
body footer
{ background : url('stucco.jpg'); { background : url('Footer.jpg');
color: #3399CC;} color: #990099;}
section
{ background : url(' stucco.jpg');
color: #00CCFF;}

Série N1 HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Série N1 HTML

Transféré par

Droits d'auteur :

Formats disponibles

Série N°1 : HTML

 Ouvrir l'éditeur "Notepad++"

 Revenir à l'éditeur "Notepad++" et le fichier "TP1.html" et écrire le code suivant:

 Enregistrer, puis taper "F5" dans le navigateur, Que remarquez vous?

 Enregistrer, puis taper "F5" dans le navigateur, Que remarquez vous?

2. Le langage HTML est utilisé pour créer ..........................................

3. L'extension d'une page web est .............................

4. <HTML>,<Head>,<Title><Body>,...et autres...... sont des : .................................

5. L'ordre des............... est important? ..................................

6. Il existe des Balises :

 .................................: .......................................................................................... ...........

8. Le signe <... indique que ...........................................

9. Le signe </... indique que ...........................................

Balise Rôle S'affiche dans

<! DOCTYPE html>

 Modifier la balise body comme suite: <Body bgcolor="red"> actualiser, que

 Modifier la balise body comme suite: <Body background="Lycée .jpg"> actualiser,

 Ajouter Text="red" dans la balise <Body> actualiser, que remarquez vous?

3. Les balises peuvent avoir des ...........................................

4. Les ......................... s'écrivent dans les balises ou dans un fichier ................

Balise Rôle Balise/A

<! DOCTYPE html> ....................................................................... ...............

<meta charset = "UTF-8"> ...................................................................... ...............

<! -- commentaire -->, ....................................................................... .................

bgcolor=".............." ..................................................................... ................

 Par le nom de la couleur exp : "red", "blue", "pink",..........

Série N°3 : HTML

Question 2 Lequel de ces éléments rencontre-t-on en premier dans un code

Question 3 Avec lequel de ces langages peut-on définir le fond du menu de

Question 4 Le contenu de l'une de ces balises correspond au titre principal de

Question 5 L'un de ces formats d'image est particulièrement adapté au

< ! DOCTYPE html>

Vous aimerez peut-être aussi