Scribd
Importer
166 vues59 pages

Partie 1 Introduction Au Langage HTML

Ce document présente les bases du langage HTML. Il introduit les principaux éléments et balises HTML comme le doctype, les balises head et body, ainsi que des éléments de formatage de texte comme les titres, paragraphes, caractères spéciaux. Le document présente également des bonnes pratiques pour le codage HTML.

Transféré par

ÏBrąhîm
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
166 vues59 pages

Partie 1 Introduction Au Langage HTML

Ce document présente les bases du langage HTML. Il introduit les principaux éléments et balises HTML comme le doctype, les balises head et body, ainsi que des éléments de formatage de texte comme les titres, paragraphes, caractères spéciaux. Le document présente également des bonnes pratiques pour le codage HTML.

Transféré par

ÏBrąhîm
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/ 59

COURS DE DÉVELOPPEMENT WEB

Première partie: Introduction au langage


HTML

UADB – UFR SATIC


L2 SID
HTML & CSS : DEFINITION

 HTML = HyperText Markup Language.


• Créé en 1991
• Fonction : donner du sens et structurer le contenu

 CSS = Cascading Style Sheets


• Créé en 1996
• Fonction : mettre en forme le contenu en lui ajoutant des styles
LES VERSIONS HTML & CSS

 Versions actuelles :

 HTML5 & CSS3

 Toutes les deux non finalisées (encore en développement) mais

totalement stables et déjà très largement utilisées.

 Introduisent de nouvelles fonctionnalités très attendues : insérer des

vidéos, bordures arrondies, etc.


UN MOT SUR LE XHTML

 XHTML = Extensible HTML

 Version plus stricte, plus codifiée d’HTML… Donc plus difficile à utiliser !

 Créé en 2000 pour succéder au HTML puis abandonné en 2009 (ou plus

exactement intégré dans le HTML5).


L’EDITEUR DE TEXTE

 Pour coder en HTML ou en CSS, nous n’avons besoin que d’un éditeur

de texte, gratuit

 Pc = Sublime Text, NotePad++, etc.

 Mac = Sublime Text, TextWrangler, etc.

 Linux = Sublime Text, gEdit, etc.


LES FONDATIONS DU HTML
ELEMENTS, BALISES & ATTRIBUTS

 Eléments =
 Définissent des objets dans notre page web
• L’élément p définit un paragraphe,
• Les éléments h1, h2, … , h6 définissent des titres,
• L’élément a définit un lien…
 Généralement constitués d’une paire de balises :
• Balise ouvrante : <p>
• Balise fermante : </p>
• Exception : balises orphelines comme <br/> (qui permet le retour
a la ligne)
ELEMENTS, BALISES & ATTRIBUTS

 Attributs =
 Propriétés utilisées pour donner des indications supplémentaires aux
éléments.
 Ex: Indiquer la cible d’un lien.
STRUCTURE D’UNE PAGE EN HTML5

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Bonjour monde </title>
</head>

<body>
Ceci est tout simple
</body>
</html>
EXEMPLE

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Bonjour monde </title>
</head>

<body>
Ceci est tout simple
</body>
</html>
LE DOCTYPE

 La toute première ligne s'appelle le doctype. Elle est indispensable car


c'est elle qui indique qu'il s'agit bien d'une page web HTML.
 Ce n'est pas vraiment une balise comme les autres.
 Elle commence par un point d'exclamation.
L'en-tête <head>  et le corps <body>

 Une page web est constituée de deux parties :


 L'en-tête <head>  :
o cette section donne quelques informations générales sur la page, comme son
titre, l'encodage (pour la gestion des caractères spéciaux), etc. Cette section
est généralement assez courte.
o Les informations que contient l'en-tête ne sont pas affichées sur la page, ce
sont simplement des informations générales à destination de l'ordinateur.
 Le corps <body>  :
o c'est là que se trouve la partie principale de la page. Tout ce que nous écrirons
ici sera affiché à l'écran. C'est à l'intérieur du corps que nous écrirons la
majeure partie de notre code.
VOTRE PREMIÈRE PAGE HTML
L’EN-TÊTE

 TITLE indique le nom du document HTML, qui sera affiché dans la barre de titre.

 Exemple:

<HEAD><TITLE>Ma première page en HTML</TITLE> </HEAD>

voir aussi <META>, <SCRIPT>, etc.


L’EN-TÊTE

 La balise META permet de donner des « meta-informations » sur le document.

 Exemple:

<meta name="author" content="G. Chagnon">


<meta name="keywords" content="HTML, initiation">
<meta name="description" content="Cette page fournit une introduction au langage
HTML">
<meta name="date" content="2003-09-19T16:55:37+01:00">
AVANTAGES DE LA VERSION HTML5 (1)
 Les navigateurs mobiles crashent beaucoup plus rarement qu’avant. La
version HTML ne fournissait pas de support assez efficace pour les appareils
mobiles.
 L’utilisation complète des sites sur mobile est capitale, puisque près de
30% des utilisateurs mobiles détestent télécharger des applications.
 Donc, si un utilisateur veut utiliser les services de l’entreprise mais ne veut
