avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Classe N°7 | Shanriyale Jeu 19 Juil 2018 - 21:58
Coucou @Shanriya, et bienvenue dans ta classe.

Je mets en rappel ton formulaire d'inscription :
Spoiler:
Tes connaissances en codage : Alors alors, disons que je connais les "bases" les div, span, id, class et quelques termes de css. Mais je ne sais absolument pas faire de tableau ou de truc en float, j'y comprends rien Mais je sais très bien changer un texte (en css je connais à peu près trois ou quatre propriété sur toutes celles existantes :P), faire un paragraphe, etc. Je peux te donner un exemple si tu veux, même si j'ai pas d'exemple de codage sous la main, n'en ayant jamais fais en entier.
Ton but : Les templates .w. J'aimerais, au final, réussir à coder entièrement mes forums sans demander de l'aide aux gentils graphistes d'Epic en fait, ils ont déjà assez de travail comme ça ici XD
Type de formation : [X] codage général, [X] pour forumactif uniquement; j'avoue que j'adorerais savoir faire les deux, mais si ça pose soucis, ont peut se concentrer sur forumactif uniquement :)
Motivation : Alors je suis vraiment motivée. J'ai toujours rêvée d'apprendre à coder, mais même si je suis des tutos ou autre, je comprends que la moitié des trucs, l'autre moitié reste dans le flou néantique de mon cerveau XD (oui j'invente des mots ;w;)
Disponibilité : Pour l'instant, comme je suis en vacance 7j/7. Mais au mois de Septembre (ou Octobre, dépends de quand la maison sera terminée) je vais déménager, donc durant genre une semaine ou deux je serai indisponible **'
Expérience en codage : Alors j'ai paaaaaas vraiment de codage sous la main, mais je peux te montrer un exemple de texte que j'aime beaucoup faire quand il est important :)
L'anglais et toi : Errrh, ont as paaaas copain copain, mais disons que je me débrouille et que je comprends les trucs simple xD
Autres : Merci beaucoup d'avance et merci d'avoir acceptée que je m'inscrive maintenant ♥️

Pour bien démarrer, je te demanderai de répondre au mieux à ce petit questionnaire :

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]Quel est le code nécessaire pour insérer une liste[/b]
[b]Comment insérer un tableau[/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]
[b]Quelle est la différence entre div et span[/b]

N'hésite pas à citer d'autres balises que tu connais et qui ne figurent pas dans mon questionnaire si tu veux, le but étant de bien situer ton niveau :3

Tu as dit avoir fait un code pour un titre si j'ai bien compris, enfin même si ce n'est pas un code entier je veux bien voir ce que tu peux faire :3

Amusons-nous bien dans ce cours.


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Ven 20 Juil 2018 - 11:15
Coucou :D Merci beaucoup de me prendre en charge ma Reine *-* Alors aucun soucis pour te filer le code, je te met ça tout en bas des réponses à ton questionnaire ♥️


C'est quoi le HTML et à quoi ça sert À structurer la page web. C'est ce qui va servir de "base" au codage, en gros. C'est, un peu, l'habillage (alors que le css est le décoratif, fin je le vois comme ça xD). Ça veut dire Hypertext Markup Language.
Quel est la différence entre le HTML et le BBcode Le html peut être utilisé partout, autant dans le panneau des administrateurs que sur le forum directement. Il sert également à créer de A à Z un site web entier (avec, bien évidemment, du css mélangé). Le BBcode quant à lui ne peut être utilisé que sur les forums. C'est du html énormément simplifié, mais personnellement je ne m'en sers quasiment jamais, préférant l'utilité et la "complexité" du HTML (par complexité j'entends que c'est bien plus complet ^^)
Quelle est la structure de base d'une page HTML
Code:

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  ...
  <!-- Le reste du contenu -->
  ...
