Bonjour à tous, j'ai un devoir en HTML à rendre pour demain sauf que nous avons du travailler vite dessus donc je n'ai pas beaucoup de pratique...
Je me demandais comment je fais pour mettre une image qui prenne toute la place sur mon site ?
Une fois que c'est fait, j'aimerais créer un bandeau blanc au milieu du site pour que je puisse y entrer mon texte (et éviter le débordement du texte quand je réduis ma fenêtre si possible ?)
Et une dernière question, j'aimerais créer une petite bulle "anecdotes" pour pouvoir y insérer mon texte, comment dois-je procéder ?
Montres nous du code que tu as déjà fait pour ça, car sans code on ne peut pas estimer ton niveau de connaissance sur le sujet et par conséquent il va nous être difficile de pouvoir t'aider correctement.
- Edité par Lartak 26 mars 2020 à 18:29:24
Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="stylePrincipal.css" />
<title>Blog - Accueil</title>
</head>
<body>
<div data-role="page">
<div data-role="header">
<p>Bienvenue sur mon blog consacré aux voyages !</br>En 2016, ma famille, y compris mes grands parents maternels, et moi sommes partis au Viêtnam, le pays d'origine de mon père !</br> Nous y sommes restés deux semaines avec notre guide français, Gérard</p>
<h1>Sommaire de mon voyage dans le pays du Dragon :</h1>
</div>
<div data-role="content">
<p>Dans ce tableau, vous pouvez voir les étapes du voyages par jour et par lieu :</p>
<center><table border="1" style="text-align:center">
<tr>
<td></td>
<td>Jour 1</td>
<td>Jour 2</td>
<td>Jour 3</td>
<td>Jour 4</td>
<td>Jour 5</td>
<td>Jour 6</td>
<td>Jour 7</td>
<td>Jour 8</td>
<td>Jour 9</td>
<td>Jour 10</td>
<td>Jour 11</td>
<td>Jour 12</td>
<td>Jour 13</td>
<td>Jour 14</td>
<td>Jour 15</td>
<td>Jour 16</td>
<td>Jour 17</td>
</tr>
<tr>
<td><a target="_blank" href="https://www.google.com/maps/place/Paris-Charles+De+Gaulle/@49.0096906,2.5457305,17z/data=!3m1!4b1!4m5!3m4!1s0x47e63e038e4ccf5b:0x42be0982f5ba62c!8m2!3d49.0096906!4d2.5479245" title="CHARLES DE GAULLE"> Aéroport CDG, Paris</a></td>
<td> X </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>X</td>
</tr>
<tr>
<td><a target="_blank" href="https://www.google.com/maps/place/Hano%C3%AF,+District+de+Hoan+Kiem,+Hano%C3%AF,+Vietnam/@21.0227387,105.8194112,14z/data=!3m1!4b1!4m5!3m4!1s0x3135ab9bd9861ca1:0xe7887f7b72ca17a9!8m2!3d21.0277644!4d105.8341598" title="Capitale du Viêtnam">Hanoï et ses alentours</td>
<td></td>
<td colspan="2">X</td>
<td></td>
<td></td>
<td>X</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="5">X</td>
<td></td>
</tr>
<tr>
<td><a target="_blank" href="https://www.google.com/maps/place/Baie+de+H%E1%BA%A1+Long/@20.843451,107.0794169,12z/data=!3m1!4b1!4m5!3m4!1s0x314a5796518cee87:0x55c6b0bcc85478db!8m2!3d20.9100512!4d107.1839024" title="Capitale du Viêtnam">La Baie de Hạ Long</td>
<td></td>
<td></td>
<td></td>
<td colspan="2">X</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a target="_blank" href="https://www.google.com/maps/place/Ngh%C4%A9a+L%E1%BB%99,+Y%C3%AAn+B%C3%A1i,+Vietnam/@21.598859,104.4738435,14z/data=!3m1!4b1!4m5!3m4!1s0x3133162e7fd1eaa7:0xe15929231f24dada!8m2!3d21.6018769!4d104.5062651" title="Ville en montagne">Nghĩa Lộ et ses alentours</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="5">X</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table></center>
</div>
<div data-role="footer">
<p>
<a href="PagePrincipal.html" data-role="button" >Accueil</a>
<text>|</text>
<a href="Page1.html" data-role="button">1</a>
</p>
</div>
</div>
</body>
</html>
Ici c'est le code de la page 1 du site :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="stylePrincipal.css" />
<title>Blog - Page 1</title>
</head>
<body>
<div data-role="page">
<div data-role="content">
<center><table border="1" style="text-align:center">
<tr>
<td>
<h1>Jour 1 :</h1>
<p>En Août 2016, Après avoir contacté une agence de voyage, en 3 semaines tout est préparé : les dates, les grandes lignes du parcours, les centres d'intérêt... </br>Alors le mardi 13 décembre, nous nous rendons à l'aéroport CHARLES DE GAULLE pour prendre un avion en direction d'Hanoï pour visiter le nord du Viêtnam !</p>
<img src="images/cartetrajet.jpg"/>
<p></p>
</td>
</tr>
<tr>
<td>
<h1>Jour 2 - 3 :</h2>
<p> Une fois arrivé à l'aéroport Nôi Ban à Hanoï vers 00h10 heure française soit 6h10 heure locale.</br>Nous avons découvert la capitale du Viêtnam, Hanoï, tout est complètement différent en France !</p>
<img src="Images/1.JPG" height="375" width="500"/>
<img src="Images/2.JPG" height="375" width="500"/>
<p> Nous avons visité plein de choses comme par exemple le côté du palais présidentiel, du Mausolée de Ho Chi Minh puis d'une pagode près du grand lac. </br> Pour finir, nous avons passé deux nuits dans ce capitale avant de partir au Baie de Hạ Long !</p>
<img src="Images/3.JPG" height="562" width="1000"/>
</td>
</tr>
</table></center>
</div>
<div data-role="footer">
<p>
<a href="PagePrincipal.html" data-role="button" >Accueil</a>
<text>|</text>
<a href="Page1.html" data-role="button">1</a>
</p>
</div>
</div>
</body>
</html>
Et pour finir, voici le fichier styleprincipal.css :
body
{
background-image: url("Images/drapeau.png");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top right;
text-align: center;
}
table
{
text-align: center;
}
Voila, j'espère que vous pourriez comprendre, sinon je peux vous envoyer une image de la ressemblance du site ?
EDIT : Sinon, oui je parlais bien d'une image de fond avec background
Et vous avez dû remarquer que le design du site est moche pour le moment mais je voulais l'améliorer mais je voulais coder en "simple" or je n'arrivais pas a trouver les bonnes "mélanges" couleurs correspondant etc...
La balise <img> ne sort jamais sans son attribut alt obligatoire.
La balise <center> est obsolète depuis 1999 elle n’est plus à utiliser. C’est en CSS que l’on centre. A supprimer de toute urgence.
La balise <text> n’existe pas.
La balise </br> n’existe pas, c’est soit <br> soit <br />
L’attribut border est obsolète.
Pour quelles raisons tous ces attributs data-role ? Si c’est un header utilise la balise <header>, si c’est un footer utilise la balise <footer>. (voir lien en fin de message)
Pour ton tableau il existe la balise <th> pour les entêtes du tableau.
Bien que le tableau pour la présentation des étapes du voyage soit sémantiquement correct puisque tu présentes des données tabulaires, en revanche pour la page 1 il n’est pas du tout opportun. Les tableaux ne sont pas faits pour la mise en page. A supprimer donc et à remplacer par des balises structurantes adéquates.
D'accord je vois ça, je vais corriger tout ça, merci beaucoup
Mettre image de fond et un "bandeau" au milieu
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.