HTML help !

Demande : HTML !!
Objet de la demande : Dans le cadre de mes cours d'informatique (C2i pour ceux qui connaissent), on bosse sur l'HTML mais j'ai RIEN COMPRIS...
Logiciel à disposition : Ben, on utilise un truc genre pronote ++ (je crois que ça s'appelle comme ça) et ben, un navigateur quoi. Et je sais pas si vous pouvez accéder à cette page, mais voilà en gros nos cours. http://www.univ-montp3.fr/miap/ens/info/Avance/Accueil/Accueil.htm TD3 et TD4 mais j'ai jamais fait d'HTML de ma vie x)

Hum... J'ai codé quelques trucs en html / php, mais ça remonte à presque dix ans. J'étais au collège, c'pour dire ! Bref, il me reste quelques notions et / ou un livre qui doit traîner. Tout dépend de l'étendue de ton incompréhension.

Oui, en effet, cela dépend que l'aide précisément que tu demandes

J'arrive jamais à combiner mes balises, j'arrive pas à trouver les bonnes balises, je comprends pas QUAND et OU je dois mettre des balises... vous avez accès au lien ?

Accès au lien oui, mais pas aux directives.

Et à ça : http://www.univ-montp3.fr/miap/ens/info/Avance/TD3/Exo1.html ?

Oui ça oui.
Tu as réussi à le faire?

Effectivement, ne pas comprendre le balisage en HTML, c'est embêtant. Mais ce n'est pas si compliqué. As-tu déjà intégré le balisage de base (la balise d'introduction définissant la norme utilisée ainsi que le trio HTML / HEAD / BODY) ?
En gros, première balise que tu trouves dans l'exemple de ton exo1, elle est inévitable. Tu copies/colles sans te poser de question.
Ensuite tu poses ton HTML qui comprendra toutes les balises que tu entrera par la suite. Il faut qu'elle enserre tout ton contenu HTML.
Vient la balise HEAD qui contient presque uniquement des infos non visibles (sauf la partie TITLE), comme les informations destinées aux moteurs de recherche, les droits d'auteurs (via la balise META) ou tes scripts et feuilles de style (CSS, ons'enfout !).
Enfin le BODY contient toutes les infos visibles (tout ! Textes, liens, graphismes et compagnie).

L'architecture de base d'un doc HTML se présente donc ainsi :

< !Doctype...> (seule balise que l'on ne ferme pas)
< HTML> (englobe tout le contenu de ton doc HTML)
< HEAD>
< TITLE> "Nom du site" < /TITLE>
Contenu META (=invisible)
< /HEAD>
< BODY>
Contenu visible
< /BODY>
< /HTML>

Points importants : toujours fermer ses balises et revenir à la ligne après chaque balise "mère". Le bon conseil pour débutant c'est de taper la balise de fermeture juste après avoir ouvert puis appuyer sur "Entrée", comme ça, on n'oublie pas. Il faut juste se souvenir de taper le reste entre les balises "mères".

Bon, ça c'est le B.A.-BA. Je ne sais pas si tu avais déjà capté, auquel cas, je viens juste de pondre une Lapalisse de quinze lignes ^^. Pour le reste, rien de bien sorcier non plus. Je pense être capable de répondre à tes interrogations (Elië le peut certainement aussi). Il ne te reste plus qu'à poser tes questions, Malona =)


N.B : Pas d'espace entre le premier chevron et le reste ! C'est juste qu'on ne peut pas retranscrire du HTML sans que les balises ne jouent leur rôle... C'est malin, tiens !

Elië : Non, même pas je n'ai pas su, je ne comprends RIEN x)

Gahrr : Je comprends MIEUX. Une bonne chose. Mais pas compris le truc META et à quoi ça sert.

Après y'a aussi les balises pour insérer des liens, pour la taille et la forme du texte, pour insérer les images. Je sais pas comment se positionnent les balises les unes par rapport aux autres

+ La balise META comprend des métadonnées (des données qui décrivent le contenu de ton site, donnent des informations quant au contexte comme la date de publication / de dernière mise à jour ou le numéro de version de ton site : 1.0, 1.1, 1.11, etc.).
Elle sert donc, entre autres choses, à fournir des informations (invisibles) sur le contenu de ton site. Par exemple, prenons une balise META des plus utiles, j'ai nommé la "keywords". Quand tu utilises Google (ou autre moteur de recherche), tu tapes des mots-clefs destinés à cibler ta demande. Ainsi pour aiguiller les recherches vers ton site, tu peux placer :

< META NAME="keywords" CONTENT="voyages, road-trip, art, cuisine, etc.">
(NAME correspondant donc à ce que CONTENT va contenir comme informations)


+ Pour ce qui est des liens, ça se complique un peu. La balise du lien hypertexte est < A>< /A> (A pour Ancre). Mais il y a un attribut (attribut =/= élément = balise) à prendre en compte : l'attribut href, qui définit le chemin de ton lien. Par exemple, s'il s'agit d'un lien local (menant vers un autre de tes fichiers html, donc à l'une des autres pages de ton site), tu dois entrer href="Nomdelapage.html" ; s'il s'agit d'un lien externe (menant vers un autre site que le tien), tu dois entrer l'URL soit href="http://www.jaimeleschipsaugouda.com".
Un lien hypertexte de base ressemble donc à ça :

< A href="Nomdelapage.html">Nomdelapage< /A> (le deuxième "Nomdelapage" représente le mot qui servira de bouton)

ou bien

< A href="http://www.jaimeleschipsaugouda.com">Chipsaugouda< /A>

Mais il s'agit vraiment d'un lien de base. Un mot, cliquable, qui renvoie vers une autre page. Pas de graphisme ni rien, hein ?

+ Pour la modification du texte, il faut tout d'abord savoir que le HTML est plutôt limité. En général, on préfère travailler avec le CSS pour tout ça.
Enfin, tu as quelques éléments en HTML, comme les fameux (que tu connais forcément !) < I>< /I> pour l'italique, < B>< /B> pour le gras, < U>< /U> pour souligner.
Tu peux également modifier la taille de ton texte (taille allant de 1 à 7) avec l'attribut size qu'il faut intégrer soit dans l'élément de police général < BASEFONT>< /BASEFONT> (que tu places au début de ton BODY), soit dans l'élément < FONT>< /FONT> (que tu places en encadrement du morceau de texte que tu veux modifier).

Donc si tu veux imposer une police générale et appliquer des modification sur des morceaux du contenu de ton site, tu as :

< BODY>
< BASEFONT size=1-7>
Le contenu de ton site
< FONT size=1-7>Phraseàmodifier< /FONT>
< /BASEFONT>
< /BODY>

Tu peux modifier la police avec l'attribut face comme suit :

< BODY>
< BASEFONT face="nomdelapolice">
Le contenu de ton site
< /BASEFONT>
< /BODY>


Enfin, pour ce qui est des couleurs, tu peux soit modifier les couleurs directement après ta balise BODY,

comme ça : < BODY bgcolor="couleurenanglais ou valeur hexadécimale*" (petite note : bgcolor = background color = couleur de l'arrière-plan) + text="couleur" + link="couleur", etc.

soit via l'élément BASEFONT (uniquement pour le texte), comme ci-dessous :

< BODY>
< BASEFONT color="couleurenanglais ou valeur hexadécimale">
Le contenu de ton site
< /BASEFONT>
< /BODY>

* Une valeur hexadécimale se présente ainsi : #codeàsixchiffresoulettres (ex : #FF3377). Tu peux trouver des bibliothèques de couleurs en ligne qui te fournissent le code hexadécimal des couleurs =)

Attention !:

Je tâcherais de t'expliquer le coup des images un peu plus tard. Là, c'est l'heure du repas !
Ah et, Elië, n'hésite pas à me reprendre si je dis des absurdités. Franchement, ça ne m'étonnerait qu'à moitié ^^


EDIT : J'ai été contrait de fortement abréger le cours à cause du repas, m'obligeant donc à ne traiter que d'une base vraiment... basique. J'ai omis de mentionner les sauts de ligne, paragraphes, listes, tableaux et compagnie. Il faut dire qu'il y a quand-même pas mal de balises, que je ne me rappelle pas de toutes et qu'il est dur d'essayer d'instruire un langage de prog' à quelqu'un (même le HTML) et ce à distance. Désolé, donc.

EDIT 2 : Tiens, j'viens de voir que l'utilisation du BASEFONT était déconseillée aujourd'hui. Peut-être pour des raisons pratiques. Cela étant dit, si le but est uniquement de pratiquer le HTML pur, je ne pense pas que BASEFONT soit à proscrire. Bien évidemment, en pratique, il serait plus sensé de passer par des feuilles de style pour modifier ton texte.

Deuxième (courte) partie donc. Je reviens sur quelques fondamentaux qui te seront utiles si tu veux structurer un minimum le contenu de ton site.

< Hn>< /Hn> où H est l'élément et n un nombre de 1 à 6. Grosso modo, un H1 c'est un grand titre, un titre de page d'accueil ou de grand chapitre ; H2 un titre d'une section, d'un sous-chapitre important et H3, c'est un cran encore en-dessous (un sous-sous chapitre quoi). H4 ne sert pas à grand-chose. Quant aux H5 et 6, ils servent la plupart du temps à mettre des infos à caractère informatif (genre informations légales, droits d'auteur, etc.).
C'est un élément que tu places dans BODY avant le contenu (un paragraphe, un graphique, whatever) que tu introduis avec le titre.

P comme Paragraphe. Si tu veux construire un paragraphe, tu dois placer un < P>< /P> encadrant ce que tu veux inclure dans ledit paragraphe. Facile, pas vrai ?

BR (< BR> ) comme... Je ne sais plus. Mais c'est un élément vide (dont tu n'as pas besoin de refermer la balise) qui sert à revenir à la ligne. Pratique pour aérer, faire une liste et ce genre de chose. Il se place à la fin de ta ligne de texte.

La fonction "align". C'est un petit attribut (pas une balise donc) qui aligne ton texte à droite, à gauche ou qui le centre.
Par exemple, pour centrer un paragraphe, il faut que tu cales align="center" dans la balise P.
Ex : < P align="center">Blablabla, ceci est mon paragraphe< /P>
Pour coller ton contenu sur la gauche c'est "left" et sur la droite, c'est "right".


Je pense que je vais te laisser digérer un peu tout ça avant de continuer sur les listes et images (si cela ne presse pas la minute, sinon je peux t'en dire davantage). N'hésite pas à poser des questions, ici ou en MP. Courage ! =)

T'es trop fort ! Ça va déjà mieux, mais ça veut dire que toutes ces balises je dois les apprendre par coeur ? x) *Sort les anti-sèches*

Et tout ce qui est visible doit se trouver dans BODY ?
Et pour Hn il me semblait qu'on avait une autre balise, et on pouvait aller de 0 à 500 easy parce que ça définissait la taille en pixels, et non pas limité à 1-7

Toutes les balises dont tu me parles j'ai vu ça mardi en 1h30 de cours, mais j'étais complètement larguée...

Merci beaucoup, je note tout ça !

Eh oui ! Pas de miracle. En informatique comme dans le reste, le par cœur, c'est la clé. Mais si tu t'entraines à manipuler un peu les différents éléments / attributs, tu vas voir, ça rentre tout seul. C'est juste... logique.

Pour BODY, oui. Tout ce qui sera dans cette balise apparaîtra sur ton site.

Ensuite, Hn est l'élément de titre. Le chiffre qui suit H n'est pas un modificateur de taille (bien que la taille soit affectée par ledit chiffre) mais il indique l'importance du titre. Le titre de ta page devra être H1, tandis que le titre d'un paragraphe (d'une première grande partie mettons) sera H2, H3 sera pour une sous-partie et H5/H6 pour les infos légales. A noter que tu peux tout à fait user autant de fois que tu veux des différents titres.
Cela étant dit, je crois donc que tu voulais parler de l'attribut size de l'élément FONT et là, tu as raison. En fait, il y a carrément plus pratique que le FONT ou BASEFONT : le style (probablement le remplaçant des deux éléments que j'ai jadis utilisés).
Que ce soit un titre (Hn donc) ou un paragraphe (P), tu peux glisser un style= "font-size:Xpx" (pour modifier la taille de police, où X = le nombre de pixel que tu souhaites) voire ajouter ; "color;couleurdetonchoix", etc.

Par exemple, tu as un H1 que tu veux mettre en plus gros et en vert :

< H1 style= "font-size:125px; color:green">Coucou !< /H1>


Désolé donc pour le FONT qui est vraiment obsolète. R.I.P, dude.


EDIT : En fait, style c'est du CSS. J'me disais aussi, avec ces crochets... Bref, je ne sais pas quoi te conseiller. Je connais FONT, je sais que c'est du HTML mais je sais aussi que c'est hyper limité. Style facilite les choses, mais à proprement parler c'est du CSS.

Maintenant je suis trop forte !

J'ai enfin compris ! (:

Félicitation!!!!!

Tant mieux, miss... Tu vas pouvoir cartonner à l'exam' ^^

OUAIS... mais non. x)

Parce qu'on a la moitié de l'exam sur ça, mais l'autre partie sur le tableur excel... et les formules... ben, c'pas compliqué à faire les exos, quand j'ai 3h devant moi, mais pour le partiel on a qu'une heure quoi x)
Mais au moins je suis (plutôt) rassurée sur l'HTML

Pour Exel il suffit de manipuler régulièrement.... Tu vas y arriver, j'en suis sûre

Partiel passé.

5,5 points sur le tableur
12,5 points sur l'HTML
1 point pour déposer le travail sur un autre serveur avec Filezilla
1 point parce que je suis trop gentille et que je sais plus ou moins bien écrire.

J'ai méga chié mon tableur, j'ai tout réussi au HTML, donc c'est au moins ça ! Je suis contente d'avoir potassé ça plus que le tableur du coup ^^

Bravo à toi!

Ça va, c'est pas trop mal pour quelqu'un qui ne comprenait rien il y a de cela quelques jours. Bien joué ;)

J'ai eu 17, j'ai eu 17, gooooooosh, j'ai eu 17 !

Et j'ai eu 12,5/12,5 à l'HTML. Rpz sisi tavu.

Félicitation!!!!