«Faire face à l'infinité.»
 
AccueilCalendrierFAQRechercherMembresGroupesS'enregistrerConnexion
Invité, soit le(la) bienvenu(e) sur Codée ~

Partagez | 
 

 HTML : les bases !

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Fou furieux
Messages : 76
Date d'inscription : 25/01/2013

Feuille de personnage
Points de Vie:
16/16  (16/16)
Santé Mentale:
1/1  (1/1)
Flux énergétique :
100/100  (100/100)
avatar
Le Scribe
MessageSujet: HTML : les bases !   Mer 30 Jan - 11:45

Voici quelques points à retenir absolument quand on fait ou bidouille du html :

- Le HTML fonctionne avec ce qu’on appelle des balises, comme par ex : <div> ou <table>
- Le HTML parle anglais
- Si j’ouvre une balise, il faut ABSOLUMENT la refermer : <div> est une balise ouverte </div> est une balise fermée.
- Donc le HTML se présent ainsi : <nom de la balise> ce qui va être « touché » par la balise </nom de la balise>

Note : dans les messages habituels d’un forum, lorsque vous écrivez un texte puis vous souhaiter le mettre en gras vous sélectionnez le texte puis cliquez sur le bouton « G ». Apparaissent alors des balises entre crochet : ce ne SONT PAS des balises HTML mais BBC. ATTENTION lorsque vous faites du HTML à ne PAS y inclure de balise BBC !! sinon le PC saura rien calculé et vous vous retrouver avec des trucs qui ne marchent pas/bizarres.
Le BBC lui parle aussi bien français qu’anglais. Les balises BBC se ferment de la même manière que les balises HTML : on utilise le /

Exemple de truc à ne pas faire :
<text> Je suis en train de manger </text>
Si je veux mettre en gras (blod en anglais) je ne FAIS PAS :
<text> [bold]Je suis en train de manger [/bold] </text>


Le Scribe te surveille...
Revenir en haut Aller en bas
Voir le profil de l'utilisateur https://ambassadecodee.wordpress.com/
Fou furieux
Messages : 76
Date d'inscription : 25/01/2013

Feuille de personnage
Points de Vie:
16/16  (16/16)
Santé Mentale:
1/1  (1/1)
Flux énergétique :
100/100  (100/100)
avatar
Le Scribe
MessageSujet: Re: HTML : les bases !   Mer 30 Jan - 13:22

Note 2 : lorsqu’on fait du code et qu’on veut écrire un commentaire, pour s’organiser et d’expliquer de quoi on parle, on procède ainsi :
/* ce qui suit est la manière de régler un dilemme */
(perso j’écris aussi en majuscule pour bien les voir au milieu des lignes de code)

Ecrire ainsi au milieu d'une ligne de code = l'ordinateur ne prend pas en compte l'info :

La balise de fermeture :


Code:
 <span style="font-size: 18px; font-family: monotype corsiva; color: #A6A6A6;">
La balise de fermeture : </span>


La balise de fermeture :

Code:

<span style="font-size: 18px; /*font-family: monotype corsiva*/; color: #A6A6A6;">
La balise de fermeture : </span>


Le Scribe te surveille...


Dernière édition par Ixo (le Scribe) le Mer 30 Jan - 13:57, édité 2 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur https://ambassadecodee.wordpress.com/
Fou furieux
Messages : 76
Date d'inscription : 25/01/2013

Feuille de personnage
Points de Vie:
16/16  (16/16)
Santé Mentale:
1/1  (1/1)
Flux énergétique :
100/100  (100/100)
avatar
Le Scribe
MessageSujet: html mise en page texte   Mer 30 Jan - 13:53

N'HESITEZ PAS A POSER VOS QUESTIONS !


Les balises pour mettre en page un texte : alignement, taille, police etc….


Les exemples sont là : http://univion.forumactif.org/t31-test-des-codes-html-laboratoire-d-ixo#103 premier message

La balise d’ouverture :
<span style="font-size: 18px; font-family: monotype corsiva; color: #A6A6A6;">
La balise de fermeture : </span>
Dans la balise on définit de quoi on parle “span style” signifie le style du texte
Font-size : la taille du texte
Font-family la police d’écriture ATTENTION à choisir des polices « types » (les polices par défaut de word)
Color : le code indique la couleur (ici un bleu turquoise). Pour changer la couleur :
- vous pouvez mettre un code au pif, mélangeant des lettres et des chiffres, du moment qu’il y a six caractères, pour changer la couleur… au pif
- sinon, dans le panneau d’admin du forum, nous avons des palettes avec tous les codes couleurs => demandez nous la couleur que vous souhaitez et on vous donnera le code couleur

