avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 1067

Fiche Membre
Lots gagnés:
Rose des sables Designer en stage
Voir le profil de l'utilisateur
# Classe N°2 | Naütilus.le Mar 14 Nov 2017 - 22:14
Coucou @Naütilus. et bienvenue dans ta classe.

Je mets en rappel ton formulaire d'inscription

Spoiler:
Tes connaissances en codage : HTML CSS js (onglet) et les tableaux !!
 Ton but : les templates
 Type de formation : [ ] codage général, [X ] pour forumactif uniquement
  Motivation : 100% même en étant sur tablette je veux apprendre à coder les template pour pouvoir faire mes forum en entier sans avoir à commander ici et te faire bosser :p
 Disponibilité : 7j sur 7 sauf absence mdr
 Expérience en codage : quand je me suis inscrite ici donc je sais pas trop 3 à 4 ans peut être ?
 L'anglais et toi : noob very very noob !
 Autres :

J'aime les Panda <3

Donc déjà je veux bien connaitre l'histoire derrière le calendrier parce que je ne sais pas de quoi il s'agit. Si ça t'embête de le mettre en hide tu peux tout aussi m'expliquer en MP.

En attendant je te laisse me répondre à ce petit questionnaire, je sais que tu sais déjà coder mais juste pour vérifier si tu as les bonnes bases.

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]



Merci à Aed  
Spoiler:

Mes autres signa':


Mes beaux Cadeaux et lots gagnés:
Merci à Aed pour la zoulie signa ♥️

Merci à Bora pour le beau vava ♥️

Merci à Eskimo pour le joli vava :
avatar
Sexe : Féminin
Date d'inscription : 03/03/2015
Messages : 3992

Fiche Membre
Lots gagnés:
Modo / Anim' - 20 000 lieux sous les codes
Voir le profil de l'utilisateurhttp://moesaadis.forumactif.com
# Re: Classe N°2 | Naütilus.le Mar 14 Nov 2017 - 23:56
C'est quoi le HTML et à quoi ça sert c'est la structure du code c'est entre < > et ça sert à mettre en forme le code (en gros c'est note base de code)
Quel est la différence entre le HTML et le BBcode < > alors que bbcode [ ] comme le de ton code xD c'est pour mettre en forme les réponses rapides
[b]Quelle est la structure de base d'une page HTML
euh page externe ? C'est avec doctype HTML, la langue avec HTML Lang de par exemple, méga charset, titre, head, body c'est ce que m'as monté hotake pour le tableau en tout cas ^^ sinon pour une fiche n'inclut un fond avec une div xD
A quoi sert le charset bonne question ! Non c'est pour que ce soit compatible avec tous les navigateurs si je me souviens bien ?
Comment écrire un commentaire en HTML alors j'ai pas trop compris mais du coup pour moi sois je fais une div avec fond etc et n'intègre des mise en forme de texte comme font size ou color et du coup j'ai un texte dans un bloc sous je peux le faire avec un span en intégrant juste les éléments de mise en forme de texte ?
Comment coder des titres même réponse qu'au dessus ?
Quel est le code nécessaire pour insérer une liste ? Puis on ferme avec / en tout cas en bbcode c'est [list] donc je pense que c'est pareil xD
Comment insérer un tableau JE SAIS PLUS !
Table après tr et dans tr les td pour les colonnes ^^ head foot body (avec t)
Qu'est ce que l'indentation tu pourrais apprendre tes leçons !
Deux exemples de balises ouvrantes / fermantes div et span ? Sinon table et tr xD ? < >
Deux exemples de balises auto-fermantes img et br < />
Quelle est la différence entre div et span div c'est un bloc et span c'est pour la mise en forme des textes (pour moi) mais je gère pas encore trop le span je fais tout par div et je suis nul pour display

Voilà !

Le reste demain xD sinon dsl pour les balises mais à la tablette c'est long et le correcteur automatique me soule ^^


Anciennement Nishiki •

Besoins de vos avis Ici merci !


Merci Izusa !
Cadeau
Colibris :

Joy :

Izusa :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 1067

Fiche Membre
Lots gagnés:
Rose des sables Designer en stage
Voir le profil de l'utilisateur
# Re: Classe N°2 | Naütilus.le Mer 15 Nov 2017 - 0:23
Coucou x)

C'est bien tout ça, je note ce qu'il y a à revoir.

Avant de te proposer déjà un programme, j'attends d'avoir des nouvelles concernant ton calendrier (schéma + code où tu en es) pour voir si ça serait adéquat d'en faire notre premier exercice pratique.



Merci à Aed  
Spoiler:

Mes autres signa':


Mes beaux Cadeaux et lots gagnés:
Merci à Aed pour la zoulie signa ♥️

Merci à Bora pour le beau vava ♥️

Merci à Eskimo pour le joli vava :
avatar
Sexe : Féminin
Date d'inscription : 03/03/2015
Messages : 3992

