Cours HTML &css

HTML5
• HTML (Hypertext Markup Language) est le format

de données structurant une page web.
• HTML : langage balisage
K.zebbara 1
K.zebbara 2
HTML JAVASCRIPT
CSS
HTML5
K.zebbara 3
Structure d’un fichier
HTML
<HTML>
<HEAD> ....
....
</HEAD>
<BODY> .......
........
........
</BODY>
</HTML>
K.zebbara 4
head
• <!DOCTYPE html>
• <html>
• <head> <title> premier exemple</title>
• <meta charset=‘’utf-8’’>
• <meta name=‘’description’’ conetent=‘’ premier test
IDS ’’>
• <meta name=‘’keywords’’ content =‘’IDS, FSJES, AIT
Melloul’’>
• <meta name=‘’author’’ content=‘’estg’’>
• <meta name=‘’viewport’’ content =‘’width=device-
width, initial-scale=1.0’’> // ecran adabpation
(responsive design/ site intéractif)
K.zebbara 5
BALISE <img>
 La balise <img> pour l’intergration des images
dans une page html
- Attributs :
- * SRC = Source de l’image
- * alt = le nom affichee si le curseur sur l’image
- * width = largeur de l’image
- * height = longeur de l’image
K.zebbara 6
Les Tableaux
• Syntaxe :
K.zebbara 7
• <table></table> : pour definir un tableau
• <tr></tr> : pour definir une ligne ou rangee
• <td></td> : pour definir une cellule
• il est possible de l’utilisation de la balise <th></th>
pour les cellules de haut de colonne
- Autres attributs :
- - border : taille des bords
- -width : largeur de table en % ou pixels
K.zebbara 8
- Bgcolor : mettre un fond de couleur
Ex :
Fusionner les lignes et colonnes :

- Attribut colspan fusionner dans meme ligne
- - rowspan dans meme colonne
K.zebbara 9
K.zebbara 10
K.zebbara 11
Balise <a></a>
• Utilisation : Pour les liens
- Href : pour le lien

- Target : _blank ouverture de lien dans nouvelle
fenetre et _self dans la meme fenetre
K.zebbara 12
• Les liens internes ????? :
- Comme les liens dans un article dans wiki
- Exemple :
- - La balise <div id=‘’Nom‘’ ></div>
K.zebbara 13
Les listes
• <ul type="circle">
• <li>LP IDS</li>
• <li>LI IS</li>
• </ul>
• ---------------
• <ul type="square">
• <li>LP IDS</li>
• <li>LI IS</li>
• </ul>
• ------------------
• <ol> par defaut 1,2,...
• <li>LP IDS</li>
• <li>LI IS</li>
• </ol>
• --------------
K.zebbara 14
• <ol start="10">
• <li>LP IDS</li>
• <li>LI IS</li>
• </ol>
• -------------------
• <ol type="i,I,A,a,1">
• <li>LP IDS</li>
• <li>LI IS</li>
• </ol>
• ----------------------
K.zebbara 15
• <dl>
• <dt>LP IDS</dt>
• <dd>Programmation web</dd>
• <dd>Merise</dd>
• <dt>LP IS</dt>
• <dd>Meca</dd>
• <dd>FFFFFFFFFF</dd>
• </dl>
K.zebbara 16
Les formulaires
• La balise <input> : Definit les controles utilises dans un
formulaire :
- les controles :
• color
• date
• datetime
• datetime-local
• email
• month
• number
• tel
• time
• url
• week
K.zebbara 17
• <form name=‘’F1’’ method=‘’Get / Post’’
action=‘’page.php/html/aspx’’>
.....
.....
.....
.....
</form>
K.zebbara 18
Quelques attributs de
input
- Pattern : Cette attribut pour tester les entrees
- Placeholder : Pour faciliter la comprendre les zones
de textes ...
- Exemple :
K.zebbara 19
La balise video et audio
K.zebbara 20
La balise iframe et object
K.zebbara 21
CSS
Cascading Style
Sheets
K.zebbara 22
Le Plan:
I. Utilités de CSS.
II. Définition d'un style.
III. Styles internes, Styles externes.
IV. Les classe, <SPAN> et <DIV> .
V. Liste des propriétés.
K.zebbara 23
Utilités de CSS:
• Séparation du contenu et de la mise en forme.
• Un "langage" neuf, compréhensible, simple et
logique par rapport au Html et à ses différentes
versions.
• Réduire le temps de chargement des pages.

• Une façon d'écriture concise et nette par rapport
au Html qui devient vite fouillis.
K.zebbara 24
Définition d'un style:
La définition de base d'un style est simple :
balise { propriété de style: valeur; propriété de
style: valeur }
Exemple :
H3 { font-family: Arial; font-style: italic }
K.zebbara 25
Styles internes, Styles
externes:
A. Styles internes:
A l'intérieur des balises <HEAD></HEAD>:
<HTML><HEAD><STYLE type="text/css">

