Outils pour utilisateurs

Outils du site


creation_d_un_site_internet_avec_html5_et_css3:creation_d_une_page_web_en_html

Création d'une page web en HTML

Comment fonctionnent les sites web ?

Pour consulter un site web, il faut utiliser un navigateur.

Le navigateur web permet d'afficher des pages écrites à l'aide de deux langages de programmation : le HTML et le CSS.

  • Le HTML (HyperText Markup Language) permet d'écrire le contenu à afficher sur la page : du texte, des liens, des images…
  • Le CSS (Cascading Style Sheets, aussi appelées feuille de style) permet de gérer l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…).

Exemple de HTML

Exemple de CSS

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Ma première page Web</title>
   </head>
 
   <body>
      <p>Ceci est un paragraphe</p>
   </body>
</html>
p{
   color : blue ;
   font-size : 16 px ;
   font-family : Arial, Verdana, Impact ;
   background-color : yellow ;
}

Remarque : A partir d’un fichier HTML, il est possible de créer plusieurs styles de page. http://www.csszengarden.com/tr/francais/

Le JavaScript peut compléter le HTML et le CSS. Le JavaScript permet de rendre la page interactive :

  • modifier les propriétés du CSS ou le code HTML sans avoir à recharger la page ;
  • affichage d'animations ou de boîtes de dialogue à l'écran ;
  • gérer les boutons…

Comment créer une page web ?

On peut créer une page web avec un éditeur de texte tel que Notepad++ .
http://notepad-plus-plus.org/fr/


Le fichier texte aura pour extension .html.

Exemple : index.html

On peut aussi utiliser un site web pour tester de petits projets :


notepad.jpg

Comment écrire une page web en HTML ?

Les balises et les attributs
Une page HTML contient un ensemble de balises. Une balise est un ensemble de caractères entre le signe < et le signe >. Une balise caractérise un contenu, par exemple un paragraphe, une image, un titre, un tableau, etc…

Exemple : <p> Ceci est un paragraphe</p>

On distingue une balise ouvrante <p> et une balise fermante </p> qui indique que le paragraphe se termine.

Il existe des balises orphelines qui servent à insérer un élément à un endroit précis (par exemple une image). Il n'est pas nécessaire de délimiter le début et la fin de l'image, on veut juste dire à l'ordinateur “insère une image ici”. Une balise orpheline s'écrit :

  • <img /> pour insérer une image.
  • <br /> pour insérer un saut de ligne.


Les balises peuvent être complétées par des attributs apportant des informations supplémentaires. L'attribut se place après le nom de la balise ouvrante.

Exemple : A la balise image <img/>, on peut rajouter un attribut qui indique l'emplacement de l'image à afficher : <img src=“photo.jpg” />


Balise imbriquée
il arrive que des balises soient imbriquées. Il faudra alors faire attention à toujours refermer les balises ouvertes en dernier.


Une bonne imbrication des balises

Une mauvaise imbrication des balises


<balise A>
      <balise B>
      …
      </balise B>
</balise A>


<balise A>
      <balise B>
      …
      </balise A>
</balise B>

Structure de base d'une page HTML

Le code suivant correspond à la base d'une page web en HTML.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Titre de la page</title>
    </head>
 
    <body>
        <!-- Corps de la page -->
    </body>
</html>

• Le doctype : La première ligne s'appelle le doctype. Elle est indispensable car c'est elle qui indique qu'il s'agit bien d'une page web HTML.

• La balise <html> : C'est la balise principale de votre page. Elle englobe tout le contenu de votre page.

• L'en-tête <head> : Cette section donne des informations générales sur la page comme son titre, l'encodage… Les informations que contient l'en-tête ne sont pas affichées sur la page.

• Le corps <body> : C'est là que se trouve la partie principale de la page. Tout ce que nous écrirons ici sera affiché à l'écran.

• L'encodage (charset) : Cette balise indique l'encodage utilisé dans votre fichier .html. Il détermine comment les caractères spéciaux vont s'afficher (accents, idéogrammes chinois et japonais, caractères arabe, etc.).

Dans Notepad++, allez dans le menu Encodage > Encoder en UTF-8 (sans BOM) pour que votre fichier soit enregistré en UTF-8.

Insertion d'un commentaire : Un commentaire est une balise HTML avec une forme spéciale : <!– Ceci est un commentaire –>. Il peut se placer n'importe où dans votre code, il permet de se repérer.


A faire vous-même 1
Avant de créer votre première page HTML, vous devez définir le dossier et les sous-dossiers dans lesquels vous allez stocker tous vos fichiers.


1) Dans le dossier “Mes documents”, créez un dossier “ICN” dans lequel vous enregistrerez tous vos documents pour ICN ;
2) Dans le dossier “ICN” créez un dossier “HTML-CSS” dans lequel vous enregistrerez vos fichiers HTML et CSS ;
3) Dans le dossier “HTML-CSS” créez un dossier “images” dans lequel vous enregistrerez toutes vos images.


A faire vous-même 2 Nom du fichier : index.html
Ouvrir Notepad++, pour colorer le code afin de mieux se repérer, allez dans le menu Langage > H > HTML.
Saisir le code suivant :
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Ma première page Web</title>
   </head>
 
   <body>
      <p>Ceci est un paragraphe</p>
   </body>
</html>


Enregistrer le fichier dans le dossier “HTML–CSS” avec pour nom index.html.
Ouvrir dans l'explorateur de fichier le dossier “HTML–CSS” et faire un double-clic sur le fichier index.html.

Très important : Le code du fichier “index.html” correspond à la base d'une page web en HTML, vous pourrez repartir de ce fichier à chaque nouveau projet.



Je teste mes connaissances...

Clique sur l'image !

creation_d_un_site_internet_avec_html5_et_css3/creation_d_une_page_web_en_html.txt · Dernière modification: 10/07/2019 19:30 par Stéphane LAURENT