Modifier mes premières pages web

par | Oct 19, 2017 | Langages du web

remixer

Travail noté sur   /20

Vous allez améliorer et compléter une page web en la remixant
Pour cela cliquez sur le lien https://thimbleprojects.org/lossendiere/474462/ et connectez vous à votre compte mozilla Timble. Vous verrez alors le bouton remixer à droite.

En allant dans « Mes projets » en dessous de votre nom, vous verrez la liste de vos sites et ceux que vous avez remixés
Ceux qui sont remixé ont (remixé) à la fin du nom mais si vous changez le nom cela devient votre site à vous, n’oubliez pas cependant de citer le créateur du site original qui vous a inspiré quelque part dans votre nouveau site.

site-remixe

Il est possible également de télécharger le dossier compressé ci contre mes-premieres-pages-web.zip
et ensuite de l’importer dans Mozzilla Timble, l’ensemble des fichiers vont se décompresser à l’intérieur de votre projet Timble.

I ) Modification des images     /3

Téléchargez les images ci-dessous dans votre espace personnel en prévision des modifications que vous allez faire ensuite.

HTML-CSS-structure

Téléchargez l’image ci-contre afin de remplacer l’image structure-page-web-image1.jpg du site

 

 

 

 

Téléchargez l’image ci-dessous afin de remplacer l’image
structure-page-web-image2.jpg du site

balise-ouvrante-balise-fermante-2

Téléchargez l’image ci-dessous afin de remplacer l’image structure-page-web-image3.jpg du site

structure-page-HTML

Voici ci dessous la méthode pour ajouter une image en écrivant le code HTML et en utilisant l’auto-complétion

 

Il est possible aussi d’aller dans la liste des fichiers à gauche et de cliquez sur l’image
Le bon code HTML s’affiche en bas de l’image, il suffit ensuite de faire du copier puis coller au bon endroit.

aide-insertion-image

 

 

 

Remarque : il est préférable de placer les images dans un dossier séparément des fichiers HTML et CSS qui eux peuvent rester à la racine de l’arborescence.

Par exemple un dossier « images » pour stocker l’ensemble des images du site

deplacer-image

 

Si votre image n’est pas placée dans le dossier « images » vous pouvez la déplacer avec un clic droit de souris et en cliquant sur la commande déplacer.

 

Attention !!   les liens partent de la racine du site, si un fichier n’est pas à la racine, il faut donc écrire le chemin du dossier avant le nom de fichier

Pensez aux personnes mal ou non voyantes : les ordinateurs ne peuvent pas analyser les contenu des images, c’est pour cela d’ailleurs que les CAPTCHA permettant de vérifier si la personne est un humain ou un robot sont constitués de contenus dans des images.

Mettez une description à vos images, le logiciel de la personne handicapé pourra décrire oralement de cette façon le contenu.

 

Tous les éléments de contenu d’une page HTML sont encadrés par une balise ouvrante et une balise fermante.
Ces balises vont délimiter entre quelle zone et quelle zone ont a par exemple
– un paragraphe <P> …………….. </P>
– un titre <H1> …………………… </H>
– une partie importante <strong> …………. </strong>

La structure générale d’une page HTML

head-body

<!DOCTYPE html>
<html>
     <head>
     <title>Titre de la page web</title>
     </head>
  <body>
     <p>
    Premier paragraphe
   </p>

  </body>
</html>

Pour que le navigateur sache que le codage est du type HTML et qu’il doit traduire ce langage il y a
<html> ….. </html> ——- tout ce qui est a l’intérieur des deux balises est du langage HTML
En première ligne <!DOCTYPE html> indique que c’est le langage HTML est la version 5 ( HTML5)

<head></head> —— c’est une partie codage qui ne sera pas visible dans le navigateur de l’internaute
Les balise <title></title> n’affiche pas un titre dans la page web mais sur l’onglet du navigateur web.

<body> …. </body> —– tout ce qui est a l’intérieur de ces balises s’affichera dans la page web.

 
Les balises ouvrantes et fermantes et les balises orphelines

La plupart des balises ont une partie ouvrante et fermante, exemple ci-dessous avec la balise paragraphe

balise-paragraphe

Certaines balises n’ont pas de partie fermante car elles décrivent un endroit précis, pas une zone
par exemple, l’endroit ou placer une image, ou faire un retour à la ligne

Les balises qui ne se ferment pas s’appellent des balises orphelines

balise-aller-a-la-ligne

Les attributs des balises

Pour certaines balises il est nécessaire d’ajouter des précisions à l’intérieur de la balise.
On ne peut pas décrire « mettre un lien » il faut décrire vers quel adresse va aller le lien ?
On ne peut pas décrire « mettre une image » if faut décrire quelles images ? éventuellement avec quelle taille elle va s’afficher ?

attribut-anchor

La précision s’appelle un « Attribut« 

Pour cette balise anchor <a></a> qui sert à faire des liens, c’est l’attribut href (« hypertexte reference« ) qui va indiquer précisément vers quelle adresse faire le lien.

 

balise-image

Pour cette balise image <IMG> qui est une balise orpheline
c’est l’attribut :
src (« source« ) qui va indiquez de quelle image il s’agit
alt (« alternative« ) qui va proposer un texte décrivant l’image si celle ci n’est plus présente ou si la page est lut par un logiciel pour les aveugles.

 

Ce qu’il faut retenir

  1. Le langage de description des pages web HTML veut dire HyperText Markup Language
    En Français cela signifie langage de marquage ou balisage de l’hypertexte, vous apprendrez plus tard ce que signifie l’Hypertexte.
  2. Voila pourquoi on appelle des balises les éléments de code qui permettent la description d’une page
    balises-html
  3. Le langage HTML a eu plusieurs évolutions, on est actuellement à la version 5, on parle de HTML5
    code-minimal-page-html

II )  Le contenu et la présentation

a ) Associer une présentation CSS à un fichier de structure HTML    /3

Tout comme en Français on fait la différence entre le fond et la forme, dans un site web on doit coder séparément
le contenu : langage de description HTML
la présentation : langage de description CSS

CSS est l’abréviation de « Cascading Style Sheets ». En Français feuilles de style en cascade.
Il s’agit donc pour vos pages web d’avoir un style.

Le codage CSS en est actuellement à sa version 3.
Le Codage HTML5 associé aux feuilles de style CSS3 permet de créer des pages web au design moderne

declarer-feuille-de-style

Pour l’instant le style de la page web <title>Le langage HTML, la structure et le contenu d’une page web</title> de votre site web n’est pas très attrayante :

1 ) téléchargez ce fichier de style CSS  style-ameliore-1.css
2 ) insérez ce fichier de style à la racine de votre site web à coté de la page d’accueil index.html
3 ) Effectuez les modifications pour que ce nouveau style s’affiche à la place de l’ancien, en modifiant quelque chose dans la partie <head></head> du fichier HTML

b ) modifier la présentation CSS    / 2

Dans la feuille de style il y a 4 parties, ces 4 parties vont définir le style à 4 endroits de la page HTML

Indiquez successivement ci-dessous sur 4 lignes les balises ouvrantes et fermantes de ces 4 parties de la page HTML

  • partie 1 :
  • partie 2 :
  • partie 3 :
  • partie 4 :

    changer-le-style
    Lorsque vous cliquez dans le code du fichier CSS sur des couleurs
    – des couleurs décrites sous forme de codage, par exemple #4169E1  #EBE141   #696969
     – des couleurs nommées directement en anglais ( blue, green, black … )
    Un petit cercle apparaît en violet, en cliquant dessus vous pouvez choisir une autre couleur dans le nuancier et voir directement le résultat apparaître à droite.

Dans les fichiers de style CSS
– quand il y a une valeur suivi de px, le px signifie pixel cela peut donc être la largeur en pixel d’une bordure, d’un espace …
– quand il y a une valeur suivie de pt, le pt signifie point cela est généralement le nombre de point d’une police de caractère (la hauteur des lettres), d’ailleurs police dans le cas de l’écriture se dit en anglais font.

test-style-telephone

Noté   /4

1 ) Vous allez personnaliser la présentation de la page en changeant les couleurs de texte et d’arrière plan des mots importants.

2 ) Vous allez complètement changer la présentation du titre

– modifier la couleur du texte et celle d’arrière plan-
– modifier la taille du texte
– modifier la couleur de bordure
– modifier les espacements afin que les lignes du titre ne se chevauche pas, comme c’est le cas pour l’exemple ci-contre en affichage téléphone portable.

3 ) Faire une capture d’écran de votre page en affichage téléphone portable
puis remplacez la photo ci-contre par la votre afin d’être noté.

 
Indiquer quels éléments de structure HTML vont être concernés par un style

Dans le langage CSS, c’est le rôle des sélecteurs

regle-css-1

Dans la déclaration d’une règle de style CSS on peut avoir une propriété avec plusieurs valeurs.
Comme par exemple celui ci-dessous :
span encadrement
La bordure a comme valeurs : 1 pixel, ligne continu de couleur rouge

Le sélecteur peut être le nom d’une balise HTML

regle-css-2Dans le cas ci-contre, tous les titres h1 des pages HTML seront de couleur bleu avec une taille de police de 12px.

Cette fois ci dans la règle ont à 2 propriétés qui ont chacune une valeur.

Le sélecteur peut être une partie des balises HTML

TITRE-VERT

Pour cela il faut ajouter à l’intérieur de la balise HTML un attribut class dont le nom correspond à la class dans le fichier de style CSS
Dans cet exemple seuls les titres H1 ayant la class « titre vert » s’afficheront en vert

Le sélecteur peut désigner n’importe quelle partie de contenu de la page HTML même des morceaux de texte ou il n’y a pas de balise.

SPAN

On ajoute des balises <span> …. </span> dans la page HTML et des class span également dans le fichier de style CSS
Ces balises <span> sont des balises de présentation, elles ne contribuent pas à donner du sens, de la signification au texte de la page web.

Exercice :     /2

documentation-selecteur2

 

Dans Mozilla Timble vous pouvez sélectionner le critère et la ou les valeurs d’une règle CSS

Puis faire un clic droit et ensuite « Documentation« 

Dans la colonne documentation de droite vous pouvez trouver les différentes valeurs possible.

C’est expliqué en Anglais mais vous pouvez tester les valeurs différentes et voir le résultat qui s’affiche à droite.

 

Indiquez ci-dessous quelles sont les valeurs possibles pour la propriété font-style

Valeurs possibles de la propriété font-style :


Imprimer