</STYLE> </HEAD><BODY>
K.zebbara 26
B. Styles externes:
Il consiste à placer la feuille de style dans un fichier séparé, et
à y faire référence dans l’entête du document. Cette dernière
technique permet de réutiliser la même feuille de style dans
plusieurs documents.
On crée d'abord, dans le répertoire du site, un fichier avec
l'extension .css soit styles.css qui contiendra toutes les feuilles
de style.
<HTML><HEAD>
--- Les différentes feuilles de style ---
</HEAD><BODY>
</BODY></HTML>
Ensuite, on crée une page normale soit page1.htm (bien
entendu dans le même répertoire que le fichier styles.css).
<HTML> <HEAD><LINK rel=stylesheet type="text/css"
href="styles.css"> <HEAD>
K.zebbara 27
Les Classe, <SPAN>,
<DIV>
I. Notion de classes:
Une classe est un style indépendant que l'on peut
appliquer à toute balises HTML.
La syntaxe est ici aussi des plus simple.
La définition d'un style était : balise { propriété de style:
valeur }
Elle devient : balise.nom_de_classe { propriété de style:
valeur }
Le point devant nom_de_classe indique la création d'une
nouvelle classe appelée nom_de_classe.
K.zebbara 28
Pour appeler l'effet de style dans le document, on
ajoute le nom de la classe à la balise.
<balise class="nom_de_classe"> .... </balise>
 Un exemple:
.essentiel { font-weight: bold; font-color: #000080 }
Et dans le document Html, il suffit d'appeler la classe
.essentiel quand cela se révèle nécessaire :
<P class="essentiel"> ... blabla ... </P>
<H1 class="essentiel">Titre 1</H1>
<TABLE><TR><TD class="essentiel">cellule</TD></TD>...
K.zebbara 29
II. <SPAN>:
La balise <SPAN> ... </SPAN> permet d'appliquer des
styles à des éléments de texte d'un paragraphe ou si
vous préférez à un morceau de paragraphe. Ainsi je
voudrais écrire :
Un monde de géants .
<HTML> <HEAD>
<STYLE type="text/css">
.element{font-size: x-large; color: navy}
</STYLE></HEAD>
<BODY>
<P>Un monde de <SPAN
class=element>géants</SPAN>.</P>
</BODY>
</HTML>
K.zebbara 30
III. <DIV>:
La balise <DIV> ... </DIV> permet de regrouper
plusieurs paragraphes ou si vous préférez, de délimiter
une zone comportant plusieurs paragraphes.
<HTML><HEAD> <STYLE type="text/css">
.zone{font-size: x-small}
</STYLE></HEAD>
<BODY> La balise <DIV>
<DIV class=zone> <P>Commentaire :</P> <P>
N'oubliez pas l'attribut class!</P></DIV>
</BODY>
</HTML>
K.zebbara 31
Donne comme résultat :
La balise <DIV>
Commentaire :
N'oubliez pas l'attribut class!
K.zebbara 32
Liste des propriétés
 Les styles de police:
1.font-family :définit un nom de police ou une famille
de police.
H3 {font-family: Arial}
2. font-style :définit le style de l'écriture.
H3 {font-style: italic}
3. font-size: définit la taille de la police.
P {font-size: 12pt}
K.zebbara 33
 Les styles du texte:
1. text-align: définit l'alignement du texte.
H1 {text-align: center}
2.text-transform: définit la casse du texte (majuscule,
minuscule).
P {text-transform: uppercase}
3. color: définit la couleur du texte.
H3 {color: #000080}
K.zebbara 34
 Les listes:
1.list-style-type :détermine le type de puces ou
de numérotation
OL {list-style-type: square}
2.list-style-image: permet de remplacer les
puces par une image
OL {list-style-image: image.gif}
3.list-style-position : spécifie si les puces sont à
l'intérieur ou à l'extérieur du texte
UL {list-style-position: inside}
K.zebbara 35
 Les arrière-plans:
1.background-color :définit la couleur de l'arrière-
plan.
H1 {background-color: #000000}
2.background-image: définit l'image de l'arrière-
plan
BODY {background-image: image.gif}
3.background-repeat :définit la façon de répéter
l'image d'arrière-plan P {background-image:
image.gif; background-repeat: repeat-4}
4.background-attachment :spécifie si l'image
d'arrière-plan reste fixe avec les déplacements de
l'écran
BODY {background-image: image.gif; background-
attachement: fixed}
K.zebbara 36

Cours HTML &css

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours HTML &css

Transféré par

Droits d'auteur :

Formats disponibles

HTML5

• HTML (Hypertext Markup Language) est le format

• HTML : langage balisage

Fusionner les lignes et colonnes :

- Href : pour le lien

- - La balise <div id=‘’Nom‘’ ></div>

• Réduire le temps de chargement des pages.

N'oubliez pas l'attribut class!

Vous aimerez peut-être aussi