avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2063
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Classe N°3 | Tigrlionle Mer 13 Déc - 16:57
Coucou @Tigrlion, et bienvenue dans ta classe.

Je mets en rappel ton formulaire d'inscription :

Formulaire de Tigrlion:
Tes connaissances en codage : Bah, les choses simples quoi, le HTML, les propriétés CSS de base, l'utilisation des class/id, etc. Et j'ai appris depuis peu la fusion des cellules des tableaux. Il reste beaucoup de choses "simples" que je ne sais pas faire. Si je devais situer mon niveau, je dirais que je suis genre "débutante un peu avancée" ?
Ton but : Savoir coder des jolies fiches/PA (et templates aussi, mais je me sens pas trop prête pour ça actuellement) pour moi ou pour mes amis, ou pour aider d'autres gens aussi.
Type de formation : [ ] codage général, [X] pour forumactif uniquement - pour le moment, je me concentre sur Forumactif, peut-être que je verrais le codage général plus tard.
Motivation : Je veux vraiment savoir coder !
Disponibilité : 7j/7, quasi 24h/24, puisque je n'ai rien d'autre à faire à côté.
Expérience en codage : J'ai commencé en 2011, je codais souvent des petits trucs à l'époque, puis de 2012 à 2014 je ne codais que trèèèès occasionnellement et puis.... j'ai pratiquement plus touché aux codes depuis 2014 et jusqu'à mon inscription sur Epicode il y a trois semaines. En exemple, je peux donner la fiche RP que j'ai mis en libre service ou mon résultat à un exercice de Page d'Accueil
L'anglais et toi : J'ai aucun problème à la compréhension ! ^^
Autres : Merci d'avance :3

J'aime bien ta fiche ! Ta PA en tableau a été très fidèle au schéma c'est très bien aussi. Sache juste qu'il est préférable de ne pas utiliser les tableaux pour structurer du contenu. On verra comment faire des PA sans tableau si tu veux.

Tu sembles bien connaître les bases, donc j'ai l'impression qu'on ne va pas beaucoup trainer niveau HTML mais je préfère toujours faire une petite mise au point pour compléter tes informations.

Je t'invite donc à répondre à ces quelques questions pour bien situer ton niveau. Réponds au mieux que tu peux et là où tu ne sais pas préviens moi. Bien sûr tu ne peux pas tout savoir ce n'est pas grave, c'est un peu la grande partie du programme HTML :
Code:

[b]C'est quoi le HTML et à quoi ça sert [/b]
[b]Quel est la différence entre le HTML et le BBcode [/b]
[b]Quelle est la structure de base d'une page HTML[/b]
[b]A quoi sert le charset[/b]
[b]Comment écrire un commentaire en HTML[/b]
[b]Comment coder des titres[/b]
[b]Comment coder un saut de ligne[/b]
[b]Comment insérer un paragraphe[/b]
[b]Quel est le code nécessaire pour insérer une liste[/b]
[b]Comment insérer un tableau[/b]
[b]Comment insérer un lien[/b]
[b]Comment insérer une image[/b]
[b]Qu'est ce que l'indentation[/b]
[b]Deux exemples de balises ouvrantes / fermantes[/b]
[b]Deux exemples de balises auto-fermantes[/b]

Voilà à bientôt


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Mer 13 Déc - 20:25
Yay, merci !

C'est quoi le HTML et à quoi ça sert C'est ce qui fait la structure et la mise en page de la fiche ou un site internet, on indique qu'à tel ou tel endroit y a titre, un paragraphe, un tableau, ou un bloc de texte, tout ça.
Quel est la différence entre le HTML et le BBcode Les balises HTML s'écrivent entre < et > alors que le BBCode, c'est avec des crochets. Le BBCode permet une mise en page rapide et facile accessible à tous et les balises sont propres à chaque site, alors que le HTML est le même partout et on peut ajouter du CSS pour embellir le tout en ajoutant des couleurs et tout ça et donc faire beaucoup plus de choses qu'avec du BBCode.
Quelle est la structure de base d'une page HTML Euh, je connais pas la structure par cœur, perso ^^' je me contente d'aller la copier/coller quand j'en ai besoin... Donc ça se présente comme ça :
Code:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
         <title>Titre</title>
         <style type="text/css">Feuille de style CSS</style>
    </head>

    <body>
    Corps de la page html
    </body>
