Scribd
Importer
20 vues52 pages

Cours Html-Css Licence 1 IMTG

Le cours HTML-CSS couvre les bases du langage HTML, y compris les balises, éléments, attributs et la structure d'une page Web. Il introduit également le CSS pour la mise en forme des pages, en expliquant les méthodes d'intégration et les propriétés de style. Enfin, le cours aborde les tableaux, les listes, les formulaires et les éléments de mise en page pour créer des sites Web interactifs et bien structurés.

Transféré par

diopmadicke045
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 PPTX, PDF, TXT ou lisez en ligne sur Scribd
20 vues52 pages

Cours Html-Css Licence 1 IMTG

Le cours HTML-CSS couvre les bases du langage HTML, y compris les balises, éléments, attributs et la structure d'une page Web. Il introduit également le CSS pour la mise en forme des pages, en expliquant les méthodes d'intégration et les propriétés de style. Enfin, le cours aborde les tableaux, les listes, les formulaires et les éléments de mise en page pour créer des sites Web interactifs et bien structurés.

Transféré par

diopmadicke045
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 PPTX, PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 52

Cours HTML-CSS

1
PLAN du cours

1. Définitions
2. Editeurs de code HTML
3. Balises, Eléments et Attributs HTML
4. CSS
5. Tableaux HTML
6. Formulaires HTML
7. Médias HTML

2
définition
Qu'est-ce que le HTML ?
HTML signifie Hyper Text Markup Language(Langage de balisage
hypertexte)(Langage de représentation).
HTML est le langage de balisage standard pour la création de pages Web
HTML décrit la structure d'une page Web.
HTML se compose d'une série d'éléments.
Les éléments HTML indiquent au navigateur comment afficher le
contenu.
Les éléments HTML étiquettent des éléments de contenu tels que "ceci
est un titre", "ceci est un paragraphe", "ceci est un lien", etc.

3
definition
Structure de base d’une page HTML

4
definition
Structure de base d’une page HTML

La déclaration <!DOCTYPE html> définit que ce document est un


document HTML5 .
L'élément <html> est l'élément racine d'une page HTML .
L'élément <head> (entête) contient des méta-informations sur la page
HTML.
L' élément <title> spécifie un titre pour la page HTML (qui s'affiche dans
la barre de titre du navigateur ou dans l'onglet de la page) .
L' élément <body> définit le corps du document et est un conteneur
pour tous les contenus visibles, tels que les titres, les paragraphes, les
images, les hyperliens, les tableaux, les listes, etc.
5
eDITEURS DE CODE HTML
Un éditeur de code HTML est un logiciel qui permet d’écrire du code HTML à
l’intérieur pour faire ensuite vos sites internet.
Exemples:

2.
1.

3.

6
BALISES ET Eléments html
1. Balises HTML :
Il existe deux types de balise HTML:
 Balise de couple: elle fonctionne par paire. Elle permette d’envelopper (encadrer) un
élément .
 Balise simple: elle fonctionne toute seule, elle n’a pas besoin de paire.

Exemple:

7
BALISES ET Eléments html
2. Eléments HTML:
Un élément HTML est défini par une balise de début, du contenu et une balise de fin.

Exemple:

8
Attributs html
Les attributs HTML fournissent des informations supplémentaires sur les éléments
HTML.
Tous les éléments HTML peuvent avoir des attributs.

 L' attribut href de la balise <a> spécifie l'URL de la page vers laquelle le lien va
 L' attribut src de la balise <img> spécifie le chemin vers l'image à afficher
 Les attributs width et height de la balise <img> fournissent des informations sur la
taille des images .
 L' attribut alt de la balise <img> fournit un texte alternatif pour une image
 L' attribut style est utilisé pour ajouter des styles à un élément, tels que la couleur,
la police, la taille, etc.
 L' attribut lang de la balise <html> déclare la langue de la page Web

9
Attributs html
Exemples
2. Les attributs width et height
1. L’attribut href

3. L’attribut src
4. L’attribut lang

5. L’attribut alt

6. L’attribut style

10
Attributs html
styles HTML

