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 formation@damd.fr - https://discord.gg/ufgacczvwd FORMATION 2021 HTML 5 - CSS

1 formation@damd.fr - https://discord.gg/ufgacczvwd FORMATION 2021 HTML 5 - CSS 3 INITIATION 2 A. Historique B. Les éléments et les attributs en HTML C. Notre espace de travail et nos outils D. Structure d’une page web E. Le HTML 5 1. Lien hypertexte 2. Images 3. Balise viewport 4. Div et span 5. Listes 6. Contenu multimédia 7. Mise en forme du texte 8. Éléments block et inline 9. Tableaux 10. Formulaires A. Définition et exemple B. Implémentation et mise en place C. Class et id D. Gestion des couleurs E. Mise en page F. Couleur et image de fond G. Polices H. Bordures et ombrages I. Marges J. Display et position K. Pseudo-classes et pseudo-éléments L. Transitions et animations M. Responsive design et media queries Sommaire /LE HTML /LES CSS 3 AU DÉBUT DES ANNÉES 1960, J.C.R. LICKLIDER DU MASSACHUSETTS INSTITUTE OF TECHNOLOGY (MIT) DÉCRIVIT POUR LA PREMIÈRE FOIS LES INTERACTIONS SOCIALES POSSIBLES AVEC UN RÉSEAU D’ORDINATEURS. 1968 : Le projet Arpanet, est approuvé par l’ARPA et donc financé. 1969 : Premier noeud de raccordement entre L’Université de Los Angeles et l’Université de Standford. 1972 : Mis au point par Ray Tomlinson, le premier courriel est envoyé & première démonstration publique d’Arpanet. 1983 : Arpanet adopte la norme TCP/IP, c’est le démarrage d’Internet avec un millier de poste connecté. 1991 : Tim Berners-Lee du CERN participe à la création du World Wide Web en développant un Système Hype texte organisé en web, naissance du protocole http et de l’internet grand public. Depuis 2000 : démocratisation de l’internet du haut débit vers le très haut débit. Google et son moteur de recherche devient incontournable tout comme les autres membres des GAFA. QUAND EST NÉ INTERNET ? 1A. HISTORIQUE 1968 1991 1998 2014 1983 1996 2004 2019 ARPANET Création du World Wide Web Création de Google Plus de 1 milliard de sites web Plus de 4 milliards d’utilisateurs Norme TCP/IP 36 000 000 ordinateurs connectés Création de Facebook 4 LE HTML Créé en 1991 lors de la création du World Wide Web (en même temps que le protocole HTTP, l’hyperlien et les adresses web) le html n’est pas un langage de programmation mais un langage de balisage permettant de présenter des documents web. Son sigle signifie “HyperText Markup Language” en anglais, littéralement “langage de marquage hypertexte”. Le balisage HTML est incorporé dans le texte du document et est interprété par un navigateur Web. La première page web est toujours en ligne : http://info.cern.ch/hypertext/WWW/TheProject.html Il ne cesse de progresser depuis sa création, sous l’impulsion du consortium W3C (world Wide Web Consortium) et du WHATWG (Web Hypertext Application Technology Working Group) qui veillent à faire évoluer les standards : Chacune des ces versions a été l’occasion d’intégrer de nouvelles fonctionnalités pour s’adapter aux attentes toujours plus grandes des internautes. / 1995-1996 : HTML 2 / 1997: HTML 3.2 et HTML 4.0 / 2000-2006 : xHTML / Depuis 2007 : HTML 5 1A. HISTORIQUE Sur quoi repose tout ce développement en constante accélération ? sur le HTML, bien sûr ! Les différentes versions du HTML 5 LE HTML 1A. HISTORIQUE Comme tout langage, le HTML repose sur une syntaxe précise et sur des éléments possédants des attributs spécifiques. Le but du cours n’est pas de connaître tous ces éléments (la liste est très longue et je vous invite à jeter un coup d’oeil à un recueil dédié à l’ensemble des balises HTML) mais de comprendre la logique du langage et de savoir manipuler ses éléments de base indispensables. Commençons par la logique de fonctionnement… 6 LES BALISES EN HTML 1B. ÉLÉMENTS, ATTRIBUTS ET BOÎTES EN HTML Un élément HTML peut être soit constitué d’une paire de balises et d’un contenu, soit (plus rarement) d’une balise unique qu’on dit alors orpheline. L’élément br ci-dessous (servant à créer un retour à la ligne) n’est lui constitué que d’une balise orpheline. L’élément p ci-dessous est constitué d’une balise ouvrante, d’un balise fermante (notez la présence du slash), et d’un contenu (textuel) entre les balises. <p>Je suis un paragraphe écrit en HTML </p> <br> / L’ÉLÉMÉNT P / L’ÉLÉMÉNT BR Balise ouvrante Balise fermante Contenu Balise orpheline ÉLÉMÉNT P ÉLÉMÉNT BR 7 LES ATTRIBUTS EN HTML 1B. ÉLÉMENTS, ATTRIBUTS ET BOÎTES EN HTML La balise ouvrante d’un élément HTML peut contenir des attributs, qui sont parfois même obligatoires.Les attributs vont venir compléter les éléments en les définissant plus précisément ou en leur apportant des informations supplémentaires. Un attribut contient toujours une valeur, qu’on peut cependant parfois omettre dans le cas des attributs ne possédant qu’une seule valeur (la valeur est considérée comme évidente). Notez que cet élément n’est constitué que d’une seule balise orpheline, tout comme l’élément br. L’élément img, servant à insérer une image dans une page HTML, va lui demander deux attributs : src (source) et alt (texte alternatif d’une image). Par exemple, l’élément a (pour “anchor”) servant à créer des liens vers d’autres sites ou d’autres pages, va avoir besoin d’un attribut href (“hypertexte reference”) qui va prendre comme valeur l’adresse (relative ou absolue) de la page vers laquelle on souhaite faire un lien. <a href=”http://www.monsite.com”>Mon site</a> <img src=”image.jpg” alt=”description de l’image”> / L’ÉLÉMÉNT A / L’ÉLÉMÉNT IMG Attribrut href Texte visible Attribut alt Attribut src ÉLÉMÉNT A ÉLÉMÉNT IMG 8 LE HTML <p> <em> <h1> <ul> <nav> <section> <audio> <form> <table> <div> <span> <strong> <body> 1B. ÉLÉMENTS, ATTRIBUTS ET BOÎTES EN HTML Toutes les balises HTML que nous allons voir répondront à ce schéma : une balise + des attributs qui lui sont propre 9 LE MODÈLE DES BOITES 1B. ÉLÉMENTS, ATTRIBUTS ET BOÎTES EN HTML Le modèle des boîtes est un concept essentiel et central pour la mise en page d’une page web. Vous devez absolument comprendre le modèle des boîtes pour ensuite pouvoir positionner les différents éléments de votre page où vous le souhaitez et créer de belles pages web. Le modèle des boîtes nous dit que “tout élément HTML peut être considéré comme une boîte rectangulaire”, qu’il soit de type block ou inline (voir plus loin). Autour de la “boîte” contenant l’élément en soi, on va pouvoir dessiner d’autres boîtes contenant la marge intérieure (padding), les bordures et finalement la marge extérieure de l’élément. Grâce au modèle des boîtes, nous allons comprendre comment définir des marges intérieures et extérieures et des bordures autour du contenu de l’élément. Nous allons également pouvoir positionner les éléments les uns par rapport aux autres de manière efficace. Importance et définition Explication et illustrations du modèle des boîtes 1 2 3 4 Ensuite, autour du contenu, la deuxième boîte contient en plus la marge intérieure de l’élément qu’on appelle en CSS le “padding”. La troisième boîte va contenir en plus la bordure de l’élément. Enfin, la dernière boîte va également contenir la marge extérieure de l’élément. 1 2 3 4 Margin Border Padding Contenu La première boîte (la boîte centrale) représente le contenu de l’élément ou l’élément en soi. 10 ORGANISONS-NOUS ! 1C. NOTRE ESPACE DE TRAVAIL ET NOS OUTILS Avant de nous lancer dans le développement, préparons le terrain en nous organisant physiquement : Créons un dossier “monsite”, sur le bureau par exemple, dans lequel nous allons créer l’arborescence suivante : style.css bootstrap.css jquery.js bootstrap.js background.jpg logo.png favicon.png Lato-Bold.ttf Lato-Black.ttf Lato-Regular.ttf index.html about-us.html contact-us.html / CSS / JS / IMG / FONTS / HTML / Mon site 11 QUEL OUTILS POUR LE HTML ? 1C. NOTRE ESPACE DE TRAVAIL ET NOS OUTILS Le HTML étant avant tout un texte qui sera interprété par le navigateur, nous avons besoin d’un éditeur de texte. On pourrait très bien se débrouiller avec le bloc-note de Windows ou un équivalent mais nous allons nous faciliter la tâche avec un éditeur spécialisé. Je vous propose d’utiliser Visual Studio Code (mais Brackets ou un autre éditeur de ce genre pourrait très bien faire l’affaire). Les navigateurs actuels tels que Chrome, Firefox, Safari, Edge, etc. savent tous interpréter le HTML 5 avec plus ou moins quelques petites différences. Je vous propose de travailler avec Chrome que nous allons enrichir avec une extension qui nous sera utile : Colorzilla N’oubliez pas d’utiliser le mode de conception adaptative pour tester le mode responsive de votre site et voir l’aspect qu’il aura sur une tablette ou un smartphone. Pour cela, cliquez sur le menu hamburger et choisissez “Développement web” puis “vue adaptative” L’éditeur de texte Un navigateur 12 ADOPTONS LES BONNES PRATIQUES 1C. NOTRE ESPACE DE TRAVAIL ET NOS OUTILS L’accessibilité est la mise à disposition de vos sites web au plus grand nombre. On pense souvent que cela s’adresse aux personnes ayant un handicap, mais cela concerne également d’autres groupes comme ceux utilisant des appareils mobiles ou ceux qui ont des connexions internet de faible débit. On peut aussi dire que l’accessibilité c’est traiter tout le monde de la même manière, et donner les mêmes opportunités à tous, peu importe leurs handicaps ou les circonstances. De la même manière qu’il est injuste d’empêcher une personne d’accéder à un bâtiment parce qu’elle est en fauteuil uploads/s3/ cours-html5-css3.pdf