Pour commencer, nous avons donc entamé la création de ce blog.
Ensuite, créer une première page html, minimum au départ, que nous enrichissons au fur et à mesure. Mais pour cela il faut tout d’abord préparer les photos (recadrage, résolution, retouches), ainsi que les dossiers et fichiers pour une bonne organisation. Nous avons également lié un fichier css que nous n’avons pas vraiment développé.
Voici donc à quoi ressemble notre première page:
<!doctype html>
<html lang= »fr »>
<head>
<meta charset= »utf-8″ />
<title>l’image et le web | galerie d’ architectures</title>
<meta name= »description » content= »Site d’entrainement à la préparation des images pour le web »/>
<link href= »css/style.css » rel= »stylesheet »/>
<!– exemple de style dans la page
<style>
h1{
color:red;
border-bottom: black dotter 4px;
}–>
</head>
<body>
<header>
<h1>L’image et le web</h1>
<h2>Site d’entrainement à la préparation des images pour le web</h2>
</header>
<nav>
<ul>
<li><a href= »architecture.html »>Architecture</a></li>
<li><a href= »portraits.html »>Portraits</a></li>
<li><a href= »pixelart.html »>Pixel Art</a></li>
<li><a href= »vecteurs.html »>Vecteurs</a></li>
<li><a href= »dessin.html »>Dessin</a></li>
<li><a href= »techniques.html »>Techeniques</a></li>
</ul>
</nav>
<main>
<h1>Architectures</h1>
<ul>
<li><a href= »images/arcitecture01.jpg »><img src= »images/arcitecture01_vignette.jpg » alt= »Architecture »/></a></li>
<li><a href= »images/architecture02.jpg »><img src= »images/architecture02_vignette.jpg » alt= »Architecture »/></a></li>
<li><a href= »images/fuste.jpg »><img src= »images/fuste_vignette.jpg » alt= »Fuste »/></a></li>
<li><a href= »images/mosque.jpg »><img src= »images/mosque_vignette.jpg »/></a></li>
</ul>
</main>
<footer>
<p>cos-rcf -2018-</p>
</footer>
</body>
</html>