Introduction aux langages Html et CSS
HTML ? Langage de description d’un document hypertexte (≈ liens entre différents documents) Hyper Text Markup Language, né en 1989 Ensemble de balises décrivant le fond et la forme d’un document (et son contenu) nommé document.html
Utilisation du langage HTML Balise = Marqueur, attribut et argument Balise = <marqueur attribut="argument"> Les marqueurs doivent être fermés : </marqueur> Ex. : pour écrire « html » on peut écrire : <strong>html</strong> <p><strong>html</strong></p> <p style="font-weight:bold">html</p> Important : minuscules, guillemets, ouverture et fermeture, hiérarchie
Syntaxe complexe <marqueur attribut="argument:valeur;argument2:valeur;">bla bla</marqueur> Exemples : <p style="font-size:15px;line-height:20px;">texte du paragraphe</p> <a href="http://lemonde.fr" target="_blank" style="color:#cccccc;">texte en lien</a>
Structuration de la page Html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>titre de la page</title> </head> <body> corps de la page (texte, image, etc.) </body> </html> Dans un fichier texte, écrire ce code et l’enregistrer sous le nom test.html
Kaymer, n°1 européen L'Allemand Martin Kaymer est assuré de remporter la Dubaï Race (classement des gains sur le circuit européen). Un titre qu'il doit à la défaillance de son concurrent, le Nord-irlandais Graeme McDowell, qui devait terminer l'Open de Dubaï dans les trois premiers pour espérer concurrencer Kaymer. Et après avoir rendu une dernière carte de 68, McDowell s'est finalement classé 13e. Kaymer succède à Lee Westwood au palmarès de la Dubaï Race. «Je suis très fier de mon année, a expliqué l'Allemand de 26 ans. J'ai atteint tous les objectifs que je m'étais fixé, gagné la Dubaï Race, un Majeur et la Ryder Cup.» Autre vainqueur du jour, le Suédois Robert Karlsson qui a remporté l'Open de Dubaï en dépassant ce dimanche le Britannique Ian Poulter en play-off. Karlsson a rendu une carte de 67, soit cinq coups sous le par. Le classement de l'Open de Dubaï Robert Karlsson (SUE) 274 (65-75-67-67) Ian Poulter (ANG) 274 (69-66-69-70) Alvaro Quiros (ESP) 275 (72-67-69-67) Lee Westwood (ANG) 275 (69-67-71-68) Rory McIlroy (IRN) 276 (71-72-66-67)
Marqueurs de texte basiques <p> : paragraphe <p>L'Allemand Martin Kaymer de la Dubaï Race.</p> <p>«Je suis très fier de mon année cinq coups sous le par.</p> <br /> : retour à la ligne un Majeur et la Ryder Cup.»<br /> <hr /> : ligne de séparation <hr />
Marqueurs de texte basiques <i> ou <em> : italique (emphasize) <em>citations</em> <b> ou <strong> : gras <p>L'Allemand <strong>Martin Kaymer</strong> est assuré <u> : souligné le Nord-irlandais <u>Graeme McDowell</u>, <big> : taille de caractère supérieure <p><big>«<em>Je suis très fier un Majeur et la Ryder Cup.</em>»</big><br /> <small> : taille de caractère inférieure <small>Autre vainqueur du jour soit cinq coups sous le par.</small></p>
Marqueurs de texte basiques <ul> : liste non ordonnée (puces) <ol> : liste ordonnée (1, 2, 3, 4…) <ol> Robert Karlsson (SUE) 274 (65-75-67-67) Rory McIlroy (IRN) 276 (71-72-66-67) </ol> <li> : élément d’une liste <li>Robert Karlsson (SUE) 274 (65-75-67-67)</li> Etc. <li>Rory McIlroy (IRN) 276 (71-72-66-67)</li> <hn> : niveaux de titre (<h1>, <h2>…) <h1>Kaymer, n°1 européen</h1> <h2>Le classement de l'Open de Dubaï</h2>
Valeurs de l’attribut style Apportent des précisions quant à la forme du contenu. Color : couleur de la police <h1 style="color:#ce8c4b;">Kaymer, n°1 européen</h1> Font-size : taille de la police <p style="font-size:20px;">L’Allemand Font-family : choix de la police <p style="font-family:arial;">Auteur de l’article</p> Text-align : alignement à l’intérieur du marqueur <p style="font-family:arial;text-align:right;">Auteur de l’article</p>
Valeurs de l’attribut style Font-weight : grosseur de la police (comme <strong>) <p style="font-family:arial;text-align:right;font-weight:bold;">Auteur de l’article</p> Font-style : style de la police (comme <em>) <p style="font-family:arial;text-align:right;font-weight:bold;font-style:italic;">Auteur de l’article</p> Text-transform : transformation de la police <p style="font-family:arial;text-align:right;font-weight:bold; font-style:italic;text-transform:capitalize;">Auteur de l’article</p> Text-decoration : décoration du texte (comme u) <p style="font-family:arial;text-align:right;font-weight:bold; font-style:italic;text-transform:capitalize;text-decoration:underline;">Auteur de l’article</p>
Valeurs de l’attribut style Border : bordures 3 valeurs : border-color:#272727; (la couleur de la bordure) border-width:3px; (l’épaisseur de la bordure) border-style :solid (le style de la bordure) Solid = pleine Dotted = pointillés Dashed = tirets None = pas de bordure … (http://www.w3schools.com/cssref/pr_border-style.asp) border:#272727 3px solid (écriture simplifiée avec les 3 arguments et leur valeur) <p style="font-family:arial;text-align:right;font-weight:bold; font-style:italic;text-transform:capitalize;text-decoration:underline;border:#272727 3px solid;">Auteur de l’article</p>
Valeurs de l’attribut style Background : fond d’un marqueur 4 valeurs : background-color:#ce8c4b; (couleur du fond) background-image:url(‘adresse de l’image’); (image de fond) background-repeat:no-repeat; (répétition de l’image de fond) repeat : répétition pour couvrir tout le marqueur (par défaut) no-repeat : pas de répétition repeat-x : répétition horizontale repeat-y : répétition verticale background-position: left bottom; (position de l’image ou de la première avant répétition) Background:#ce8c4b url(‘adresse de l’image’) no-repeat center center; (écriture simplifiée)
Valeurs de l’attribut style <p style="font-family:arial;text-align:right;font-weight:bold; font-style:italic;text-transform:capitalize;text-decoration:underline;border:#272727 3px solid;background-color:#ce8c4b;">Auteur de l’article</p>
Valeurs de l’attribut style Margin : marges extérieurs 4 valeurs : top right bottom left margin-top:20px; (20px de marge au-dessus du marqueur) margin:20px 0 0 0; (20px de marge au-dessus, 0 ailleurs) <p style="font-family:arial;text-align:right;font-weight:bold; font-style:italic;text-transform:capitalize;text-decoration:underline;border:#272727 3px solid;background-color:#ce8c4b;margin-top:20px;">Auteur de l’article</p>
Valeurs de l’attribut style Padding : marges intérieures Ecriture comme les marges extérieures <p style="font-family:arial;text-align:right;font-weight:bold; font-style:italic;text-transform:capitalize;text-decoration:underline;border:#272727 3px solid;background-color:#ce8c4b;margin-top:20px;padding:5px;">Auteur de l’article</p>
Valeurs de l’attribut style Width : largeur <p style="font-family:arial;text-align:right;font-weight:bold; font-style:italic;text-transform:uppercase;text-decoration:underline;border:# 272727 5px solid;background-color:#ce8c4b;margin-top:20px;padding:5px;width:100px;">Auteur de l’article</p> Height : hauteur <p style="font-family:arial;text-align:right;font-weight:bold; font-style:italic;text-transform:uppercase;text-decoration:underline;border:# 272727 5px solid;background-color:#ce8c4b;margin-top:20px;padding:5px;width:100px;height:30px;">Auteur de l’article</p>
Principaux marqueurs dans <body> Autres marqueurs courants : <a> : lien <span> : ensemble de caractères (≠ paragraphe) <img /> : image <table> : tableau <tr> : ligne d’un tableau <td> : cellule d’une ligne d’un tableau <div> : bloc
a : les liens Attribut href : destination du lien Lien externe : <a href="http://lequipe.fr">Lien vers le site L’équipe</a> Lien interne (vers une ancre) : <a href="#classement">l'Open de Dubaï</a> Ancre : <a name="classement">Le classement de l'Open de Dubaï</a> Attribut target : forme de la destination Autre page/onglet : <a href="http://lequipe.fr" target="_blank">
span : quelques caractères <span> est l’équivalent de <p> pour une suite de caractères ne formant pas un paragraphe <span> est de type « inline » et <p> de type « block » <span style="color:#ce8c4b">Dubaï Race</span>
img : images src : la source de l’image, son adresse <img src=" http://img.skysports.com/11/02/660x350/Martin-Kaymer-2011_2561118.jpg" /> width : largeur de l’image, en pixels ou % <img src="…" width="430px" /> height : hauteur de l’image, en pixels ou % <img src="…" width="430px " height="228px" /> Align : alignement à gauche, à droite, au centre <img src="…" width="430px " height="228px " align="left" />
div : blocs div VS table : moins rigide, table est quasi totalement abandonné aujourd’hui Attributs de style déjà évoqués float : alignement horizontal du bloc <div> <div style="float:left">…</div> <div>...</div> <div>…</div> <div style="float:right">…</div> </div>
div : blocs Fonctionnalités avancées des div Comportement des div par défaut Les unes en-dessous des autres Occupation minimale de l’espace par rapport à son contenu Comportement des div « flottantes » <div style="float:left;"> (div se positionnant à gauche et autorisant une autre div à se positionner sur la même ligne) <div style="float:right;"> (div se positionnant à droite et autorisant une autre div à se positionner sur la même ligne)
div : blocs Comportement des div si position non flottante Valeurs à préciser dans l’attribut style de la div : position:fixed; (position fixe sur la page) position:absolute; (position fixe dans le premier bloc parent ayant le style : position:relative) top:50px (haut de la div à 50px du bord haut de page) right:20px (droite de la div à 20px du bord droit de la page) z-index:10 (rang de la div dans la superposition)
Les balises en Html5 Nouvelles balises équivalentes de div mais appelées « sémantiques » (plus explicites => meilleur référencement) Header : pour la partie haute de la page Footer : pour la partie basse de la page Nav : pour un menu de navigation Section : pour la partie principale de la page Article : pour un article
Les nouveaux styles en CSS3 Bords arrondis (comme pour les rectangles arrondis sous Photoshop) : border-radius top-left top-right bottom-right bottom-left Valeur exprimée en pixels border-radius:5px 0 0 0; Ombre portée (comme pour l’effet ombre portée sous Photoshop) : box-shadow Décalage-horizontal décalage-vertical flou taille couleur box-shadow:2px 2px 1px 2px #444444; Ombre portée pour les textes text-shadow Fonctionne comme box-shadow
Les nouveaux styles en CSS3 Dégradé de couleur linear-gradient Point de départ, couleur de départ et décalage, couleur de transition et décalage, couleur de fin et décalage) http://www.colorzilla.com/gradient-editor/ Transitions Changement de style au survol minuté transition-duration:.20s; -webkit-transition-duration:.20s; -moz-transition-duration:.20s;
Styles avancés : CSS Regrouper les valeurs de l’attribut style dans une balise <style> Permettre de gagner du temps avec des styles prédéfinis <head> <style type="text/css"> </style> </head>
Styles avancés id et class : identification des styles personnalisés <p class="signature">…</p> body, html, a, p, hr, br, li, ul, ol… sont des sélecteurs de balise pour les styles Syntaxe : sélecteur de balise ou .class ou #id { propriété:valeur; propriété:valeur; }
Styles avancés Nouvelles possibilités grâce aux pseudo-classes : a (lien basique) a:visited (lien déjà cliqué) a:hover (lien survolé) a:active (clique sur le lien) Pour les pseudo-classes : préciser les styles qui diffèrent de ceux du marqeur
Les nouveaux styles en CSS3 Exercice : créer un bouton en CSS Style display : none : caché block : comme un paragraphe <p> (largeur maximale disponible, hauteur minimale pour le contenu et les marges internes, retour à la ligne) inline : comme un lien <a> (largeur et hauteur minimales pour le contenu et les marges internes, alignement avec le reste des éléments, pas de marges externes, pas de width ou height) Inline-block : mix entre les 2 précédents (comportement comme inline mais avec des marges externes possibles et valeurs width et height)