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 4 • 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. Description du cours 5 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 ? – Les liens spéciaux : mailto, ancres, etc. 6 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>) 7 Programme initiation au CSS • 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 ? 8 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 : 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 9 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 Design 10 Les bases d’un site web 11 • 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 Une 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 ... 14 • 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. Mais pas que ... 15 Mettre son site en ligne 16 Pour mettre en ligne on fait passer ses fichiers de la machine du créateur à un serveur web Le 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éder. Transférer un fichier sur le serveur 18 19 • 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 Le client FTP 20 Le HTML - généralités 21 • 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éfinition 24 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 Générer du HTML avec un éditeur 25 • http://brackets.io/ • Éditeur spécialisé • Auto-complétion, retour à la ligne, coloration syntaxique, plugins etc. • Gratuit pour Mac et Windows – open source Brackets.io 26 • https://atom.io/ • Éditeur spécialisé • Auto-complétion, retour à la ligne, coloration syntaxique, plugins etc. • Gratuit pour Mac et Windows – open source Atom 27 • 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 Les éditeurs de texte plus avancés et spécialisés 28 • Coda : uniquement sur Mac (payant) http://panic.com/coda/ • Geany (Windows) gratuit http://www.geany.org/Download/Releases • Notepad ++ • Komodo (Windows et Mac) http://www.activestate.com/komodo-ide • Netbeans (Windows et Mac) gratuit http://netbeans.org/ D’autres éditeurs 29 • What You See Is What You Get • Permet de visualiser le rendu directement • Code parfois pas toujours propre ou optimisé • Exemple : Dreamweaver (payant), Blue Griffon (gratuit) Les éditeurs « WYSIWYG » 30 • 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, etc. Générer du HTML depuis un CMS 31 • Possibilité de générer « automatiquement » du HTML depuis un langage de programmation côté serveur • PHP, Python, Ruby, etc. Générer du HTML depuis un langage côté serveur 32 33 La syntaxe HTML : balises, éléments et attributs 34 • Les balises structurent le contenu de la page (texte, images, etc.) • Chaque balise a un rôle et donne du sens au contenu présenté Le principe de balise < p > B o n j B a l i s B a l * C o n t e n u 35 • On peut imbriquer les balises (on y reviendra) les unes dans les autres Le principe de balise <p> Hooo un bloc !! </p> <div> <p> Et un joli paragraphe </p> <p> Et autre un joli paragraphe </p> </div> 36 • Touche < du clavier pour ouvrir : < • Touche maj + < pour fermer : > • Le nom des balises est prédéfini dans les spécifications HTML, on ne peut donc PAS en inventer uploads/s3/ l-x27-initiation-html-css-pdf.pdf