Vous êtes sur la page 1sur 43

LANGAGE

HTML/CSS3
Présentée par Mme Berkat ,Z 1

master 2:réseaux et télécoms


LANGAGE HTML
Généralité

Les versions HTML

XHTML

Code HTML

Travaux pratiques

master 2:réseaux et télécoms 2


HTML/CSS DÉFINITION
▪ HTML=Hyper text markyp language
Crée en 1991
Fonction : donner de sens et structure le contenue
▪ CSS=cascading style sheets
Inventée en 1996
Fonction: mettre en forme le contenue, on lui ajoutant de style

master 2:réseaux et télécoms 3


POURQUOI
APPRENDRE
HTML/CSS
Les langages HTML /CSS sont incontournables car n’ont pas de concurrents 4
Le HTML représente le contenu d'une page et sa sémantique ; pour contrôler son apparence visuelle, un
autre langage est utilisé, CSS,
Ces deux projets sont a la base de tout page web , application Mobile un blog
Comprendre le code HTML/CSS va nous permettre de modifier et résoudre les problèmes de n importe
quelle site web
master 2:réseaux et télécoms
LES VERSIONS HTML/CSS
▪ C’est HTML5/CSS3
▪ Ce sont deux versions qui sont pas finaliser , ce qui veux dire qui sont encore en
développement,
▪ Produisent des nouvelles très attendues ,insérer des vidéos , bordures arrondies ,

master 2:réseaux et télécoms 5


UN MOT SUR LE XHTML
▪ XHTML= extensible HTML
▪ Créer en 2000 et abandonnée en 2009
▪ Ce code est très difficile , et version plus stricte ,
▪ Intégration HTML5

master 2:réseaux et télécoms 6


VOS PREMIERS OUTILS

Pour coder en HTML ou en CSS , nous n’avons besoin que d’un éditeur de texte gratuits :
• d'un éditeur de texte tout simple comme par exemple le Bloc-notes ou Notepad de Windows
ou tout autre équivalent dans votre système d'exploitation.
windows : wordpad++ ,komodo
Linux: édit ,komodo

master 2:réseaux et télécoms 7


VOS PREMIERS OUTILS
▪ Un browser exemple : Microsoft Explorer , Mozilla (gratuit également) à télécharger
▪ Vous n’avez pas besoin d'être connecté pour écrire, ou voir vos pages Html.

master 2:réseaux et télécoms 8


CODE SOURCE D’UNE PAGE
WEB

master 2:réseaux et télécoms 9


LES FONDAMENTALES EN
HTML
Eléments ,BALISE , ATTRIBUE
-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 balise:
▪ Balise ouvrante :<p>
▪ Balise fermante :</p>
▪ Exception : balise orpheline comme <br/>

master 2:réseaux et télécoms 10


ELÉMENTS ,BALISE , ATTRIBUE
▪ Attributs =
-Propriétés utilisées pour donner des indications supplémentaires aux éléments ,
Ex: indiquer la cible d’un lien
balise ouvrante balise fermante

<a href=‘’ http://www,youtube,com’’>le site YouTube </a>

Attribue Elément a

master 2:réseaux et télécoms 11


STRUCTURE D’UNE PAGE EN HTML5

▪ Doctype:<!DOCTYPE html>
▪ Elément :
❑ Html
❑ Head
❑ Title
❑ Meta
❑ Body
master 2:réseaux et télécoms 12
EXEMPLE D’UN CODAGE
MINIMAL EN HTML

master 2:réseaux et télécoms 13


TP0

master 2:réseaux et télécoms 14


AJOUTANT UN
COMMENTAIRE AU
PROGRAMME
Exemple : <!--charset = le type de codage -->

master 2:réseaux et télécoms 15


PARAGRAPHE ,TITRE
,RETOUR À LA LIGNE

PARAGRAPHE

master 2:réseaux et télécoms 16


PARAGRAPHE ,TITRE
,RETOUR À LA LIGNE
Affichage

