Scribd
Importer
151 vues5 pages

Cours HTML Complet

Ce document est une introduction au HTML, expliquant sa structure de base et ses éléments essentiels tels que les titres, paragraphes, listes, liens, images et formulaires. Il présente également l'utilisation des balises sémantiques et fournit un exemple complet d'une page HTML. Chaque module aborde un aspect différent du langage HTML pour aider à la création de pages web.

Transféré par

Sheuf Ba
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
151 vues5 pages

Cours HTML Complet

Ce document est une introduction au HTML, expliquant sa structure de base et ses éléments essentiels tels que les titres, paragraphes, listes, liens, images et formulaires. Il présente également l'utilisation des balises sémantiques et fournit un exemple complet d'une page HTML. Chaque module aborde un aspect différent du langage HTML pour aider à la création de pages web.

Transféré par

Sheuf Ba
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

MODULE 1 - INTRODUCTION AU HTML

1. Qu’est-ce que le HTML ?

HTML signifie HyperText Markup Language.

Il sert à structurer le contenu des pages web (titres, paragraphes, images, liens, etc.).

2. Structure de base d’une page HTML :

<!DOCTYPE html>

<html lang="fr">

<head>

<meta charset="UTF-8">

<title>Titre de ma page</title>

</head>

<body>

<h1>Mon premier titre</h1>

<p>Un paragraphe de texte.</p>

</body>

</html>

MODULE 2 - LES TITRES ET PARAGRAPHES

1. Titres :

<h1> à <h6> : du plus important au moins important

<h1>Titre principal</h1>

<h2>Sous-titre</h2>

2. Paragraphe :

<p>Voici un paragraphe de texte.</p>


MODULE 3 - LES LISTES EN HTML

1. Listes non ordonnées (à puces) :

<ul>

<li>Pomme</li>

<li>Banane</li>

</ul>

2. Listes ordonnées (numérotées) :

<ol>

<li>Étape 1</li>

<li>Étape 2</li>

</ol>

MODULE 4 - LES LIENS HYPERTEXTES

1. Lien vers une autre page :

<a href="https://example.com">Clique ici</a>

2. Lien vers une autre partie de la même page :

<a href="#section2">Aller à la section 2</a>

MODULE 5 - LES IMAGES EN HTML

1. Afficher une image :

<img src="chemin/image.jpg" alt="Description de l'image">

2. Attributs utiles :

- alt : description si l’image ne charge pas


- width et height : taille

MODULE 6 - FORMULAIRES HTML

1. Exemple de formulaire :

<form action="traitement.php" method="post">

<label for="nom">Nom :</label>

<input type="text" id="nom" name="nom">

<input type="submit" value="Envoyer">

</form>

2. Types de champs courants :

- texte : <input type="text">

- mot de passe : <input type="password">

- email : <input type="email">

- zone de texte : <textarea></textarea>

- liste déroulante : <select><option></option></select>

MODULE 7 - DIV ET SPAN

1. <div> pour structurer des blocs :

<div class="section">

<h2>Titre</h2>

<p>Texte</p>

</div>

2. <span> pour cibler un mot :

<p>Un <span style="color:red;">mot important</span>.</p>


MODULE 8 - BALISES SÉMANTIQUES

<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>

MODULE 9 - PAGE HTML COMPLÈTE

<!DOCTYPE html>

<html lang="fr">

<head>

<meta charset="UTF-8">

<title>Mon site</title>

</head>

<body>

<header>

<h1>Bienvenue</h1>

<nav>

<a href="#section1">Accueil</a>

<a href="#section2">Contact</a>

</nav>

</header>

<main>

<section id="section1">

<h2>Contenu principal</h2>

<p>Exemple de site HTML.</p>

</section>

<section id="section2">

<h2>Contact</h2>

<form></form>

</section>
</main>

<footer>

<p>&copy; 2025 - Mon site</p>

</footer>

</body>

</html>

Vous aimerez peut-être aussi