Cours HTML/CSS

COURS HTML / CSS

Axel Chalon – Cours HTML/CSS H1 P2018

Différence HTML / CSS

Le rôle principal d'HTML est de décrire le contenu : titre, sous-titre, formulaire,champ, lien, abréviation, citation, passage important...



Le rôle du CSS est de mettre en forme ce contenu : couleur, image de fond, police de caractère, bordures, agencement...


Différence HTML / CSS<h1>Mon site</h1>

<h2>Présentation</h2>

<p>Bienvenue sur <strong>mon site</strong> ! Je suis un étudiant à <abbr title="Hautes études des technologies de l'information et de la communication">HETIC</abbr>. Leur slogan est <q>Rien n'est fait s'il reste encore à faire</q>. Je vous conseille de visiter le <a href="http://hetic.net">site officiel de l'école</a> dont le logo est <img src="hetic.png" alt="logo hetic" />.</p>

<blockquote><p>Première grande école du web, la pluricompétence est au coeur de notre pédagogie. Choisir HETIC, c'est [...]</p>

<p>Les Héticiens trouvent sans mal le poste de leur choix en entreprise. [...]</p>

</blockquote>

<p>Les trois grands axes sont : </p><ul>

<li>Communication et création multimédia</li><li>Technologies de l'information</li><li>Connaissance du monde et des entreprises</li>

</ul>

<h2>Contact</h2>



En utilisant un reset CSS qui annule les effets de la feuille de style du navigateur en mettant toutes les marges à zéro, etc. (conseillé : Meyer CSS Reset), résultat :

Conseillé de tout le temps utilisé un reset. Permet d'avoir un site qui s'affiche de la même manière sur tous les navigateurs et permet d'éviter de s'embrouiller avec les propriétés CSS ajoutées par le navigateur.


Différence entre HTML et CSS

http://www.csszengarden.com/


Différence entre HTML, CSS, Javascript et PHP

http://www.csszengarden.com/


Différence entre HTML, CSS, Javascript et PHP

http://www.csszengarden.com


HTML5 / CSS3

Source : www.alsacreations.com

HTML5 : entre autres, nouvelles balises qui décrivent encore plus le contenu (<article>, <header>, etc.)

CSS3 : animations, effets 3D, dégradés, ombres...

Les commentaires

HTML CSS JavaScript PHP

/* une ou plusieurs lignes */


// une ligne


// une ligne

<p>Hi</p> 

div { color: blue; } /* le texte sera en bleu */

/*BlablaUtilité : servir d'exemple */

// cette ligne initialise a à 2var a=2; // initialise a à 2

/*BlablaUtilité : servir d'exemple */

$a=2; // initialise a à 2


Liens absolus et relatifs

contact.htmlindex.html

logo_hetic.png

mon_site

images style

design.css




logo_hetic.png

mon_site

images style

images/logo_hetic.png

<img src="images/logo_hetic.png" alt="" />

design.css




logo_hetic.png

mon_site

images style

../images/logo_hetic.png

background: url(../images/logo_hetic.png);

design.css

../


Types de balise HTML

Balises ouvrantes et fermantes <balise>contenu</balise>

<p>Du contenu ici. <a href="http://google.fr">Google</a>.</p><div>Du contenu ici</div>

...

Balises autofermantes <balise />

<br /><img src="logo.png" alt="logo" /><meta charset="utf-8" />

...


Structure d'une page HTML

<!doctype html><html>

<head><title>Bonjour</title>

</head><body>

<div id="header"><h1>Titre de la page</h1>

<ul id="menu"><li>Accueil</li><li>Portfolio</li><li>Blog</li><li>Contact</li>

</ul></div>

<p>Ceci est une page d'exemple.</p></body>

</html>

html

headtitle

body

div

p

h1

li li li li


Structure d'une page HTML



</head><body>



</ul></div>


</html>

html

head body

div

h1 ul

p

title

li lilili


Sélecteurs CSS

li { color: blue; }

div h1 { font-size: 40px; }

div li { color: blue; }

ul li, h1, p { color: blue; }

html

head body

div