</body>
</html>
Doctype; Précise de quel type de document va suivre, html ici comme html suit.
HTML; Regroupe les méta-infos. C'est lui qui va contenir les deux principaux éléments, Head et Body.
Head; Regroupe toutes les méta-infos, donc ce qui n'est pas directement indiqué sur notre écran. Par exemple, le code title en fera parti, de même que style si on y rajoute du css.
Body; Regroupe tout le reste du contenu HTML et l'apparence est affectés par le css qui sera entre les balises style.
Charset; Je t'avoue que j'ai oubliée à quoi ça sert, mais je me souviens que c'est important.
Link; sert à rediriger vers des documents internes. Il est souvent utilisés pour les polices sur google font ou pour une feuille css externe.
Script; Permet d'ajouter du JavaScript.
A quoi sert le charset Comme dit plus haut, je me souviens plus trop, mais de mémoire, c'est pas genre ce qui gère les accents ?  
Comment écrire un commentaire en HTML
Code:
<!-- Ton Commentaire -->
Et tu peux écrire ton commentaire sur plusieurs lignes, ça va fonctionner, tant que tu termine par --> (fin de mémoire )
Comment coder des titres
Code:
<title>Ton Titre</title>
qui est le titre du document et
Code:
h1, h2, h3 jusqu'à h6
qui est le code des titres, tout en sachant que h1 est pour un titre important et h6 pour un sous-titre. Et plus ont descend, plus le texte est petit.
Quel est le code nécessaire pour insérer une liste Tu as deux codes.
Code:
ol li
et
Code:
ul li
. OL permet de faire une liste ordonné et UL permet de faire une liste non ordonnée. Y a aussi
Code:
dt dd
mais perso' je l'ai jamais utilisé
Comment insérer un tableau Avec le code
Code:
<table>
. Ont peut y rajouter des rowspan, colspan, th, des bordures, un fond, des couleurs pour le texte, etc. Rowspan c'est pour la hauteur et Colspan pour la largeur.
Qu'est ce que l'indentation Errh, si je me souviens bien, c'est le fait de mettre des espaces pour les éléments entre balises non ? par exemple tu vas écrire, pour un code indenté;
Code:

<head>
    <title>Ton Titre>/title>
</head>
Deux exemples de balises ouvrantes / fermantes Balises ouvrante et fermantes sont celles ayant besoin d'une balise au début et à la fin, par exemple
Code:
<head>...</head> ou <title>...</title>
Deux exemples de balises auto-fermantes Alors qu'une balise auto-fermante est une balise nécessitant un / à la fin de celle-ci, mais pas d'autres balises de fermeture. Par exemple
Code:
<img src="..." /> ou encore <br />
(et moi j'ajoute toujours le / à la fin du br XD)
Quelle est la différence entre div et span Div est un bloc, elle ne peut donc être répartie sur plusieurs lignes. Ont peut y ajouter margin, padding, width et height. Il y aura toujours un saut de lignes quand ont l'utilise.

Span est "inline", c'est-à-dire qu'elle peut être répartie sur plusieurs lignes et n'aura pas de saut de lignes. Elle peut être placée à l'intérieur d'un paragraphe.


D'autres balises; et bien je connais les margin, padding, width, height, style, a, b, body, head, em, frame, br, img, a href, link, je connais float mais je comprends pas comment l'utilisé xD, table que je connais mais comprends pas non plus, script, je sais modifier une barre de défilement, et thead et tbody. J'en connais aussi beaucoup en css, mais cela ne veut pas dire que je les comprends


Sinon voici le code que j'utilise pour les titres importants :)
Code:
<font color="#05cfd4">// <b>SENS DU VERRE</b></font>

C'est pas un code folichon, mais j'aime bien quoi xD Et oui, amusons-nous ensemble *-*
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Ven 20 Juil 2018 - 14:31
Hello :3

Oh tu es déjà graphiste c'est cool, félicitations :3

Hm je vois que tu connais beaucoup de choses, ce qui est sympa. On va pouvoir avancer rapidement :3
Shan a écrit:
C'est quoi le HTML et à quoi ça sert À structurer la page web. C'est ce qui va servir de "base" au codage, en gros. C'est, un peu, l'habillage (alors que le css est le décoratif, fin je le vois comme ça xD). Ça veut dire Hypertext Markup Language.

C'est tout à fait correct bravo. J'ajoute que le HTML est un langage informatique de balisage (vu qu'il utilise des balises) ou de description (les balises décrivent leur contenu). Son but essentiel est de créer en effet l'architecture d'une page web.
Et à titre informatif : 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.

Shan a écrit:Quel est la différence entre le HTML et le BBcode Le html peut être utilisé partout, autant dans le panneau des administrateurs que sur le forum directement. Il sert également à créer de A à Z un site web entier (avec, bien évidemment, du css mélangé). Le BBcode quant à lui ne peut être utilisé que sur les forums. C'est du html énormément simplifié, mais personnellement je ne m'en sers quasiment jamais, préférant l'utilité et la "complexité" du HTML (par complexité j'entends que c'est bien plus complet ^^)

Le 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 comme tu l'as dit. C'est un langage simplifié en effet mais qui n'est pas standardisé. C'est à dire que les balises peuvent très bien changer d'un forum à un autre. Par exemple, sur FA pour cacher du contenu la balise est [ hide ] mais sur d'autres plateformes la balise est [ hidden ]. A la différence de HTML qui est standardisé par la W3C et donc universel. Une balise sera donc la même partout sur le net.

A savoir que le BBcode n'est que du HTML simplifié, c'est un langage qui sert plus pour la mise en forme des messages de façon simple. Donc c'est en quelque sorte à la fois du HTML et du CSS.

Il y a en plus une différence de forme entre le HTML et le BBcode dans l'utilisation des crochets [] au lieu des chevrons < >.

(W3C : World Wide Web Consortium est l'organisation fondée par le créateur du HTML et qui s'occupe des mises à jour et la standardisation du HTML et CSS)

Ce sera tout pour l'intro, le reste on va le voir au fur et à mesure selon ce petit programme HTML tout, en passant rapidement ce que tu connais déjà :

Introduction au HTML
- Le HTML c'est quoi ?
- HTML VS BBcode

- Terminologie
Les balises communes
- Les titres
- Les paragraphes
- Les fichiers media (image)
- div VS span
- Les balises de mise en évidence.
Exercice pratique (Partie HTML)

Structure de base d'une page en HTML
Balises communes :
- Les listes
- Les fichiers media (image, audio et video)
- Les liens
- Les tableaux
Exercice libre (Partie HTML)

Pour ton exemple :
Code:
<font color="#05cfd4">// <b>SENS DU VERRE</b></font>

font est une balise obsolète. Elle est aussi morte que le latin *sort*
On verra donc comment mettre en forme les titres dans un sujet ou une fiche selon les normes du HTML5 :3


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Ven 20 Juil 2018 - 17:11
Ooooh je vois :o Comme le code il fonctionnait je croyais il était ok XD merci pour toutes ces explications, j'ai tout bien noté sur papier **


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Ven 20 Juil 2018 - 20:17
Il est important de connaître la différence entre une balise, un attribut et un élément. Voici donc un petit schéma pour connaitre les termes relatifs au HTML, comme ça on se comprendra par la suite.



L'élément est le tout.
La balise est ce qui se trouve entre les chevrons.
L'attribut est ce qu'il y a dans la balise ouvrante ou la balise auto-fermante. On a pas toujours des attributs mais dans certaines balises l'attribut est obligatoire. Par exemple dans la balise du lien a, l'attribut href est obligatoire vu qu'il comprend le chemin vers le lien.

Jusque là c'est juste de la théorie, si tu as des questions n'hésite pas :3


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Ven 20 Juil 2018 - 20:19
Coucou :) Petite question comme ça, peut-on par exemple mettre deux class au paragraphe ? sinon merci pour ce schéma ** étant visuelle, ça rentre beaucoup mieux dans ma tête que par écrit :3


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Ven 20 Juil 2018 - 20:25
Oui on peut avoir deux classes ou plus dans n'importe quel élément. Il suffit de les séparer par un espace de la sorte :

Code:
<div class="class1 class2 class3"> Je suis un bloc </div>

Comme on peut avoir plusieurs attributs dans une balise, je prends cette fois la balise img en exemple.

Code:
<img src="image.png" alt="une image" class="class1" />

src, alt et class sont tous des attributs.


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Ven 20 Juil 2018 - 21:00
Oooooh d'accord je vois, merci **


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Ven 20 Juil 2018 - 21:22
Les balises communes.

On peut diviser les balises en deux types selon trois critères :
- double ou auto-fermante :

Shan a écrit:Deux exemples de balises ouvrantes / fermantes Balises ouvrante et fermantes sont celles ayant besoin d'une balise au début et à la fin, par exemple
 
Code:
 <head>...</head> ou <title>...</title>
En effet ce sont les balises en paire, c'est bon :3

Shan a écrit:Deux exemples de balises auto-fermantes Alors qu'une balise auto-fermante est une balise nécessitant un / à la fin de celle-ci, mais pas d'autres balises de fermeture. Par exemple

Code:
   <img src="..." /> ou encore <br />
(et moi j'ajoute toujours le / à la fin du br XD)

Les balises auto-fermantes sont aussi appelées balises orphelines. C'est le type de balise où on met le contenu dans la balise. Les balises orphelines se ferment avec un slash à la fin dans toutes les anciennes versions de HTML. EN HTML5 il n'est plus obligatoire de fermer les balises avec un slash.
Ceci dit, tu peux soit le mettre soit ne pas le mettre, rappelle-toi juste de garder le même format pour ton code entier. C'est à dire quand tu codes une fiche par exemple ou autre, soit tu fermes toutes les balises auto-fermantes soit tu ne le fais pour aucune. Le br est une balise orpheline donc il va de même pour lui. Si tu fermes les autres il faut mettre le slash dans le br aussi, sinon tu ne mets pas de slash dans toutes les balises orphelines même le br.

Exemple : <img src="url de l'image" /> ou <img src="url de l'image">

- Block ou inline :

Shan a écrit:Quelle est la différence entre div et span Div est un bloc, elle ne peut donc être répartie sur plusieurs lignes. Ont peut y ajouter margin, padding, width et height. Il y aura toujours un saut de lignes quand ont l'utilise.

Span est "inline", c'est-à-dire qu'elle peut être répartie sur plusieurs lignes et n'aura pas de saut de lignes. Elle peut être placée à l'intérieur d'un paragraphe.

Ici tu m'a donné la différence entre div et span selon leur type d'affichage.

Le type d'affichage est défini en CSS par la propriété display.
Les balises dont le type d'affichage est en bloc (display:block) s'affiche sur toute la ligne, c'est à dire qu'on aura forcément un retour à la ligne avant et après la balise. Et comme tu l'as dit on peut définir une largeur et une hauteur à notre bloc et lui mettre des marges, comme la balise div.
Code:
Ma phrase <div> présente un retour </div> à la ligne.
Résultat :
Ma phrase
présente un retour
à la ligne.

Attention par contre au padding qui est une propriété utilisée sur les blocs comme sur les éléments inline.

Les balises de type linéaire (display: inline) s'écrivent sur la même ligne, tu peux les placer au milieu d'un texte ou une phrase ça ne fait pas de saut de ligne et on peut pas leur mettre des marges, une largeur ni une hauteur parce qu'elles prennent celle du bloc qui les contient, comme la balise span.
Code:
Ma phrase <span> ne présente pas de retour </span> à la ligne.
Résultat :
Ma phrase ne présente pas de retour à la ligne.

J'ai mis des exemples parce que je n'ai pas compris ce que tu voulais dire par répartie sur plusieurs lignes, je te laisse donc m'expliquer celà dans ton prochain message.

- sémantique ou non sémantique

Les balises non-sémantiques, sont celles qui ne décrivent pas leur contenu.
Les balises sémantiques sont celles qui décrivent leur contenu.
Les balises non-sémantiques sont par exemple div et span, tu peux mettre tout et n'importe quoi dedans on ne saura pas forcément ce qu'il y aura si on ne lit pas le contenu.
Les balises sémantiques sont par exemple img et p, quand on voit img on sait directement que le contenu sera une image, quand on voit p on sait que c'est un paragraphe.

C'est tout pour l'intro aux balises.


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Ven 20 Juil 2018 - 21:34
Coucou :) Par plusieurs lignes, j'entends comme ton résultat sur le div, des lignes de texte les une par-dessus les autres, désolé, j'oubliais que nous n'employons pas les mêmes mots, désolé :c En tout cas merci beaucoup pour toutes tes informations, c'est hyper bien expliqué, je comprends pourquoi t'es prof **


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Ven 20 Juil 2018 - 21:46
Ah d'accord, ne t'excuse pas, je voulais juste être sûre parce que tu as inversé les deux ^^
Dans ce cas la span ne peut pas être sur plusieurs lignes parce qu'une span ou tout autre balise linéaire ne prend que l'espace nécessaire à son contenu. C'est plutôt la div qui force des sauts de lignes et donc notre contenu est sur plusieurs lignes :3

Merci pour le compliment **, je suis contente de pouvoir t'aider :3

Peux-tu me dire tout ce que tu sais sur les balises de titres hn (je mets n juste pour le nombre de 1 à 6) et la balise de paragraphe p ? :3


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Ven 20 Juil 2018 - 21:53
Aya, j'ai inversée les deux, j'avais même pas fait gaffe /facepalm/

Sinon je connais pas énormément de chose :c Je sais que le p est utilisé pour faire des paragraphes, qu'on peut y mettre une class ou un id, du css. Je sais aussi qu'on peut pas y mettre de br à l'intérieur. Et elle est comprise à l'intérieur de la balise span.

Pour ce qui est des hn comme tu dis :P c'est les niveaux de titres, h1 étant le plus important. Je sais aussi que chaque hn peut avoir un paragraphe, sauf le h1, fin, il peut en avoir, mais c'est moins esthétiques.


C'est tout ce que je sais...


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Ven 20 Juil 2018 - 23:49
Shan a écrit:Je sais aussi qu'on peut pas y mettre de br à l'intérieur.

p génère un paragraphe en effet, d'ailleurs le p vient du mot anglais "paragraph". Un paragraphe normalement est un bloc de texte donc je comprends la logique de ne pas mettre un br dedans. Techniquement le br est un retour à la ligne et si on revient à la ligne en syntaxe ça veut dire qu'on démarre un nouveau paragraphe.

Cependant, si tu mets un br dans une balise p en codage ça va faire un simple retour à la ligne et ça ne va pas faire bugger ton code ou un truc du genre. Donc si jamais t'es dans une situation où tu aura besoin d'un retour à la ligne, y aura pas de mal à mettre un br :3

Shan a écrit:Et elle est comprise à l'intérieur de la balise span.

Là encore, je m'excuse parce que je ne suis pas sûre d'avoir compris.
span est une balise inline. p est une balise block, donc logiquement tu ne peux pas mettre un bloc dans une ligne. Et du coup p ne peut pas être mise à l'intérieur d'une span.

Shan a écrit:Je sais aussi que chaque hn peut avoir un paragraphe, sauf le h1, fin, il peut en avoir, mais c'est moins esthétiques.

Quand tu dis avoir un paragraphe, tu veux dire à la suite du titre ou à l'intérieur ?
hn et p sont des blocs sémantiques, donc qui décrivent leur contenu. C'est pourquoi ils sont un peu spéciaux. Quand tu mets par exemple h1 tu dis au navigateur : ce qu'il y a à l'intérieur est le titre de mon document. Donc logiquement, un titre ne peut être qu'un petit bout de texte, genre, quelques mots. Donc il n'y a pas moyen de mettre tout un paragraphe à l'intérieur d'un titre. C'est une balise bloc qui ne peut pas contenir un autre bloc. Tu peux à la rigueur mettre un span ou une balise de mise en évidence pour mettre un mot du titre en gras ou d'une couleur différente pour le faire ressortir.

Voici donc quelques informations complémentaires :

- Les titres
Comme tu le sais, les titres s'écrivent h en plus du numéro selon l'importance du titre.
h vient du mot anglais "heading" qui veut dire titre, ce terme est surtout utilisé pour les titres des articles de journaux.
On a 6 niveaux en tout mais on utilise généralement un max de trois niveaux sauf si le contenu requière plus.
Remarque que h1 est le titre de toute la page donc il est préférable de n'avoir d'un seul et unique h1 dans notre code, sinon ça risque de faire bizarre.

Ce qu'il y a retenir est que les titres ont une mise en forme par défaut et c'est là l'intérêt d'utiliser les balises sémantiques. Les titres sont par défaut de grande taille (selon le niveau) en gras et ont une grande marge avant et après. La marge est proportionnelle à la taille du titre.

- Les paragraphes

Les paragraphes sont introduits dans la balise double p. Tout comme les titres, les paragraphes ont aussi une marge avant et après le texte, cette marge est égale à une ligne de la même taille que ton texte. Dans en gros c'est un saut de ligne avant et après.

Pour avoir un aperçu de tout ça, voilà à quoi ressemblerait une page avec les 6 niveaux de titres et deux paragraphes.

Tu peux basculer entre les onglets HTML / Result, tu verras qu'il n'y a pas de CSS mais on peut voir les titres en gras et les marges des titres et paragraphes. On peut donc facilement différencier les titres et les paragraphes même sans CSS.



avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Sam 21 Juil 2018 - 4:42
Aaaaaaaaaaaaah d'accord je vois, donc j'étais dans le tord quoi merci pour les précisions ♥️ **


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Sam 21 Juil 2018 - 13:23
Bonjour :3

J'ai essayé de te faire une jolie maquette mais mon photoshop a planté.
Je comprends pas ce qui va pas avec lui.

On va donc utiliser l'exo que j'avais fait pour Caro pour ne pas te laisser en attente.

On va donc faire ça pour commencer :



On va donc le faire sur un éditeur de code comme Codepen ou JSfiddle
Choisis celui qui te plait le plus :3
Tu peux changer l'emplacement des onglets dans change view (codepen) ou settings (JSfiddle)

Donc dans la partie HTML
On va d'abord créer le titre de la fiche, un sous titre (feat...) et un paragraphe.
Pour le texte tu peux taper Lorem et cliquer sur la touche tab et le texte apparaitra automatiquement.

Je te laisse donc créer ces trois balises :3


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Sam 21 Juil 2018 - 18:18
Coucou :3 J'avoue préféré codepen XD sinon pas de soucis pour la maquette, çca m'arrive à moi aussi des fois que ça plante, pour ça que je save énormément souvent XD Sinon pour l'exo, comme ça ? https://codepen.io/Shanriya/pen/GBrXQm


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Sam 21 Juil 2018 - 18:31
C'est très bien :3

On va faire une mise en forme simple à notre titre, tu peux mettre les propriétés que tu connais et dis moi si tu ne connais pas comment faire une étape.

Alors dans la partie CSS.
On va utiliser ce qu'on appelle un sélecteur de type

Le sélecteur est la partie en CSS qui est avant les accolades {}
Un sélecteur de type est un un sélecteur où on met simplement le nom de la balise.

Pour mettre en forme un paragraphe par exemple on met :

Code:
p {
color: red;
}

Alors pour notre titre h1 : on va mettre
- une couleur, j'ai choisi le blanc (white)
- un fond, j'ai mis (skyblue)
- un rembourrage de 20 px (padding)
- une largeur de 500px.
- le texte doit être centré.
- Le bloc doit être au centre de la page (horizontalement)


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Sam 21 Juil 2018 - 18:37
Coucou :) Bon pour la dernière propriété (bloc centré) je t'avoue que je sais pas du tout si c'est la bonne chose :c voilà ce que ça donne ^^ https://codepen.io/Shanriya/pen/GBrXQm


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Sam 21 Juil 2018 - 18:39
En effet la dernière n'est pas la bonne :3

C'est un margin: auto; qu'il faut pour center un bloc.

Connais-tu la différence entre margin et padding ?


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Sam 21 Juil 2018 - 18:39
Errrh, je t'avouerais que pas trop :c et d'accord merci, je met ça **


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Sam 21 Juil 2018 - 19:16
Padding vs Margin

Chaque élément est compris dans une sorte de boite, c'est qu'on appelle en codage, le modèle de boite.
Pour t'aider à comprendre voici un schéma :



Si on prend notre titre h1 par exemple, il est dans un rectangle et donc une boite. Avec le fond bleu il est plus facile de repérer cette boite.

Padding: veut dire littéralement rembourrage ou remplissage. Elle va donc remplir notre bloc de l'intérieur et augmenter l'espace entre le bord et le contenu.
Tu peux par exemple changer la valeur 20px qu'on a mis, en l'augmentant ou diminuant pour mieux voir comment ça agit sur le rendu. Par défaut le padding est 0.

padding est la propriété raccourci des quatres propriétés suivantes :
padding-top / padding-bottom / padding-left / padding-right.

Donc si par exemple on veut ajouter de l'espace uniquement en haut ou à droite sans affecter les autres côté on peut cibler la partie qu'on veut avec ces propriétés.

Margin: Comme on l'a dit quand on a parlé des balises block et inline, margin ne fonctionne que pour les blocs. On ne peut donc pas ajouter une marge à une span ou un lien, et c'est logique vu qu'ils sont supposés ce trouver sur la même ligne. Margin, un peu comme la marge dans une page d'un livre, elle permet de décaler notre bloc par rapport à la bordure de la page ou du bloc voisin. Si on a par exemple deux blocs qui se suivent, margin va assurer que ces deux blocs ne se touchent pas. C'est donc l'espace à l'extérieur du bloc.

