Problème d'alignement de débutant

Résolu/Fermé

jxei148 Messages postés 5 Date d'inscription dimanche 17 février 2019 Statut Membre Dernière intervention 20 février 2019 - 18 févr. 2019 à 11:23
jxei148 Messages postés 5 Date d'inscription dimanche 17 février 2019 Statut Membre Dernière intervention 20 février 2019 - 20 févr. 2019 à 08:09

Bonjour,

Configuration: Windows / Chrome 72.0.3626.109

Bonjour, je débute en HTML et j'ai voulu faire un premier exercice mais je me heurte à un problème. Mon premier paragraphe et l'image qui va avec sont décalés vers la gauche par rapport au reste.
Je ne vois pas la raison. Pouvez vous m'aider ?
Le code est en dessous. Désolé de ne pas joindre le fichier mais pas possible sur ce forum.
Merci !

<html>
<head>
<meta charset="utf-8">
<title>Sauvegarder ses fichiers</title>
<style>
body{
background-color: #FF8000;
}
h1{
color:blue;
font-size:20px;
text-align: center;
}
h2{
color:blue;
font-size:14px;
text-align: left;
}
td{
border: 1px solid black;
}
table{
border-collapse: collapse;
}
td{
text-align:center;
}
</style>
</head>
<body>
<h1>SAUVEGARDER SES FICHIERS</h1>
<br>
<h2>SAUVEGARDE SUR LE CLOUD</h2>
<br>
<img src=HTML/images/cloud.jpg>
<br>
<ul>
<li>Google Drive</li>
<li>OneDrive</li>
<li>DropBox</li>
<br>
<h2>SYNCHRONISATION AVEC D'AUTRES MACHINES</h2>
<br>
<p>Quand on possède plusieurs ordinateurs, il est possible d'utiliser des logiciels de synchronisation qui permettent aussi la sauvegarde.</p>
<br>
<ol>
<li>Syncback</li>
<li>Groobax</li>
</ol>
<br>
<h2>SAUVEGARDE SUR SUPPORTS AMOVIBLES</h2
<br>
<table>
<tr>
<td>Clé USB</td>
<td>DVD</td>
<td>CARTE MÉMOIRE</td>
<td>DD EXTERNE</td>
</tr>
<tr>
<td><img src=HTML/images/cle_usb.jpg></td>
<td><img src=HTML/images/dvd.jpg></td>
<td><img src=HTML/images/cartememoire.jpg></td>
<td><img src=HTML/images/ddexterne.jpg></td>
</tr>

</table>

</body>
</html>

A voir également:

2 réponses

Réponse 1 / 2

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
18 févr. 2019 à 11:59

Salut

2 erreurs mais c est la premiere qui fait le decalage !

1 tu a oublie de fermer la balse <ul> </ul>

<ul> 
<li>Google Drive</li> 
<li>OneDrive</li> 
<li>DropBox</li> 
<br>

2 tu a oublie un > sur la balise de fermeture h2

<h2>SAUVEGARDE SUR SUPPORTS AMOVIBLES</h2 
<br>

+ mettre des alt aux images

a+

jxei148 Messages postés 5 Date d'inscription dimanche 17 février 2019 Statut Membre Dernière intervention 20 février 2019
18 févr. 2019 à 13:35

Merci beaucoup RAD ZONE ! Effectivement ça change tout. J'ai fait ça trop tard je voyais plus rien. MERCI !

Réponse 2 / 2

Tsubi
Modifié le 18 févr. 2019 à 12:46

Bonjour, attention à utiliser les balises de codes et si possible la coloration syntaxique afin que cotre message soit clair.

Qu'entendez vous par premier paragraphe? La balise HTML qui indique un paragraphe est

<p></p>

or il n'y a pas d'images avec ce premier paragraphe.

