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 pour cela l'environnement w3schools editor online

Il faut choisir : Try Frontend editor (HTML/CSS/JS) dans le bas de la page.

Vous pouvez également avoir votre propre site : Get your own website

Il vous faut créer un compte pour pouvoir l'utiliser par la suite.

2) Votre première page

Voilà, vous êtes prêt pour réaliser votre première page Web. Créer un projet de page web standard (newProject-->hello-webpage) puis Copier/coller le code ci-dessous dans le fichier index.html.

<!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 balises à tester :

Les incontournables

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 :

<ul>
<li> Fraises </li>

<li> Framboises </li>

<li> Cerises </li>
</ul>

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 :

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