Embed Size (px)
Citation preview
HTML & CSS
Synthèse des informations concernant HTML & CSS
Rédigée par
AGLIATA Anthonywww.thessa-innovation.com
CSS & HTML Page 1 sur 22
HTML & CSS
TABLE DES MATIERES
Chapitre 1: Html 1. Structure d'une page HTML2. Plan d'une page HTML3. Syntaxe du XHTML4. Synthèse des balises HTML
Chapitre 2: CSS1. Syntaxe du Css2. Les couleurs3. Les polices4. Les unités de mesures5. Le modèle d'une boite6. Supprimer les marges par défaut7. Les éléments flottants8. Les positions9. Synthèse des attributs CSS10. Flexbox12. Bootstrap
CSS & HTML Page 2 sur 22
CHAPITRE 1: HTML
1. Structure d'une page HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-BE">
<head><!-- pour protocole http --><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="Content-Style-Type" content="text/css" /><meta http-equiv="Content-Script-Type" content="text/javascript" /><meta http-equiv="Content-Language" content="fr-BE" />
<!-- "notice Dublin Core" de la ressource --><meta name="DC.Language" content="fr" /><meta name="DC.Creator" content="Anthony Agliata" /><meta name="DC.Format" content="text/html" />
<!-- icone pour les favoris --><link rel="shortcut icon" type="image/png" href="../img/favicon.png" />
<!-- liens vers les feuilles de styles adéquates en fonction du media --><link rel="stylesheet" type="text/css" href="../css/screen.css" media="screen" /><link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
<!-- inclure le javascript --><script type="text/javascript" src="../js/script.js" ></script>
<title>Exercice</title></head>
<body>
<header></header>
<nav> <!-- menu --></nav>
<section> <!-- section de page --><article>texte</article><aside></aside>
</section>
<footer></footer>
</body></html>
CSS & HTML Page 3 sur 22
2. Plan d'une page HTML
Header : EntêteNav : MenuSection : Partie de pageArticle : ArticleAside : Complement d'informationsFooter : Pied de page
3. Syntaxe du XHTML (HTML + XML)
- Les noms des balises et des attributs sont écrits en minuscules.- Les valeurs des attributs sont placées entre apostrophes simples ou doubles.- Tout attribut doit impérativement recevoir une valeur.- Toute balise doit être refermée.- Les balises vides doivent être explicitées.- Les balises seront correctement imbriquées.
4. Synthèse des balises html
Signification Balises
Commentaires <!-- texte -->
Saut à la ligne <br />
Lien hypertext <a href=''page1.html'' title=''page2'' > Allez à la page 1</a> - lien vers un élément identifié : a href='' #élémént'' - ouvrir le lien dans un nouvel onglet : target=''_blank'' - envoyer un mail : <a href : ''mailto:[email protected]'' - telecharger un fichier : <a href :''nomdufichier.zip''' - ouvrir dans un nouvel onglet : target =''_blank''
Emphaser une portion de texte
<p> Voici un texte <em>important</em></p>
Image <figure> <img alt='poisson' src='poisson.png' class=''cache'' /> <figcaption>libellé de l'image</figcaption></figure>
.cache{display: none ;} =>préchargement en css
CSS & HTML Page 4 sur 22
Citations <p>j'ai deux citations : <q>petite citation en une ligne</q> <blockquote> Longue citation</blockquote></p>
Mettre plus en evidence <p>il est <strong>encore plus important</strong> de manger des fruits.</p>
Liste de définition <dl>
<dt>titre1</dt> <dd> définition 1</dd>
<dt>titre2</dt> <dd> définition 2</dd>
</dl>
Formulaire
Input
Long champ de texte
Cases à cocher
Bouton radio à choisir
Liste déroulante
Bouton submit
<form action =' pagesuivane.php' method='get'>
<label for=''nom''> <input type ='text' id=''nom'' name='recherche' placeholder='entre un nom'' /> </label>
<textarea> </textarea>
<input type= ''checkbox'' value=''velo'' /> Vélo - attribut checked (pour deja selectionner la case)
< input type =''radio'' value=''Monsieur'' name=''sexe'' /> < input type ='' radio'' value=''Madame'' name=''sexe />
< select name=''voiture''> <option value=''peugeot'' >Peugeot</option> <option value='' renault'' >Renault</option> </select> <input type ='submit' value='ok' />
</form>
Titres (6 niveaux) <h1> Titre</h1>
Liste ordonnée / puces simples
<ol> <li>objet 1</li> <li>objet 2</li></ol>
Pour une liste à puces simples, remplacer ol par ul.
Paragraphe <p>texte</p>
CSS & HTML Page 5 sur 22
Tableau <table> <tr> <th>Entête de ligne</th> <td>Cellule1</td> </tr></table>
Aller à la ligne <br />
Surligner <mark>texte</mark>
Balises de présentation
Information complémentaires
Menu
Section de page (cadre)
Article
<aside>informations</aside>
<nav>menu</nav>
<section> cadre </section>
<article></article>
Listes <ol> <li> item1</li> <li> item2</li></ol>
- <ul> pour liste non ordonnée
Gras <strong> Gras </strong>
Conteneur en ligne <span>Contenu en ligne</span>
Conteneur en bloc <div>Contenu en bloc </div>
CSS & HTML Page 6 sur 22
CHAPITRE 2: Le CSS
1. Syntaxe du CSS
DénominationsIntitulé de la balise
{attribut : valeur ;
}
Exemple :
h1{
color:blue ;
}
Les classes
.classe{} => Porte sur plusieurs éléments du document.
Les identifiants#identifiants{} => Unique au document
Les regroupements de selecteurs.texte, p, h1{} => Porte sur tous les selecteurs
Les regroupements de propriétésfont : italic bold 120% / 140% Arial, sans-serif ;
Les sélecteurs d'arborescencea.toto{} => Tous les liens a de la classe toto#menu a {} => Tous les liens a provenant des éléments identifiés menu
Les sélecteurs hierarchiques
: first-child => Premier élément de son élément parent:nth-child(2) =>Second élément du parentdiv > p => P enfant de divdiv + p => Lorsque P est précédé de div a[title=''menu''] => Lorsque l'attribut (title) de A à pour valeur menu
La notion de profondeurz-index:1 ; => l'élément le plus profond (que z-index:2) ;
2. CouleursRGB
rgb(0,0,255) => Bleurgb(0,0,0) => Noirrgb(255,255,255) => Blancrgb(0,128,0) => Vertrgb(255,255,0) => Jaunergb(255,0,0) => Rouge
CSS & HTML Page 7 sur 22
Hexadécimale#000000 => Noir#ffffff => Blanc#ff0000 => Rouge#008000 => Bleu#ffff00 => Jaune
3. Les polices
Les polices de baseTimes New Roman (pc), Times (mac).
Les polices standards
Police Usage
Arial, Arial Black Imprimé, web
Comic Sans MS Imprimé, web
Courrier New Listing, code
Georgia Web
Impact Monotype Imprimé, web
Symbol Monotype (alphabet grec)
Imprimé, web
Times New Roman Imprimé, web
Trebuchet MS Web
Verdana Web
Webdings Web
Les polices intégrées au CSSsérifsans-sérifcursive
4. Les unités de mesuresPixels : pxEm (relative) : 1em (100%)
2em (2fois plus grand)0.5em (2fois plus petit)
5. Le modèle d'une boite
CSS & HTML Page 8 sur 22
6. Supprimer les marges par défaut
*{ margin:0 ; paddding : 0 ;}
7. Les éléments flottants
Float : left ;L'élément se met en flottant et se place à gauche de la page.
Clear : left ;Permet à l'élément qui suis ce flottant de le prendre en compte et de ne pas passer en dessous.Si il y a un flottat à gauche et à droite, utiliser clear : both ; pour les prendre en compte tous les deux.
8. Position
Position : static ;Valeur par défaut.
Position : relative ;Permet d'utiliser les propriétés suivantes :
- top, bottom, left, right
Position : fixed ;Reste en permanence sur l'écran
Position :absolute ;Se positionne par rapport au premier parent qui n'est pas statique
9. Synthèse des attributs Css
Commentaires : /* texte */
Signification Attributs
TEXTE
Couleur du texte
Alignement du texte
Decoration du texte
Typographie
Color:blue ; [couleurs en anglais]
Text-align : center ; [left, right, center, justify]
Text-decoration : none ; [underline, overline, line-through]Text-decoration : underline red ;
Font-family :''times new roman, arial, sans-serif'' ; - ajouter une autre police à faire télécharger par l'utilisateur : @fontface
CSS & HTML Page 9 sur 22
Style de texte
Graisse du texte
Taille du texte
Hauteur de ligne
Espace entre les mots
Crenage
Casse
Lettrine
Césure des mots
Font-style : italic ; [normal, oblique]
Font-weight : bold ; [nomal, lighter, bolder]
Font-size : 12px ;
Line-height : 5px ;
Word-spacing : 3px ;
Letter-spacing : 4px ;
Text-transform : capitalize ; [uppercase, lowercase]
p:first-letter { font-weight : bold ; float : left ; font-size : 3em}
word-wrap : break-word ;
BORDURES
Type de bordure
Epaisseur d'une bordure
Couleur de bordure
Bordure arrondie
Dénominations :border-top [bottom, left & right]
Border-style:dashed ; [dotted, double, groove, hidden, inset none, outset, ridge, solid]
Border-width : 6px 2px [horizontal vertical]4 valeurs : du haut vers la droite (sens horaire)
Border-color : red ;
border-radius : 15px ; border-radius : 10px 15px 5px 5px ; [Hgauche, Hdroit, Bdroite, Bgauche ]
FOND
Couleur de fond
Image de fond
Position du fond
Répétition du fond
Fixer le fond (texte defile sur fond fixe)
Plusieurs images de fond
Background-color: red ;
Background-image : url(images/fond.jpg) ;
Background-repeat : none ;Background-position : 0% 0% ; =>left top [50% 50% center, 100% 100% roght bottom]
Background-repeat : no-repeat ; [repeat (x et y), repeat-x, repeat-y]
background-attachment : fixed ; [scroll pour défiler avec le texte]
CSS & HTML Page 10 sur 22
background: url("soleil.png") fixed no-repeat top right, url("neige.png") fixed; => l'image soleil au dessus de neige
Masquer un élement Visibility ; hidden.
Les liens dynamiques
Survolé
Visité
Au moment du click
A:hover{}
A:visited{}
A:active{}
La transparence
Opacity
RGBa
opacity: 0.6; [1 opaque, 0 transparent]
background-color: rgba(255, 0, 0, 0.5); rouge vert noir et transparence
OMBRES
Ombres de boite
Ombres de texte
Box-shadow : 6px 6px 0px black ; [décalage horizontal, décalage vertical, adoucissement dégradé, couleur de l'ombre] - ajouter inset en dernière valeur permet de placer l'ombre à l'interieur.
Text-shadow : 2px 2px 4px black ;
HAUTEURS - LARGEURS
Hauteur Hauteur Max Hauteur Min
Largeur Largeur Max Largeur Min
Height : 200px ;Max-height : 800px ;Min-heigh : 200px ;
Width : 200px ;Max-width : 400px ;Min-width : 200px ;
MARGES
Marges extérieures
Marges intérieurs
Centrer des blocs
Margin:top ; [bottom, right, left]margin : 10px 5px 15px 20px ; => haut droite bas gauche
Padding : 10px 5px 15px 20px ;
Margin : auto ;
Ajouter un Scroll dans unbloc
Overflow : scroll ; [visible : texte dépasse les limites du bloc, hidden texte coupé, auto]
Display
Renvoie à la ligne display : block ;
CSS & HTML Page 11 sur 22
Annule le renvoie à la ligne
N'affiche pas le bloc
display : inline-block ;
display : none ;
CSS & HTML Page 12 sur 22
11. Mise en page Flexbox
Html Css<div id="conteneur"> #conteneur{
<div class="element">Elément 1</div> display: flex ;<div class="element">Elément 2</div> }<div class="element">Elément 3</div>
</div>
Comportement des blocs par défaut Après le display : flex;
Direction
Css Flex-direction : column ;#conteneur {
display: flex ;flex-direction : column ;
}
Flex-direction :column-reverse
Autres propriétés :- row : sur une ligne : de base- row-reverse : ligne inversée
Retour à la ligne
CSS#conteneur {
display: flex ;flex-direction : wrap ;
}
CSS & HTML Page 13 sur 22
Wrap : les éléments passent à la ligne lorsqu'il n'y a plus de place (en dessous) .
Wrap-reverse : les éléments passent à la ligne lorsqu'il n'y a plus de place
(au dessus) .
Aligner sur l'axe principal ( horizontal)
CSS#conteneur{
display: flex; justify-content: space-around;
}
Aligné sur la gauche
Aligné sur la droite
Aligné au centre
Aligné sur tout l'espace
Aligné sur tout l'espace ( avec marges extérieures)
Aligner sur l'axe secondaire (vertical)
CSS#conteneur{
display: flex; justify-content: space-around;
align-items : center ;}
CSS & HTML Page 14 sur 22
NB : margin : auto ; permet aussi de centrer les blocs
Autres propriétés : align-items : strech ; => les éléments sont étirés sur tout l'axe (valeur par défaut) align-items : flex-start ; => alignés au début align-items : flex-end ; => alignés à la fin align-items : baseline ; => alignés sur la ligne de base (semblable à flex-start)
Aligner un seul élément
CSS#element2{
align-self : flex-end ; Même propriétés que align-items .}
Comportement d'alignement de plusieurs éléments
CSS#conteneur{
display: flex;flex-wrap: wrap;align-content : flex-start ;
}
Flex-start Space-between
Flex-end Space-around
Center Stretch
Notion d'ordre
La propriétés : ordre permet de déterminer un ordre d'affichage à l'écran.
CSS & HTML Page 15 sur 22
CSS.element:nth-child(1){
order: 3;}.element:nth-child(2){
Deviendraorder: 1;
}.element:nth-child(3){
order: 2;}
Agrandir – retrecir un élément
CSS.element:nth-child(2){ Le second élémentest agrandit, le nombre indique dans quelle
flex: 1; mesure il peut grossir par rapport aux autres}
CSS.element:nth-child(1){ Ici, le premier élément peut grossir 2 fois plus que le second
flex: 2; élément : }.element:nth-child(2){
flex: 1;}
Les positionnements ABSOLU, RELATIF et FIXE
ABSOLU
CSSelement{ Permet de placer un élément réellement n'importe ou sur la page, il suffit de position: absolute; le diriger avec les propriétés : left, right, top et bottom.} Bouge avec la page la page.
FIXE
CSSelement { Meme fonctionnement que la position absolu, cependant, l'élement ne position: relative; bouge pas avec la page.}
RELATIF
CSSelement{ Bouge par rapport à la position ou il se trouve initialement et non par rapport position: relative; à l'angle de la page (du absolu et relatif). }
CSS & HTML Page 16 sur 22
12.Bootstrap (attention, cours v3 bootstrap - voir doc)
Framework HTML – CSS – JS permettant la mise en page responsive.
Intégrer bootstrap (CDN)
Se rendre sur le site du langage et téléchager le CDN à jour.
A) Intégrer d'abord Jquery<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
B) Intégrer Bootstrap
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
Définir la largeur du viewport en fonction de l'appareil utilisé (+ zoom à 1)<meta name="viewport" content="width=device-width, initial-scale=1" />
Les containerSont de deux types :
- Largeur fixe- Largeur totale de l'appareil (du viewport)
Ils sont définis en fonction de la classe.<div class=''container''> : fixe<div class ''container-fluid''> : largeur totale
Changer le styleCouleur du fond<div style=''background:red''>
Les différentes catégories de tailles d'écran (grid system)xs < 576px sm >= 576px md >= 768pxlg >= 992px xl >= 1200px
Composition d'une ligne bootstrap
Bootstrap donne 12points en largeur à répartir entre les éléments.En fonction du type d'écran, ils seront alignés ensemble ou non ( de base ils se mettent les un en desous des autres).
<div id=''block1'' row=''col-md-6''></div><div id=''block2'' row=''col-md-6''></div>
A partit des tailles d'écran 768px, les blocs se mettront a coté des autres ( par deux car 6+6 =12)Si on veut 3 (col-md-4) pour les 3.
CSS & HTML Page 17 sur 22
Si on veut ajouter un autre comportement pour un autre type d'écran il suffit de juxtaposer à la suite.<div id=''block2'' row=''col-sm-6 col-md-4''></div><div id=''block2'' row=''col-sm-6 col-md-4''></div>Pour les écrans :
- 576px, les blocs se disposeront par 2- 768px, les blocs se disposeront par 3
Typographie
Nouvelles balises- Ecrire en petit : <small></small>- Mettre en évidence : <mark></mark>
Les classes de mise en page du texte
<div class = '' text-primary''> : texte est coloré en bleu<div class = '' text-succes''> : texte est coloré en vert<div class = '' text-warning''> : texte est coloré en marron<div class = '' text-danger''> : texte est coloré en rouge
Ces mot clés peuvent être utilisé avec le background :<div class = '' bg-primary''> : le fond devient bleu
Les formulaires
Formulaire de base<form class=''form-inline''>
<div class=''form-group''><label for=''name''>Name</label><input type=''text'' id=''name'' class=''form-control''>
</div>
<div class=''form-group''><label for=''comment''>Comment</label><input type=''text'' id=''comment'' class=''form-control''>
</div><div class=''form-check''>
<label><input type=''checkbox'' value=''1''>1</label><label><input type=''checkbox'' value=''2''>2</label>
</div>
<textarea class=''form-control'' id=''comment''></textearea><button type=''submit'' class=''btn btn-default''> Submit </button>
</form>
-class=''form-inline'',Permet de mettre les éléments du formulaire sur une même ligne,si pas mentionné (form), ils se placent les un en dessous des autres.
- class = ''form-group'', Mentionne que les éléments font partie du même groupe dans le formulaire.
CSS & HTML Page 18 sur 22
- class = ''form-control'', Style des éléments : input, select et textarea
Gerer les erreurs - succesAjouter les class : has-succes ou has-error
Les boutons
<button type=''button'' class='' btn btn-default''> Bouton </button>
Styles class='' btn btn-primary'' bleuclass='' btn btn-succes'' vertclass='' btn btn-info'' bleu cielclass='' btn btn-warning'' orangeclass='' btn btn-danger'' rougeclass='' btn btn-link'' lien simple
Taillesclass='' btn btn-primary btn-lg''
Voir catégories grid system
class='' btn btn-primary btn-bloc''Prend toute la largeur du container
Appuyé class='' btn btn-primary active''
Désactivé class='' btn btn-primary disable''
Groupes de boutons
<div class=''btn-group''><button type=''button'' class='' btn btn-default''> Bouton </button><button type=''button'' class='' btn btn-default''> Bouton </button><button type=''button'' class='' btn btn-default''> Bouton </button>
</div>Horizontal
Pour vertical :<div class=''btn-group-vertical''>
Les images
<img src=''image.jpg'' />
class=''img-rounded'' Bords arrondisclass=''img-circle'' En forme de cercleclass=''img-thumbnail'' Vignette
Forcer la reduction de l'image par rapport à l'écranclass=''img-responsive''
CSS & HTML Page 19 sur 22
Glyphicons
<a href=''#'' class=''btn btn-default''> <span class=''glyphicon glyphincon-search> Search</span>
</a>* Petite loupe
<span class=''glyphicon glyphincon-print> : imprimante
Voir doc pour d'autres glyphicons
Les listes déroulantes (dropdown)
<div class=''dropdown''><button type=''button'' class=''btn btn-succes dropdown-toggle''
data-toggle=''dropdown''> Fruits </button>
<ul class=''dropdown-menu''><li>Pomme</li><li>Poire</li><li>Orange</li>
</ul></div>
Ajouter l'image petit triange dans le bouton de la liste deroulanteFruits <span class=''caret''></span>
Ajouter une liste de séparation dans la liste déroulante<li class=''divider''></li>
Ajouter un titre dans la liste<li class=''dropdown-header''>Titre</li>
Rendre un élément non cliquable<li class=''disabled''>Element </li>
La barre de progression ( progressbar)
<div class=''progress''><div class=''progress-bar'' role=''progressbar'' style=''width:70%''>70%</div>
</div>La progression est définie par le width
Le scrollSpy ( espion de la barre de scroll)
Permet de modifier un élément en fonction de l'avancement du scrollbar.Interessant dans le cadre d'une navbar ( les éléments se mettent en surbrillance quand on arrive au chapitre en question.
CSS & HTML Page 20 sur 22
Les modals (pop up)
<div class=''container''>
< a href= ''#'' class='' btn btn-info'' data-toggle=''modal'' data-target=''monModal''> Ouvrir Modal </a>
<div class=''modal fade'' id=''monModal''><div class=''modal-dialog>
<div class=''modal-content><div class=''modal-header''>
<h4 class=''modal-title>Titre du pop up</h4><button type=''button'' class=''close''
data-dismiss=''modal''>X
</button></div><div class=''modal-body''>
<p> Hello les amis </p></div><div class=''modal-footer''>
<button type=''button'' class='' btn btn-default''data-dismiss=''modal''>Fermer la fenêtre
</button></div>
</div></div>
</div></div>
Navbar ( barre de navigation)
<nav class=''navbar navbar-default''><div class=''container''>
<div class=''navbar-header''><a href=''#'' class=''navbar-brand''>Nom du site</a>
</div><div>
<ul class=''nav navbar-nav''><li><a href=''#'' Accueil</a></li><li><a href=''#''Qui sommes nous</a></li><li><a href=''#''Nos projets</a></li><li><a href=''#''Contacts</a></li>
</ul></div>
</div></nav>
Barre de navigation noire : <nav class=''navbar navbar-inverse''>
CSS & HTML Page 21 sur 22
Barre fixée en haut de l'écran : <nav class=''navbar navbar-inverse navbar-fixed-top''>
Barre fixée en bas de l'écran :<nav class=''navbar navbar-inverse navbar-fixed-bottom''>
Ajouter d'autres éléménts dans la navbar et les positionner
<nav ><div class=''container''>
<div class=''navbar-header''></div><div>
<ul class=''nav navbar-nav''><li></li><li></li>
</ul><ul class=''nav navbar-nav navbar-right''>
<li></li><li></li>
</ul></div>
</div></nav>
Aligner les éléments de la navbar sur la droite<div class=''container-fluid''>
Carousel Animation mettant les éléménts les un à la suite des autresInteressant pour les slides photos
CSS & HTML Page 22 sur 22
