Bienvenue à Drenan

Forum Drenai de la guilde Slayers Online
 
AccueilPortailS'enregistrerConnexion

Partagez | 
 

 HTML: bases =)

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Invité
Invité



MessageSujet: HTML: bases =)   Lun 27 Fév - 22:45

J'ai déjà vu pas mal de questions sur le HTML, comment faire ceci cela, donc je vais essayer de récapituler ici. Après, vous pourrez modifier votre RP par exemple Very Happy

I - Quelques balises

Le HTML est composé de balises...
Elle ont chacune une fonction précise, et on leur met des paramètres (facultatifs) pour qu'elles servent à quelque chose (bah ouais, une balise <img /> toute seule, pas très utile!)

Les balises de base:

Balise a:
Code:
<a href="adresse du lien" target="_blank">Cliquez ici!</a>
Pour créer un lien!
Demande un seul paramètre, href="l'adresse" en http://www.monsite.com par exemple Very Happy
Le paramètre target="_blank" permet d'ouvrir le lien dans une nouvelle fenêtre, virez le donc si c'est pas utile.


Balise police:
Code:
<font color="red" size="14" face="Arial">Votre texte</font>
On peut mettre plusieurs paramètres:
    La couleur: color="une couleur". La couleur peut être red, green, yellow, blue... ou en hexa: #a2ff3a par exemple (la je sais pas ce que c'est j'ai mis au pif ^^)

    La taille: size="une taille". La taille est exprimée en pixels. (14 c'est une taille moyenne =) )

    La police: face="une police". Attention: si le visiteur de votre page n'a pas la police, il vera la npolice serif de base je crois. Donc mettre une police que tout le monde a! (Arial, Verdana, Comic Sans MS...)


Balises gras, italique et souligné:
Code:
<b>texte gras</b>
<i>texte italique</i>
<u>texte souligné</u>
Pourquoi b, i et u? Pour bold, italic et underline Wink

Balise image:
Code:
<img src="chemin de l'image" width="largeur" height="hauteur"/>
Encore deux paramètres:
    La largeur: width="largeur" avec la largeur exprimée en pixels.

    La hauteur: height="hauteur" avec la huteur exprimée en... j'vous dirai pas ^^


Balise marquee:
Pour faire défiler du texte!
Code:
<marquee behavior="type" width="largeur" height="hauteur" direction="une direction" scrollamount="vitesse">Texte à faire défiler</marquee>
Sans aucun paramètre, il défilera vers la gauche à une vitesse moyenne.
On peut donc mettre:
    Un type de défilement: behavior="type" avec, à la place de type, scroll pour faire défiler le texte en boucle, et alternate pour lui faire faire des aller-retours.

    Hauteur/largeur: je vous dirai pas ^^

    La direction: direction="une direction" avec à la place de "une direction", left, pour que le texte aille vers la gauche, right pour la droite, down pour le bas et top pour le haut.

    La vitesse: scrollamount="vitesse". La, il faut simplement mettre un chiffre: essayez Wink (10 à l'air pas mal)


Balise table
Pour créer un tableau!
Code:
<table border="épaisseur de bordure" width="largeur" cellspacing="espacement cellules" cellpadding="espacement entre cellules et texte" bgcolor="couleur de fond">
<tr>//ligne 1
  <td>cellule 1 de ligne 1</td>
  <td>cellule 2 de ligne 1</td>
  //etc...
</tr>
<tr>//ligne 2
  <td>cellule 1 de ligne 2</td>
  <td>cellule 2 de ligne 2</td>
  //...
</tr>
</table>
Bon je pense que c'est assez clair.
On déclare le tableau avec table (qu'on oublie pas de refermer!), puis chaque ligne avec tr et chaque cellule avec td.
    Largeur: Devinez?!

    Bordure: border="épaisseur" avec un chiffre pour épaisseur.

    Espacement des cellules: cellspacing="espacement" avec un chiffre pour espacement!

    Espacement entre cellules et texte: cellpadding="un chiffre". C'est en fait la marge autour du texte de chaque cellule.

    Couleur de fond: bgcolor="une couleur". On peut mettre les couleurs comme pour le texte!

On peut aussi fusionner deux colonnes sur une ligne ou deux lignes sur une seule:
Code:
<table border="2" cellspacing="2" cellpadding="1" width="80%">
<tr>//ligne 1
  <td colspan="3">seule cellule de la ligne qui occupe toute la largeur (3  colonnes)</td>
</tr>
<tr>//ligne 2
  <td>cellule 1 de ligne 2</td>
  <td>cellule 2 de ligne 2</td>
  <td>cellule 3 de ligne 2</td>
  <td rowspan="2">Ligne qui occupe la hauteur de deux lignes</td>
  //...
</tr>
</table>
PS : on peut aussi mettre des paramètres à td et tr!
    Fusionner des colonnes: colspan="nombre" avec le nombre de colonnes à fusionner.

    Fusionner des lignes: rowspan="nombre" avec le nombre de lignes à fusionner.

Pour ceux qui auraient mal compris:
colspan sur 4 colonnes
cellule 1 de ligne 2cellule 2 de ligne 2cellule 3 de ligne 2rowspan sur 2 lignes
colspan sur 3 colonnes

Balises paragraphe, retour à la ligne, barre horizontale et caractères spéciaux
Je mets tout ça en un parce que c'est pas très utile pour mettre dans sa description, mis à part paragraphe peut-être.
Code:
<br />
retour à la ligne (y'a pas plus simple =) )

Code:
<hr />
barre de séparation horizontale!

Code:
<p>Un paragraphe</p><p>Un deuxième paragraphe</p>
Pour créer des paragraphes! Pratique: retour à la ligne automatique, et ça créé un espace entre les paragraphes.

Code:
h&eacute;h&eacute;! L&agrave;, tu comprends? &gt;&lt; &quot;il est b&ecirc;te =)
Les caractères spéciaux: pas utiles pour votre RP sur SO, puisque c'est converti automatiquement! Mais en vrai HTML, il faut écrire ça...
Code:
&eacute; = é
&eagrave; = è
&agrave; = à
&ecirc; = ê
&gt; = >
&lt; = <
Et j'en passe...
La liste complète ici: http://www.commentcamarche.net/html/htmlcarac.php3

Allez donc jeter un oeil ici et regardez la source de la page!


Allez, maintenant je veux que des belles descriptions Very Happy


Dernière édition par le Lun 27 Fév - 23:40, édité 8 fois
Revenir en haut Aller en bas
Invité
Invité



MessageSujet: Re: HTML: bases =)   Lun 27 Fév - 22:51

PAs mal Arki c'est un bon tuto pour les bases et vraiment il y a tout se qu'il faut c'est vraiment bien fais Wink
Il manque juste des exemples donc pourquoi ne pas crée une page html avec justement tous les exemples ? juste pour qu'ils aient une idée Wink
Revenir en haut Aller en bas
Invité
Invité



MessageSujet: Re: HTML: bases =)   Lun 27 Fév - 23:00

Pourquoi pas!
Je vais faire ça Wink

EDIT: Ok, j'ai rajouté quelques trucs que j'avais oubliés (comme les liens Rolling Eyes ) et mis un lien tout en bas vers une page pas-belle ou y'a tout ce que j'ai dit dans le tuto Very Happy
Revenir en haut Aller en bas
Invité
Invité



MessageSujet: Re: HTML: bases =)   Mar 28 Fév - 10:49

