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°1 | Astrionesle Mar 14 Nov 2017 - 20:08
Coucou @Astriones, et bienvenue dans ta classe.

Je mets en rappel ton formulaire d'inscription

Formulaire de Astriones:
Coucou :)

Tes connaissances en codage : Hum alors euh... rien ? XD
Ton but : Apprendre à coder de tout, même les templates :) -c'est mon rêve en fait :D-
Type de formation : [X] codage général, [X] pour forumactif uniquement -c'est possible les deux ? 'v' en commençant par Forumactif en premier-
Motivation : J'suis hyper motivée :D
Disponibilité : Tous les jours :)
Expérience en codage : J'ai fais ça dans la classe d'hotake
Code:
<link href="https://fonts.googleapis.com/css?family=Rozha+One|Ubuntu" rel="stylesheet" /><div style="margin: 0 auto; width: 500px; height:480px; background:#ffffff;background-image:url('http://www.zupimages.net/up/16/39/g5hj.png');"><div style="width: 500px; height: 40px; background: cornflowerblue; text-align: center;">
<span style="font-size: 32px; font-family: 'Rozha One', serif; color: #ca8e98;text-transform: uppercase; font-weight:bold; line-height: 10px;">Titre du RP</span></div>
<div style="display: flex; flex-direction: row; justify-content: space-between;margin: 0 auto; width: 380px; height: 80px;"><div style="width: 80px; height: 82px; border: 2px solid #fff;"><img src="http://www.zupimages.net/up/17/44/emcx.png" /></div><div style="margin-left: 12px; width: 285px; height: 82px; background: #ead4c7; text-align:center;"><span style="display: block; margin: 0 auto; width: 270px; border-bottom: 1px solid #fff; font-size: 20px; font-family: 'Ubuntu', sans-serif; color: #b13245; font-weight: bold; line-height: 40px;">Nom feat. Nom</span><span style="font-size: 10px; color: #f1f1f1; text-transform: lowercase;">❝ une citation plus ou moins longue juste ici ❞</span></div></div>
<div style="margin: 0 auto; width: 380px; height: 300px; background: #f1f1f1; padding: 5px; box-sizing: border-box; overflow: auto;"><p style="margin: 0 auto; font-size: 12px; color: #3e2736; text-align: justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc maximus neque ac ligula consectetur interdum. Morbi sed metus lacus. Nulla vitae sem in erat lacinia gravida. Sed in pulvinar nibh. Praesent vehicula libero ante, nec commodo eros varius vitae. Etiam nec nisi massa. Donec hendrerit hendrerit ex, eget scelerisque erat malesuada vel.

<span style="font-size: 14px; color: #6f5b7e;">Paroles paroles paroles.</span>

Ut feugiat tortor ac ante suscipit aliquet. Praesent sit amet consequat ligula. Mauris venenatis sem ut eleifend iaculis. Fusce et nunc lobortis, faucibus ex vel, placerat massa. Pellentesque sodales est faucibus quam imperdiet, ac placerat nulla suscipit. Nam ut varius tellus, non varius turpis. Proin id purus eget elit condimentum molestie. In dictum eget justo sit amet facilisis. Aliquam erat volutpat.</p></div>
</div>
avec ses instructions et suivi pas à pas :)
L'anglais et toi : Euh... on est pas copain ? XD
Autres : Merci d'avance :D

J'ai juste quelques petites questions avant de te présenter le programme qu'on va suivre.
- As-tu compris toutes les balises HTML utilisées dans la fiche pas à pas ?
- As tu bien compris toutes les propriétés CSS de la fiche ?

Tu dis que tu es débutante mais je trouve que le CSS de la fiche est assez avancé

Vu que je commence par le HTML voici 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]

A bientôt ♥️



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 : 01/10/2017
Messages : 427
Conseiller.e en stage et soleil du forum
Voir le profil de l'utilisateur
# Re: Classe N°1 | Astrionesle Mar 14 Nov 2017 - 20:26
Salut @Reine des Ténèbres :) Alors oui j'ai bien tout compris au niveau de la fiche. Je suis débutante mais je m'étais renseignée avant de commencer le cours, donc je connais quelques balises :) Sinon pour le petit formulaire :


