HTML : Intro
Sommaire
Les balises
Elles fonctionnent par paire la plupard du temps (ouvrante / fermante):
<html> ... </html>
<body> ... </body>
<p>
Ceci est un paragraphe
</p>
Mais peuvent également se fermer sur elles mêmes:
<br /> ( retour à la ligne )
<hr /> ( ligne horizontale )
<img src="mon_image.jpg" /> ( image )
Elles peuvent contenir des attributs
<a href="www.google.fr"> ceci est un lien</a>
<p id="resume"> ceci est un paragraphe</p>
<img src="mon_image.jpg" width=200 height=200 /> ( image )
Une page HTML doit contenir au minimum:
On déclare un document html
<html>
Un document HTML contient toujours une paire de balise 'head' qui contient des informations qui ne sont pas visibles par l'internaute
<head>
<title>titre du document</title>
</head>
un document HTML contient toujours une section 'body'
<body>
ici d'autres balises HTML qui contiendront le contenu visible par l'internaute
</body>
</html>
Les niveaux de titres
<html> <head> <title>Exemple XHTML 1.0</title> </head> <body> <h1> titre principal</h1> <h2>catégorie 1</h2> <h3>sous categorie 1.1</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vehicula venenatis condimentum. Sed sem nibh, gravida ut molestie in, dapibus ac ligula. Suspendisse bibendum tortor vitae metus ullamcorper eu posuere nunc faucibus. </p> <h3>sous categorie 1.2</h3> <p> Nam elementum, dolor in tincidunt blandit, est lectus fringilla sapien, id viverra odio odio vitae turpis. Donec iaculis, augue sed scelerisque laoreet, massa urna commodo risus, ut condimentum purus nulla quis justo. Nullam et leo purus. Donec non ligula et leo euismod suscipit vel vitae mauris. Vivamus eu neque enim. Quisque varius pharetra dui, vel laoreet leo congue in. </p> <h2>catégorie 2</h2> <h3>sous categorie 2.1</h3> <p> Suspendisse pretium magna in nibh molestie tincidunt. Pellentesque rutrum augue sit amet lorem tempus porta. Donec in nisl quis magna feugiat bibendum. Phasellus fermentum consequat dolor eget hendrerit. Phasellus fermentum, odio dictum ultricies pretium, dui purus egestas quam, at pharetra diam elit eget orci. </p> <h3>sous categorie 2.2</h3> <p> Quisque dictum velit ut odio mattis luctus. In et neque interdum arcu sodales adipiscing ut quis elit. Sed facilisis sapien eget sem molestie sit amet imperdiet quam tristique. Nulla mollis nibh at neque scelerisque vel ultricies diam tincidunt. Donec consequat, nibh non imperdiet tincidunt, nibh lacus cursus orci, commodo interdum nibh nunc et ante. </p> </body> </html>
Exercice de base
1. ouvrir deux onglets contenant ces pages :
- http://html-ipsum.com/
- http://www.lipsum.com/
- http://www.blog-expert.fr/outils/aide-memoire-css-351.html ( document à ouvrir absolument )
2. créer un document HTML et insérer les élements suivants:
Il faut avoir recours à HTML IPSUM dans la plupard des cas.
- un titre de premier niveau ( titre assez court )
- une liste non ordonnée ( HTML IPSUM : 'standard list navigation' )
- un titre de second nouveau ( assez court )
- deux paragraphes courts ( HTML IPSUM : 'medium paragrapĥ' )
- un titre de second niveau ( assez court )
- une liste non ordonnée ( HTML IPSUM : 'Unordered list - long items' )
- un paragraphe long ( HTML IPSUM : 'long paragraph' )
3. créer un nouveau document CSS et faire le lien entre le document HTML et le document CSS :
Pour rappel la balise suivante doit ê ajoutée dans la section 'head' du document HTML: <link type="text/css" rel="stylesheet" href="le_nom_de_mon_fichier.css">
NB : à partir d'ici on ne travaille ( quasiment ) plus que sur le fichier CSS !
!!! ne pas oublier le point virgule après chaque propriétés.
'4. sélectionner l'element 'body' et lui attribuer les propriété's suivantes :
- une couleur d'arrière plan ( au choix )
- un type de police: ( une police au choix, un exemple ici : http://www.w3schools.com/CSS/pr_font_font-family.asp )
- une taille de police à 12px;
- une largeur de 800px
- ajouter une bordure de 5px, de type 'solid' et de couleur noire ( un exemple : border: 50px solid red; )
- ajouter une marge interne ( padding ) de 10px
5. sélectionner tous les titres et leur attribuer les propriétés suivantes:
le texte des titres doit ê en capitale. ( text-transform )
6. sélectionner tous les liens et leur attribuer les propriétés suivantes:
- ne doivent pas ê soulignés par défaut ( text-decoration: none; )
- leur attribuer une couleur spécifique
- ajouter une règle pour les liens qui sont survolés avec la souris : doivent ê soulignés (a:hover {...} )
7. Selectionner tous paragraphes et leur attribuer les propriétés suivantes:
- justifier le texte
- ajouter une marge externe de qques pixels ( margin )
- ajouter une marge interne de qques pixels ( padding )
NB : attention an va utiliser les attributs 'id' et 'class'.
8. Ajouter un attribut 'id' dont la valeur est 'navigation' à la première liste ( celle située sous le titre de premier niveau ) .
Au niveau du CSS vous attribuerez les propriétés suivantes :
une marge externe et interne à 0px ( margin / padding )
9 Vous selectionnerez tous les elements de cette liste ( 'li') auquelles vous ajouterez les propriétés suivantes :
- une marge externe droite de 20px ( pour rappel,margin : 0 20px 0 0; )
- une marge interne de 2px ( top et bottom ) et 5px ( left et right )
- 1 bordure de 1px, type 'solid' et couleur au choix
- la propriété suivante : display avec une valeur inline ( Que se passe t'il ?)
10 ajouter une attribut 'class' dont la valeur est 'short-paragraph' aux deux paragraphes courts du documents HTML
Au niveau du CSS vous attribuerez les propriétés suivantes :
- couleur de fond au choix ( mais plutôt claire )
- le texte en italique
- indenter la première ligne : ( text-indent )
- augmenter légèrement l'écart entre les lignes ( line-height )
11 Dans le paragraphe long, ajouter une image 150x150 ( au tout début du paragraphe)
- faire flotter l'image à gauche ( Que se passe t'il ? )
- ajouter une marge externe ( à droite ) sur l'image pour la décoller du texte
12 . faire des retouches au styles pour finaliser la page selon coter goût
- )
