III PRINCIPES GÉNÉRAUX HTML/CSS
C1 : Généralités
Quel logiciel pour aller de site en site ? navigateur
Exemples de navigateurs ? Chrome, Firefox, Internet explorer, Safari, Opéra
Différence entre Htlm et css : HTML (contenu et structure) CSS : présentation
C2 : Créer sa première page
Ouvrir Editeur de texte (bloc notes, NotePad ++ ou sublim text) et enregistrer avec extension .html (ex : index.html)
Ouvrir avec index.html avec navigateur (google chrome, mozilla firefox, opéra, …)
C3 : Principales balises
- différents paragraphes <p>
- Aller à la ligne <br/> (balise orpheline)
- Titres <h1> à <h6>
- mise en valeur de parties du texte <strong> <mark> <em>
- Liste à puces <ul> puis <li>
- Liste ordonnée <ol> puis <li>
- Lien (absolu) : <a href= ‘’https://www.qwant.com/>mon moteur de recherche préféré< /a>
- Lien (relatif vers autre page) : < href= ‘’page2.html’’>
- Lien vers ancre de la page
Créer ancre <h2 id= ‘’mon_ancre ‘’>Titre </h2>
Lien vers ancre <a href= ‘’#mon_ancre’’> aller vers l’ancre </a>
- Insérer image : <p> <img src= « image/selfie.jpeg » alt = selfie avec marcel »/></p>
- Lien vers mail <a href=’’mailto : monadressemail@orange.fr> écris moi !</a>
Une balise ouverte doit être refermée (sauf balises orphelines)
Ex : <p> paragraphe </p>
Ex2 : <br /> saut de ligne (balise orpheline)
C4 : Images
Les principaux formats d’images :
.jpeg ou .jpg (détériore légèrement la qualité de l’image) Pas de souci pour une photo mais pb pour image qui bave
.png : adapté aux graphiques et à tout ce qui n’est pas une photo. Il peut être rendu transparent et il n’altère pas la qualité de l’image. Format le plus puissant pour enregistrer une image
.gif : format ancien, moins performant mais peut-être animé
.bmp : à proscrire le format bipmap (bmp) car non compressé
Attention ! Pour éviter les problèmes, prenez l’habitude d’enregistrer vos fichiers avec des noms en minuscules, sans espace ni accent
Ex : mon_image.png
à Enrgistrer les images dans un dossier à part (ex : dossier images)
à Insérer image : avec balise orpheline <img/> Forcément à l’intérieur d’un paragraphe
<p> <img src= « image/selfie.jpeg » alt = selfie avec marcel »/></p>
alt décrit l’image mais ne sera pas affiché
C5 : Exemple d’une structure d page Html
Doctype (indication du type de document)
Métadonnéees <Head> métadonnées
Ex : Titre page (ce qui apparaît sur l’onglet et non dans la page) =
Corps <Body>
<header> (en tête)
<nav> (barre de navigation)
<Section>
<aside> corps du texte souvent sur le côté </aside>
<article> corps du texte principal </article>
</Section>
Pied de page <footer>
head
Body
header
nav
aside
article
footer
APPLICATION : Réaliser une page (si possible en lien avec projet personnel)
Page organisation personnelle ou veille informationnelle ou …. Ebauche aspect du projet
- différents paragraphes <p>
- mise en forme <strong> <mark> <em>
- Liste à puces <ul> puis <li>
- Liste ordonnée <ol> puis <li>
- Lien (absolu) : <a href= ‘’http://www.google.fr> mon moteur préféré < /a>
- Lien (relatif vers autre page) : < href= ‘’page2.html’’>
- Lien vers ancre de la page
Créer ancre <h2 id= ‘’mon_ancre ‘’>Titre </h2>
Lien vers ancre <a href= ‘’#mon_ancre’’> aller vers l’ancre </a>
- Insérer une image (jpeg, png ou gif) <img src=’’images/fleurs.png’’ alt=’’photo’’/>
- Lien vers mail <a href=’’mailto:nom@orange.fr> envoyez moi un mot</a>
<p> paragraphe </p>
<br /> saut de ligne (balise orpheline)
<h1> à <h6> Niveaux de titre
<strong> <rm> <mark> mise en valeur de texte
<ul> Liste à puces
<li> puces
<ul> Liste numérotée
Liens vers autre site (lien absolu)
<a href= »http://www.e-medias.org »>site emedias</a>
Lien vers autre page de son site (lien relatif)
<a href= « page2.html »>
<a href= « contenu/page2.html »> Si p2 dans dossier « contenu »
<a href= « ../page2.html »> Si p2 dans dossier « parent »
Liens sur même page (ancre)
Il faut rajouter une ancre à une balise qui va servir de repère
<h2 id= « mon_ancre »>titre</h2>
Ensuite, on crée un lien mais l’attribut href contiendra un dièse (#) suivi du nom de l’ancre
<a href= « #mon ancre »>aller vers l’ancre</a>
Liens pour envoi de mail
<a href) « mailto :votreadresse.com »>envoyez moi un mail</a>
Lien pour télécharger un fichier
<a href= « monfichier.doc »> télécharger le fichier </a>