C'est quoi le HTML et à quoi ça sert Le HTML, ou Hypertext Markup Language, est un langage de programmation utilisé pour ce qui est du rendu hypertext, sans le côté visuel. Il est pratique pour à peu près tout faire et est utilisé énormément sur les forums rpg.
Quel est la différence entre le HTML et le BBcode Le HTML est un langage qui peut être utilisé n'importe où, autant sur les sujets que dans le panneau d'administrations et les templates. Le BBcode est un langage propre à FA utilisable seulement sur les sujets. Celui-ci est, depuis quelques années, devenus obsolète, comme le HTML fait tout ce que celui-ci fait et même plus.
Quelle est la structure de base d'une page HTML
Code:
<!DOCTYPE html>
<html lang="ft">
<head>
  <meta charset="utf-8" />
<meta name="description" content="description" />
<title>Titre</title>
<style type="text/css">
...
</style>
</style>
</head>
<body>
...
</body>
</html>
Et si on veut ajouter du script, on le met entre les
Code:
<body><script></script></body>
A quoi sert le charset À intégrer les accents :)
Comment écrire un commentaire en HTML
Code:
<!-- Ton commentaire ici -->
Comment coder des titres
Code:
<title>Ton Titre</title>
Comment coder un saut de ligne
Code:
<br />
Comment insérer un paragraphe
Code:
<p>Ton paragraphe ici</p>
Quel est le code nécessaire pour insérer une liste Euh alors là je t'avoue que je  ne sais pas o_o"
Comment insérer un tableau
Code:
<table><tr><td></td></tr></table>
Comment insérer un lien
Code:
<a href="#">Ton lien</a>
Comment insérer une image
Code:
<img src="#" />
Qu'est ce que l'indentation Euh je t'avoue que je ne sais pas du tout :o -du moins ce mot ne me dit rien-
Deux exemples de balises ouvrantes / fermantes
Code:
<strong>Texte en gras</strong>
 et
Code:
<div>Ton bloc de texte</div>
Deux exemples de balises auto-fermantes
Code:
<img src="#" />
 et
Code:
<br />


Voilà o/
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°1 | Astrionesle Mer 15 Nov 2017 - 0:10
C'est bien tout ça, je note ce qu'il y a à revoir.

Voici donc la première partie de notre programme:

Introduction au HTML
Structure de base d'une page en HTML
- L'indentation
Les balises communes
- Les titres
- Les paragraphes
- Les listes
- Les fichiers media (image, audio et video)
Exercice pratique (Partie HTML)
Exercice libre (Partie HTML)

Si tu es d'accord je passe rapidement à l'intro.

@Astriones a écrit:C'est quoi le HTML et à quoi ça sert Le HTML, ou Hypertext Markup Language, est un langage de programmation utilisé pour ce qui est du rendu hypertext, sans le côté visuel. Il est pratique pour à peu près tout faire et est utilisé énormément sur les forums rpg.

Ta définition est correcte, j'ajoute juste quelques petites remarques. Le HTML esy un langage informatique de balisage, ce n'est pas vraiment un langage de "programmation", il permet de créer l'architecture d'une page web, de structurer logiquement et créer le contenu brut. Ce n'est pas juste un langage utilisé du les forum rpg, mais loin de là, 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.

@Astriones a écrit:Quel est la différence entre le HTML et le BBcode Le HTML est un langage qui peut être utilisé n'importe où, autant sur les sujets que dans le panneau d'administrations et les templates. Le BBcode est un langage propre à FA utilisable seulement sur les sujets. Celui-ci est, depuis quelques années, devenus obsolète, comme le HTML fait tout ce que celui-ci fait et même plus.

Le BBcode (Bulletin Board Code), bulletin board fait référence en anglais à forum de discussion. Le BBcode n'a pas été inventé par forumactif, mais est 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.