pas télécharger son application, il devrait pouvoir simplement se connecter
sur le site Web de l’entreprise pour le faire.
AVANTAGES DE LA VERSION HTML5 (2)

 L’utilisation de JavaScript et de MPEG4 en conjonction avec HTML5 a


rendu la vie bien plus facile aux utilisateurs.

 La capacité à prendre en charge les éléments audio et vidéo nativement


signifie que les utilisateurs n’auront pas à télécharger de plugins
supplémentaires pour afficher des fichiers multimédias sur un site Web.

 Ce support multimédia fourni par HTML5 est l’une des principales raisons
pour lesquelles il est aujourd’hui utilisé beaucoup plus souvent que la
version HTML.
FORMATAGE DU TEXTE : LES TITRES

 H1 -> H6 Définit 6 niveaux pour les titres. Chaque niveau possède son
propre style.
FORMATAGE DU TEXTE : LES TITRES

 Paramètres : L’attribut ALIGN spécifie l’alignement horizontal d’un


titre
 ALIGN = LEFT/RIGHT/CENTER

<H1 align="right">
FORMATAGE DU TEXTE : LES PARAGRAPHES

 P Constitue un nouveau paragraphe = un double retour à la ligne.

 Paramètres : L’attribut ALIGN spécifie l’alignement horizontal d’un paragraphe

 ALIGN = LEFT/RIGHT/CENTER

<P align="right">
EXERCICE 1
BONNES PRATIQUES, REGLES & COMMENTAIRES

 NB:
 Vous noterez que les balises s'ouvrent et se ferment dans un ordre précis.
 Par exemple, la balise <html> est la première que l'on ouvre et c'est aussi la
dernière que l'on ferme (tout à la fin du code, avec </html> ).
 Les balises doivent être fermées dans le sens inverse de leur ouverture.
 Un exemple :
<html><body></body></html> : correct. Une balise qui est ouverte à l'intérieur d'une
autre doit aussi être fermée à l'intérieur.
<html><body></html></body> : incorrect, les balises s'entremêlent.
BONNES PRATIQUES, REGLES & COMMENTAIRES

 Vous pouvez imbriquer des balises l’une dans l’autre mais vous devez
les refermer dans le bon ordre : <a> <b> </b> </a>.
 Indentez votre code et commentez le pour le rendre plus lisible, plus
professionnel et plus simple à comprendre.
BONNES PRATIQUES, REGLES & COMMENTAIRES

 <!-- Voici un commentaire en HTML -->

Tout le monde peut voir votre code HTML ! N’écrivez donc


pas d’infos sensibles en commentaires comme des mots de
passe !
LES PARAGRAPHES

Pour aligner du texte, on peut utiliser l'attribut ALIGN avec la balise <P>
lui affectant la valeur Center , ou le tag <CENTER>. Il existe une balise
permettant d'aligner différents éléments. c'est le tag : 58 et 60

<DIV align=left>...</DIV>
<DIV align=center>...</DIV>
<DIV align=right>...</DIV>
LES PARAGRAPHES

Le tag <BLOCKQUOTE> permet de décaler le paragraphe à


droite
LES CARACTÈRES SPÉCIAUX
 Pour afficher les symboles <, >, &, " sans qu'ils ne soient interprétés
comme des délimiteurs de marqueurs, il faut utiliser les codes suivant :
&lt; <

&gt; >

&amp; &

&quot; "
LES CARACTÈRES SPÉCIAUX

Code Majuscule obtenue Code Minuscule obtenue


&Aacute; Á &aacute; á
&Agrave; À &agrave; à
&Acirc; Â &acirc; â
&Atilde; Ã &atilde; Ã
&Aring; Å
&Auml; Ä &aulm; ä
&Aelig; Æ &aelig; æ
&Ccedil; Ç &ccedil; ç
&Eacute; É &eacute; é
&Egrave; È &egrave; è
&Ecirc; Ê &ecirc; ê
LES SÉPARATEURS

 <br> saut de ligne (sans balise fermante)


 <hr> ligne horizontale
 Paramètres :
SIZE : spécifie l’épaisseur de la barre
WIDTH : Spécifie la longueur de la ligne
ALIGN : Spécifie l’alignement de la ligne

<hr size=epaisseur width=largeur align=alignement color=couleur >


LE TEXTE DANS LES PAGES WEB
<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>texte simple<BR>
<B>texte en gras</B><BR>
<STRONG>texte en gras</STRONG><BR>
<I>texte en italique</I><BR>
<EM>texte en italique</EM><BR>
<B><I>texte en gras et en italique</I></B><BR>
<FONT SIZE=5>texte</FONT>
<FONT COLOR="#0000FF">en bleu</FONT>
<!--C'est fini-->
</BODY>
</HTML>
LE TEXTE DANS LES PAGES WEB
LE TEXTE DANS LES PAGES WEB

 <sup> le texte sera mis en exposant


 <sub> le texte sera mis en indice
 <s> le texte sera barré
LES POLICES

 Avec la balise <font> on peut jouer sur la taille ( size =“1”  ), la couleur
