Scribd
Importer
20 vues44 pages

Langage - HTML Part 1

Transféré par

tojoniainalazasoa.rakotonirina
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
20 vues44 pages

Langage - HTML Part 1

Transféré par

tojoniainalazasoa.rakotonirina
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/ 44

LANGAGE HTML (PART-1)

COURS HTML/CSS - NIVEAU: L1 - ENI


INTRODUCTION
HTML est un langage de balisage pour décrire les documents Web (pages
Web).

HTML signifie Hypertext Markup Language

Un langage de balisage est un ensemble de balises

Les documents HTML sont décrits par des balises HTML

Chaque balise HTML décrit de différent contenu du document


STRUCTURE D’UN DOCUMENT HTML

En-tête

Corps

EXPLICATION
 La déclaration DOCTYPE définit le type de document HTML
 Le texte entre <html> et </ html> décrit un document HTML
 Le texte entre <head> et </ head> fournit des informations sur le document
 Le texte entre <title> et </ title> fournit un titre pour le document
 Le texte entre <body> et </ body> décrit le contenu visible de la page
COMMENTAIRES
Les balises de commentaire <! - et -> sont utilisés pour insérer des
commentaires au format HTML.
Les commentaires ne sont pas affichés par le navigateur, mais ils
peuvent aider à documenter le code HTML.

On peut commenter les lignes de code HTML pour rechercher des
erreurs.
COMMENTAIRES CONDITIONNELS
 Les commentaires conditionnels définissent les balises HTML à
exécuter par Internet Explorer uniquement.
BALISES OU ELEMENTS HTML
Les éléments en HTML sont utilisés pour structurer du contenu, pour lui donner
du sens.
Les balises HTML sont des mots-clés (noms de balises) entourées par des signes <
et >: <tagname> contenu </ tagname>

Certains éléments HTML n’ont pas une balise de fin comme <br>. Les éléments
HTML sans contenu sont appelés éléments vides. Les éléments vides peuvent être
"fermés" dans la balise d'ouverture comme ceci: <br />.
Les éléments HTML peuvent être imbriqués (les éléments peuvent contenir des
éléments):
ATTRIBUTS D’UNE BALISE
 Les attributs fournissent des informations supplémentaires sur les
éléments HTML.
Les éléments HTML peuvent avoir des attributs
Les attributs sont toujours spécifiés dans la balise de début
Les attributs viennent en paires nom / valeur (name = "valeur") comme
dans l’exemple suivant:
ATTRIBUTS BALISES OU ELEMENTS HTML
 Les attributs suivants sont les plus utilisés dans des pages HTML
Attribut Description
alt Indique un texte alternatif pour une image
disabled Indique qu'un élément d'entrée doit être désactivé
class Indique la classe d’appartenance des éléments
href Indique l'URL (adresse web) pour un lien
id Indique un identifiant unique pour un élément
src Spécifie l'URL (adresse web) pour une image
style Spécifie un style CSS en ligne pour un élément
Indique des informations supplémentaires sur un élément (affiché comme un
title
outil de pointe)
DECLARATION <! DOCTYPE>
 Le <! DOCTYPE> aide le navigateur pour afficher une page Web
correctement.
 Il existe différents types de documents sur le web. Pour afficher un
document correctement, le navigateur doit connaître à la fois le type et la
version.
 La déclaration DOCTYPE n’est pas sensible à la casse. Les déclarations
suivantes sont acceptables:
VERSION HTML ET DECLARATION <! DOCTYPE>
OUTILS DE DEVELOPPEMENT
 Les pages HTML peuvent être créées en utilisant les éditeurs HTML
professionnels comme: Microsoft WebMatrix, Sublime Text, Netbeans,
Eclipse, Dreamweaver, etc.

 Cependant, pour apprendre le langage HTML, il est recommandé aux


débutants d’utiliser un éditeur de texte comme le Notepad++(Windows),
vim/nano(Linux).
TRAVAIL EN LOCAL VS EN PRODUCTION
Lorsque vous codez, vous pouvez travailler soit en local, soit en production.
 Travailler en local signifie travailler avec des fichiers enregistrés sur votre
propre ordinateur. Comme les fichiers ne sont que sur votre ordinateur, vous
seul pouvez voir ce que vous faîtes.
Travailler en local comporte de nombreux avantages. Le plus important est
le fait de pouvoir créer ou tester de nouvelles fonctionnalités sans impacter
le fonctionnement d’un site "live" qui serait déjà visité par des internautes.
TRAVAIL EN LOCAL VS EN PRODUCTION
 Travailler en production, au contraire, signifie intervenir sur des fichiers qui sont
déjà stockés sur un serveur web, c’est-à-dire travailler sur des fichiers déjà
accessibles via Internet. Un bon développeur commencera toujours son projet en
local, c’est-à-dire avec ses fichiers stockés sur sa propre machine.
Une fois le travail terminé, il faudra alors louer un hébergement web chez un
hébergeur, acheter et choisir une URL, c’est-à-dire une adresse web pour votre
site.
Ensuite, on va transférer tous les fichiers sur l'espace serveur que nous avons loué
chez notre hébergeur. L’hébergeur se charge alors de veiller à ce que le serveur
fonctionne toujours afin que le site soit toujours accessible via Internet.
Si on désire modifier quelques choses d’important sur le site, on crée une copie
du site live en local en récupérant tous les fichiers, et on implémentera d’abord les
modifications en local afin de minimiser le risque de bugs finaux et ainsi le temps
de maintenance sur votre site.
PREMIERE PAGE HTML
 Pour créer la première page HTML avec Notepad++, suivez les 04 étapes ci-
dessous:
 Etape 1: Ouvrir Notepad++
 Etape 2: Ecrire les codes HTML suivants:
PREMIERE PAGE HTML
 Etape 3: Enregistrer la page HTML dans le PC en cliquant sur le menu Fichier
> Enregistrer ou Enregistrer sous et nommer ce fichier en index.html
PREMIERE PAGE HTML
 Etape 4: Visualiser la page HTML sur un navigateur web de votre choix en
cliquant sur le menu Exécuter > Lancer sur Firefox par exemple.
ENTITES HTML
Les caractères réservés au format HTML doivent être remplacés par des
entités de caractères.
Ceux qui ne sont pas présents sur le clavier, peuvent également être
remplacés par des entités.
 Un caractère d’entités ressemble à: &entity_name; OU &#entity_number;
Pour afficher un signe inférieur, on doit écrire: &lt; ou &#60;
L'avantage d'utiliser un nom d'entité, au lieu d'un nombre, est que le nom
est plus facile de se rappeler. L'inconvénient est que les navigateurs ne
supportent pas tous les noms d'entité, mais le soutien pour les nombres est
bon.
ENTITES HTML
Quelques autres entités de caractères HTML utiles sont représentées dans
le tableau suivant.
Résultat Description Nom Entité Numéro Entité
non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
€ euro &euro; &#8364;
© copyright &copy; &#169;
® registered trademark &reg; &#174;
ENTITES HTML
Une marque diacritique est un "glyphe" ajouté à une lettre, comme les
accents grave et aiguë. Quelques exemples sont décrits par la suite:

Marque Caractère Constructeur Résultat


̀ a a&#768; à
́ a a&#769; á
̂ a a&#770; â
̃ a a&#771; ã
̀ O O&#768; Ò
́ O O&#769; Ó
̂ O O&#770; Ô
̃ O O&#771; Õ
ENTITES HTML
Les noms des entités sont sensibles à la casse. Quelques autres entités de
caractères HTML utiles sont représentées sur le tableau suivant.
Résultat Description Nom Entité Numéro Entité
non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
€ euro &euro; &#8364;
© copyright &copy; &#169;
® registered trademark &reg; &#174;
CODAGE DE CARACTERES (Jeux de caractères)
 ASCII a été la première norme de codage de caractères (également
appelé jeu de caractères). Il définit 127 caractères alphanumériques
différents qui pourraient être utilisés sur Internet. ASCII prend en
charge les numéros (0-9), les lettres anglaises (A-Z), et certains
caractères spéciaux comme ! $ + - () @ <>.
 ANSI (Windows-1252) a été le jeu original de caractères Windows. Elle
a soutenu 256 codes de caractères différents.
ISO-8859-1 est le jeu de caractères par défaut pour HTML 4. Il a
également pris en charge 256 codes de caractères différents.
CODAGE DE CARACTERES (Jeux de caractères)
 Comme ANSI et ISO étaient limités, le codage de caractères par défaut a
été changé en UTF-8 en HTML5. UTF-8 (Unicode) couvre presque tous les
caractères et symboles dans le monde.
 Pour afficher une page HTML correctement, un navigateur Web doit
connaître le jeu de caractères utilisé dans la page, lequel est spécifié dans
l’en-tête du document avec la balise <meta>:
EN-TETE D’UN DOCUMENT HTML: Elément <title>
 La balise <title> définit le titre du document. Elle est requise dans tous les
documents HTML / XHTML.
Le élément <title>:
 définit un titre dans l'onglet du navigateur
 fournit un titre pour la page quand il est ajouté aux favoris
 affiche un titre pour la page de résultats des moteurs de recherche dans
EN-TETE D’UN DOCUMENT HTML: Elément <style>
 L'élément <style> est utilisé pour définir les informations de style pour un
document HTML.
A l'intérieur de <style>, on spécifie comment les éléments HTML doivent
être rendus dans un navigateur.
EN-TETE D’UN DOCUMENT HTML: Elément <link>
 L'élément <link> définit la relation d’une page à une ressource externe.
 Il est le plus souvent utilisé pour relier les feuilles de style.
EN-TETE D’UN DOCUMENT HTML: Elément <meta>
 L'élément <meta> est utilisé pour spécifier la description d’une page,
mots-clés, auteur, et d'autres métadonnées.
Les métadonnées sont utilisées par les navigateurs (comment afficher le
contenu), par les moteurs de recherche (mots clés) et d'autres services
Web.
INTRODUCTION SUR LE CSS
 CSS signifie Cascading Style Sheets.

CSS a été créé en 1996 et a pour rôle de mettre en forme du contenu en lui
appliquant ce qu’on appelle des styles.

CSS permet par exemple de définir la taille, la couleur ou l’alignement d’un


texte.

HTML n'a jamais été destiné à contenir des balises pour le formatage d'une
page Web
SYNTAXE DU CSS ET SELECTEURS
 La syntaxe générale du CSS est la suivante:

Les sélecteurs CSS sont utilisés pour trouver (ou sélectionner) les éléments HTML
en fonction de leur nom d'élément, id, classe, attribut, et plus encore.
Les propriétés permettent de choisir quel(s) aspect(s) (ou "styles") d’un élément
HTML on souhaite modifier. Une propriété va être accompagnée d’une ou
plusieurs valeurs qui vont définir le comportement de cette propriété. Par
exemple, la propriété color peut prendre le nom d’une couleur (en anglais).
SYNTAXE DU CSS ET SELECTEURS
Sélecteur d’élément. Pour sélectionner tous les éléments <p> sur une page,
on écrit:
SYNTAXE DU CSS ET SELECTEURS
Sélectionner un élément unique d’attribut id. La règle de style ci-dessous
sera appliquée à l'élément HTML avec id = "para1":
SYNTAXE DU CSS ET SELECTEURS
Sélectionner des éléments d’attribut class. La règle de style ci-dessous sera
appliquée à tous les éléments HTML avec class="center":

Il est possible de spécifier que seuls les éléments HTML spécifiques
devraient être affectés par une classe. Dans l'exemple ci-dessous, seulement
les éléments <p> avec class = "center" seront alignés au centre:
SYNTAXE DU CSS ET SELECTEURS
 Si des éléments ont les mêmes définitions de style, il est possible de les
grouper comme ceci:
COMMENTAIRES EN CSS
 Les commentaires sont utilisés pour expliquer le code, et peut aider
