avatar
Sexe : Masculin
Date d'inscription : 12/02/2018
Messages : 262
Designer
Voir le profil de l'utilisateur
# Classe de Spikele Mar 22 Mai 2018 - 18:03
@spike voici ta classe ! Je vais commencer par la toute base du codage, voir un peu ce que tu sais/ne sais pas.

1 - Connais tu la différence entre HTML, BBcode et CSS ?
2 - Peux-tu me coder un carré bleu ? Et un texte bleu en gras ?
3 - Connais-tu les trois façons de mettre du CSS dans un code ?

On va commencer avec ça ! Dis moi si tu ne comprends pas quelque chose
avatar
Sexe : Féminin
Date d'inscription : 09/05/2018
Messages : 13
Newbie
Voir le profil de l'utilisateur
# Re: Classe de Spikele Jeu 24 Mai 2018 - 8:29
Salut Moses !!

1 - Connais tu la différence entre HTML, BBcode et CSS ? Je sais que l'HTML est ce qui définit la structure et la forme de la page et le que CSS lui donne de la couleur et des images, pour le reste je n'en sais pas plus.

2 - Peux-tu me coder un carré bleu ? Et un texte bleu en gras ? Texte bleu en gras, je l'ai fais grace aux balises [*color] et [*b] de forumactif, sinon pour le carré bleu je ne sais pas.

3 - Connais-tu les trois façons de mettre du CSS dans un code ? Non, je n'en ai pas la moindre idée.


Oui j'ai l'impression d'arriver en touriste.
Piouf la route va être longue, mais j'y crois !!
[/b]
avatar
Sexe : Masculin
Date d'inscription : 12/02/2018
Messages : 262
Designer
Voir le profil de l'utilisateur
# Re: Classe de Spikele Ven 25 Mai 2018 - 12:58
Il faut bien commencer quelque part ;).

Tout d'abord, le BBcode sert presque exclusivement sur les forums. Il s'agit des balises
Code:
[b][/b] [color][/color]

et globalement tout ce qui est entre crochet et proposé par forumactif. Ca a l'avantage d'etre simple mais c'est aussi très limité : tu peux modifier la police, la taille, la couleur d'un texte, mettre une image mais ça ne va pas beaucoup plus loin.

Le HTML est un langage web, fait pour créer des pages internet, les balises se présentent sous cette forme :

Code:
<div> <span> <img>


Le CSS est un autre langage, a articuler avec un HTML pour, comme tu l'as dit, lui donner la couleur, les images de font mais également pour définir la taille des éléments  et leur position. Le HTML et le CSS sont très vaste, il est possible de vraiment personnaliser un un code, contrairement au BBcode.

Dans ce cours, je vais t'apprendre l'HTML et le CSS.

2 - Ce que tu as utilisé pour ton texte, c'est du BBcode. Le BBcode est a évité dans un code, mieux vaut ne pas le mélanger avec du HTML.  Voici le code le plus simple, en HTML, pour mettre un texte en gras et en bleu.

texte en bleu gras

Code:
<span style="font-weight:bold;color:blue;">texte en bleu gras</span>

3 - Ok ! C'est pas grave, nous reviendrons dessus plus tard.



Je vais t'expliquer les bases du HTML pour que tu comprennes. C'est un langage de balisage, c'est à dire qu'il utilise des balises comme celles que je t'ai citées plus haut. Une balise s'ouvre et se referme.
exemple d'ouverture/fermeture de balise :

Code:
<span>
ouverte
Code:
</span>
fermée

mais aussi :
Code:
<div> </div>
Pour fermer une balise, il suffit toujours de recopier le nom de la balise entre < > et mettre un / devant. Le contenu de la balise doit être mis entre les deux, comme dans l'exemple du texte en gras.

Chaque balise à des attributs par défauts. Par exemple, si tu utilise la balise div, tu forme un ''bloc'' invisible autours de ton texte avec un retour à la ligne avant et un retour à la ligne après.


Il existe également des balises autofermante, c'est à dire qu'elles n'ont pas de contenu. elles ressemblent à ça :

Code:
<br /> (pour un saut de ligne)
<img /> (pour insérer une image)
<hr /> (pour créer une séparation horizontale)


Le slash se place à la fin pour signifier la fermeture de la balise.

Pour apprendre le HTML, il faut connaitre quelques balises, leurs utilisations puis comment les lier à un CSS pour les styliser.

Est-ce que c'est clair jusqu'a là ? As-tu des questions ?
avatar
Sexe : Féminin
Date d'inscription : 09/05/2018
Messages : 13
Newbie
Voir le profil de l'utilisateur
# Re: Classe de Spikele Sam 26 Mai 2018 - 10:16
Coucou !

Pour le moment c'est tout bon !
Je comprends bien ^^

avatar
Sexe : Masculin
Date d'inscription : 12/02/2018
Messages : 262
Designer
Voir le profil de l'utilisateur
# Re: Classe de Spikele Sam 2 Juin 2018 - 18:09
Super !
Maintenant, la première chose à faire est d'apprendre quelques balises de base et comment mettre un css.

Les deux balises les plus basiques sont
Code:
<div></div> et <span></span>

La première permet de former des ''blocs''. C'est avec ça que tu peux créer des fiches par exemple. Elle peut contenir d'autres balises. Elle sera alors l'élément parent, et les balises qu'elle contient seront les éléments enfants.
ex :
Code:
<div>élément parent<div>élément enfant 1</div><div>élément enfant 2</div></div>
 
Ici, la première div ne se ferme qu'avec le dernier /div. C'est toujours le dernier élément ouvert qui est fermé. (dis moi si ce n'est pas clair).
La seconde permet de styliser un texte.

Comme dit dans le premier message, il faut lier l'HTML a un CSS afin de les styliser. Il existe trois façons de le faire :

1 - mettre le css directement dans l'HTML. Tu le fais en utilisant ''style''. Ca ressemble à ça :
Code:
<span style="color:red;font-size:15px;">Bonjour</span>

tout ce qui est entre guillement après le style= est du css. On écrit tout à la suite, il faut juste séparer les différentes propriétés par des points virgules. Ça à l'avantage d’être simple mais ce n'est pas optimal : le code devient compliqué à lire et long.

2 - mettre le css au début du code, entre balise style.
Code:
<style>.exemple {color:red;font-size:15px;}</style>
<span class="exemple">bonjour</span>

Là, c'est plus compliqué mais une fois que c'est appris, c'est la meilleure technique ! Ca consiste à regrouper tout le css de ton code entre les balises
Code:
<style></style>
.
Pour dire quel bout de css correspond à quoi, il faut nommer ton élément, lui associer une class. Pour cela, dans la balise, tu écris :
Code:
class="nomdetaclass"
que tu reportes dans le css de la sorte :
Code:
.nomdetaclass {}
Il convient alors de mettre les propriétés entre les crochets.

Cette technique à plusieurs avantage. D'abord, tu mets tout ton css à un seul endroit. Par exemple, si tu as plusieurs éléments dans ton code, tout le css sera écrit à la suite dans les memes balises
Code:
<style></style>

exemple :
Code:
<style>.premiere {color:blue;} .second {background-color:red;}</style>
<span class="premiere">bonjour</span>
<div class="second">texte texte</div>

On reviendra sur cette technique plus longuement prochainement :)

3 - Lier une feuille css à ton code.
C'est possible si tu as un fichier dont l'extension est ".css" hébergé en ligne. Tu peux alors l'ajouter à ton css grace à cette balise :
Code:
<link rel="stylesheet" type="text/css" href="tonlien.css">
en n'oubliant pas de remplacer tonlien.css par ton vrai lien !


Voilà, ce sont les trois façons d'ajouter un css. Sur Forumactif, c'est encore différent puisque le site te propose d'héberger directement ton css dans le panneau admin. Mais on va rester sur la seconde technique pour le moment.

Si tout est clair, on peut passer à la suite.

> Maintenant que tu vois comment lier un css et un html, il faut savoir quoi y mettre !
Voici une liste des différentes propriétés css. Tu n'as pas besoin de toutes les apprendre par coeur. Il te suffit de te reporter à la liste quand tu en as besoin et petit à petit, tu te souviendras des propriétés les plus fréquemment utilisées.

La première colonne est la propriété, la seconde est les valeurs possibles. Ainsi pour text-decoration, tu as le choix :
Code:
text-decoration:underline;
va souligner un texte alors que
Code:
text-decoration:blink;
va faire clignoter ton texte.

Si tu parles anglais, tu vas vite te rendre compte de la simplicité du css.

On va faire un petit exercice pratique. Essai d'écrire un texte, stylisé comme s'il s'agissait d'un titre d'une fiche. Ca veut dire que le texte doit etre écrit en gros, coloré, pourquoi pas en gras ou en italic, en utilisant la méthode 2 pour la lier au CSS.

N'hésite pas à me poser des questions si tu bloques ou si je n'ai pas été clair
avatar
Sexe : Masculin
Date d'inscription : 12/02/2018
Messages : 262
Designer
Voir le profil de l'utilisateur
# Re: Classe de Spikele Dim 17 Juin 2018 - 13:56
@Spike , as tu vu mon dernier message ?
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum