Pour récupérer les dossiers/fichiers nécessaires aux exercices : À télécharger à l'adresse suivante puis regrouper tous les dossiers/fichiers téléchargés dans un même dossier.
https://drive.google.com/open?id=0B-SixpuYTkeeeThxQmRUX3M3N3c
Appliquer les modifications demandées et chercher à comprendre les principales fonctionnalités. Mettre les valeurs qui vous semblent les plus pertinentes.
Document pdf de cette page accessible en bas de page (pour impression)
I PRINCIPES DE BASE HTML et 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
Html = balises (ouvrantes/fermantes) imbriquées entre elles
exemple
<Section>
<aside> corps du texte souvent sur le côté </aside>
<article> corps du texte principal </article>
</Section>
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= ‘’http://www.google.fr>mon moteur de recherche préféré< /a>
- Lien (relatif vers autre page) : < href= ‘’page2.html’’>
- Insérer image : <p> <img src= « images/selfie.jpeg » alt = selfie avec marcel »/></p>
- Lien vers mail <a href=’’mailto : monadressemail@orange.fr> écris moi !</a>
Balises ouvrantes/fermantes
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
- Enregistrer 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 de 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)
</Body>
<Section>
<aside> corps du texte souvent sur le côté </aside>
<article> corps du texte principal </article>
</Section>
Pied de page <footer> </footer>
II FICHIER HTML
À partir du fichier simplifié index.html essayer les modifications suivantes pour bien comprendre la logique des blocs et après chaque manipulation, lancer le fichier index.html avec le navigateur pour repérer les modifications induites. Revenir ensuite à la situation initiale. Après tous ces essais, adopter la structure qui vous parait la plus pertinente (la modification du fichier style1.css permettra d'aménager/améliorer la présentation...
1) Modifier la structure
- Déplacer l'ensemble du bloc <nav>xxx</nav> après </header>
- Déplacer l'ensemble du bloc <nav>xxx</nav> après </div>
- Déplacer l'ensemble du bloc <nav>xxx</nav> après <aside>
- Déplacer l'ensemble du bloc <nav>xxx</nav> après </head>
- Inverser les blocs <article>xxx </article> et bloc <aside>xxx</aside>
- Copier le bloc <section> xxx </section> et le coller juste après </section>
2) Modifier le contenu
- Suprimer (couper) ligne <img src="images/pdl.png" />
- Supprimer (couper) ligne <li><a href="page3.html">page3</a></li>
- Supprimer (couper) bloc <div id="photos"> xxx </div> puis revenir à la situation initiale
- Supprimer bloc (couper)<div id = "banniere_description">xxx</div>
- Supprimer bloc parent et bloc précédent (couper) <div id="banniere_image">xxx</div
- Dans le bloc nav, Remplacer "Openclassroom" (ligne 14) par "Google" et "https//openclassrooms.com......" par "http://www.google.fr"
- Si vous êtes utiliser l'éditeur de texte "notepad++", vous pouvez remplacer tous les textes en noir par ce que vous voulez !
- etc... Réaliser tous les essais possibles !!!
III FICHIER CSS
Comment composer une feuille de style ? (avec éditeur de texte tel que Notepad++ )
CSS est un autre langage qui vient compléter le HTML. Son rôle est de mettre en forme votre page web. Le navigateur utilisé peut modifier sensiblement la présentation du site souhaitée. Bien qu’il soit possible d’écrire du code css dans un fichier html, il est préférable de le faire dans un fichier distinct (par convention, style.css)
Le principe du langage css est de sélectionner des balises ou des attributs de balise (class ou id) balise et de lui appliquer la propriété (color pour modifier la couleur, font-size pour la taille,…)
Lorsqu’on veut relier le fichier contenu (.html) au fichier présentation (.css) il faut inscrire l’instruction suivant avant la balise <title> <link rel= « stylesheet » href= « style.css » />
Pour mettre des commentaires : /* mes commentaires */
Nom de la balise dont on veut modifier l’apparence
{
Propriete1 : valeur1 ;
Propriete2 : valeur2 ;
}
exemple :
p h1
{
Color : blue ;
}
body {
background: url('images/fd_rose.png'); *** modifier image pour modifier fond page
font-family: 'Trebuchet MS', Arial, sans-serif;
}
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
header
{
background: url("images/separateur.png") repeat-x bottom; ***modifier bottom par top
display: flex;
justify-content: space-between;
align-items: flex-end;
}
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
header h1 *** Ne conserver que les 3 1ères lignes
{
font-family: 'BallparkWeiner', serif;
font-size: 2.5em; *** modifier taille police
margin-top: 200px; *** Diminuer taille
font-weight: normal; *** normal ou bold
text-decoration: none;
font-family: arial;
font-size: 2.6em;
color: #4bacc6;
text-shadow: 3px 11px 4px #e36c09;
-webkit-text-shadow: 3px 11px 4px #e36c09;
-moz-text-shadow: 3px 11px 4px #e36c09;
}
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
nav li
{
margin-right: 10px; *** Augmenter écart entre « puces »
}
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
nav a
{
font-size: 1.2em; *** Augmenter taille police
color: pink; *** changer couleurs black, gray, yellow…
padding-bottom: 3px;
text-decoration: none; *** none, line-through, underline
}
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
#banniere_image
{
margin-top: 15px; *** 10 à 150
height: 200px; *** 200 à 400
border-radius: 5px; *** essayer 50, 120,…
background: url('images/montagne.jpg') no-repeat;
position: relative; *** bottom, top
box-shadow: 0px 4px 4px #1c1a19;
margin-bottom: 25px; *** 50 à 100
}
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
#banniere_description
{
position: absolute;
bottom: 0;
border-radius: 0px 0px 5px 5px;
width: 50%;
height: 10px;
padding-top: 15px;
padding-left: 4px;
background-color: rgba(200,200,200,0.8);
color: white; *** black
font-size: 0.8em; *** modifier taille
}
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
aside
{
flex: 1.2;
position: relative;
background-color: yellow; *** blue, gray, white, black, red, green, orange, cyan
box-shadow: 0px 2px 5px #1c1a19;
border-radius: 5px;
padding: 10px;
color: cyan; *** yellow, gray, white, black, red, green, orange, cyan
font-size: 0.9em;
}
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
aside img
{
margin-right: 100px; *** 100, 200, 300
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
footer
{
display: flex;
background: url("images/separateur.png") repeat-x bottom; *** top ou bottom
padding-top: 25px;
}
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
footer p, footer ul
{
font-size: 0.6em; *** modifier taille police
}
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
footer h1
{
font-size: 0.5em; *** modifier taille police du titre h1
}
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
- Dans #tweet /#photos/ #amis *** modifier les % dans width (- de 100% au total)
IV LIENS UTILES
- Cours complet : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3
- Cours synthétique : https://www.w3.org/Style/Examples/011/firstcss.fr.html
- Cours html : https://cursus.edu/formations/42131/gratuit-faire-ses-premiers-pas-en-html#.W9CqmEszZPY
- Trouver des fonds d'écran, séparateurs, ... : http://www.weboutils.com/backgrounds/
- Ressources pour aller plus loin (générateur d'éléments personnalisés, scripts, etc.) (réservé à ceux qui maîtrisent la base du html/css et php, déconseillé pour le projet) : http://www.outils-web.com/page-generateur-meta-tag.asp
- Icones diverses .png : http://www.icone-png.com/webmaster/
- icones diverses .png, gif, gif animé, fonds écran... : http://www.icone-gif.com/
Ressources idéales pour rechercher des éléments techniques :
- Ressources pour approfondir (bien mais en anglais) : https://www.w3schools.com/css/css_colors.asp
- Ressources pour approfondir (en français) : https://developer.mozilla.org/fr/docs/Web