Remerciez-le!

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

1 Initiation HTML et CSS Apprendre les bases du langage pour créer des sites we

1 Initiation HTML et CSS Apprendre les bases du langage pour créer des sites web Initiation HTML et CSS – Mohamed Elfahem – cours de 2019-2020 2 Mohamed.elfahem@horizon-formation.net Chef département informatique Développeur web Illustration by Mohamed Elfahem . 3 Ces slides initiation HTML CSS sont disponibles sous la licence Creative Commons suivante : Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions CC BY-NC-SA Mohamed Elfahem – cours de 2019-2020 Initiation HTML CSS - Mohamed Elfahem - 2019 / 2020 4 Description du cours • Le but de ce cours de formation initiation au HTML et CSS est de permettre aux étudiants d’appréhender les bases du HTML et CSS afin de pouvoir ensuite créer de manière autonome des sites web. Le cours est une initiation, nous n’aurons pas le temps de voir en détail toutes les balises et positionnement mais des liens seront fournis afin de permettre aux étudiants d’approfondir leur expertise. Programme initiation au HTML Initiation HTML CSS - Mohamed Elfahem - 2019 / 2020 5 • Les bases d’un site web • Le HTML – généralités – HTML et définition – W3C et le WHATWG – Présentation rapide de quelques outils : éditeurs de texte, wysiwyg et clients FTP • La syntaxe HTML : balises, éléments et attributs – Le principe de balise et d'élément – Attributs et valeurs – Quelques exemples d'attributs • Doctype, html, body : structure d'un document valide – Le doctype – Les balises <html>, <head> et <body> – Les commentaires • Les éléments de structuration du contenu – La balise division <div> – La balise paragraphe <p> – Espaces insécables Titres <h1> à <h6> – La balise <blockquote> • Les liens hypertexte – Fonction d'un lien – La balise <a> – Liens externes – Liens internes et hiérarchisation du site – Ouvrir un lien dans un nouvel onglet ou laisser l'utilisateur choisir ? – Les liens spéciaux : mailto, ancres, etc. Programme initiation au HTML Initiation HTML CSS - Mohamed Elfahem - 2019 / 2020 6 • Les éléments de « mise en forme » de texte – Les balises <strong> et <em> – La balise <span> – D'autres balises (<sup>, <sub>, etc.) • Les éléments de liste – Listes ordonnées – Listes non ordonnées • Ajouter des images avec la balise <img> – Guide des formats d'image pour le web et outils de compression – La balise <img> et ses attributs • Les tableaux HTML – Créer un tableau : <table> <tr> <td> – Un exemple de tableau simple – Ajout d'en-têtes avec <th> – Légende de tableau – Attributs avancés, dont colspan, rowspan • Les formulaires – Les formulaires sont partout autour de nous – La balise <form> – Le champ <input> – Ajout de libellés avec <label> – Les placeholder HTML5 – Zone de texte multiligne <textarea> – Bouton de validation <input type="submit"> – Présentation des autres éléments (checkbox, radio, <select>) Programme initiation au CSS Initiation HTML CSS - Mohamed Elfahem - 2019 / 2020 7 • CSS : introduction et notions de base – Ajoutez du style à vos pages ! – CSS : Cascading Style Sheets, une définition – Les CSS, un peu d'histoire – Différents rendus entre les navigateurs : le pixel perfect n'existe pas • Appliquer un style, oui mais où ? – Le CSS inline et inconvénients – Le CSS "interne" intégré au document et inconvénients – Feuille de style externe et balise <link> • Syntaxe CSS – La syntaxe de base : selecteur, propriété, valeur – La déclaration CSS – Les commentaires CSS • Généalogie et différents types de sélecteurs – Le sélecteur usuel d'élément HTML – Hiérarchie et généalogie : notion d'enfants, de parent, de descendance – Sélecteur de groupe, de classe – L'id ou identifiant – Espace entre sélecteurs, ou pas ? – Les pseudos-classes sur les liens – Les autres pseudo-classes • Couleurs et unités – Notation des couleurs en CSS – Les unités fixes en CSS – Les unités fluides en CSS – En web, quelle unité utiliser ? Programme initiation au CSS Initiation HTML CSS - Mohamed Elfahem - 2019 / 2020 8 • Propriétés de typographie, polices et puces – Font-family et polices utilisables – Propriété typographiques (gras, italique, interlignage, etc.) – Changer la couleur du texte – Alignements de texte – Décoration de texte (soulignement, etc.) – Changer les icônes d'une liste à puce • Bordures et arrières plans – Bordures et styles, bords arrondis CSS3 – Arrière-plan et propriétés background • Dimensions, margin et padding – Différences entre inline et block – Largeur et hauteur avec width et height – Dimensions maximum et minimum – Marge extérieure margin – Centrer horizontalement à l'aide de margin – Marge intérieure padding – Calcul des dimensions réelles d'un élément – S'affranchir du calcul avec box-sizing: border-box – Gestion des dépassements avec overflow • Positionnement CSS : les flottants pour placer des images – Les flottants et le flux – Ferrer les images à gauche et à droite – Nettoyer les flottants avec clear – Notion de contexte de formatage de bloc et gestion des conflits de flottants Programme initiation au CSS Initiation HTML CSS - Mohamed Elfahem - 2019 / 2020 9 • Propriété display – Valeurs block, inline-block, inline et none – Créer une navigation à partir des propriétés de display • Positionnement CSS relative, absolute et fixed – Position relative pour déplacer des éléments – Position fixe et barre de navigation fixée en haut – Position absolue et déplacement d'élément dans bloc • Aller plus loin – Mises en page avec Flexbox et Grid Layout – Avant-goût du Responsive Web Design Les bases d’un site web 10 Initiation HTML CSS - Mohamed Elfahem - 2019 / 2020 11 Une page Web c’est … • Un fichier HTML est un format de fichier « texte » éditable dont les éléments ont du sens • Au format .html • Peut contenir du texte, des images, des liens, des médias, etc. • Peut être liée à une autre page via des liens • => ouvrez stephaniewalter.fr sur Firefox et faites CTRL + U au clavier 12 Un site Web c’est ... • Un ensemble de pages liées entre elles • Accessible en ligne depuis n'importe où Mais pas que ... Initiation HTML CSS - Mohamed Elfahem - 2019 / 2020 13 Mais pas que ... • Contenus textuels dans le fichier HTML, mais aussi images, sons, vidéos, CSS, JavaScript, polices d'écriture, etc. tous ces fichiers sont chargés dans le navigateur pour créer une page web. 14 Initiation HTML CSS - Mohamed Elfahem - 2019 / 2020 Mettre son site en ligne 15 Le principe de « serveur web » 16 Pour mettre en ligne on fait passer ses fichiers de la machine du créateur à un serveur web Transférer un fichier sur le serveur 17 Souvent à l’aide d’un client FTP. Votre hébergeur vous fournira les logins et mot de passe pour y accéder. 18 Le client FTP • FTP : File Transfer Protocol, protocole de communication destiné à l'échange de fichiers sur un réseau TCP / IP. • Permet de « mettre en ligne » son site web • Une sorte d'explorateur sur un serveur à distance • Ex : Filezilla Initiation HTML CSS - Mohamed Elfahem - 2019 / 2020 Le HTML - généralités 20 HTML : définition • Hypertext Markup Language (HTML) • Langage de balises qui permet de structurer des pages • Différentes versions depuis 1989 • Aujourd’hui : – XHTML (2000 – 2006) – HTML5 Le W3C • W3C : World Wide Web Consortium (1994) – TBLee, fondateur du W3C et inventeur du HTML – Chargé de promouvoir la compatibilité des technologies dans les navigateurs – 378 entreprises membres qui peuvent faire des propositions (Microsoft, Apple, Mozilla, Opera, Adobe, etc.) – Proposent un validateur http://validator.w3.org/ Le WHATWG • WHATWG : Web Hypertext Application Technology Working Group (2004) – Collaboration non officielle de développeurs de navigateurs – Tentative de réponse à la lenteur des standards du W3C – Mozilla Foundation, Opera, Apple, etc. Générer du HTML avec un éditeur Blocnote ou TextEdit, si vous n’avez rien d’autre sous la main : • Pas de coloration syntaxique • Nécessite de connaître tout le langage Brackets.io • http://brackets.io/ • Éditeur spécialisé • Auto-complétion, retour à la ligne, coloration syntaxique, plugins etc. • Gratuit pour Mac et Windows – open source 25 Atom • https://atom.io/ • Éditeur spécialisé • Auto-complétion, retour à la ligne, coloration syntaxique, plugins etc. • Gratuit pour Mac et Windows – open source 26 Initiation HTML CSS - Mohamed Elfahem - 2019 / 2020 27 Les éditeurs de texte plus avancés et spécialisés • http://www.sublimetext.com/ • Éditeur spécialisé • Auto-complétion, retour à la ligne, colorisation syntaxique • Plugins, snippets, mode « sans distraction » • 30 jours essai Windows/Mac/ Linux puis payant Initiation HTML CSS - Mohamed Elfahem - 2019 / 2020 28 D’autres éditeurs • Coda : uniquement sur Mac (payant) http://panic.com/coda/ • Geany (Windows) gratuit http://www.geany.org/Download/Releases • Notepad ++ • Komodo uploads/s1/ initiation-html-css.pdf