Help! exo pratique 3 cours html

je patauge..

Sujet résolu

15 décembre 2017 à 18:38:33

Hello!

Je suis au niveau de l'exo pratique "structurer son cv" du cours Html et je rame un peu comme ce sont mes débuts dans ce domaine.

Pour résumer l'énoncé grosso modo : à gauche , insérer un liseret valeur en px , à droite mettre le contenu du cv avec à l'intérieur de gauche à droite les <section> mon exp, mes compétences , ma formation ( pr cette partie recommandée valeur relative en %)..j'ai pas mal galéré , essayé plusieurs choses , je suppose qu'il faut s'appuyer sur la flexbox donc j'ai mis de coté le float et a force de bidouiller j'arrive au code suivant que j'ai testé sur différents moteurs , visuellement çà ressemble à l'exemple donné dans l'énoncé mais j'ai l'impression d' avoir fait plus un bidouillage qu'un bon code. Quelqu'un pour m'éclairer sur ce que j'ai fait svp ?

Merci d'avance

<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8"/>
		<link rel="stylesheet" href="style.css" />
		<title>Mon CV</title>
	</head>


	<body>

		<div id="bloc_page">
<div id="sidebar"></div>

	<header>
		

	<h1>MAX DAVID</h1>

<p><em><div>Créatrice, sportive, exploratrice en route vers de nouveaux horizons!!</div></em></p>

<p>
	<div><a href ="img/Maxdraw.jpg"><img src="img/Maxdraw_mini.jpg" alt="Mon Travail" title="Cliquez à vos risques et périls!"/> </a></div>
</p>
	</header>


<div id="contenu">
<section>
	<h2>Mon expérience</h2>
	<ul>
		<li><b>2010 à 2017</b>: Directrice chez Happylife </li>
		<li><b>2006 à 2010</b>: Globetrotteuse chez On your way</li>
		<li><b>2002 à 2006</b>: Student to Hogwarts</li>
	</ul>
</section>

<section>
	<h2>Mes compétences</h2>
	<ul>
		<li>Buse Défenses contre les forces du mal</li>
		<li>Anglais</li>
		<li>Management et coaching</li>
		<li>Conception</li>
    </ul>
</section>

<section>
	<h2>Ma formation</h2>

  <p>Après moultes années dans le management et le coaching me voilà apprentie chez Openclassrooms. Quelle aventure!!</p>
</section>
</div>
</div>
 
 	</body>


</html>

@font-face{
	font-family: 'alice-regular';
	src: url('alice-regular-webfont.eot');
	src: url('alice-regular-webfont.eot?#iefix') format('embedded-opentype'),
		 url('alice-regular-webfont.woff') format('woff'),
		 url('alice-regular-webfont.ttf') format('truetype'),
		 url('alice-regular-webfont.svg#alice-regular') format('svg');
}



h1,h2
{
	font-family: 'alice-regular', Arial, serial;
}



h1
{
	text-shadow: 4px 4px 6px rgb(127,127,127);
}

h2
{
	text-align: center;
	border: 2px solid rgb(64,128,128);
	color: rgb(70,85,94);
}



body
{
	display:flex;
	height: 100%;
	margin-left: 20px;
	background: url("paper-951489.jpg") fixed no-repeat center;
}

img
{
	border-radius: 10px;
	box-shadow: 4px 4px 6px rgb(127,127,127);
}

em
{
	font-weight: bold;
}

h1,div
{
	text-align: center;
}



#sidebar
{
	position: absolute;
	width: 200px;
	height: 100%;
	background: url("background-1724650_1920.jpg") fixed no-repeat;
	margin-left: 0;
	border-radius: 15px/10px;

}

header
{
	margin-left: 200px;

}

#contenu
{
	display: flex;
	justify-content: center;
	align-items: baseline;
	margin-left: 200px;

}

section
{
	width:33%;
	text-align: justify;
}

Lamu

noopy360

15 décembre 2017 à 19:18:30

salut, il y a rien de vraiment grave :

<p><em><div>Créatrice, sportive, exploratrice en route vers de nouveaux horizons!!</div></em></p>

Les balises de types inline ne peuvent pas contenir des balises de types block [(<em> = inline) et (div = block)]

    <div><a href ="img/Maxdraw.jpg"><img src="img/Maxdraw_mini.jpg" alt="Mon Travail" title="Cliquez à vos risques et périls!"/> </a></div>

La balise <img /> ne posséde pas d'attribue title correction :

    <div><a href ="img/Maxdraw.jpg" title="Cliquez à vos risques et périls!"><img src="img/Maxdraw_mini.jpg" alt="Mon Travail" /> </a></div>

<li><b>2010 à 2017</b>: Directrice chez Happylife </li>

La balise <b> je ne suis pas sur quelle soit valide mais sinon utilise un <span> puis tu met en gras dans le CSS

Ton CSS j'ai rien a dire...

https://validator.w3.org/ / https://jigsaw.w3.org/css-validator/ / https://codepen.io/pen

V.Heurtault

15 décembre 2017 à 20:37:39

Merci pour ton retours , tu trouves que cela correspond à ce qui est demandé dans l'exo , je n'osais pas envoyer le TD parce que j'y ai mis du temps " la vie du débutant.."

Et si j'ai bien compris pour <img> c est surtout un mauvais emplacement du title?

Pour les <b> c est un conseil que l'on m'a donné au départ j'avais mis <strong> et au final , j'obtiens le même résultat comme cela

Thanks pour les conseils!

Lamu

Lokda

