Création d’une page html – Sciences Numériques et Technologie

Fichier HTML

Tapez le code HTML ci-dessous dans un éditeur de texte comme notepad++.
Enregistrer le fichier au format html.
N’attendez pas d’avoir fini pour enregistrer votre fichier afin de bénéficier de la coloration syntaxique.
Ouvrir le fichier (clic droit) avec un navigateur pour visualiser la page web.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>HTML</title>
</head>
<body>
<p>Ma première page codée en HTML</p>
</body>
</html>

Mais l’indentation est recommandée pour rendre le code plus lisible.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8" />
    <title>HTML</title>
</head>
<body>
    <p>Ma première page codée en HTML</p>
</body>
</html>

L’indentation ne fait pas partie du langage comme en python.

Cette page a aussi été transférée vers un serveur web : cliquez ici

5.Ouvrez la page distante ci-dessus et comparer le code html avec celui de la page que vous avez créé.

pour voir le code source de la page faites un clic droit. Ensuite afficher le code source ou inspecter pour des informations plus complètes.

Ajout de style

Ajout de style dans un même fichier HTML

<!DOCTYPE html>
<html lang="fr">
   <head>
      <meta charset="utf-8"/>
      <title>HTML</title>
   </head>
   <body>
      <p>Ma première page codée en <b><font face="verdana" color="red" size="10">HTML</font></b></p>
   </body>
</html>

On souhaite réaliser la page web ci-dessous (capture)

<!DOCTYPE html>
<html lang="fr">
<head>

<meta charset="utf-8"/>
<title>HTML</title>
<style>
body{	
	font-family:Tahoma, Geneva, sans-serif;
    }

h1{ 	font-size:35px;
	color:orange;
  }

h2{
	font-size:25px;
	color:#444444;
}
</style>

</head>

<body>

	<header>		
	<h2>Histoire de l'internet et du web</h2>
	</header>
	
	<h1>1990</h1><br/>		
	<img src="https://www.rtflash.fr/sites/default/files/imagecache/format_article/tim_berners-lee_lance_la_campagne_fortheweb.jpg" alt="image Tim Berner Lee"/><br/>	
	<h2>Tim Berners Lee </h2>	
	<p>
		"J'ai tenté de faire du Web, une plate-forme universelle et neutre qui ne doit
		pas entrer en conflit avec du matériel spécifique, un logiciel, un réseau, un 
		langage, une culture, un handicap, ou encore des données spécifiques"<br/>
	<br/>
			
	<a href="https://fr.wikipedia.org/wiki/Tim_Berners-Lee">En savoir plus </a>
	<br/>
	<a href="https://www.youtube.com/watch?v=PbCG_BeL5dY">Vidéo</a>
	</p>		
	

</body>
</html>

Fichier HTML+ Fichier CSS

Séparation du style et du contenu

<html lang="fr">
<head>

<meta charset="utf-8"/>
<title>HTML & CSS</title>
<link rel="stylesheet" href="style001.css"/>
</head>
<body>
	<header>		
	<h2>Une date importante de l'histoire de l'internet et du web</h2>
	</header>
	
	<h1>1990</h1><br/>		
	<img src="https://www.rtflash.fr/sites/default/files/imagecache/format_article/tim_berners-lee_lance_la_campagne_fortheweb.jpg" alt="Tim Berners Lee "/><br/>	
	<h2>Tim Berners Lee </h2>	
	<p>
		"J'ai tenté de faire du Web, une plate-forme universelle et neutre qui ne doit
		pas entrer en conflit avec du matériel spécifique, un logiciel, un réseau, un 
		langage, une culture, un handicap, ou encore des données spécifiques"<br/>
	<br/>
			
	<a href="https://fr.wikipedia.org/wiki/Tim_Berners-Lee">Cliquer ICI </a>
	</p>		
	

</body>
</html>

body{
	margin:50;
	font-family:Tahoma, Geneva, sans-serif;
}

h1{
	font-size:35px;
	color:orange;
}
h2{
	font-size:25px;
	color:#555555;	
}

Réalisez votre mini site web

Exploitez ce que vous avez appris pour réaliser deux pages web liées entre elles et partageant la même feuille de style.

Sujet : celui de votre présentation

Vérifiez que les images utilisées sont libres de droit

Ce que vous avez appris est suffisant ,mais pour ceux qui souhaitent aller plus loin:

https://www.w3schools.com/html/

Laisser un commentaire Annuler la réponse