Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Création des sites WEB Statiques Création de sites web statiques 1 Réalisé par

Création des sites WEB Statiques Création de sites web statiques 1 Réalisé par Mme N .MGHARBI Formatrice à l’OFPPT Partie I HTML5 & CSS3 Les notions de base Création de sites web statiques 2 Réalisé par Mme N .MGHARBI Formatrice à l’OFPPT Création de sites web statiques Plan Introduction Apprendre LE HTML et CSS Définitions et rôles Historique Méthodologie du travail Editeurs de texte 3 Réalisé par Mme N .MGHARBI Création de sites web statiques 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 4 Réalisé par Mme N .MGHARBI 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 5 Réalisé par Mme N .MGHARBI 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 7 Réalisé par Mme N .MGHARBI 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 8 Réalisé par Mme N .MGHARBI 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 9 Réalisé par Mme N .MGHARBI 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 10 Réalisé par Mme N .MGHARBI uploads/s3/ introduction 25 .pdf