L'attribut style de HTML est utilisé pour ajouter des styles à un élément, tels que la
couleur, la police, la taille, etc.
Utiliser:

 l' attribut style pour styliser les éléments HTML


 background-color pour la couleur de fond
 color pour les couleurs du texte
 font-family pour les polices de texte
 font-size pour les tailles de texte
 text-align pour l'alignement du texte

11
Attributs html
styles HTML: Exemples
1. Couleur de l'arrière plan 2. Taille du texte

3. Couleur du texte 4. Alignement du texte

5. Polices

12
COMMENTAIRES EN HTML

Les commentaires HTML ne sont pas affichés dans le navigateur,


mais ils peuvent aider à documenter votre code source HTML.

13
CSS

CSS signifie Cascading Style Sheets( feuilles de style en cascade)(c’est


pour faire nos designs).
CSS économise beaucoup de travail. Il peut contrôler la mise en page
de plusieurs pages Web à la fois.

Avec CSS, vous pouvez contrôler la couleur, la police, la taille du texte,


l'espacement entre les éléments, la manière dont les éléments sont
positionnés et disposés, les images d'arrière-plan ou les couleurs
d'arrière-plan à utiliser, différents affichages pour différents appareils
et tailles d'écran, et beaucoup plus!

14
CSS

CSS peut être ajouté aux documents HTML de 3 manières :

Inline - en utilisant l' attribut style à l'intérieur des éléments HTML : Un CSS en ligne
est utilisé pour appliquer un style unique à un seul élément HTML.
Un CSS en ligne utilise l' attribut style d'un élément HTML.

 Interne - en utilisant un élément <style> dans la section <head> :


Un CSS interne est utilisé pour définir un style pour une seule page HTML.
Un CSS interne est défini dans la section <head> d'une page HTML, au sein
d'un élément <style>.

 Externe - en utilisant un élément <link> pour créer un lien vers un fichier CSS
externe :
Une feuille de style externe est utilisée pour définir le style de nombreuses pages
HTML.
Pour utiliser une feuille de style externe, ajoutez un lien vers celle-ci dans la section
<head> de chaque page
15
CSS

Interne

Inline

16
CSS

Contenu fichier styles.css


Externe

17
CSS

 Utilisez l'élément HTML <link> pour faire référence à un fichier CSS externe
 Utilisez l'élément HTML <head> pour stocker les éléments <style> et <link>

 Utiliser la propriété CSS color pour les couleurs du texte

 Utiliser la propriété CSS font-family pour les polices de texte

 Utiliser la propriété CSS font-size pour les tailles de texte

 Utiliser la propriété CSS border pour les bordures

 Utilisez la propriété CSS padding pour l'espace à l'intérieur de la bordure

 Utilisez la propriété CSS margin pour l'espace en dehors de la bordure

18
Bordure css
La propriété CSS border définit une bordure autour d'un élément HTML.

Exemple:

19
rembourrage css
La propriété CSS padding définit un rembourrage (espace) entre le texte et la bordure.

Exemple:

20
MARGE css
La propriété CSS margin définit une marge (espace) à l'extérieur de la bordure..

Exemple:

21
LIENS HTML
Les liens se trouvent dans presque toutes les pages Web. Les liens permettent aux
utilisateurs de cliquer sur leur chemin d'une page à l'autre.

L'attribut le plus important de la balise <a> est l' attribut href , qui indique la
destination du lien.
Le texte du lien est la partie qui sera visible pour le lecteur.
Cliquer sur le texte du lien enverra le lecteur à l'adresse URL spécifiée.

22
LIENS HTML
Par défaut, la page liée sera affichée dans la fenêtre actuelle du navigateur. Pour changer
cela, vous devez spécifier une autre cible pour le lien.
L' attribut target spécifie où ouvrir le document lié.
L' attribut target peut avoir l'une des valeurs suivantes :
_self : Par défaut., ouvre le document dans la même fenêtre/onglet que celui où il a
été cliqué
_blank : Ouvre le document dans une nouvelle fenêtre ou un nouvel onglet
_parent : Ouvre le document dans le cadre parent
_top : Ouvre le document dans tout le corps de la fenêtre

