Développement Web
HTML / CSS
III– Au travail avec HTML !
1) Editer votre code HTML
Il existe de nombreuses
façons de créer et d'éditer vos pages HTML. Nous allons utiliser Thimble
2) Votre première page
Voilà, vous êtes prêt pour réaliser votre première page Web. Lancez notepad++, et copier/coller le code ci-dessous dans votre document.
<!DOCTYPE html>
<html>
<head>
<title> Premier
essai </title>
</head>
<body>
<p> ceci est mon premier essai </p>
</body>
</html>
3) Les balises à votre disposition pour hiérarchiser votre texte
Un premier exemple :
<p> ceci est mon premier essai </p>
Ici le texte « ceci est mon premier essai » est défini comme étant un paragraphe. Ce texte se trouve entre la balise ouvrante <p> et la balise fermante </p>.
N'hésitez pas à tester les différentes balises proposées ci-dessous en insérant le code correspondant dans le corps de votre document (entre les balises <body> et </body> ). D'ailleurs, pour chacune de ses balises vous pouvez consulter le site w3schools pour en connaître toutes les subtilités.
Les incontournables
<p> </p> : Cette balise permet d’organiser son texte en paragraphes.
<br /> : Il s’agit d’une balise orpheline qui sert à indiquer qu’on doit aller à la ligne. Vous devez obligatoirement la mettre à l’intérieur d’un paragraphe.
<h1> </h1> : Cette balise signifie heading 1. Elle permet de faire des titres, à l’intérieur de la page. Le contenu de cette balise est donc affiché avec une taille de police plus grande que les autres caractères de la page. Il est également possible de définir des sous-titres en utilisant les balises <h2>, <h3>, <h4>, …<h6>.
<em> </em> : Cette balise permet de mettre « un peu » en valeur votre texte. L’utilisation de cette balise a pour conséquence de mettre le texte en italique. En fait, c’est le navigateur qui choisit comment afficher les mots. On lui dit que les mots sont assez importants et, pour faire ressortir cette information, il change l’apparence du texte en utilisant l’italique
<strong> </strong> : Cette balise permet de mettre en valeur votre texte. L’utilisation de cette balise a pour conséquence de mettre le texte en gras. En fait, c’est le navigateur qui choisit comment afficher les mots. On lui dit que les mots sont importants et, pour faire ressortir cette information, il change l’apparence du texte en utilisant le gras.
Les commentaires
Lorsque vous codez une page, il est important d’utiliser des commentaires. Ces commentaires ne seront ni visibles sur le navigateur, ni interprétés par celui-ci. Ils vous serviront uniquement à vous repérer sur votre code.
Les commentaires se situent entre les signes < !-- et -->
Les listes
Les listes nous permettent souvent de mieux structurer notre texte et d’ordonner nos informations. Nous allons découvrir deux types de listes :
Les listes non ordonnées ou listes à puces : Il suffit d’utiliser la balise <ul> que l’on referme avec </ul>. On écrit ensuite chacun des éléments de liste entre deux balises <li> et </li>. On écrit par exemple :
<ul>
<li>
Fraises </li>
<li> Framboises </li>
<li> Cerises
</li>
</ul>
Les listes ordonnées ou listes numérotées : Elle fonctionne de la même façon en remplaçant <ul> </ul> par <ol> </ol> (N'hésitez pas à les tester aussi !)
Les liens
La balise <a>, avec son attribut href permet de créer un hyperlien vers une autre page.
Voici un exemple :
<a href="http://www.google.fr" > Pour aller sur le site de google </a>
On peut aussi réaliser un lien vers une autre page de son site.
<a href="aide.html" > Aide </a>
Les images
Pour insérer une image, on utilise la balise de type orpheline <img>. Orpheline signifie que cette balise fait à la fois office de balise ouvrante et fermante. Elle doit être accompagnée de deux attributs obligatoires :
src : il permet d’indiquer où se trouve l’image que l’on veut insérer.
L'attribut alt signifie « texte alternatif ». Il s’agit d’un texte court qui décrit ce que contient l’image. Ce texte sera affiché à la place de l’image si celle-ci ne peut être chargée. Cela aide aussi les robots des moteurs de recherche pour les recherches d’images.
- image
stockée dans le même dossier que votre fichier html
:
<img
src=" fleur.png" alt=" une fleur">
- image stockée sur un autre site :
<img
src= "http://dory.fr/images/fleurs/fleur.png" alt="
une fleur">
Le son
Voici un exemple permettant d'insérer une musique dans un site. L'attribut control permet d'utiliser les contrôles audios classiques (lecture, pause...). Il faut évidement que le fichier « musique mp3 » soit présent à l'endroit indiqué (emplacement relatif ou absolu)
<audio src="musique.mp3" controls> ma musique</audio>
La video
<video controls src="ma_video.ogv" > ma_video </video>
Les tableaux
→ voir la balise table
Regroupement d'éléments
→ voir la balise div
Auteurs de ce document : Christelle BRIEC – Lycée Sainte-Thérèse Quimper
inspiré largement du site (http://fr.openclassrooms.com/)
Modifications : Christophe Béasse – Lycée Saint-Jo Lamballe – Sept 2014/ sept 2015 / Août 2016