Partage

Votre première page web en HTML

Sujet résolu

17 mai 2017 à 12:04:06

Bonjour,

Je viens actuellement de suivre la 2eme leçon du cours HTML 5 et j'ai deux petites questions.

-J'aimerais savoir pourquoi sur sublime texte, lorsque le professeur écrit des mots, certains s'affichent en rouge alors que chez moi non...
-Et pourquoi lorsque je tape entré sur sublime texte et que je l'ouvre via google chrome le texte est déjà dessous sans avoir besoin de taper et lorsque je tape il apparaît sur la page google chrome...?

Merci

TheMaskedPony

17 mai 2017 à 13:03:34

Salut,

CedricLouail a écrit:

-J'aimerais savoir pourquoi sur sublime texte, lorsque le professeur écrit des mots, certains s'affichent en rouge alors que chez moi non...

Ça c'est la couleur syntaxique, tu utilises surement un thème différent. Tu peux le configurer à ta guise en téléchargeant des thèmes ou en utilisant ceux de base et en les modifiants.

CedricLouail a écrit:

-Et pourquoi lorsque je tape entré sur sublime texte et que je l'ouvre via google chrome le texte est déjà dessous sans avoir besoin de taper et lorsque je tape il apparaît sur la page google chrome...?

Je pense que ça vient de la propriété display de tes éléments si ils sont en block tu n'a pas besoin d'utiliser la balise br.

Quant au fait que la balise s'affiche et n'est pas interprétée sans voir le code je ne pourrai pas dire pourquoi.

-
Edité par TheMaskedPony 17 mai 2017 à 13:07:29

RTFM > All | PHP.net | SQL.sh | Stackoverflow.com | Google.com

Lucky13

17 mai 2017 à 15:19:42

Hello,

Déjà tu exprimes mal ton problème.

Vérifier l'extension de ton fichier ( .html ) Cela pourrait expliquer le comportement + la coloration syntaxique du code dans l'éditeur.

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

Mamax64

17 mai 2017 à 15:24:49

petite précision c'est soit soit cela revient au même mais c'est jamais :D

Sinon pour les balises en couleurs, tu as sans doutes pas enregistrer ta page en tant qu'html ... verifie que ton fichier ne soit pas Tonfichier.html.txt ... ca arrive souvent, erreur de débutant :p

TheMaskedPony

17 mai 2017 à 15:37:02

Mamax64 a écrit:

petite précision c'est soit soit cela revient au même mais c'est jamais :D

Oui mais ça n'explique pas pourquoi le navigateur ne l'interprète pas il est sensé faire la correction. Après ça vient peut être du fait que ce n'est pas un .HTML effectivement x) mais dans ce cas il devrait voir toutes les balises pas uniquement les br.

Ça expliquerait les retour à la ligne des textes aussi.

-
Edité par TheMaskedPony 17 mai 2017 à 15:38:23

RTFM > All | PHP.net | SQL.sh | Stackoverflow.com | Google.com

Benzouye

17 mai 2017 à 15:50:15

Mamax64 a écrit:

petite précision c'est soit soit cela revient au même mais c'est jamais :D

Euh non ... En XHTML c'est (balise sans balise de fin, comme <input /> ou <img />) et en HTML5 c'est (comme <input> et <img>) ...

Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL

Lokito

19 mai 2017 à 12:49:08

Mamax64 a écrit:

petite précision c'est soit soit cela revient au même mais c'est jamais :D

Sinon pour les balises en couleurs, tu as sans doutes pas enregistrer ta page en tant qu'html ... verifie que ton fichier ne soit pas Tonfichier.html.txt ... ca arrive souvent, erreur de débutant :p

j'ai enregistrer le fichier en HTML via sublime texte, mais lorsque je l'ouvre avec Google chrome...aucun problème mais lorsque je l'ouvre via IE, il m'affiche seulement le code source. Et oui désolé il était tard

Benzouye

19 mai 2017 à 13:00:33

Peux-tu poster le contenu de ton fichier HTML (en utilisant la balise code, bouton </>) ?

Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL

Lokito

19 mai 2017 à 13:07:09

Benzouye a écrit:

Peux-tu poster le contenu de ton fichier HTML (en utilisant la balise code, bouton </>) ?

