Création d'une page web

Cours

Création d'une page web
Créer un mini site web
Votre travail

Création d'une page web

HTML( HyperText Markup Language)

Le HTML n'est pas un langage de programmation, c'est un langage conçu pour représenter les pages web, Il est interprété par le navigateur.

Il est constitué d'éléments qui structurent le contenu.

Autrement dit : suivant l'élément utilisé, le navigateur va savoir quelle est la nature du contenu.

On va utiliser des éléments pour définir un paragraphe ou un titre, ou encore pour insérer une image ou une vidéo dans un document.

L'élément p, par exemple sert à définir un paragraphe.

La base d'une page web

Le code ci-dessous contient les éléments de bases, pour qu'un navigateur reconnaisse une page web et en interprète le contenu :

Les parties entre < !-- et --> sont du commentaire, les commentaires permettent de décrire ce que fait le code à cet endroit et ne sont pas affichés par le navigateur.

On peut en rajouter autant que l'on veut.

À faire : Rajouter les commentaires et ajouter le code <meta charset="UTF-8"> s'il n'est pas déjà présent.

<!DOCTYPE html>  <!-- document HTML-->
<html>  <!--début du document-->
  <head> <!--le head permet d'initialiser certains paramètres--> 
    <meta charset="UTF-8"> <!--comme le fait de pouvoir utiliser les caractères accentués-->
    <link rel="stylesheet" href="style.css"> <!--ou encore de lier la feuille de style-->
  </head> <!--fin du head-->
  <body> <!--début du corps de la page web-->
    
    <!-- C'est ici que l'on écrira le contenu de la page web-->
  </body><!--fin du body-->
</html><!--fin de la page HTML-->

<!DOCTYPE html>  <!-- document HTML-->
<html>  <!--début du document-->
  <head> <!--le head permet d'initialiser certains paramètres--> 
    <meta charset="UTF-8"> <!--comme le fait de pouvoir utiliser les caractères accentués-->
    <link rel="stylesheet" href="style.css"> <!--ou encore de lier la feuille de style-->
  </head> <!--fin du head-->
  <body> <!--début du corps de la page web-->
    
    <!-- C'est ici que l'on écrira le contenu de la page web-->

  </body><!--fin du body-->
</html><!--fin de la page HTML-->

Les balises en HTML

Comme vous l'avez sans doute remarqué, les éléments HTML se délimitent par des balises :

<nom de l'élément> pour l'ouverture

</nom de l'élément> pour la fermeture (remarquer le "slash")

Certaines balises n'ont pas besoin de fermeture, on les appellent "balises orphelines" , comme la balise break <br> qui permet de passer à la ligne

Attention :

Tout ce que l'on écrira par la suite se fera entre les balises <body> et </body>

Méthode : Un titre

Commençons par donner un titre à notre page .

Pour cela nous utiliserons l'élément : h1

h1 est une balise dite hiérarchique, qui permet d'organiser une page web.

Il existe 6 balises hiérarchiques (h1,h2,h3,h4,h5,h6) qui écrivent le texte dans une taille prédéfinie, h1 étant la plus grande.

À faire : Rajouter le titre :

<!DOCTYPE html>  <!-- document HTML-->
<html>  <!--début du document-->
  <head> <!--le head permet d'initiialiser certains paramètres--> 
    <meta charset="UTF-8"> <!--comme le fait de pouvoir utiliser les caractères accentués-->
    <link rel="stylesheet" href="style.css"> <!--ou encore de lier la feuille de style-->
  </head> <!--fin du head-->
  <body> <!--début du corps de la page web-->
        <h1> Ma première page web </h1>
    
  </body><!--fin du body-->
</html><!--fin de la page HTML-->

<!DOCTYPE html>  <!-- document HTML-->
<html>  <!--début du document-->
  <head> <!--le head permet d'initiialiser certains paramètres--> 
    <meta charset="UTF-8"> <!--comme le fait de pouvoir utiliser les caractères accentués-->
    <link rel="stylesheet" href="style.css"> <!--ou encore de lier la feuille de style-->
  </head> <!--fin du head-->
  <body> <!--début du corps de la page web-->
        <h1> Ma première page web </h1>
    

  </body><!--fin du body-->
</html><!--fin de la page HTML-->

Par défaut le texte du titre s'écrit en noir et à gauche de la page.

On souhaite que ce titre soit centré sur la page et en rouge.

Il y a deux façons de faire :

Directement sur la page web
En utilisant la feuille de style

1ère façon : Chaque élément HTML possèdent des attributs, qui permettent de modifier l'affichage de base.

L'élément h1, possède l'attribut "align" qui peut se décliner en "left" , "center" et "right". Un attribut se définit à l'intérieur de la balise ouvrante.

<h1 align=center> Ma première page web </h1>

<h1 align=center> Ma première page web </h1>

Pour la couleur rouge, il faudra utiliser une autre balise : "font" avec l'attribut "color", en faisant en sorte que les imbrications de balises respectent l'ordre des ouvertures et fermetures des balises (comme les parenthèses en Math ( [ ] ) est correct et ( [ ) ] ne l'est pas

<font color = red>
  <h1 align = center > Ma première page web </h1>
</font>

<font color = red>
  <h1 align = center > Ma première page web </h1>
</font>

Cette méthode fonctionne, mais si nous devons mettre plusieurs titre dans notre page, il faudra réécrire le code à chaque fois.

2ème façon : On va utiliser la feuille de style(css) et définir notre façon d'écrire un titre.

Dans la feuille de style on rajoute le code suivant

Qui dit que lorsque l'on utilise l'identifiant "titre", le texte est en gras, le texte est aligné au centre et la couleur est rouge.

#titre{
  font-weight: bold;
  text-align: center;
  color : red
}

#titre{
  font-weight: bold;
  text-align: center;
  color : red
}

Dans la page HTML, on écrit alors ( entre <body> et </body> bien sûr...):

<h1 id="titre" > Ma première page web </h1>

<h1 id="titre" > Ma première page web </h1>

À faire : Utiliser la seconde façon pour votre titre.

À chaque fois que vous utiliserez l'identifiant "titre" le texte sera en gras, centré et rouge.

À faire : Faites un test avec : la balise h2

vous pouvez créer autant d'identifiant que vous voulez....

Méthode : Un paragraphe de texte

L'élément p permet d'écrire un paragraphe de texte. Cependant si vous voulez passer à la ligne il faudra utilise la balise : <br>

<p> mon texte </p>

<p> mon texte </p>

À faire : Écrire un paragraphe qui contient le texte suivant en respectant les passages à la ligne

L'HyperText Markup Language, généralement abrégé HTML,

est le langage de balisage conçu pour représenter les pages web.

C'est un langage permettant d'écrire de l'hypertexte, d'où son nom.

Les balises <i> ...</i> et <strong>...</strong> permettent d'afficher respectivement du texte en italique et en gras.

À faire : Réaliser l'affichage suivant

On aimerais que certains paragraphes soient écris en bleu, d'autres en vert.

Là encore nous utiliserons la feuille de style.

À faire : Dans la feuille de style rajouter le code suivant :

#parableu{
  color : blue;
}
#paravert{
  color : green;
}

#parableu{
  color : blue;
}

#paravert{
  color : green;
}

On peut maintenant utiliser les identifiants "parableu" ou "paravert"

À faire : Réaliser cet affichage

Un paragraphe encadré.

À faire : Dans la feuille de style rajoutez le code suivant :

#paraencadre{
  border-width:2px;
  border-style:groove;
  border-color:firebrick;
}

#paraencadre{
  border-width:2px;
  border-style:groove;
  border-color:firebrick;
}

À faire : Réaliser l'affichage ci-contre

Méthode : Couleur et image de fond

Pour une couleur de fond, il suffit de modifier la couleur du background dans la feuille de style, comme ci-dessous :

body {
  background-color :bisque;
}

body {
  background-color :bisque;
}

Pour une image de fond, en s'assurant qu'elle soit assez grande pour éviter l'effet "mosaique", on modifie le background comme ci-dessous :

À faire : Écrire le code dans la feuille de style

body {
  background-image :url(fond1.jpg);
}

body {
  background-image :url(fond1.jpg);
}

Il faut maintenant avoir accès à cette image.

Pour cela vous devez avoir mis l'image au même niveau que les pages index.html et style.css

À faire :

Télécharger cette image(on clique dessus et puis clic droit --> enregistrer l'image sous), déposez là dans le dossier (Add image dans code.org) qui contient vos deux fichiers (index.html et style.css).

Vérifiez que son nom est bien fond1.jpg

Puis rafraîchissez la page (Refresh and save)
Adapter les couleurs des textes, pour la lisibilité

Vous devriez obtenir quelque chose comme :

Méthode : Des liens Hypertexte

Pour créer un lien hyper texte on utilise l'élément "ancre" avec son attribut "href"

Le code pour un lien hypertexte est :

<a href="url du lien" target='blank'> mots à afficher </a>

L'attribut target = "blank", permet d'ouvrir le lien dans un nouvel onglet

À faire : Ajouter un lien vers le site du lycée dans un paragraphe, les mots à afficher sont : Le site du lycée Jean Moulin

À faire : Ajouter un autre lien vers un site que vous choisirez

Méthode : Les Tableaux

On affiche des tableaux lorsque l'on a besoin de structurer des informations, c'est aussi très utile si l'on souhaite afficher des images avec un texte.

L'élément HTML pour réaliser un tableau est : <table> ....</table>

On utilise également : <tr> </tr> qui indique le début et la fin d'une ligne du tableau ;

Et <td> </td> qui indique le début et la fin du contenu d'une cellule.

Voici un tableau de 2 lignes et 2 colonnes en HTML :

<table>
    <tr>
        <td>  cellule 1 </td>
        <td>  cellule 2 </td>
    </tr>
    <tr>
        <td>  cellule 3 </td>
        <td>  cellule 4 </td>
    </tr>
</table>

<table>
    <tr>
        <td>  cellule 1 </td>
        <td>  cellule 2 </td>
    </tr>
    <tr>
        <td>  cellule 3 </td>
        <td>  cellule 4 </td>
    </tr>
</table>

À faire : Créer un tableau de 2 lignes et 2 colonnes dans votre page html (4 cellules)

On obtient un tableau sans bordures, si on souhaite faire afficher les bordures, on ajoute dans la feuille de style un identifiant :

#tab{
  border: 2px solid blue;  /* fixe les bordures à 2 pixels et de couleur bleue*/
  border-collapse: collapse; /* pour que les lignes de séparation soient jointes*/
  margin: auto; /*pour centrer le tableau dans la page*/
  font-family:cursive; /* police cursive*/
  font-size: medium; /* taille medium de la police */
  color: greenyellow; /* couleur de la police */
}

#tab{
  border: 2px solid blue;  /* fixe les bordures à 2 pixels et de couleur bleue*/
  border-collapse: collapse; /* pour que les lignes de séparation soient jointes*/
  margin: auto; /*pour centrer le tableau dans la page*/
  font-family:cursive; /* police cursive*/
  font-size: medium; /* taille medium de la police */
  color: greenyellow; /* couleur de la police */
}

Remarque : Les commentaires en css s'écrivent entre /*................*/

Et on précise dans la page HTML que les éléments table et td ont pour identifiant "tab"

À faire : Faites en sorte d'obtenir cet affichage

Méthode : Les images

Nous allons mettre des images dans les cellules 1 et 4 de notre tableau.

voici les deux images à insérer :

Cliquez sur l'image
Puis avec un clic droit, enregistrer l'image sous...
Déposer les images dans le dossier contenant votre page web (Add image dans code.org)

Le code pour insérer une image :

<img src="tux1.png" width=100px height=100px >

<img src="tux1.png" width=100px height=100px >

Les attributs width(largeur) et height(hauteur) permettent de régler la taille d'affichage

À faire : faites en sorte d'obtenir l'affichage ci-contre

On peut également mettre l'url d'une image trouvée sur le web plutôt que de la télécharger...

Il suffit de remplacer le nom de l'image par son url.

Sur le web, on cherche une image, on copie le lien de l'image et on écrit le code comme celui-ci :

Attention toutefois à vérifier que le lien que vous copier est le bon ( il ne doit pas être trop long...)

<img src="https://i2.wp.com/bluegyn.com/mesprogrammes/wp-content/uploads/2014/03/tux-artiste.png?fit=256%2C256" width=100px height=100px >

<img src="https://i2.wp.com/bluegyn.com/mesprogrammes/wp-content/uploads/2014/03/tux-artiste.png?fit=256%2C256" width=100px height=100px >

À faire : Ajoutez deux autres images dans les cellules 2 et 3 du tableau avec des url

Méthode : Les listes

Les listes permettent de lister des informations.

Les éléments HTML utilisés sont "ol" pour une liste ordonnée (avec des chiffres) ou "ul" pour une liste non ordonnée (avec des points).

Pour chacune d'elles on utilise l'élément "li"

À faire : tester ces deux codes dans votre page html.

      <ol>
        <li> en première place </li>
        <li> en seconde place </li>
        <li> en troisième place </li>
        <li> etc.. </li>
      </ol>
    
    <ul>
      <li> en première place </li>
      <li> en seconde place </li>
      <li> en troisième place place </li>
      <li> etc.. </li>
    </ul>

      <ol>
        <li> en première place </li>
        <li> en seconde place </li>
        <li> en troisième place </li>
        <li> etc.. </li>
      </ol>
    
    <ul>
      <li> en première place </li>
      <li> en seconde place </li>
      <li> en troisième place place </li>
      <li> etc.. </li>
    </ul>

Pour changer la couleur du texte, on peut directement dans la feuille de style préciser que pour l'élément "li" la couleur est par exemple "whitesmoke".

Avec cette méthode, on ne crée pas d'identifiant, mais cela affecte toutes les éléments "li" se trouvant sur la page

À faire : Ajouter ce code à la feuille de style

li{
  color:whitesmoke
}

li{
  color:whitesmoke
}

Méthode : Un bouton

On peut ajouter un bouton cliquable en HTML , voici le code qui permet d'afficher la page d'accueil de Wikipédia :

<button onclick="window.location.href = 'https://fr.wikipedia.org/wiki/2021';">Cliquez Ici pour aller sur Wikipédia</button> 

<button onclick="window.location.href = 'https://fr.wikipedia.org/wiki/2021';">Cliquez Ici pour aller sur Wikipédia</button>

À faire : Ajouter ce code dans votre page

Début

Accueil

Imprimer