Support de cours html css (1).pdf

Les bases du web Edouard Sombié ESGI 2024-2025 Le fonctionnement d’Internet ▪ Ordinateurs en réseau routeur routeurs en réseau Le fonctionnement d’Internet ▪ Les fournisseurs d’accès web...

Les bases du web Edouard Sombié ESGI 2024-2025 Le fonctionnement d’Internet ▪ Ordinateurs en réseau routeur routeurs en réseau Le fonctionnement d’Internet ▪ Les fournisseurs d’accès web Modem (box) FAI 1 FAI 2 Modem (box) Le fonctionnement d’Internet ▪ Clients et serveurs stocke les utilisateur pages web connecté Le fonctionnement d’Internet ▪ Localiser un ordinateur nom de domaine (DNS) adresse IP Le fonctionnement d’Internet ▪ Le navigateur web Permet d’accéder aux serveurs web et de lire des pages au format html. Norme W3C Le fonctionnement d’Internet ▪ La page web Ecrite en html Accessible à une URL donnée. Ex : https://www.monsite.com/contact.html Le HTML 5 ▪ Le langage html signifie Hyper Text Markup Language est le langage de balisage standard pour la création de pages Web décrit la structure d'une page Web se compose d'une série d’éléments (balises) Les éléments HTML indiquent au navigateur comment afficher le contenu Les éléments HTML étiquettent des éléments de contenu tels que "ceci est un titre", "ceci est un paragraphe", "ceci est un lien", etc. date de 1991 Le HTML 5 ▪ Les balises html Le contenu va ici... Mon premier cap Certaines balises sont vides par définition… https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro Le HTML 5 ▪ Les attributs html... Le HTML 5 ▪ La structure de base d’une page web Le HTML 5 ▪ Les balises html de base définit que ce document est un document HTML5 est l'élément racine d'une page HTML contient des méta-informations sur la page HTML spécifie un titre pour la page HTML (qui est affiché dans la barre de titre du navigateur ou dans l'onglet de la page) définit le corps du document et est un conteneur pour tous les contenus visibles, tels que les en-têtes, les paragraphes, les images, les hyperliens, les tableaux, les listes, etc. définit un grand titre définit un paragraphe définit les métadonnées d'un document HTML Le HTML 5 ▪ Les balises html de base En-têtes à Paragraphes Liens Images Divisions Listes ou (ligne ) Mise en avant et Table (rang , cellule d'entête , cellule ) Le HTML 5 ▪ Les attributs html de base Le HTML 5 ▪ Les principales balises structurantes html5 Entête Contenu principal Pied de page Principaux liens de navigation Section dans un document  Le HTML 5 ▪ Les autres balises html5 Un article dans un document Le contenu annexe de la page < gure> Contenu autonome (image et légende) < gcaption> Légende pour un élément < gure> Date ou heure fi fi fi Le HTML 5 Quelle balise manque à cette page ? https://developer.mozilla.org/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document Le HTML 5 ▪ Les différents types de liens Externe Interne (absolu ou relatif) Ancre (#id) Instruction (mailto:[email protected]) Téléchargement (attribut download) Le HTML 5 ▪ Les différents types d'images ▪ JPEG 16 millions de couleurs (compressé) ▪ PNG 16 millions plus transparence (le plus récent) ▪ GIF 256 couleurs, peut être animé ▪ SVG vectoriel ▪ WEBP ▪ APNG Le HTML 5 ▪ TP1 Réalisation en ligne d'une page web Disponible sur myGES Préparer son ordinateur ▪ Un navigateur WEB : Google Chrome ou Firefox ▪ Un éditeur de texte avancé : VS Code Le CSS3 ▪ Le langage css signifie Cascading Style Sheets décrit la présentation des éléments html (sur écran, à l'impression etc.) repose sur des sélecteurs et des propriétés date de 1996 Le CSS3 selecteur { propriété1 : valeur1; propriété2 : valeur2; } La plupart du temps, une balise html hérite des styles de son parent. inherit Le CSS3 - Appliquer des styles En ligne Dans le document html (dans ) A partir d'une feuille de style (dans ) Le CSS3 - Les principaux sélecteurs balise tagname {property : value;} classe.class {property : value;} id #id {property : value;} Le CSS3 - D'autres sélecteurs Sélecteur universel * {property : value;} Une balise contenue dans une autre tag1 tag2 {property : value;} Une balise enfant direct d'une autre tag1 > tag2 {property : value;} Une balise ayant un attribut [attr] {property : value;}... https://www.w3schools.com/cssref/css_selectors.asp Le CSS3 - Formatage du texte Taille : font-size Taille absolue : ex. font-size : 16px; Taille relative (s’adapte au contexte) : xx-small, x-small, small, medium, large, x-large, xx-large % , em, rem Le CSS3 - Formatage du texte Police d’écriture : font-family Format.woff ou.woff2 Par défaut : serif ou sans-serif Utiliser une police personnalisée @font-face { font-family : "MyFont"; src : url('...'); font-weight : normal; font-style : normal; } Inclure depuis un fichier CSS @import https://transfonter.org/ https://fonts.google.com/ Le CSS3 - Formatage du texte Italique, gras, souligné font-style : italic, oblique, normal font-weight : bold (700), normal (400) text-decoration : underline, line-through, overline, none text-transform : capitalize, lowercase, uppercase… L’alignement : text-align (left, center, right, justify) Le CSS3 - La couleur Mot-clé black, white, red... Hexadécimal #FF00FF rgb rgb(255, 255, 0) rgba rgba(255, 255, 0, 0.5) Le CSS3 - La couleur Couleur du texte : color Couleur d'arrière-plan : background-color Le CSS3 - L'image de fond Image d'arrière-plan : background-image background-image: url("chemin_vers_image") background-size (cover, contain, %, px) background-position (top, bottom, left, right, center, %, px) background-repeat (repeat, no-repeat, repeat-x, repeat-y) background-attachment ( xed, scroll) fi Le CSS3 - Les bordures Bordure : border border : type taille couleur; Types de bordure : none, solid, dotted, dashed, double, groove, ridge, inset, outset. Chaque côté peut être dé ni indépendamment : border-top, border-right, border-bottom, border-left Bordure arrondie : border-radius fi Le CSS3 - Les pseudo-formats au survol :hover déjà visité :visited cliqué :active sélectionné :focus Les boîtes html ▪ 2 types d'éléments html : block et inline (propriété display) Les boîtes html ▪ Les balises inline N'occupe que la place nécessaire, à la suite du contenu précédent, ne peut contenir une balise de type block , , , ▪ Les balises block Va à la ligne, occupe toute la largeur, peut contenir tout type de boîte. , , ,... Les boîtes html ▪ Dimensions d'une boîte (seulement pour le type block) width : px, %, vh, vw height : px, %, vh, vw min-width, max-width, min-height, max-height Les boîtes html ▪ Marges d'une boîte (top, right, bottom, left) (seulement pour le type block) Les marges intérieures : padding Les marges extérieures : margin box-sizing content-box, border-box margin : auto Centre horizontalement Les boîtes html ▪ Gestion du dépassement : overflow visible : af che ce qui dépasse (défaut) hidden : cache ce qui dépasse auto : cache ce qui dépasse et af che des barres de dé lement si nécessaire. scrollbar : cache ce qui dépasse et af che des barres de dé lement même si pas nécessaire. fi fi fi fi fi Le positionnement en CSS ▪ Plusieurs façons de positionner les éléments Le positionnement flottant : oat Le type d'affichage : display Le type de position : position fl Le positionnement en CSS ▪ float none (défaut), right, left Si différent de none, élément retiré du flux normal, se place à droite ou à gauche de son conteneur. Demeure tout de même dans le flux. Implique l'utilisation d'une disposition en bloc : change la valeur du display. Le positionnement en CSS ▪ display block, inline none : élément pas affiché inline-block : en ligne mais forme un rectangle (ne va pas à la ligne) flex : se comporte comme un conteneur flexible list-item, table, grid... Le positionnement en CSS ▪ position static (défaut) : élément positionné dans le flux avec sa position par défaut relative : positionné dans le flux, mais peut être décalé avec les propriétés top, right, bottom, left absolute : sorti du flux, positionné avec top, right, bottom, left, par rapport à son plus proche ancêtre positionné. fixed : sorti du flux, positionné avec top, right, bottom, left, par rapport à la fenêtre (ne bouge pas lors du scroll). sticky : positionné dans le flux mais sorti du flux et positionné de façon fixe par rapport au parent ("collé" en haut). Le positionnement en CSS ▪ Position sur l'axe z : z-index Ordre des couches en cas de chevauchement de blocs positionnés Le positionnement en CSS - flexboxes ▪ Utiliser des conteneurs flex Un conteneur flex (flexbox) a la propriété display : flex (ou inline-flex). Son utilisation permet de : ▪ Dimensionner les blocs enfants indépendamment de leur contenu. ▪ Les présenter horizontalement (row) ou verticalement (column). ▪ Simplifier l’alignement des éléments (axe vertical).  Le positionnement en CSS - flexboxes ▪ Propriétés de base des flexboxes ex-direction : en ligne ou en colonne row (défaut), column, row-reverse, column-reverse ex-wrap : les éléments peuvent aller à la ligne ou pas nowrap (défaut), wrap, wrap-reverse fl fl Le positionnement en CSS - flexboxes justify-content : alignement des enfants sur l’axe principal flex-start(défaut), flex-end, center, space-between, space-around Le positionnement en CSS - flexboxes align-items : alignement des enfants sur l’axe secondaire stretch(défaut), flex-start, flex-end, center  Le positionnement en CSS - flexboxes Chaque élément contenu dans une flexbox est un élément flex. On peut lui appliquer la propriété ex qui regroupe 3 propriétés : ex-grow : comment l’élément va grossir par rapport aux autres. ex-shrink : comment l’élément va rétrécir par rapport aux autres. ex-basis : la « longueur » de l’élément. Peut valoir auto, inherit ou encore une valeur absolue (px) ou relative (%, em). Valeur par défaut flex : 0 1 auto (équivalent à flex : flex-grow flex-shrink flex-basis) Si une seule valeur donnée, indique le poids relatif de l'élément flex flex : 1 (équivalent à flex : 1 1 0%) fl fl fl fl Le positionnement en CSS - flexboxes ▪ Autres propriétés des éléments flex align-self : capacité de l’élément à s’aligner indépendamment sur l’axe secondaire. order : capacité de l’élément à se positionner dans le conteneur. Exercice : https://flexboxfroggy.com/ Quelques propriétés pour finir box-shadow : ombre portée box-shadow : dec_x dec_y longueur couleur opacity : transparence d'un élément (valeur de 0 à 1) opacity : 0.5 transition : animation d'un changement de valeur css transition : propriété durée Ex. transition : color 1s ou transition : all 0.5s Mise en page adaptative Les media queries @media screen and (property:value){... } Applique des propriétés quand certaines conditions sont réunies ▪ all, print, screen, speech ▪ and, only, not ▪ largeur et hauteur de la fenêtre, largeur et hauteur de l'écran, orientation Exemple : @media screen and (max-width:800px){... } Une meta est nécessaire pour le responsive design Les media queries Deux méthodes d’application : ▪ en chargeant une feuille de style en fonction de la règle