Introduction aux langages Html et CSS

Name: Introduction aux langages Html et CSS
Uploaded: 2017-12-09T13:58:26+00:00
Duration: PTM20S19
Channel: Jacquie Chretien
Description: 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 <marqueur attribut="argument:valeur;argument2:valeur;">bla bla</marqueur> Exemples : <p style="font-size:15px;line-height:20px;">texte du paragraphe</p> <a href=" 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 ( ) Ian Poulter (ANG) 274 ( ) Alvaro Quiros (ESP) 275 ( ) Lee Westwood (ANG) 275 ( ) Rory McIlroy (IRN) 276 ( )

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 />

<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>

<ul> : liste non ordonnée (puces) <ol> : liste ordonnée (1, 2, 3, 4…) <ol> Robert Karlsson (SUE) 274 ( ) Rory McIlroy (IRN) 276 ( ) </ol> <li> : élément d’une liste <li>Robert Karlsson (SUE) 274 ( )</li> Etc. <li>Rory McIlroy (IRN) 276 ( )</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>

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>

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 … ( border:# px 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:# px solid;">Auteur de l’article</p>

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)

<p style="font-family:arial;text-align:right;font-weight:bold; font-style:italic;text-transform:capitalize;text-decoration:underline;border:# px solid;background-color:#ce8c4b;">Auteur de l’article</p>

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:# px solid;background-color:#ce8c4b;margin-top:20px;">Auteur de l’article</p>

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:# px solid;background-color:#ce8c4b;margin-top:20px;padding:5px;">Auteur de l’article</p>

Width : largeur <p style="font-family:arial;text-align:right;font-weight:bold; font-style:italic;text-transform:uppercase;text-decoration:underline;border:# px 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:# px 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=" 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=" 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=" /> 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

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) 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

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

Présentations similaires

Présentation au sujet: "Introduction aux langages Html et CSS"— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back

Entrer

S'autoriser via un réseau social:

Introduction aux langages Html et CSS

Présentations similaires

Présentation au sujet: "Introduction aux langages Html et CSS"— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back