Ma première page web
La structure de base
Comme on l'a déjà vu il faut au minimum avoir :
<html>
<head>
<meta charset="utf-8">
<title> ma première page web</title>
</head>
<body>
</body>
</html>
Il faut aussi un éditeur, pour pouvoir écrire ces lignes...
Bien qu'un simple bloc note suffise, il existe des éditeurs de texte qui proposent une coloration de la syntaxe, et même de l'auto-complétion...(Notepad++, Brackets et d'autres...)
Nous pouvons aussi le faire en ligne, des sites proposent de composer notre page web avec un aperçu en direct...
Copions ces quelques lignes de code dans l'éditeur choisi.
Enregistrons la page sous le nom : index.html (par exemple)
Et si nous regardons le résultat ! une page blanche...
C'est normal, car il n'y a rien à afficher, à part "ma première page web" dans l'onglet de navigation
Affichons l'incontournable "Hello World" dans notre page avec l'élément paragraphe.
<html>
<head>
<meta charset="utf-8">
<title> ma première page web</title>
</head>
<body>
<p> Hello World </p>
</body>
</html>
Un titre pour notre page :
l'élément h1 permet d'écrire avec une grande taille le texte qu'il contient, utilisons également un attribut pour centrer le texte
<html>
<head>
<meta charset="utf-8">
<title> ma première page web</title>
</head>
<body>
<p> Hello World </p>
<h1 align="center"> Bienvenue sur ma première page web </h1>
</body>
</html>
Les attributs d'alignements sont ( right, left, center, justify).
Les éléments
h1, h2, h3: donnent des textes de tailles différentes ( à tester )
Ce serait mieux si ce titre était en rouge :
C'est l'attribut color de l'élément font qui permet cela :
<font color="red"> ....</font>
<html>
<head>
<meta charset="utf-8">
<title> ma première page web</title>
</head>
<body>
<p> Hello World </p>
<h1 align="center"><font color="red"> Bienvenue sur ma première page web </font> </h1>
</body>
</html>
Pour les couleurs, on utilise les couleurs définies en hexadécimal (#FF0000) pour du rouge ou définies par leurs noms, voir sur le web
L'élément font possède d'autres attributs ( color , face, et size )
Essayez ceci :
<html>
<head>
<meta charset="utf-8">
<title> ma première page web</title>
</head>
<body>
<p> Hello World </p>
<h1 align="center"><font color="red"> Bienvenue sur ma première page web </font> </h1>
<p> <font face="Comic Sans MS" color="DarkKhaki" size="4"> Ceci est un texte avec une police Comic, une couleur "DarkKhaki" et une taille de 4 </font></p>
</body>
</html>
Écrivons un texte un peu plus long :
<html>
<head>
<meta charset="utf-8">
<title> ma première page web</title>
</head>
<body>
<p> Hello World </p>
<h1 align="center"><font color="red"> Bienvenue sur ma première page web </font> </h1>
<p> <font face="Comic Sans MS" color="DarkKhaki" size="4"> Ceci est un texte avec une police Comic, une couleur "DarkKhaki" et une taille de 4 </font></p>
<p>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.
</p>
</body>
</html>
Ce texte s'est écrit sur une seule ligne...
Si nous voulons faire en sorte qu'il s'écrive sur plusieurs lignes, nous devons le préciser avec l'élément br
<html>
<head>
<meta charset="utf-8">
<title> ma première page web</title>
</head>
<body>
<p> Hello World </p>
<h1 align="center"><font color="red"> Bienvenue sur ma première page web </font> </h1>
<p> <font face="Comic Sans MS" color="DarkKhaki" size="4"> Ceci est un texte avec une police Comic, une couleur "DarkKhaki" et une taille de 4 </font></p>
<p>L'HyperText Markup Language, généralement abrégé HTML, est le langage de balisage conçu pour représenter les pages web.<br> C'est un langage permettant d'écrire de l'hypertexte, d'où son nom.
</p>
</body>
</html>
Faites en sorte que ce nouveau texte soit en vert.
Insérer une image : Cela se fait avec l'élément img
Il il y deux méthodes, soit nous avons l'image dans un dossier se trouvant au même niveau que notre page web ( cela se nomme la 'racine' du site ) soit nous avons son adresse sur le web.
<img src="image/nom" alt =" description de l'image" > ou <img src="URL de l'image" alt =" description de l'image" >
<html>
<head>
<meta charset="utf-8">
<title> ma première page web</title>
</head>
<body>
<p> Hello World </p>
<h1 align="center"><font color="red"> Bienvenue sur ma première page web </font> </h1>
<p> <font face="Comic Sans MS" color="DarkKhaki" size="4"> Ceci est un texte avec une police Comic, une couleur "DarkKhaki" et une taille de 4 </font></p>
<p>L'HyperText Markup Language, généralement abrégé HTML, est le langage de balisage conçu pour représenter les pages web.<br> C'est un langage permettant d'écrire de l'hypertexte, d'où son nom.
</p>
<img src="http://agarioskins.com/submitted/useruploads/chozo-mj-tux-gandalf-le-gris.png" alt= "mon tux préféré" width="200px" height="200px"><br>
</body>
</html>
L'avantage de l'URL : ne pas avoir à stocker les images
Les inconvénients : l'URL peut être particulièrement longue... et l'image n'apparaîtra que si elle existe encore....
Imaginons que nous ayons un dossier image, qui contient l'image du tux sous le nom 'montux.png', à la racine de notre page web, l'instruction sera alors :
<img src="image/montux.png" alt= "mon tux préféré" width="200px" height="200px"><br>
Remarquez au passage, les attributs width et height qui permettent de ....
Un lien vers une autre ressource :
Pour faire un lien on utilise l'élément a dont la structure est :
<a href="URL de la ressource" > texte à afficher qui indique le lien </a>
Faites un lien vers le site du lycée
Liste à puces
Testez le code ci-dessous :
<html>
<head>
<meta charset="utf-8">
<title> ma première page web</title>
</head>
<body>
<p> Hello World </p>
<h1 align="center"><font color="red"> Bienvenue sur ma première page web </font> </h1>
<p> <font face="Comic Sans MS" color="DarkKhaki" size="4"> Ceci est un texte avec une police Comic, une couleur "DarkKhaki" et une taille de 4 </font></p>
<p>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.
</p>
<ul>
<li> niveau 1 </li>
<li> niveau 2 </li>
<li> niveau 3 </li>
</ul>
</body>
</html>
Liste numérotées
Remplacez
<ul>par<ol>et donc</ul>par</ol>
Une couleur de fond
C'est un attribut de l'élément body : bgcolor="nom de la couleur"
Essayez ceci :
<html>
<head>
<meta charset="utf-8">
<title> ma première page web</title>
</head>
<body bgcolor="PapayaWhip">
<p> Hello World </p>
<h1 align="center"><font color="red"> Bienvenue sur ma première page web </font> </h1>
<p> <font face="Comic Sans MS" color="DarkKhaki" size="4"> Ceci est un texte avec une police Comic, une couleur "DarkKhaki" et une taille de 4 </font></p>
<p>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.
</p>
<ul>
<li> niveau 1 </li>
<li> niveau 2 </li>
<li> niveau 3 </li>
</ul>
</body>
</html>
Une image de fond
C'est un attribut de l'élément body : background="URL de l'image"
Testez une image de fond et attention aux dimensions....
Méthode : Les tableaux
Les tableaux sont très utiles pour des affichages structurés d'informations.
Avec le développement des services sur le web, il est devenu assez simple de faire un tableau en html.
Sur ce site (par exemple)
Vous aller créer un tableau de votre emploi du temps de la semaine (le vrai ou celui que vous imaginerez), puis vous collerez le code obtenu dans votre page web :