23
Tableaux html
Les tableaux HTML permettent aux développeurs Web d'organiser les
données en lignes et en colonnes.

Balise Description
<table> Définit un tableau
<th> Définit une cellule d'en-tête dans un
tableau
<tr> Définit une ligne dans un tableau
<td> Définit une cellule dans un tableau
<caption> Définit une légende de tableau
<colgroup> Spécifie un groupe d'une ou plusieurs
colonnes dans un tableau pour le
formatage
<col> Spécifie les propriétés de colonne pour
chaque colonne dans un élément
<colgroup>

24
Tableaux html

Balise Description
<thead> Regroupe le contenu de l'en-tête dans un
tableau
<tbody> Regroupe le contenu du corps dans un
tableau
<tfoot> Regroupe le contenu du pied de page
dans un tableau

25
Tableaux html
Exemple:

26
BORDURES DE Tableaux html

Les tableaux HTML peuvent avoir des bordures de styles et de formes différents.

Pour ajouter une bordure, utilisez la propriété border CSS sur les éléments table, th
et td .

27
BORDURES DE Tableaux reduites
Pour éviter d'avoir des bordures doubles comme dans l'exemple ci-dessus, définissez la
propriété CSS border-collapse sur collapse.
Cela fera s'effondrer les bordures en une seule bordure

28
LISTES HTML

Les listes HTML permettent aux développeurs Web de regrouper un ensemble


d'éléments connexes dans des listes.
Balise Description
<ul> Définit une liste non ordonnée
<ol> Définit une liste ordonnée
<li> Définit un élément de liste
<dl> Définit une liste de description
<dt> Définit un terme dans une liste de
description

<dd> Décrit le terme dans une liste de


description
29
LISTES HTML

Exemple:

30
Bloc HTML et éléments en ligne
 Éléments de niveau bloc : Un élément de niveau bloc commence toujours sur une nouvelle
ligne et les navigateurs ajoutent automatiquement un espace (une marge) avant et après
l'élément.
Un élément de niveau bloc occupe toujours toute la largeur disponible (il s'étend aussi loin que
possible vers la gauche et la droite).

Deux éléments de bloc couramment utilisés sont : <p> et <div>.


L' élément <p> définit un paragraphe dans un document HTML.
L' élément <div> définit une division ou une section dans un document HTML.

31
Bloc HTML et éléments en ligne

 Éléments en ligne:

Un élément en ligne ne commence pas sur une nouvelle ligne. Un élément en ligne ne prend
que la largeur nécessaire.Il s'agit d'un élément <span> à l'intérieur d'un paragraphe.

Exemple:

32
Attribut de classe HTML
L' attribut HTML class est utilisé pour spécifier une classe pour un élément HTML.
Plusieurs éléments HTML peuvent partager la même classe.

L' attribut class est souvent utilisé pour pointer vers un nom de classe dans une feuille de
style.

Exemple:

33
Attribut d'identifiant HTML
L'attribut HTML id est utilisé pour spécifier un identifiant unique pour un élément HTML.
Vous ne pouvez pas avoir plus d'un élément avec le même identifiant dans un document
HTML.

L' attribut id est utilisé pour pointer vers une déclaration de style spécifique dans une
feuille de style.

Exemple:

34
HTML JavaScript
La balise HTML <script> est utilisée pour définir un script côté client (JavaScript).
L' élément <script> contient soit des instructions de script, soit il pointe vers un fichier de script
externe via l' attribut src. Les utilisations courantes de JavaScript sont la manipulation d'images, la
validation de formulaires et les modifications dynamiques de contenu.
Pour sélectionner un élément HTML, JavaScript utilise le plus souvent la méthode
document.getElementById() .Cet exemple JavaScript écrit "Hello JavaScript!" dans un élément HTML
avec id="demo":

Exemple:

35
Éléments de mise en page HTML
HTML comporte plusieurs éléments sémantiques qui définissent les différentes parties d'une
page Web :

