Activité 1

Qu’est-ce que le HTML ?

Le code HTML est appelé un langage de balisage (et non un langage de programmation). En effet, le but de ce code informatique est de structurer les éléments visuels qui composent une page web : textes, images, paragraphes, etc. Dans la construction d’une page internet, le code HTML permet de poser des balises qui seront ensuite mises en forme via d’autres outils de programmation. HTML n'est pas un langage de programmation (comme le JavaScript ou le Python par exemple), c'est un langage de description.

Structurellement, une page web est composée d’éléments textuels bruts dont la mise en page se base sur les balises HTML. Par exemple, l’éditeur de texte va considérer les indications du code HTML pour savoir comment présenter les titres, les sous-titres ou encore les listes à puces d’une page.

Structure d'une page en HMTL

Les premiers codes HTML

Pour aborder le HTML, nous allons, dans un premier temps utiliser le site jsfiddle.net

Ecrivez le code suivant puis cliquer sur Run, Qu'est-ce qui s'affiche dans la fenêtre ?

2. Ecrivez le code suivant puis cliquer sur Run, Qu'est-ce qui s'affiche dans la fenêtre ?

Le HTML n'a pas été conçu pour gérer la mise en page (c'est possible, mais c'est une mauvaise pratique). Le HTML s'occupe uniquement du contenu et de la sémantique, pour tout ce qui concerne la mise en page et l'aspect « décoratif » (on parle du « style » de la page), on utilisera le CSS (Cascading Style Sheets).

Dans JSFIDDLE, il est possible d'écrire du CSS dans la fenêtre en haut à droite.

3. Écrivez le code HTML suivant :

4. Écrivez le code CSS suivant :

Cliquer sur Run, Qu'est-ce qui s'affiche dans la fenêtre ?

5. À l'aide d'un éditeur de texte(notepad++), créer un nouveau fichier.

Sauvegardez-le en précisant son nom, par exemple "index.html".

Écrivez le code suivant dans votre éditeur de texte (sans oublier de sauvegarder quand vous avez terminé) :

Écrivez le code HTML suivant :

Toujours à l'aide d'un éditeur de texte, vous allez créer un fichier qui va contenir le CSS de notre page (par exemple style.css). Complétez ce fichier à l'aide du code suivant :

Pour l'instant notre CSS ne sera pas appliqué à notre page, pour ce faire, il faut modifier notre code HTML en ajoutant une ligne qui va permettre d'associer notre code CSS à notre page.

Modifiez le code HTML avec la ligne suivante <link rel="stylesheet" href="style.css"> vous l'insérerez après la ligne <title>

Testez votre code à l'aide d'un navigateur web en “double-cliquant” sur le fichier index.html

6. Pour insérer une image en HTML, il faut utiliser la balise < img > et préciser la source du fichier image avec l'attribut « src ». Le code HTML est le suivant : < img src="URL source" >. D'autres attributs, comme « alt », permettent de paramétrer de manière avancée l'affichage de l'image sur la page web.

ex : < img src="https://banque.images.com/image-de-paragraphe.jpeg" >

7. Maintenant que vous maîtrisez les bases, vous allez créer votre propre page web permettant de vous présenter. (noté)

Page updated

Google Sites

Report abuse