Fiche Membre
Lots gagnés:
Modo / Anim' - 20 000 lieux sous les codes
Voir le profil de l'utilisateurhttp://moesaadis.forumactif.com
# Re: Classe N°2 | Naütilus.le Jeu 16 Nov 2017 - 21:24


Anciennement Nishiki •

Besoins de vos avis Ici merci !


Merci Izusa !
Cadeau
Colibris :

Joy :

Izusa :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 1067

Fiche Membre
Lots gagnés:
Rose des sables Designer en stage
Voir le profil de l'utilisateur
# Re: Classe N°2 | Naütilus.le Jeu 16 Nov 2017 - 23:07
Je vois oui.
On va donc voir d'abord tout ce qui sera utile pour ta création et on complétera les notions de bases plus tard. Par contre je n'ai pas envie de te décevoir mais ce que tu veux faire me semble plus réalisable sans tableaux. De plus je veux bien savoir la raison derrière les fusions. C'est tout aussi important de savoir si les cellules auront la même taille ou pas.
En attendant ta réponse, je vais juste essayer avec une image au pif pour voir si c'est possible de créer l'effet que tu veux dans une cellule, qu'on puisse garder la structure en tableau ou non.

Et au fait, tu as oublié les balises code ^^



Merci à Aed  
Spoiler:

Mes autres signa':


Mes beaux Cadeaux et lots gagnés:
Merci à Aed pour la zoulie signa ♥️

Merci à Bora pour le beau vava ♥️

Merci à Eskimo pour le joli vava :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 1067

Fiche Membre
Lots gagnés:
Rose des sables Designer en stage
Voir le profil de l'utilisateur
# Re: Classe N°2 | Naütilus.le Ven 17 Nov 2017 - 20:10
Coucou,

Voilà donc ce qu'on peut faire, dis-moi si ça correspond à ce que tu souhaites




Merci à Aed  
Spoiler:

Mes autres signa':


Mes beaux Cadeaux et lots gagnés:
Merci à Aed pour la zoulie signa ♥️

Merci à Bora pour le beau vava ♥️

Merci à Eskimo pour le joli vava :
avatar
Sexe : Féminin
Date d'inscription : 03/03/2015
Messages : 3992

Fiche Membre
Lots gagnés:
Modo / Anim' - 20 000 lieux sous les codes
Voir le profil de l'utilisateurhttp://moesaadis.forumactif.com
# Re: Classe N°2 | Naütilus.le Ven 17 Nov 2017 - 21:28


Anciennement Nishiki •

Besoins de vos avis Ici merci !


Merci Izusa !
Cadeau
Colibris :

Joy :

Izusa :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 1067

Fiche Membre
Lots gagnés:
Rose des sables Designer en stage
Voir le profil de l'utilisateur
# Re: Classe N°2 | Naütilus.le Sam 18 Nov 2017 - 23:50



Merci à Aed  
Spoiler:

Mes autres signa':


Mes beaux Cadeaux et lots gagnés:
Merci à Aed pour la zoulie signa ♥️

Merci à Bora pour le beau vava ♥️

Merci à Eskimo pour le joli vava :
avatar
Sexe : Féminin
Date d'inscription : 03/03/2015
Messages : 3992

Fiche Membre
Lots gagnés:
Modo / Anim' - 20 000 lieux sous les codes
Voir le profil de l'utilisateurhttp://moesaadis.forumactif.com
# Re: Classe N°2 | Naütilus.le Dim 19 Nov 2017 - 11:38
oui je connais le sens et d'ailleurs ça me perturbe XD
Du coup par contre j'ai pas tout compris à ce que tu m'as dit n.n pour le css et le style est tout ^^

pour la taille ca me va je vais changer en 500*800


Anciennement Nishiki •

Besoins de vos avis Ici merci !


Merci Izusa !
Cadeau
Colibris :

Joy :

Izusa :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 1067

Fiche Membre
Lots gagnés:
Rose des sables Designer en stage
Voir le profil de l'utilisateur
# Re: Classe N°2 | Naütilus.le Dim 19 Nov 2017 - 17:34
Moi ce qui me perturbe c'est le grand espace vide avant ton tableau dans ton message plus haut XD.

N'oublie pas de mettre le code de ton tableau comme ça je suis sûre que c'est la même chose que ce que je vois dans ta page HTML.

Explique-moi ce que tu connais sur ces trois balises et surtout ce qui te perturbe.

Je t'expliquerai ce que j'ai dit plus clairement après ta réponse comme ça on modifie tout en une seule fois.



Merci à Aed  
Spoiler:

Mes autres signa':


Mes beaux Cadeaux et lots gagnés:
Merci à Aed pour la zoulie signa ♥️

Merci à Bora pour le beau vava ♥️

Merci à Eskimo pour le joli vava :
avatar
Sexe : Féminin
Date d'inscription : 03/03/2015
Messages : 3992