( color =“green” ) et la police des caractères ( face =“Arial” )
 <FONT SIZE=5>texte</FONT>
 <FONT COLOR=blue face= arial  size= 20> coucou</FONT>
VOICI LES CODES DE QUELQUES COULEURS BASIQUES.

Bleu #0000FF Vert #00FF00

Blanc #FFFFFF Violet #8000FF

Rouge #FF0000 Jaune #FFFF00

Gris clair #C0C0C0 Noir #000000


STRONG, MARK, EMPHASIS

 L’élément strong est utilisé pour définir un contenu comme important.


 L’élément em est utilisé pour définir un contenu comme assez
important.
 L’élément mark est utilisé pour faire ressortir du contenu.
OPTION DE BODY

 BACKGROUND : Permet de mettre une image dans le fond de la page.


Exemple : <BODY BACKGROUND="cahier.gif">

 BGCOLOR : Permet de changer la couleur de l'arrière plan sans avoir à


charger une image, là aussi, il faudra veiller à ce que le texte et les liens
soient visibles dans tous les cas. Par défaut, le fond de page est en blanc,
le texte en noir, les liens en bleu souligné, les liens activés en rouge et les
liens visités en violet.
OPTION DE BODY

 TEXT : Permet de changer la couleur du texte, par défaut cette


couleur est en principe le noir, mais elle peut-être changée dans les
préférences du browser.
 LINK : Permet de changer la couleur des liens.
 ALINK : Permet de changer la couleur des liens sélectionnés.
 VLINK : Permet de changer la couleur des liens déjà visités.
<BODY BGCOLOR="couleur" TEXT="couleur" LINK="couleur"
ALINK="couleur" VLINK="couleur">.
LISTE NON NUMÉROTÉE
<UL>
 <LH>Entête en option</LH>
 <LI>Point numéro1</LI>
 <LI>Point numéro2</LI>
 <LI>Point numéro3</LI>
 <LI>Point numéro4</LI>
</UL>
LISTE NUMÉROTÉE
<OL>
 <LH>Entête en option</LH>
 <LI>Point numéro1</LI>
 <LI>Point numéro2</LI>
 <LI>Point numéro3</LI>
 <LI>Point numéro4</LI>
</OL>
LE TYPE DES LISTES
LISTES DE DEFINITIONS & LISTES IMBRIQUEES

Vous pouvez très simplement imbriquer des listes en HTML :


<ul>
<li> Elément 1 </li>
<li> Elément 2
<ol>
<li> Elément 1</li>
<li> Elément 2</li>
</ol>
</li>
</ul>
EXERCICE 2
LIENS INTERNES ET EXTERNES

Liens internes = entre 2 pages d’un même site.


Liens externes = d’un site vers un autre site.
Pour créer des liens, on utilise l’élément a avec son attribut href
(Hypertext reference).
LIENS INTERNES ET EXTERNES

 Pour créer des liens internes, on utilise un chemin relatif. 3 cas :


 Même dossier : href = « page2.html »
 Sous-dossier : href = « sous_dossier/page2.html »
 Dossier parent : href=« ../page2.html »
 Pour des liens externes, on spécifie un chemin absolu. La valeur de
l’attribut href est l’adresse du site.
 Pour ouvrir le lien dans une nouvelle fenêtre / onglet, on utilise
l’attribut target et sa valeur « _blank ».
AUTRES TYPES DE LIENS

 Lien menant à un autre endroit de la même page web : spécifier un id


puis #.
 Lien pour envoyer un mail avec mailto
 Lien pour télécharger un fichier en précisant un chemin relatif.
ELEMENTS STRUCTURELS DU HTML5

 Créés pour améliorer la sémantique et mieux structurer les pages


web.
 Eléments introduits : header, nav, article, section, aside et footer.
 Vont avoir un rôle de plus en plus important dans le futur concernant
l’optimisation du référencement.
VALIDATION & COMPATIBILITE

 Différents navigateurs peuvent produire différents résultats à partir


d’un même code.
 Pourquoi ? Différents navigateurs et différents versions de chaque
navigateurs coexistent + navigateurs mobiles !
 Nécessité de tester son code sous différents navigateurs !
IMAGES

 <img src=“chemin”> ou
 <img src=URL>

 <img src=“mon_image.gif” align=TOP alt=“nom_d_image”>

 <a href=“URL”> <img … > </a>


IMAGES
TABLEAUX

 HTML permet de réaliser des tableaux avec réglage de l'encadrement, de la


taille et de l'espacement des cellules.
 Chaque cellule peut contenir du texte, des listes, des images, des liens
hypertextes, des éléments de formulaire...
 Structure d'un tableau:
 L'élément TABLE correspond au tableau lui-même;
 L'élément TR est utilisé pour définir chacune des lignes du tableau;
 L'élément TD est utilisé pour chaque cellule.
TABLEAUX
TABLEAUX
TABLEAUX
TABLEAUX (EXEMPLE 1)
TABLEAUX (EXEMPLE 2)
EXERCICE 3
EXERCICE 4
PARTIE 2: LES FORMULAIRES

A suivre!!!

Vous aimerez peut-être aussi