Dans la balise ci-dessus on définit le texte puis on met un signe = pour signifier que va expliquer ses caractéristiques. Les guillemets " sont INDISPENSABLES au début et à la fin de la liste des caractéristiques. Ils disent à l’ordinateur que l’on parle de caractéristiques et pas de carottes. Chaque caractéristique doit être séparée par un ; de la suivante.

La liste de caractéristiques peut être longue comme le bras. Au dessus nous avons vu la taille, la police et la couleur, voici d’autres qui peuvent être utiles :

font-weight: bold; /* mettre en gras le texte
font-style: italic /* mettre en italique

text-align : center /* centrer le texte
right /* à droite
left /* à gauche
letter-spacing: 2px; /* déterminer l’espace entre les lettres
(se complètera au fur et à mesure)

Pour mettre un texte en italique uniquement :
<cite> texte </cite>

Pour faire les titres comme sur les fiches personnages :
/* Exemple A*/
<span style="display: block; text-align: center; font-size: 32px; font-family: monotype corsiva; letter-spacing: 2px; font-style: italic; color: #39948C; text-shadow: 0px 3px 3px; text-shadow-color : #1B4541;">Caractéristiques…</span>

display : block /* permet (à verifier) de faire l’ombre ensuite
text-shadow: 0px 2px 3px; /* faire une ombre au texte, la premier valeur (ici 0px) correspond au décalage de l’ombre en X, la deuxième (2px) le décalage de l’ombre en Y et la troisième son épaisseur il me semble. Le mieux est que vous changiez vous-même les valeurs pour voir ce que ça donne.
text-shadow-color : #1B4541; /* détermine la couleur de l’ombre du texte

ATTENTION ça va vous embrouiller :
Un truc drôle (me demandez pas l’explication) :
Logiquement, dans la ligne de code pour « caractéristique » la logique voudrait que j’écrive ceci (entre /**/ ce que j’ai modifié par rapport à dessus).
/* Exemple B*/
<span style="display: block; text-align: center; font-size: 32px; font-family: monotype corsiva; letter-spacing: 2px; font-style: italic; /*font-*/color: #39948C; text-shadow: 0px 3px 3px; text-shadow-color : #1B4541;">Caractéristiques…</span>

En effet ci-dessus j’ai dit qu’il fallait toujours font-(détail) pour déterminer les caractéristiques du texte. Donc j’aurais dû mettre font-color et pas juste color comme c’est écrit au dessus.
Et bien figurez-vous que color tout seul ici fonction, et que font-color ne donne pas la même couleur que color seul…

Après réflexion, je trouvais aussi illogique de mettre des font-(détail) et des text-(détails) dans la même balise. Du coup j’ai essayé de « text » partout :

/* Exemple C*/
<span style="display: block; text-align: center; font-size: 32px; text-family: monotype corsiva; letter-spacing: 2px; text-style: italic; /*font-*/color: #39948C; text-shadow: 0px 3px 3px; text-shadow-color : #1B4541;">Caractéristiques…</span>
On voit que le résultat n’est vraiment pas le même !

Alors avec des « font » partout
/* Exemple D*/
<span style="display: block; font-align: center; font-size: 32px; font-family: monotype corsiva; letter-spacing: 2px; font-style: italic; /*font-*/color: #39948C; font-shadow: 0px 3px 3px; font-shadow-color : #1B4541;">Caractéristiques…</span>
=> On remarque que font-shadow ne fonctionne pas.


Le Scribe te surveille...
Revenir en haut Aller en bas
Voir le profil de l'utilisateur https://ambassadecodee.wordpress.com/
Fou furieux
Messages : 76
Date d'inscription : 25/01/2013

Feuille de personnage
Points de Vie:
16/16  (16/16)
Santé Mentale:
1/1  (1/1)
Flux énergétique :
100/100  (100/100)
avatar
Le Scribe
MessageSujet: html faire un tableau   Mer 30 Jan - 14:25

FAIRE UN TABLEAU
NOTE pour les codes couleurs : #000000 = noir ; #FFFFFF = blanc

Pourquoi faire des tableaux ? => pour l’instant c’est la seule manière que j’ai trouvée pour présenter un texte face à un autre de cette manière :