Fiche Membre
Lots gagnés:
Modo / Anim' - 20 000 lieux sous les codes
Voir le profil de l'utilisateurhttp://moesaadis.forumactif.com
# Re: Classe N°2 | Naütilus.le Dim 19 Nov 2017 - 18:57


Anciennement Nishiki •

Besoins de vos avis Ici merci !


Merci Izusa !
Cadeau
Colibris :

Joy :

Izusa :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 1067

Fiche Membre
Lots gagnés:
Rose des sables Designer en stage
Voir le profil de l'utilisateur
# Re: Classe N°2 | Naütilus.le Dim 19 Nov 2017 - 21:10
C'est bizarre en effet, parce que au fait thead, tbody et tfoot n'ont rien à faire dans ton code, on va les virer ^^

Un tableau c'est quoi ?

Un tableau est un ensemble structuré de données présentées en lignes et colonnes.
Il permet de rechercher rapidement et facilement des valeurs qui indiquent un type de connexion entre différents types de données. Par exemple : des étudiantes et leurs notes, des produits et leurs prix, un jour et la semaine, le calendrier d'un club etc.
Dans ce sens, un tableau peut avoir un titre ou un entête et un pied (footer).
Attention, les tableaux HTML doivent être utilisés pour les tables de données uniquement et non pour faire de l'organisation et mise en page.

Création des tableaux :

En exemple, je vais prendre un tableau de données qui présente les notes d'un petit groupe d'élèves.

Pour créer un tableau, comme tu le sais déjà, on utilise la balise double table qui veut dire simplement "tableau" en anglais.
Pour créer une cellule, on utilise la balise double td > table data qui veut dire table de données. Logique puisqu'une cellule sert à afficher des données.
Un succession de cellule génèrera automatiquement une ligne, c'est à dire que si on mets 10 fois une suite de td on aura les 10 cellules sur une même ligne.
Pour mieux organiser notre tableau et générer des lignes on entoure les cellules de chaque ligne par la balise double tr > table row qui veut dire ligne de tableau. Rappelle-toi que row veut dire ligne, c'est un mot très présent dans le codage.
Je ne donne pas d'exemple à ce stade puisque tu sais déjà comment utiliser ces balises, je me contente donc d'expliquer le sens pour mieux comprendre ton tableau.

On a donc un ensemble de données organisées dans un tableau. Mais pour comprendre ces données on a besoin d'un titre. Pour se faire, on crée évidement une nouvelle ligne au début du tableau mais cette fois dans la ligne tr on ne va pas mettre des données (td) mais un titre (th) table heading

Voilà donc à quoi ressemble mon tableau :



Maintenant, imagine que je dois imprimer les notes d'une promotion d'au moins 500 étudiants et je veux qu'il y est dans mon tableau la moyenne de la promo, la meilleure note et la note la plus basse, enfin les statistiques de la promo. Ici je ne vais quand même pas parcourir la liste des 500 étudiants pour m'assurer d'ajouter mes cellules de statistiques à la fin. Et puis je pourrais me tromper de page ou l'imprimante pourrait imprimer les cellules dans un ordre propre à elle. Pour éviter tous ces problèmes, je vais m'assurer d'avoir la ligne des titres bien en haut du tableau et les stats à la fin. Pour ce faire, je vais ajouter thead (table header > entête du tableau) et mettre dedans la ligne de mes titres (la ligne des th) et puis juste après j'ajoute directement mon pied du tableau (tfoot > table footer) avec les données que je veux voir à la fin. Après je renseigne le tbody et donc le corps du tableau où il y aura les noms, les notes, mentions etc, donc tous les données de notre tableau dont l'ordre importe peu. Donc mon tableau peut être imprimer sur 10 pages ou plus, je suis sûre que j'aurai l'entête au début de la première page et les stats à la fin peu importe le nombre d'élèves qu'il y aura.
Une autre utilisation de la structure avancée du tableau (thead tfoot et tbody) sera comme suite. Je veux intégrer ce même tableau des notes dans la plate-forme de l'université. Là encore je ne vais quand même pas faire un tableau de 200 km mais bel et bien spécifié une hauteur à mon tableau et mettre l'overflow. Par contre on va s'assurer de garder l'entête et le pied affichés et on ne va appliquer l'overflow qu'à la balise tbody pour parcourir la liste des étudiantes tout en gardant les informations importantes du tableau.

Si tu as des questions n'hésite pas. Je te laisse modifier ton tableau, tu peux par exemple mettre les jours de la semaine en titre de données, comme tu peux ne rien mettre.

Je reviens donc au CSS.

Dans ton code on a

Plutôt que les attributs border, cellspacing et style, on va utiliser la balise double style et y insérer le CSS de notre tableau. C'est plus propre. Tu verras que sur mon exemple, j'ai aussi séparé le HTML du CSS.



Merci à Aed  
Spoiler:

Mes autres signa':


Mes beaux Cadeaux et lots gagnés:
Merci à Aed pour la zoulie signa ♥️

Merci à Bora pour le beau vava ♥️

Merci à Eskimo pour le joli vava :
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum