===== HTML & CSS ===== * SITE STATIQUE = HTML ET CSS * SITE DYNAMIQUE = PHP QU'EST CE QUE HTML ET CSS ? Langages descriptif - Langages de base pour le web - Langages standards QUEL DIFFÉRENCES ENTRE HTML ET CSS ? * html → contenu * css → style ==== Html ==== HYPERTEXT MARKUP LANGUAGE est un Langage crée en 1991 et aujourd'hui nous utilisons Html5. L'Html est un [[https://fr.wikipedia.org/wiki/Langage_de_balisage|langage de balisage]] {{ :img_13.png?nolink&700 |}} === DÉBUT HTML & CSS :Comment commencer? === - Ouvrir un éditeur de texte - Préparer un dossier avec deux fichiers Html et Css - Faire attention au nommage des fichiers et dossiers - marquer ce qu'on veut dans le fichier == LES BALISES == <"le nom de la balise"> Le mot == UN COMMENTAIRE == <--ceci est un commentaire, il ne s'affiche pas dans le navigateur--> == DOCTYPE HTML == Le doctype signifie que la page va être écrit en html5. Elle s'écrit dans une balise : == LES PREMIERS BALISES IMPORTANTES == html, head, title, body Ici le titre du site • p = paragraphe • br = saut de ligne • h1, h2, etc. = différents niveaux de titres • Quelques balises supplémentaires importantes = em, **strong**, **b**, mark, ul, li, ol, a href, img,figure, figcapt, __u__

p: l'élément paragraphe

L'élément HTML représente un paragraphe de texte.

Les paragraphes sont généralement représentés comme des blocs et séparés par un espace vertical, leur première ligne est également parfois indentée.

Les paragraphes sont des éléments blocs.

: l'élément de marquage du texte == UNE ANCRE == Possibilité de créer un lien qui ouvre une page et amène à une ancre: nom_de_la_page.html#nom_de_l'_ancre * Lien avec une info bulle = infos bulle balise title="" * Lien qui s'ouvre dans une nouvelle fenêtre = target="_blank" * Lien pour adresse mail = mailto:"" [[https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1604646-creer-des-liens#/id/r-1609702|Pour en savoir plus →]] == IMAGES DANS UN SITE == Formats d'images pour le Web sont: * Gif (animation) * Png (fond transparent) * Jpeg (compresse mieux les photos) Comment insérer une image: image code pour insérer image Faire une image cliquable que amène à une autre: Photo lien ==== Css ==== CSS → CASCADING STYLESHEETS est Langage créé en 1996 et s'écrit dans un fichier extérieur au fichier HTML, au format ".css". Il faut l’appeler par un link: {{ :img_19.png?nolink&600 |}} == BALISE CSS == p{ color:pink; } == COMMENTAIRE EN CSS == /* bidule chouette *\ == ATTRIBUT # . == * l'attribut class (.) * l'attribut id (#) == LA BALISE SPAN == La balise span sert quand on veut intervenir sur un mot en particulier * A,B / A B / A + B / A[ATTRIBUT] * si j'écris a, b {;} = tout le même style. * Si j'écris a b {;} = une balise contenue dans une autre * Si j'écris a + b {;} = une balise qui en suit une autre * Si j'écris a[attribut]{;} = une balise qui possède un attribut L'ATTRIBUT EST TRÈS IMPORTANT PARCE QU'IL PERMET DE CIBLER ex: a[title]{ } ==== @FontFace ==== le @FontFace permet d'ajouter une fonte autre que celle du système. Le plus pratique est d'utiliser le générateur de package [[https://www.fontsquirrel.com/tools/webfont-generator|Font Squirel]]. Mettre les fichiers de la typo dans un dossier (ici nommé « fonts »). Dans votre fichier css vous pouvez mettre ce code : @font-face { font-family: "nom-de-la-font"; src: url("/fonts/nom-de-la-font-webfont.woff2") format("woff2"), url("/fonts/nom-de-la-font-webfont.woff") format("woff"); } N'oublier pas d'indiquer le bon chemin et les bon noms de fichiers ! == FLOAT / CLEAR == Float left, Float right, clear both ==== Display / Balises ==== == DISPLAY BLOCK, INLINE, FLEX / WIDTH ET HEIGHT / OVERFLOW HIDDEN SCROLL == [[https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1606168-le-modele-des-boites#/id/r-1610935| page OpenClassrooms qui l'explique très bien →]] {{ :img_21.png?nolink&400 |}} == DISPLAY FLEX == [[https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/3298561-la-mise-en-page-avec-flexbox| page OpenClassrooms qui l'explique très bien →]] body{ display:flex; flex-wrap:wrap; flex-dirrection:column; justify-content:center; align-self:flex-end; } {{ :img_22.png?nolink&600 |}} {{ ::img_23.png?nolink&600 |}} == TABLE == tr, td thead, tbody, tfoot colspan, rowspan == FORMULAIRE == Form == NTH-OF-TYPE == [[https://la-cascade.io/nth-of-type| nth-of-type]] p:nth-of-type(2) { color: red; }