Ces temps si, je m'entraîne pas mal au html. Je me sert pas mal du code source de pokébip pour faire mon code, et donc si je progresse en ISN, c'est grâce à pokébip :3
Actuellement, je suis un projet de grand tableau html récapitulent toutes les balises que je connais. Pour l'instant, dans le code, j'en suis là:
Spoiler<!doctype=html>
<head>
<title>
ISN, les bases
</title>
<style>
div.page
{
width: 899px;
border: solid 1px #000000;
margin: 10px auto 10px auto;
height: 3000px;
background-color: #E0E0E0;
}
div.title
{
width: 789px;
border: solid 1px #000000;
margin: 30px auto;
background-color: #EEEEEE;
}
div.txt_base
{
width: 773px;
border: solid 0px #000000;
margin: 10px auto;
back-ground-color: #EEEEEE;
}
h1.titre
{
color: #FF0000;
}
</style>
</head>
<body bgcolor="FFE097">
<div class="page">
<div class="title" height="100px">
<h1 class="titre" align="center">ISN, codage d'une page internet en html</h1>
</div>
<div class="title">
<table border="1" cellspacing="0" cellpadding="10">
<tr bgcolor=AAAAAA>
<th colspan=10>
<h2 align="center">Tableau de toutes les balises connues en html</h2>
</th>
</tr>
<tr bgcolor=BBBBBB>
<td>
<h3>Nom de la balise</h3>
</td>
<td align="center">
<h3>Effet de la balise</h3>
</td>
</tr>
<tr bgcolor=DDDDDD>
<td bgcolor=BBBBBB>
head
</td>
<td>
Balise fermante. Encadre les balises style (CSS), title, meta et base.
</td>
</tr>
<tr bgcolor=EEEEEE>
<td bgcolor=BBBBBB>
style
</td>
<td>
Balise fermante. Permet d'introduire du language CSS. Doit obligatoirement être entouré d'une balise head.
</td>
</tr>
<tr bgcolor=DDDDDD>
<td bgcolor=BBBBBB>
body
</td>
<td>
Balise fermante. Dans cette balise, on met tout ce qui est mise en page. On peut y introduire une balise bgcolor.
</td>
</tr>
<tr bgcolor=EEEEEE>
<td bgcolor=BBBBBB>
img
</td>
<td>
Balise auto-fermante. La balise image. On y insert src="nom du fichier", puis on ferme la balise. Le nom du fichier peut être soit l'adresse URL de
l'image, soit son nom dans vos fichiers. Attention dans ce cas à ne pas oublier son format. On peut également introduire dans la balise "align", "width", "height", "border" et "all"
</td>
</tr>
<tr bgcolor=DDDDDD>
<td bgcolor=BBBBBB>
table
</td>
<td>
Balise fermante. Elle permet de créer un tableau. Vous pouvre modifier certains des paramètres de votre tableau grâce à "border", "cellspacing",
"cellpading" et "bgcolor"
</td>
</tr>
<tr bgcolor=EEEEEE>
<td bgcolor=BBBBBB>
tr
</td>
<td>
Balise fermante. Cette balise ne fonctionne que dans une balise table. Elle permet d'ajouter une nouvelle ligne au tableau. On peut y introduire
"bgcolor" et "align".
</td>
</tr>
<tr bgcolor=DDDDDD>
<td bgcolor=BBBBBB>
td
</td>
<td>
Balise fermante. Doit obligatoirement être netourée d'une balise tr. Elle permet d'ajouter une nouvelle cellule dans la ligne du tableau. On peut y
introduire "bgcolor" et "align".
</td>
</tr>
<tr bgcolor=EEEEEE>
<td bgcolor=BBBBBB>
th
</td>
<td>
Balise fermante. Peut remplacer la balise td. Elle permet de créer une cellule de la taille de x cellule. Il faut y insérer "colspan". On peut également y
insérer "bgcolor" et "align".
</td>
</tr>
<tr bgcolor=DDDDDD>
<td bgcolor=BBBBBB>
div
</td>
<td>
Balise fermante. Permet de créer un cadre dans lequel on pourra insérer du texte et/ou des images. Fonctionne avec "width", "border" et "margin". On
peut y ajouter "height" et "background-color".
</td>
</tr>
<tr bgcolor=EEEEEE>
<td bgcolor=BBBBBB>
h1, h2, h3, h4, h5, h6
</td>
<td color="green">
Balise fermante. Titre de niveau 1, 2, 3, 4, 5, 6. On peut y insérer "align".
</td>
</tr>
<tr bgcolor=DDDDDD>
<td bgcolor=BBBBBB>
hr
</td>
<td>
Balise non fermante. Insère une barre horizontale. On peut y ajouter "align", "width", "size" et "color"
</td>
</tr>
<tr bgcolor=EEEEEE>
<td bgcolor=BBBBBB>
b
</td>
<td>
Balise fermante. Le texte écrit dans cette balise sera affiché en gras.
</td>
</tr>
<tr bgcolor=DDDDDD>
<td bgcolor=BBBBBB>
i
</td>
<td>
Balise fermante. Le texte écrit dans cette balise sera affiché en italique.
</td>
</tr>
<tr bgcolor=EEEEEE>
<td bgcolor=BBBBBB>
u
</td>
<td>
Balise fermante. Le texte écrit dans cette balise sera souligné.
</td>
</tr>
<tr bgcolor=DDDDDD>
<td bgcolor=BBBBBB>
title
</td>
<td>
Balise fermante, à insérer dans la balise head. Titre le document html.
</td>
</tr>
<tr bgcolor=EEEEEE>
<td bgcolor=BBBBBB>
br
</td>
<td>
Balise non fermante. Permet de sauter une ligne.
</td>
</tr>
<tr bgcolor=DDDDDD>
<td bgcolor=BBBBBB>
p
</td>
<td>
Balise fermante. Crée un paragraphe.
</td>
</tr>
</table>
<hr color="A09A90">
<table border="1" cellspacing="0" cellpadding="10">
<tr bgcolor=AAAAAA>
<th colspan=10>
<h2 align="center">Tableau des compléments des balises connues en html</h2>
</th>
</tr>
<tr bgcolor=BBBBBB>
<td>
<h3>Complément</h3>
</td>
<td>
<h3 align="center">Description</h3>
</td>
</tr>
<tr bgcolor=DDDDDD>
<td bgcolor=BBBBBB>
size=x
</td>
<td>
caractère de taille x (pixel)
</td>
</tr>
<tr bgcolor=EEEEEE>
<td bgcolor=BBBBBB>
bgcolor
</td>
<td>
Code une couleur de fond, soit avec son nom anglais entre guillemets, soit avec ######. Les ## correspondent aux chiffres codant le rouge, bleu
et vert des pixels de l'écran. Ces chiffres sont en base 16, qui contient les chiffres 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.
</td>
</tr>
<tr bgcolor=DDDDDD>
<td bgcolor=BBBBBB>
align="top | middle | bottom | left | right"
</td>
<td>
aligne en haut | milieu | bas | gauche | droite
</td>
</tr>
<tr bgcolor=EEEEEE>
<td bgcolor=BBBBBB>
width=x
</td>
<td>
largeur de x pixels
</td>
</tr>
<tr bgcolor=DDDDDD>
<td bgcolor=BBBBBB>
height=x
</td>
<td>
hauteur de x pixels
</td>
</tr>
<tr bgcolor=EEEEEE>
<td bgcolor=BBBBBB>
border=x
</td>
<td>
bordure de x pixels
</td>
</tr>
<tr bgcolor=DDDDDD>
<td bgcolor=BBBBBB>
margin=x auto
</td>
<td>
L'élément sera placé x pixels sous le dernier.
</td>
</tr>
<tr bgcolor=EEEEEE>
<td bgcolor=BBBBBB>
all="texte"
</td>
<td>
Affiche ce texte lorsque l'image n'est pas affichable ou lorsque la souris reste pointé dessus.
</td>
</tr>
<tr bgcolor=DDDDDD>
<td bgcolor=BBBBBB>
cellspacing=x
</td>
<td>
Espacement entre les cellules de x pixels.
</td>
</tr>
<tr bgcolor=EEEEEE>
<td bgcolor=BBBBBB>
cellpading=x
</td>
<td>
Espacement entre les bordures et le texte de x pixels.
</td>
</tr>
<tr bgcolor=DDDDDD>
<td bgcolor=BBBBBB>
colspan=x
</td>
<td>
La cellule aura la taille de x cellules. On peut identifier cela à une fusion de x cellules sur une même ligne.
</td>
</tr>
<tr bgcolor=EEEEEE>
<td bgcolor=BBBBBB>
font-size=x px
</td>
<td>
La police du texte sera de x pixels.
</td>
</tr>
</table>
</div>
<div class="title">
<h2 align="center">
Le fonctionnement du CSS
</h2>
<div class="txt_base">
<br>
<p>
Le CSS s'ouvre grâce à un balise style placée dans un balise head. Il permet d'alléger les pages internet, en donnant du style à certains groupes pré-définis.
Par exemple, si en css on demande à ce que la classe "rouge" soit écrit en rouge, et qu'on demande à ce qu'une balise h1 face parti de la classe "rouge", alors la balise h1 sera rouge.
<br>
Le code en css s'écrit entre {code}. On peut y faire fonctionner "width", "height", "border", "margin", "background-color", "color". Je n'arrive pas faire
fonctionner "bgcolor" dans du CSS.
<br>
Pour ouvrir une classe, il faut mettre un point suivi du nom de la classe, puis vous ouvrez les {}, vous mettez vos balises, avec un point virgule dès que vous
changez de balise. Dans du CSS, les "=" sont remplacés par deux points, et les codes de couleurs sont précédés d'un "#" si vous codez la couleur par sa valeur en base 16.
</p>
</div>
</div>
</div>
</body>
Ban, je voulais qu'il me centre tout, mais au moins, tout le contenu est là ^^
Si vous voulez voir ce que ça donne, faîtes un copier coller du spoil dans un bloc note, puis ouvrez le avec internet ;)
Article ajouté le Lundi 29 Décembre 2014 à 23h18 |
2 commentaires