html & css - zedhcnam.files.wordpress.com · html & css jean-pierre hospice zinsou...

HTML & CSSJean-Pierre Hospice ZINSOU

Jean-Pierre Hospice ZINSOU - Reproduction Interdite

Premiers pas en HTML


HTML

• L'HyperText Markup Language (HTML) (littéralement Langage HyperTexte à balises) est un langage à balises utilisé pour la création de contenu et la structuration sémantique des pages web.

• Une page web est comprise de nombreux éléments HTML, chacun de ces éléments a un sens particulier dans le contexte de la page. Certains éléments se suffisent à eux-même, tandis que d'autres doivent être imbriqués pour créer une structure de plus en plus complexe afin d'accueillir votre contenu.

• Les navigateurs Web interprètent le HTML pour construire le contenu de la page, et ils interprètent le code HTML en relation avec le code CSS pour l'apparence du contenu.


https://developer.mozilla.org/fr/docs/HTML

Les éléments

• Définit le sens sémantique de contenu. Répond à la question : De quelle information s’agit-il ?

• La plupart des éléments peuvent contenir d'autres éléments, formant une hiérarchie de structure, un arbre, appelé le DOM, le Document Object Model. Il y a un peu plus de 100 éléments définis en HTML


Les éléments - Les balises

• Formés par les signes < et >, accessoirement par /

<p> Ce texte est dans un paragraphe.</p>

• <p> : balise ouvrante

• </p> : balise fermante

• ! Attention à l’imbrication !

– Valide :

<em>Ceci est <strong>très</strong> important</em>.

– Non valide :

<em>Ceci est <strong>très</em> important</strong>


Les éléments - Les balises

• Eléments vides : ni contenu, ni imbrication, ni balise de fermeture.

<meta charset="utf-8">

! Obligatoire en XHTML :

<meta charset="utf-8" />


Les éléments - Les attributs

• Sur le balises ouvrantes

• Consiste en deux parties :

– un nom d’attribut

– une valeur d’attribut

<input required="required">

<input required="">

<input required>

• ! Les guillemets :

<p class=foo bar>

Est la même chose que

<p class="foo" bar="">

Et pas la même chose que

<p class="foo bar">


Références de caractère nommée

• Les signes <, > (entre autres) sont des caractères réservés.• On utilise une référence de caractère nommée (ou entitée)• Composés de noms, de nombres décimaux ou de nombres

hexadécimaux.• Se terminent par ;• Exemples :

• > correspond au signe supérieur à " > ".• < correspond au signe inférieur à " < ".• & correspond au signe esperluette " & ".• " correspond au signe double guillemets ' " '.

• Toutes les références : http://www.w3.org/TR/2011/WD-html5-20110113/named-character-references.html


Doctype et commentaires

• Une page HTML doit commencer par :

<!DOCTYPE html>

• dit au navigateur comment interpréter le code HTML et CSS

• Commentaires :

Première page HTML

<!DOCTYPE html><html lang=« fr"><head><meta charset="utf-8"><title>Hello World</title>

</head><body><h1>Hello World</h1><p>Ceci est une page web.</p>

</body></html>


Block ou in-line

• Block :– Force le début d’une nouvelle ligne– Prend la totalité de la largeur de la page

• div• h1-h6• p• form

• In-line :– S’insère dans le courant de la page– Prend la largeur correspondant à son contenu

• span• a• img


Quelques tags classiques

• Les entêtes : de h1 à h6<h1>Heading Level 1</h1><h2>Heading Level 2</h2><h3>Heading Level 3</h3><h4>Heading Level 4</h4><h5>Heading Level 5</h5><h6>Heading Level 6</h6>

• Les paragraphes :<p>« Visiblement, même les statues se vexent, dit-il. Pour ma part je me rappelle, quand je n’étais qu’un étudiant de première année, avoir écrit mon nom sur son… Enfin, passons. Donc, je propose de remplacer la statue séance tenante. »</p><p>Un silence de mort accueillit ladite proposition.</p><p>« Mettons, une effigie fidèle moulée dans l’or. Convenablement rehaussée de pierres précieuses, comme il sied à notre grand fondateur, poursuivit-il joyeusement. Et pour être sûrs qu’aucun étudiant ne vienne dégrader la statue, je suggère qu’on l’érigé dans la cave la plus profonde, continua-t-il.</p>



• Div ou span ?– Les deux sont des containers

– Ils n’ont pas de signification sémantique (contrairement à p)

– div est un block, qui sert la plus part du temps à grouper d’autres blocks, généralement large. Utile pour la mise en page.

– span est in-line et est surtout utilisé pour grouper du texte ou des groupes de textes, pourquoi pas à l’intérieur d’un groupe block.



• Hypreliens– Lien absolu :

<a href="http://www.google.fr">Une question ?</a>

– Lien relatif :<a href="/aboutus.html">Qui sommes-nous ?</a>

– Lien vers une adresse email :<a mailto="[email protected]?subject=Prise%20de%20Contact&body=Bonjour%20!" >Ecrivez moi</a>

– Ouvrir le lien dans une nouvelle fenêtre : <a href="http://www.google.fr" target=“_blank" >Une question ?</a>

– Liens dans la même page : <body id="top">...<a href="#top">Back to top</a>...

</body>


Elements de style

– Mise en évidence avec strong :• <p><strong>Attention:</strong> Chute de pierres.</p>

– Mise en evidence avec b:• <p>Pour cette recette préparez <b>de l’ail</b> et <b>des

échalottes</b>.</p>

– La différence est sémantique. – div est un block, qui sert la plus part du temps à grouper

d’autres blocks, généralement large. Utile pour la mise en page.

– span est in-line et est surtout utilisé pour grouper du texte ou des groupes de textes, pourquoi pas à l’intérieur d’un groupe block.


Elements de style

– Mise en évidence avec strong :• <p><strong>Attention:</strong> Chute de pierres.</p>

– Mise en evidence avec b:• <p>Pour cette recette préparez <b>de l’ail</b> et <b>des

échalottes</b>.</p>

– La différence est sémantique. – Mise en emphase avec em :

• <p>J’<em>aime</em> Paris!</p>

– Mise en emphase avec i:• <p>Les parties de <i>codes </i> sont souvent mises en

italiques.</p>

– La différence à nouveau est sémantique.


Structure

• Jusqu’à HTML5, la structure des pages web était la plus part du temps assurée par des div.

• Problème : aucune sémantique, le code est « lisible » mais pas « intelligible ».

• HTML5 introduit des éléments de structure (liste ici) dont :– <header>– <nav>– <article>– <section>– <aside>– <footer>


http://dev.opera.com/articles/new-structural-elements-in-html5/

Header

• <header>...</header>

– Ne pas confondre avec head (pour les metadata) qui est dans html

– A l’intérieur de body

– Notion sémantique :

• Début de page

• Début de paragraphe

• Texte d’introduction

– Les h1, h2, … n’ont pas de notions sémantiques


Navigation

• <nav>...</nav>

– Zone de liens :

• index

• Liens de type Suivant, Précédent

• Menus

– Plutôt pour la navigation interne au site


Article

• <article>...</article>

– Sert à identifier une section de contenu indépendant, qui peut être réutiliser tel-quel ailleurs


Section

• <section>...</section>

– Identifie un groupement de contenus de même thématique

– Sert généralement de retours à la ligne et permet de donner une structure à lapage


<article>, <section>, ou <div>

• C’est une question de sémantique, il faut choisir en fonction du contenu.

• Si le contenu n’est groupé que pour un effet de style, sans signification particulière, utiliser div

• Si le contenu a une raison de rester grouper, et peut-être réutiliser tel-quel ailleurs, alors utiliser article

• Si le contenu représente un groupe de contenu thématisé, alors utiliser section.


Aside

• <aside>...</aside>– Intuitivement des éléments tels que des sidebars,

ou de courtes explications, que l’on imagine sur le côté

– A l’intérieur d’une balise article, peut être en rapport avec l’auteur de l’article.

– ! Même si les éléments vus semblent donner une notion de positionnement, ce sont tous des blocks et agissent comme tel (occupent toute la largeur de l’élément dans lequel ils sont placés.


Footer

• <footer>...</footer>

– Identifie la fin d’une page, d’un article, d’une section ou de tout autre segment d’une page.

– Généralement trouvé au bas de son parent.

– Son contenu ne doit pas diverger par rapport au contenu de son parent.


Premiers pas en CSS


CSS

• Cascading Style Sheets

• langage de style

• les polices, les couleurs, les marges, les lignes, la hauteur, la largeur, les images d'arrière-plan, les positionnements évolués, …

• HTML sert à structurer le contenu, CSS sert à formater un contenu structuré

• Avantages par rapport au style in-line


Style en cascade

• Syntaxe :element {

regleregle

}

• Cascade du haut vers le bas• Les styles peuvent s’aditionner ou se surcharger

p {background: orange;font-size: 24px;

}p {background: green;

}


Différents types de sélecteurs

• Attention au poids des sélecteurs• Par identifiant :

• HTML : <p id="food">...</p>

• CSS :#food {

background: green;}p {

background: orange;}

– Le style précisé par l’id a plus de poids !

• Par classe :• HTML :

<div class="hotdog"><p>...</p><p>...</p><p class="mustard">...</p>

</div>

• CSS :.hotdog p {

background: brown;}.hotdog p.mustard {

background: yellow;}

– Note : on peut les combiner, le sélecteur à droite donne la prioritéJean-Pierre Hospice ZINSOU - Reproduction

Interdite

Style en couches

• Par sa spécificité en cascade, le style peut être préciser en plusieurs couches spécifiques :

• HTML :<a class="btn btn-danger">...</a><a class="btn btn-success">...</a>

• CSS :.btn {

font-size: 16px;}.btn-danger {

background: red;}.btn-success {

background: green;}


Couleurs

• Nom anglais des couleurs

• Valeur hexadecimal

• Valeur RVB

• Valid notation :– background: maroon;

– background: #800000;

– background: rgb(128, 0, 0);

– background: rgba(128, 0, 0, .25);(transparence)

Color Name Hex Values RGB Values HSL Values

black #000000 rgb(0, 0, 0) hsl(0, 0%, 0%)

silver #c0c0c0 rgb(192, 192, 192) hsl(0, 0%, 75%)

gray #808080 rgb(128, 128, 128) hsl(0, 0%, 50%)

white #ffffff rgb(255, 255, 255) hsl(0, 100%, 100%)

maroon #800000 rgb(128, 0, 0) hsl(0, 100%, 25%)

red #ff0000 rgb(255, 0, 0) hsl(0, 100%, 50%)

purple #800080 rgb(128, 0, 128) hsl(300, 100%, 25%)

fuchsia #ff00ff rgb(255, 0, 255) hsl(300, 100%, 50%)

green #008000 rgb(0, 128, 0) hsl(120, 100%, 25%)

olive #808000 rgb(0, 255, 0) hsl(120, 100%, 50%)

lime #00ff00 rgb(128, 128, 0) hsl(60, 100%, 25%)

yellow #ffff00 rgb(255, 255, 0) hsl(60, 100%, 50%)

navy #000080 rgb(0, 0, 128) hsl(240, 100%, 25%)

blue #0000ff rgb(0, 0, 255) hsl(240, 100%, 50%)

teal #008080 rgb(0, 128, 128) hsl(180, 100%, 25%)

aqua #00ffff rgb(0, 255, 255) hsl(180, 100%, 50%)


Longueur

• Les longueurs absolues sont notées en pixel, ou em (element fontsize, proportionnel à la taille de la police)

p { .banner {

font-size: 14px; font-size: 14px;

} width: 5em;

}

• Les longueurs relatives sont notées en pourcentage :

.col {

width: 50%;

}


Box model


Positionnement

• Propriété float : permet de sortir un élément du flux normal de la page.

HTML :<header><code><header></code>

</header>

<section><code><section></code>

</section>

<aside><code><aside></code>

</aside>

<footer><code><footer></code>

</footer>

CSS :code {

background: #2db34a;border-radius: 6px;color: #fff;display: block;font: 14px/24px "Source Code Pro", Inconsolata, "Lucida

Console", Terminal, "Courier New", Courier;padding: 24px 15px;text-align: center;

}header, section, aside, footer {

margin: 0 1.5% 24px 1.5%;}footer {

margin-bottom: 0;}


PositionnementHTML :<header><code><header></code>

</header>

<section><code><section> <br> float:

left;</code></section>

<aside><code><aside> <br> float:

right;</code></aside>

<footer><code><footer></code>

</footer>

CSS :code {

background: #2db34a;border-radius: 6px;color: #fff;display: block;font: 14px/24px "Source Code Pro", Inconsolata, "Lucida

Console", Terminal, "Courier New", Courier;padding: 24px 15px;text-align: center;

}header, section, aside, footer {

margin: 0 1.5% 24px 1.5%;}section {

float: left;width: 63%;

}aside {

float: right;width: 30%;

}footer {

clear: both;margin-bottom: 0;

}


Boîte à outils


Les listes

• Listes non ordonnées :

<ul><li>Orange</li><li>Green</li><li>Blue</li>

</ul>

ul {list-style: disc;padding-left: 40px;

}

• Listes ordonnées :<ol>

<li>Orange</li><li>Green</li><li>Blue</li>

</ol>

ol {list-style: decimal;padding-left: 40px;

}

– ol peut prendre comme attribut : reverse, start– Il peut prendre comme attribut : value


Les listes

• Listes descriptives :<dl>

<dt>Logique</dt><dd>Énoncé ou déclaration aux termes desquels un symbole ou

une combinaison de symboles nouvellement introduits (definiendum) signifie ou dénote la même chose qu'un symbole dont le sens est déjà connu (definiens).</dd>

<dt>Photographie</dt><dd>Impression subjective que donne un phototype et qui

correspond à sa limite de résolution.</dd><dd>Ou autre</dd>

<dt>Informatique</dt><dt>Théologie</dt><dd>Acte du magistère de l'Église proposant aux fidèles, comme

étant divinement révélée, une vérité de foi ; la proposition elle-même.</dd></dl>

dd {margin-left: 40px;

}Jean-Pierre Hospice ZINSOU - Reproduction

Interdite

Les listes

<ol>

<li>Walk the dog</li>

<li>Fold laundry</li>

<li>

Go to the grocery and buy:

<ul>

<li>Milk</li>

<li>Bread</li>

<li>Cheese</li>

</ul>

</li>

<li>Mow the lawn</li>

<li>Make dinner</li>

</ol>

ul {

list-style: disc;

padding-left: 40px;

}

ol {

list-style: decimal;

padding-left: 40px;

}

<ul>

<li>Orange</li>

<li>Green</li>

<li>Blue</li>

</ul>

li {

display: inline-block;

margin: 0 10px;

}

• Listes imbriquées :

• Listes : affichage horizontal


Ajouter des media

• Premier essai :<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="Un chien sympa">

img {

display: block;

max-width: 100%;

}


Ajouter des media

• Avec plus de style :

<p>Gatsby is a black, <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown,

and white dog wearing a kerchief"> brown, and white hound mix puppy who loves howling at fire trucks and collecting

belly rubs. Although he spends most of his time sleeping he is also quick to chase any birds who enter his vision.</p>

img {

background: #eaeaed;

border: 1px solid #9799a7;

float: right;

margin: 8px 0 0 20px;

padding: 4px;

width: 200px;

}


Ajouter des media

• De l’audio :

• De la video :

<audio src="http://learn.shayhowe.com.s3-website-us-east-1.amazonaws.com/assets/misc/courses/html-css/adding-media/jazz.ogg" controls></audio>

<video controls>

<source src="earth.ogv" type="video/ogg">

<source src="earth.mp4" type="video/mp4">

Please <a href="earth.mp4" download>download</a> the video.

</video>


IFrame

• Pour inline Frame : une page web dans la page web

• Seamless : permet le contact (clicks, css) entre l’iframe et son parent

<iframe src="https://www.google.com/maps/embed?..."></iframe>

<iframe src="contact.html" seamless></iframe>


Les formulaires

• Réagir aux interactions avec l’utilsateur.

• Différents « input » en plus de text et password:

• Autres entrées possibles :– text area– radio button– Check box– Dropdown list– Multiple select– Button submit– Hidden– File

• Les méthodes : GET et POST

<form action="/login" method="post"> ... </form>

<input type="text" name="username">

<input type="date" name="birthday">

<input type="time" name="game-time">

<input type="email" name="email-address">

<input type="url" name="website">

<input type="number" name="cost">

<input type="tel" name="phone-number">


Les tableaux• Seul moyen d’avoir un semblant de mise en page évolué avant les CSS.

• Plus de code, mais parfois utile pour les mises en page complexes<table>

<caption>Design and Front-End Development Books</caption>

<thead>

<tr>

<th scope="col">Item</th>

<th scope="col">Availability</th>

<th scope="col">Qty</th>

<th scope="col">Price</th>

</tr>

</thead>

<tbody>

<tr>

<td>Bulletproof Web Design by Dan Cederholm</td>

<td>In Stock</td>

<td>1</td>

<td>$30.17</td>

</tr>

…

</tbody>

<tfoot>

<tr>

<td>Tax</td>

<td></td>

<td></td>

<td>$13.54</td>

</tr>

<tr>

<td>Total</td>

<td></td>

<td></td>

<td>$148.90</td>

</tr>

</tfoot>

</table>

Item Availability Qty Price

Bulletproof Web

Design by Dan

Cederholm

In Stock 1 $30.17

Tax $13.54

Total $148.90

Design and Front-End Development Books


html & css - zedhcnam.files.wordpress.com · html & css jean-pierre hospice zinsou...

Documents