Création des sites WEB

Statiques

Création de sites web statiques Réalisé par Mme N .MGHARBI 1

Formatrice à l’OFPPT
 Partie I
HTML5 & CSS3
Les notions de base

Création de sites web statiques Réalisé par Mme N .MGHARBI 2

Formatrice à l’OFPPT
Plan
 Introduction
 Apprendre LE HTML et CSS
 Définitions et rôles
 Historique
 Méthodologie du travail
 Editeurs de texte

Création de sites web statiques Réalisé par Mme N .MGHARBI 3

Apprendre le HTML et le CSS
 Les langages HTML et CSS sont indispensables
pour tout projet web
 Deux standards qui ne possèdent pas de
concurrents
 Pourquoi ne pas directement utiliser:
 Un framework?
 Un éditeur WYSIWYG?
 Apprendre le HTML et le CSS, permet de
comprendre et de se faire comprendre par les
autres développeurs avec qui on travaille
Création de sites web statiques Réalisé par Mme N .MGHARBI 4
Définitions et rôles
 HTML =HyperText Markup Language
 Langage de balisage

 Sert à marquer les différents contenus:

 Titre, paragraphe, vidéo, image, boutons, …

 CSS = Cascading StyleSheets

 Langage de styles

 Sert à mettre en forme du contenu

 Taille du texte, police, couleur du fond, bordures, …

 Attention: Eviter la mise en forme avec le HTML

Création de sites web statiques Réalisé par Mme N .MGHARBI 5

Historique et versions
1991 • HTML
1994 • HTML 2 + W3C
1996 • CSS1 + JavaScript
1997 • HTML 4
1998 • CSS 2
2009 • HTML 5
2014 • HTML 5.1
Création de sites web statiques Réalisé par Mme N .MGHARBI 6
Historique et versions
 Html5
 Un nouveau doctype simplifié et unifié.
 De nouvelles balises sémantiques ou
d’organisation.
 De nouvelles balises audio et vidéo qui ne
nécessitent plus l’appel à des plugins dédiés.
 Le dessin 2D et bientôt 3D par la nouvelle balise
<canvas>.

Création de sites web statiques Réalisé par Mme N .MGHARBI 7

Historique et versions
 CSS3
 De nouveaux sélecteurs.
 Les bords arrondis.
 Les bordures imagées.
 Les polices personnalisées
 La présentation en plusieurs colonnes d’un texte.
 Les ombres sur le texte comme sur les éléments.
 Les dégradés de couleur.
 Les arrière-plans multiples…. etc
Création de sites web statiques Réalisé par Mme N .MGHARBI 8
Méthodologie du travail
 Travailler en local: « Hors ligne »
 Sur son propre poste du travail

 Ne pas impacter directement son site

 Travailler en production « En ligne »

 Tout changement impacte le site

 La meilleure méthode consiste à copier tous les fichiers

du site sur son propre ordinateur afin d’effecteur toutes
les modifications nécessaires et les tester avant de louer
un hébergement sur un hébergeur web en lui affectant
un URL

Création de sites web statiques Réalisé par Mme N .MGHARBI 9

Editeurs de texte
 Il en existe plusieurs gratuits et payants:
 Mac: KOMODO, brackets, Sublime Text 2
 Linux: KOMODO, …
 Windows: NOTEPAD++, brackets,..
 Editeur en ligne: jsBin, jsFiddle,…

Création de sites web statiques Réalisé par Mme N .MGHARBI 10