</html>
Je sais juste qu'après, j'écris mon css entre les balises style, et mon code entre les balises body.
A quoi sert le charset C'est pour mettre les accents et ce genre de choses, je crois ?
Comment écrire un commentaire en HTML
Code:
<!-- le commentaire ici -->
Comment coder des titres
Code:
<h1>titre</h1>
On peut descendre ensuite avec h2, h3, etc, ça va jusqu'à h6, il me semble ? Plus le nombre est élevé, moins le titre est important. On peut les personnaliser/décorer via le css. Mais j'avoue, j'ai tendance à utiliser des div ou des span même pour les titres, je suis plus à l'aise avec... c'est une habitude que je devrais perdre, hein ? ^^'
Comment coder un saut de ligne
Code:
<br />
Comment insérer un paragraphe
Code:
<p>le texte du paragraphe</p>
Même chose que pour les titres, j'utilise plutôt des div pour les paragraphes, ahah...
Quel est le code nécessaire pour insérer une liste En HTML, je ne sais pas faire.
Comment insérer un tableau
Code:
<table>
<tr>
<td>première cellule de la première ligne</td>
<td>deuxième cellule de la première ligne</td>
</tr>
<tr>
<td>première cellule de la deuxième ligne</td>
<td>deuxième cellule de la deuxième ligne</td>
</tr>
</table>
Pour fusionner les cellules, on ajoute rowspan (fusion à la verticale) ou colspan (à horizontale) dans les balises td de cette manière (le chiffre indique le nombre de cellule à fusionner) :
Code:
<td rowspan="2">
Ce qui donne par exemple :
Code:
<table>
<tr>
<td rowspan="2">première cellule, première ligne et deuxième ligne fusionnées</td>
<td>deuxième cellule de la première ligne</td>
</tr>
<tr>
<td>deuxième cellule de la deuxième ligne</td>
</tr>
</table>
Comment insérer un lien
Code:
<a href="url du lien">texte</a>
Comment insérer une image
Code:
<img src="url de l'image" />
Qu'est ce que l'indentation Jamais entendu parler ;-;
Deux exemples de balises ouvrantes / fermantes
Code:
<div>texte</div>
<span>texte</span>
Deux exemples de balises auto-fermantes
Code:
<img /> <br />

Voila, voila ! Salut
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2063
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Mer 13 Déc - 23:58
Et bien je suis impressionnée, tu connais beaucoup de choses, c'est très cool

J'ai juste deux petites questions avant de te proposer un programme de mise au point.

Est-ce que ça t’intéresserait de comprendre la structure de base plutôt que de la copier/coller ?
C'est quelque chose qu'on utilisera très souvent dans les PA et qui servira aussi plus tard pour la compréhension du template overall_header.

Est-ce que tu veux qu'on travaille les PA en tableau ? Normalement je déconseille fortement parce que les tableaux servent à classer des données et non à structurer. Donc si tu veux on peut revoir les tableaux pour faire une PA mais sinon, on laisse pour après puisqu'ils serviront uniquement pour les templates.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Jeu 14 Déc - 0:53
Si la comprendre et savoir l'écrire soi-même sans copier/coller te parait essentiel, je ne dis pas non ! ^^
Mais comment ça on l'utilise pour des PA ? Je ne savais pas qu'on devait faire les PA sur des pages HTML, ou j'ai mal compris ?_?

Et je veux bien revoir un peu les tableaux en faisant une PA oui :3
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2063
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Jeu 14 Déc - 1:16
Je ne dirais pas que c'est essentiel mais je trouve que c'est plus pratique de taper un code qu'on comprend bien, (on se sent à l'aise en plus) que d'aller à chaque fois chercher où on l'a stocké. On va pas s'étaler dessus non plus, on verra que l'essentiel.

Tu peux très bien mettre le code de ta PA directement dans la zone de la PA. Toutefois, plus on personnalise le forum, plus on aura de codes. L'avantage à lier une page HTML pour la PA plutôt que de mettre directement le code c'est d'abord éviter les bugs et le conflit entre les différentes class et id des autres templates, surtout si on utilise du LS ou des commandes séparées. Parfois les codes peuvent avoir les mêmes nom de classe et ça crée des bugs au niveau du design. Quand tu mets le code de la PA sur une page externe, si ça bug c'est que le problème vient du code de la PA lui-même. Sinon, les autres codages n'auront jamais un effet sur l'apparence de ta PA.

Le deuxième avantage c'est que tu auras moins de CSS dans la feuille de style aussi vu qu'on va mettre le CSS de la PA dans la page HTML. Apparemment il y a une limite sur la quantité de CSS qu'on peut mettre dans la feuille de style de forumactif.

Ces avantages me semblent personnellement très intéressants et donc pour ma part je mets toujours mes codes PA dans une page HTML externe. Mais si ça te déplait tu peux toujours mettre le code directement. ça reste assez personnel.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Jeu 14 Déc - 1:45
Ah, on, c'est pas que ça me déplait, c'est que j'avais jamais pensé à ce genre de choses, du coup j'ai pas bien compris quand t'as parlé de faire une page HTML pour la PA. C'était juste pour ça ! X_x

Je suis ok pour voir et comprendre un peu la structure des pages HTML du coup ! ^^
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2063
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Jeu 14 Déc - 14:19
Oui je sais t'inquiète, je voulais dire que si tu veux faire autrement, tu peux :3

Voilà donc les gros titres de notre programme de révision :

Introduction au HTML
Structure de base d'une page en HTML

- L'indentation
Les balises communes
- Balises sémantiques vs balises non sémantiques
- Les listes
- Les fichiers media (image, audio et video)
Exercice pratique (Partie HTML)
Exercice libre (Partie HTML)

On passera rapidement sur les parties que tu connais déjà.
Si tu es d'accord pour le programme on passe rapidement à l'intro.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Jeu 14 Déc - 15:38
Ça me va ! ^^
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2063
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Jeu 14 Déc - 19:01
Introduction au HTML

@Tigrlion a écrit:C'est quoi le HTML et à quoi ça sert C'est ce qui fait la structure et la mise en page de la fiche ou un site internet, on indique qu'à tel ou tel endroit y a titre, un paragraphe, un tableau, ou un bloc de texte, tout ça.

Ta définition est en partie correcte.
Attention à bien faire la différence entre structure et mise en page.

- HTML c'est quoi ?

HTML (Hypertext Markup Language) permet en effet de bâtir la structure du code, mais quand tu dis que ça sert à faire la mise en forme c'est complètement faux.

Le HTML est un langage informatique de balisage (ou de description). Son but essentiel est de créer l'architecture d'une page web. Il permet donc de structurer logiquement et créer le contenu brut. Le HTML est la base de tout le web. Toute page web sans exception est codé à base de HTML et donc toutes les pages que tu visites tous les jours en ouvrant ton navigateur sont à base de HTML. Par contre il ne sera jamais ou (presque) utilisé tout seul. Vu qu'il ne fait que mettre la charpente et donc du contenu noir sur blanc, on a besoin du CSS pour tout ce qui est mise en forme.

Le HTML a été inventé en 1991 et est régulièrement mis à jour depuis, sa dernière version est le HTML5 qui est apparu en 2014.


@Tigrlion a écrit:Quel est la différence entre le HTML et le BBcode Les balises HTML s'écrivent entre < et > alors que le BBCode, c'est avec des crochets. Le BBCode permet une mise en page rapide et facile accessible à tous et les balises sont propres à chaque site, alors que le HTML est le même partout et on peut ajouter du CSS pour embellir le tout en ajoutant des couleurs et tout ça et donc faire beaucoup plus de choses qu'avec du BBCode.

Ta réponse est parfaite.
BBcode (Bulletin Board Code), bulletin board fait référence en anglais à forum de discussion. Le BBcode est un autre langage de balisage utilisé sur toutes sortes de forums. C'est un langage simplifié en effet et non standardisé.
< et > s'appellent des chevrons en français ou brackets en anglais

Je te présente déjà mon petit schéma de terminologie comme ça quand je parle d'attribut ou élément on se comprendra.



Voilà si tu as des questions n'hésite pas.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Jeu 14 Déc - 19:22
Je me suis juste mal exprimé pour le HTML, je sais bien que c'est le CSS qui permet la mise en forme. J'utilise probablement pas les bons mots... Mais quand je parlais de "mise en page", je voulais parler du "contenu brut" justement, pas de la "mise en forme".

Enfin bref, pardon, ton explications est très claire, j'ai tout bien compris ! Bravo
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2063
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Jeu 14 Déc - 23:54
D'accord je comprends.

On va donc voir la fameuse structure de base de toutes les pages HTML. Tu verras c'est simple, rapide et instructif.

Quand on parle de HTML on parle de "langage" et donc on aura besoin d'un "traducteur" pour ce langage. Le traducteur qui est capable de reconnaitre les différents langages informatiques est le navigateur.

- <!DOCTYPE HTML>: cette balise contient le mot doctype qui laisse entendre : type du document. Donc elle sert à déclarer le type de langage informatique qui sera utiliser dans notre document. Remarque que cette déclaration ne fait qu'affirmer au navigateur qu'on va utiliser du html et ne permet pas d'introduire le HTML.
- <html> </html> : Ce sont les balises qui vont nous permettre d'introduire du code HTML dans notre page. C'est donc comme dire que voilà mon HTML commence ici <html> et puis mon html se termine là </html>
La balise ouvrante <html> peut prendre l'attribut lang, cet attribut est donc optionnel. C'est bien lui qui permet de définir la langue qui sera utilisée dans la page. On peut donc mettre <html lang="fr"> pour le français "en" pour l'anglais "ja" pour le japonais etc.

Après la balise <html> vient la balise <head>.

- <head> </head> : est au fait l'en-tête qui sera invisible mais regroupera les informations sur le document, le nom de l'auteur, le titre de la page, la description, le CSS, etc. Enfin tout ce qui est invisible dans la page. On note que la convention était de mettre le Javascript dans head mais dernièrement il a été recommandé de le mettre plutôt à la fin du document, juste avant de fermer la balise body. La raison derrière ce changement est que le JS bloque parfois le chargement de la page, donc autant charger d'abord la page, puis le JS.

à l'intérieur de head, il y a 2 balises obligatoires meta et title. Si on veut mettre du CSS dans le même document, on ajoute les balises <style> </style> dans head.

- <meta > : meta veut dire information, cette balise sert donc à fournir des informations sur la page.

Seul l'attribut charset est important. charset définit le type d'encodage de la page. C'est à dire le type de caractères qui seront utilisés dans la page. La valeur "utf-8" veut dire latin étendu. Latin étendu parce que notre page est en français et donc on a besoin que le contenu soit codé en caractère latin, étendu parce que le français contient des accents. Si tu oublies de mettre le charset tu auras des codes bizarres pour chaque lettre accentuée. On note qu'en HTML5 (la dernière version HTML) il n'est pas nécessaire de fermer cette balise donc tu peux ne pas mettre le / à la fin. D'ailleurs en HTML5 toutes les balises orphelines (auto-fermantes) peuvent ne pas être fermées avec le slash.

Comme on a dit juste avant le meta regroupe toutes les informations relatives à la page et donc il peut prendre d'autre attributs (non obligatoires) par exemple à titre informatif : name et content.

name est le libellé qui décrit ce qu'il y a dans content (le contenu).
Pour que ça soit plus clair voici un exemple :
author (le nom du fondateur du site ou le nom du codeur)
Code:
<meta charset="UTF-8" >
  <meta name="author" content="Tigrlion">