Tout comme padding, margin est une propriété raccourcie.
On peut donc mettre : margin-top / margin-left / margin-bottom / margin-right et mettre une valeur différente à chacune.

En plus d'être utilisée spécialement aux blocs, margin a une autre différence par rapport au padding.
margin peut prendre la valeur auto. Cette valeur est spécifique aux marges horizontales (margin-left et margin-right). Elle dit au navigateur, je veux que l'espace restant (si on retire la largeur du bloc) soit partagé entre la marge droite et la marge gauche, et donc mon bloc sera au centre du bloc qui le contient.

Le raccourci : comment ça marche ?

Comme je viens de dire, il y a deux façons générales pour noter les marges ou les paddings. Je vais prendre margin en exemple mais ça s'applique pour les deux :

> Les marges individuelles :
- margin-top
- margin-right
- margin-bottom
- margin-left
Quand on veut utiliser les marges individuelles l'ordre n'est pas important et bien sûr si la marge d'un côté est la valeur par défaut tu n'as pas à spécifier la marge de ce côté.

> Le raccourci :
- margin
Si tu veux utiliser le raccourci, tu n'as plus le droit de mettre les marges individuelles, de plus ici l'ordre est important.

Le raccourci se présente selon le nombre de valeurs fournies de 4 façons :
- margin : top right bottom left; (exemple : margin: 10px 5px 8px 20px;)
remarque que la direction suit celle des aiguilles d'une montre.

