Scribd
Importer
34 vues19 pages

Module 2 _ HTML (

Le document présente le programme de cours de développement web à la Libreville International Business School pour l'année scolaire 2024-2025, incluant des modules sur HTML, CSS et PHP. Il détaille les éléments fondamentaux de HTML, tels que la structure des pages, les balises, les formulaires et l'accessibilité. Le document souligne également l'importance de la documentation pour maîtriser ces langages de programmation.

Transféré par

jeymb5737
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
34 vues19 pages

Module 2 _ HTML (

Le document présente le programme de cours de développement web à la Libreville International Business School pour l'année scolaire 2024-2025, incluant des modules sur HTML, CSS et PHP. Il détaille les éléments fondamentaux de HTML, tels que la structure des pages, les balises, les formulaires et l'accessibilité. Le document souligne également l'importance de la documentation pour maîtriser ces langages de programmation.

Transféré par

jeymb5737
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
Vous êtes sur la page 1/ 19

Libreville International Business School

Développement web et Mobile

cours Développement web:


HTML, CSS et PHP
NDONG MOUNANGA Yonnel
Ingénieur Informatique et Télécom
[email protected]

Année Scolaire 2024 - 2025


Plan:
Module 1 : Introduction au Développement Web
1.1. Qu’est-ce que le développement web ?
1.2. Outils et environnements de développement
Module 2 : HTML (HyperText Markup Language)
2.1. Introduction à HTML
2.2. Les éléments de base
2.3. Formulaires et entrées
2.4. Sémantique et accessibilité
Module 3 : CSS (Cascading Style Sheets)
3.1. Introduction à CSS
3.2. Mise en page et design
3.3. Styles et thèmes
3.4. Animations et transitions
Module 4 : PHP (Hypertext Preprocessor)
4.1. Introduction à PHP
4.2. Syntaxe de base et structures de contrôle
4.3. Fonctions et gestion des formulaires
4.4. Bases de données et PHP
Module 5 : Intégration de HTML, CSS et PHP
5.1. Création d’un projet web complet
5.2. Gestion des sessions et cookies
5.3. Sécurité web
Module 2 : HTML (HyperText
Markup Language)
2.1. Introduction à HTML
2.2. Les éléments de base
2.3. Formulaires et entrées
2.4. Sémantique et accessibilité
2.1. Introduction à HTML
Definitions:
HTML est l’abréviation de HyperText Markup Language, soit en français «
langage hypertexte de balisage ». Ce langage a été créé en 1991 et a pour
fonction de structurer et de donner du sens à du contenu.

Il contient des commandes, implémentées par des balises pour marquer les
différents types de texte(titres, paragraphe, listes…),pour inclure des
images, des formulaires, des liens…

C'est un langage à balisage qui décrit la structure logique d'un document


hypertexte. Il a volontairement été conçu pour être simple.
2.1. Introduction à HTML
Les versions de HTML
•HTML1:crée en 1991 par Tim Berners-Lee.
• HTML2:1994-1996 crée par le W3C qui gère dorénavant les versions
suivantes.
• HTML3: à partir de 1996 ajoute de nouvelles fonctionnalités (tableaux,
applets, scripts, habillage des images par du texte ...).
• HTML4:à partir de 1998. Introduction des frames, permet d’exploiter les
feuilles de style CSS.
•HTML5: the last one. Amélioration de la version précédente pour une mise
en oeuvre enrichie et facilitée.
2.1. Introduction à HTML
Structure d’une page HTML
Chaque document HTML commence par une déclaration DOCTYPE qui
précise la version de HTML utilisée. La structure de base d’une page HTML
comprend les éléments `<html>`, `<head>`, et `<body>`, où `<head>`
contient des métadonnées et `<body>` contient le contenu visible.

Structure minimale d’une page HTML5


<!DOCTYPE html>
<html>
<!-- En-tête de la page -->
<head>
<meta charset="UTF-8"/>
<title>le titre de ma page web
</title>
</head>
<!-- Corps de la page -->
<body>
contenu de la page.
</body>
</html>
2.1. Introduction à HTML
Analyse du code HTML
<!DOCTYPEhtml> le doctype du HTML5, elle qui indique qu'il s'agit bien
d'une page web HTML.
<html> en globe tout le contenu de la page.
<head>l’ en-tête, Spécifie le titre, l’encodage. N’apparait pas sur la page.
<body>le corps, Contient la partie principale de la page.
<meta charset="utf-8"/> l’encodage, Pour l’affichage des accents. Il faut
également que le fichier soit enregistré en utf-8 dans l’éditeur.
<title>le titre principal. Ne s’affiche pas dans la page mais dans le
navigateur!
<!-- un commantaire --> Cela sert à mettre en valeur/séparer des zones de
code ou ajouter des explications à des parties complexes
2.1. Introduction à HTML
Éléments, balises et attribut

- Les éléments HTML sont constitués de balises ouvertes et fermées. Les


éléments en bloc (comme `<div>`, `<p>`) occupent toute la largeur
disponible, tandis que les éléments en ligne (comme `<span>`, `<a>`)
n’occupent que l’espace nécessaire.

- Les balises auto-fermantes (comme `<img>`, `<br>`,<hr>) n’ont pas besoin


de balise de fermeture.

On peut faire des blocs identifiés avec <div id="bloc1"></div> ou utiliser


<div classe="type1"></div> pour regrouper dans une meme classe
different blocs.
2.1. Introduction à HTML
Éléments, balises et attribut
Les attributs, vont venir compléter les éléments en leur donnant des
indications ou des instructions supplémentaires.
<body>
<h1>Ma grande page</h1>
<p>
<a href="#cuisine">La
cuisine</a><br />
<a href="#rollers">Les rollers</a><br
/>
</p>
<h2 id="cuisine">La cuisine</h2>
<p>... (beaucoup de texte) ...</p>
<h2 id="rollers">Les rollers</h2>
<p>... (beaucoup de texte) ...</p>
</body>
2.2. Les éléments de base
Titres, paragraphes, liens, images

- Les titres sont définis par des balises `<h1>` à `<h6>`, où `<h1>` est le
plus important. Les paragraphes sont créés avec la balise `<p>`, les liens
avec `<a href= »URL »>`, et les images avec `<img src= »URL »
alt= »description »>`.

Mettre son texte en valeur


• important : <em >mon texte </em > em, pour emphasis (« emphase »
en français) est proche de l’élément strong. Il sert lui aussi à signifier
qu’un contenu est important
• Très important : <strong >mon texte </strong > indiquer aux moteurs
de recherche qu’un contenu est particulièrement important
• Marquer le texte : <mark>mon texte</mark> mark est utilisé pour faire
ressortir du contenu.
Ces élément se place à l’intérieur d'un paragraphe et est interprétation
diffère suivant les navigateurs.
2.2. Les éléments de base du HTML
Liens internes et liens externes
il existe différents types de liens. Pour l’instant, nous allons nous concentrer
sur les eux types les plus « classiques » : les liens internes et les liens
externes.
Quelle différence entre ces deux types de liens ? Un lien interne est un lien
créé entre deux pages d’un même site web tandis qu’un lien externe est un
lien menant d’un site web vers un autre site web.
Dans tous les cas, pour créer un lien, nous allons utiliser l’élément « a »
accompagné de son attribut href (pour Hypertext Reference) qui sert à
indiquer la cible (c’est à dire la destination) du lien.

<a href="contact.html">Contact</a> dossier courant


<a href="sous-dossier/service.html">service</a> sous dossier
<a href="../login.html">login</a> dossier parent

<a href="https://openclassrooms.com" title="Vous ne le regretterez


pas !"target="_blank">OpenClassrooms</a>

Autre liens:
<a href="monfichier.zip">Télécharger le fichier</a>
<a href="#cuisine">La cuisine</a><br />
<a href="mailto:[email protected]"> M’envoyer un mail ici </a>
2.2. Les éléments de base du
HTML
Listes et tableaux
- Les listes peuvent être ordonnées (`<ol>`) ou non ordonnées (`<ul>`). Les
éléments de liste sont définis par `<li>`.le dernier grand type de listes que
nous allons voir ensemble, les listes de définition son utilisées pour définir
des termes, on utilise l’élément <dl>(pour definition list ), l’élément <dt>
(pour definition term) et l’élément <dd> pour la définition en soi.

HTML nous offre la possibilité d’imbriquer les listes les unes dans les
autres très simplement.

- Les tableaux sont construits avec `<table>`, `<tr>` pour les lignes, `<td>`
pour les cellules et <th> titre dans une cellule (centré et en gras), en
général la première ligne.
2.2. Les éléments de base du
HTML
Insertion d'un élément audio
<audio src="musique.mp3"></audio>
Vous pouvez compléter la balise des attributs suivants :
controls : pour ajouter les boutons « Lecture », « Pause » et la barre de défilement. Cela
peut sembler indispensable
•width : pour modifier la largeur de l'outil de lecture audio.
•loop : la musique sera jouée en boucle.
•autoplay : la musique sera jouée dès le chargement de la page.
•preload : indique si la musique peut être préchargée dès le chargement de la
page ou non. Cet attribut
peut prendre les valeurs : <audio controls>
auto (par défaut) <source src="hype_home.mp3">
metadata <source src="hype_home.ogg">
none </audio>
<audio src="hype_home.mp3" controls>mettre à jour le navigateur!</audio>
2.2. Les éléments de base du
Insertion d'une vidéo
HTML
<video src="sintel.webm"></video>
poster : image à afficher à la place de la vidéo tant que celle-ci n'est pas lancée.
•controls : pour ajouter les boutons « Lecture », « Pause » et la barre de
défilement.
•width : pour modifier la largeur de la vidéo.
•height : pour modifier la hauteur de la vidéo.
•loop : la vidéo sera jouée en boucle.
•autoplay : la vidéo sera jouée dès le chargement de la page.
•preload : indique si la vidéo peut être préchargée dès le chargement de la page
ou non. Cet attribut peut prendre les valeurs :
o auto (par défaut) :
o metadata : charge seulement les métadonnées (durée, dimensions,
etc.).
o none :
<video src="sintel.webm" controls poster="sintel.jpg" width="600">
Il est temps de mettre à jour votre navigateur !
</video>
2.3. Formulaires et entrées
Création de formulaires

- Les formulaires sont créés avec la balise `<form>`, qui peut inclure
différents types d’entrées comme `<input>`, `<textarea>`, et `<select>` pour
les listes déroulantes.

Types d’entrées et validation

- Les types d’entrées incluent `text`, `password`, `email`, `checkbox`,


tel ,url,range,date,color et `radio`. HTML5 permet également une
validation basique des champs de formulaire.
<input type="text" name="pseudo" />
<textarea name="ameliorer" id="ameliorer"></textarea>
<select name="sexe" id="sexe_select">
<option value="masculin"> masculin</option>
<option value="feminin">feminin</option>
</select>
2.4. Sémantique et accessibilité
Importance de la sémantique

- Utiliser des balises sémantiques comme `<header>`, `<footer>`,


`<article>`, et `<section>` améliore la compréhension du contenu par les
moteurs de recherche et les lecteurs d’écran.
2.4. Sémantique et accessibilité
Bonnes pratiques pour l’accessibilité

- Les attributs ARIA (Accessible Rich Internet Applications) aident à rendre


le contenu web plus accessible. Les balises `alt` pour les images sont
cruciales pour les utilisateurs malvoyants.
Validation et compatibilité entre navigateurs
Un même code interprété par différents navigateurs peut produire
différents résultats. Autrement dit, il est possible que votre code s’affiche
différemment selon le navigateur utilisé par vos visiteurs.
Pour cela, le W3C (World Wide Web Consortium – l’autorité en matière de
codification des langages informatiques) met à notre disposition différents
outils, et notamment des validateurs HTML et CSS. Pour pouvez trouver
ces validateurs ici :
• Pour le validateur HTML : http://validator.w3.org
• Pour le validateur CSS : http://jigsaw.w3.org/css-validator
Exploiter efficacement la
documentation d’un langage
La documentation fournit des descriptions détaillées des fonctionnalités, de la
syntaxe, et des concepts du langage. C’est un guide indispensable pour
comprendre comment utiliser le langage.
Connaître la structure de la documentation
- Table des matières: Familiarisez-vous avec les sections principales.
- Index et recherche: Utilisez ces fonctionnalités pour trouver rapidement des
informations spécifiques.
Suivre les mises à jour de la documentation
-Les langages évoluent. Consultez régulièrement la documentation pour être au
courant des nouvelles fonctionnalités et des changements.

quelque site de documentation


• www.w3schools.com
• developer.mozilla.org
• devdocs.io
• https://www.php.net/docs.php
Exploiter efficacement la
documentation d’un langage
Lire les sections de référence
-Plongez dans les sections de référence pour comprendre la syntaxe, les types
de données, et les fonctions. Prenez note des détails importants, comme les
paramètres et les valeurs de retour.
Utiliser les exemples de code
-Étudiez et exécutez les exemples fournis. Cela vous aidera à comprendre
comment appliquer les concepts en pratique.
Demander de l’aide
-N’hésitez pas à poser des questions sur des forums ou des communautés en
ligne si vous rencontrez des difficultés.

Lire la documentation est une compétence qui s’améliore avec le temps. Plus
vous pratiquez, plus il vous sera facile de trouver et de comprendre
l’information dont vous avez besoin.

Vous aimerez peut-être aussi