A voir également:
- Débuter un site web
- Site de telechargement - Accueil - Outils
- Site comme coco - Accueil - Réseaux sociaux
- Web office - Guide
- Création site web - Guide
- Quel site remplace coco - Accueil - Réseaux sociaux
6 réponses
telliak
Messages postés
3667
Date d'inscription
mercredi 20 septembre 2006
Statut
Membre
Dernière intervention
4 novembre 2024
876
16 janv. 2014 à 23:38
16 janv. 2014 à 23:38
Salut,
Si tu veux coder toi-même, il vaudrait mieux que tu commences par un minimum d'apprentissage.
HTML, ce n'est pas compliqué, mais ce n'est pas inné non plus.
Un excellent site pour commencer https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
cours est destiné aux débutants qui ne connaissent rien à la création de sites web et qui n'attendent qu'une chose : qu'on leur explique pas à pas comment tout cela fonctionne avec des mots simples et des exemples concrets !
Si tu veux coder toi-même, il vaudrait mieux que tu commences par un minimum d'apprentissage.
HTML, ce n'est pas compliqué, mais ce n'est pas inné non plus.
Un excellent site pour commencer https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
cours est destiné aux débutants qui ne connaissent rien à la création de sites web et qui n'attendent qu'une chose : qu'on leur explique pas à pas comment tout cela fonctionne avec des mots simples et des exemples concrets !
samgunsjovirow
Messages postés
40852
Date d'inscription
samedi 3 mai 2008
Statut
Modérateur
Dernière intervention
17 février 2023
3 036
Modifié par samgunsjovirow le 16/01/2014 à 11:35
Modifié par samgunsjovirow le 16/01/2014 à 11:35
Bonjour
Est-ce que tu pourrais mettre ton bout de code? Ce serait plus simple;-)
Ensuite tu as tout ton site en local ou tu essaie de le visualiser en ligne?
La révolution des pancakes est en marche !
Est-ce que tu pourrais mettre ton bout de code? Ce serait plus simple;-)
Ensuite tu as tout ton site en local ou tu essaie de le visualiser en ligne?
La révolution des pancakes est en marche !
Merci pour ta réponse rapide, je le visualise en ligne je viens juste de commencer et j'essai de bidouiller pour bien comprendre comment ça marche.
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Projet</title>
</head>
<body> /
<h1>Bienvenue sur le site<h1>
<p><a href="mailto:***@***">Envoyez-moi un e-mail !</a></p>
<img src="images/images.jpg" alt="Photo de montagne" />
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Projet</title>
</head>
<body> /
<h1>Bienvenue sur le site<h1>
<p><a href="mailto:***@***">Envoyez-moi un e-mail !</a></p>
<img src="images/images.jpg" alt="Photo de montagne" />
</body>
</html>
samgunsjovirow
Messages postés
40852
Date d'inscription
samedi 3 mai 2008
Statut
Modérateur
Dernière intervention
17 février 2023
3 036
16 janv. 2014 à 11:57
16 janv. 2014 à 11:57
Si ton site est hébergé en ligne, il faut bien évidemment que l'image soit en ligne également (en respectant bien l'organisation des dossiers)
Fais attention, ta balise h1 n'est pas fermée
Fais attention, ta balise h1 n'est pas fermée
samgunsjovirow
Messages postés
40852
Date d'inscription
samedi 3 mai 2008
Statut
Modérateur
Dernière intervention
17 février 2023
3 036
16 janv. 2014 à 13:08
16 janv. 2014 à 13:08
C'est parce qu'il n'est pas hébergé que je ne peux pas voir l'image ?
Du moment que l'image et les pages html sont au même endroit (soit en local, soir sur un hébergement", pas de soucis
Du moment que l'image et les pages html sont au même endroit (soit en local, soir sur un hébergement", pas de soucis
Salut,
vous en êtes vraiment au début.
HTML n'est pas bien dur à comprendre:
ce sont des repères appelés balises qui indiquent les éléments dans votre page, une règle ou norme d'écriture des pages internet simple et rapide à mettre en place.
Pour bien comprendre un exemple faux et idiot mais qui résume html:
<platchaud>
<couscous>
<merguez>
6
</merguez>
<inutile>
<semoule>
350g
</semoule>
<photo img src='photocouscous' />
<texte>
</inutile>
Servir chaud et bon apétit
</texte>
</couscous>
</platchaud>
Bref les balises vous en avez pour chaque élément (comme différencier les titres d'un paragraphe, insérer une vidéo ou une image) et vous pouvez les imbriquer comme vous voulez et à l'infini.
Par contre HTML ne sert plus à la mise en page. HTML sert à indiquer les éléments de la page comme ceci:
<p>
Balise paragraphe
</p>
<h1>titre principal</h1>
<h2>
titre secondaire
</h2>
<img src='image.jpg' />
Mais pas à mettre en page, depuis >10ans c'est CSS qui sert à cela.
CSS permet de donner à chaque balise des 'propriétés de style'.
En fait ce sont tout les éléments de mise en page comme la couleur de fond, le cadre, la disposition, les marges, tailles du texte...etc il en existe des milliers de styles css.
Tout ça pour vous signaler que <body background="images.jpg"> n'est plus utilisé(vous avez vu que vous avez oublié des guillemets dans votre écriture, cela ne pourra pas marcher de toute manière).
Les attributs es balises comme background sont remplacés avantageusement par le CSS.
Une façon d'écrire serait:
<body style="background-image:url(images.jpg);"
ça y ressemble et il y a plus de mots mais c'est beaucoup plus pratique notamment grâce à externalisation des feuilles de styles css.
Enfin si ce n'est pas clair maintenant concentre vous sur le HTML avant de continuer vos cours par CSS.
Vos questions concernent la balise "a" (a pour anchor le mot qui veut dire ancre en anglais) et il y a plusieurs erreurs, courantes pour un débutant:
Les balises HTML sont des repères, ils indiquent la plupart du temps le début et la fin d'un zone:
<p>indique un paragraphe
</p>
Ici la balise p ouvrante(<p>) indique le début et la balise p fermante (</p>) la fin du paragraphe.
Pour un lien c'est identique:
<a href="http://google.fr">
Cliquer ici pour aller sur la page de Google
</a>
La premier <a href="http://google.fr">
indique le début du lien.
Le </a> est la balise fermante, donc n'oubliez pas si vous ouvrez une balise de la fermer.
Le texte entre les 2(on peut très bien mettre une image si on veut) est le lien.
Un attribut de balise est une information complémentaire, parfois indispensable:
C'est le cas pour un lien car l'attribut href indique la réfèrence hypertexte, autrement dit l'adresse de la page à consulter.
Si celle ci(l'adresse du lien) est sur le même site il faut indiquer l'adresse de la page du lien à partir du dossier d'origine de la page , si cette adresse est ailleurs il faudra indiquer le chemin complet à partir d'internet.
http//www.google.fr pour trouver l'adresse de Google en français.
ATTENTION:
<a href="détail.html">
Ne pourra pas fonctionner. Les adresses et non de fichiers internet ne peuvent pas contenir certains caractères spéciaux dont les lettres avec accents.
Il vous faudra enrtegistrer la page detail.html pour faire un lien qui pointe dessus.
Dans un soucis d'éviter les erreurs d'interprétation des noms de fichiers vous devez aussi éviter d'écrire des majuscules, elles peuvent prêter à confusion et être des sources d'erreurs.
vous en êtes vraiment au début.
HTML n'est pas bien dur à comprendre:
ce sont des repères appelés balises qui indiquent les éléments dans votre page, une règle ou norme d'écriture des pages internet simple et rapide à mettre en place.
Pour bien comprendre un exemple faux et idiot mais qui résume html:
<platchaud>
<couscous>
<merguez>
6
</merguez>
<inutile>
<semoule>
350g
</semoule>
<photo img src='photocouscous' />
<texte>
</inutile>
Servir chaud et bon apétit
</texte>
</couscous>
</platchaud>
Bref les balises vous en avez pour chaque élément (comme différencier les titres d'un paragraphe, insérer une vidéo ou une image) et vous pouvez les imbriquer comme vous voulez et à l'infini.
Par contre HTML ne sert plus à la mise en page. HTML sert à indiquer les éléments de la page comme ceci:
<p>
Balise paragraphe
</p>
<h1>titre principal</h1>
<h2>
titre secondaire
</h2>
<img src='image.jpg' />
Mais pas à mettre en page, depuis >10ans c'est CSS qui sert à cela.
CSS permet de donner à chaque balise des 'propriétés de style'.
En fait ce sont tout les éléments de mise en page comme la couleur de fond, le cadre, la disposition, les marges, tailles du texte...etc il en existe des milliers de styles css.
Tout ça pour vous signaler que <body background="images.jpg"> n'est plus utilisé(vous avez vu que vous avez oublié des guillemets dans votre écriture, cela ne pourra pas marcher de toute manière).
Les attributs es balises comme background sont remplacés avantageusement par le CSS.
Une façon d'écrire serait:
<body style="background-image:url(images.jpg);"
ça y ressemble et il y a plus de mots mais c'est beaucoup plus pratique notamment grâce à externalisation des feuilles de styles css.
Enfin si ce n'est pas clair maintenant concentre vous sur le HTML avant de continuer vos cours par CSS.
Vos questions concernent la balise "a" (a pour anchor le mot qui veut dire ancre en anglais) et il y a plusieurs erreurs, courantes pour un débutant:
Les balises HTML sont des repères, ils indiquent la plupart du temps le début et la fin d'un zone:
<p>indique un paragraphe
</p>
Ici la balise p ouvrante(<p>) indique le début et la balise p fermante (</p>) la fin du paragraphe.
Pour un lien c'est identique:
<a href="http://google.fr">
Cliquer ici pour aller sur la page de Google
</a>
La premier <a href="http://google.fr">
indique le début du lien.
Le </a> est la balise fermante, donc n'oubliez pas si vous ouvrez une balise de la fermer.
Le texte entre les 2(on peut très bien mettre une image si on veut) est le lien.
Un attribut de balise est une information complémentaire, parfois indispensable:
C'est le cas pour un lien car l'attribut href indique la réfèrence hypertexte, autrement dit l'adresse de la page à consulter.
Si celle ci(l'adresse du lien) est sur le même site il faut indiquer l'adresse de la page du lien à partir du dossier d'origine de la page , si cette adresse est ailleurs il faudra indiquer le chemin complet à partir d'internet.
http//www.google.fr pour trouver l'adresse de Google en français.
ATTENTION:
<a href="détail.html">
Ne pourra pas fonctionner. Les adresses et non de fichiers internet ne peuvent pas contenir certains caractères spéciaux dont les lettres avec accents.
Il vous faudra enrtegistrer la page detail.html pour faire un lien qui pointe dessus.
Dans un soucis d'éviter les erreurs d'interprétation des noms de fichiers vous devez aussi éviter d'écrire des majuscules, elles peuvent prêter à confusion et être des sources d'erreurs.
Il semble aussi que vous confondiez dossier et fichiers.
"
par exemple je crée un dossier détail je vais l enregistrer puis pour le mettre sur l site je vais juste marquer <a href="détail.html"> ?
"
Un dossier est un rangement dans lesquels vous mettez des fichiers.
Vos pages(fichiers) html sont en général regroupés dans le même dossier.
Celui ci(souvent nommé www ou public_html) est appelé dossier racine.
Il indique le niveau de départ de tous vos fichiers.
Si vous créer un dossier nommé "images" et que vous y mettez l'image (photovacances.jpg) que vous voulez afficher le chemin sera:
<img src="images/photovacances.jpg" />
Pareil pour vos liens:
Vous mettez dans votre dossier racine les pages page1.html, page2.html etc... jusqu'à page10.html
Pour y accéder vous devez donc écrire le lien suivant:
<a href="page1.html">Page 1 </a>
Mais si vous faites un dossier dans le dossier contenant toutes vos pages ("details") et que vous y incluez des pages : pagedetail1.html, pagedetail2.html...(n'oubliez pas il ne faut pas d'accent ni de caractère spéciaux dans un nom de fichier)
Votre lien sera
<a href="details/pagedetail7.html" >
voir la page détails 7
</a>
et ainsi de suite...
Pour débutez utilisez un seul dossier, dossier racine comme ça vous n'avez pas à écrire des chemins compliqué.
Le dossier "images" est un dossier qui est pratique car il permet de ranger (et de voir plus rapidement) les fichiers images des fichiers HTML et de pas les mélanger.
C'est aussi un bon entraînement à écrire des url relatifs(qui partent du dossier racine).
"
par exemple je crée un dossier détail je vais l enregistrer puis pour le mettre sur l site je vais juste marquer <a href="détail.html"> ?
"
Un dossier est un rangement dans lesquels vous mettez des fichiers.
Vos pages(fichiers) html sont en général regroupés dans le même dossier.
Celui ci(souvent nommé www ou public_html) est appelé dossier racine.
Il indique le niveau de départ de tous vos fichiers.
Si vous créer un dossier nommé "images" et que vous y mettez l'image (photovacances.jpg) que vous voulez afficher le chemin sera:
<img src="images/photovacances.jpg" />
Pareil pour vos liens:
Vous mettez dans votre dossier racine les pages page1.html, page2.html etc... jusqu'à page10.html
Pour y accéder vous devez donc écrire le lien suivant:
<a href="page1.html">Page 1 </a>
Mais si vous faites un dossier dans le dossier contenant toutes vos pages ("details") et que vous y incluez des pages : pagedetail1.html, pagedetail2.html...(n'oubliez pas il ne faut pas d'accent ni de caractère spéciaux dans un nom de fichier)
Votre lien sera
<a href="details/pagedetail7.html" >
voir la page détails 7
</a>
et ainsi de suite...
Pour débutez utilisez un seul dossier, dossier racine comme ça vous n'avez pas à écrire des chemins compliqué.
Le dossier "images" est un dossier qui est pratique car il permet de ranger (et de voir plus rapidement) les fichiers images des fichiers HTML et de pas les mélanger.
C'est aussi un bon entraînement à écrire des url relatifs(qui partent du dossier racine).
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
M4thieu
Messages postés
56
Date d'inscription
lundi 6 janvier 2014
Statut
Membre
Dernière intervention
13 mai 2014
5
16 janv. 2014 à 21:49
16 janv. 2014 à 21:49
Salut, sinon si tu ne veux pas trop te prendre la tête avec la mise en forme directe par HTML, je t'invite à te renseigner sur les éditeurs WYSIWYG qui permettent de mettre en forme un texte sans jouer avec les différentes balises mais plutôt comme sur word.
Bon courage.
Bon courage.
Bonjour, je vous remercie pour vos réponses, je me suis renseigern pour les éditeurs WYSIWYG c'estr très pratique apres j'essaie tout de meme d'écrire le code seul pour m'entrainer et mieux comprendre. J'ai pu avancer un peu et apprendre de nouvelles manipulations.
J'aurais quelques questions :
- Pour l'image de fond celle-ci se répète, comment faire pour que cette image de fond prenne tout l'écran en une seule fois ?
- Ensuite je voudrais créer un menu, par exemple en dessous du titre une barre grisée ou il y aura accueil, projet etc etc.
- Et par exemple j'ai créer un lien vers une nouvelle page, par exemple si je clique sur projet un nouvel onglet s'ouvre avec le fichier projet qui est enregistré sur mon ordi. Ce projet est enregistré sur pc1 donc qd je l'ouvre sur le navigateur tout s'affiche bien, par contre si je l'ouvre sur pc 2 vu que ce fichier n'est pas présent lorsque j'ouvre le navigateur projet n'affiche rien, est-ce n,ormal ? ce probleme sera t il résolu quand le site sera hebergé ?
J'espere que j'ai été assez claire, et merci une fois de plus pour votre aide
J'aurais quelques questions :
- Pour l'image de fond celle-ci se répète, comment faire pour que cette image de fond prenne tout l'écran en une seule fois ?
- Ensuite je voudrais créer un menu, par exemple en dessous du titre une barre grisée ou il y aura accueil, projet etc etc.
- Et par exemple j'ai créer un lien vers une nouvelle page, par exemple si je clique sur projet un nouvel onglet s'ouvre avec le fichier projet qui est enregistré sur mon ordi. Ce projet est enregistré sur pc1 donc qd je l'ouvre sur le navigateur tout s'affiche bien, par contre si je l'ouvre sur pc 2 vu que ce fichier n'est pas présent lorsque j'ouvre le navigateur projet n'affiche rien, est-ce n,ormal ? ce probleme sera t il résolu quand le site sera hebergé ?
J'espere que j'ai été assez claire, et merci une fois de plus pour votre aide
Pour le menu j'en ai commencer un simple avec ul et li, par contre ce n'est pas tres beau j'aimerais enlever la marge etc j'ai essayer ce code : #navigation {
width: 200px;
list-style: none;
margin: 0;
padding: 0;
}
mais rien ne se passe, faut il écrire quelque chose en plus ? Ou faut il le mettre a un endroit particulier ? Je l'ai mis juste a la fin de mon menu
width: 200px;
list-style: none;
margin: 0;
padding: 0;
}
mais rien ne se passe, faut il écrire quelque chose en plus ? Ou faut il le mettre a un endroit particulier ? Je l'ai mis juste a la fin de mon menu
J'ai essayé de reprendre un menu existant avec 6 icones :
<li class="maximenuck item356 current active first level1 " style="z-index : 12000;"><a class="maximenuck " href="/" title="Revenir à l'accueil"><img src="/images/menus/principal/accueil.png" alt="Accueil" style="display: block; margin: 0 auto;" /><span class="titreck">Accueil</span> </a>
</li>
<li class="maximenuck item358 level1 " style="z-index : 11999;"><a class="maximenuck " href="/index.php/familles"><img src="/images/menus/principal/famille.png" alt="Familles" style="display: block; margin: 0 auto;" /><span class="titreck">Familles</span> </a>
</li>
<li class="maximenuck item363 level1 " style="z-index : 11998;"><a class="maximenuck " href="/index.php/jeunesse"><img src="/images/menus/principal/jeunesse.png" alt="Jeunesse" style="display: block; margin: 0 auto;" /><span class="titreck">Jeunesse</span> </a>
</li>
<li class="maximenuck item366 level1 " style="z-index : 11997;"><a class="maximenuck " href="/index.php/activites-sportives" title="Revenir à l'accueil"><img src="/images/menus/principal/sport.png" alt="Activité sportive" style="display: block; margin: 0 auto;" /><span class="titreck">Activité sportive</span> </a>
</li>
<li class="maximenuck item362 level1 " style="z-index : 11996;"><a class="maximenuck " href="/index.php/med-culturelle"><img src="/images/menus/principal/culture.png" alt="Actions culturelles" style="display: block; margin: 0 auto;" /><span class="titreck">Actions culturelles</span> </a>
</li>
<li class="maximenuck item357 level1 " style="z-index : 11995;"><a class="maximenuck " href="/index.php/multimedia"><img src="/images/menus/principal/multimedia.png" alt="Multimédia" style="display: block; margin: 0 auto;" /><span class="titreck">Multimédia</span> </a>
</li>
J'ai voulu rajouter donc un icone a ce menu, mais lorsque j'essaie le nom du nouveau icone de menu ne s'affiche pas sur le menu mais ailleurs ds la page, comment bien le positionner ? A quoi correspond item 35?, et index 11997 etc ?
<li class="maximenuck item356 current active first level1 " style="z-index : 12000;"><a class="maximenuck " href="/" title="Revenir à l'accueil"><img src="/images/menus/principal/accueil.png" alt="Accueil" style="display: block; margin: 0 auto;" /><span class="titreck">Accueil</span> </a>
</li>
<li class="maximenuck item358 level1 " style="z-index : 11999;"><a class="maximenuck " href="/index.php/familles"><img src="/images/menus/principal/famille.png" alt="Familles" style="display: block; margin: 0 auto;" /><span class="titreck">Familles</span> </a>
</li>
<li class="maximenuck item363 level1 " style="z-index : 11998;"><a class="maximenuck " href="/index.php/jeunesse"><img src="/images/menus/principal/jeunesse.png" alt="Jeunesse" style="display: block; margin: 0 auto;" /><span class="titreck">Jeunesse</span> </a>
</li>
<li class="maximenuck item366 level1 " style="z-index : 11997;"><a class="maximenuck " href="/index.php/activites-sportives" title="Revenir à l'accueil"><img src="/images/menus/principal/sport.png" alt="Activité sportive" style="display: block; margin: 0 auto;" /><span class="titreck">Activité sportive</span> </a>
</li>
<li class="maximenuck item362 level1 " style="z-index : 11996;"><a class="maximenuck " href="/index.php/med-culturelle"><img src="/images/menus/principal/culture.png" alt="Actions culturelles" style="display: block; margin: 0 auto;" /><span class="titreck">Actions culturelles</span> </a>
</li>
<li class="maximenuck item357 level1 " style="z-index : 11995;"><a class="maximenuck " href="/index.php/multimedia"><img src="/images/menus/principal/multimedia.png" alt="Multimédia" style="display: block; margin: 0 auto;" /><span class="titreck">Multimédia</span> </a>
</li>
J'ai voulu rajouter donc un icone a ce menu, mais lorsque j'essaie le nom du nouveau icone de menu ne s'affiche pas sur le menu mais ailleurs ds la page, comment bien le positionner ? A quoi correspond item 35?, et index 11997 etc ?