HANNNN Quand j'ai poser la question pour savoir si un blaierau était intelligent, ca ne m'étonne pas que tu es dit oui Arkhi x)

Merci Arkhi, je savais tout appart les textes défilant et les tableaux !

Merci merci merci !!! *calme* Se pend
Revenir en haut Aller en bas
Invité
Invité



MessageSujet: Re: HTML: bases =)   Mar 28 Fév - 19:33

^^
Revenir en haut Aller en bas
Invité
Invité



MessageSujet: Re: HTML: bases =)   Mer 1 Mar - 15:25

C'est tres bien fait... Mais tu as oublier de mettre comment on fait les fonds d'écran (je sais, je sais, tu peux pas penser a tout)...

Alors pour ceux qui savent pas faire de fond d'écran en HTML c'est tres simple :

Citation :
<table width="hauteur" height="largeur" border="0 (laissez 0)" background="URL"><tr><td valign="top">

La hauteur et la largeur : A vous de choisir!

URL :Eh bien l'URL de votre image.

Voila ^_^ *se pend* Se pend
Revenir en haut Aller en bas
Invité
Invité



MessageSujet: Re: HTML: bases =)   Mer 1 Mar - 16:10

Euh... je suppose que ce que t'appelles fond d'écran c'est image d'arrière plan =p
En fait y'a mieux que ca... ^^
Normalement sur un site faut mettre ca dans le css.. mais la on peut pas!
Donc on fait un div:
Code:
<div style = "background-image: url('adresse de l'image');">page</div>
ou
<div style = "background-color: une couleur de fond;">page</div>
Donc on ouvre le div tout au début et on le ferme tout à la fin!
Plus simple qu'un tableau non? Wink
Revenir en haut Aller en bas
Invité
Invité



