L.
S MANZEL COMMUNICATION ET TECHNOLOGIE INTERNET PROF :
ENNOUR Création de site web (TP N°2) FREDJ IMED
Activité N°1 :
1. Ouvrir le fichier [Link]
2. Afficher le code source de la page (bouton droite afficher le code source de la page)
3. On remarque que le contenue de la page web est décrit par un code utilisant un
langage bien déterminé : c'est le langage ……………………
HTML
c'est quoi le langage HTML ?
Hyper Text Markup Language (HTML) est un langage à balise pour la création de site web.
il existe différents version de langage HTML, on utilisera la version la plus récente HTML5
c'est quoi une balise ?
Une balise HTML est un élément de base du système de codage HTML.
Il existe deux types de balises :
Balise paire : <balise> … </balise> Une balise
exemples : orpheline ne peut
<boday>
………………….. <HTML>
………………….. pas emboiter un
</boday>
………………….. </HTML>
…………………. contenu !
Balise orpheline : <balise/>
Cette balise n'a pas besoin de balise de fermeture.
Exemples :
<br/>
……………
<hr/>
……………
<img src="[Link]" alt="Photo d'Espagne" /> Élément img
…………………………
attribut src
……………………….. attribut alt
……………………
Activité N°2 :
Citer les différentes balises de la page [Link] et essayez de comprendre leurs
rô[Link] dédure la structure global d'une page HTML5.
Balise Rôle
Le Doctype s’insère en tout début de page. Il sert à définir le type
du document afin qu’il soit correctement interprété par le
navigateur. Vous pouvez placez sa balise à la première ligne de
<!DOCTYPE votre code HTML si vous le souhaitez. Le Doctype doit toujours se
situer avant la balise <HTML>.
html>
Cette déclaration n’est pas une balise HTML5 comme les autres, c’est
une instruction pour le navigateur à propos de la version de HTML de
votre document.
<!-- En-tête de la Un commentaire dans la page html
page-->
La balise <html> représente la racine d’un document
<html> et </html> [Link] englobe toutes les autres balises.
<hea La balise <head> contient tous les éléments de l’en-tête de votre document.
L’en-tête de votre document, compris entre les balises <head>, doit
d> et obligatoirement contenir un titre. Il peut également contenir des scripts,
</head> des styles, des balises meta et bien plus encore …
Les éléments suivants peuvent être inclus entre les balises <head> :
<title>:> définit le titre du document (qui est affiché dans la barre de
1
titre du navigateur ou dans l'onglet de la page).
<style>:le style css3 de la page
<base>: une balise orpheline qui définit l'URL de
base à utiliser pour recomposer toutes les URL relatives contenues
dans un document. Il ne peut y avoir qu'un seul élément <base> au
sein d'un document.
<link>: L'élément HTML <link> définit la
Relation entre le document courant et une ressource externe. Cet
élément peut être utilisé pour définir un lien vers une feuille de
style, vers les icônes utilisées en barre de titre ou comme icône
d'application sur les appareils mobiles.
<meta> : des balises orphelines fournissant des informations
Supplémentaires sur la page web (exemples : l'auteur de la page,
sujet de la page, les mots clés de la page, e-mail de l'admin,
indiquer au robot de revenir, indiquer le copyright, spécifier
des règles aux robots des moteurs de recherche…
o quelque balises meta :
<meta charset="utf-8" />
Spécifie l'encodage des
caractères pour la page HTML
<meta name="keywords" content="HTM
Définie les mots clés du document
L, CSS, JavaScript"> exploité par les moteurs de
<meta name="description" content=" recherches
Free Web tutorials for HTML and Fournie une description bref de
votre page web
CSS">
Donne l'information sur l'auteur
<meta name="author" content="John du document.
Doe"> Adapter l'affichage pour tout type
<meta name="viewport" content="width d'afficheur.
=device-width, initial-scale=1.0">
<script> :introduit un script dans la page
en javascript par exemple
<noscript>:contenue à afficher en cas
de blocage des scripts !
Le contenue visible de la page.
<p> … </p> Crée un nouveau paragraphe
………………………………………………………………………………………………………………………………………..
<br/> Retour à la ligne
………………………………………………………………………………………………………………………………………..
<body Titre important
<h1> … </h1> ………………………………………………………………………………………………………………………………………..
> et
</body> <h2> … </h2> Titre moins important
………………………………………………………………………………………………………………………………………..
<h3> … </h3> Titre encore moins important
………………………………………………………………………………………………………………………………………..
<h4> … </h4> Titre encore moins important !
………………………………………………………………………………………………………………………………………..
Activité N°3 :
Ajouter le code suivant dans votre page :<img src="[Link]" alt="html5"/>
et enregistrer le fichier sous le nom [Link]
Interprétation :
C'est quoi ? : ……………………………………………………………………………………
Une balise orpheline d'insertion d'image
Emplacement : ……………………………………………………………………………………
Dans la partie <body> … </body>
Attribut qui définit la source ("emplacement + nom du fichier")
2
src : ……………………………………………………………………………………
alt : …………………………………………………………………………………….
Attribut qui définit le texte à afficher si l'image ne s'affiche pas
Activité N°4 :
Ouvrer le fichier [Link]
Que remarquer vous ? ………………………………………………………………………………………
La page possède une meilleur présentation et mise en forme
Afficher le code source de cette page.
Que remarquer vous ? ………………………………………………………………………………………
La page possède encore le même code
Un lien vers une autre page est ajouté dans l'entête de la page :
CSS
C'est un fichier de type : ………………………………………………………………………………………
C'est quoi ? le langage css ?
C'est un fichier de mise en forme d'une page web appelé ………………………………………………………
Cascading Style Sheets
La version qu'on va utiliser est : …………………………………………
CSS3
Activité N°5 :
1) Citer les trois emplacements possibles d'un code CSS
………………………………………………………………………………………………….
Dans un fichier css relier avec le fichier html avec la balise link
………………………………………………………………………………………………….
Dans la balise <style> inclus dans la tête du document HTML
………………………………………………………………………………………………….
Directement dans les balises du fichier HTML via un attribut style (méthode la moins
recommandée).
2) Déplacer le code css vers le fichier [Link] et l'enregistrer sous le nom [Link]
1) Coller le code css dans la balise <style> de la tête du document
………………………………………………………………………………………………………………………………………
2) Supprimer la balise <link> du <head>
………………………………………………………………………………………………………………………………………
3) Mettre la couleur du paragraphe 1 en rouge et enregistrer le fichier sous le nom [Link]
………………………………………………………………………………………………………………………………………
Ajouter l'attribue style dans la balise <p> du paragraphe ( style="color:rgb(128, 52, 8);😉
Activité N°6 :
Compléter le tableau suivant :
Code css dans un fichier Code css dans <head> Code css dans les balises
à part html
Une seule page
………………………………. Créer des éléments
……………………………….
Utilisé par personnalisés
……………………………….
Avantages plusieurs
fichiers html
-deux fichiers séparés ……………………………….
Utilisé par une seule
……………………………….
Redondance et perte
………………………………. page
de temps
Inconvenants -ne faits pas des
pages mis en forme
différemment
3
[Link]
img {
border: 5px solid rgb(106, 22, 185);
border-radius: 4px;
padding: 5px;
width: 250px;
}
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman", Times, serif;
color: purple;
background-color: #c6b9e9;
}
#navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em;
}
h1 {
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
}
#navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black;
}
[Link] a {
text-decoration: none;
}
a:link {
color: blue;
}
a:visited {
color: purple;
}
4
[Link]
<!DOCTYPE html>
<html lang="fr">
<!--tête du document HTML-->
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-
scale=1" />
<meta charset="utf-8" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="Cours 2ème info HTML and CSS" /
>
<meta name="author" content="Fredj Imed" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<!--autres balise de la tête
<link rel="stylesheet" type="text/css" media="screen" href="main.c
ss" />
<script src='[Link]'></script>
<base href= "[Link]/dossier" />
<style></style>
<script></script>
<noscript></noscript> -->
</head>
<!--Corps du document HTML-->
<body>
<!-- Menu de navigation du site -->
<ul id="navbar">
<li><a href="[Link]">Home page</a></li>
<li><a href="[Link]">à propos de moi </a></li>
<li><a href="[Link]">Ma ville</a></li>
<li><a href="[Link]">mon Lycée</a></li>
</ul>
<!-- Contenu principal -->
<div id="div1">
<h1>Ma première page avec du style</h1>
<p>Bienvenue sur ma page avec du style!</p>
<p>
Il lui manque des images, des tableaux, des ... mais au moins,
elle a du style. Et
elle a desliens, même s'ils ne mènent nulle part …
</p>
<p>Je devrais étayer, mais je ne sais comment encore.</p>
<!-- Signer et dater la page, c'est une question de politesse! -
->
<address>
<p>Fait le 1 janvier 2021</p>
5
<p>par moi.</p>
<p>contact :</p>
<a href="[Link]@[Link]">[Link]@[Link]</a><br />
<a href="[Link] 98111000</a>
</address>
</div>
</body>
</html>
[Link]
<!DOCTYPE html>
<html lang="fr">
<!--tête du document HTML-->
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-
scale=1" />
<meta charset="utf-8" />
<meta name="keywords" content="HTML, CSS" />
<meta name="description" content="Cours 2ème info HTML and CSS" /
>
<meta name="author" content="Fredj Imed" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<link rel="stylesheet" type="text/css" media="screen" href="main.c
ss" />
</head>
<!--Corps du document HTML-->
<body>
<!-- Menu de navigation du site -->
<ul id="navbar">
<li><a href="[Link]">Home page</a></li>
<li><a href="[Link]">à propos de moi </a></li>
<li><a href="[Link]">Ma ville</a></li>
<li><a href="[Link]">mon Lycée</a></li>
</ul>
<!-- Contenu principal -->
<div id="div1">
<h1>Ma première page avec du style</h1>
<p>Bienvenue sur ma page avec du style!</p>
<p>
Il lui manque des images, des tableaux, des ... mais au moins,
elle a du style. Et
elle a desliens, même s'ils ne mènent nulle part …
</p>
<p>Je devrais étayer, mais je ne sais comment encore.</p>
<img src="[Link]" alt="HTML5" />
<!-- Signer et dater la page, c'est une question de politesse! -
->
<address>
<p>Fait le 1 janvier 2021</p>
<p>par moi.</p>
6
<p>contact :</p>
<a href="[Link]@[Link]">[Link]@[Link]</a><br />
<a href="[Link] 98111000</a>
</address>
</div>
</body>
</html>