name peut prendre la valeur "description", "keywords" (mots clés qui serviront au moteur de recherche pour lister ton site parmi les résultats d'une recherche par exemple) etc.

Bien sûr ceci ne sera pas visible dans le site mais uniquement dans le code.

- <title> </title>: Evidemment c'est le titre de la page, il s'affiche dans la barre des onglets en haut du navigateur, sur cette page par exemple il y a "Classe N°3 | Tigrlion".

- <style> </style>: La balise style sert comme on a dit avant à introduire directement le CSS dans la page HTML. Elle n'est obligatoire que si on veut ajouter le CSS dans la page.
type: est un attribut qui définit le langage de la feuille de style. Cet attribut est optionnel, la valeur par défaut est text/css.

- <body> </body>: C'est là qu'on met tout le code sur le contenu de la page.

Notre structure de base ressemblerait donc à cela :

Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titre du document</title>
</head>

<body>
Contenu du document......
</body>

</html>

J'espère que c'est un minimum plus clair pour toi. Si tu as des questions, n'hésite pas  


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Ven 15 Déc - 17:25
Oui, c'est beaucoup plus clair maintenant ! ^^

J'ai quelques petites questions du coup. Un peu idiotes et pas forcément très utiles, je sais pas, mais je me demande quand même  Raww

- Concrètement, du coup, ça sert à quoi de mettre ? Je sais que ce n'est pas obligatoire, mais c'est une indication qui sert pour le navigateur ? Ou les moteurs de recherches ? Genre si je fais une page en anglais mais que je met "fr", les moteurs de recherche considèreront que la page est en français ? C'est un détail et je ferais certainement jamais ça mais j'aimerais savoir... x'3

- La valeur par défaut de l'attribut type est "text/css", ça veut dire que je peux écrire directement
Code:
<style>ma feuille css</style>
sans préciser type="text/css", ça marchera quand même ?

- Concernant les balises auto-fermantes aussi... Quand j'avais commencé un peu le codage il y a plusieurs années, on m'avait pas parlé de ça, donc je fermais jamais mes balises img ou br, et un jour, on m'a un peu engueulé en me faisant remarquer que c'était pas bien de pas les fermer, alors j'ai pris cette habitude de toujours les fermer quoi qu'il arrive (ça me stresse un peu de voir des img pas fermées...) et là tu me dis que j'ai pas besoin de le faire, haha. J'ai bien compris donc que depuis 2014, avec le HTML5, on a plus besoin de le faire, mais je peux quand même continuer à les fermer ou il arrivera un jour où seules les balises HTML5 seront prises en compte et que donc les balises orphelines fermées ne fonctionneront plus ? C'est pas très claire comme question...

Bref, c'est tout, le reste, je pense avoir compris Bravo
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2063
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Ven 15 Déc - 19:17
Coucou, contente que tu trouves ça utile.

Tu dis ça sert à quoi de mettre ?, le point d'interrogation ? à faire savoir que c'est une question *sort*.
Je plaisante x) donc je suppose que tu voulais dire de mettre "lang".

Perso je ne mets pas souvent les attributs optionnels. Lang va en effet dire au navigateur que mon document contient du contenu en français. Si tu ne le mets pas ça veut simplement dire que tu ne précises pas la langue de ton contenu ou peut-être que tu utiliseras plus d'une langue et dans ce cas je préfèrerai ne rien mettre.

Le but de te faire connaître au fait les attributs "optionnels" et que si jamais tu les vois sur le code de quelqu'un tu ne vas pas paniquer en disant mais c'est quoi ces trucs que je ne connais pas xD.

De même pour style, d'habitude je ne mets pas le type non plus, mais vu que tu l'as mis dans ton code j'ai voulu t'expliquer ce que c'est. Type est un attribut optionnel, d'ailleurs text/css est sa seule valeur, il n'a pas d'autres à ma connaissance. Je ne vois pas ce qu'on pourra mettre à part du CSS en texte dans style lol. Donc tu peux mettre la balise style sans attributs ça fonctionne sans problème. Si tu veux mettre plutôt un lien vers une feuille de style externe, on n'utilise pas la balise style mais la balise link qui est auto-fermante et qui prend aussi l'attribut type. Là personnellement je trouve que c'est plus utile de préciser le type veut qu'on peut lier tout et n'importe quoi avec cette balise. Donc si c'est du CSS, autant préciser que le type est du text/css.

Pour les balises auto-fermantes, je comprends totalement vu que moi aussi j'avais du mal avec les balises non fermées au début. J'ai appris le codage pour la première fois en 2010 donc le HTML5 ça n'existait même pas. Ce qu'il y a à savoir c'est qu'en HTML5 on nous donne le choix de fermer ou non les balises orphelines. Donc si tu choisis de les fermer tu peux et si tu choisis de ne pas les fermer, ce n'est pas faux non plus. D'un point de vue esthétique on te dit de veiller à respecter ta décision tout au long de ton code, donc soit que tu fermes toutes les balises soient que tu ne fermes pas le tout. On s'amuse pas à fermer certaines et laisser d'autres.

A savoir que pour les anciens navigateurs et dans n'importe quel code déclaré HTML4 ou XHTML il est impératif de fermer les balises auto-fermantes. Donc on préfère quand même fermer les balises pour que le code soit compatible avec les anciens navigateurs.

