avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Classe N°6 | Carolinele Sam 26 Mai 2018 - 18:11
Coucou @Caroline, et bienvenue dans ta classe.

Je mets en rappel ton formulaire d'inscription :
Spoiler:
Tes connaissances en codage : Je connais à peu près le langage HTML même si c'est surtout les balises de bases que je connais ^^
Ton but : J'aimerais pouvoir coder moi-même mes éléments pour mon/mes forum(s)
Type de formation : [X] pour forumactif uniquement
Motivation : Ce qui me motive pour apprendre ? Bah déjà j'ai vu que vous faisiez des codes magnifique sur Epicode et j'aimerais pouvoir faire pareil même si j'aime bien faire vivre le LS ^^
Disponibilité : Je suis disponible presque tous les jours
Expérience en codage : J'ai rien fait pour le moment
L'anglais et toi : Je maîtrise plutôt bien je pense
Autres : Merciiiii beaucoup ♥️

Comme tu as dit connaitre les balises de base, 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] (juste pour le plaisir)
[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 les autres balises que tu connais et qui ne figurent pas dans mon questionnaire :3

Je te laisse donc ce petit travail et je vais en attendant finir mes catégories :3



avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Sam 26 Mai 2018 - 19:24
Hey ! Merci de m'avoir acceptée ♥️

C'est quoi le HTML et à quoi ça sert
Alors le HTML (Hpertext Markup Langage si je me trompe pas) est un langage qui nous permet de faire le "squelette" du code. Si je ne me trompe pas, c'est avec ce langage qu'on définit comment sera le code.

Quel est la différence entre le HTML et le BBcode
Tandis que les balises du langage HTML sont entre <>, celles du BBcode sont entre []. Le BBcode est souvent décrit comme plus simple car son écriture est plus explicite comme par exemple le langage pour les couleurs :
Code:
[color=blue]Bleu[/color]

Quelle est la structure de base d'une page HTML
Si je ne me trompe pas, une page HTML commence par mais voici une structure de base que j'avais enregistré sur mon ordi :
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>

A quoi sert le charset

Si je ne me trompe pas le charset c'est l'UTF-8 ? Alors pour être honnête j'ai pas vraiment compris ce que c'était lorsque j'en en ai entendu parler. J'ai juste compris que ça servait à coder l'ensemble des caractères informatiques ^^

Comment écrire un commentaire en HTML
Pour écrire un commentaire en HTML il faut le mettre dans ce code :
Code:
<!-- Commentaire -->

Comment coder des titres
Pour coder un titre il faut le placer entre les balises :
Code:
<h1></h1>

Quel est le code nécessaire pour insérer une liste
Lorsque j'avais regarder les bases du codage en m'inscrivant ici, j'ai retenu qu'il y avait deux types de liste :
- l'ordonnée avec les balises
Code:
<ol></ol>
- la désordonnée avec les balises
Code:
<ul></ul>

Comment insérer un tableau (juste pour le plaisir)
Argh.. je sais qu'un tableau se trouve entre les balises
Code:
<table></table>
mais pour le reste... ^^"

Qu'est ce que l'indentation
Si je me trompe pas, l'indentation est ce qui nous permet d'ajouter des espaces dans les codes afin que ce soit plus lisibles ?

Deux exemples de balises ouvrantes / fermantes
Alors voici un exemple de balise souvent utilisée et très connue :
Code:
<b></b>
et un autre d'une balise qui est beaucoup utilisée mais un peu moins connue :
Code:
<strong></strong>

Deux exemples de balises auto-fermantes
Ne maîtrisant pas trop ces balises, je n'en connais que très peu mais les voici :
Code:
<br />
et
Code:
<hr>
.

Quelle est la différence entre div et span
Les balises div permettent de mettre un éléments et qui s'affichent dans un bloc rectangle et si on en met plusieurs à la suite, les éléments se retrouvent l'un au dessus de l'autre. Contrairement aux balises span qui elle permet d'isoler un élément dans le texte et lorsqu'il y en a plusieurs elle se suivent sur la même ligne.


Voilà :3


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
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°6 | Carolinele Sam 26 Mai 2018 - 23:16
De rien, tu sembles connaitre beaucoup de choses même si tu n'as pas encore essayer de coder quelque chose. C'est plutôt cool !

@Caroline a écrit:
C'est quoi le HTML et à quoi ça sert
Alors le HTML (Hpertext Markup Langage si je me trompe pas) est un langage qui nous permet de faire le "squelette" du code. Si je ne me trompe pas, c'est avec ce langage qu'on définit comment sera le code.

H pour Hyper, tu as oublié le y mais ce n'est pas grave. Tu as tout à fait raison, c'est le code qui permet de faire le squelette ou la charpente d'une page web. Que veux-tu dire par "c'est avec ce langage qu'on définit comment sera le code" ?

@Caroline a écrit:Quelle est la structure de base d'une page HTML
Si je ne me trompe pas, une page HTML commence par < !DOCTYPE HTML > mais voici une structure de base que j'avais enregistré sur mon ordi :
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>
Comment ça enregistrer sur ton PC spèce de tricheuse /pan.
Est-ce que tu connais à quoi sert chaque balise dans ce code ? Pense-tu pouvoir le reproduire par toi-même ?

Comment coder des titres
Pour coder un titre il faut le placer entre les balises :
Code:
<h1></h1>
Connais-tu les autres niveaux de titres ? Genre les sous-titres etc.

@Caroline a écrit:Qu'est ce que l'indentation
Si je me trompe pas, l'indentation est ce qui nous permet d'ajouter des espaces dans les codes afin que ce soit plus lisibles ?
T'es la première élève à répondre à cette question, bravo :)

Deux exemples de balises ouvrantes / fermantes
Alors voici un exemple de balise souvent utilisée et très connue :
Code:
<b></b>
et un autre d'une balise qui est beaucoup utilisée mais un peu moins connue :
Code:
<strong></strong>

Connais-tu la différence entre b et strong ?

Deux exemples de balises auto-fermantes
Ne maîtrisant pas trop ces balises, je n'en connais que très peu mais les voici :
Code:
<br />
et
Code:
<hr>

Pourquoi tu as mis un slash (/) dans br et pas dans hr ? Sais-tu à quoi sert la balise hr ?
.
Je me permets de te poser de petites questions sur certaines choses pour mieux situer ton niveau.


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Sam 26 Mai 2018 - 23:25
Hey :3
Oups je me disais bien que je l'avais écrit trop vite mon "Hyper" ^^"
1- Pour moi le "c'est avec ce langage qu'on définit comment sera le code" signifie que c'est grâce qu'on définira la mise en page du code enfin je pense ^^

2- On a pas le droit d'enregistrer ? XD
Bah il y a certains éléments qui me disent quelque chose comme pour le titre et la feuille CSS mais le reproduire moi-même je pense pas ^^"

3- Yep je le connais mais j'ai pensé qu'il ne fallait mettre qu'un exemple ^^

4- Oh ? C'est vrai ? :o

5- Si je ne me trompes pas b c'est pour mettre le texte en gras comme et strong c'est pour le mettre en avant comme ici

6- Le slash ? Je pense que c'est parce qu'on peut l'écrire des deux manières que je l'ai pas mis ^^ Et pour la balise hr c'est pour insérer une ligne de séparation non ?

Je vois ^^ Merci de t'occuper de moi ♥️


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
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°6 | Carolinele Sam 26 Mai 2018 - 23:56
D'accord c'est tout bon :3

On va passer le programme HTML en éclair :3 on va surtout faire de la pratique comme ça tu pourras faire des choses par toi-même.

Voici donc le programme :

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)

