- Carméchoucroute

Hello, hello. 8'D
Désolée du retard. ~ Je t'épargne le petit formulaire trop cool, dis moi juste ce que tu sais faire, si tu préfères qu'on revoie tous depuis le début (les bases donc) ou s'ils elles sont déjà acquises.
Et aussi ce que tu voudrais faire ? Après un petit squattage dans la partie cours de Crème j'ai vu que tu voulais faire les signa' codées, mais tu m'tapes si je te dis qu'on peut pas commencer par ça ? 8'D Il faut maîtriser assez bien le Css & l'html pour faire une signature digne de ce nom. o/

Jte tappe pas, promis :)
Je veux bien revoir tout du début, pour être sûre qu'on avancera petit à petit sans rien oublier d'important

Super. o/
D'accord, oui effectivement c'est mieux. **
Je pense que je n'ai pas besoin de te redonner la définition du HTML ?
Mais pour faire très très court, c'est un langage informatique qui se forme à partir de balises (< >) très souvent combinés au CSS (et au Javascript), on s'en sort pour faire la structure d'une page web par exemple.

Avant de rentrer dans le vif du sujet il y'a un point que j'aimerais, on l'oublie souvent pourtant c'est assez important.  
 
Les balises.
Il existe deux types de balises. Les balises paires & les balises orphelines. (ou impairs)
Disons que l'HTML est composé à 98% de balises paires, les balises orphelines c'est comme les verbes irréguliers en anglais il faut les apprendre pour les connaître. Il n'y a pas de règles en particulier. o/

Les balises paires.
Un exemple que tu connais.

Code:

<center></center>

C'est une balise paire. ~ Elle est ouverte par un center et fermée par un /center.
Toutes les balises paires se composent comme cela.

Code:

<div style=""></div>

Tu en rencontreras beaucoup. 8D

Les balises orphelines
Deux qu'on utilise, que l'on connaît mais qu'on oublie de fermer.

Code:

<img src="URL" />

<br />

Ce sont des balises que l'on utilisent très très souvent, mais beaucoup oublies de les fermer.   Vu qu'il n'y a pas la même "tolérance" de partout, souvent mettre la barre ou non ne changera rien mais c'est toujours mieux. ~
On les verra petit à petit mais retiens ses deux là. o/

Petit cours exprès dis-moi si t'as bien tout compris. o/

Okey oui j'ai compris, merci Key :)
-j'en profite pour remettre le sujet en route x)-

Parfait ! *-*
Ça doit te sembler un peu inutile mais c'est toujours mieux de ne pas prendre de mauvaises habitudes. :3
J'ai stalké des cours avec Crème.
Donc quelques petits trucs à dire. 8D

Je trouve personnellement que c'est beaucoup plus simple de coder avec la magie de NotePad++.
Je ne sais pas si tu peux le télécharger sur ta session, en tout cas c'est un petit programme discret comme tout QUI MARCHE SANS INTERNET. 8D C'est bien pour coder je te le conseille. *-* Au pire des cas et même si tu peux le télécharger, crée toi un forum test ou tu mettras tout tes joulies codes dedans. :3 (Et comme ça, tu aurais plus besoin de stocker tous tes codes dans un carnet. /jesaistoutdetoi/)

(D'ailleurs au passage, uppercase, ce n'est pas pour mettre en majuscules mais en petites majuscules. -j'ai le sens du détail inutile vois tu ? :3-)

Alors, avant d'écrire un pavé. (Oui tu mangeras du pavé mon enfant. :3)
Je voulais savoir si tu voulais reprendre les bases ? Ou si tu préfères faire un cours dans la continuité de celui de Crème ?
Est ce que tu préfères commencer par l'HTML ou le CSS, sachant que les deux se ressemblent monstrueusement et que c'est juste dans la forme que cay plus pareil ?

Je sais que ton but ultime pour le moment c'est les signa' à onglets. Pour ça il te faudra la base de la base et quelques notions en CSS & HTML. Je n'ai pas habitude de commencer mes cours avec des codes complexes (pas vraiment complexe en soit mais voilà quoi. C'est pas la petite fiche de RP du coin), mais si tu veux on peut commencer par ça. Par contre ce sera assez long, mais on peut décortiquer un code de signa' bout par bout histoire de voir comment ça se compose. °°' (Et tu as déjà la base de la base de toute façon. :3)
Si c'est ton choix attend toi à bouffer de pavé.

Dis moi tout. 8D