euh je n'ai pas encore vu çà je suis qu'à la première leçon HTML 5 désolé. si tu peux m'expliquer comment faire? Sinon Je peux copier le code, mais je ne comprends pas pourquoi un navigateur le lit et l'autre pas...j'ai bien fait attention à l'enregistrer en HTML et pas texte mais...

Benzouye

19 mai 2017 à 13:10:31

Avec un simple copier/coller en utilisant la balise code :

Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL

Lokito

19 mai 2017 à 13:14:18

<!DOCTYPE html>
<html>
   <head>
        <leta charset="utf-8"/>
        <title>CV-Cataleya Rivera</title>
         </head>
         <Body>
         <h1> Cataleya Rivera </h1>
         <h3> WebDesigner </h4> 
         <p> <a href="image/photo-original.jpg"><img src="image/Photo-Miniature.jpg" alt="photo de CV miniature" /></a> </p> <br />

         <h3> <strong> Mon expérience </strong> </h3> 
         <ul>
             <li> <strong>2016-2017: </strong> </li> 
             Création d'affiches et de flyers. Mise en place d'un plan de communication pour la société <em> Chronodrive</em>.

             <li> <strong>2015-2016: </strong> </li>
             Réalisation de plaquette de site web pour la société <em> Roc Nation</em>.

             <li> <strong>2013-2015: </strong> </li> 
             Conception de visuels promotionnel et élaboration d'un plan marketing au vu d'agrandir la société <em> Digipack</em>.
         </ul> 

          <h3> <strong> Mes compétences </strong> </h3> 
          <ul>
              <li> Photoshop </li>
              <li> Excel </li>
              <li> HTML 5 </li>
              <li> Illustrator </li>
          </ul>

            <h3> <strong> Ma formation </strong> </h3> 
            <p> Titulaire d'un <strong>Bac L </strong>, j'ai par la suite suivi une formation de web design par l'intermédiaire d' <strong><em> Openclassrooms.</em></strong></p>


         </body>
      </html>

Benzouye

19 mai 2017 à 13:30:46

Alors, ligne 4 : meta et non leta

Les balises <li> s'ouvrent et se ferment sur le contenu entier ... tu ne dois pas intercaler du texte entre deux <li> ...

Après, tu as des espaces un peu partout, et c'est eux qui foutent la grouille sur ta page. Je pense aussi à un problème d'encodage entre ton fichier et ta balise meta. Fais attention à enregistrer ton fichier en UTF-8 (je ne sais pas comment cela se passe avec Sublime Text).

Ton code repris :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>CV-Cataleya Rivera</title>
	</head>
	<body>
		<h1>Cataleya Rivera</h1>
		<h2>WebDesigner</h2>
		<p><a href="image/photo-original.jpg"><img src="image/Photo-Miniature.jpg" alt="photo de CV miniature" /></a></p>
		<h3><strong>Mon expérience</strong></h3>
		<ul>
			<li>
				<strong>2016-2017 :</strong><br />
				Création d'affiches et de flyers. Mise en place d'un plan de communication pour la société <em> Chronodrive</em>.
			</li>
			<li>
				<strong>2015-2016 :</strong><br />
				Réalisation de plaquette de site web pour la société <em>Roc Nation</em>.
			</li>
			<li>
				<strong>2013-2015: </strong><br />
				Conception de visuels promotionnel et élaboration d'un plan marketing au vu d'agrandir la société <em>Digipack</em>.
			</li>
		</ul>
		<h3><strong>Mes compétences</strong></h3>
		<ul>
			<li>Photoshop</li>
			<li>Excel</li>
			<li>HTML 5</li>
			<li>Illustrator</li>
		</ul>
		<h3><strong>Ma formation</strong></h3>
		<p>Titulaire d'un <strong>Bac L</strong>, j'ai par la suite suivi une formation de web design par l'intermédiaire d'<strong><em> Openclassrooms.</em></strong></p>
	</body>
</html>

A tester ...

-
Edité par Benzouye 19 mai 2017 à 14:23:30

Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL

Lokito

19 mai 2017 à 13:46:01

Merci pour tous ses conseils, c'est vrai que c'est plus propre comme ca. Malheureusement le problème persiste... lorsque je l'ouvre via IE...il ne m'affiche que le code...je ne comprends pas pourquoi