Vous parlez probablement du second en tête (H2 pour header/entête de niveau 2) avec 'SAUVEGARDE SUR LE CLOUD'.
Vous avez oublié de fermer votre liste non ordonnée , ce sont les autres qui sont décalés comme s'ils étaient inclus dans le <ul> non refermé et donc 'héritent' de la marge gauche par défaut de cet élément.
Si vous utilisez un éditeur de textes avec coloration syntaxique vous verrez plus facilement ce genre d'oubli.

Au passage il manque le DOCTYPE HTML5, l'attribut pour le texte alternatif des images.
La balise TABLE est réservée pour les données tabulaires et ne DOIT JAMAIS être utilisé pour des mises en pages.
idem pour BR il doit être évité d'utiliser cet élément pour ce genre d'utilisation car rajoute du texte à taper inutilement, alourdit le code en le rendant plus compliqué à lire et à modifier tandis que faire le décalage vertical entre 2 éléments en CSS (par ex. en modifiant la marge supérieure de l'élément dessous, la marge basse de l’élément du dessus ou autre) est réutilisable à l'infini en créant une classe adéquate et sépare bien la mise en page du contenu règle essentielle au delà de la simple recommandation.

Tsubi
Modifié le 18 févr. 2019 à 12:52

Attention ici aussi balise mal refermée!

<h2>SAUVEGARDE SUR SUPPORTS AMOVIBLES</h2

La v5 de HTML est plus permissive certes mais ce n'est pas une raison pour faire des erreurs qui ne seront pas toujours rattrapée par cette permissivité. On le voit pour la balise UL tandis que l'erreur a été corrigée malgré le manque d'une balise de fermeture correctement écrite. Certains fichiers nécessitent aussi une écriture XML où là c'est plus rigoureux, fermeture de balise pour les doubles, écriture avec slash pour les balises simples(ou auto fermantes) comme <br/> et non <br>. Juste en cas et pour éviter certaines erreurs de compatibilité la version non raccourcie n'est pas si terrible non plus et beaucoup plus claire à lire quand on revient sur son script.

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
18 févr. 2019 à 13:08

???? c est pas un cours sur html5 css3 ect qu il te demande ??
les personnes qui demande ce genre de questions sont des debutants si tu les noient sous des tonnes d informations (qui sont bonne j en conviens ) ils ne pigent rien a ce que tu leur dis et ca leurs paraient trop complique !
bon c est vrais j aurais du lui dire pour les tables mais a part ca
il corrigeront les problèmes de sémantique plus tard quand ils comprendront ce qu ils font au fur et a mesure de leurs progression !
en clair tes reponses sont bonne mais soit plus succinct et ne rentre pas trop dans les details quand tu vois que c est un debutant :-))

jxei148 Messages postés 5 Date d'inscription dimanche 17 février 2019 Statut Membre Dernière intervention 20 février 2019
18 févr. 2019 à 13:37

Merci pour ce cours :-) Je suis preneur de toutes les infos pertinentes.
Le débutant vous remercie beaucoup tous les deux !

Jxei148
18 févr. 2019 à 14:28

Juste une précision. La balise table je l'ai utilisée pour faire un tableau.... c'est le résultat obtenu.....Je comprends pas vos remarques à ce sujet.????

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
18 févr. 2019 à 17:00

c est que la tabulation ne doit jamais etre utiliser pour structurer une page ou une partie de page !

si ce que tu veux c est d avoir un tableau style exel pour presenter des données , ok !

si c est parce que c est plus facile de faire comme ca pour avoir un effet de tableau , non !

la tabulation pose plusieurs problemes
Les tableaux de mise en page diminuent l'accessibilité aux malvoyants

Les tableaux ne s'adaptent pas automatiquement ,ils sont dimensionnés en fonction de leur contenu par défaut !

mais bon donnée etant un terme vague a toi de voir ;-))
a+

Discussions similaires

FORMATION SAP DEBUTANT

supprimer la page d'alignement

reglage tete video sur magnetoscope

Comment désactiver l'alignement Grid

Formule magique excel??????