Le BBcode étant inventé uniquement pour raccourcir et simplifié la mise en forme dans les messages des forums puisqu'ils sont fréquentés par des personnes qui ne connaissent pas le codage. il est devenu obsolète dernièrement en effet, pas parce que le html le remplace, puisque le html est toujours aussi compliqué et nécessite d'être appris, mais plutôt à cause des éditeurs WYSIWYG qui permettent de traduire et visualiser directement le code dans les messages et du coup le BBcode perd sa fonction qui était à la base de simplifier le code. (WYSIWYG : What You See Is What You Get - Ce Que Vous Voyez Est Ce Que Vous Obtenez).
Pour que tu aies une idée plus clair sur c'est quoi ce WYSIWYG et comment il fait pour rendre le pauvre BBcode si misérable xD, il suffit d'activer l'éditeur WYSIWYG dans ton message (icône qui ressemble à une feuille blanche et qui est par défaut grisée, si tu passes la souris dessus tu verras "basculer le mode d'édition") Bien sûr pour voir l'effet il faut mettre du code, genre des couleurs, mettre en gras ou une citation. L'essentiel est de voir comment on peut basculer entre l'éditeur HTML et l'éditeur WYSWYG.

Voilà, avant de passer à la structure, est-ce que tu as des questions ?



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 : 01/10/2017
Messages : 427
Conseiller.e en stage et soleil du forum
Voir le profil de l'utilisateur
# Re: Classe N°1 | Astrionesle Mer 15 Nov 2017 - 7:33
Coucou :D D'accord merci pour les informations sur le BBcode. Comme je ne suis sur aucune autre plateforme, j'avais toujours cru que c'était propre à FA

Aucune question pour moi sinon :3
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°1 | Astrionesle Mer 15 Nov 2017 - 20:29
Bonsoir,

Ce n'est pas grave, tu as déjà beaucoup de connaissances, ce qui va nous permettre d'avancer rapidement.

Pour la structure de base d'une page HTML, on va éviter les cours ennuyeux à dormir debout, surtout que tu connais déjà à peu près la base.
Je te laisse revoir la structure que tu as fourni précédemment. Peux-tu m'expliquer brièvement à quoi sert chaque balise de ta structure ?



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 : 01/10/2017
Messages : 427
Conseiller.e en stage et soleil du forum
Voir le profil de l'utilisateur
# Re: Classe N°1 | Astrionesle Mer 15 Nov 2017 - 20:36
Haha d'accord :) Alors pour te répondre :


Code:
<!DOCTYPE html> : Le Doctype est essentiel en codage de page HTML lorsque l'on veut qu'elles soient conformes aux normes W3C. Son rôle est de dire au navigateur quel type de document il va lire et devoir interpréter. Ici, donc, le html.
<html lang="ft"> : Là je t'avouerais que je ne sais pas trop, peut-être indiquer que la langue sera du français et non de l'anglais ? o/
<head> : C'est l'en-tête du forum, de la page internet. Elle contiendra toutes les informations indispensables pour son bon affichage : l'encodage, les scripts, la mise en page, etc. Rien de ce que contient le head sera affiché sur la page, si ce n'est le titre de celle-ci.
 <meta charset="utf-8" /> : L'encodage. Ici, vous utiliserons utf-8 qui est le plus adapté; il accepte les accents.
<meta name="description" content="description" /> Présentation du contenu de la page.
<title>Titre</title> : C'est le nom de la page.
<style type="text/css"> : C'est la partie contenant le css de la page html.
...
</style>
</style>
</head>
<body> : C'est là que tout se joue. C'est ici-même que tout le code sur le contenu de la page sera.
...
</body>
</html>


Voilà :)
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°1 | Astrionesle Mer 15 Nov 2017 - 21:28
C'est plutôt bien pour la description. Par contre je t'ai donné une chance pour corriger deux petites erreurs dans ton code mais c'est raté /paf.

Donc déjà pour les petites fautes, le français c'est simplement "fr" pourquoi tu as mis un t
Et tu as fermé deux fois la balise style.

