<HTML/>

Les balises

Une balise a un nom (p, html, head, title, h1, a) et s'écrit entre les signes < et >. Les balises s'écrivent par paire pour agir sur ce qu'elles encadrent.

exemple :


<h1>Un petit texte</h1>

Création d'une page :

Pour créer une page il faut commencer par la balise html:

<html></html>

Ensuite on ajoute un debut de document qui contiendra le titre et un corps de document avec les balises suivantes : 


<html>
  <head>
    <meta charset="utf-8">
    <title> Mon titre </title>
  </head>
  <body>

  </body>
</html>

Créez un nouveau fichier avec un nom ne contenant pas d'espace et finissant par .html ensuite copier le texte ci-dessus dans ce fichier

Pour afficher quelque chose à l'écran, à partir de ce code, les nouvelles balises doivent être placées dans le body
(entre la balise ouvrante <body> et la balise fermante </body>

Les titres


<h1>Gros titre</h1>

<h2>Moins gros titre</h2>

Le texte

Vous pouvez écrire du texte dans une balise p

<p> mon joli texte </p>

Les liens

<a href="URL">Lien</a>

Pour préciser où se trouve la page à lire, on utilise l'attribut href 


Le CERN est l'inventeur du HTML, voici le <a href="http://info.cern.ch/">premier site WEB</a>.

Changer les couleurs

Pour changer la couleur du texte :


<p style="color: red;">Le texte en rouge</p>

<p style="color: #D490C6;">Le texte en mauve</p>

Changer la couleur de fond de la page

<body style="background: green;">

Fond de page en dégradé


<body style="background-image: linear-gradient(white, black);">

La balise image

Pour afficher une image il faut utiliser la balise img de la façon suivante : 

<img src="URL" />

L'attribut src permet de préciser où se trouve l'image

Pour changer la taille de l'image, on peut par exemple forcer sa largeur en ajoutant l'attribut style: 


<img style="width:500px;" src="http://urlDeLimage" />

Par exemple


<img style="width:30px;" src="images/favicon.png" /> Devoxx4Kids play with HTML

Ajouter une favicon

mettre dans la section head :


<link rel="icon" type="image/png" href="favicon.png" />

Pour aller plus loin, utiliser des services existants

Ajouter dans notre page, la localisation de notre atelier en utilisant Google Map

mettre dans la section head :


<script src="includes/gmap.js"/></script>

mettre dans la section body là où vous voulez mettre la carte:


<script>
	gmap("Square Galileo Galilei, Route de Meyrin 385, 1217 Meyrin, Suisse");
</script>

Quelques liens

[ Devoxx4Kids CH | Devoxx4Kids ]
[ Productions des enfants ]