mon ENT Occitanie Se connecter

SNT

‹ Retour au blog

S5-2 : Créer une page web avec le langage HTML

Par VINCENT IMBERT, publié le vendredi 21 juillet 2023 09:15 - Mis à jour le mercredi 10 avril 2024 11:52
Présentation

Le couple HTML + CSS sont les deux langages utilisés pour présenter et mettre en forme les documents sur le web. L'activité proposée sera donc réalisée avec l'éditeur HTML accessible depuis Capytale, lui même présent dans notre ENT.

 

Problématique

 

Qu'est ce que le langage HTML ?

 

 

Travail à faire
 
PARTIE 1 : Premier fichier HTML

HTML (Hypertext Markup Language) est un langage de balise (de description) et non un langage de programmation. HTML permet de décrire le contenu d’un document et d’en donner la structure. HTML n’étant pas un langage de programmation, il n’existe pas de variables ou de conditions, fonctions etc. Ainsi, on te propose de comprendre le rôle de certaines balises du langage HTML. Commencons par comparer le contenu d’un fichier HTML avec le rendu dans un navigateur Web de la page.
 Code de patage :
71b6-3390385
Préambule :
Comprendre le rôle des principales balises

 

  • Depuis Capytale ouvrir l'activité proposée.
  • Lis les consignes qui te sont données.
  • Observe et compare alors le contenu d’un fichier HTML avec le rendu dans le navigateur Web de la page.
  • Repère bien les balises "html", "head" et "body"
  • Répondre alors aux question posées sur ta fiche de travailhttps://youtu.be/KsCUcBK9q14?t=80&si=5EhZaaKBFD34y-Te

 
       
Code de patage :
c099-3172074
 

 

 
 
Activité 1 :
Créer votre première page web
  • À partir de ta fiche de travail recopie le code HTML qui va te permetttre de créer ta première page
  • Attention à bien écrire ton code entre les balises <body>   et  </body>

 
Activité 2 :
Insérer une image

 
Activité 3 :
Insérer un lien hypertexte
  • Ajoutez à la suite, toujours entre les balises <body>, le code HTML proposé sur ta fiche de travail
  • Répondre aux questions posées sur ta fiche de travail

 
Activité 4 :
Intégrer une vidéo
  • Ajoutez à la suite, toujours entre les balises <body>, le code HTML communiqué sur ta fiche de travail.
  • Dans un nouvel onglet du navigateur, allez sur YouTube et lancez une vidéo de votre choix
  • Ajoutez à la suite, toujours entre les balises  <body> </body>, le code précédemment copié.
  
Activité 5 :
Intégrer une liste
  • Ajoutez à la suite, toujours entre les balises <body>, le code HTML communiqué sur ta fiche de travail. 
  • Modifier la balise <ol> en <ul>. que se passe-t-il ?
 

 

 

PARTIE 2 : Créer une page web sur une personnalité

Vous avez désormais toutes les connaissances pour démarrer le projet de création d'une page Web sur une personnalité en lien avec l'informatique.
Code de patage :
14ca-3405387
Bill Gates - Co-fondateur de Microsoft, philanthrope et entrepreneur.
Ada Lovelace - Considérée comme la première programmeuse de l'histoire.
Alan Turing - Mathématicien et cryptologue britannique, pionnier de l'informatique et de l'intelligence artificielle.
Larry Page - Co-fondateur de Google, entrepreneur et pionnier de la recherche en ligne.
Steve Jobs - Co-fondateur d'Apple Inc., visionnaire et innovateur.
Tim Berners-Lee - Inventeur du World Wide Web.
Grace Hopper - Informaticienne américaine, pionnière de la programmation et du développement des langages de programmation.
Mark Zuckerberg - Co-fondateur et PDG de Facebook, entrepreneur dans le domaine des réseaux sociaux et de la technologie.

fi

 
Point méthode

Balise HTML (HyperText Markup Language)

Élémet du code HTML d'une page Web permettant de structurer les contenus.
La première ligne est toujours <!DOCTYPE html> Elle indique que le document est au format HTML.

</html> et <html>

Entre ces deux balises on trouve deux parties délimitées par les balises <head> et <body>.

<head> et </head>

Cette partie s'appelle l'en-tête de la page Web. Elle contient des métadonnées, c'est-à-dire des informations générales sur le document comme son titre, l'encodage des caractères, des liens vers des feuilles de style ou des scripts.

<body> et </body>

Cette partie s'appelle le corps de la page Web.


Mémento balises HTML

 
 

 

 

Ce que je dois retenir

 
Pour aller plus loin

Quelques métiers...

 

 

 

 

 
Pièces jointes

À télécharger

 / 1
 Télécharger( jumbofiles__fake-pdf-preview-url )