- !DOCTYPE HTML : Sert en effet à déclarer le type de langage informatique utilisé. 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) : C'est la balise qui va 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)
Ici tu as ajouté l'attribut lang qui est optionnelle et 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.
- head : est en effet 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. 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.
- meta : meta veut dire information, cette balise sert donc à fournir des informations sur la page.
Seul l'attribut charset est important puisque comme tu l'as dit, définit le type d'encodage de la page. On note que 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.
Ici encore, puisque tu as mentionné les attributs name et content, je t'en parle brièvement.
- name décrit ce qu'il y a dans content. Pour que ça soit plus clair voici les valeurs que peut prendre l'attribut name, on a
description (la description du contenu de la page)
Keywords ( mots clés, qui serviront aux moteurs de recherche comme Google ou autre. Si tu mets par exemple animaux, chat, félin et que quelqu'un fait une recherche sur Google avec le mot "chat", Google va alors lister ton site dans les résultats)
author (le nom du fondateur du site)
Imaginons donc que tu veux créer un site sur le codage et que tu veux bien renseigner tes informations, voilà à quoi ressemblerait les meta.

Code:
 <meta charset="UTF-8">
  <meta name="description" content="Site pour apprendre le codage">
  <meta name="keywords" content="Codage,HTML,CSS,JavaScript,">
  <meta name="author" content="Astriones">

- Titre : En effet c'est le titre de la page, il s'affiche dans la barre en haut du navigateur, sur cette page par exemple il y a "Classe N°1 | Astriones"

Pour style et body c'est bon, je n'ai rien à ajouter.

Est-ce que tu as des questions ?  



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 : 01/10/2017
Messages : 427
Conseiller.e en stage et soleil du forum
Voir le profil de l'utilisateur
# Re: Classe N°1 | Astrionesle Mer 15 Nov 2017 - 21:45
Ah oui mince j'avais même pas fait gaffe pour le "fr" en "ft" XD J'ai du accrocher le t en voulant écrire "fr" sans voir mon erreur Idem pour la balise style, je n'avais même pas vu que je l'avais fermé deux fois XD J'ai bêtement recopié ce que j'avais écris plus haut sans me relire :P

Merci pour toutes les précisions en tout cas, certaines balises je ne les connaissais pas -notamment keywords-.


C'est super clair en tout cas et je n'ai aucune question concernant tes explications :D
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°1 | Astrionesle Mer 15 Nov 2017 - 22:27
Comme quoi les copier coller c'est pas bien /PAF
Contente que mes explications te soient utiles et informatives. Tu verras on en finira vite avec la théorie x)
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 comme on n'a dit précédemment l'organisation qui standardise le HTML, d'ailleurs elle a été fondé par l'inventeur du HTML. Donc la W3C 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 à 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.

Voici 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 code indenté :


Comme tu vois 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.

Si tu as des questions, n'hésite pas x)



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 : 01/10/2017
Messages : 427
Conseiller.e en stage et soleil du forum
Voir le profil de l'utilisateur
# Re: Classe N°1 | Astrionesle Mer 15 Nov 2017 - 22:34
Ah ouais ça a l'air hyper pratique en fait, je vais utiliser cette méthode je crois lorsque je vais me mettre à coder avec ton aide, ça va vite m'être utile *-* -en plus moi qui ait l'habitude d'être "désorganisée organisée- ça va me servir XD
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°1 | Astrionesle Mer 15 Nov 2017 - 22:43
En effet c'est très utile, et puis si tu me colles un code sans indentation, je te tape sur les doigts
Je plaisante x)

On passe à ce qu'il y a d'important dans la partie HTML : Les balises

On peut diviser les balises en deux groupes selon qu'elles soient doubles ou auto-fermantes, comme on peut les diviser en balise bloc ou linéaire.
Connais-tu la différence entre une balise linéaire et une balise en bloc ?



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 : 01/10/2017
Messages : 427
Conseiller.e en stage et soleil du forum
Voir le profil de l'utilisateur
# Re: Classe N°1 | Astrionesle Mer 15 Nov 2017 - 23:02
Euh tu parle des balises structurantes ? Les balises bloc se place les uns en dessous des autres et les balises inline se place les uns à côtés des autres. Par exemple comme bloc il y a les balises h1,2,3, etc, p, ul et table. Pour l'inline il y a les balises b, td, a, img, etc. Après tu as la balise div qui est de type bloc o/

C'est tout ce que je sais, désolé


Aha vas-y si tu me tape sur les doigts c'est que je l'aurai mérité
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°1 | Astrionesle Mer 15 Nov 2017 - 23:26
Oui je vais te taper sur les doigts parce que tu me parles de h1, h2 .. h6 mais quand j'ai demandé dans le formulaire comment coder des titres (en insistant sur le pluriel en plus xD) tu as répondu title - /title
Si tu connais la hiérarchie des titres h1 à h6 (h pour headings) on saute cette partie.

Connais tu à quoi sert la balise ul ? les autres je suis sûre que tu les connais.
Attention à la balise td qui est une cellule et donc à un affichage (table-cell), ce n'est donc pas une balise inline.

Voici donc une liste des balises les plus basiques, dis moi s'il y en a des balises que tu ne connais pas.

Code:
<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6><p></p><b></b><i></i><s></s><mark></mark><strong></strong><em></em><del></del><blockquote></blockquote><br><hr>



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 : 01/10/2017
Messages : 427
Conseiller.e en stage et soleil du forum
Voir le profil de l'utilisateur
# Re: Classe N°1 | Astrionesle Mer 15 Nov 2017 - 23:30
Alors oui c'est mon erreur,  je plaide coupable Décourager Lors du questionnaire j'avais zappé les h1, 2...6

UL c'est une liste sans ordre défini non ? Polochon Comme une sorte de liste à puce en fait o/

Pour le td c'est un éléments inline, pas une balise, my bad, j'ai mal retranscris ma note XD

Concernant les éléments que je ne connais pas dans ta liste, il n'y a que le hr qui ne me dit rien x) -et le br m'angoisse à pas avoir de / à la fin XD-
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°1 | Astrionesle Jeu 16 Nov 2017 - 0:07
En effet ul veut dire Unordered List ou liste non ordonnée et donc l'ordre des éléments n'est pas important. Elle s'affiche en tant que liste à puce.
Peux-tu me créer une liste qui présente 3 de tes passions ?

La balise orpheline hr est une balise qui marque le changement thématique du contenu : changement de sujet, changement de décor etc. visuellement elle permet de tracé une ligne horizontale

C'est une balise orpheline donc auto-fermante comme br.
En xhtml, il faut impérativement fermer correctement les balises orphelines mais en html et notament le HTML5 qui est la dernière version, ce n'est plus obligatoire donc hr et hr / ou br et br / sont correctes.
D'un point de vue esthétique, il est recommandé de traiter toutes les balises orphelines (br, hr, img, link etc) dans un code de la même façon, soit tout fermer ou ne rien fermer.

Un petit exercice supplémentaire.
Quelle est la différence entre :
- b / strong
- i / em
- s / del



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 : 01/10/2017
Messages : 427
Conseiller.e en stage et soleil du forum
Voir le profil de l'utilisateur
# Re: Classe N°1 | Astrionesle Jeu 16 Nov 2017 - 8:37
Coucou :) Voici donc la liste :

Code:
<ul>
 <li>Écrire</li>
 <li>Lire</li>
 <li>Les Jeux Vidéos</li>
</ul>


Ah d'accord merci pour le hr, je connaissais vraiment pas :3 Okay pour les balises auto-fermante, comme je l'ai toujours vu avec un /, j'ai du mal à le voir sans XD

Concernant tes questions, voici mes réponses :)

- b / strong : La différence c'est que strong met la phrase en avant, alors que b ne fait que la mettre en gras :)
- i / em : La différence c'est qu'em met la phrase en avant, alors que i ne fait que la mettre en italique.
- s / del : La différence c'est que del met la phrase en avant, alors que s ne fait que la barré.

Voilà :3
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°1 | Astrionesle Jeu 16 Nov 2017 - 16:53
Donc tu sais bel et bien créer une liste mais dans le formulaire tu dis que tu ne sais pas *tape sur les doigts*

C'est très bien au fait, Bravo. Connais-tu d'autres types de listes que les listes à puces ?

Il reste un truc qui me dérange et que je viens de remarquer :

Reine' a écrit:Attention à la balise td qui est une cellule et donc à un affichage (table-cell), ce n'est donc pas une balise inline.

@Astriones a écrit:Pour le td c'est un éléments inline, pas une balise, my bad, j'ai mal retranscris ma note XD

On verra la propriété "display" en CSS qui veut simplement dire type d'affichage. Ses valeurs les plus connues sont "inline" et "block".
Comme tu as dis avant, les balises qui ne génèrent pas un saut de ligne automatique sont de type inline. Et celle qui génère un saut de ligne sont de type block.
Mais td est différente parce qu'elle se trouve dans un tableau, son affichage n'est donc PAS inline.
Logiquement, une cellule de tableau occupe un certain espace donc elle est plus proche du concept "block" mais elle n'est pas vraiment un bloc, c'est une cellule. Les cellules ont un affichage qui ne dépend pas de la page comme "inline" ou "block" mais qui dépend du tableau. Donc c'est une nouvelle valeur de display qu'on va revoir ultérieurement. Cette valeur est appelée "table-cell" qui se traduit cellule de tableau. Logique, n'est ce pas ?

Pour ton dernier exercice, c'est bien aussi, voici quelques précisions pour mieux retenir les balises.

- Comme tu l'as dit "strong" veut dire important et correspond au niveau "très important". b c'est bold, littéralement gras. Visuellement les deux balises s'affichent en gras de la même façon par défaut mais on peut bien sûr changer l'affichage grâce au CSS.
- em c'est "emphasis" qui veut dire accent, donc c'est du contenu sur lequel on veut mettre l'accent et insister mais il est de niveau moins important que strong. i c'est italic, donc italique et encore une fois em et i permettent tous les deux d'afficher les éléments en italique.
- Comme tu as du t'en douter s et del affiche toutes les deux du texte barré donc on peut pas dire que del met le texte en avant, logiquement on ne barre pas quelque chose qu'on veut mettre en valeur. del correspond à delete, en français "supprimer" et donc c'est un texte barré mais dans le sens où c'est quelque chose qu'on veut retirer de la page. ça semble insensé d'utiliser del alors qu'on peut simplement retiré le contenu. Imagine par exemple que sur ton forum tu as mis dans le règlement que la taille d'un avatar doit être de 200x400, après un an tu as mis à jour ton design et tout et tu veux changer la taille obligatoire tu peux par exemple barré le 200x400 par del et mettre la nouvelle taille avec la mention MAJ. On aura quelque chose comme ça

Taille des avatars 200x400 obligatoire
MAJ : Désormais il faut utiliser des avatars de la taille 150x200 pour ne pas déformer le forum.

Voilà c'est tout



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 : 01/10/2017
Messages : 427
Conseiller.e en stage et soleil du forum
Voir le profil de l'utilisateur
# Re: Classe N°1 | Astrionesle Jeu 16 Nov 2017 - 17:32
Coucou :) ... ah, donc ma source -le tuto que j'avais lu quoi XD- elle est fausse alors concernant le td x) OK, je note :P Concernant les listes, il y a également la liste ol ou liste ordonnée :) Il y a aussi le menu, mais c'est paaaaas vraiment une liste, même s'il utilise l'attribut li :P


Merci pour les informations, sinon, sur les del, em, strong, i, s et b :) Je vais noter tout ça dans un carnet avec les bonnes informations maintenant *-*


Concernant la question des listes en fait je ne l'avais pas compris comme ça :P Je croyais qu'il y avait un code spécifique pour les intégrer, en-dehors du ol-li et ul-li ^^
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°1 | Astrionesle Jeu 16 Nov 2017 - 22:38
Je ne sais pas d'où vient ton tuto, si c'est un tuto d'épicode passe-moi le lien pour que ça soit corrigé.
Sinon si tu veux avoir un site de confiance où tu peux te documenter je te propose developer.mozilla

Au cas où tu voudrais savoir, j'ai oublié de dire que "s" vient de "strike" qui veut dire barré.

Le menu n'est pas un type de liste. c'est un ensemble de listes non-ordonnées imbriquées dans une liste non-ordonnées. C'est à dire que si on veut avoir un menu à 4 éléments, on va créer une liste à 4 éléments. On veut que dans le premier élément il y est un autre menu alors on crée dans le premier élément à l'intérieur des balises li /li une nouvelle liste ul avec le nombre de sous menus qu'on veut. Et on peut faire la même chose dans les autres menus comme on peut créer encore d'autres sous sous menus et ainsi de suite.
Tu vas me dire mais dans les menus que tu vois tous les jours, il n'y a pas de puces. C'est vrai et c'est tout à fait possible de personnaliser l'apparence des puces et des chiffres pour les ol comme on peut tout aussi les enlever et tout ça grâce à la magie du CSS. En exemple, la barre de navigation sur les forums FA et bel et bien codée en ul

Je saisi l'occasion pour mentionner la balise HTML qui sert à créer les menus de navigation et qui est
Code:
<nav> </nav>

nav pour navigation bien entendu. On peut mettre dans cette balise des liens directement pour faire un menu horizontal (vu que les liens ont un affichage inline par défaut) ou mettre une liste de liens ul, on aura alors un affichage vertical par défaut vu que ul est en block.
Bien sûr on peut mettre tout aussi un menu de liens directs vertical ou une liste horizontale (comme sur FA) il suffit de changer le display via le CSS.

Pour voir si tu as bien compris, peux-tu créer un menu de navigation en utilisant la balise nav bien sûr.
Le menu doit avoir 3 éléments et chaque éléments doit avoir 2 sous menus.
N'oublie pas l'indentation pour y voir clair
Pour le texte tu peux mettre ce que tu veux. Mais attention, un menu est un ensemble de liens et non du texte simple.
Pour la valeur de href tu peux juste mettre un #.

Si tu as des questions, je suis là.




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 : 01/10/2017
Messages : 427
Conseiller.e en stage et soleil du forum
Voir le profil de l'utilisateur
# Re: Classe N°1 | Astrionesle Sam 18 Nov 2017 - 13:57
Coucou :) Non ce n'est pas un tuto d'épicode ^^ en tout cas je ne suivrai plus les tutos de là-bas s'ils sont aussi non-juste XD Oui pour menu j'avais bien précisé que je savais que ce n'étais pas une liste ^^ si je l'ai inscris c'est parce que je sais qu'il prends un
Code:
<li>
dans son code XD

Pour l'exercice, voici ce que j'ai fais :

Code:
<nav><menu>Menu 1</menu><li>Option 1</li><li>Option 2</li><menu>Menu 2</menu><li>Option 1</li><li>Option 2</li><menu>Menu 3</menu><li>Option 1</li><li>Option 2</li></nav>

Je t'avoue que je sais pas du tout si c'est ça qu'il fallait que je fasse ou non ._.
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°1 | Astrionesle Dim 19 Nov 2017 - 0:40
Hiérarchie est bonne mais je n'ai pas parlé de la balise menu.
La balise menu ne prend pas la balise li, c'est une erreur. Ce que je voudrais t'expliquer c'est que ce qu'on appelle communément un menu ou une barre de navigation est en réalité une liste non-ordonnée.

Le genre de menu qu'on a avec la balise menu et compagnie c'est ce qu'on a quand on fait un clic droit (copier/ coller/ annuler/ inspecter ...)

Donc ce qu'on veut créer à travers cet exercice c'est la base HTML d'une barre de navigation de ce genre : Blog ici on a une barre de navigation à 3 menus (Qui sommes nous / Covers / Infos ) et chaque menu à un nombre différent de sous menus (Qu'on voit en passant la souris.)
Bien sûr la mise en forme est faite via le CSS, mais le menu est créé en HTML qui est comme on a dit avant l’architecture de base.

Voici donc notre barre de navigation sans CSS :


Donc, on revient à notre exercice qui consiste à faire quelque chose de similaire.

On va d'abord créer la barre de navigation

- Etape 1
Dans la balise nav, on va créer une liste ul de 3 éléments qui seront les 3 menus de la barre de navigation.
- Etape 2
On va transformer nos menus en liens (logique vu qu'une barre de navigation est un ensemble de liens cliquables)
Pour ce faire, on va entourer notre texte de la balise "a". donc on aura: li menu /li qui deviendra li a menu /a /li
Je te donne juste une schéma parce que j'ai la flemme d'utiliser la balise code xD, bien sûr tu dois renseigner la balise a correctement.

Je te laisse faire ça déjà.



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 : 01/10/2017
Messages : 427
Conseiller.e en stage et soleil du forum
Voir le profil de l'utilisateur
# Re: Classe N°1 | Astrionesle Dim 19 Nov 2017 - 1:20
Coucou :) Ah oui merde donc ce que j'ai "appris" avec ce site j'dois vraiment l'oublier alors XDD Juste une question avant de faire ça, que veux-tu dire par "bien sûr tu dois renseigner la balise a correctement." ? En fait ce qui me rend confuse c'est le "renseigner" XD Tu veux dire mettre la balise target ?
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°1 | Astrionesle Dim 19 Nov 2017 - 1:37
target n'est pas une balise mais un attribut. On verra la terminologie juste après l'exercice.

Ce que je voulais dire c'est écrire le lien comme un lien lol parce que j'ai mis juste un "a"
non mais tu veux me faire écrire le lien, oui voilà je vais l'écrire, non je ne suis pas une flemmarde, je vais même ajouter le target puisque tu en parles Super héro
Code:
<a href="#" target="_blank">Menu</a>
XD Je délire x)

Tu n'es pas obligée de mettre target, j'avais prévu d'en parler dans le cours après.



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 : 01/10/2017
Messages : 427
Conseiller.e en stage et soleil du forum
Voir le profil de l'utilisateur
# Re: Classe N°1 | Astrionesle Dim 19 Nov 2017 - 1:59
Awai mince tu as raison, my bad ._. Han, prof indigne Nana

Bon voilà la "vraie" version alors '-'


Code:
<nav>
 <ul>
   <li><a href="#" target="_blank">Menu 1</a>
     <ul>
       <li><a href="#" target="_blank">Option 1</a></li>
       <li><a href="#" target="_blank">Option 2</a></li>
       <li><a href="#" target="_blank">Option 3</a></li>
     </ul>
   </li>
   <li><a href="#" target="_blank">Menu 2</a>
     <ul>
       <li><a href="#" target="_blank">Option 1</a></li>
       <li><a href="#" target="_blank">Option 2</a></li>
       <li><a href="#" target="_blank">Option 3</a></li>
       <li><a href="#" target="_blank">Option 4</a></li>
     </ul>
   </li>
   <li><a href="#" target="_blank">Menu 3</a>
     <ul>
       <li><a href="#" target="_blank">Option 1</a></li>
       <li><a href="#" target="_blank">Option 2</a></li>
       <li><a href="#" target="_blank">Option 3</a></li>
     </ul>
   </li>
 </ul>
</nav>


Et indenté en plus, juste pour toi
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°1 | Astrionesle Dim 19 Nov 2017 - 17:29
Mais il était 1h du matin à quoi tu t'attendais

Oh ton code est si beau Lovely, tu l'as fait par toi-même sans tricher ? XD

C'est parfait ! Alors tu as bien compris le principe des menus déroulants ?




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