La version PHPBB2 de FA que la plupart des forums adoptent est codé en xhtml vu que c'est une ancienne version. Donc quand on met une balise orpheline non fermée dans un template, les balises s'affichent en rouge signe d'erreur. Le code peut très bien fonctionner mais disons que c'est grâce au navigateur qu'il fonctionne. Du coup on laisse le destin de notre code au soin du navigateur ce qui n'est pas une bonne chose vu que chaque utilisateur peut avoir un navigateur différent etc. Bref, il vaut mieux fermer les balises dans les templates si on est sous version classique.

Sache juste que tout ce qui est récent ne ferme pas ses balises. Genre si tu codes sur un éditeur en ligne ou un logiciel de codage, tu verras qu'il est programmé pour coder sans fermer les balises orphelines et ce n'est pas faux. De même sur Google Fonts par exemple tu verras que la balise link n'est pas fermée et c'est pas faux non plus.

J'espère avoir répondu à tes questions, si tu en as d'autres n'hésite pas


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Ven 15 Déc - 19:36
Haha, oui, je parlais bien de "lang" mais comme j'ai mis toute la balise html mais sans la balise code, il s'est envolé, j'suis pas douée ! XD

Je comprends tout mieux maintenant, merci ! J'ai pas d'autres questions pour le moment
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2063
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Ven 15 Déc - 19:40
Je t'envoie des explications en pavé désolée x)

Petite question : tu codes sur un logiciel ? en ligne ?


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Ven 15 Déc - 19:58
Non j'utilise pas de logiciel, je code directement sur mon forum de test en général. J'ai déjà essayé le site CodePen une fois sinon, et j'aime bien. Si je devais coder avec un site, c'est lui que je choisirais je pense.
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2063
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Ven 15 Déc - 23:52
Oui Codepen c'est bien, tu n'es pas obligé d'avoir un logiciel mais utiliser un éditeur de texte orienté codage a beaucoup d'avantages. Quand je parle d'éditeur Codepen est inclu bien entendu, c'est un éditeur en ligne qui a la même fonction (ou presque) que le logiciel.

On passe donc à l'indentation qui est un code super génial de la mort qui tue, ou du moins c'est ce que je croyais quand j'ai vu le mot la première fois Nana

En réalité, l'indentation est une procédure qui permet simplement d'écrire le code de façon à ce qu'il soit clair et lisible. Quand le code est lisible, on peut facilement le modifier, le corriger et on a moins de chance d'oublier de fermer une balise ou de la fermer deux fois, bref, on fait moins d'erreur puisqu'on peut voir clair dans le code et on peut tout aussi le corriger facilement.
Ceci est possible simplement avec des espaces et des sauts de ligne. La W3C qui est l'organisation qui standardise le HTML et qui a été fondé par l'inventeur du HTML d'ailleurs, nous dit que quand un élément est à l’intérieur d'un autre, on décale le dernier de deux espaces. Au fait c'est simple. ça ressemble à la hiérarchie des titres dans un article par exemple.
Grand titre
--Titre moins grand
----Sous titre
------ Un sous sous titre

Le principe est le même sauf que là on n'oublie pas de fermer chaque balise au même niveau de la balise ouvrante qui lui correspond.
Voyons donc un exemple concret

Voici mon code compressé :


Ici on ne peut vraiment pas savoir de quoi il s'agit sans tout lire

Et le même code indenté :


Comme tu peut le voir ici, on peut facilement dire en regardant le code qu'on a une page html qui contient 4 paragraphes. En plus c'est joli et propre.
Dans l'exemple, quand on passe de body à div, on mets deux espaces et ainsi de suite. les éléments qui ont le même niveau doivent avoir le même axe vertical.

Remarque que pour mettre le code dans un message sur FA, il faut au contraire le compresser puisque les messages sont faits pour écrire du texte et du BBcode et non du HTML. Ils prennent en considération chaque saut de ligne et donc si tu colles le code indenté tu auras beaucoup de saut de ligne ce qui va déformer ta fiche. De plus le CSS indenté ne fonctionne pas dans les messages.

Mon astuce est donc de coder tranquillement sur un logiciel de codage (Brackets pour ma part) ou un site de codage en ligne (Codepen ou JSfiddle) donc je peux indenter mon travail et ça sera clair et net.

