Créer une page web complète
Le Web - SNT Seconde
Créer une page web complète
Objectifs
- Comprendre la structure de base d'une page HTML5
- Maîtriser les balises HTML essentielles pour structurer le contenu
- Appliquer des styles CSS pour mettre en forme et rendre la page attractive
Introduction
Avez-vous déjà rêvé de créer votre propre site web pour présenter une passion, un projet ou même un CV ? Aujourd'hui, nous allons passer de simples consommateurs du web à de véritables créateurs. Nous allons découvrir que derrière chaque page colorée et interactive se cache un langage que vous allez apprendre à maîtriser.
Comment structurer et styliser du contenu pour créer une page web complète et fonctionnelle à partir de zéro ?
Les fondations : la structure HTML
Le HTML (HyperText Markup Language) est le squelette de toute page web. C'est un langage de balises qui décrit la structure et le contenu. Une page HTML commence toujours par une déclaration de type de document : <!DOCTYPE html>. Ensuite, l'élément racine <html> englobe toute la page. À l'intérieur, on trouve deux parties principales : l'en-tête (<head>) et le corps (<body>). L'en-tête contient des informations pour le navigateur, comme le titre de l'onglet (balise <title>) et le lien vers la feuille de style CSS. Le corps contient tout ce que l'utilisateur voit : titres, paragraphes, images, liens. Par exemple, pour créer une page sur votre sport préféré, vous utiliserez <h1> pour le titre principal 'Le Football', <p> pour les paragraphes descriptifs, et <img> pour insérer une photo d'un ballon. Chaque balise s'ouvre (<nom>) et se ferme (</nom>), et le contenu est placé entre les deux. La structure correcte est essentielle pour que le navigateur puisse interpréter et afficher la page correctement.
Points clés
- Le HTML structure le contenu avec des balises.
- Une page a une structure de base obligatoire : DOCTYPE, html, head, body.
- Les balises s'ouvrent et se ferment, sauf exceptions comme <img>.
L'habillage : la mise en forme avec CSS
Si le HTML est le squelette, le CSS (Cascading Style Sheets) est l'habillage. C'est le langage qui permet de définir l'apparence visuelle de la page : couleurs, polices, espacements, positionnement. Le CSS fonctionne sur le principe de règles. Une règle CSS est composée d'un sélecteur (qui cible les éléments HTML à styliser) et d'une déclaration (les propriétés à appliquer). Par exemple, pour styliser tous les paragraphes, on écrit : p { color: blue; font-size: 16px; }. Ici, 'p' est le sélecteur, et entre les accolades se trouve la déclaration qui dit 'la couleur du texte sera bleue et la taille de police de 16 pixels'. On peut cibler des éléments plus précisément en utilisant des classes (précédées d'un point, comme .important) ou des identifiants (précédés d'un dièse, comme #menu). Le CSS peut être écrit dans un fichier séparé (recommandé), dans une balise <style> dans l'en-tête, ou directement sur une balise HTML (à éviter). Lier un fichier CSS externe se fait dans le <head> avec la balise : <link rel="stylesheet" href="style.css">. Cela permet de séparer clairement le contenu (HTML) de la présentation (CSS).
Points clés
- Le CSS contrôle l'apparence (couleurs, polices, mise en page).
- Une règle CSS = un sélecteur + des propriétés/valeurs.
- Il est préférable d'utiliser un fichier CSS externe lié au HTML.
Applications pratiques
Mettons cela en pratique en créant une page web simple sur un thème au choix, par exemple 'Ma série préférée'. 1) Créez un fichier 'index.html' avec la structure de base. Dans le <body>, ajoutez un titre principal <h1> avec le nom de la série, une image <img src="affiche.jpg" alt="Affiche de la série">, un paragraphe <p> de description, et une liste <ul> avec les noms des acteurs principaux. 2) Créez un fichier 'style.css'. Liez-le à votre HTML. Dans ce fichier, stylisez votre page : donnez une couleur de fond au body (background-color: lightgrey), centrez le titre (text-align: center) et changez sa couleur (color: darkblue). Donnez une bordure à l'image (border: 3px solid black) et réduisez sa largeur (width: 300px). Espacez les paragraphes (margin: 20px). 3) Testez votre page en l'ouvrant avec un navigateur. Observez comment chaque modification CSS change l'apparence. Vous pouvez ensuite ajouter un lien <a href="https://www.allocine.fr"> vers un site d'information sur la série et le styliser (a { color: red; text-decoration: none; }).
Points clés
- Création pas à pas d'un fichier HTML structuré.
- Création et liaison d'un fichier CSS avec des règles de style basiques.
- Test et observation des effets du CSS sur le rendu final.
À retenir
La création d'une page web repose sur deux langages complémentaires. Le HTML organise et définit le contenu (texte, images, liens) à l'aide de balises. Le CSS, quant à lui, se charge entièrement de la présentation en appliquant des règles de style (couleurs, polices, mise en page) aux éléments HTML. Une bonne pratique consiste à séparer ces deux aspects dans des fichiers distincts pour une meilleure organisation et maintenance du code.
- Le HTML structure, le CSS embellit.
- Une page web valide commence par <!DOCTYPE html> et a une structure html/head/body.
- On lie un fichier CSS dans le <head> du HTML avec la balise <link>.
