Technologies web (suite)
Technologies web (suite)
Objectifs cantonaux : O4.1, O4.2, O4.3.
Cours complet sur la plateforme Runestone de Cédric Donner : Technologies web — introduction.
Suite du module WEB : consolidation des bases HTML vues en S34, avec un accent sur la lecture de documentation et l’analyse de pages existantes.
Utiliser une documentation de référence
Il est impossible de connaître par cœur toutes les balises et tous les attributs HTML. Les développeurs web utilisent en permanence une documentation de référence pour retrouver la bonne syntaxe.
▷ À retenir — MDN Web Docs
MDN (developer.mozilla.org) est la documentation de référence pour le développement Web (HTML, CSS, JavaScript), maintenue par la fondation Mozilla. Pour chaque balise, elle indique : à quoi elle sert, quels attributs elle accepte, des exemples d’utilisation, et sa compatibilité avec les navigateurs.
Vous voulez intégrer une vidéo YouTube dans votre page mais ne connaissez pas la bonne balise. En cherchant « html embed video mdn », vous découvrez la balise <iframe>, qui permet d’intégrer le contenu d’une autre page dans la vôtre :
<iframe src="https://www.youtube.com/embed/XXXXXXXXXXX"
width="800" height="430" allowfullscreen>
</iframe>Analyser la structure d’une page existante
Le code HTML d’un vrai site professionnel est nettement plus complexe que les exemples vus jusqu’ici, mais suit exactement les mêmes règles : imbrication de balises, hiérarchie parent-enfant, attributs.
En affichant le code source de https://collegedusud.ch/ (Ctrl + U), on retrouve, noyée dans beaucoup de code technique, la même logique que dans vos propres pages :
<header class="header-area style-two">
<div class="menu-container">
<div class="menu">
<a href="/" id="logo-nav">...</a>
<ul>
<li class="dropdown-niveau-1">
<a>Collège du Sud</a>
<ul>
<li class="lien-niveau-2">
<a href="https://collegedusud.ch/nos-equipes/">Nos équipes</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</header>
▷ À retenir — Attributs id et class
id: identifiant unique d’un élément dans toute la page (deux éléments ne devraient jamais partager le mêmeid).class: catégorie que l’on peut réutiliser sur plusieurs éléments, pour leur appliquer un style commun (utile dès la semaine prochaine, avec CSS).
Un menu de navigation imbrique typiquement plusieurs niveaux de <ul>/<li> avec des class différentes (dropdown-niveau-1, lien-niveau-2, …) pour distinguer les niveaux du menu.
! Ce qui reste invisible
En observant le code source d’un vrai site, on constate que l’essentiel du fichier ne concerne pas le contenu affiché : balises <meta>, liens vers des feuilles de style (<link rel="stylesheet" ...>), scripts JavaScript (<script>). Tout cela vit dans le <head> ou juste avant la fermeture du <body>, sans jamais apparaître à l’écran.
Exercice — rédiger une page HTML complète
À partir du texte brut ci-dessous (sans aucune mise en forme), reconstruisez une page HTML complète et correctement structurée.
◈ Consignes
- Rajoutez le squelette complet du document (
<!DOCTYPE html>,<html>,<head>avec<meta charset="UTF-8">et un<title>,<body>). - Formatez Composants essentiels d’un ordinateur en titre de niveau 1.
- Formatez Le processeur (CPU) en titre de niveau 2.
- Formatez Rôle du processeur, Fonctionnement d’un processeur et Les parties du processeur en titres de niveau 3.
- Faites des deux blocs de texte sous « Rôle du processeur » des paragraphes (
<p>). - Formatez les 4 étapes sous « Fonctionnement d’un processeur » en liste numérotée (
<ol>). - Formatez les 4 éléments sous « Les parties du processeur » en liste à puces (
<ul>), en mettant le terme défini en gras (<strong>).
Composants essentiels d'un ordinateur
Le processeur (CPU)
Rôle du processeur
Le processeur joue un rôle central dans le fonctionnement des ordinateurs.
Le processeur, ou CPU (Central Processing Unit), est un circuit électronique
intégré qui se trouve sur la carte mère de l'ordinateur.
On l'appelle souvent le "cerveau" de l'ordinateur, car il est responsable de
l'exécution de toutes les instructions.
Fonctionnement d'un processeur
Réception des instructions : le processeur reçoit des instructions sous
forme de code binaire.
Décodage des instructions : le processeur décode les instructions binaires.
Exécution des instructions : le processeur effectue des opérations
mathématiques et logiques.
Envoi des résultats : le processeur envoie les résultats aux autres
composants.
Les parties du processeur
Unité de commande (UC) : le chef d'orchestre du processeur.
Unité arithmétique et logique (UAL) : responsable des calculs.
Registres : petites mémoires temporaires pour les données en cours d'usage.
Cache : mémoire rapide pour les données fréquemment utilisées.▷ Solution — début attendu
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Composants essentiels d'un ordinateur</title>
</head>
<body>
<h1>Composants essentiels d'un ordinateur</h1>
<h2>Le processeur (CPU)</h2>
<h3>Rôle du processeur</h3>
<p>Le processeur joue un rôle central dans le fonctionnement des
ordinateurs...</p>
<p>On l'appelle souvent le "cerveau" de l'ordinateur...</p>
<h3>Fonctionnement d'un processeur</h3>
<ol>
<li>Réception des instructions : ...</li>
<li>Décodage des instructions : ...</li>
</ol>
<h3>Les parties du processeur</h3>
<ul>
<li><strong>Unité de commande (UC)</strong> : ...</li>
<li><strong>Cache</strong> : ...</li>
</ul>
</body>
</html>Devoir donné par Cédric
Terminer l’exercice de mise en forme ci-dessus, puis choisir un site Web que vous consultez régulièrement et en observer le code source (Ctrl + U) : retrouver au moins un exemple de <div>, un <a> avec attribut href, et un attribut class réutilisé sur plusieurs éléments.