lorsqu’on modifie le code source à une date ultérieure.
Les commentaires sont ignorés par les navigateurs.
Un commentaire CSS commence par / * et se termine par * /. Les
commentaires peuvent également étendre sur plusieurs lignes
INTEGRATION DU CSS DANS LA PAGE HTML
Le CSS peut être ajouté à des éléments HTML de 3 façons:

 En ligne: en utilisant un attribut style dans les éléments HTML

 Interne: en utilisant un élément <style> dans le code HTML <head>

 Externe: en utilisant un ou plusieurs fichiers CSS externes ( .css)


CSS EN LIGNE
 Il est utilisé pour appliquer un style unique à un élément HTML .

 Il utilise l'attribut style.


Cet exemple modifie la couleur du texte de la balise <p> en bleu:
CSS INTERNE
 Style interne est utilisé pour définir un style pour une page HTML.
Il est défini dans la section <head> d'une page HTML, dans un élément
<style> et utilise des sélecteurs.
CSS EXTERNE
Une feuille de style externe est utilisé pour définir le style de nombreuses
pages. Avec une feuille de style externe, on peut modifier l'apparence d'un
site Web entier en changeant un seul fichier.
Pour utiliser une feuille de style externe, ajouter un lien vers elle dans la
section <head> de la page HTML:
LES ELEMENTS HTML DE TYPE BLOCK ET DE TYPE INLINE
En HTML, tout élément est soit de type « block » (bloc), soit de type « inline
» (en ligne). Par exemple, l’élément p est un élément de type block tandis
que l’élément strong est un élément de type inline.
Un élément de type block va toujours commencer sur une nouvelle ligne et
prendre toute la largeur disponible dans la page.
De plus, un élément de type block peut contenir d’autres éléments de type
block ainsi que des éléments de type inline.
LES ELEMENTS HTML DE TYPE BLOCK ET DE TYPE INLINE
Exemple
LES ELEMENTS HTML DE TYPE BLOCK ET DE TYPE INLINE
Les éléments HTML de type block les plus communs sont les suivants :
 L’élément p
 Les éléments h1, h2, …
 Les éléments ul, ol
 L’élément form
 L’élément div
Les éléments de type inline ne vont pas commencer sur une nouvelle ligne
mais s’insérer dans la ligne actuelle.
Les élément de type inline prennent uniquement la largeur qui leur est
nécessaire (c’est-à-dire la largeur de leur contenu). Par exemple, l’élément
HTML strong est un élément de type inline.
LES ELEMENTS HTML DE TYPE BLOCK ET DE TYPE INLINE
Les éléments HTML de type inline les plus communs sont les suivants :
 Les éléments strong, em;
 L’élément a, img
 L’élément span
Les éléments de type inline ne vont pas commencer sur une nouvelle ligne
mais s’insérer dans la ligne actuelle.
Les élément de type inline prennent uniquement la largeur qui leur est
nécessaire (c’est-à-dire la largeur de leur contenu). Par exemple, l’élément
HTML strong est un élément de type inline.
LES ELEMENTS HTML DIV ET SPAN
Les éléments HTML div et span sont un peu spéciaux puisqu’ils ne
possèdent aucune valeur sémantique, c’est-à-dire qu’ils ne servent pas à
donner du sens à un contenu.
Les éléments div et span servent de conteneurs et faciliter la mise en
forme d’une page HTML à des niveaux différents.
UTILISATION DE L’ELEMENT HTML DIV
Les éléments HTML div est un élément de type block. Cet élément va
souvent être utilisé comme conteneur pour plusieurs autres éléments
HTML.
Il faut appliquer des styles CSS directement à cet élément afin de faciliter la
mise en forme de la page.
UTILISATION DE L’ELEMENT HTML SPAN
Les éléments HTML span est un élément de type inline. Cet élément va de
servir de conteneur pour du contenu textuel. Cet élément s’avère pratique
dans certains cas où nous aimerions mettre en forme une portion de texte à
l’intérieur d’un élément.
Cet élément sera souvent utilisé avec un attribut class afin de pouvoir le
cibler plus facilement en CSS.

Vous aimerez peut-être aussi