• <header> Définit un en-tête pour un document ou une section


• <nav> Définit un ensemble de liens de navigation
• <section> Définit une section dans un document
• <article> Définit un contenu indépendant et autonome
• <aside> Définit le contenu en dehors du contenu (comme une barre latérale)
• <footer> Définit un pied de page pour un document ou une section
• <details> Définit des détails supplémentaires que l'utilisateur peut ouvrir et
fermer à la demande
• <summary> Définit un titre pour l' élément <details> 36
Éléments de mise en page HTML
Exemple:

37
Éléments de mise en page HTML
Code source de l’Exemple précèdent:

38
Éléments de mise en page HTML

39
Éléments de mise en page HTML

40
Éléments de mise en page HTML

41
Formulaires HTML
Un formulaire HTML est utilisé pour collecter les entrées des utilisateurs. L'entrée
de l'utilisateur est le plus souvent envoyée à un serveur pour traitement.

42
Formulaires HTML
Éléments de formulaire HTML

L'élément HTML <form> est utilisé pour créer un formulaire HTML pour la saisie
de l'utilisateur .

L' élément HTML <form> est en même temps un conteneur pour différents
types d'éléments d'entrée, tels que : champs de texte, cases à cocher, boutons
radio, boutons d'envoi, etc.

43
Formulaires HTML
Éléments de formulaire HTML

 L'élément HTML <input>

L'élément HTML <input> est l'élément de formulaire le plus utilisé.


Un élément <input> peut être affiché de plusieurs façons, selon l' attribut type .
Voici quelques exemples:
Type Description
<input type="text"> Affiche un champ de saisie de texte sur une
seule ligne

<input type="radio"> Affiche un bouton radio(pour selectionner


l’un des nombreux choix )

<input type="checkbox"> Affiche une case à cocher


<input type="submit"> Affiche un bouton pour soumettre le
formulaire

<input type="button"> Affiche un bouton cliquable


44
Formulaires HTML
Éléments de formulaire HTML

 L'élément HTML <input>

exemple:

45
Formulaires HTML
Éléments de formulaire HTML

 L'élément HTML <label>

Remarquez l'utilisation de l' élément <label> dans l'exemple ci-dessus.


La balise <label> définit une étiquette pour de nombreux éléments de
formulaire.

L' attribut for de la balise <label> doit être égal à l'attribut id de l' élément
<input> pour les lier ensemble.

46
Formulaires HTML
Éléments de formulaire HTML
 Boutons radio

<input type="radio"> définit un bouton radio. Les boutons radio permettent à


un utilisateur de sélectionner un parmi un nombre limité de choix.
Exemple:

47
Formulaires HTML
Éléments de formulaire HTML
 Cases à cocher

<input type="checkbox"> définit une case à cocher .


Les cases à cocher permettent à un utilisateur de sélectionner plus d'options
parmi un nombre limité de choix.

Exemple:

48
Formulaires HTML
Éléments de formulaire HTML
 Le bouton submit

<input type="submit"> définit un bouton pour soumettre les données du


formulaire à un gestionnaire de formulaire.
Le gestionnaire de formulaire est généralement un fichier avec un script pour le
traitement des données d'entrée.
Le gestionnaire de formulaire est spécifié dans l' attribut action du formulaire.

Exemple:

49
Médias HTML

Le média HTML est le son, la musique, les vidéos, les films et les animations.

Le média HTML se présente sous de nombreux formats différents. Il peut s'agir


de presque tout ce que vous pouvez entendre ou voir, comme des images, de la
musique, du son, des vidéos, des disques, des films, des animations, etc.

Les pages Web contiennent souvent des éléments multimédias de différents


types et formats.

50
Médias HTML
Vidéos HTML

L'élément HTML <video> est utilisé pour afficher une vidéo sur une page Web.
L' attribut controls ajoute des contrôles vidéo, comme la lecture, la pause et le
volume.

Exemple:

51
Médias HTML
Audios HTML

L'élément HTML <audio> est utilisé pour lire un fichier audio sur une page Web.

Exemple:

52

Vous aimerez peut-être aussi