Quand je finis, je compresse mon code grâce à ce site
Ce qu'il faut faire c'est aller dans les options à droite et sélectionner "aggressive minimization" pour supprimer tous les espaces et sauts de ligne ou "advanced" pour garder quelques sauts de lignes.

Imagine que tu codes un tableau ou une grille de 8 colonnes et 20 lignes, si ton code n'est pas indenté tu t'y perds facilement. Tu ne sais jamais sur quelle ligne ou cellule tu te trouves tellement les balises sont compressées et collées les unes aux autres. C'est la même chose pour les templates, les PA ou n'importe quelle structure avec beaucoup de codes.

Est-ce c'est clair ? As-tu des questions ?


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 16 Déc - 1:13
Oui, c'est très clair !

Je vais mettre ton site pour compresser dans mes marque-pages, je savais pas que ce genre de site existait, c'est sûr que ça va être plus simple de faire comme tu dis plutôt que de coder direct sur mon forum de test et m'y perdre :'3

Est-ce que je devrais m'inscrire sur CodePen d'ailleurs ?
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2063
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Sam 16 Déc - 1:57
Tu n'es pas obligée de t'inscrire. Perso je l'utilise depuis des mois mais je me suis inscrite il y a à peine 15 jours ou un peu plus. L'avantage de l'inscription est que tu peux sauvegarder ton code sur le site et tu peux aussi le partager. Le problème de Codepen c'est qu'il offre à peine 10 pages mais je ne sais pas trop si c'est par compte ou par mois c'est à vérifier. J'étais plutôt inscrite sur JSfiddle et il me semble illimité mais je trouve que Codepen est un peu mieux niveau esthétique. Surtout que dans Codepen je peux mettre les trois onglets HTML, CSS et JS à gauche et voir l'aperçu à droite c'est vachement plus clair.
Actuellement je code sur Brackets le logiciel parce que avec le logiciel je peux utiliser des raccourcis pour taper des balises en une fraction de seconde et donc je gagne énormément de temps par rapport au site. D'ailleurs Brackets permet aussi une visualisation en temps réel du code. Mais bon je dirais que ça sert plus quand le code est très long ou quand je code pour des commandes comme ça j'ai le code enregistré sur mon PC et je peux coder partout même hors ligne.
Si tu veux en savoir plus sur Brackets il y a un sujet dédié au logiciel dans les tutos. Je t'aurais donné le lien directement mais vu que je répond depuis l'application sur le telephone c'est un peu difficile. Donc je te laisse allez voir par toi-même si ça t'intéresse.

Vu qu'on va aborder la partie intéressante dans notre cours qui est les balises communes et que tu as dit ne pas utiliser les balises sémantiques, laisse-moi te demander quelle est la différence entre div et span ?

Envoyé depuis l'appli Topic'it


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Sam 16 Déc - 17:27
Je me renseignerais sur Brackets plus tard alors, pour l'instant, je pense pas vraiment en avoir besoin, je pense que CodePen me suffira ^^

La différence entre div et span, c'est que div c'est un bloc alors que span, non. Hu, je m'exprime mal, mais donc, en gros, les div, ça fait un retour à la ligne avant et après, et tu peux déterminer une largeur et une hauteur, mettre une barre de défilement, des marges, etc., et les span ça met pas de retour à la ligne, tu peux le placer au milieu d'un texte pour affecter juste les mots que tu mets dans la balise, et donc on peut pas mettre de marges ou une largeur et une hauteur.
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2063
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Sam 16 Déc - 23:24
D'accord.

Les balises non sémantiques : div / span

Tu connais bien la différence, bravo, donc on ne va pas s'attarder dessus.

div vient de "divide" ou diviser, va donc diviser ou séparer en bloc un élément du reste du contenu et génère un saut de ligne.
span va entourer du texte et le séparer sur la même ligne pour lui appliquer par exemple une mise en forme différente.

div et span sont des balises non-sémantiques, c'est à dire qu'elles ne décrivent pas leur contenu. A l'inverse des balises sémantiques comme par exemple table ou nav qui décrivent leur contenu. (table on sait automatiquement que c'est un tableau, nav on sait que c'est une barre de navigation etc).