Titre

Affichage

master 2:réseaux et télécoms Retour à la ligne 17


D’AUTRES ÉLÉMENTS DE
LANGAGES HTML

❖ <strong > </strong>


❖ <em> </em>
❖ <mark> </mark>

master 2:réseaux et télécoms 18


TEXTE
Tout document Html contiendra en majorité du texte. Voyons comment l'agrémenter par
quelques balises élémentaires:

EXEMPLE :
<FONT COLOR="#0000FF">en
bleu</FONT>

master 2:réseaux et télécoms 19


LES LISTES EN HTML: NON
ORDONNÉE , ORDONNÉE

master 2:réseaux et télécoms 20


EXEMPLE DE LISTE DE DÉFINITION

master 2:réseaux et télécoms 21


TABLEAU
Un tableau simple

master 2:réseaux et télécoms 22


COMMENT INTÉGRER UNE IMAGE
À UNE PAGE WEB ?
Au début, le Web n'était que du texte, ce qui était un peu ennuyeux. Heureusement, il n'a pas
fallu longtemps pour que la possibilité d'intégrer des images ( et d'autres types de contenu
intéressants) dans une page web soit ajoutée,
si votre image se trouve dans le même répertoire que ton projet HTML donc le codage sera
comme suivant :

master 2:réseaux et télécoms 23


LE TRAVAIL À EFFECTUÉ
(TP2)

master 2:réseaux et télécoms 24


LES LIENS
❑ Pour créer des liens internes , on utilise un chemin relatif en 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’attribu target et sa valeur
Création des liens
La balise <a> permet de créer un lien vers un site ou une page
exemple google.fr:
<a href="http://www.google.fr">Site de Google</a>

master 2:réseaux et télécoms 25


LIENS EXEMPLE2:

lien Nv fenêtre

master 2:réseaux et télécoms 26


▪ LE TRAVAIL À EFFECTU
(FORMULAIRE) (TP3)

master 2:réseaux et télécoms 27


LANGAGE CSS3
Généralités

Les versions HTML

Principe de base

Les exemples

Travaux pratiques

master 2:réseaux et télécoms 28


INTRODUCTION
▪ Le langage CSS (Feuille de style en cascade, Cascading Style Sheets en
anglais) est un langage de feuille de style qui sert à appliquer des styles sur
différents éléments dans un document HTML.
▪ Il est un langage complémentaire à HTML qui permet de séparer la
présentation d’un élément (CSS) de son contenu (HTML).

master 2:réseaux et télécoms 29


LA VERSION CSS3
▪ Dés la spécification CSS 3, le langage CSS a été développé sous la forme de modules
indépendants, dans le but que des modules “prêts” puissent être implémentés rapidement par
les navigateurs.

▪ Cet objectif a été atteint, et de nombreux modules sont actuellement bien supportés par les
navigateurs et utilisés au quotidien (p.ex. WebFonts, Media Queries, Flexbox, Backgrounds &
Borders), alors que d’autres sont encore en développement.

master 2:réseaux et télécoms 30


OU ÉCRIRE LE CSS ?
3 possibilités:

Dans l’élément Head du document HTML


Dans la balise ouvrante d’un élément
Dans un fichier CSS séparé

Il est recommandé d’utiliser la dernière méthode


Pour lier un fichier HTML avec un fichier CSS on écrit:

<link rel=« stylesheet » href=« fichiercss,css »/>

master 2:réseaux et télécoms 31


PRINCIPES DE BASE
Le langage CSS permet de définir des règles, qui sont
exprimées sous forme de couples propriété:
Sélecteur , propriétés ,valeurs
Exemple :

❑ Un sélecteur détermine à quel élément un style doit être appliqué .


❑ Une propriété détermine le style qui va être appliqué ç un élément.
❑ Une valeur détermine le comportement d’une propriété .
master 2:réseaux et télécoms 32
RÈGLES DE RÉDACTION
• Les accolades ( { } ) fixent les limites d'un bloc de déclarations. Un bloc de déclaration
comprend l'ensemble de toutes les déclarations composant un style.

