Initiation au HTML



LMDBT - Le blog



Initiation au code HTML

Objetctifs :

Introduction aux notions de base

Qu’est-ce qu’un code ?

Le code informatique est un langage qui permet à un humain de programmer un logiciel ou un ordinateur. C’est à l’aide du code informatique que l’on conçoit des jeux vidéo, des sites Internet, des applications mobiles ou même des robots.
Pourquoi faut-il un langage spécial pour parler aux ordinateurs ?
Source : lumni.fr

Qu’est-ce qu’un éditeur de texte ? Un navigateur ?

Un éditeur de texte est simplement un logiciel destiné à la création et l’édition de fichiers textes. Il en existe cependant certains qui permettent de colorer le texte en fonction du code tapé.

Un navigateur est un logiciel conçu pour consulter et afficher le World Wide Web. Il traduit du code HTML (mais aussi CSS et JavaScript - entre autres…) en un visuel affiché sur une page.

Qu’est qu’une URL ?

Une URL, couramment appelée adresse web, est une chaîne de caractères uniforme qui permet d’identifier une ressource du World Wide Web par son emplacement.
Source : Wikipédia

Sur l’Internet, quand vous êtes sur un site web, elle est indiquée en haut du navigateur.

On peut aussi récupérer l’URL d’une image par exemple en faisant clic-droit puis Copier le lien de l'image.

Quelle est l’URL de l’image ci-dessous ?

Analyser et modifier une page web simple

Activité 1 - Vous êtes perdu ?

  1. Aller sur la page : www.perdu.com
  2. Sur votre clavier taper sur Ctrl + u pour afficher le code source de la page (le code de la page ce trouve ci-dessous)
<html>
<head>
<title>Vous Etes Perdu ?</title>
</head>

<body>
<h1>Perdu sur l'Internet ?</h1>
<h2>Pas de panique, on va vous aider</h2>
<strong><pre>    * <----- vous êtes ici</pre></strong>
</body>
</html>
  1. Observer le code de cette page.
  2. Copier-coller le code dans un éditeur de texte et l’enregistrer sous le nom : mapremierepage.html
  3. Ouvrir cette page dans un navigateur
  4. Modifier le code comme vous le souhaiter et rechercher la page sur le navigateur.

Une image et un lien ?

Activité 2 - Insérer une image et un lien dans une page HTML

  1. Copier-coller le code ci-dessous et l’enregistrer sous le nom : page2.html puis ouvrir cette page dans un navigateur.
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Une page avec une image et un lien</title>
    </head>
    <body>
    <p>Si tu veux voir le meilleur article Wikipedia du monde clique <a href="https://fr.wikipedia.org/wiki/Math%C3%A9matiques">ici</a>.</p>
    <p>Et voici un portrait d'Euclide : <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Euklid2.jpg/255px-Euklid2.jpg" width=25%></img></p>
    </body>
</html>

  1. Modifie le lien pour qu’il renvoie vers un autre article Wikipédia.

  2. Modifie l’URL de l’image pour afficher une autre image.

  3. Écris un code qui permet de renvoyer vers une page web de ton choix en cliquant sur l’image de ton choix en suivant ce modèle :
    <a href="URL_de_la_page_web.html"><img src="URL_de_l_image.jpg"></img></a>

    Résumé de cette activité en vidéo :



Un peu de style CSS

Activité 3 - Modifier le style d’une page existante à l’aide du code CSS

  1. Télécharge la page HTML en cliquant sur le lien ICI
  2. Ouvre cette page dans un navigateur et avec un éditeur de texte
  3. Regarde la vidéo ci-dessous :


  4. Modifie le style de la page HTML téléchargée. Tu peux t’aider de cette page web : CSS Tutorial sur W3School
    N’hésite pas à demander de l’aide !

Créer sa page web à partir d’un modèle

Activité 4 - Créer une page (ou un site en local) à partir d’un modèle disponible sur W3School

  1. Réfléchis à un contenu : sujet, textes, images…
  2. Choisis un modèle parmi ceux proposés ici par W3School
  3. Clique sur Try it yourself et copie-colle le code HTML dans un éditeur de texte, enregistre le en .html et ouvre la page dans ton navigateur.
  4. Modifie le texte, les images et le style progressivement pour personnaliser la page.


Retour à l’index


Billet rédigé par Cyril Iaconelli
Dernière mise à jour : 30/06/2023
Powered by MD2HTML