MessageSujet: Re: HTML: bases =)   Mer 1 Mar - 17:34

Eh ben je connaissais pas ça é_è *peux plus se pendre a cause de Heinar*. En résumer : Les blaireaux, c'est pas bète...
Revenir en haut Aller en bas
Invité
Invité



MessageSujet: Re: HTML: bases =)   Mer 1 Mar - 17:38

J'en étais sur ! Rolling Eyes
Revenir en haut Aller en bas
Invité
Invité



MessageSujet: Re: HTML: bases =)   Mer 1 Mar - 19:44

Very Happy
*a sauvé l'honneur blaireau*
badger honor
l'honneur blaireau
Revenir en haut Aller en bas
Invité
Invité



MessageSujet: Re: HTML: bases =)   Mer 1 Mar - 22:29

lol j'avoue que avant je me poser des questions sur les blaireaux :cyclops:
Revenir en haut Aller en bas
Invité
Invité



MessageSujet: Re: HTML: bases =)   Jeu 2 Mar - 0:44

Le blaireau maintenant respecté sera
Revenir en haut Aller en bas
Invité
Invité



MessageSujet: Re: HTML: bases =)   Jeu 2 Mar - 9:43

Oui ^^
Revenir en haut Aller en bas
Invité
Invité



MessageSujet: Re: HTML: bases =)   Ven 29 Fév - 13:09

Euh... je suppose que ce que t'appelles fond d'écran c'est image d'arrière plan =p
En fait y'a mieux que ca... ^^
Normalement sur un site faut mettre ca dans le css.. mais la on peut pas!
Donc on fait un div:
Code:
page

ou
page

Donc on ouvre le div tout au début et on le ferme tout à la fin!
Plus simple qu'un tableau non? Wink

Pourquoi utilisé des div quand on a pas besoin ? Rolling Eyes
Revenir en haut Aller en bas
Auré*le*sanguinaire

avatar

Féminin
Nombre de messages : 1773
Age : 28
Level : 65
Date d'inscription : 27/05/2006

Description
Competence naturelle: FORCE : le joueur infligera le double de degat.
Vie:
0/0  (0/0)

MessageSujet: Re: HTML: bases =)   Ven 21 Nov - 19:33

ça aide merci invité
Revenir en haut Aller en bas
ChiliPepper/FaiTh

avatar

Féminin
Nombre de messages : 40
Level : 10/65
Date d'inscription : 27/01/2009

MessageSujet: Re: HTML: bases =)   Jeu 9 Avr - 18:15

*up*
Sur la description de mes 2perso, j'ai mis une bannière au-dessus, mais sur IE on la voit à gauche et sur Mozilla, on la voit centrée. J'aimerais savoir comment faire pour qu on les voit centrées sur IE aussi.
Merci d'avance Very Happy
Revenir en haut Aller en bas
SHEJ
Admiratrice secrète de Greldinard
avatar

Féminin
Nombre de messages : 7357
Age : 26
Guilde : Drenaï/ClanQuincy/legend
Loisirs : Commerce, XP
Level : *suis HunK dans l'élevage de levels 65*
Date d'inscription : 23/04/2006

Description
Competence naturelle:
Vie:
100/100  (100/100)

MessageSujet: Re: HTML: bases =)   Jeu 9 Avr - 19:43

IE ne reconnaît pas la balise < center>
Il faut mettre du CSS pour que ça soit reconnu par tous les navigateurs mais on ne peut pas faire usage de CSS sur les descriptions de SO ^^
Donc pas possible.

(sinon, à titre informatif et sans page CSS à côté, c'est la balise
Code:
<span style="text-align:center;">Texte</span>
si c'est à l'intérieur d'un paragraphe ou
Code:
<div style="text-align:center;">Texte</div>
si c'est un titre ou un paragraphe entier)

_________________





Revenir en haut Aller en bas
http://clan-quincy.frbb.net
ChiliPepper/FaiTh

avatar

Féminin
Nombre de messages : 40
Level : 10/65
Date d'inscription : 27/01/2009

MessageSujet: Re: HTML: bases =)   Jeu 9 Avr - 20:42

Merci Shej.
Revenir en haut Aller en bas
Shura

avatar

Masculin
Nombre de messages : 280
Age : 28
Guilde : LESTEMPLIERS
Level : 65 x 5
Date d'inscription : 08/07/2007

Description
Competence naturelle: DEXTERITE : le joueur esquivera une attaque sur deux
Vie:
4545/4545  (4545/4545)

MessageSujet: Re: HTML: bases =)   Jeu 9 Avr - 22:57

Euh... j'utilise IE, et les images que je centre avec un < center> sont centrées =o


Fait un retour à la ligne après ton < tr / >

Bug du code x(

< tr / >
< center >< img src= "" >< br />
< tr / >


Dernière édition par Shura le Jeu 9 Avr - 23:12, édité 5 fois
Revenir en haut Aller en bas
ChiliPepper/FaiTh

avatar

Féminin
Nombre de messages : 40
Level : 10/65
Date d'inscription : 27/01/2009

MessageSujet: Re: HTML: bases =)   Jeu 9 Avr - 23:01

Oui, ba j ai regardé les descriptions d autres perso qui ont une bannière tout au dessus et je les vois centrées sur IE et Mozilla aussi, mais pas pour les miennes.
Revenir en haut Aller en bas
SHEJ
Admiratrice secrète de Greldinard
avatar

Féminin
Nombre de messages : 7357
Age : 26
Guilde : Drenaï/ClanQuincy/legend
Loisirs : Commerce, XP
Level : *suis HunK dans l'élevage de levels 65*
Date d'inscription : 23/04/2006

Description
Competence naturelle:
Vie:
100/100  (100/100)

MessageSujet: Re: HTML: bases =)   Ven 10 Avr - 0:45

Oui c'est avec IE6 que c'est pas compatible me semble... les versions au dessus c'est bon

_________________





Revenir en haut Aller en bas
http://clan-quincy.frbb.net
Contenu sponsorisé




MessageSujet: Re: HTML: bases =)   

Revenir en haut Aller en bas
 
HTML: bases =)
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Les bases d'un RP
» Navigation : les bases pour vite se repérer dans le forum
» [Peinture] Astuce - Créer ses couleurs GW grâce aux bases
» Fermeture de Bases : Merci Mr Sarkozy !!!!
» cours HTML + tp

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Bienvenue à Drenan :: Les galleries de Drenan :: Les tutos-
Sauter vers: