1. <img ........../> Les images
1.1. Les formats
1.1.1. PNG
1.1.1.1. Portable Network Graphics
1.1.1.2. Utiliser pour les shémas, logo, dessin
1.1.1.3. 16.7 millions de couleur par image
1.1.1.4. Recommandé par le W3C
1.1.1.5. Permet la transparence à 256 couleurs
1.1.2. JPEG
1.1.2.1. Joint Photographic Experts Group
1.1.2.2. Utiliser pour les photos
1.1.2.3. 16.7 millions de couleur par image
1.1.3. GIF
1.1.3.1. Graphics Interchange Format
1.1.3.2. Pour les images animées
1.1.3.3. Encodage en 256 couleurs
1.1.3.4. Préconiser pour
1.1.3.4.1. les logos
1.1.3.4.2. puces
1.1.3.4.3. symboles et cliparts
1.2. Insérer une image
1.2.1. <img src="nom_du_fichier_image.png" alt="texte alternatif" />
1.2.2. Lien image
1.2.2.1. <a href="adresse_du_site.fr"> mon_image </a>
1.3. Les figures
1.3.1. Permet de créer une legende
1.3.2. <figure> </figure> à la place d'un paragraphe
1.3.3. Cette balise indique une illustration sur la page web
1.3.4. <figcaption> </figcaption> indique la légende de l'image
1.4. Répétitions
1.4.1. repeat
1.4.2. no-repeat
1.4.3. repeat-x
1.4.4. repeat-y
2. Sa première page web
2.1. Les balises
2.1.1. Permet d'insérer du contenu
2.1.2. Types
2.1.2.1. En deux exemplaires
2.1.2.1.1. Début <titre>
2.1.2.1.2. Fin </titre>
2.1.2.2. Orpheline
2.1.2.2.1. Une seule balise <image>
2.2. Les attributs
2.2.1. Situé dans une balise
2.2.2. <citation auteur="maupassant">
2.3. La structure
2.3.1. <!DOCTYPE htlml>
2.3.1.1. indique que c'est une page en HTLM5
2.3.2. <html> </html>
2.3.2.1. elle englobe le contenu de la page web
2.3.3. <head> </head>
2.3.3.1. Indique des informations techniques
2.3.3.2. L'encodage
2.3.3.2.1. <meta charset="UTF-8">
2.3.4. <meta >
2.3.4.1. Indique des caractères spéciaux
2.3.5. <html> </html>
2.3.5.1. elle englobe le contenu de la page web
2.3.6. <title> </title>
2.3.6.1. Indique le titre de la page web
2.3.7. <body> </body>
2.3.7.1. Contient le corps de la page web
2.3.8. <!-- commentaire --->
2.3.8.1. Contient des infos perso sur le code
2.3.9. Exemple
2.4. Organiser son texte
2.4.1. Les paragraphes
2.4.1.1. <p> </p>
2.4.1.2. <br> crée un saut de ligne
2.4.2. Une famille de titres
2.4.2.1. Organisés en niveau de titre
2.4.2.2. Ils indiquent le sens du contenu
2.4.2.3. <h1> titre </h1>
2.4.2.4. <h2> titre </h2>
2.4.3. Mise en valeur
2.4.3.1. <strong> </strong>
2.4.3.1.1. Mise en gras
2.4.3.2. <em> </em>
2.4.3.2.1. Italique
2.4.3.3. <mark> </mark>
2.4.3.3.1. Mise en surbrillance
2.4.3.4. Liste à puces
2.4.3.4.1. <ul> <li> </li> </ul>
2.4.3.4.2. <ol> <li> </li> </ol>
2.4.3.4.3. supprimer les puces
2.4.3.4.4. Image puce
2.4.4. Créer des liens
2.4.4.1. Lien vers un site
2.4.4.1.1. Le lien absolu
2.4.4.1.2. <a href="http://www.mindmeister.com"> mindmeister </a>
2.4.4.2. Lien vers une page
2.4.4.2.1. Le lien relatif
2.4.4.2.2. même niveau
2.4.4.2.3. dossier inférieur
2.4.4.2.4. dossier supérieur
2.4.4.3. Lien ancre
2.4.4.3.1. Création de l'ancre
2.4.4.3.2. Création du lien de l'ancre
2.4.4.4. Lien title
2.4.4.4.1. Un info bulle s'affiche au passage de la souris sur lien
2.4.4.4.2. Un attribut que l'on rajoute à la balise <a>
2.4.4.4.3. <a href="#ancre1" title="cliquez ici">
2.4.4.5. Lien mail
2.4.4.5.1. <a href="mailto:[email protected]"> contactez-moi </a>
2.4.4.6. Lien vers un fichier
2.4.4.6.1. <a href="programme.zip">télécharger le fichier </a>
2.4.4.7. Vers une fenêtre
2.4.4.7.1. target="_self"
2.4.4.7.2. target="_top"
2.4.4.7.3. target="_blank"
3. Créer des sites web
3.1. C'est quoi un site Woueb ?
3.1.1. On le consulte au travers d'un navigateur Web
3.1.2. Le navigateur
3.1.2.1. Transforme le code HTML et CSS
3.1.2.2. Affiche la transformation à l'écran
3.2. 2 languages
3.2.1. Pourquoi ?
3.2.1.1. Pour séparer le fond et la forme
3.2.2. HTML
3.2.2.1. Permet d'écrire le fond du site web
3.2.2.2. C'est le contenu
3.2.3. CSS
3.2.3.1. Permet de mettre en forme le contenu
3.2.4. Une demo ?
3.2.4.1. http://www.csszengarden.com/
3.3. Editeur de texte
3.3.1. Sous windows
3.3.1.1. Un bon vieux Bloc notes
3.3.1.2. NotePad ++
3.3.1.3. PsPad
3.3.1.4. ConTEXT
3.3.2. Sous Mac
3.3.2.1. Espresso
3.3.2.2. Smultron
3.3.3. Linux
3.3.3.1. gEdit
3.3.3.2. Kate
3.3.3.3. Vim
3.3.3.4. Emacs
3.4. Les navigateurs
3.4.1. Traduisent le HTML et le CSS
3.4.2. Affichent le code sous forme de visuels