Dans ce laboratoire (lab), vous apprendrez à créer votre première page web HTML avec une image en suivant un processus étape par étape. Le laboratoire vous guide tout au long de la configuration d'un répertoire de projet structuré, du téléchargement d'une ressource image, de la création d'un document HTML de base et de l'insertion d'une image dans la page web. Vous aurez l'expérience pratique de l'organisation des fichiers de développement web, de l'utilisation des balises d'image HTML et de la compréhension de la manière dont les images sont affichées dans les pages web.
À la fin de ce laboratoire, vous aurez créé une page HTML simple mais fonctionnelle qui démontre les compétences fondamentales de développement web, notamment la gestion de la structure du projet, la manipulation des images et la création de documents HTML de base. Cette approche pratique fournit une base solide pour les débutants qui souhaitent commencer leur parcours dans le développement web.
Skills Graph
%%%%{init: {'theme':'neutral'}}%%%%
flowchart RL
html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"])
html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"])
html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"])
html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"])
html/BasicStructureGroup -.-> html/basic_elems("Basic Elements")
html/BasicStructureGroup -.-> html/head_elems("Head Elements")
html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings")
html/LayoutandSectioningGroup -.-> html/layout("Layout Elements")
html/LayoutandSectioningGroup -.-> html/access_cons("Accessibility Considerations")
html/MultimediaandGraphicsGroup -.-> html/multimedia("Multimedia Elements")
html/MultimediaandGraphicsGroup -.-> html/img_maps("Image Maps")
html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media")
subgraph Lab Skills
html/basic_elems -.-> lab-451042{{"Créez votre première page HTML avec une image"}}
html/head_elems -.-> lab-451042{{"Créez votre première page HTML avec une image"}}
html/text_head -.-> lab-451042{{"Créez votre première page HTML avec une image"}}
html/layout -.-> lab-451042{{"Créez votre première page HTML avec une image"}}
html/access_cons -.-> lab-451042{{"Créez votre première page HTML avec une image"}}
html/multimedia -.-> lab-451042{{"Créez votre première page HTML avec une image"}}
html/img_maps -.-> lab-451042{{"Créez votre première page HTML avec une image"}}
html/embed_media -.-> lab-451042{{"Créez votre première page HTML avec une image"}}
end
Configuration de la structure du projet
Dans cette étape, vous allez configurer la structure du projet pour créer votre première page HTML avec une image. Une structure de projet bien organisée est essentielle pour maintenir vos fichiers de développement web propres et faciles à gérer.
La structure du projet a déjà été configurée pour vous par la configuration de la machine virtuelle (VM). Vérifiez le répertoire my-first-webpage :
ls my-first-webpage
Cette structure vous aide à séparer différents types de fichiers :
images/ stockera vos ressources d'images
css/ peut être utilisé pour les fichiers de style (bien que nous ne l'utilisions pas dans ce laboratoire)
Vérifions la structure du répertoire :
tree
Exemple de sortie :
.
├── css
└── images
Parfait! Vous avez maintenant configuré une structure de projet propre et organisée qui facilitera la gestion de vos fichiers de développement web.
Téléchargement et organisation des ressources d'image
Dans cette étape, vous allez télécharger une image à utiliser dans votre première page web HTML. Nous allons utiliser une simple image libre de droit disponible sur Internet et la sauvegarder dans le répertoire images que vous avez créé précédemment.
Tout d'abord, accédez à votre répertoire de projet :
cd ~/project/my-first-webpage
Vérifions que l'image a été téléchargée correctement :
ls images
Exemple de sortie :
landscape.jpg
Si vous ne voyez pas le fichier image, vous devrez peut-être le télécharger en suivant les commandes ci-dessous. Ignorez cette étape si vous voyez le fichier image dans le répertoire images.
images/landscape.jpg: JPEG image data, JFIF standard 1.01, aspect ratio, density 1x1, segment length 16, baseline, precision 8, 1170x780, components 3
L'image est maintenant prête à être utilisée dans votre page HTML. Nous avons téléchargé une image de paysage qui conviendra bien pour démontrer l'insertion d'image en HTML.
Création d'un document HTML de base
Dans cette étape, vous allez créer un document HTML de base qui servira de fondation pour votre première page web. HTML (HyperText Markup Language, langage de balisage hypertexte) est le langage de balisage standard pour la création de pages web.
Accédez à votre répertoire de projet :
cd ~/project/my-first-webpage
Ouvrez l'éditeur WebIDE et créez un nouveau fichier appelé index.html :
touch index.html
Maintenant, ajoutons la structure HTML de base. Ouvrez le fichier index.html dans l'éditeur WebIDE et entrez le code suivant :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My First Webpage</h1>
<p>This is a simple HTML page I'm creating to learn web development.</p>
</body>
</html>
Décortiquons les éléments clés de ce document HTML :
<!DOCTYPE html> déclare que ceci est un document HTML5
<html> est l'élément racine de la page HTML
<head> contient les informations métadonnées sur le document
<body> contient le contenu visible de la page
<h1> est un titre principal
<p> est un paragraphe
Insertion d'une image dans une page HTML
Dans cette étape, vous allez apprendre à insérer l'image de paysage que vous avez téléchargée dans votre page HTML. La balise <img> est utilisée pour intégrer des images en HTML.
Ouvrez votre fichier index.html dans l'éditeur WebIDE et modifiez le contenu pour inclure l'image :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My First Webpage</h1>
<p>This is a simple HTML page I'm creating to learn web development.</p>
<h2>Beautiful Landscape</h2>
<img src="images/landscape.jpg" alt="Scenic Landscape" width="500" />
</body>
</html>
Décortiquons les attributs de la balise d'image :
src : Spécifie le chemin vers le fichier image
alt : Fournit un texte alternatif pour l'accessibilité
width : Définit la largeur d'affichage de l'image (en pixels)
Aperçu et compréhension de l'affichage des images
Dans cette étape, vous allez apprendre à prévisualiser votre page HTML et à comprendre comment les images sont affichées dans les navigateurs web. Comme l'environnement LabEx propose un éditeur WebIDE avec une fonction d'aperçu intégré, vous pourrez voir votre page web immédiatement.
Pour prévisualiser votre page web, recherchez le bouton "Go Live" dans l'éditeur WebIDE.
Cliquez sur le dossier my-first-webpage dans la page, cela ouvrira automatiquement le fichier index.html en mode d'aperçu.
Cela lancera une vue en direct de votre fichier index.html, affichant l'image de paysage que vous avez ajoutée.
Explorons quelques concepts clés concernant l'affichage des images en HTML :
Chemin de l'image
L'attribut src spécifie le chemin relatif de votre image :
L'attribut style est utilisé pour définir la taille d'affichage de l'image. Il s'agit d'une propriété CSS qui vous permet de contrôler la largeur et la hauteur de l'image.
max-width: 100%; garantit que l'image ne dépasse pas la largeur du conteneur
height: auto; conserve le ratio d'aspect de l'image
Ne vous inquiétez pas pour le CSS pour l'instant, nous le couvrirons dans les laboratoires suivants.
Vérifiez que votre image s'affiche correctement dans l'aperçu du WebIDE. Vous devriez voir :
L'image de paysage
Une largeur de 500 pixels
Un texte alternatif clair et lisible
Résumé
Dans ce laboratoire, les participants ont appris à créer leur première page web HTML en configurant un environnement de projet structuré et en travaillant avec des images. Le processus a commencé par la création d'une structure de répertoires propre à l'aide de commandes terminal, en créant des dossiers dédiés aux images et au CSS, ce qui permet de maintenir des fichiers de développement web organisés.
Le laboratoire a guidé les apprenants dans le téléchargement d'une image d'exemple de paysage depuis Unsplash à l'aide de wget, démontrant des compétences pratiques en gestion de fichiers et en acquisition de ressources. En organisant systématiquement les fichiers du projet et en récupérant une ressource image, les participants ont acquis des connaissances de base dans la préparation de projets de développement web et la gestion d'actifs image pour les pages HTML.
We use cookies for a number of reasons, such as keeping the website reliable and secure, to improve your experience on our website and to see how you interact with it. By accepting, you agree to our use of such cookies. Privacy Policy
