Apprendre à coder en HTML - CSS

1 Classe de 2nde ICNA pprendre coder en html - CSST able des mati res1. Les bases en html et Les bases du l ments, balises et Structure de base d une page en Afficher un document en HTML5 dans le Bonnes pratiques, r gles et Les l ments Heading, Paragraph et Les l ments Strong, Emphasis et Listes ordonn es et non-ordonn Listes de d Listes imbriqu Liens internes et liens Les autres types courants de Validation et compatibilit entre Les bases du S lecteurs, propri t s et O crire le CSS ?

2 Les commentaires en S lecteurs simples et Les l ments div et Les l ments de type block et Les s lecteurs avanc La notion d h Formater du Texte & Positionner des l Les Propri t s de Type Font- .. La propri t La propri t La propri t La propri t La propri t Les web safe fonts .. La propri t L opacit d un Les Propri t s de Type Text- .. L alignement d un La propri t La propri t La propri t Les propri t s letter-spacing et de 2nde Les ombres des Le Mod le des Bo Hauteur et largeur d un l Les bordures et les bordures Les marges int Les marges ext Les ombres des bo Faire flotter un l La propri t La propri t Le Notations long-hand et Fonctionnalit s Avanc Gestion du Ajouter de la couleur ou une image pour le Position et r p tition du Fixer le fond ou le faire d filer avec la Ins rer plusieurs

3 Images de Cr er un fond en d grad .. Les d grad s de type lin Les d grad s de type Int grer des Images, de l Audio et de la Vid Ins rer une Ajuster et positionner une Ins rer de l Ins rer de la Vid Les l ments Figure et Les Cr ation d un tableau Mise en forme d un Construire un tableau structur .. Combiner des Les Introduction aux Cr er le squelette d'un Cr er un formulaire Saisie d'un champ email ou Cr er une zone de saisie Cases cocher, zones d options et Finaliser et envoyer un Aller plus Le responsive Les pseudo-classes en Les pesudo-elements en Les l ments structurants du de 2nde ICNLes langages html et CSS sont v ritablement le socle de tout projet de d veloppement web.

4 Que vous vouliez cr er un site e-commerce, un blog, une application mobile ou quoique ce soit d autre, vous serez oblig de passer par les langages html et CSS. Apprendre le html et le CSS signifie entrer dans le monde des programmeurs et c est donc commencer les comprendre et parler comme de 2nde ICN1. IntroductionHTML 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 signifie Cascading StyleSheets, soit feuilles de style en cascade.

5 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 ne faut JAMAIS utiliser le html pour faire le travail du CSS : html est utilis pour baliser un contenu, c est dire pour le structurer et lui donner du sens. Le html sert, entre autres choses, 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. CSS est utilis pour appliquer des styles un contenu, c est- -dire le mettre en forme.

6 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 versions actuelles du html et du CSS sont HTML5 et CSS3. Il faut savoir que, contrairement aux id es re ues, ce sont encore des versions non finalis es. Cela signifie que ces versions sont toujours en d veloppement et qu elles sont toujours en th orie sujettes changements et version 5 d html , tout comme la version 3 de CSS introduisent de nombreuses nouvelles fonctionnalit s longtemps attendues par les d veloppeurs et il serait donc dommage de s en celles-ci, l insertion simplifi e de vid os et de contenus audio et de nouvelles balises am liorant la s mantique (on va y revenir, pas d inqui tude !)

7 Pour mieux structurer nos pages en html ou encore la possibilit de cr er des bordures arrondies en coder en html et en CSS, nous n avons besoin que d un diteur de text : NotePad++, sous Windows; Komodo, pour Mac ou Linux; TextWrangler, pour Les bases en html et Les bases du l ments, balises et attributsIl y a trois termes dont vous devez absolument comprendre le sens en html . Ce sont les termes l ment, balise et l ments, tout d abord, vont nous servir d finir des objets dans notre page. Gr ce aux l ments, nous allons pouvoir d finir un paragraphe ( l ment p), des titres d importances diverses ( l ments h1, h2, h3, h4, h5 et h6) ou un lien ( l ment a).

8 Les l ments sont constitu s de balises. Dans la majorit des cas, un l ment est constitu d une paire de balises : une balise ouvrante et une balise de 2nde ICNLes balises reprennent le nom de l l ment et sont entour es de chevrons. La balise fermante poss de en plus un slash qui pr c de le nom de l l , certains l ments ne sont constitu s que d une balise qu on appelle alors balise orpheline. C est par exemple le cas de l l ment br qui va nous servir cr er un retour la que, dans le cas des balises orphelines, le slash se situe apr s le nom de l l ment.

9 Notez galement que ce slash n est pas obligatoire et que certains d veloppeurs l omettent vous conseille cependant, pour des raisons de propret de code et de compr hension, de mettre le slash dans un premier attributs, enfin, vont venir compl ter les l ments en leur donnant des indications ou des instructions suppl exemple, dans le cas d un lien, on va se servir d un attribut pour indiquer la cible du lien, c est dire vers quel site le lien doit que les attributs se placent toujours l int rieur de la balise ouvrante d un l ment (ou de la balise orpheline le cas ch ant).

10 Dans l exemple ci-dessus, on discerne l l ment a compos : d une balise ouvrante elle-m me compos e d un attribut href ; d une ancre textuelle ; d une balise attribut href (initiales de Hypertexte Reference ) sert indiquer la cible de notre lien, en l occurrence le site Wikip ancre textuelle correspond au texte entre les balises. Ce sera le texte sur lequel vos visiteurs devront cliquer pour se rendre sur Wikip dia et galement l unique partie visible pour ce que les visiteurs de votre site verront de 2nde ICNSi vous vous sentez un peu perdu pour le moment, ne vous inqui tez pas, c est tout- -fait normal !