Sans plus attendre je vais directement à l'intro, juste pour compléter ce que tu as dis :3

- HTML c'est quoi ?
HTML (Hypertext Markup Language)

@Caroline a écrit:est un langage qui nous permet de faire le "squelette" du code. Si je ne me trompe pas, c'est avec ce langage qu'on définit comment sera le code.

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.
A savoir que le HTML est la base de tout le web. Toutes les pages que tu visites tous les jours en ouvrant ton navigateur sont à base de HTML.

@Caroline a écrit:Pour moi le "c'est avec ce langage qu'on définit comment sera le code" signifie que c'est grâce qu'on définira la mise en page du code enfin je pense ^^

Attention, le HTML ne fait pas de mise en page. Il se contente de créer le contenu brut, du contenu noir sur blanc. Il ne sera donc jamais utilisé tout seul. On a besoin du CSS pour tout ce qui est mise en forme.

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.

- HTML VS BBcode :

Tandis que les balises du langage HTML sont entre <>, celles du BBcode sont entre []. Le BBcode est souvent décrit comme plus simple car son écriture est plus explicite comme par exemple le langage pour les couleurs.

En effet, il y a une différence de forme entre le HTML et le BBcode dans l'utilisation des crochets au lieu des chevrons.
Et comme tu l'as dit le BBcode est un langage simplifié. Remarque qu''il n'y a pas de balise couleur en HTML. Donc le BBcode fusionne les fonctionnalités du HTML et du CSS puisqu'il permet au même temps d'introduire du contenu et une mise en forme rapide.

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. 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.

