I) OBJECTIF Nous allons créer une page Web en utilisant un « patron » HTML et CSS à l’aide du module d’inspection Firebug pour le navigateur Firefox. Tutoriel HTML : http://fr.html.net/tutorials/html/ Voici un site destiné au développement Web : http://www.webisn.byethost5.com/accueil Très bon tutoriel : http://www.siteduzero.com/informatique/tutoriels/apprenez-a-creer-votre-site-web-avec-html5-et-css3 II) STRUCTURE D’UNE PAGE WEB, le langage HTML(Hyper Text Markup Language) La construction d’un site Web peut être comparée à la construction d’une maison. Construction d’une maison Construction d’une page Web posséder le terrain faire une demande de permis de construire(déposer les plans,…..) bâtir les fondations monter les murs, les cloisons faire la décoration posséder un hébergement (endroit où le site sera enregistré) déclarer comment va être construit notre site(Doctype) établir les premiers socles établir les différentes sections du site (HTML) donner un style au site (CSS) Visualiser la page Web www.csszengarden.com puis télécharger : html file. Vous obtenez la page BRUTE sans décoration. Revenez à la page initiale puis ouvrir Firebug Passer la souris sur <h1> pour visualiser la partie de la page concernée. Modifier un paramètre du fichier de style CSS comme ci-dessous : Ce code est constitué de texte et d'indications de mise en page. Ces indications sont appelées balises. Les balises : Une balise html (ou tag en anglais) respecte la syntaxe suivante : <balise> Une balise peut être seule, et son effet s'applique à l'endroit où elle se trouve, comme par exemple <BR> qui sert à sauter une ligne, ou en couple balise ouvrante <balise> balise fermante </balise> pour indiquer sur quelle partie de votre code elle s'applique : son effet touche tout ce qui se trouve entre la balise ouvrante et la balise fermante. Les fondations d’une page Web : Créer des pages « Web »
10
Embed
Créer des pages « Weblewebpedagogique.com/sfeulvarch/files/2012/08/Créer-des... · 2013. 1. 16. · Il permet de créer la structure pour un site Web 3°) L’élément HEAD :
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
I) OBJECTIF
Nous allons créer une page Web en utilisant un « patron » HTML et CSS à l’aide du module d’inspection Firebug pour le
navigateur Firefox.
Tutoriel HTML : http://fr.html.net/tutorials/html/
Voici un site destiné au développement Web : http://www.webisn.byethost5.com/accueil
Très bon tutoriel : http://www.siteduzero.com/informatique/tutoriels/apprenez-a-creer-votre-site-web-avec-html5-et-css3
II) STRUCTURE D’UNE PAGE WEB, le langage HTML(Hyper Text Markup Language)
La construction d’un site Web peut être comparée à la construction d’une maison.
Construction d’une maison Construction d’une page Web
posséder le terrain
faire une demande de permis de
construire(déposer les plans,…..)
bâtir les fondations
monter les murs, les cloisons
faire la décoration
posséder un hébergement (endroit où le site sera enregistré)
déclarer comment va être construit notre site(Doctype)
établir les premiers socles
établir les différentes sections du site (HTML)
donner un style au site (CSS)
Visualiser la page Web www.csszengarden.com puis télécharger : html file. Vous obtenez la page BRUTE sans décoration.
Revenez à la page initiale puis ouvrir Firebug
Passer la souris sur <h1> pour visualiser la partie de la page concernée.
Modifier un paramètre du fichier de style CSS comme ci-dessous :
Ce code est constitué de texte et d'indications de mise en page. Ces indications sont appelées balises.
Les balises :
Une balise html (ou tag en anglais) respecte la syntaxe suivante : <balise>
Une balise peut être seule, et son effet s'applique à l'endroit où elle se trouve, comme par exemple <BR> qui sert à sauter une ligne,
ou en couple balise ouvrante <balise> balise fermante </balise> pour indiquer sur quelle partie de votre code elle s'applique : son effet
touche tout ce qui se trouve entre la balise ouvrante et la balise fermante.
Sélectionner l'élément correspondant à la boîte « menu » dans la partie HTML, on découvre notamment que celle-ci « flotte » à droite dans
le conteneur de niveau supérieur « main content », que sa largeur est de 139 pixels, puis on découvre la signification de padding:0 20px
(voir ci-dessous) et le système des marges CSS en expérimentant des valeurs de 5 ou 10 pixels.
Question 8 :
Télécharger le patron « Simple Beauty » : www.oswd.org/design/preview/id/3697.
Sauvegarder dans un répertoire nommé TPboutiquesurf.
Vous constaterez qu’il comporte au moins deux fichiers séparés : index.html et style.css
Intégrer le contenu HTML de la boutique de surf dans le fichier index.html pour obtenir le résultat ci-dessous :
Ce patron est écrit en XHTML, la nouvelle norme du W3C en matière de langage balisé pour concevoir des documents Web
donc il y a quelques règles nouvelles par rapport au HTML : http://openweb.eu.org/articles/html_au_xhtml
Le résultat n'est pas immédiatement satisfaisant, il reste des paramètres à adapter (couleurs, polices de caractères, taille et disposition
des éléments etc …) mais vous pouvez expérimenter sa nouvelle mise en forme avec Firebug.
Pensez à tester périodiquement votre fichier à l'aide du validateur du consortium W3C : http://validator.w3.org/ Il vous donnera des informations sur les éventuelles types d’erreurs