- margin : top right/left bottom; (exemple: margin: 10px auto 25px;)
donc on a trois valeurs, la marge du haut et du bas sont différentes mais la marge à droit est égale à la marge à gauche.

- margin : top/bottom right/left; (exemple: margin: 10px 50px;)
ici margin-top = margin bottom et margin-left = margin-right. et donc on a deux valeurs.

- margin : valeur; (exemple: margin: 20px;)
ici la marge est égale de chaque côté.

Voilà ça a pris un moment à rédiger x)
J'espère que c'est clair :3


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Sam 21 Juil 2018 - 19:28
Coucou :3 omg oui c'est hyper clair et hyper bien expliqué, merci pour ce condensé d'explications Reine o/


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Sam 21 Juil 2018 - 20:41
Je t'en prie c'est un plaisir :3

De retour à notre exercice sur codepen.

Pour notre sous-titre :
- un fond (beige)
- une largeur de 500px et un padding de 20px pour qu'il soit de la même taille que le titre.
- une hauteur de 30px
- une couleur (lightgray pour moi)
- et l'alignement à droite.

A savoir que le padding étant à l'intérieur d'un élément, sa valeur fait changer la largeur totale de l'élement, la largeur totale est donc 500px (width) + 40px (padding-left + padding-right).


Pour notre paragraphe je te laisse faire par toi-même suivant le schéma, ma couleur est steelblue.