Sache qu'il est toujours préférable d'utiliser des balises sémantiques pour le codage. Pourquoi ? Simplement parce que d'une part ça facilite la mise en forme et d'autres part ça décrit le contenu. Donc c'est plus clair et lisible. Imagine que tu codes rien qu'en div et span. Tu veux modifier un sous titre, bah tu vas devoir chercher partout dans le code la div où tu as mis le sous-titre. Avec une balise sémantique c'est plus simple de chercher h2 ou h3 et hop voilà ton sous-titre.

Une autre utilisation qui me facilite la vie personnellement quand je veux insérer une barre de défilement, je vais pas chercher les div où il y aura du texte en trop, c'est trop casse-tête. Dans mon CSS j'introduis p {overflow: auto;} et voilà, là où il y aura des paragraphes il y aura une barre de défilement si nécessaire.


avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Dim 17 Déc - 14:29
Ouais, je comprends.

Mais, ça se code de la même façon que les div et span après ? Enfin, je veux dire... Tu m'avais déjà fait la remarque comme quoi je devrais utiliser les balises h pour les titres sur un exercice de fiche RP et donc j'avais essayé après d'utiliser h1 pour la PA que j'ai fait en exercice, mais j'obtenais pas le résultat que je voulais, c'est pour ça que je suis revenu à un span.

Ce que je veux dire, c'est qu'avec exactement la même classe css, j'obtiens ça : https://zupimages.net/up/17/50/jjsd.png

J'imagine qu'il y a quelque chose que je fais mal ?
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2063
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Dim 17 Déc - 23:32
ça se code de la même façon, la différence est au niveau de paramètres par défaut. Donc les balises sémantiques nous facilitent un peu la tâche pour le CSS parce qu'elles sont des propriétés CSS par défaut. Les div et span non, ça écrit du texte brut normal. Donc la différence entre le premier résultat et le 2ème sur ton image vient du fait qu'un titre h1 est par défaut grand et en gras. Donc tu n'as pas besoin de lui attribuer un font-size pour l'agrandir ni un font-weight pour le mettre en gras. Bien sûr tu peux changer ça si tu veux.
Donc pour ton image par exemple tu peux mettre font-weight: normal; ce qui va annuler le gras des titres par défaut et tu auras le même résultat.



avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 152
Membre timide
Voir le profil de l'utilisateur
# Re: Classe N°3 | Tigrlionle Lun 18 Déc - 17:53
Ça m'a l'air plus contraignant qu'autre chose en fait... Parce que du coup, il faut que je sache pour chaque titre (h1, h2, etc) quelles sont leurs propriétés par défaut ?

EDIT : J'ai essayé de rajouter font-weight:normal dans le css, ça enlève bien le gras mais ça laisse les grosses marges en haut et en bas du texte, comment je dois faire pour enlever ça ?
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2063
Rose des sables Designer
Voir le profil de l'utilisateurhttp://graphxstyle.org/
# Re: Classe N°3 | Tigrlionle Mar 19 Déc - 1:06
Tu peux déjà enlever les padding si tu en as et utiliser margin-top / margin-bottom pour réduire les marges.

C'est vrai que ça peut paraître contraignant mais en réalité il suffit d'utiliser la bonne balise à la bonne place. D'ailleurs si on a des div et des span c'est bien parce qu'à certains endroits et dans certaines situations on ne peut pas utiliser les balises sémantiques ou on n'en voit pas l'utilité si ce n'est pas pour compliquer les choses.
Je ne te dis pas de ne plus mettre des div, loin de là, d'ailleurs sur les messages c'est plus simple de coder en div et span. Les balises sémantiques te serviraient dans certaines situations et donc il est intéressant de les connaitre.
Imagine par exemple que tu veux mettre un gros titre avec des marges avant et après bah c'est plus simple d'utiliser un heading (h1, h2 ...). Tu veux mettre du texte dans un bloc, il est plus esthétique de mettre un paragraphe (p) qui a une marge en haut et en bas par défaut que de devoir ajouter une marge ou un padding à une div. Tu veux lister des éléments en les numérotant, il est plus simple d'utiliser une liste ordonnée, la balise de citation pour avoir le contenu un peu décalé par rapport au reste etc.

Mais si tu veux on peut très bien faire quelque chose de simple, une fiche avec des div et span avant de parler des balises sémantiques.


Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum