[CODES HTML] Tutos, tips et entraide

Hanea · 03/04/2013 à 14:28

Comment utiliser ce topic ?

1. Pour apprendre et/ou récupérer un code HTML, regarde le sommaire des tutos ci-après
Tu peux chercher un code dans cette page par mot-clé, en faisant CTRL+F / CMD+F ou via la fonction recherche du forum.
2. Teste, re-teste, re-re-teste... c'est avec la pratique qu'on apprend.
3. Si ton problème persiste, reviens dans ce topic pour demander de l'aide !

Nota bene : Tu peux proposer ton code HTML s'il n'est pas répertorié ici ou si le tuto n'est pas clair, ou obsolète !

Le HTML, c'est quoi ?

HTML est l'acronyme de HyperText Markup Language. Le HTML est le langage informatique le plus utilisé sur le web. Très simple à comprendre et à apprendre, il est possible avec le HTML, de créer une page web complète facilement. Il est souvent associer avec d'autres langages comme le CSS (feuilles de style en cascade) et le JavaScript.

Le CSS, c'est quoi ?

CSS est l'acronyme de Cascading Style Sheets. Le CSS est le langage informatique qui sert à personnaliser le rendu graphique des pages web. Le langage CSS permet de préciser les caractéristiques visuelles de présentation d'une page web : les polices de caractères, les marges et les bordures, les couleurs, le positionnement des différents éléments, etc.

Sommaire des tutoriels :

Comment insérer du code HTML dans son profil ?
Vocabulaire, outils & liens utiles
Les codes HTML de base : bloc, fond, image, liens, texte, bordure
Créer plusieurs blocs grâce à un tableau
Faire une présentation avec un sommaire cliquable (cachée ou non)
Petits + : curseur, dégradé de couleurs, effets...
Les codes non utilisables sur SF

Dernière modification par Hanea (03/07/2020 à 17:20)

HeeDuo · 05/04/2013 à 20:25

Vocabulaire, outils & liens utiles

Tutoriels de base (Cliquer sur les images pour voir le tutoriel.)

Autres Tutoriels

» Barre d'édition : Tutoriels expliquant les différents boutons de la barre d'édition.
» Image/lien : Tutoriel qui explique comment mettre un lien sur une image (on clique sur l'image = on tombe sur une page).
» Sailor en transparence : Tutoriel qui explique comment avoir sa sailor en transparence (et redimensionnement de l'image).

Aide/Vocabulaire

» div → Balise générique de type block
» block → Occupe toute la largeur disponible. Lorsque 2 éléments blocs se suivent dans une page, ils sont positionnés
(par défaut) l'un sous l'autre.
» span → Balise générique de type inline
» inline → N'occupe que la largeur indispensable à l'affichage du contenu et ne provoque pas de retour à la ligne.
Lorsque 2 éléments en-ligne se suivent dans une page, ils sont positionnés l'un à côté l'autre
(si la largeur de page le permet).
» style → Cet attribut vous permet d'indiquer directement le code CSS à appliquer.
» width → Largeur d'un bloc.
» height → Hauteur d'un bloc.
» margin → Marge autour de l'élément.
» padding → Marge interne à l'élément. Elle sépare le contenu de la bordure.
» scrollbar → C'est la barre de défilement. Barre qui permets de monter/descendre sur une page.

» px ou pixel → Le pixel d'une contraction d'un mot anglais "Picture Element" constitue la plus petite entité d'une image généralement sous forme de carré il constitue la base de l'informatique graphique.

Sites utiles :
Memento des balises Html - Mémento des propriétés CSS
Alt-Codes - Caractères Spéciaux
Générateur de Tableau - Générateur de Bordures Arrondies
Table des Couleurs - BBCode converti en Html
Plus d'information : Fonctionnement Margin et Padding

HeeDuo · 22/09/2013 à 23:05

Les codes HTML de base

Créer un bloc

Code de base à modifier :
<div style="width: 500px; height: 400px; text-align: center; overflow: auto;">texte</div>

→ Ajouter de l'ombre :
box-shadow: 2px 0px 10px #000000;
de l'ombre à l'intérieur du bloc : ajouter inset

→ Ajouter une scrollbar (= barre de défilement) :
overflow: auto; → Mets automatique une scrollbar sur le côté à droite et en bas.
overflow-y: scroll; → Mets seulement une scrollbar sur le côté droit.
overflow-z: scroll; → Mettre seulement une scrollbar en bas.

Astuce : pour sauter une ligne dans un bloc, vous pouvez faire ENTREE + MAJ.

Les fonds

→ Mettre un fond de couleur :
<div style="background-color: #6080d1;">ton profil</div>
- Changer le code couleur : après le #

→ Mettre une texture/une image en fond :
<div style="background-image: url(http://);">ton profil</div>
- "http://" : le lien url de l'image
» Vous pouvez trouver des Fonds sur Nouveaux Fonds Hébergés et ce club propose aussi d'herberger des fonds.
» Vous pouvez demander gentiment à une créatrice de vous héberger un fond : liste des CDT.

Les liens

<a href="http://" target="_blank">titre lien</a>
- "http://" : le lien url
- "_blank" : s'ouvre dans un nouvel onglet

<a style="color: #cecece; text-decoration: none;" href="http://" target="_blank">titre lien</a>
- "color: #codecouleur" : couleur du lien / changer le code couleur : après le #
- "text-decoration: none" : sans soulignement
- "http://" : le lien url
- "_blank" : s'ouvre dans un nouvel onglet

Image

→ Mettre simplement une image :
<img src="http://">http://</img>
- "http://" : le lien url de l'image

→ Décorer l'image :
<img src="http://" style="border: 1px solid #000000;">http://</img>
- "http://" : le lien url de l'image
- "style" : permets de mettre différentes propriétés
- bordure : voir ci-dessus "Ajouter une bordure"

Texte
→ Codes basiques pour le traitement de texte et police.

→ Placement du texte :
<div style="text-align: center;">texte</div>
- center : le texte est centré
- left : texte ferré à gauche
- right : texte ferré à droite

→ Ajouter une ombre au texte :
<div style="text-align: center; text-shadow: 2px 0px 10px #000000;">texte</div>
Où les 4 valeurs correspondent, dans l'ordre :
- Décalage de l'ombre vers la droite
- Décalage de l'ombre vers le bas
- Valeur du flou de l'ombre
- Couleur de l'ombre

Les bordures

Le code : border: 1px #000000 solid;
à mettre à un bloc : <div style="border: 1px #000000 solid;">contenu</div>
ou une image : <img src="http://" style="border: 1px #000000 solid;" />
- "http://" : le lien url

- Augmenter l'épaisseur de la bordure : 2px, 10px,...
- Changer le code couleur : après le #
- Changer la forme : solid (_____) dotted (. . . . .) dashed (- - - - -) double ( === ) groove (en relief)

Coins arrondies :
border-radius: 10px ou en détail border-top-left-radius / border-top-right-radius / border-bottom-left-radius / border-bottom-right-radius

Ce qui donnerai par exemple : style="border-radius: 10px;" ou style="border-top-left-radius: 10px; border-top-right-radius: 5px; border-bottom-left-radius: 10px; border-bottom-right-radius: 5px;" ou encore border-radius: 10px 0px 0px 10px;
Pour border-radius: 10px 5px 5px 10px; : Il est possible de définir l'arrondi de chacun des angles, à l'aide d'une écriture raccourcie qui se lit comme à l'accoutumée dans le sens des aiguilles d'une montre en débutant par le haut (top, right, bottom, left). soit arrondi à 10px en haut à gauche, 5px en haut à droite, 5px en bas à gauche et 10px en bas à droite.

Bordure en image : Merci xRisaa

HeeDuo · 22/09/2013 à 23:05

Créer plusieurs blocs grâce à un tableau

Base pour faire un tableau
 Codes basiques pour faire un tableau

<table><tr><td>contenu</td></tr></table>
- table : tableau
- tr : ligne
- td : cellule

Deux simple bloc.

<table><tr>
<td>Le contenu du bloc de gauche.</td>
<td>Le contenu du bloc de droite.</td>
</tr></table>

Un bloc et une scrollbar.

<table><tr>
<td>
<div style="overflow-y: scroll; width: XXpx; height: XXpx;">Le contenu du bloc.</div>
</td>
</tr></table>
- overflow-y : barre de défilement à droite
- width : largeur du bloc, remplacer les XX par un chiffre
- height : hauteur du bloc, remplacer les XX par un chiffre

Deux bloc avec scrollbar.

<table><tr>
<td>
<div style="overflow-y: scroll; width: XXpx; height: XXpx;">Le contenu du bloc de gauche.</div>
</td>
<td>
<div style="overflow-y: scroll; width: XXpx; height: XXpx;">Le contenu du bloc de droite.</div>
</td>
</tr></table>
- overflow-y : barre de défilement à droite
- width : largeur du bloc, remplacer les XX par un chiffre
- height : hauteur du bloc, remplacer les XX par un chiffre

Petit plus : Générateur de Tableau - Différentes dispositions 1 2 - Fusion

HeeDuo · 22/09/2013 à 23:07

Faire une présentation avec un sommaire cliquable

Sommaire cliquable
{Merci à Bipomme}

Sommaire :
Présentation - Votes quo' - Règles

*-*-* Présentation *-*-*
Texte pour la présentation

*-*-* Votes quo' *-*-*
Texte pour les votes quo'

*-*-* Règles *-*-*
Règlement

Voilà le code que je vais mettre :
Sommaire :
<a href="#a">Présentation</a>
<a href="#b">Votes quo'</a>
<a href="#c">Règles</a>

<a name="a"></a>*-*-* Présentation *-*-*
Texte pour la présentation

<a name="b"></a>*-*-* Votes quo' *-*-*
Texte pour les votes quo'

<a name="c"></a>*-*-* Règles *-*-*
Règlement
Bien sûr, tu peux mettre autre chose que a b c, mais attention à bien mettre le # dans le sommaire.

Sommaire cliquable cacher

Si on reprends, le code ci-dessus, il faut mettre la partie <a name="a"></a>... dans une div avec :
- une hauteur (height),
- une largeur (width) en px ou en auto,
- une scrollbar invisible (overflow: hidden;).

Pour chaque partie <a name="a"></a>..., par exemple :

<div style="font-size: small; width: 305px; height: 100px; text-align: center;"><a id="a" name="a"></a><br />BLOC 1 - SON CONTENU</div>

Vous pouvez retrouver un code, déjà fait, à personnaliser : ICI
Rendu :

HeeDuo · 22/09/2013 à 23:08

Petits +

Afficher un article

<a href="jeu.1.tendance.article.html?id=xx" target="_blank"><img src="temp/button/xx.gif" width="xxpx" height="XXpx"></img></a >
- remplacer les "xx" par l'ID de l'article
- "width" et "height" : changer la taille des miniatures

Mettre un curseur

<div style="cursor: url(http://adresse url du curseur.gif), default;">
→ De préférence, il faut que le curseur soit enregistrer au format ".gif"
» Club proposant des curseurs : Les Nouveaux Fonds Hébergés - Gifs & Curseurs

Effets

» opacity → Régler l'opacité d'un bloc ou d'un texte ou d'une image (entre 0.1 et 0.9)
exemple : <div style="width: 500px; height: 200px; opacity: 0.6;">contenu</div> ou <div style="width: 500px; height: 200px; background-color: rgba(0,0,0,0.5);>contenu</div>

Fond dégradé couleur
{Merci à Goshujin}

Dégradé du haut en bas :
<div style="background-image: linear-gradient(white, black);">

Dégradé radial :
<div style="background-image:radial-gradient(white, black);">

- Mettez les couleurs que vous voulez à la place de white et black.

MikuraAngels a écrit :

RGB > Rouge, vert, bleu.
Le A te permet d'ajouter la transparence juste sur le fond de ton bloc, et non sur le bloc en entier.
Lorsque tu ajoutes "opacity:0.8;" dans le style de ton code, il rend la bloc semi transparent, avec le texte semi transparent aussi.
Le rgba te permet te faire cela, mais sans rendre le texte transparent :3

exemple : background-color: rgba(255, 255, 255, 0.0980392);

Shirashi a écrit :

Tu parles bien des images fixes en dehors du profil ?
Si mes souvenirs sont bons, c'est quelque chose du type :
<div style="position: fixed; left: 1px; bottom: 0px;">
<img src="liendelimagehébergée" alt="" width="100" height="100" /></div>
J'ai mis des valeurs au pif. Et sans saut à la ligne, je l'ai mis pour qu'on voit le code en entier

HeeDuo · 22/01/2014 à 21:49

Ce qu'on ne peut pas mettre sur le profil/présentation de club SF :

Mettre des vidéos sur le profil, juste le lien menant à la vidéo.
Mettre des choses en flash (.swf).
Mettre d'iframe (explication d'une iframe).
Héberger une feuille de style (CSS).
Pas de PHP.

PandaKawaii · 26/04/2014 à 14:48

Lu hee',
oui c'est encore moi xDDD
dites moi qu'est ce que sa veut dire '' rgba '' dans le code :
background-color: rgba(255, 255, 255, 0.0980392)

~ PandKawaii

MikuraAngels · 26/04/2014 à 17:51

RGB > Rouge, vert, bleu.
Le A te permet d'ajouter la transparence juste sur le fond de ton bloc, et non sur le bloc en entier.
Lorsque tu ajoutes "opacity:0.8;" dans le style de ton code, il rend la bloc semi transparent, avec le texte semi transparent aussi.
Le rgba te permet te faire cela, mais sans rendre le texte transparent :3

Ritka · 06/05/2014 à 13:15

Quel est le code pour avoir des bords arrondis avec de l'ombre et des pointillés mais sur le contour (pas pour un tableau ni pour un bloc et tout)?

HeeDuo · 06/05/2014 à 13:20

Sur une image ?

<img style="border: Xpx dotted #codecouleur; border-radius: XXpx; box-shadow: 1px 1px Xpx #codecouleur;" src="http://lienimage" />

Remplacer les X par un chiffre, 'code couleur' par le code couleur (ex : #000000) et le 'lien image' par l'url de l'image.

MikuraAngels · 07/05/2014 à 14:58

Inolis a écrit :

Essaies avec un overflow:auto. Dis-moi si ça fonctionne. C:

Justement le overflow: auto met aussi la barre horizontale auto ^^ mais j'ai trouvé seule !

Par contre autre question ! Comment mettre un lien sur une partie d'une image sans avoir à découper l'image. J'ai vu que c'etait possible de le faire sur certain profil !

Inolis · 07/05/2014 à 17:49

Tu utilises un image-map.
Voici un site où tu peux en créer un:
http://www.maschek.hu/imagemap/imgmap

Horiah · 08/05/2014 à 09:58

Inolis, voilà un exemple du lien que je prend ^^

[*url=http://www.hostingpics.net/viewer.php?id=204027Konan.png][img*]http://img4.hostingpics.net/pics/204027Konan.png[/img*][/url*]

(j'ai ajouté des *)

Dernière modification par Horiah (08/05/2014 à 09:58)

Inolis · 08/05/2014 à 12:21

C'est du bbcode et non du HTML. C: Il suffit de le convertir.
Les forum fonctionnent en bbcode pour les messages, mais les profils pour SF sont écrits en HTML.

Voici le code:

Si tu veux enlever le lien dessus, il suffit d'enlever les balises <a href> et </a> comme ceci:

Voilà. C:

Horiah · 09/05/2014 à 18:01

J'ai essayé et ça marche ^^ ! Moi je prenais le lien à partir de Hosting Pics !

Merci

Edit : vous pouvez me donner le code pour mettre de la couleur à la police du profil ?

Dernière modification par Horiah (09/05/2014 à 19:51)

Eislinn · 23/07/2014 à 13:05

Bonjour /o Je suis débutante dans ce jeu. J'ai codé ma première présentation sur un autre site et je pensais qu'en utilisant "iframe" cela marcherait... et ben non.

Vualà le lien >> http://fonte.forumactif.org/h1-sailorfuku-personnel

Est-ce possible d'arranger ça, sachant que ce serait bête d'avoir codé inutilement... ^^'

HeeDuo · 23/07/2014 à 13:18

Certains code html ne fonctionne pas sur Sailor Fuku (flash, iframe, etc...).
D'ailleurs, me demande si l'effet sur ton image fonctionnerai sur SF, je pense pas
Le mieux serait d'essayer de le faire directement sur SF comme ça tu vois si des choses fonctionne ou pas.

Eislinn · 23/07/2014 à 13:33

Merci pour la réponse, du coup je me demandais si les codes CSS fonctionnaient (<style>.tutututut { blabla: nyanyan;}</style>) ou bien s'il faut faire ainsi : (par exemple) <div style="blabla: nyanyan;">

Dernière modification par Eislinn (23/07/2014 à 13:33)

HeeDuo · 23/07/2014 à 13:37

<div style="blabla: nyanyan;"> qu'il faut faire.

HeeDuo · 27/07/2014 à 16:32

Yu_Yuemei a écrit :

Bonjour , je voulais demander où est ce qu'on peut trouver un tuto' pour mettre une image au dessus de notre présentation ? ^^ Genre il y a mon bloc , mais j'ai envie de mettre une image par dessus x)

Gleey a écrit :

Je n'arrive pas a mettre une image par dessus un bloc.

<div style="...">contenu bloc</div>
<img src="http://" style="margin-top: -XXpx; margin-left: XXpx;" />

Pour placer l'image faut jouer avec les margin-left/margin-top.
Les XX sont à remplacer par des chiffres.
Les ... sont à remplacé par les propriétés du bloc (largeur, longueur, ombre portée, etc...).

gabi1507 · 24/06/2015 à 14:49

Hey, je me demandais si les balises Css, c'est à dire:
truc {
truc:truc
}
Pouvait être utilisées avec <style></style> ou <!DOCTYPE css> (< Pour cette dernière pas sûre que se soit ce code là) avec l'éditeur htlm.

Merci d'avance :3

HeeDuo · 24/06/2015 à 14:58

Non, ce n'est pas possible.

Hinara · 09/07/2015 à 13:19

Les balises "link" ne sont pas prise ?

HeeDuo · 09/07/2015 à 13:25

Non, on ne peut pas les utiliser.

#1 03/04/2013 à 14:28