Tu as du remarquer que je mets les noms des couleurs plutôt que les codes hexadecimal #f5efh5 simplement parce que *roulement de tombour* je suis une flemmarde xD. J'ai la flemme d'aller trouver une jolie couleur sur photoshop et puis copier coller le code x). Ceci dit tu n'es pas obligée de garder les mêmes couleurs que moi :3


avatar
Sexe : Féminin
Date d'inscription : 18/07/2018
Messages : 232
Mini-Graphiste
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Sam 21 Juil 2018 - 20:50
Coucou :) Voilà, j'ai aussi centré les blocs comme pour le titre ^^ AH et j'ai aussi ajouté la bordure en bas **

https://codepen.io/Shanriya/pen/GBrXQm


AH et euh, mon code il a bien un css, il est compris entre les balises style, mais je comprends pas, il s'affiche pas pourtant regarde https://codepen.io/Shanriya/pen/ejgPNY


avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°7 | Shanriyale Sam 21 Juil 2018 - 21:12
Oui pour le CSS j'ai édité parce que j'ai dit une bêtise mais tu m'as repéré xD.
C'est ma faute j'ai mal copié ton code du coup j'ai pas vu le CSS, pardon :3

C'est tout bon bravo **

On va mettre notre bloc parent qui va comporter toute la fiche et on va lui donner un nom de class.
Il sera de 600px de la largeur, couleur du fond aliceblue, et le reste je te fais confiance pour suivre le schéma :3


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