• Une déclaration est composée du nom d'une propriété, suivi du caractère deux-points ( : ) puis
des valeurs associées à la propriété.

• Chaque déclaration doit être terminée par un ;

master 2:réseaux et télécoms 33


EXEMPLE

Dans cet exemple, nous avons :


•le sélecteur : h1
•le bloc de déclaration, qui contient deux déclarations : color: red; et text-transform: uppercase;
•la première déclaration définit une propriété : color avec la valeur : red
•la seconde déclaration définit la propriété text-transform avec la valeur : uppercase

master 2:réseaux et télécoms 34


TEST AVEC HTML
Pour tester notre exemple CSS, on va
utiliser la balise <style> qui permet de
définir notre feuille de styles directement
dans notre document HTML. On va placer
cette balise dans l’en-tête de notre
document. Le code complet de notre
exemple sera :

master 2:réseaux et télécoms 35


CSS EN HTML

Les attributs utilisés de la balise <link> sont :


•href définit l’URL de notre fichier CSS.
•rel définit la relation entre le document HTML et ce fichier. Il doit toujours être “stylesheet” pour le fichier
CSS.
•type définit le type du fichier. Il doit toujours être “text/css” pour le fichier CSS.

master 2:réseaux et télécoms 36


Séparation de code HTML

En appliquant les changements nécessaires pour séparer


notre code CSS de notre document HTML de l’exemple
précédent, le résultat sera :

master 2:réseaux et télécoms 37


EXEMPLE
<style >
p,h1 {
Color:blue;
}
</style>

<h1 style =‘’ color : blue;’’ > Introduction </h1>


<p style =‘’color:blue ;’’> ceci est ma premiere page web en
html <p>

master 2:réseaux et télécoms 38


COMMENTAIRE EN CSS3
Pour commenter en CSS on utilise des commentaires de style de langage C /*

/* Un commentaire simple*/

/* Un commentaire * multi-ligne */
h1 { /* un commentaire dans le bloc */ color: red; /* text-transform: lowercase; */ text
transform: ; }

master 2:réseaux et télécoms 39


LES CLASSES ET ET ID EN
CSS3
Classe (s)
permet d'associer un (ou plusieurs) style(s) à un élément HTML sélectionné(s) par la valeur de (ou
des) l'attribut(s) "class.
Id
idem, mais sélectionné par la valeur de l'attribut "id" (unique)
/* CSS pour
HTML*/

<!-- HTML --> #grand {font-size : 20pt; }


p#central {
<p id= "grand"> en 20pt</p>
text-align : center;
<p id= "central"> centré en rouge </p>
color: red;}
<h1 class="center red">
titre au centre et en rouge </h1> p.red {color: red; }
<p class="left"> à gauche </p> p.left {text-align: left; }
.center {text-align: center; }
master 2:réseaux et télécoms 40
EXEMPLE
<html><head> <style>
p {text-align: center; color: red;}
p.right {text-align: right}
p.center {text-align: center}
.center {text-align: center}
#green {color: green}
p#para1{ text-align: left; color: pink}
</style> </head>
<body >
<p> This paragraph will be center-aligned and red-colored. </p>
<p class="right"> This paragraph will be right-aligned and also red. </p>
<p class="center"> This paragraph will be center-aligned and also red. </p>
<h1 class="center"> This heading will be center-aligned but black. </h1>
<p class="center"> This paragraph will also be center-aligned and red.</p>
<h2 id="green" class="center" >Subtitle centered in green.</h2>
<p id="para1"> This paragraph will be left-aligned and pink-colored.</p>
</body> </html>

master 2:réseaux et télécoms 41


AJOUTER DU STYLE CSS3 AU
PHOTOS

master 2:réseaux et télécoms 42


FORMULAIRE ,TABLEAU EN
HTML5/CSS3 (TP4)

master 2:réseaux et télécoms 43