15 décembre 2017 à 22:06:18

lamu02 a écrit:

Pour les <b> c est un conseil que l'on m'a donné au départ j'avais mis <strong> et au final , j'obtiens le même résultat comme cela

Salut.

Le <b> (qui signifie bold, soit gras en français) est utilisable. Il sert à mettre en gras, pour attirer le regard. C'est uniquement visuel.

En revanche, le <strong> affiche en gras également, parce que les navigateurs le traduisent comme ça, mais il sert à signifier aux moteurs de recherche et autre que ce qui est entre les balises est important.

C'est comme cela que je l'ai compris.

V.Heurtault

15 décembre 2017 à 22:29:19

j'ai fais quelques modif' par rapport à ce que tu m'as dis sur ma balise"block" <div> placée dans inline<em> en positionnant <div id> ce qui me semble plus aisé pour manipuler le css par la suite. Je vous joinstout çà , est ce que cela vous parait cohérent et je me demandais en rapport avec ce TP que je dois envoyer et qui est noté si j'ai tout bien carré..ca me rassurerais

!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8"/>
		<link rel="stylesheet" href="style.css" />
		<title>Mon CV</title>
	</head>


	<body>

		<div id="bloc_page">
<div id="sidebar"></div>

	<header>
		

	<h1>MAX DAVID</h1>

<div id="intro">
<p><em>Créatrice, sportive, exploratrice en route vers de nouveaux horizons!!</em></p></div>

<p>
	<div id="foto">
		<a href ="img/Maxdraw.jpg" title="Cliquez à vos risques et périls!"><img src="img/Maxdraw_mini.jpg" alt="Mon Travail"/> </a></div>
</p>
	</header>


<div id="contenu">
<section>
	<h2>Mon expérience</h2>
	<ul>
		<li><b>2010 à 2017</b>: Directrice chez Happylife </li>
		<li><b>2006 à 2010</b>: Globetrotteuse chez On your way</li>
		<li><b>2002 à 2006</b>: Student to Hogwarts</li>
	</ul>
</section>

<section>
	<h2>Mes compétences</h2>
	<ul>
		<li>Buse Défenses contre les forces du mal</li>
		<li>Anglais</li>
		<li>Management et coaching</li>
		<li>Conception</li>
    </ul>
</section>

<section>
	<h2>Ma formation</h2>

  <p>Après moultes années dans le management et le coaching me voilà apprentie chez Openclassrooms. Quelle aventure!!</p>
</section>
</div>
</div>
 
 	</body>


</html>

@font-face{
	font-family: 'alice-regular';
	src: url('alice-regular-webfont.eot');
	src: url('alice-regular-webfont.eot?#iefix') format('embedded-opentype'),
		 url('alice-regular-webfont.woff') format('woff'),
		 url('alice-regular-webfont.ttf') format('truetype'),
		 url('alice-regular-webfont.svg#alice-regular') format('svg');
}



h1,h2
{
	font-family: 'alice-regular', Arial, serial;
}



h1
{
	text-shadow: 4px 4px 6px rgb(127,127,127);
}

h2
{
	text-align: center;
	border: 2px solid rgb(64,128,128);
	color: rgb(70,85,94);
}



body
{
	display:flex;
	height: 100%;
	margin-left: 20px;
	background: url("paper-951489.jpg") fixed no-repeat center;
}

img
{
	border-radius: 10px;
	box-shadow: 4px 4px 6px rgb(127,127,127);
}

em
{
	font-weight: bold;
}

h1,#intro,#foto
{
	text-align: center;
}



#sidebar
{
	position: absolute;
	width: 200px;
	height: 100%;
	background: url("background-1724650_1920.jpg") fixed no-repeat;
	margin-left: 0;
	border-radius: 15px/10px;

}

header
{
	margin-left: 200px;

}

#contenu
{
	display: flex;
	justify-content: center;
	align-items: baseline;
	margin-left: 200px;
	margin-top: 5%;
	
}

section
{
	width:33%;
	text-align: justify;
}

Lamu

Mewen_bzh

16 décembre 2017 à 18:05:40

C'est effectivement cela. Mais de nos jours il est préférable d'éviter l'utilisation des balises HTML qui génèrent du style CSS (par exemple les balises b ou center). Chacun son rôle : le HTML pour la structure et le CSS pour le rendu visuel.

Le mieux pour mettre en gras un texte est donc une span avec une classe qui est définie dans le CSS avec la propriété font-weight:bold.

Un autre avantage est que cela sera plus simple à maintenir. Imagine si un jour tu veux modifier ou supprimer tous les textes en gras de ton site. Si tu dois juste enlever des balises b sur une page ça va aller c'est sûr mais si ton site fait 10, 20, 30 ou 100 pages cela sera une toute autre histoire. ;)

Lokda a écrit:

lamu02 a écrit:

Pour les <b> c est un conseil que l'on m'a donné au départ j'avais mis <strong> et au final , j'obtiens le même résultat comme cela

Salut.

Le <b> (qui signifie bold, soit gras en français) est utilisable. Il sert à mettre en gras, pour attirer le regard. C'est uniquement visuel.

En revanche, le <strong> affiche en gras également, parce que les navigateurs le traduisent comme ça, mais il sert à signifier aux moteurs de recherche et autre que ce qui est entre les balises est important.

C'est comme cela que je l'ai compris.

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

V.Heurtault

16 décembre 2017 à 18:28:11

Salut, Mewen_bzh

Effectivement vu comme cela je comprends l'efficacité d'une span , merci pour ton explication

Lamu