Partage

1er code HTML solo, avis avant de passer au CSS

Sujet résolu

Eroohtik

17 octobre 2017 à 16:07:00

Bonjour,

Suite au cour de Mathieu sur le HTML5 CSS3, j'ai codé mon premier site en HTML.

Je me suis basé sur celui-ci : http://www.os-templates.com/free-basic-html5-templates/basic-89

J'ai récupéré les images, supprimé tout le reste et j'ai commencé.

J'ai besoin d'un maximum de critique pour évoluer, alors merci d'avance

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" />
		<title>Mon premier site en HTML5/CSS3</title>
	</head>

	<body>
		<header>
			<div id="Site_titre">
				<h1>id Site_titre</h1>
			</div>
			<div id="Site_sous_titre">
				<h2>id Site_sous_titre</h2>
			</div>

			<nav>
				<ul>
					<li> <a href="#">nav ul li 1</a> </li>
					<li> <a href="#">nav ul li 2</a> </li>
					<li> <a href="#">nav ul li 3</a> </li>
					<li> <a href="#">nav ul li 4</a> </li>
				</ul>
			</nav>
		</header>

		<div id="Banniere">
			<a href="#"><img src="images/960x360.gif"></a>
		</div>

		<article>
			<div id="Article_1">
				<div id="Article_titre">
					<img src="images/32x32.gif" alt="Article_logo">
					<h1>id Article_1 id Article_titre h1</h1>
				</div>
				<div id="Article_texte">
					<p>id Article_texte Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
				</div>
				<div id="Article_read_more">
					<a href="#">Read more ...</a>
				</div>
			</div>

			<div id="Article_2">
				<div id="Article_titre">
					<img src="images/32x32.gif" alt="Article_logo">
					<h1>id Article_2 id Article_titre h1</h1>
				</div>
				<div id="Article_texte">
					<p>id Article_texte Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
				</div>
				<div id="Article_read_more">
					<a href="#">Read more ...</a>
				</div>
			</div>

			<div id="Article_3">
				<div id="Article_titre">
					<img src="images/32x32.gif" alt="Article_logo">
					<h1>id Article_3 id Article_titre h1</h1>
				</div>
				<div id="Article_texte">
					<p>id Article_texte Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
				</div>
				<div id="Article_read_more">
					<a href="#">Read more ...</a>
				</div>
			</div>

			<div id="Article_4">
				<div id="Article_titre">
					<img src="images/32x32.gif" alt="Article_logo">
					<h1>id Article_4 id Article_titre h1</h1>
				</div>
				<div id="Article_texte">
					<p>id Article_texte Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
				</div>
				<div id="Article_read_more">
					<a href="#">Read more ...</a>
				</div>
			</div>
		</article>

		<div  id="Work">
			<div id="Work_images">
				<div id="Work_1">
					<a href="#"><img src="images/290x180.gif"></a>
				</div>

				<div id="Work_2">
					<a href="#"><img src="images/290x180.gif"></a>
				</div>

				<div id="Work_3">
					<a href="#"><img src="images/290x180.gif"></a>
				</div>
			</div>

			<div id="Work_view_all">
				<a href="#">View all my works ...</a>
			</div>
		</div>

		<section>
			<div id="Article_grand">
				<div id="Article_grand_1">
					<div id="Article_grand_image">
						<img src="images/180x150.gif">
					</div>
					<div id="Article_grand_titre">
						<h1>id Article_grand_titre h1</h1>
					</div>
					<div id="Article_grand_texte">
						<p>id Article_grand_texte p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
					</div>
					<div id="Article_grand_read_more">
						<a href="#">Read more ...</a>
					</div>
				</div>

				<div id="Article_grand_2">
					<div id="Article_grand_image">
						<img src="images/180x150.gif">
					</div>
					<div id="Article_grand_titre">
						<h1>id Article_grand_titre h1</h1>
					</div>
					<div id="Article_grand_texte">
						<p>id Article_grand_texte p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
					</div>
					<div id="Article_grand_read_more">
						<a href="#">Read more ...</a>
					</div>
				</div>
			</div>

			<div id="Categories">
				<ul>
					<li> <a href="#">Categories ul li 1</a> </li>
					<li> <a href="#">Categories ul li 2</a> </li>
					<li> <a href="#">Categories ul li 3</a> </li>
					<li> <a href="#">Categories ul li 4</a> </li>
					<li> <a href="#">Categories ul li 5</a> </li>
					<li> <a href="#">Categories ul li 6</a> </li>
					<li> <a href="#">Categories ul li 7</a> </li>
					<li> <a href="#">Categories ul li 8</a> </li>
					<li> <a href="#">Categories ul li 9</a> </li>
					<li> <a href="#">Categories ul li 10</a> </li>
				</ul>
			</div>
		</section>

		<footer>
			Copyright © 2017 - All Rights Reserved
		</footer>
	</body>
	
