docCH4 Html
download 
Plainte Transcription
CH4 Html
1/8
Ch 4 Langage HTML
1
TS2-ISN
Novembre 2016
Introduction
HTML, CSS et JAVASCRIPT trois outils pour créer des pages web
• HTML ou Hyper Text Markup Language a fait son apparition en 1991 lors du lancement du web.
Il décrit le contenu de la page web.
• CSS ou Cascading Style Sheet ou feuilles de style, créé en 1996 décrit la forme, l’apparence de la
page web.
• JAVASCRIPT est un langage de programmation crée en 1995 qui permet d’introduire des effets
interactifs dans la page web.
Pour écrire un fichier html, css ou javacsript on a besoin d’un éditeur de texte. Le bloc note peut suffire
mais il est plus pratique d’avoir un outil plus évolué par exemple notepad++ sur windows ou smultron
ou textwrangler sur Mac.
Pour interpréter un fichier .html on a besoin d’un navigateur, Firefox ou Chrome par exemple, multiplateforme et gratuit.
Concrètement votre page web aura la forme d’un dossier dans lequel il y aura trois fichiers index.html
style.css et code.js qui contiendront respectivement le contenu de la page, la feuille de style de la page
et les fonctions écrites en javascript utilisées. Ce dossier pourra éventuellement contenir aussi un sousdossier images dans lequel seront stockées les images utilisées.
On n’oubliera pas d’enregistrer à chaque modification les fichiers index.html, style.css, code.js et de
rafraichir la page web ouverte dans le navigateur.
2
2.1
HTML
description
HTML est un langage de description. Il utilise des balises qui fonctionnent par paire, par exemple, balise
ouvrante : <html> balise fermante : </html>.
La structure de base d’un fichier .html est la suivante :
<html>
<head>
. . .. . .
</head>
<body>
. . .. . .
</body>
</html>
Les deux balises <html> et </html> indiquent le début et la fin de la page.
Les deux balises <head> et </head> indiquent le début et la fin de l’en-tête. On place dans l’en-tête
des indications d’encodage de langage et éventuellement le chemin pour trouver les fichiers .css et .js
liés au document.
Pour une plus grande compatibilité entre systèmes ou ordinateurs différents il est conseillé d’utiliser
l’encodage en utf-8, soit à l’intérieur des balises <head> :
<meta charset="utf-8"/>
2/8
Les deux balises <body> et </body> indiquent le début et la fin du corps du document. Tout ce qui
est écrit ici sera affiché à l’écran.
2.2
Principales balises
• commentaire
< !– ceci est un commentaire –> insertion de commentaires (ignorés par le navigateur)
• Titre
<title>...</title> pour indiquer le titre de la page
Le titre ne s’affiche pas directement sur la page mais il apparait en haut de la fenêtre de la page.
• Paragraphe
<p>...</p> création d’un paragraphe
• saut de ligne
<br /> passage à la ligne (pas de balise fermante)
• titres
<h1>...</h1> <h2>...</h2> <h3>...</h3> écriture des titres (par ordre d’importance)
• lien
<a href="adresse du lien"> nom du lien </a> création d’un lien
Exemple : <a href=’http ://fr.wikipedia.org’> accès à wikipedia </a> quand on clique sur le
texte ’accès à wikipedia’ la page wkipedia se charge.
• Images
<img src="adresse de l’image" /> insertion d’une image (pas de balise fermante)
par exemple : <img src="/Images/soleil.jpg" alt="soleil" /> fait afficher l’image soleil.jpg contenue dans le dossier Images qui se trouve dans le même répertoire que le fichier .html.
Si le navigateur ne trouve pas cette image, il va afficher le texte signalé par alt soit ici soleil.
On peut combiner des balises <img> et <a> par exemple :
<a href=’http ://www.google.fr’> <img src=’monimage.jpg’ /> </a>.
Lorsque l’utilisateur clique sur l’image, la page google.fr se charge.
• listes
<ul> <li> ....</li> <li>...</li> <li>... </li> </ul> affiche une liste (non numérotée) de trois
éléments
<ol> <li> ....</li> <li>...</li> <li>... </li> </ol> affiche une liste numérotée de trois éléments
• tableau
<table>
<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>
Affiche un tableau de quatre colonnes <td> </td> et de trois lignes <tr> </tr>
Remarques :
Toute balise ouverte doit être fermée.
Les balises ne doivent pas se chevaucher mais on peut les imbriquer :
par exemple : <b> <i>texte en italique et gras </i> </b>
les balises peuvent avoir des attributs par exemple avec la balise <hr /> qui trace une
ligne :
<hr width=’200px’ align=’left’> va tracer un trait d’une largeur de 200 pixels
aligné sur la gauche de la page
3/8
3
Ajout du style : CSS
3.1
définition
Le CSS (Cascading Style Sheet) est un langage de description qui permet de définir l’apparence des
textes ( police couleur, taille, etc...) ou l’agencement de la page (position des paragraphes, arrirère plan,
marges etc...)
Il est conseillé de définir tous ces styles dans un fichier externe (appelé ici monstyle.css situé dans le
dossier Styles se trouvant dans le même répertoire que le fichier .html ) qui sera lié au fichier .html.
Pour cela entre les deux balise <head> on insère une balise <link> :
<link rel="stylesheet" type="text/css" href="Styles/monstyle.css" />
3.2
mise en place
La syntaxe de base est composée de trois parties : un sélecteur
une propriété
une valeur
On écrit dans le fichier css
sélecteur{propriété1 : valeur ; propriété2 : valeur ; etc...}
Il y a trois possibilités pour définir les sytles :
• Sur les balises html :
Par exemple :
body{ backgroundcolor :blue ; font-size : 20px ;} ou p{color : red ; text-align : center ;}
• en utilisant des classes :
Pour délimiter, par exemple, parmi les paragraphes ceux auxquels on veut attribuer un style
spécial
On écrit alors dans le fichier html :
<p class=’nouveau’> ........</p>
et dans le fichier css :
.nouveau{text-align : right ; color : red}
Toutes les parties du html dont on aura spécifié la classe ’nouveau’ auront le texte de couleur
rouge aligné à droite.
• en utilisant un identifiant :
On écrit dans le texte html la balise <div id=’special’>....................</div>
et dans le fichier css :
]special{text-align : center ; color : green}
On a créé une division dans le fichier html (tout ce qui est entre le <div>....</div>, qu’on a
appellé special et à la quelle est attribué le style défini dans le fichier css #special donc ici texte
de couleur verte et centré.
3.3
compléments
Pour plus de détails se renseigner sur le net :
On peut ainsi définir la position d’une subdivision (absolute, top, left, en pourcentage, float etc...)
la police ( font-family, font-size, color)
les marges (padding, margin, ) la largeur (width)
et beaucoup d’autres choses...
4/8
4
4.1
Ajout de l’interactivité : JAVASCRIPT
Introduction
Le langage JavaScript est un langage de programmation interprété par le navigateur. Il comporte deux
aspects : la programmation générale et des fonctions d’accès à la page html. Il permet donc de consulter
et de modifier à volonté les propriétés de tous les objets de la page html, et comme toute modification
se répercute immédiatement sur l’affichage dans la fenêtre du navigateur, des changements d’affichage
dynamiques sont possibles.
De plus JavaScript permet de prendre en compte les événements, comme les clics de souris, que l’utilisateur peut provoquer sur la page Web. Ainsi il devient possible de modifier l’aspect graphique de la
page en fonction des actions de l’utilisateur.
Pour utiliser une fonction enregistrée dans un fichier fonctions.js placé dans le même répertoire que le
fichier html, Il faut utiliser dans l’en-tête <head> ..</head> du fichier html la balise <script> :
on écrit alors <script type="text/javascript " src="fonctions.js"></script>
On peut aussi écrire directement dans le corps entre les balises <body>...</body> :
<script type="text/javascript " >...définition de la fonction en langage javascript...</script>
4.2
Exemple 1 :
On peut écrire au début de la page html juste après la balise <body> :
Début de la page
<script type="text/javascript"> alert("bonjour et bienvenue sur ma page ! ") ; </script>
Fin de la page
On utilise ici une fonction javascript appelée alert(). Sur la page va s’afficher d’abord début de la page
puis la fonction alert() est activée et apparait une fenêtre de bienvenue qu’on ferme en cliquant sur OK
et il est affiché ensuite ’fin de page’
Les instructions sont traitées dans l’ordre où elles sont écrites dans le fichier html
4.3
Exemple 2 :
Le script suivant affiche dans la page la date et à la ligne suivante l’heure :
<script type="text/javascript">
time = new Date() ;
document.write("<p>Nous sommes le "+time.getDate()+" / "+(time.getMonth()+1)+"</p>") ;
document.write("<p>Il est "+time.getHours()+" : "+time.getMinutes()+"</p>") ;
</script>
Le script suivant affiche dans la page les valeurs des carrés des nombres entiers de 0 à 5
<script type="text/javascript">
for(x = 0 ; x <= 5 ; x = x+1) document.write("<p> le carré de "+x+" est égal à "+x*x+"</p>") ;
</script>
Dans ces deux scripts on utilise la fonction document.write() qui écrit quelque chose dans la page.
Il existe beaucoup de ressources sur le net, on pourra regarder notamment le site http ://proglab.fr qui
permet de traduire des programmes du langage algobox au langage javascript et réciproquement.
5/8
5
Annexe : squelette d’une bonne page web
On prévoit trois fichiers index.html, styles.css et code.js la version du fichier html HTML 5).
< !DOCTYPE html>
<html lang="fr">
<head>
< !– en-tête de la page –>
< !– encodage des caractères –>
<meta charset="utf-8" />
< !– feuille de styles –>
<link rel="stylesheet" type="text/css" href="Styles/monstyle.css" />
< !–fonctions javascript –>
<script src="code.js"></script>
</head>
<body>
< !– corps de la page –>
........
</body>
</html>
Commentaires :
Dans le DOCTYPE, on précise qu’on utilise la version HTML5
Dans la balise <html> on précise qu’on utilise le langage français
Dans la balise <meta>, on utilise le codage utf-8
(meilleure interprétation des divers accents)
Recommandations
Utiliser les balises <div>.........</div> pour encadrer chaque élément de la page :
Exemple de page :
<body>
<div class="conteneur">
<div class="haut"><h1 class="haut">Haut de page</h1></div>
<div class="gauche"><p>Texte gauche)</p></div>
<div class="droite"><h2>titre droite</h2><p>paragraphe1</p><p>paragraphe2</p></div>
<div class="Pied">Pied de page</div>
</div>
</body>
Fichier css :
.conteneur { width :100margin :0px ; border :1px solid gray ; line-height :150}
.haut, .pied { padding :0.5em ; color :white ; background-color :gray ; clear :left ; }
.haut h1 { padding :0 ; margin :0 ; }
.gauche {
float :left ; width :160px ; margin :0 ; padding :1em ; color :yellow ; background-color :green ; }
.droite {
margin-left :190px ; border-left :1px solid gray ; padding :1em ; background-color :yellow ; }
6/8
Cela donne :
6
Nouvelles balises avec html 5
Pour éviter de multiplier les <div> ou class html 5 propose de nouvelles balises, notamment :
header section nav article aside footer
Exemple d’utilisation :
7/8
Annexe : exemple de page web : fichier css et fichier html
8/8
Résultat :
Utilisation des marges et espaces
