Transcription of Initiation HTML et CSS - Stéphanie Walter
1 1 Initiation HTML et CSSA pprendre les bases du langage pour cr er des sites webInitiation HTML et CSS - St phanie Walter cours de 2016-20172 Visual & UX Designer. Mobile enthusiast Pixel et CSS @WalterStephanieIllustration by Laurence phanie Walter cours de 2016-2017 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-SAInitiation HTML CSS - St phanie Walter - 2016 / 20174 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.
2 Description du coursInitiation HTML CSS - St phanie Walter - 2016 / 20175 Programme Initiation au HTML 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 ?
3 Les liens sp ciaux : mailto, ancres, HTML CSS - St phanie Walter - 2016 / 20176 Programme Initiation au HTML 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>) Initiation HTML CSS - St phanie Walter - 2016 / 20177 Programme Initiation au CSS CSS : introduction et notions de base Ajoutez du style vos pages !
4 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 ?
5 Initiation HTML CSS - St phanie Walter - 2016 / 20178 Programme Initiation au CSS 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.
6 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 flottantsInitiation HTML CSS - St phanie Walter - 2016 / 20179 Programme Initiation au CSS 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 Design10 Les bases d un site webInitiation HTML CSS - St phanie Walter - 2016 / 201711 Un fichier HTML est un format de fichier texte ditable dont les l ments ont du sens Au format.
7 Html Peut contenir du texte, des images, des liens, des m dias, etc. Peut tre li e une autre page via des liens => ouvrez sur Firefox et faites CTRL + U au clavierUne page Web c est .. 12 Un ensemble de pages li es entre elles Accessible en ligne depuis n'importe o Un site Web c est .. Initiation HTML CSS - St phanie Walter - 2016 / 201713 Mais pas que .. Initiation HTML CSS - St phanie Walter - 2016 / 201714 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 pas que ..15 Mettre son site en ligne16 Pour mettre en ligne on fait passer ses fichiers de la machine du cr ateur un serveur webLe principe de serveur web 17 Souvent l aide d un client FTP. Votre h bergeur vous fournira les logins et mot de passe pour y acc rer un fichier sur le serveur18 Initiation HTML CSS - St phanie Walter - 2016 / 201719 FTP : File Transfer Protocol, protocole de communication destin l' change de fichiers sur un r seau TCP / IP.
8 Permet de mettre en ligne son site web Une sorte d'explorateur sur un serveur distance Ex : FilezillaLe client FTP20Le HTML - g n ralit sInitiation HTML CSS - St phanie Walter - 2016 / 201721 Hypertext Markup Language (HTML) Langage de balises qui permet de structurer des pages Diff rentes versions depuis 1989 Aujourd hui : XHTML (2000 2006) HTML5 HTML : d finitionInitiation HTML CSS - St phanie Walter - 2016 / 201722 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 W3 CInitiation HTML CSS - St phanie Walter - 2016 / 201723 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, WHATWG Initiation HTML CSS - St phanie Walter - 2016 / 201724 Blocnote ou TextEdit, si vous n avez rien d autre sous la main : Pas de coloration syntaxique N cessite de conna tre tout le langageG n rer du HTML avec un diteur25 diteur sp cialis Auto-compl tion, retour la ligne, coloration syntaxique, plugins etc.
9 Gratuit pour Mac et Windows open diteur sp cialis Auto-compl tion, retour la ligne, coloration syntaxique, plugins etc. Gratuit pour Mac et Windows open sourceAtomInitiation HTML CSS - St phanie Walter - 2016 / 201727 diteur sp cialis Auto-compl tion, retour la ligne, colorisation syntaxique Plugins, snippets, mode sans distraction 30 jours essai Windows/Mac/ Linux puis payantLes diteurs de texte plus avanc s et sp cialis sInitiation HTML CSS - St phanie Walter - 2016 / 201728 Coda : uniquement sur Mac (payant) Geany (Windows) gratuit Notepad ++ Komodo (Windows et Mac) Netbeans (Windows et Mac) gratuit D autres diteursInitiation HTML CSS - St phanie Walter - 2016 / 201729 What You See Is What You Get Permet de visualiser le rendu directement Code parfois pas toujours propre ou optimis Exemple.
10 Dreamweaver (payant), Blue Griffon (gratuit)Les diteurs WYSIWYG Initiation HTML CSS - St phanie Walter - 2016 / 201730 CMS : Content Management System ou syst mes de gestion de contenu D velopp dans un langage de programmation web (ex : PHP) et fait appel une base de donn es (ex : SQL) diteurs visuels sans avoir besoin de notions de code Ex : WordPress, Drupal, Joomla, Prestashop, n rer du HTML depuis un CMS Initiation HTML CSS - St phanie Walter - 2016 / 201731 Possibilit de g n rer automatiquement du HTML depuis un langage de programmation c t serveur PHP, Python, Ruby, n rer du HTML depuis un langage c t serveur Initiation HTML CSS - St phanie Walter - 2016 / 20173233La syntaxe HTML : balises, l ments et attributsInitiation HTML CSS - St phanie Walter - 2016 / 201734 Les balises structurent le contenu de la page (texte, images, etc.)
