faire des pages web

[Manouche]

Bonjour,
Il y a quelques années, j'ai appris quelques éléments avec le site du zéro pour écrire en html et faire une page web.
J'utilise pagesperso-orange pour publier. (c'est gratuit )
(Il me manque des codes ou balises pour que le texte ne soit pas collé aux photos.)
Mais ce n'est pas le gros du problème.
Car même si j'essaie de calculer quand je rédige et intègre des photos, l'affichage va changer selon que lé zoom va changer ou que ma barre de tâche sera plus ou moins large.
Je ne sais pas si je suis claire, étant assez faible sur ce genre de compétences.
Voici un lien vers ma dernière page. (je suis en train d'en faire une sur un voyage en Bretagne mais je galère.)
https://languedoc.pagesperso-orange.fr/NARBONNE-MEDOC
Mon but est essentiellement de faire des pages pour moi (garder un souvenir), et pour ma famille (partager ce que je peux faire). Je ne prétends pas du tout faire cela pour donner des leçons. (Et comme c'est sur le web, je limite les photos de personnes ou je change des prénoms).
Pouvez-vous me donner des conseils ou me guider vers un ouvrage ?
Je ne voudrais pas tout refaire, Je veux pouvoir choisir la présentation et le diaporama, mais il FAUT que j'arrive à améliorer.
J'ajoute que je voulais choisir de programmer moi-même, et non pas de faire un site en choisissant un mode "automatique"
Merci
Manouche

[chelmi]

Bonjour Manouche,

Je te conseille d'utiliser le populaire Bootstrap pour concevoir ton site.
Cela facilite l'affichage "Responsive". Les éléments s'adaptent à la taille de l'écran.

Site officiel : getbootstrap.com


Tu as des exemples de code pour la mise en page :
https://getbootstrap.com/docs/5.0/getti ... r-template


Thèmes et exemples gratuits :
startbootstrap.com

[loz]

Que ton site change quand la surface d'affichage change est tout à fait normal, sinon tes images et ton texte deviendraient minuscules.

On dit que ton interface est plastique.

Bootstrap est une solution, mais si tu veux continuer à faire du HTML simple, je te conseille d'empêcher le texte de se coller aux images (sans doute un paramètre de ta balise image), et de structurer ton texte avec des titres, gras et italiques.

[Ravélo Bernard]

(Il me manque des codes ou balises pour que le texte ne soit pas collé aux photos.)
Mais ce n'est pas le gros du problème.

Fait un essai avec la première image en mettant <br> entre ton lien de l'image et "le matériel"

Code : Tout sélectionner

<p> <img src="https://languedoc.pagesperso-orange.fr/lesimages4/1Apreparation.jpg" 
class="imageflottante1" alt="1preparation des sacoches"title="le vélo en préparation" /> 


<br>

LE MATERIEL : </br></br> 
- Mon vélo SCOTT qui a déjà  fait plusieurs voyages.</br>
- Sacoches Vaude, et leurs housses de pluie</br>
- Camping : tente légère mais j'emmène aussi un hamac.</br>  
- Couchages : sac de couchage, matelas auto-gonflable, </br>
- Cuisine : popote et réchaud, </br>
- un minimum de vêtements légers, lavables et séchables facilement, </br>
- gourde inox sur porte gourde + deux bouteilles d'eau ... etc, </br>
- Je vérifie ma trousse de pharmacie et je prends ma ceinture lombaire.</br>
- un livre : Marcher (Henry David Thoreau).</br></br>

[chelmi]

Si tu veux faire simple, pour espacer ton élément (image) du texte, il faut spécifier le padding dans ta feuille de style.
Exemples : https://www.w3schools.com/css/css_padding.asp

Par exemple, pour ta première image :

Code : Tout sélectionner

<img src="lesimages4/1Apreparation.jpg" class="imageflottante1" alt="1preparation des sacoches" title="le vélo en préparation" /> 

qui utilise la classe imageflottante1

Dans ta feuille de style velo4.css, modifie ta classe comme suit :

Code : Tout sélectionner

.imageflottante1
{
   float: left;
   padding-top: 10px;
   padding-right: 10px;
   padding-bottom: 10px;
   padding-left: 10px;
}

10px = 10 pixels d'espacement

[Manouche]

(Il me manque des codes ou balises pour que le texte ne soit pas collé aux photos.)
Mais ce n'est pas le gros du problème.

Fait un essai avec la première image en mettant <br> entre ton lien de l'image et "le matériel"

le <br> sert pour faire un nouveau paragraphe ou sauter des lignes. Enfin, c'est ainsi que je l'utilise.

Si tu veux faire simple, pour espacer ton élément (image) du texte, il faut spécifier le padding dans ta feuille de style.
Exemples : https://www.w3schools.com/css/css_padding.asp
(...)

Merci, je vais faire cela pour mes feuilles de style. Cela sera déjà plus présentable.
Manouche

[Manouche]

Bonjour Manouche,
Je te conseille d'utiliser le populaire Bootstrap pour concevoir ton site.
Cela facilite l'affichage "Responsive". Les éléments s'adaptent à la taille de l'écran.
Site officiel : getbootstrap.com
Tu as des exemples de code pour la mise en page :
https://getbootstrap.com/docs/5.0/getti ... r-template
Thèmes et exemples gratuits :
startbootstrap.com

merci, c'est sans doute cela qu'il me faut.
(en français ce serait bien, mais il ne faut peut-être pas trop demander).
Maintenant, il va falloir que j'y passe du temps.
Pour le moment : jardinage, car il fait soleil !
Manouche

[loz]

le <br> sert pour faire un nouveau paragraphe ou sauter des lignes. Enfin, c'est ainsi que je l'utilise.

Eh non, pour les paragraphes, c'est <p> et </p>

[Manouche]

le <br> sert pour faire un nouveau paragraphe ou sauter des lignes. Enfin, c'est ainsi que je l'utilise.

Eh non, pour les paragraphes, c'est <p> et </p>

ouaip, ouaip !
J'ai constaté que sur mes dernières pages, la taille de la police était petitissime.
Mais, j'ai vu aussi que, quand je remplace les balises paragraphes <p> par des balises saut de ligne <br>, je reviens à des caractères un peu plus grand.
Du coup, mauvaise élève que je suis , au lieu de chercher à avoir une taille de police de façon correcte, je me suis contentée de cette manipulation.
Manouche

[emilpoe]

Salut,

J'ai personnellement opté pour une solution de facilité et gratuite : https://wordpress.com/fr/
Ça utilise le logiciel libre Wordpress, ça se met à jour tout seul et c'est gratuit jusqu'à 3G de stockage. J'utlise aussi mes "pages perso" pour y stocker les gros truc (vidéo & son).
La contrainte c'est un peu de pub au fond de la page.

Pour du html pur et le soucis des images qui se mélanges au texte tu peux insérer avant et après ton image une ligne horizontale (me rapelle plus du code).
Les meilleurs logiciels pour faire du html sont un éditeur texte tout simple genre Kate (pour construire) et plusieurs navigateurs (pour vérifier).

[Manouche]

J'ai personnellement opté pour une solution de facilité et gratuite : https://wordpress.com/fr/
Ça utilise le logiciel libre Wordpress, ça se met à jour tout seul et c'est gratuit jusqu'à 3G de stockage. J'utlise aussi mes "pages perso" pour y stocker les gros truc (vidéo & son).
La contrainte c'est un peu de pub au fond de la page.

Pour du html pur et le soucis des images qui se mélanges au texte tu peux insérer avant et après ton image une ligne horizontale (me rapelle plus du code).
Les meilleurs logiciels pour faire du html sont un éditeur texte tout simple genre Kate (pour construire) et plusieurs navigateurs (pour vérifier).

Merci de la réponse.
ça mange du temps tout ça ...
Un autre confinement pour m'y mettre ?!

[pimou]

Bonjour,

Je trouve qu'il est très bien votre site. Le texte est là, accompagné de photos, l'info passe et est partagée !
Je serai plutôt partisan d'un web low tech que celui des usines à gaz actuelles. On ne le met jamais en évidence car on nous les pousse à toutes les sauces mais les technologies de l'information sont des gouffres énergétiques (et gaspillent littéralement celle-ci). A quand un internet et des sites web plus vertueux et durables ?

[loz]

A quand un internet et des sites web plus vertueux et durables ?

Ça existe, ça s'appelle Gemini.
Mais en vrai on peut faire du HTML tout simple avec les technos actuelles.

[Manouche]

Je trouve qu'il est très bien votre site. Le texte est là, accompagné de photos, l'info passe et est partagée !(...)

Merci, mais je le voudrais plus "propre".
Je vais prendre le temps d'apprendre mieux. Je voulais publier un ancien voyage en Bretagne, mais j'ai serré un peu plus les photos et ça coince.
Manouche

[pimou]

A quand un internet et des sites web plus vertueux et durables ?

Ça existe, ça s'appelle Gemini.
Mais en vrai on peut faire du HTML tout simple avec les technos actuelles.

Oui, j'avais lu un article sur framablog et testé !
On peut aussi faire des pages statiques simples et tout à fait exploitables.