Et dis donc, je stock pas tous mes codes mais juste les balises
J'ai téléchargé ton logiciel sur ma session, j'ai pas eu le temps de voir si ça marche par contre...

Je veux bien reprendre les bases, en commençant par faire une petite fiche avec quelques trucs un peu complexe que tu pourrais m'apprendre, et pour le CSS/HTML, j'ai aucune idée de ce par quoi je veux commencer UU'

Déjà, je pense qu'on devrait essayer de coder un truc.
Du genre un tableau. C'est possible qu'on décortique le tableau des concours ? Il est pas trop compliqué, j'ai compris les bases, du genre presque tout, mais il y a quelques balises que je ne comprends pas, comme

Code:

<meta charset="utf-8" />

Code:

rel="stylesheet"

et puis je n'ai pas compris pourquoi il y a un link dans

Code:

link type="text/css"

et un style dans

Code:

<style type="text/css">

Ensuite, si j'ai bien compris, il faut mettre tout le css au début, en posant les bases du style

Code:

.titre_anim{
  font-family: Lobster;
  font-size: 39px;
  color: #8ebca5;
  text-shadow: 2px 2px 0px #d9d9d9;
  text-align: center;
  letter-spacing: 2px;}

et après on n'a pas besoin de les remettre à chaque fois. On peut les utiliser comme bon nous semble dans des div class comme ça ?

Code:

<div class="titre_anim"> Récapitulatif des Concours</div>

Voilà :D

Hey, hey. :3
Reprenooons.

Ouaip, pas de problème.

Code:

<meta charset="utf-8" />

Ce code là, c'est simple, tu dois le mettre à chaque fois que tu codes quelque chose sur une page html, c'est le code qui te permet de faire des é, à, ç et autre. Sans ça fait des caractères très laid. xD (tu peux toujours essayer d'enlever/remettre pour mieux comprendre)

Ca, ça fait parti de codes donné, tout fait tout préparé, il n'y a pas à chercher à comprendre le pourquoi du comment, c'est juste un code pour utiliser des polices Google Font. (Après s'il y'a un link, c'est parce qu'il y'a un lien dans la balise. C'est qu'une supposition, je me suis jamais vraiment posé la question. )

Code:

<style type="text/css">

Pareil, ça fait parti des codes tout fait, retiens juste que c'est ce qui précèdes tes codes css et qu'une fois fini pour passer au html tu dois refermer avec un:

Code:

</style>

Après, il faut bien nommer le début de la balise d'une manière, je t'avouerais que pourquoi on met un style ici ou là, je maîtrise moyen-moyen.

Oui en gros c'est ça. :'D
Après pour éviter de répéter 46 fois la même chose tu peux utiliser des id.
Je reviendrais sur les id quand l'occasion se présentera. 8D

Bon, bon. Je te propose de coder une petite fiche ?
Ou on continue à touut décortiquer.
Dis-moi ce que tu veux faire & si t'as le temps fait toi un petit schéma et on le code ensemble. 8D (Ou je ferais un schéma si t'as pas le temps. o: )

Merci :)
Donc si j'ai bien compris, les balises

Code:

<meta charset="utf-8" />

Code:

rel="stylesheet"

et

Code:

    <style type="text/css">

je les met à chaque début de code, sans me poser de question ?

Je pense qu'on peut essayer de coder une fiche ensemble
Pour le schéma, on devrait faire simple au début, pour que je ne sois pas trop embrouillée -dis celle qui a compris la PA-

Key ? Je up en sachant que tu as ton brevet.

Hop, voilà mon code :

Code:

<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
<style type="text/css">
 
  .td1{
  width: 200px;
  border-radius:20px;
  box-shadow:2px 2px 10px #BDBDBD;
  font-family: Tahoma;
  color: #8ebca5;
  text-shadow:1px 0px 1px;}
 
  .bloc_titre{
  width: 500px;
  height: 100px;
  border-radius:20px;
  box-shadow:2px 2px 10px #BDBDBD;
  background: url(http://image.noelshack.com/fichiers/2014/25/1403105421-halftone.png);
  overflow:auto;}
 
  .bloc_1{
  width: 200px;
  height: 50px;
  text-align:center;
  border-radius:20px;
  box-shadow:2px 2px 10px #BDBDBD;
  background: url(http://image.noelshack.com/fichiers/2014/25/1403105421-halftone.png);
  overflow:auto;}
 
  .bloc_2{
  width: 300px;
  text-align:center;
  height: 50px;
  border-radius:20px;
  box-shadow:2px 2px 10px #BDBDBD;
  background: url(http://image.noelshack.com/fichiers/2014/25/1403105421-halftone.png);
  overflow:auto;}
 
  .titre1{
  font-family: Lobster;
  font-size: 37px;
  text-align: center;
  color: #8ebca5;
  text-shadow: 2px 2px 0px #d9d9d9;}
 
</style>

 <center>
  <table>
    <tr>
      <td><div class="titre1"><div class="bloc_titre">Programme du concours de binômes</div></div>
    </td>
  </tr>
    <tr>
      <td><div class="td1"><div class="bloc_1">1/2 semaines avant</div></div></td>
      <td><div class="td1"><div class="bloc_2">Début des inscriptions, créations à envoyer.</div></div>
    </td>
    </tr>
    <tr>
      <td><div class="td1"><div class="bloc_1">Début des vacances</div></div></td>
      <td><div class="td1"><div class="bloc_2">Formation des binômes, commencer les créations à deux</div></div>
    </td>
    </tr>
  </table>
</center>

Pas de commentaires sur le fait que ça ressemble à un des tiens :p

Key s'il te plait, j'aurais besoin de savoir comment rapprocher les deux cellules, parce que ça me donne ça :

Spoiler:

Alors, alors. Désolée du retard, pour me faire pardonner, un pavé. (Bordel, ses rimes, je suis un génie.)
Pour commencer avec les petits codes à mettre au début ou non il faut faire deux distinctions.
Les codes que tu vas mettre avant un code & ceux que tu dois mettre avant de coder sur une page HTML. (ou autre part, y'a plein de cas possible comme genre des logiciels de codage style NotePad++)
Oui, la distinction est floue, et il possible que ce que je dise ne soit pas réellement correct c'est juste mes ... Constatations ? 8D
Paaar exemple, ce code :

Code:

<meta charset="utf-8" />

C'est inutile de le mettre quand tu codes un petit truc en HTML que tu vas poster sur un forum ... Un formulaire de boutique par exemple. En sachant que ce code génère les accents, ça voudrait dire qu'avant chaque message posté sur SS on devrait le mettre.
Alors que quand tu vas coder sur une page HTML, sur FA, làà si tu veux utiliser des accents tu dois le mettre. Parce qu'il n'existe pas de 'base' dans le code source.
Jsais pas si tu saisis. xD
Et une nouvelle fois, je ne suis pas sûre à 100% des explications, j'ai pas appris le codage en "cours", donc ce que je dis c'est ce que je tire de mon expérience personnelle. (J'ai tellement peur de dire de la merde en vrai o_o)

Code:

<style type="text/css">

Ça c'est juste ce qui précède un code CSS, tu sais CSS c'est :

Code:

.nom {
blabla: bla;}

BON. Rentrons dans le vif du sujet.
Alours, alours. Je vois que tu as utilisé un tableau (je hais ces choses), comme tu l'as dit tu t'es appuyé de mon code (bonne initiative en passant o/), mais ici comme tu n'as que deux colonnes, tu peux "sauter" la case tableau, en appliquant uniquement un

Code:

float: left;

Personnellement je hais les tableaux, je suis pas très à l'aise avec et quand je peux coller un float lef pour les éviter je le fais.
Mais on va quand même essayer d'arranger le code comme ça. :3
On va commencer à analyser le CSS bout par bout.

Code:

 .td1{
  width: 200px;
  border-radius:20px;
  box-shadow:2px 2px 10px #BDBDBD;
  font-family: Tahoma;
  color: #8ebca5;
  text-shadow:1px 0px 1px;}

Ce code est inutile, dans le sens ou tu peux le stocker dans tes blocs (bloc_1 & bloc_2), vu qu'il ne concerne que la police.
C'est rien dit comme ça, mais c'est mieux de créer le moins de div possible, on oublie très vite de les refermer après. ;D

Code:

   .bloc_titre{
  width: 500px;
  height: 100px;
  border-radius:20px;
  box-shadow:2px 2px 10px #BDBDBD;
  background: url(http://image.noelshack.com/fichiers/2014/25/1403105421-halftone.png);
  overflow:auto;}
  
  .bloc_1{
  width: 200px;
  height: 50px;
  text-align:center;
  border-radius:20px;
  box-shadow:2px 2px 10px #BDBDBD;
  background: url(http://image.noelshack.com/fichiers/2014/25/1403105421-halftone.png);
  overflow:auto;}
  
  .bloc_2{
  width: 300px;
  text-align:center;
  height: 50px;
  border-radius:20px;
  box-shadow:2px 2px 10px #BDBDBD;
  background: url(http://image.noelshack.com/fichiers/2014/25/1403105421-halftone.png);
  overflow:auto;}

Là je vais survoler brièvement une grosse notion: l'id.
Je ne sais pas si tu l'as vu mais tu t'es répétée pas mal de fois ici ? (couleur, background, box-shadow...)
A part la largeur & deux/trois autres choses, c'est les même propriétés.
Alors, pour écourter le CSS parce que c'est simple de se perdre dedans, une invention révolutionnaire nommé les id naquit. è_é

Je vais te montrer comment ça serait si on l'appliquait à ton tableau.
(J'ai donc 'regroupé' les codes de tous les blocs y compris du titre)

Code:

#idbloc{
background: url(http://image.noelshack.com/fichiers/2014/25/1403105421-halftone.png);
text-align: center;
box-shadow: 2px 2px 10px #BDBDBD;
overflow: auto;
font-family: Tahoma;
color: #8ebca5;
text-shadow: 1px 0px 1px;
border-radius: 20px;
overflow: auto;}

.bloc_1{
width: 200px;
height: 50px;}
  
.bloc_2{
width: 300px;
height: 50px;}
  
.bloc_3{
width: 500px;
height: 100px;
border-radius:20px;}

Je pense que tu as compris le principe. ^^
Le "idbloc", c'est ce qui ne bougera pas, comme le fond ou la couleur du texte ici, tout les blocs qui se réfèrent à "#idbloc" se voient octroyer ses propriétés.
En gros. Si t'as rien compris dis-le moi, et si t'as peur de ne pas avoir tout compris tu peux tenter dans ton coin d'utiliser l'id et venir me montrer le résultat. :3
D'ailleurs ! On doit aussi changer notre html en conséquence :

Code:

<div class="bloc_1" id="idbloc">1/2 semaines avant</div>

On doit juste rajouter un "id="titre de ton id", c'est pas grand chose mais il faut y penser, c'est ce qui diras à ton code que le bloc_1 doit avoir les propriétés de l'idbloc. :'D

Rien à redire pour le titre1.

~

Rentrons dans le gros du problème : l'html.
Effectivement, c'est ici que ça foire, et c'est très con, et pas très compliqué.

Code:

 <center>
<div class="bloc_3" id="idbloc"><div class="titre1">Programme du concours de binômes</div></div>
  
   <br /> <table>
    <tr>
      <td><div class="bloc_1" id="idbloc">1/2 semaines avant</div></td>
      <td><div class="bloc_2" id="idbloc">Début des inscriptions, créations à envoyer.</div>
    </td>
    </tr>
    <tr>
      <td><div class="bloc_1" id="idbloc">Début des vacances</div></td>
      <td><div class="bloc_2" id="idbloc">Formation des binômes, commencer les créations à deux</div>
    </td>
    </tr>
  </table>
</center>

Si tu compares avec ton html de base j'ai enlevé tout les

Code:

<div class="td1"></div>

(voir l'idbloc) et le titre ne fait plus parti du tableau.
C'est ce qui le faisait buger. Dur à expliquer et je ne suis pas sûre de ce que j'avance, mais je suppose qu'inclure le bloc du titre dans le tableau "cassait" sa régularité étant donné que tu as deux colonnes par ligne, ici on avait qu'une seule colonne sur une ligne. (pour le titre toujours)
Donc automatiquement toutes les deuxièmes colonnes des deux autres lignes ont été décalées et placées juste après la fin de ton titre.
C'est ce que je suppose, j'ai simplement jarté le titre du tableau et tout va mieux.

Ah & aussi, petite erreur, mais tu avais mis le

Code:

<div class="titre1">

autour de ton bloc_texte, c'est l'inverse, il faut le mettre à l'intérieur du bloc. :3
(J'ai rajouté un margin-top furtif dans ton css en passant. )

Le code corrigé:

Code:

<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
<style type="text/css">
  

  

#idbloc{
background: url(http://image.noelshack.com/fichiers/2014/25/1403105421-halftone.png);
text-align: center;
box-shadow: 2px 2px 10px #BDBDBD;
overflow: auto;
font-family: Tahoma;
color: #8ebca5;
text-shadow: 1px 0px 1px;
border-radius: 20px;
overflow: auto;}

.bloc_1{
width: 200px;
height: 50px;}
  
.bloc_2{
width: 300px;
height: 50px;}
  
.bloc_3{
width: 500px;
height: 100px;
border-radius:20px;}
  
.titre1{
font-family: Lobster;
font-size: 37px;
text-align: center;
color: #8ebca5;
text-shadow: 2px 2px 0px #d9d9d9;}
  
</style>

 <center>
<div class="bloc_3" id="idbloc"><div class="titre1">Programme du concours de binômes</div></div>
  
   <br /> <table>
    <tr>
      <td><div class="bloc_1" id="idbloc">1/2 semaines avant</div></td>
      <td><div class="bloc_2" id="idbloc">Début des inscriptions, créations à envoyer.</div>
    </td>
    </tr>
    <tr>
      <td><div class="bloc_1" id="idbloc">Début des vacances</div></td>
      <td><div class="bloc_2" id="idbloc">Formation des binômes, commencer les créations à deux</div>
    </td>
    </tr>
  </table>
</center>

Booon, plus je me relis plus je suis en mode "WTF IS THIS SHIT D:", donc si tu n'as pas compris quelque chose n'hésite surtout pas à me le faire savoir. :3 J'me suis relue vite fait désolée des fautes.
Bonne lecture !

PS: Pour plus visibilité et parce que c'est beau et que j'aime imposer ma doctrine en bourrant le crâne des gens, c'est mieux d'écrire "width: 500px; height: 200px;" que "width:500px;height:200px;"
Voilà, voilà. HAVE FUN.  (C'est un des plus long pavé de ma vie. xD)

Oh mince, j'avais pas répondu oo
Merci key pour ce pavé, déjà j'ai compris.

Pour l'id, j'ai compris, par contre je ne comprend pas pourquoi il y a un # devant. Maybon ^^
Il faudra aussi que tu m'apprennes comment tu fais tes tableaux sans tableaux

Sinon, j'aurais un petit service à te demander. Est-ce que tu serais capable de m'apprendre à coder ça ? Ne fais attention ni aux couleurs, ni à la taille, c'est juste un gros aperçu.

Le # c'est juste pour le différencier, après tu peux l'enlever peu importe. c:
C'est juste un float: left, et tu joues sur les margin, enfin bon, on y reverra quand l'occasion se présentera.
Alooors. Pas de problème, juste c'est pour quand ton tpe ?
C'est relativement chiant les onglets, tu vas bouffer du pavé, si t'es prête on commence maintenant. o/

Vouaip' chuis prête, en attendant je bosse sur le contenu, parce que sans texte, mon TPE il est rien XD
D'ailleurs, la prof m'a foutu un gros bide quand elle a dit qu'on devait donner une version imprimée :'(

Mais j'men fou je veux une code XD

Aaaah je pue j'avais oubliiiié. D: J'espère que t'as quand même réussi à faire quelque chose.
Du coup tu veux faire quoi ? \o\

Bah j'aimerai bien quand même apprendre à faire ce code, histoire de relever mon niveau de connaissances o/

Et sinon, j'ai rendu un truc tout moche mais imprimé, donc je ne t'en veux absolument pas, parce que notre truc serait pas passé en version codé :p

Aaanw ça me rassure du coup. o/
BUH ALORS. 8D
Ca va être assez long j'imagine. :3 On va prendre tout basiquement un code avec des onglets et on va voir comment faire tout ça. Et comme j'ai aucun codes potables excepté mon code de galerie et celui que j'utilise pour mes tuto' on va prendre ce dernier. 8D (Comme ça en même temps on révisera les left).

Dooonc, dans la manière de procéder, je pense que c'est mieux de tout décortiquer bout par bout & s'arrêter sur les points assez importants.
Let's go o/

Blblblbl.

UUUps j'ai pas répondu ? honte à moi Oo
Pourtant j'ai lu je suis vraiment une quiche. On continue ce Week-end, je fais juste un ptit coucou

Mais du coup tu veux reprendre les bases oupas ? Parce que c'est assez chaud/chiant les signa codées. xD

Nan t'inquiète, je veux vraiment apprendre ça, c'est juste que j'ai des petites lacunes sur les noms des codes, parce que j'ai une ptite mémoire. Mais sinon, j'ai compris tout le principe.

Bon, donc j'ai enfin lu ton pavé, et j'ai tout compris :D
Par contre, je me pose une question, je croyais que ces trucs là :

Code:

<!--texte--!>

c'était pour mettre un texte qui ne rentrait pas dans le code. Alors pourquoi mettre un code dedans ?