Pour coder plus vite tu peux apprendre a utiliser emmet pour html et des raccourcis clavier qui te faciliteront la vie. Certains dupliquent une ligne certains peuvent te permettre de deplacer une ligne ou toute ta sélection dans le code. J'ai utilisé sublime text mais actuellement je suis sur vscode donc je ne peux pas t'en donner car ce ne sont pas les meme raccourcis clavier mais tu peux regarder sur google.

Merci pour ta réponse zvheer.

Je rame avec l'installation et les plug-in de emmet.

Pas sur d'avoir la bonne version de sublime text Pourtant télécharger il y a peu de temps....

Je ne sais même pas si emmet est installé sur ma version..

Bonjour / bonsoir

si ta version est récente en général emmet est deja disponible essaie en ecrivant p*4{bonjour} suivi de la touche tab si sa marche c'est ce que tu as emmet sinon tu fais fait cntrl shift p tu ecris install package tu appuie sur install package ensuite quand le chamo s'affichera tu pourras ecrire emmet et sa installera.

Je te conseille aussi livereload c'est vraiment tres flemmard mais je trouve pratique.. 

@KimberlyBelrain

Bonjour, réponse dans votre sujet dédié https://openclassrooms.com/forum/sujet/police-12

Merci de ne pas créer de doublon.

bonjour, j'ai un blocage je n'arrive pas a incéré des photo est que vous pouvez m'aide ?

merci

Merci mes amis

Bonjour j'ai un petit problème avec l'exercice css du cv je n'arrive pas a mettre mon image de fond pouvez vous m'aider s'il vous plait?

  

@MorganeBar Bonjour, voir

https://developer.mozilla.org/fr/docs/Web/CSS/background

Bonjour, 

Il te faut voir avec le background-image :https://developer.mozilla.org/fr/docs/Web/CSS/background-image

bonjour j'ai une question une fois un projet livrer comment le client est sensé l'administrer ?exemple je développe un site pour un restaurent mais ensuite forcement le contenu du site va changer avec le temps . quelle outils je peux donner a mon client pour cela ? je sais pas si cest le bon forum pour ca mais on sais jamais merci.

Bonjour,

>> je sais pas si cest le bon forum pour ca

Pas exactement puisque cela ne concerne pas directement le cours HTML/CSS de ce site, tu aurais pu créer ton propre sujet dédié, mais je vais quand même y répondre.

Soit tu développes un back-end qui permet la modification des données en basse par le client, soit tu passes par un CMS auquel tu donnes les droits nécessaires pour que le client y modifie ce qu'il doit modifier.

-
Edité par AbcAbc6 5 décembre 2021 à 18:13:52

AbcAbc6 a écrit:

Bonjour,

>> je sais pas si cest le bon forum pour ca

Pas exactement puisque cela ne concerne pas directement le cours HTML/CSS de ce site, tu aurais pu créer ton propre sujet dédié, mais je vais quand même y répondre.

Soit tu développes un back-end qui permet la modification des données en basse par le client, soit tu passes par un CMS auquel tu donnes les droits nécessaires pour que le client y modifie ce qu'il doit modifier.

-super merci es que tu s'aurais m'orienter vers un tuto pour apprendre a le réaliser 
en back end ?

Edité par AbcAbc6 hier à 18:13

il y a plusieurs langages pour le backend php django avec python... recherche un peu sur google et cherche quelque chose qui ne te découragera pas pour debuter

>> -super merci es que tu s'aurais m'orienter vers un tuto pour apprendre a le réaliser en back end ?

Tu disposes de tous les cours sur le site à cette adresse https://openclassrooms.com/fr/courses

Pour le cours en PHP https://openclassrooms.com/fr/courses/918836-concevez-votre-site-web-avec-php-et-mysql

Comme le dit zvheer il est possible de faire le back-end dans différents langages.

