Introduction aux langages Html et CSS

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 <marqueurattribut="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> <metacharset="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 • cinq coups sous le par.</p> <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 <ol> <li>Robert Karlsson (SUE) 274 (65-75-67-67)</li> Etc. <li>Rory McIlroy (IRN) 276 (71-72-66-67)</li> </ol> • <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)

Introduction aux langages Html et CSS