Remerciez-le!

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

Enseignant : Dr. Cheikh KHERICI. ---- MCB ---- République Algérienne Démocratiq

Enseignant : Dr. Cheikh KHERICI. ---- MCB ---- République Algérienne Démocratique et Populaire Ministère de l’Enseignement Supérieur et de la Recherche Scientifique Université Ibn Khaldoun de Tiaret - Algérie Faculté des Mathématiques et de l’Informatique, Département d’informatique -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Université Ibn Khaldoun de Tiaret, Faculté des Mathématiques et de l’Informatique, Tiaret - Algérie 14000. E-mail: adj.graduation.inf@gmail.com, Tel.: (+213) 46 22 57 49. Formation des agents de la santé Techniciens Supérieurs & Adjoints d’Ingénieurs Juin 2022. I. Introduction II. Présentation du cours et de ses objectifs III. 1ère Partie : Les Bases en HTML et en CSS. IV. 2ème Partie : Formater du texte & positionner des éléments grâce au CSS. V. 3ème Partie : Fonctionnalités Avancées. VI. 4ème Partie : Aller plus loin. HTML est l’abréviation de ‘’HyperText Markup Language’’, soit en français ‘’langage hypertexte de balisage’’. Ce langage a été créé en 1991 et a pour fonction de structurer et de donner du sens à du contenu. CSS signifie ‘’Cascading Style Sheets’’, soit ‘’feuilles de style en cascade’’. Il a été créé en 1996 et a pour rôle de mettre en forme du contenu en lui appliquant ce qu’on appelle des styles. Le HTML sert, à indiquer aux navigateurs quel texte doit être considéré comme un paragraphe, quel texte doit être considéré comme un titre, que tel contenu est une image ou une vidéo. Le CSS, quant-à-lui, est utilisé pour appliquer des styles à un contenu, c’est-à-dire à le mettre en forme. Ainsi, avec le CSS, on pourra changer la couleur ou la taille d’un texte, positionner tel contenu à tel endroit de notre page web ou ajouter des bordures ou des ombres autour d’un contenu. Introduction Présentation du cours et de ses objectifs Le but du cours est de vous apprendre pas à pas à coder en HTML5 et en CSS3. A l’issue du cours « conception des sites Web » vous allez êtes capable de faire une conception qui comporte des paragraphes, des menus, des images, des vidéos, des articles de presse, …etc. Ce cours est divisé en trois parties, progressives : Une première partie avec un peu de théorie dans laquelle nous poserons les bases pour un apprentissage solide ; Une deuxième partie dans laquelle nous verrons comment positionner les différents éléments de notre site et comment personnaliser nos textes ; Une dernière partie où nous explorerons les fonctionnalités avancées du HTML5 et du CSS3 (insertion de vidéos, formulaires, responsive design, etc.). Les langages HTML et CSS sont véritablement le socle de tout projet de développement web par exemple : créer un site e-commerce, un blog, une application mobile. Donc vous serez obligé de passer par les langages HTML et CSS. Les bases d’un site Web 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. Un ensemble de pages liées entre elles. Accessible en ligne depuis n’importe où. Mettre votre site en ligne …. Le principe de « serveur web » Pour mettre en ligne on fait passer ses fichiers de la machine du créateur à un serveur web. Souvent à l’aide d’un client FTP. Votre hébergeur vous fournira les logins et mot de passe pour y accéder. FTP : File Transfer Protocol, protocole de communication destiné à l'échange de fichiers sur un réseau TCP / IP. Permet de « mettre en ligne » votre site web. Une sorte d’explorateur sur un serveur à distance (Ex : Filezilla). Générer du HTML avec un éditeur 1. Bloc Note ou TextEdit : pas de coloration syntaxique. 2. Brackets : est un éditeur spécialisé dispose: Auto-complétion. Retour à la ligne. Coloration syntaxique, plugins etc. Gratuit pour Mac et Windows – open source. 3. Atom : est un éditeur spécialisé dispose: Auto-complétion. Retour à la ligne. Coloration syntaxique, plugins etc. Gratuit pour Mac et Windows – open source. 4. Sublime Text : est un éditeur spécialisé dispose : Auto-complétion. Retour à la ligne. Colorisation syntaxique, plugins. 30 jours d’essai sur Windows/Mac/ Linux puis payant. 5. Coda : uniquement sur Mac (payant) http://panic.com/coda/ 6. Geany (Windows) gratuit http://www.geany.org/Download/Releases 7. Notepad ++ : gratuit. 8. Komodo : (Windows et Mac) http://www.activestate.com/komodo-ide 9. Netbeans : (Windows et Mac) gratuit http://netbeans.org/ 10. WYSIWYG : What You See Is What You Get: Permet de visualiser le rendu directement. Code parfois pas toujours propre ou optimisé, exp.: Dreamweaver (payant), Blue Griffon (gratuit). 11. Autres éditeurs « visuels » sans avoir besoin de notions de code, exp.: WordPress, Drupal, Joomla, Prestashop, …etc. La syntaxe HTML : balises, éléments et attributs Le principe de balise : 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 : On peut imbriquer les balises (on y reviendra) les unes dans les autres: <p> Un bloc !! </p> <div> <p> Un joli paragraphe </p> <p> Autre un joli paragraphe </p> </div> Touche < du clavier pour ouvrir : < Touche maj + < pour fermer : > Le nom des balises est prédéfini dans les spécifications HTML, donc on ne peut PAS en inventer ! Quelques exemples : <html>, <body>, <img>, <p>, <div>, <a>, … etc. Par convention et pour faciliter la lecture du code, toute balise ouverte doit être fermée (sauf exception). Certaines balises bien particulières n’ont pas besoin d’être fermées, on les dit « auto-fermantes », elles n’ont ni contenu ni balise fermante. Le principe de balise : Attributs et valeurs : Certaines balises peuvent être complétées par des attributs précisant certains paramètres (l’adresse des liens, source d’une image à afficher, etc.). Une balise peut contenir plusieurs attributs. <p id=‘’section1’’> Bonjour ! </p> balise attribut valeur Attributs et valeurs : Les attributs sont des éléments prédéfinis dans le HTML on ne peut en « inventer ». On peut les mettre entre simple quote, double quote ou rien. Par convention nous choisissons les doubles quotes " " Les attributs sont toujours dans la balise ouvrante. <div id="kittens"> // <div id=kittens> Exemples d’Attributs : src=" " : donner la source (d’une image par exemple): <img src="C:\Users\Asus\Desktop\Formation Agents de santé\Sites Web\Html5-css3.jpg" width="400" height="250" alt=“Logo d’HTML & CSS" /> href=" " : donner la destination d’un lien: <a href="http://www.google.fr"> Texte du lien </a> id=" " : donner un identifiant à l’élément que l’on pourra utiliser en CSS. Les Ids doivent être uniques par page <p id="monid"> contenu </p> class=" " : donner une classe à l’élément que l’on pourra utiliser en CSS. Les classes peuvent être dupliquées sur la page <p class="maclasse"> contenu </p> Doctype, html, body : Structure d'un document valide Décomposons balise par balise ! 1 <!DOCTYPE html> 2 <html lang=‘’ar’’> 3 <head> 4 <meta charset="utf-8"> 5 <title> Conception des sites Web </title> 6 7 </head> 8 <body> 9 10 11 </body> 12 </html> <h1> Cours HTML5 & CSS3 </h1> <p> mon premier pas d'HTML5 et CSS3 </p> La notion de doctype : Permet au navigateur de savoir quelle version de HTML (ou XHTML) est utilisée sur la page. Obligatoire pour valider une page (validateur W3C). Pas de doctype signifie que le navigateur fait ce qu’il peut avec ce qu’il trouve, peut expliquer certains bugs. ---------------------------------------------------------------- W3C : World Wide Web Consortium (1994). <!doctype html> Tout document HTML commence par la balise <html> qui se ferme en fin de document par la balise </html> La balise <html> contient nécessairement deux balises définissant l’entête (<head>) et le corps (<body>) du document. La balise <html> L'attribut lang Permet de spécifier la langue de traitement du document global : Indexation dans la bonne langue par les moteurs de recherche. Synthèse vocale. Vérification orthographique des formulaires. <html lang="fr"> Détermine l’entête du document et contient les méta-informations. La balise <head> La balise <title> On y trouve la balise <title> qui sera le titre du document: Sert en référencement (repris dans les résultats de recherche). On y ajoutera également les appels pour les feuilles de style CSS et certains JavaScripts. On peut y trouver des balises « meta » parmi lesquelles : <meta charset="UTF-8"/> permet de définir l’encodage de caractère de la page (à mettre directement sous le <head>). <meta name="description" content="description pour le référencement"/> affiché dans les résultats de recherche. La balise <head> : les balises meta Délimite le contenu de la page. Le contenu est constitué de texte, images et autres éléments qui seront affichés. <body> Contenu de la page </body> <!doctype html> <html lang="fr"> <head> <meta charset="UTF-8"> <title> Titre de ma page </title> </head> <body> Contenu de la page </body> </html> La balise <body> En résumé Les commentaires dans le HTML <p> Du texte ici <! - - avec un commentaire invisible - -> </p> NB: Il est possible d’écrire du texte qui ne sera visible que dans le code source et non sur le site : un commentaire. Les éléments de structuration du contenu La balise « division » uploads/s3/ cours-complet-html-amp-css.pdf