h1 ul

p

title

li lilili



</head><body>



</ul></div>


</html>


Sélecteurs CSS

ul li, h1, p { color: blue;}

ul li { color: blue; }h1 { color: blue; }p { color: blue; }

html

head body

div

h1 ul

p

title

li lilili



</head><body>



</ul></div>


</html>


Sélecteurs CSS

h1 + p { font-weight: bold; } = tous les p directement précédés d'un h1

body > p { color: red; } = tous les p dont le 1er parent (le parent le plus proche) est un body



</head><body>

<h1>Titre</h1><p>Premier paragraphe (sera en gras, en rouge)</p><p>Deuxième paragraphe (sera en rouge)</p>

<h1>Titre</h1><p>Premier paragraphe (sera en gras, en rouge)</p><p>Deuxième paragraphe (sera en rouge)</p>

<div><p>Bonjour.</p><p>Bonsoir.</p>

</div></body>

</html>


Insérer du CSS

Fichier externe (surtout si plusieurs pages utilisent le même CSS)

<!doctype html><html><head>

<title>Titre de la page</title><link rel="stylesheet" href="style.css" />

</head><body></body></html>

Dans le fichier style.css :

body { background: black; }


Insérer du CSS

Balise <style> (pour un CSS utilisé que sur une page)

<!doctype html><html><head>

<title>Titre de la page</title><style>

div#content { width: 960px; margin: auto; }</style>

</head><body>

<div id="content">(blablabla)

</div></body></html>


Insérer du CSS

Appliqué directement à l'élément (déconseillé)

<p style="color: red;">Bonjour.</p>


CSS box model

→ exemple


display: block;

Block :- Hauteur par défaut en fonction du contenu- Largeur par défaut maximale (largeur del'élément parent)- Largeur (width), hauteur (height), margin modifiables- Elements disposés verticalement


height: 50px;

width: 50px;

élément bloc sans css

width: 50px;height: 50px;


display: block;


display: inline;

Inline :- Hauteur en fonction du contenu- Largeur en fonction du contenu- width, height et margin non modifiables- Elements disposés côte à côte ("en ligne")

(Souvent des morceaux de paragraphe)



display: inline-block;

Inline-block :- Hauteur en fonction du contenu- Largeur en fonction du contenu- width, height, margin modifiables- Elements disposés côte à côte ("en ligne") et sont indivisibles

→ exemple


display: inline-block;


display


display

Rouge = blockBleu = inlineViolet = inline-block


Balises HTML

Elements de type bloc par défaut :

<h1>Titre</h1><h2>Sous-titre</h2><h3>Sous-sous-titre</h3><h4>Sous-sous-sous-titre</h4><h5>Sous-sous-sous-sous-titre</h5><h6>Sous-sous-sous-sous-sous-titre</h6><div>Bloc</div><p>Paragraphe</p>

Elements de type en ligne (inline) par défaut :

<span>Contenu ici.</span>

<em>Passage important.</em>

<strong>Passage encore plus important.</strong>

<a href="http://hetic.net">Site d'HETIC</a>

<img src="images/logo.png" alt="logo du site" />

Des éléments inline ne peuvent que contenir des éléments inline.

http://hetic.net/


ID et classes

id : Unique, permet d'identifier l'élément (Max 1 id par élément ; deux éléments ne peuvent pas avoir le même id)

<div id="content">Bonjour.</div>

#content { background: blue; }div#content { background: red; }

class : permet de catégoriser un élément (plusieurs éléments peuvent avoir les mêmes classes ; un élément peut avoir plusieurs classes)

<p class="commentaire">Super !</p><p class="commentaire">Génial !</p>

.commentaire { background: blue; }p.commentaire { background: red; }

Si une propriété a des valeurs différentes dans plusieurs règles appliquées à l'élément, c'est la valeur de la règle qui a le sélecteur le plus précis qui l'emportera. Ex: "body li.positif" est plus précis que "li.positif". Dans les exemples du haut, la <div> et les <p> auront un fond rouge.

Pas d'espace ni d'accent dans les noms d'id et de classes. Ils ne doivent pas non plus commencer par un chiffre.


CSS

#commentaires { background: blue;}

ul#commentaires li { color: black; font-weight: bold; }

ul#commentaires li.positif { color: green; }

ul#commentaires li.negatif { color: gray; }

ul#commentaires li.admin { border: 1px solid green; }

ul#commentaires li.admin.positif { border: 2px solid green; }

html

head body

div

h1 ul

p

title

li lilili

<!doctype html><html> <head> <title>Bonjour</title> </head> <body>

<div id="content"> <ul id="commentaires"> <li class="positif">Génia! (vert, gras)</div> <li>Pas mal. (noir, gras)</div> <li class="negatif">c nul (gris, gras)</div> <li class="negatif">LOLOLOLOL (gris, gras)</div> <li class="positif admin">Merci à tous ! (vert, gras, bordure 2px vert)</div> </ul> </div>

</body></html>

li

html body div#content ul#commentaires { background: blue;}


Propriétés CSS : texte

color: #FF0000;

font-family: Droid, Impact, Tahoma, Arial, serif;

font-size: 14px;

font-weight: normal;bold;

text-decoration: none;underlined;

font-style: normal;italic;


Propriétés CSS : texte

"serif" dans font-family = police à empattements par défaut de la machine

"sans-serif" dans font-family = police sans empattements par défaut de la machine


Centrer horizontalement une balise de type bloc

margin: auto;

(Calcule automatiquement les marges de gauche et de droite pour être centré)

Ne pas oublier de spécifier la largeur du bloc, sinon il prend toute la largeur !

width: 250px;margin: auto;


Centrer horizontalement du contenu en ligne (balise inline ou inline-block)

text-align: center;

Permet de centrer le contenu d'un élément.

Comme dans les logiciels de traitement de texte, on applique la justification ou l'alignement à un paragraphe, et pas à un mot, ou bien ça n'a pas de sens ! Donc ne pas utiliser un text-align sur un élément inline, ça ne marchera pas !

L'élément (block/inline-block) en bleu a un text-align: center;


Les pseudo-classes

:hover activé au survol de la souris

a:hover { background: pink; }

:link (liens non visités):visited (lien déjà visité):hover (survol):focus (champ de formulaire actif):active (au moment du clic sur un lien)

C'est un cas particulier où vous devez faire attention à l'ordre :- :hover doit être après :link et :visited- :active doit être après :hoverCela est dû au fait que a:link, a:visited, a:hover et a:active ont la même précision, donc en cas de propriétés avec des valeurs différentes dans ces règles CSS, ce sera la dernière règle CSS qui sera appliquée. Quand on est en train de cliquer sur un lien (:active), on a aussi la souris au-dessus du lien (:hover), mais c'est le :active qui doit prédominer, on met donc :active après :hover. Quand on passe la souris au-dessus (:hover) d'un lien non-visité (:link) ou visité (:visited), c'est le :hover qui doit prédominer ; on met donc :hover après :link et :visited.


Les pseudo-classes

:first-child pour le premier élément enfant:last-child pour le dernier élément enfant

ul#menu li:first-child { color: blue; }ul#menu li:last-child { color: red; }


</ul>


Les pseudo-éléments

q:before {content: "Citation : << ";

}

q:after {content: " >>";

}

<q>On peut tromper mille fois une personne...</q>

Citation : << On peut tromper mille fois une personne... >>


Les pseudo-éléments

q:before { content: "Citation : "; font-style: italic;}q:first-letter { font-weight: bold; }q:first-line { color: red; }

<q>On peut tromper mille fois une personne...</q>

Citation : On peut tromper mille fois une personne


overflow

overflow: visible; (défaut) (le contenu qui dépasse s'affiche, mais hors du flux)

hidden; (le contenu qui dépasse ne sera pas affiché)

scroll; (barres de défilement ajoutées, même si le contenu ne dépasse pas)

auto; (barres de défilements ajoutées si nécessaire)


overflow


visibility: hidden VS display: none

visibility: hidden display: none(visibility: visible)

Propriété appliquée au bloc en rose :


Les "super-propriétés"

border-left-width: 1px;border-left-type: solid;border-left-color: black;

border-left: 1px solid black;



border: 1px solid black;

border-left-width: 1px;border-left-type: solid;border-left-color: black;border-right-width: 1px;border-right-type: solid;border-right-color: black;border-top-width: 1px;border-top-type: solid;border-top-color: black;border-bottom-width: 1px;border-bottom-type: solid;border-bottom-color: black;



margin-top: 20px;margin-right: 20px;margin-bottom: 20px;margin-left: 20px;

margin: 20px;

margin: 20px 5px;margin-top: 20px;margin-right: 5px;margin-bottom: 20px;margin-left: 5px;

margin: 20px 5px 10px;margin-top: 20px;margin-right: 5px;margin-bottom: 10px;margin-left: 5px;

margin: 5px 10px 15px 20px;margin-top: 5px;margin-right: 10px;margin-bottom: 15px;margin-left: 20px;



background-color: #000000;background-image: url(fond.png);background-position: right bottom;background-repeat: no-repeat;

background: #000000 url(fond.png) right bottom no-repeat;

background: blue url(hetic.png) right bottom no-repeat;



background-color: #000000;background-image: url(fond.png);background-position: right bottom;background-repeat: no-repeat;

background: #000000 url(fond.png) right bottom no-repeat;

Vous n'êtes pas obligé de donner les valeurs de chacune des propriétés (couleur, URL de l'image, position, répétition) dans la "super-propriété" background. Par contre, pour la "super-propriété" border, vous devez impérativement donner les trois valeurs (épaisseur, type de bordure, couleur).

background: white;border: 1px solid black;


background-repeat

background: white url(point.png) center center no-repeat;


background-repeat

background: url(point.png) repeat;


background-repeat

background: url(degrade.png) repeat-x;


background-repeat

background: url(degrade.png) repeat-y;


Positionnemenent en CSS

position: static;Par défaut. L'élément est dans le flux.

position: relative;L'élément reste dans le flux à la position initiale. Il sert de bloc de référence pour le positionnement de blocs enfants en position: absolute;Possibilité de déplacer le bloc relativement à sa position initiale avec top, left, right, bottom.

position: absolute;Sort du flux et peut se positionner comme demandé relativement à la plus proche balise parente qui est en position: relative, fixed, ou absolute ; ou, s'il n'y a pas de balise parente hors du flux, le positionnement se fera relativement au document.

position: fixed;Sort du flux et est positionné relativement à la fenêtre. (restere au même endroit même quand on fait défiler la page)


Positionnement absolu

position: absolute;top: 0;left: 0;

position: absolute;top: 0;right: 0;

position: absolute;bottom: 0;left: 0;

position: absolute;bottom: 0;right: 10px;

position: relative;

<div><div></div><div></div><div></div><div></div>

</div>


Positionnement absolu

position: absolute;top:30px;bottom: 0;left: 30px;right: 0;

position: relative;

<div><div></div>

</div>


Positionnement relatif

position: relative;top: -5px;left:-5px;


Positionnement relatif

<body><div>

<div></div></div>

</body>

position: relative;

div verte en position: absolute; left: 0; top: 0;En bleu foncé, le fond de votre page web.


z-index

Mieux avec des grands pas (0, 10, 20, 30) au cas où il y a des ajouts : si on a des éléments qui ont un z-index de 1, 2, 3, 4, 5 et 6, et qu'après-coup on veut ajouter un élément qui soit placé entre l'élément de z-index 3 et l'élément de z-index 4, il faudra déplacer toute la suite d'un cran. On n'aurait pas eu ce problème si les z-index avaient été 10, 20, 30, 40, 50, 60 (on aurait donné au nouvel élément un z-index entre 30 et 40).

Plus le z-index est élevé, plus l'élément sera "au-dessus", sera au premier plan.Ne s'applique qu'aux éléments hors du flux (position: relative, fixed ou absolute)

z-index: 100;


Les float


Les float

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in arcu adipiscing, tristique turpis at, malesuada urna. Nam eget ipsum sed velit interdum fringilla eget at ante. Nunc ut nisl turpis. Nam aliquet

tristique tellus, sit amet ullamcorper odio lobortis malesuada. Cras cursus egestas ante, at consectetur quam dignissim vel. Nunc molestie, erat eget vulputate venenatis, quam enim consectetur nisi, eu rhoncus risus libero in nunc.

Elementen

float: left;

<div>Element en float: left;</div><p>Lorem ipsum... </p>

Notez comment le flottant a été "ingéré" par l'élément qui le suit.


Les float

Lorem ipsum dolor sit consectetur adipiscing, tristique malesuada urna. velit interdum fringilla Nunc ut nisl turpis.

Nam aliquet tristique tellus, sit amet ullamcorper odio lobortis malesuada. Cras cursus egestas ante, at consectetur quam dignissim vel. Nunc molestie, erat eget vulputate venenatis, quam enim consectetur nisi, eu rhoncus risus libero in nunc.

Elementen

float: left;

<div>Element en float: left;</div><div>Element en float: left;</div><p>Lorem ipsum... </p>

On peut mettre plusieurs flottants les uns à la suite des autres (utile pour les mosaïques ; ou on peut utiliser des inline-block).

Elementen

float: left;


Les float

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in arcu adipiscing, sic tristique turpis at, in

Elementen

float: left;

<div>Element en float: left;</div><div>Element en float: right;</div><p>Lorem ipsum... </p>

On peut mettre plusieurs flottants les uns à la suite des autres (utile pour les mosaïques ; ou on peut utiliser des inline-block).

Elementen

float: right;

dolor sit amet, consectetur adipiscing elit. In in arcu elit adipiscing, tristique turpis at, malesuada urna. Nam eget ipsum sed velit interdum fringilla eget at ante. Nunc ut nisl turpis. Nam aliquet tristique tellus, sit amet dolor ullamcorper odio lobortis malesuada. Cras cursus quam egestas ante, at consectetur quam dignissim vel.


Les float

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in arcu adipiscing, tristique turpis at, malesuada urna. Nam eget ipsum sed velit interdum fringilla eget at ante. Nunc ut nisl turpis. Nam aliquet tristique tellus, sit amet ullamcorper odio lobortis malesuada. Cras cursus egestas ante, at consectetur quam dignissim vel. Nunc molestie, erat eget vulputate venenatis, quam enim consectetur nisi, eu rhoncus risus libero in nunc.

Elementen

float: left;

margin-left: 200px;


Une marge appliquée à l'élément suivant le flottant (ici un <p>). Permet de faire un design en colonnes. (On peut aussi utiliser plusieurs flottants sans marges, ou des inline-block, ou (déconseillé d'un point de vue sémantique) un tableau <table>).


Les float

<div>Element en float: left;</div><p>Lorem ipsum... </p><p>Lorem ipsum... </p><p>Lorem ipsum... </p>

Lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum.

Lorem ipsum lorem ipsum lorem ipsum.

Lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.

Elementen

float: left;


Les float

<div>Element en float: left;</div><p>Lorem ipsum... </p><p>Element en clear: both </p><p>Autre élément quelconque... </p>

Lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum.

Element en clear: both;

Autre élément quelconque qui suit. Lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum...

Elementen

float: left;


Les float


Lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum.Element

enfloat: left;

Les éléments flottants (tout comme les éléments avec position: absolute; ou position: fixed) ne font plus partie du flux. Donc ils ne peuvent pas être pris en compte pour calculer la hauteur du bloc dans lequel ils sont par exemple. Le bloc bleu ciel ne va pas adapter sa hauteur en fonction du float: left car le float: left est hors du flux.


Les float

<div>Element en float: left;</div><p>Lorem ipsum... </p><div>Element en clear: both;</div>


enfloat: left;

Element en clear:both;

Un élément en clear: both permet de régler le problème.


Les float

<div>Element en float: left;</div><p>Lorem ipsum... </p><div></div>


enfloat: left;

L'élément en clear: both peut être vide.


Merci !

Cours HTML/CSS

Documents

Transcript of Cours HTML/CSS