(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)

Voilà ce sera tout, est-ce que tu as des questions ?


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Dim 27 Mai 2018 - 18:46
Nope je pense avoir tout compris ! :3


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
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°6 | Carolinele Dim 27 Mai 2018 - 19:17
Coucou :3

Voici un petit schéma pour connaitre les termes relatifs au HTML.



Si tu as des questions n'hésite pas :3


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Dim 27 Mai 2018 - 20:15
Bonjour :3

Pour l'attribut, il y en combien de différents ?


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
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°6 | Carolinele Lun 28 Mai 2018 - 1:28
Alors il y a beaucoup d'attributs, peut-être une centaine :)
Voici une liste non exhaustive d'attributs Attributs . C'est surtout pour te donner une idée sur le nombre tu n'es pas obligé de les connaitre tous.
Ce qu'il faut savoir c'est qu'il y a deux types d'attributs. Les attributs universels qui sont communs à toutes les balises et d'autres attributs spécifiques à certaines balises.

Les attributs universels sont par exemple :
title : sert à mettre un petit titre ou description de l'élément.
class: pour définir un nom qu'on va utiliser pour assigner du CSS ou JS à un élément
id: va définir un identifiant unique à un élément, il servira pour le CSS, le JS ou pour créer un lien vers cette élément.
style: pour ajouter du CSS directement dans la balise
lang: définit la langue où l'élément est écrit ou la langue qu'il faut utiliser pour cet élément.