ps: j'ai télécharger Firefox pour voir, et il me l'affiche correctement, cela viendrait il de ma version IE?

avec sublime texte j'ai 5 choix possibles pour l'enregistrer en HTML
- HTML (ASAP) (*.asp)
- HTML (Erlang) (*yaws)
- HTML (Tcl) (*.adp)
- HTML (Rails) (*.rails, *rhtml, *erb, *html.erb)
- HTML (*.html, *.htm, *.shtml, *.xhtml, *.inc, *.tmpl, *.tpl)

tu pense que je devrais changer de logiciel?

-
Edité par Lokito 19 mai 2017 à 13:49:46

TheMaskedPony

19 mai 2017 à 13:56:56

Pour voir l'encodage qu'utilise sublime text tu vas sous preferences > settings puis tu recherches default_encoding.

En ce qui concerne IE tu connais sa version ?

RTFM > All | PHP.net | SQL.sh | Stackoverflow.com | Google.com

Lokito

19 mai 2017 à 14:14:06

pour IE c'est la version 11.0.9600.18665 donc la 11.

et pour l'encodage de sublime texte "default_encoding": "UTF-8",

TheMaskedPony

19 mai 2017 à 14:19:35

J'ai également la version 11 de IE j'ai repris ton code et ça fonctionne correctement.

Lokito a écrit:

         <h3> WebDesigner </h4>

Tu as une erreur ici au passage.

RTFM > All | PHP.net | SQL.sh | Stackoverflow.com | Google.com

Lokito

19 mai 2017 à 14:22:21

oui oui je l'avais déjà rectifier quand benzouye ma corriger merci

Lucky13

19 mai 2017 à 14:24:11

Hello,

Ensuite il faut aussi respecter la hiérarchie, h1 ,2 ,3 ,4 , etc.. car la tu perds la sémantique. C'est comme un article de journal, le title= nom du journal, puis titre d'un article, un sous-titre, un sous-titre d'introduction, des paragraphes avec des mots clés, etc et etc...

-
Edité par Lucky13 19 mai 2017 à 14:35:31

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

Lokito

19 mai 2017 à 14:29:01

d'accord du coup je vais mettre h2 et pas h3.
sans BOM ? ca veut dire?

Benzouye

19 mai 2017 à 14:29:56

Lucky13 a écrit:

il faut respecter la hiérarchie, h1 ,2 ,3 ,4 , etc..

J'avais corrigé son code en conséquence dans mon dernier post

Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL

Lucky13

19 mai 2017 à 14:34:57

Oui j'ai vu ça le temps d'avoir posté

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

Lokito

19 mai 2017 à 14:52:51

Du coup y a pas de solution ça vient de mon IE? parce que si mon correcteur l'ouvre sur IE et que ça lui fait ça je suis un peu dans la mouise.

ps: j'ai enregistrer UTF sans BOM...le problème reste le meme

-
Edité par Lokito 19 mai 2017 à 14:54:13

Benzouye

19 mai 2017 à 15:07:52

Si tu copies/colles mon code plus haut dans sublime text et que tu l'enregistres en UTF8 sans BOM, avec un nom genre index.html ?

Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL

Lokito

19 mai 2017 à 15:12:06

ca marcheeeeeeeeeeeeeeeeeeeeee merci benzouye je pense que le .html a fait la diff! lorsque je l'enregistrais en html il n'affichait pas le .html

MERCI BEAUCOUP

et merci à tout le monde pour votre patience

Lucky13

19 mai 2017 à 15:25:15

Vu que tu as fais des erreurs avec les titres, des ici et la pour faire des retours à la ligne, je te conseilles de prendre ton temps, bien lire, relire et comprendre la définition et l'utilisation de telle ou telle balise. Bref ne grilles pas les étapes et reviens en arrière si besoin.

Le temps passé sera du temps de gagné par la suite. On est nombreux à avoir rencontré des problèmes de tout genre, ne jamais perdre espoirs et persévérer.

Bonne continuation.

-
Edité par Lucky13 19 mai 2017 à 15:26:23

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

Lokito

19 mai 2017 à 16:11:46

oui je reviens sur les étapes précédentes pour comprendre le pourquoi du comment, et vos conseils m'ont aussi aider à comprendre. Il faudra du temps et de la pratique pour que cela vienne instinctivement je pense. En tout cas merci à Tous