Le diaporama des bases du langage html
Download
Report
Transcript Le diaporama des bases du langage html
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
• 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;fontweight:bold;">Auteur de l’article</p>
– Font-style : style de la police (comme <em>)
• <p style="font-family:arial;text-align:right;fontweight: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;textdecoration: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;textdecoration: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;textdecoration:underline;border:#272727 3px solid;backgroundcolor:#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;fontweight:bold; font-style:italic;texttransform:capitalize;textdecoration:underline;border:#272727 3px
solid;background-color:#ce8c4b;margintop: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;fontweight:bold; font-style:italic;texttransform:capitalize;textdecoration:underline;border:#272727 3px
solid;background-color:#ce8c4b;margintop: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;textdecoration:underline;border:# 272727 5px
solid;background-color:#ce8c4b;margintop: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;textdecoration:underline;border:# 272727 5px
solid;background-color:#ce8c4b;margintop: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/MartinKaymer-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)