</html>

Mewen_bzh

17 octobre 2017 à 16:25:00

Bonjour,

Je vois quelques soucis sémantiques :

- ta balise <article> englobe plusieurs divs qui ont des id du type article_1, article_2,... Ces derniers devraient être autant d'articles et être regroupés dans une <section>

- <div id="Categories"> devrait être une <nav>

Sauf besoin impérieux, évite de multiplier les div. Par exemple quel besoin t'oblige à mettre ton <h1> dans une <div> ? Et le <h2> ? Et certains liens ?

Enfin ne laisse pas d'espace entre tes <li> et tes <a>.

Ah et puis évidemment il manque les alt sur les images et les titles sur les liens

-
Edité par Mewen_bzh 17 octobre 2017 à 16:26:55

Je ne réponds pas aux messages privés.

MrChampy

17 octobre 2017 à 16:25:36

Salut,

Déjà, enlève tous ces id, mets des classes à la place, les id c'est pour les ancres.

Ensuite, pourquoi des article avec des div="article" et pas des section avec des article class="ta-classe" ? Niveau sémantique c'est mieux. De manière générale tu as des div partout je trouve de toute façon, ce serait (je pense) à revoir.

Ensuite pour ta nav tu n'est pas obligé de faire des ul / li, tu peux mettre tes a dedans directement, mais ça reste moins grave que le reste.

Aussi, il te manque des métas (bon certaines tu peux les mettre après), des balises alt, tu peux remplacer "..." par …

Pour l'instant c'est les premiers trucs que je vois.

Voila

Eroohtik

17 octobre 2017 à 22:12:04

Merci @Mewen_bzh et @MrChampy pour vos critiques !

Voici la version mise à jour.

Y a t-il encore trop de div? J'en avais mis pas mal car je pensais qu'il aurait été plus simple d'organiser tout ça par la suite avec Flexbox.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" />
		<title>Mon premier site en HTML5/CSS</title>
	</head>

	<body>
		<header>
			<h1>id Site_titre</h1>
			<h2>id Site_sous_titre</h2>

			<nav class="Site_menu">
				<a href="#" title="Menu1">nav ul li 1</a>
				<a href="#" title="Menu2">nav ul li 2</a>
				<a href="#" title="Menu3">nav ul li 3</a>
				<a href="#" title="Menu4">nav ul li 4</a>
			</nav>
		</header>

		<img src="images/960x360.gif" alt="Banniere">

		<section class="Article">
			<article class="Article_1">
				<div class="Article_titre">
					<img src="images/32x32.gif" alt="Article_logo">
					<h1>id Article_1 id Article_titre h1</h1>
				</div>
					<p>id Article_texte Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
					<a href="#" title="Read_more">Read more &hellip;</a>
			</article>

			<article class="Article_2">
				<div class="Article_titre">
					<img src="images/32x32.gif" alt="Article_logo">
					<h1>id Article_2 id Article_titre h1</h1>
				</div>
					<p>id Article_texte Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
					<a href="#" title="Read_more">Read more &hellip;</a>
			</article>

			<article class="Article_3">
				<div class="Article_titre">
					<img src="images/32x32.gif" alt="Article_logo">
					<h1>id Article_3 id Article_titre h1</h1>
				</div>
					<p>id Article_texte Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
					<a href="#" title="Read_more">Read more &hellip;</a>
			</article>

			<article class="Article_4">
				<div class="Article_titre">
					<img src="images/32x32.gif" alt="Article_logo">
					<h1>id Article_4 id Article_titre h1</h1>
				</div>
					<p>id Article_texte Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
				</div>
					<a href="#" title="Read_more">Read more &hellip;</a>
			</article>
		</section>

		<section class="Work">
			<div class="Work_images">
				<a href="#" title="Work1"><img src="images/290x180.gif" alt="Image_work1"></a>
				<a href="#" title="Work2"><img src="images/290x180.gif" alt="Image_work2"></a>
				<a href="#" title="Work3"><img src="images/290x180.gif" alt="Image_work3"></a>
			</div>
				<a href="#" title="View_all_works">View all my works &hellip;</a>
		</section>

		<section class="Article_Categories">
			<div class="Article_grand_1">
				<img src="images/180x150.gif" alt="Image_grand_article1">
				<h1>id Article_grand_titre h1</h1>
				<p>id Article_grand_texte p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
				<a href="#" title="Read_more">Read more &hellip;</a>
			</div>

			<div class="Article_grand_2">
				<img src="images/180x150.gif" alt="Image_grand_article1">
				<h1>id Article_grand_titre h1</h1>
				<p>id Article_grand_texte p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
				<a href="#" title="Read_more">Read more &hellip;</a>
			</div>

			<nav class="Categories">
				<a href="#" title="Categorie1">Categories ul li 1</a>
				<a href="#" title="Categorie2">Categories ul li 2</a>
				<a href="#" title="Categorie3">Categories ul li 3</a>
				<a href="#" title="Categorie4">Categories ul li 4</a>
				<a href="#" title="Categorie5">Categories ul li 5</a>
				<a href="#" title="Categorie6">Categories ul li 6</a>
				<a href="#" title="Categorie7">Categories ul li 7</a>
				<a href="#" title="Categorie8">Categories ul li 8</a>
				<a href="#" title="Categorie9">Categories ul li 9</a>
				<a href="#" title="Categorie10">Categories ul li 10</a>
			</nav>
		</section>

		<footer>
			Copyright © 2017 - All Rights Reserved
		</footer>
	</body>

</html>

MrChampy

18 octobre 2017 à 9:23:38

Salut,

C'est déjà mieux. Après tu te rendras compte de tes erreurs (ou pas) quand tu feras ton CSS aussi

Mewen_bzh

18 octobre 2017 à 9:32:02

Ah tiens je viens de voir que tu as plusieurs h1 dans ta page. Attention un seul h1 par page, les sous-titres en h2.

Attention, sauf erreur de ma part, à la ligne 59 tu fermes une div sans l'avoir ouverte avant. C'est probablement une coquille qui reste de tes modifications.

Je risque également de paraître sectaire mais tes nav sont une liste de liens donc pour moi tu ne peux pas te passer des la structure nav >ul > li conformément aux spécifications du HTML5 : https://www.w3.org/TR/html51/sections.html#the-nav-element

Je ne réponds pas aux messages privés.

Lamecarlate

18 octobre 2017 à 9:56:10

Bonjour,

> Attention un seul h1 par page

C'est faux, désolée. Il n'y absolument aucune restriction officielle. Lire https://www.w3.org/TR/html/sections.html#headings-and-sections

> Les sous-titres en h2

Idem.

h2–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.

Même source.

Et sinon

A nav element doesn’t have to contain a list

Source : https://www.w3.org/TR/html51/sections.html#the-nav-element (exemple 11)

On peut considérer une navigation comme une liste de liens, ou pas. Dans le cas d'un menu déroulant, oui, utiliser une liste imbriquée sera pertinent, et pratique, mais sinon, ce n'est pas obligé.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

MrChampy

18 octobre 2017 à 10:37:46

+3 pour ma VDD.

Eroohtik

18 octobre 2017 à 21:05:40

Ok merci bien ! Je vais modifier tout ça et passer au CSS !

L-N

18 octobre 2017 à 21:23:42

Pour le css, si tu veux j'ai fais une série de vidéos qui te permet d'apprendre tout ça apprendre le html5 et le css3

Eroohtik

22 octobre 2017 à 0:29:15

Bonsoir !

Je reviens vers vous car je bute sur le CSS au niveau du header.

En gros le background du header fait toute la page et les éléments du header (Titre, ss titre et nav) ne doivent pas dépasser 960px.

Je n'arrive qu'a faire l'un au l'autre ...

Voici le 1er cas CSS

body
{
    font-family: Georgia, "Times New Roman", Times, serif;
    width: 960px;
    margin: auto;
}

header
{
    background-color: rgb(54,54,54);
    color: #C0BAB6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h1
{
	font-size: 1.8em;
	margin-bottom: 0;
	margin-top: 20px;
}

header h2
{
	font-size: 0.7em;
	margin-top: 0;
	margin-bottom: 40px;
}

nav
{
    background-color: #232323;
}

nav ul
{
	text-transform: uppercase;
    list-style-type: none;
    display: flex;
    margin-right: 10px;
}

nav li
{
    margin-right: 30px;
}

nav a
{
    font-size: 0.8em;
    color: #C0BAB6;
    text-decoration: none;
}

nav a:hover
{
    color: orange;
}

.Banniere
{
    display: block;
    margin: auto;
}

.Bannierediv
{
	margin-top: 30px;
}

Voici le 2nd cas CSS:

body
{
    font-family: Georgia, "Times New Roman", Times, serif;
}

header
{
    background-color: rgb(54,54,54);
    color: #C0BAB6;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

header h1
{
	font-size: 1.8em;
	margin-bottom: 0;
	margin-top: 20px;
}

header h2
{
	font-size: 0.7em;
	margin-top: 0;
	margin-bottom: 40px;
}

nav
{
    background-color: #232323;
}

nav ul
{
	text-transform: uppercase;
    list-style-type: none;
    display: flex;
    margin-right: 10px;
}

nav li
{
    margin-right: 30px;
}

nav a
{
    font-size: 0.8em;
    color: #C0BAB6;
    text-decoration: none;
}

nav a:hover
{
    color: orange;
}

.Banniere
{
    display: block;
    margin: auto;
}

.Bannierediv
{
	margin-top: 30px;
}

Et voici mon HTML actuel

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" />
		<title>Mon premier site en HTML5/CSS</title>
	</head>

	<body>
		<header>
			<div class="Titre">
				<h1>Mon premier site</h1>
				<h2>Entièrement codé en HTML5 / CSS3</h2>
			</div>	

			<nav class="Menu">
				<ul>
					<li><a href="#" title="Menu1">Menu1</a></li>
					<li><a href="#" title="Menu2">Menu2</a></li>
					<li><a href="#" title="Menu3">Menu3</a></li>
					<li><a href="#" title="Menu4">Menu4</a></li>
				</ul>
			</nav>
		</header>

		<div class="Bannierediv">
			<img src="images/960x360.gif" alt="Banniere" class="Banniere">
		</div>

		<section class="Article">
			<article class="Article_1">
				<div class="Article_titre">
					<img src="images/32x32.gif" alt="Article_logo">
					<h2>id Article_1 id Article_titre h2</h2>
				</div>
					<p>id Article_texte Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
					<a href="#" title="Read_more">Read more &hellip;</a>
			</article>

			<article class="Article_2">
				<div class="Article_titre">
					<img src="images/32x32.gif" alt="Article_logo">
					<h2>id Article_2 id Article_titre h2</h2>
				</div>
					<p>id Article_texte Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
					<a href="#" title="Read_more">Read more &hellip;</a>
			</article>

			<article class="Article_3">
				<div class="Article_titre">
					<img src="images/32x32.gif" alt="Article_logo">
					<h2>id Article_3 id Article_titre h2</h2>
				</div>
					<p>id Article_texte Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
					<a href="#" title="Read_more">Read more &hellip;</a>
			</article>

			<article class="Article_4">
				<div class="Article_titre">
					<img src="images/32x32.gif" alt="Article_logo">
					<h2>id Article_4 id Article_titre h2</h2>
				</div>
					<p>id Article_texte Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
					<a href="#" title="Read_more">Read more &hellip;</a>
			</article>
		</section>

		<section class="Work">
			<div class="Work_images">
				<a href="#" title="Work1"><img src="images/290x180.gif" alt="Image_work1"></a>
				<a href="#" title="Work2"><img src="images/290x180.gif" alt="Image_work2"></a>
				<a href="#" title="Work3"><img src="images/290x180.gif" alt="Image_work3"></a>
			</div>
				<a href="#" title="View_all_works">View all my works &hellip;</a>
		</section>

		<section class="Article_Categories">
			<div class="Article_grand_1">
				<img src="images/180x150.gif" alt="Image_grand_article1">
				<h2>id Article_grand_titre h2</h2>
				<p>id Article_grand_texte p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
				<a href="#" title="Read_more">Read more &hellip;</a>
			</div>

			<div class="Article_grand_2">
				<img src="images/180x150.gif" alt="Image_grand_article1">
				<h2>id Article_grand_titre h2</h2>
				<p>id Article_grand_texte p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
				<a href="#" title="Read_more">Read more &hellip;</a>
			</div>

			<nav class="Categories">
				<ul>
					<li><a href="#" title="Categorie1">Categories ul li 1</a></li>
					<li><a href="#" title="Categorie2">Categories ul li 2</a></li>
					<li><a href="#" title="Categorie3">Categories ul li 3</a></li>
					<li><a href="#" title="Categorie4">Categories ul li 4</a></li>
					<li><a href="#" title="Categorie5">Categories ul li 5</a></li>
					<li><a href="#" title="Categorie6">Categories ul li 6</a></li>
					<li><a href="#" title="Categorie7">Categories ul li 7</a></li>
					<li><a href="#" title="Categorie8">Categories ul li 8</a></li>
					<li><a href="#" title="Categorie9">Categories ul li 9</a></li>
					<li><a href="#" title="Categorie10">Categories ul li 10</a></li>
				</ul>
			</nav>
		</section>

		<footer>
			Copyright © 2017 - All Rights Reserved
		</footer>
	</body>

</html>

Lamecarlate

22 octobre 2017 à 7:12:26

Il te suffit de créer une div intermédiaire entre ton header et son contenu, et c'est elle que tu cibleras pour la limiter en largeur.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Eroohtik

22 octobre 2017 à 10:58:51

Lamecarlate a écrit:

Il te suffit de créer une div intermédiaire entre ton header et son contenu, et c'est elle que tu cibleras pour la limiter en largeur.

Ca parait logique en plus ... C'est good ça marche, merci!

Lamecarlate

22 octobre 2017 à 17:09:51

Super

Pense à marquer ton sujet comme résolu !

Pas d'aide concernant le code par MP, le forum est là pour ça :)