Pour les attributs spécifiques, on a par exemple
accept: qui est le premier dans la liste que je t'ai donné, donc c'est noté devant form, input et donc c'est un attribut utilisé uniquement dans ces deux balises qui sont pour infos des balises de formulaire.
href: tu as surement déjà vu cet attribut dans les liens, (href : Hypertext reference) sert donc à mettre l'URL de ce qu'on veut lier.
autoplay: on va l'utiliser dans la balise audio ou video et comme son nom l'indique, il permet que le media démarre dès le chargement de la page. Cet attribut (comme d'autres) n'a pas besoin de valeur, on met juste l'attribut seul dans la balise.

On verra un bon nombre d'attribut selon les balises qu'on va voir donc ne t'inquiète pas pour ça.


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Lun 28 Mai 2018 - 7:49
D'accord ! Merci :3


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
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°6 | Carolinele Lun 28 Mai 2018 - 12:58
Coucou :3

On passe aux choses sérieuses :3
On va voir donc les balises communément utilisées.

Dis-moi tout ce que tu sais sur les balises pour coder les titres et les paragraphes.


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Lun 28 Mai 2018 - 13:28
Coucou :3
Si je me trompes pas, les balises des titres peuvent être déclinés jusqu'à six fois comme ici :

Titre1


Blabla


Voici un sous-titre d'un sous-titre


Encore deux :3


On y est presque :3

Et voilà ! :3


Et pour les paragraphes c'est entre les balises
Code:
<p></p>

Voilà tout ce que je sais :


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
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°6 | Carolinele Lun 28 Mai 2018 - 14:26
C'est bien tout ça, bravo :3

Comme tu peux le voir, les titres ont pris automatiquement le CSS du forum quand tu les as mis directement dans ton message sans la balise code.

Mais avant de parler des balises voyons d'abord leurs types.

On peut diviser les balises en deux types selon trois critères :
- double ou auto-fermante :
* Comme tu le sais déjà, certaines balises se présentent en paire, l'élément est donc placé entre la balise ouvrante et la balise fermante
Exemple : <div> contenu </div>
* D'autres sont dites auto-fermantes ou orphelines et donc on met le contenu dans la balise. Rappelle-toi quand j t'ai demandé pourquoi tu as fermé une balise et pas l'autre. En fait les balises orphelines se ferment avec un slash à la fin dans toutes les anciennes versions de HTML sauf pour la dernière version. 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, soit tu fermes toutes les balises auto-fermantes soit tu ne fermes aucunes.
Exemple : <img src="url le l'image" /> ou <img src="url le l'image">
On remarque que le contenu est dans la balise (dans l'attribut src)

- Block ou inline :
On peut tout aussi diviser les balises 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. On peut définir une largeur et une hauteur à notre bloc et lui mettre des marges.
Exemple : la balise double div.
Code:
Ma phrase <div> présente un retour </div> à la ligne.
Résultat :
Ma phrase
présente un retour
à la ligne.
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 et une hauteur parce qu'elles prennent celle du bloc qui les contient.
Exemple : 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.

- 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.
Si tu te rappelles dans l'intro on a dit que le HTML est un langage descriptif parce que les balises décrivent leur contenu. On essaie donc tant que possible d'utiliser des balises sémantiques et éviter les div et span.

Revenons donc aux titres et paragraphes.
Ces deux balises sont donc toutes les deux doubles et sémantiques. Sont-elles inline ou block ? Je te laisse répondre à cette question.

Les titres sont représentés par h pour heading
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.
Les titres ont une mise en forme par défaut et c'est là l'intérêt d'utiliser les balises sémantiques. Sache que 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 (p pour paragraph c'est évident): ils ont aussi une marge avant et après le texte, cette marge est égale à une ligne de la même taille que ton texte, en gros ça égal un saut de ligne simplement.

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



Remarque qu'on peut facilement différencier les titres et les paragraphes même sans CSS.

Exercice :
Sur : http://codepen.io/pen/
On va créer cette fiche très simple.


Donc dans la partie HTML je te laisse créer deux titres et un paragraphe, bien sûr les titres ne seront pas du même niveau.
Pour gagner du temps tu peux taper le nom de la balise et cliquer sur la touche tab et la balise se crée automatiquement. De même pour le texte, tu tapes lorem et tu cliques sur tab.


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Lun 28 Mai 2018 - 14:39
Hey !
Est-ce que c'est cela que tu voulais que je fasse ?

https://codepen.io/anon/pen/bKbozm#anon-login


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
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°6 | Carolinele Lun 28 Mai 2018 - 15:12
C'est parfait

Est-ce que tu connais un peu de CSS ?
On ne va pas voir le CSS tout de suite mais si tu veux faire une petite mise en forme comme moi, on va dans la partie CSS et on crée ce qu'on appelle des règles.

On écrit donc le sélecteur (ce qui va nous permettre de sélectionner la partie dans le code qu'on veut mettre en forme). Ici on va utiliser simplement le nom des balises, suivi de deux accolades. A l'intérieur des accolades on va écrire ce qu'on appelle des déclarations CSS. On va donc faire quelque chose de vraiment simple : color pour la couleur, background pour l'arrière-plan et width pour la largeur.
Exemple :
Code:
h1 {
  color: white;
  background: skyblue;
  width: 500px;
}

Je te laisse donc faire le reste, pour moi j'ai pris "beige" pour la 2ème couleur, tu peux choisir ce que tu veux.


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Lun 28 Mai 2018 - 15:24
Voilà c'est fait ! :3
Je connais un petit peu mais je maitrise pas vraiment ^^


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
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°6 | Carolinele Lun 28 Mai 2018 - 15:49
Attention on va mettre la propriété text-align dans la partie CSS.

Code:
<h3 text align = right>

Ici si tu examines ce bout, tu as ajouté *fait le compte* 4 attributs bizarres dans ta balise x)

Sinon on a un espace entre le petit titre et le paragraphe, ce qui est normal vu que les deux balises ont une marge automatique avant et après. Pour enlever cet espace on va annuler cette marge par défaut avec "margin: 0"
Et pour que notre texte ne soit pas coller aux bords on utilise la propriété padding qui veut dire rembourrage ou remplissage. Elle va donc remplir notre bloc de l'intérieur avec de l'espace. Dans mon exemple j'ai mis "padding: 20px" partout.

Tu peux aussi mettre une hauteur à ton texte avec la propriété "height" de la même façon que width.


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Lun 28 Mai 2018 - 16:47
Oups dans ma tête c'était en html qu'on le mettait mais c'est rectifié !
J'ai apporté les modification que tu m'avais indiqué :3


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
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°6 | Carolinele Lun 28 Mai 2018 - 18:50
Tu as fais du bon travail, bravo !
Tu peux tout aussi centrer ton titre et/ou justifié ton paragraphe avec les valeurs de text-align: center et justify.

J'espère que tu es un minimum satisfaite de ce que tu as fait :3

Donc on va passer aux images. Et encore une fois je te laisse me dire ce que tu connais sur la balise pour insérer une image.


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Lun 28 Mai 2018 - 18:58
C'est fini ? :o

Pour mettre une image il faut passer par les balises :
Code:
<img/>
ou
Code:
<img>
en auto fermante et
Code:
<img src="lien" alt="texte" title="titre" />
celle-là pour les balises en paires :3


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
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°6 | Carolinele Lun 28 Mai 2018 - 19:08
On va ajouter une image dans le code bientôt, ce n'est pas encore fini mais on va pas avancer sur le CSS non plus vu qu'on traite la partie HTML.

Alors, je suis un peu confuse par ce que tu dis :)
Il n'y a qu'une seule balise image est c'est celle que tu as mis à la fin.

