04- Exercices

4.Exercices

4.1 Exercice 01

  1. Ouvrir notePad ++ et ouvrir un nouveau document
  2. Dans le menu langage, sélectionner css
  3. Sauvegarder le fichier avec le nom suivant : test01_style.css
  4. Ouvrir un second fichier
  5. Dans le menu langage, sélectionner html
  6. Sauvegarder le fichier avec le nom suivant : test01_style.html
  7. Lier le fichier css au fichier xhtml en utilisant le code fourni dans la section « Où écrire les css » (dans l’encadré vert)
  8. Copier le texte suivant :

    01- Les feuilles de style CSS externes
    Elles regroupent des règles CSS enregistrées dans un fichier .css externe distinct (pas dans un fichier HTML). Le fichier .css est lié à une ou plusieurs pages d’un site Web à l’aide d’un lien situé dans le head section d’un document. Quand vous créez des styles dans une feuille de style externe, vous pouvez contrôler l’aspect de pages Web multiples à partir d’un même emplacement au lieu d’avoir à définir des styles pour chacune des pages. C’est la meilleure façon.

    02- Les feuilles de style CSS internes (ou incorporées dans un fichier html).
    Elles regroupent les règles CSS incluses dans une balise style dans le < head > (donc dans l’en-tête de votre fichier html).

     

     

     

    03-Les styles en ligne.
    Elles sont définis avec des instances spécifiques de balises dans un document html.

  9. Dans votre fichier html :
    1- h1 = 01-02-03
    2- p = les trois paragraphes
    3- strong = CSS (partout dans le texte)
  10. Pour faire la mise en page en CSS, nous allons utiliser les sélecteurs suivants : body, h1, h2, p et strong.
  11. Pour faire la mise en page en CSS, nous allons utiliser les propriétés suivantes :
    1. background-color (couleur d’arrière-plan)
    2. font-family (famille de polices de caractères)
    3. font-style (italique)
    4. font-weight (épaisseur de la police)
    5. color (couleur de la police)
    6. letter-spacing (interlettrage)
    7. text-align (alignement du texte)
    8. line-height (interlignage)
    9. font-size (taille de la police)
    10. padding (marges internes de la boîte)
    11. width (largeur)

       

  12. Allons coder tout cela dans notePad ++…

 

4.2 Exercice 02

Cours 8 Exercice 2
2.1 Explication du principe « client – serveur »Lorsque vous tapez une adresse url dans la fenêtre d’adresse d’un fureteur, vous effectuez une demande (requête) sur le réseau internet pour trouver, d’abord l’ordinateur (serveur) sur lequel est hébergé le site demandé et ensuite, pour trouver la page Web d’accueil de ce site Web. Lorsque l’ordinateur serveur reçoit votre requête, il renvoit une copie de la page Web vers votre ordinateur. Cette page est copiée dans un dossier temporaire sur votre disque dur et le fureteur peut ensuite afficher la copie de la page Web à l’écran.
2.2 Explication du rôle des adresses URL (univeral ressource locator)L’adresse url permet de communiquer avec les serveurs Web sur les réseaux Internet. L’adressse url est composée premièrement du protocole de communication http. HTTP (hyper text transfer protocol) permet de transporter et de faire fonctionner des fichiers hypertextes.Deuxièmement, l’adresse url est composée d’un nom de domaine identifiant l’ordinateur et son réseau privé. Le préfixe WWW (World Wide Web) identifi tous les noms de domaine. Le suffixe varie selon les catégories de domaine.
2.3 Les noms de domaineChaque ordinateurs sur le réseaux internet est identifié par un numéro IP (par exemple : 211.14.1.5). Les numéros IP des ordinateurs qui hébergent des sites Web (dit serveurs Web) sont enregistrés et associés à un nom de domaine. Par exemple, un des serveurs de yahoo est identifié par le numéro IP 217.12.3.11, son nom de domaine enregistré est www.yahoo.fr.

Modèle à imiter

 

4.3 Exercice 03

Se rendre à l’adresse suivante :

https://openclassrooms.com

Vous devez suivre le tutoriel des sections suivantes pour la semaine prochaine:

https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1605060-mettez-en-place-le-css

 

  1. Mettez en place le CSS

    https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1605060-mettez-en-place-le-css

     

  2. Formatez du texte
    https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1605329-formatez-du-texte

 

4.4 Exercice 04

De plus, vous devez nous proposer une page html mise en page à l’aide des css résumant les points importants des tutoriaux 4.3

Présentation devant classe.

À remettre la semaine prochaine sur votre site.

04- Représentation graphique du modèle de boîte selon le W3C :

Le modèle de boîte du W3C  définit par le calcul de la largeur et de la hauteur des éléments. Depuis la spécification CSS1 du consortium W3 datant de 1996, la largeur totale d’un élément est calculée à l’aide de l’addition :

1- de la  largeur de son contenu ( width ),
2- de sa  marge intérieure ( padding ),
3- de l’ épaisseur de son cadre ( border-width ),
4- de sa  marge extérieure ( margin ).