Bonjour ,j'ai un probleme sur  la cession Insertion des images , ,l'emplacement de l'image devrait elle dans même dossier que le html ?Merci 

Bonjour.

L'emplacement de l'image peut etre n'importe où dans ton arborescence. L'essentiel étant de mettre le bon chemin vers l'image dans le html.

Exemple

index.html

dossier Css

-> index. css

dossier Images

-> mon image

// dans ce cas ci le chemin vers l'image a partir du fichier index.html sera images/monimage.png

-
Edité par zvheer 9 décembre 2021 à 10:10:23

bonjour j'ai un probleme je ne peux pas afficher ma photo a l'aide de notepad++ sur mon site web help pls

Bonsoir,

@totobobo7 notepad++ te sert à écrire du code qui une fois interpréter par le navigateur affichera quelque chose. Ce n'est pas notepad++ qui t'affichera quelque chose.

@totobobo7 et @CharlesJuniorBissielou Quel est le code que vous avez écrit (insérer sur le forum à l'aide du bouton code </>) et la hiérarchie de vos fichiers?

Si vous êtes sur Windows, avez vous affiché les extensions dans l'explorateur de fichier pour voir le nom complet et exacte de votre image.

-
Edité par AbcAbc6 16 décembre 2021 à 22:09:17

.

-
Edité par GODJESSYX 16 décembre 2021 à 23:33:09

oyo971 a écrit:

-
Edité par InèsNasr 22 décembre 2021 à 20:26:55

Bonjour,

Je suis actuellement le MOOC HTML/CSS, j'essaye de mettre en pratique le Flex mais je n'arrive pas à ne déplacer qu'un seul élément sur la gauche.

J'ai fait un CV fictif, tout est centré en colonne mais je voudrai qu'un idem soit à gauche.

J'ai relu le cours plusieurs fois, il me seble faire ce qu'il faut, ais ça ne fonctionne pas...

Pourriez vous m'aider ? je vous joins les codes HTML et CSS. est-il possible de basculer uniquement l'élément "nav" à gauche ?

Merci pour votre aide.

<!DOCTYPE html> 
<html>

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

	<div id="body">
	<body>
		<header>
		<div class="header">
		<h1> Claire P........ </h1>
			<p> 
				<a href="images/cvgrand.jpeg"><img src="images/cvmini.jpg" alt="photo d'identité" title="cliquer pour agrandir"/> </a>
			</p>
		</div>
		</header>

		<nav >
		<div class="nav">
				<h3>mes points forts</h3>
					<ul>
						<li>blablabla</li>
						<li>bliblibli</li>
					</ul>
				<h3>mes savoirs faire</h3>
					<ul> 
						<li> blobloblo</li>
						<li>blublublu</li>
					</ul>
			
		</div>
		</nav>
		

		<section>
		<div class="section">
		<h2>Mon expérience</h2>
		<p>
			<ul>
				<li> kjhfkhgdhdkdtk</li>
				<li> hjfkjyfkjfkjyfykfgjy </li>
				<li> hkgfkhdhkfjkfjhk</li>
			</ul>
		</p>
		<h2>Mes compétences</h2>
		<p>
			<ul>
				<li> jkhfkgfkjf <em>important</em> </li>
				<li> Lecture d'un bilan </li>
				<li> yfyfyufyuffffff</li>
			</ul>
		</p>
		<h2>Ma formation</h2>
		<p>
			<ul>
				<li> BAC+4</li>
				<li> jhjfkfkj </li>
				<li> jhfkyfuf </li>
				<li> Formation sur <a href="https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1605763-creez-des-apparences-dynamiques">openclassrooms.com</a></li>
			</ul>
		</p>
		</div>
		</section>

		<footer>
		<div class="footer">
			<h2>Mes hobbies</h2>
				<ul>
					<li>courses à pieds</li>
					<li>les voyages</li>
					<li>les randonnées</li>
					<li>la gastronomie</li>
				</ul>
		</div>
		</footer>
	</body>
	</div>
</html>

li
{
	color:royalblue;
	font-size: 1em;
}

a:visited
{
	color: rgb(222, 244, 95.69);
}

ul 
{
	list-style-position: inside;
}

@font-face{
	font-family: 'jakartasignature';
	src: url('jakartasignature.ttf'),
		url('jakartasignature.otf');

}

h1
{
	font-size: 2em;
	color: darkblue;
	font-family: 'jakartasignature';
}



h2
{
	color: darkblue;
	font-size: 1.5em;
	font-weight: bold;
	text-decoration: overline;

}

h2:hover
{
	color: red;
	text-decoration: underline;

}

h3
{
	color:  darkblue;
	font-size: 1,2em;
	font-weight: bold;
	text-decoration: underline;
}


em
{
	color: royalblue;
	font-weight: bold;
}


*
{
	font-family: Georgia, "Comic Sans MS", Arial, sans-serif;
}

body
{
	background: rgb(184, 185, 186);
	border : solid darkblue 5px;
	box-shadow: 5px 5px 5px darkblue;
	border-radius: 50px;
	text-align: center;
}

section
{
	border: solid darkblue 1px;
	
}

nav
{
	border: solid darkblue 1px;
}

header
{
	border: solid darkblue 1px;
}

footer
{
	border: solid darkblue 1px;
	
}

#body
{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;

}

.nav:nth-child(2)
{
	display: flex;
	align-self: flex-start;
}

-
Edité par ClairePourcelle 6 janvier 2022 à 10:08:13

Bonjour   ClairePourcelle ,

Sans voir votre code difficile de répondre correctement.  align-self peut être??

https://developer.mozilla.org/fr/docs/Web/CSS/align-self

bonjour ClairePourcelle, Merci d'utiliser le bouton code </> du forum pour l'insertion de votre code.

Utilisez le validateur pour corriger vos erreurs => https://validator.w3.org/#validate_by_input

Rien entre </head> et <body> tout comme rien entre </body> et </html>, les balises d'affichage doivent être dans le body et pas en dehors.

On ne place pas une liste dans un paragraphe qui n'accepte que du contenu phrasé.

D'un point de vue sémantique, le lien de la photo d'identité ne devrait pas être dans un paragraphe, ce n'est pas une portion d'un texte; Vous pouvez utiliser  <figure>  ce qui serrait plus sémantique.

Pour placer la navigation à droite soit vous la placer avant le header et faite flotter, soit utilisez align-self: flex-end;

Merci beaucoup pour les corrections et la réponse.

Cette fois ci mon code est passé au validateur. Il n' a plus d'erreur.

Cependant, je n'arrive pas à déplacer <nav> avec align-self.

Tant pis, je vais le faire avec float , j'aurai voulu comprendre mon erreur mais ça fait des heures que je cherche, je ne comprends pas.

Bonsoir, vus votre édit :

>> est-il possible de basculer uniquement l'élément "nav" à gauche ?

>> Cependant, je n'arrive pas à déplacer <nav> avec align-self.

            nav { 
                border: solid darkblue 1px;
                align-self: flex-start;
            }

Mais une navigation est sensée contenir des liens de navigation pas deux listes. Je ne vois pas de lien dans votre code.

@MathieuCaulfuty Merci d'utiliser l'outil d'insertion de code du forum, soit le bouton code </> de la barre d'outil.

Si l'image ne s'affiche pas c'est qu'elle ne s'appelle pas comme vous l'avez indiquée ou que son extension n'est pas celle indiquée ou que l'image ne ce trouve pas dans ce répertoire.

-
Edité par AbcAbc6 6 janvier 2022 à 16:35:10

Merci, sauf que l'image est placé dans le bon sous dossier et je l'ai bien nommé, je ne sais quoi faire.

<img src="photo_profil.jpg" alt="Photo de profil" />