Image

img est une balise orpheline (auto-fermante). Elle s'écrit de cette façon :
<img src="epicode.jpg" alt="la bannière d'Epicode" />

- src (source) est un attribut obligatoire. Comme son nom l'indique, il prend la source de l'image et donc sa localisation, c'est à dire son URL.
On rappelle que le slash n'est plus obligatoire dans le HTML5, mais il l'est dans le xHTML (version 4).

- alt (alternative) cet attribut est important pour rendre ton site accessible à tous les utilisateurs et notamment aux mal-voyants. C'est le seul moyen de traduire le contenu de l'image à ces personnes et donc il faut toujours mettre une description claire quand il s'agit d'une image importante. Pour les images décoratives qui n'ont rien à voir avec le contenu, on ne met pas alt. On note que alt sert aussi quand l'image ne charge pas à cause de la connexion trop lente ou peu importe, dans ce cas on peut voir la description en passant la souris sur l'icône de l'image corrompue.

Exemple :

Code:
<img src="https://www.123-stickers.com/6542-6913-large/Array.jpg" alt="une rose rouge">
Résultat :
une rose rouge

Maintenant je vais faire une faute exprès dans le lien pour empêcher le chargement de l'image
Code:
<img src="https://www.123-stickers.com/6542-6913-large/A+.jpg" alt="une rose rouge">
Résultat :
une rose rouge

title est comme on l'a dit avant un attribut universel qu'on peut mettre dans toutes les balises. Franchement quand je mets alt je donne déjà une description à mon image donc je trouve inutile d'ajouter title, mais si tu le mets ce n'est pas faux non plus. C'est juste que je suis flemmarde et je ne mets que l'essentiel x). Y a des gens qui ne mettent même pas alt donc si le mets c'est déjà cool *sort*


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Lun 28 Mai 2018 - 19:10
Oh ? Pour moi les deux premiers étaient bon :/
Enfin c'est ce que j'avais vu quand j'avais lu l'introduction au codage ^^"
D'accord :3


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
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°6 | Carolinele Lun 28 Mai 2018 - 19:18
Pour t'expliquer :

Code:
<img> <!--  ou  <img />      -->

est bien la balise mais cette balise ne fonctionne pas sans l'attribut src, c'est logique parce que tu as besoin du lien de l'image pour afficher une image. Donc c'est une balise auto-fermante, elle n'existe pas en paire.


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Lun 28 Mai 2018 - 20:01
Ah d'accord ! Merci :3

PS : J'ai fait ça; est-ce que tu peut me dire si c'est bien ?

Code:
<h1>Un petit titre</h1>
<h5>Une petite citation</h5>
<h6>Une petite date si cela est un message rp</h6>
<p>Un petit (ou grand) rp qui peut être aussi long que ça ou même plus ! Tu veux un exemple ? Regarde c'est magique : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum magnam aperiam repudiandae laborum dicta nesciunt autem ut, sit obcaecati temporibus sequi placeat excepturi quod nostrum, quibusdam distinctio vel cumque, perspiciatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero odit aperiam corporis recusandae, eos nam porro ut, vel, consectetur voluptate libero eum tenetur dolores voluptatem aliquid quos odio perspiciatis sunt?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum magnam aperiam repudiandae laborum dicta nesciunt autem ut, sit obcaecati temporibus sequi placeat excepturi quod nostrum, quibusdam distinctio vel cumque, perspiciatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero odit aperiam corporis recusandae, eos nam porro ut, vel, consectetur voluptate libero eum tenetur dolores voluptatem aliquid quos odio perspiciatis sunt?</p>
<h6>Un petit mot pour la fin ?</h6>


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
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°6 | Carolinele Mar 29 Mai 2018 - 1:21
Coucou :3

Alors c'est bien pour un début, bravo.
Laisse-moi te dire une chose, une citation ou un mot ne sont pas des titres donc on ne va pas utiliser les balises hn pour ça. Les balises hn sont réservés pour créer la hiérarchie des titres dans une page ou un article.
Mais garde bien ton code quelque part, on va voir assez vite comment le corriger.

Je viens de remarquer qu'il y a une petite question à laquelle tu n'as pas répondu.
Moi ! a écrit:Revenons donc aux titres et paragraphes.
Ces deux balises sont donc toutes les deux doubles et sémantiques. Sont-elles inline ou block ? Je te laisse répondre à cette question.

On reviendra alors à notre exercice précédent et on va insérer une bannière juste après le titre.
Voici donc le lien de l'image https://img2.lght.pics/jUzg.png


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