Remerciez-le!

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

H T M L / C S S D É V E L O P P E M E N T W E B L I R E U N F I C H I E R H T M

H T M L / C S S D É V E L O P P E M E N T W E B L I R E U N F I C H I E R H T M L • nom : index.html • interprété par le navigateur grâce à une uri : • localement : file:// chemin_absolu/ index.html • via le réseau : http:// serveur/ chemin_relatif/ index.html protocole://adresse C O M M E N T A P P R E N D R E ? • il faut en faire. • quelques sites : • il y a tout, sans tuto : http://www.w3schools.com • un long tuto : https://developer.mozilla.org/fr/docs/Apprendre/ Commencer_avec_le_web • des tutos super bien (avec un accent anglais rigolo) : the net ninja • attention : le web est plein de vieux trucs. Assurez vous d’être bien en html5 et css3 F I C H I E R H T M L M I N I M A L • squelette.html • constitué de balises et forme un arbre (l’arbre DOM) • type de balise (tag) : html, head, body, ... • le contenu est entre les balises ouvrante <tag> et fermante </tag> • des attributs nom="valeur" • cas particuliers • balise constitué uniquement de paramètres : s’ouvre et se ferme dans la même balise, comme les balises meta • DOCTYPE : type d’html utilisé, par défaut l’html 5. Il ne faut pas utiliser autre chose. • commentaire <!—mon commentaire--> <!DOCTYPE html> <html> <head> <title>Exemple de fichier html</title> <meta charset=« utf-8" /> </head> <body>  </body> </html> entête html corps É C R I R E D U T E X T E • du_texte.html • <p>un paragraphe</p> • les titres : de <h1>titre principal</h1> à <h6>titre de niveau 6</h6> • texte <strong>renforcé</strong> (en gras) ou mis en <em>emphase</em> (en italique) • les listes ordonnées (<ol></ol>) et non-ordonnées (<ul></ul>). Chaque liste est composée d’item (<li></li>). • du faux texte (lorem ipsum) pour le remplissage B A L I S E S S É M A N T I Q U E S • les balises sémantiques permettent de structurer le texte : • nav, header, footer, section, article, … • structures complexes : table ou form • ils permettent de rationaliser le développement du site • il faut gérer leurs apparences avec un css L E S T Y L E • permet de modifier l’apparence de chaque élément en changeant ses propriétés • s’applique : • dans le fichier html avec la balise <style></style> • dans un fichier séparé avec la balise <link rel="stylesheet" type="text/ css" href="nom_de_fichier" /> • On préfèrera séparer forme et fond et ainsi faire un fichier de style séparé lorsque le fichier html devient grand. • Si plusieurs propriétés s’appliquent pour des blocs imbriqués (body et p par exemple), c’est la propriété du bloc le plus imbriqué qui est appliquée • Si plusieurs modifications s’appliquent à la même propriété, c’est le dernier qui a parlé qui a raison. sélecteur { propriété: valeur; ... propriété: valeur; } p { font-size: 40px; color: #FF0000; background-color: skyblue; } les éléments p couleur de fond format rgb noms P O L I C E S D E C A R A C T È R E S • choix de la police • un police présente sur tous les navigateurs : web safe fonts • charger une police explicitement, par exemple avec google-fonts • la taille (une propriété css) • unité em : par rapport à la balise père. font-size: 2em signifie une taille deux fois plus grande que la balise père. Chaque navigateur donne une taille à la balise html (la balise racine) • unité px : par rapport à la résolution de l’écran (attention aux différentes résolutions, un bon design doit s’adapter aux différentes tailles d’écran) • noms : small, medium, xx-large, … E S T- C E D U B O N ? • Il est indispensable d’écrire du html/css correct • outils de validation : https://validator.w3.org (validez html_a_valider.html) • coding style : https://google.github.io/styleguide/htmlcssguide.html • S’il n’est pas correct, les navigateurs vont essayer de l’interpréter pour le rendre présentable. • Il existe des différences d’interprétation entre navigateurs, mais la plupart du temps les cela est du au rattrapage des erreurs du html (quirks mode) • très compliqué à débeuguer car difficile de savoir ce qui cause l’erreur. • code impossible à faire évoluer • autant tout de suite bien faire les chose. B A S E S S I T E P H A S E 1 phase_1/index.html M O D È L E D E B O I T E S • chaque balise est représentée sous la forme d’une boite et s’intègre dans le flux du rendu • Il y a deux grands types de boites (propriété display en css) : • box : les uns en dessous des autres. • p, h1, … • elles prennent la largeur de la fenêtre par défaut. La hauteur est déterminée par le contenu • inline : les uns à coté des autres • strong, em, … • pas de largeur ni de hauteur • le positionnement précis des balise peut assez assez complexe. Il est recommandé de rester simple ou d’utiliser des framework pour gérer le positionnement dans le flux. box inline C O N F I G U R E R S E S B O I T E S • modèle_de_boite.html • html, body { padding: 0; margin: 0; } p { padding: 100px; border: 10px dashed olive; margin: 50px; } h2 { width: 300px; height: 100px; border: 2px solid blue; margin: 0; margin-top: 60px; } • centrer les objets par défaut, toute la largeur est prise fusion des marges C H O I S I R S E S É L É M E N T S • ajout d’attributs aux balises : • id : identifiant unique pour une balise, s’utilise avec un # dans les css • class : identifiant d’une classe d’éléments. Peut regrouper des blocs de natures diverses. S’utilise avec un . dans les css. • balises anonymes div et span: sélection uniquement via son id et ou ses classes. Permet de contrôler parfaitement le bloc. • div pour les blocs • span pour les inline • class et div sont très utilisé dans les frameworks. <p id="premier_paragraphe"> je suis 2x plus grand</p> <p class="vert"> je suis vert sur fond blanc </p> <p class="vert rouge"> je suis vert sur fond rouge </p> <div id="dernier_paragraphe" class= "rouge"> je suis vert et 2x plus petit </div> #premier_paragraphe { font-size: 2em; } #dernier_paragraphe { font-size: .5em; } .vert { color: #00ff00; } .font_rouge { background-color: #ff0000; } S E L E C T E U R C S S • la hiérarchie des balises s’appelle l’arbre DOM. On parle de racine (html), de père, de fils et de descendants. • toute modification s’applique par défaut à l’élément et ses descendants • On peut affiner la sélection. Par exemple : • h1, h2: les titres h1 et h2 • .cl: éléments de classe cl • p.cl: paragraphes de classe cl • .cl1.cl2: éléments ayant les classes cl1 et cl2 • section h2: les h2 descendants d’une section (peut-être aussi profond que l’on veut) • ul > li: les li fils d’un ul (et pas d’un ol par exemple) S É L E C T E U R S S I T E P H A S E 2 phase_2/index.html L I E N S • <a href=« chemin_lien">texte où cliquer</a> • deux types de liens : • relatifs à la position du fichier html : ./index.html ou ../répertoire/autre_index.html) • externe : une adresse web (doit commencer par https:// ou http://) P R O P R I É T É S C S S D E S L I E N S • des_liens.html • ajout de pseudo-classes • a : sélecteur du lien. Mais il y a plusieurs sous cas : • a:visited : apparence d’un lien après qu’il ait été visité • a:hover : lorsque la souris passe dessus • a:active : lorsque l’on clique dessus a, a:visited { text-decoration: none; color: #D7661C; border-bottom: 1px dotted #ccc; } a:hover { color: #94ab36; border-bottom: 1px solid #ccc; } a:active { color: #94ab36; border-bottom: 3px solid #ccc; } a.pdf { color: #360; background: url(pdf.gif) no-repeat; min-height: 10px; padding-left: 12px; } I M A G E S • <img src="chemin_image" alt="texte de remplacement" width="XXXpx" height="XXXpx"/> • Pour éviter les problèmes de chargement on mettra toujours les paramètres width et height à la taille réelle de l’image • par défaut une image est en display inline • pour centrer une image on utilisera donc les paramètres css: • display: block; • margin-left: auto; • margin-right: auto; I M A G E S D E F O N D • plusieurs format de couleurs • images de fond plusieurs propriétés : • background-color, background-image, … • on peut les assembler en une seule : background qui est une uploads/s3/ html-et-css.pdf