Voir le fichier

Résultat du code :

L’image doit être stocké dans le dossier racine du html, en jpg ou png.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>La tomate française</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
@charset "UTF-8";
/* CSS Document */

h1 {
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: red;
	font-size: 40pt;
	margin: 0px;
}
h2 {
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color :black;
	font-size: 26pt;
	margin-top: -2px;
}
p {
	width: 70%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 14pt;
	margin-top: -20px;
	line-height: 150%;
}
hr {
	border: 2px solid black;
}
.produitA {
	float: left;
}

button {
	background-color: darkorange;
	border: 0px;
	padding-right: 15px;
	padding-left: 15px;
	border-radius: 15px;
	font-family: Arial Black, sans-serif;
	font-size: 20pt;
	color: white;
	cursor: pointer;
}
a {
	color:black;
}
	</style>
</head>
<body>
	<header><h1>Produit du jour</h1></header>
	<hr>
	<img class="produitA" src="image/tomate-200x200.jpg" />
	<h2>Production française.</h2>
		<p>Crues ou cuites, en purée, séchées, cuisinées ou nature, les tomates offrent un incroyable éventail de saveurs et de couleurs. Mais pour ne pas faire d’erreur, il faut tout d’abord bien les choisir ; voici quelques astuces et conseils pour préserver toute la saveur des produits.</p>
	
	<a href="https://www.tomates-de-france.com/les-tomates/les-gouts-de-la-tomate/">
	<button>Cliquez pour goûter</button>
	</a> 
	<br><br><br>
	<breacrumb class="chemin"><a href="https://www.tomates-de-france.com/les-tomates/les-gouts-de-la-tomate/">pagesinformations>latomate>lesitedelatomate>produitfrançais</a></breacrumb>
</body>
</html>