Orange Orange

Sans avoir à faire des milliards d’espaces.
ATTENTION !!! pour les tableaux il faut être RIGOUREUSEMENT METHODIQUE : une balise mal fermée ou oubliée et c’est la mort assurée (déjà que là, je ne suis pas encore convaincue tout à fait de ma méthode).
ATTENTION !!! pas plus d'un tableau par page !!!! ATTENTION il n'aime pas NON plus qu'il y ait deux tableaux dans un post !
ATTENTION !!! toujours mettre quelque chose AVANT et APRES (même une seule lettre) sinon il comprend que le tableau est en quelque sorte un nouveau message !!! et cela fait changer les tailles des pages !

Je n’ai pas encore tout à fait pigé comment ça marché, mais voilà l’essentiel :

Pour faire un tableau il faut
- définir le tableau <table = « col=x »> /* tableau à x colonnes
- définir une ligne <tr>
- définir une case <td>
- mettre le contenu de la case
- fermer la case </td>
- définir x-1 autres cases : <td> contenu de la case</td> <td> contenu de la case</td> <td> contenu de la case</td> ….
- fermer la ligne </tr>
- fermer le tableau </table>
Il est possible de créer autant de ligne qu’on veut, mais on ne peut pas créer plus de cases que le nombre de colonnes définies au début.

Les caractéristiques de la balise d’ouverture d’un tableau :
col=x /* nombre de colonnes
border=x /*taille de la bordure en pixels.
cellpadding=x /* espacement entre bordure et texte.
cellspacing=x /* Espacement entre les cellules.
A vous de tester pour voir ce que tout ça donne.
border-color = #FFFFFF ne permet pas de changer la couleur à la bordure

Pour les fiches personnages j’avais besoin de deux tableaux : un pour « identité » (image/texte) et un pour « caractéristiques » (texte/texte). Comme je l’ai répété partout, il ne faut pas mettre plusieurs tableaux par page. J’ai donc dû faire un seul tableau pour identité et caractéristiques en même temps.
Problème : « caractéristiques » est un titre, je devais donc faire :
Une ligne à deux cases (texte/image)
Une ligne à une case (titre)
Une ligne à deux cases (texte/texte)

Pour cela :
<td = « colspan=x »> /* x cellules à fusionner horizontalement
(à employer avec prudence : je n’ai pas réussi à garder « caractéristiques » centré, il doit y avoir des détails à régler sur la taille de la cellule)

Autres trucs à mettre éventuellement dans les balises <td> :
backgroundcolor=#couleur /*couleur d'arrière-plan de la cellule.
align=center left right /*le texte compris dans les cellules est centré, aligné à gauche, aligné à droite.





Le Scribe te surveille...
Revenir en haut Aller en bas
Voir le profil de l'utilisateur https://ambassadecodee.wordpress.com/
Fou furieux
Messages : 76
Date d'inscription : 25/01/2013

Feuille de personnage
Points de Vie:
16/16  (16/16)
Santé Mentale:
1/1  (1/1)
Flux énergétique :
100/100  (100/100)
avatar
Le Scribe
MessageSujet: Re: HTML : les bases !   Mer 30 Jan - 14:28

http://www.codeshttp.com/baliseh.htm

y'a pas mal d'exemple de base existentes sur ce site mais à utiliser avec prudence;


Le Scribe te surveille...
Revenir en haut Aller en bas
Voir le profil de l'utilisateur https://ambassadecodee.wordpress.com/
Fou furieux
Messages : 76
Date d'inscription : 25/01/2013

Feuille de personnage
Points de Vie:
16/16  (16/16)
Santé Mentale:
1/1  (1/1)
Flux énergétique :
100/100  (100/100)
avatar
Le Scribe
MessageSujet: Re: HTML : les bases !   Mer 30 Jan - 14:33

animation (attention aux yeux !)

texte




Le Scribe te surveille...
Revenir en haut Aller en bas
Voir le profil de l'utilisateur https://ambassadecodee.wordpress.com/
Contenu sponsorisé
MessageSujet: Re: HTML : les bases !   

Revenir en haut Aller en bas
 

HTML : les bases !

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Recherche GW Flying Bases
» [Guide] Localisation des bases secrètes dans ROSA
» HTML
» Fiche type de présentation ~ Version HTML + Points essentiels pour les présentations
» ETOILE DE NOEL ou POINSETTIA

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Univion :: Autres :: Vous mourez d'envie de nous en parler-