Mémo HTML/CSS Claerina

memo html et css
<!DOCTYPE html> toujours au début
<html> </html> juste après, tout le reste entre ces deux balises
deux parties : la tête <head>, tout ce qui se voit pas et <body>, tout ce qui est sur la page
toutes les balises se ferment
l'indendation : le fait de mettre un espace entre la marge et le code, pour y voir plus clair. Plus une balise est embriquée plus elle est loin de la  marge
il est possible de rajouter des attributs aux balises pour donner des instructions supplémentaires (comme href, src...)
pour faire un commentaire pas visible sur la page, comme un post it, faire <!-- truc -->
les balises auto-fermantes : pas besoin de rajouter </truc>, comme img et link

dans <head> :
<title> le nom de l'onglet
<style> pour déclarer du css dans la page html
<ilnk> pour diriger vers une page de css
<link> a 3 attributs et est une balise auto-fermante comme img
les attributs sont : type qui est toujours égal à text/css
             rel qui est toujours égal à stylesheet
            et href qui pointe vers l'adresse internet du fichier css
ça donne :     <link type="text/css"; rel="stylesheet"; href="stylesheet.css"/>

dans <body> :
<h1> jusqu'à <h6> des titres, h1 étant le plus grand
<p> un paragraphe
<a href="lien">truc où quand t'appuies dessus ça t'ouvre le lien</a> : lien hypertexte
<img src = "lien de l'image" /> : afficher une image (balise un peu étrange puisqu'elle se ferme toute seule)
pour faire une image qui envoie à un lien il faut imbriquer les deux derniers, donc :
<a href="lien"><img src = "lien de l'image"/></a>           et ça s'appelle l'imbrication
<center> au milieu
<strong> en gras
<em> en italique (vient de emphasize, accentuer)
<br> fait un retour à la ligne (on peut donc sauter plusieurs lignes en le mettant plusieurs fois) (n'a pas besoin de </br>)
<pre> recopie exctement le texte avec les saut de lignes d'un traitement de texte
ou <style>p.indent{padding-left: (x)em}</style>(x est un nombre et plus il est grand plus l'espace est grand) mais bordel que ça a l'air compliqué ça donc l'autre il est mieux :( (celui là c'est pour des alinéas)(x:1,8 de base)

faire une liste : <ol>
            <li>truc 1</li>
            <li>truc 2</li>
            <li>truc 3</li>
        </ol>
<ol> fait une liste ordonnée avec des 1. 2. 3. etc... pour faire une liste désordonée (avec des points) utiliser <ul>
possibilité de faire des listes imbriquées (ex : 1 point point 2 point point (du coup le </li> se retrouve après point point) )

l'attribut style : change <p>, <h1à6>, etc (la taille, la couleur...)
la taille : <p style = "font-size:12px>
la couleur : <p style="color:red">
(les deux à la fois, c'est possible, dans les guillemets il faut rajouter les deux trucs à la suite séparé d'un point virgule)
changer la police <p style = "font-family: Arial">
changer la couleur de fond (toujours avec "style") : background-color (s'applique même à body pour changer la couleur du fond de tout (omg c'est l'extase là)) (s'applique aussi à ol et ul (les listes), li, h1, p... à TOUT !!!)
déplacer le texte au centre, à droite ou à gauche : <p style:"text-align:center(ou left, ou right)">


Les tableaux sont créés avec <table></table>
<tr></tr> pour créer, annoncer des lignes du tableau (table row : ligne du tableau)
dans un tr rajouter <td> (table data, donnée du tableau) ça crée une case de la ligne, donc un début de colonne, plusieurs td à la suite font plusieurs cases sur la même ligne. On remplit donc le tableau de gauche à droite, de haut en bas
attribut que l'on peut rajouter à table : border (les contours) donc par ex : <table border="1px">

dans un tableau il y a aussi, comme sur une page html, head et body, mais ça devient <thead> et <tbody> (le t de table) (tbody c'est les infos du tableau et thead l'entête)
pour faire une entête, utiliser la balise thead. ensuite, mettre dedans une ligne de tableau normale avec <tr>, puis des infos, mais pas avec <td>, avec <th>, réservé à l'entête.
pour mettre un titre faire pareil que l'entête, juste au dessus. utiliser l'attribut colspan sur <th>pour faire une case de plus de cellules (au lieu d'une) donc, pour un tableau à deux cases, faire <th colspan="2">

petits trucs à rajouter avec l'attribut style : border-collapse:collapse mais je sais pas à quoi ça sert
                           border-bottom(ou top left right):1(ou autre)px solid black(ou autre mais garder le solid); pour faire un trait d'un côté du truc
sans les parenthèses border-bottom:1px solid black;
                          et enfin "padding:5px; ça fait un espace mais j'ai pas très bien saisi encore

LE DIIIIIIIIV <DIV>
widht : largeur         height : hauteur
en fait div permet de diviser en plusieurs conteneurs, ça fait donc des parties séparées de la page web
ex: <div style="width:50px; height:50px; background-color:red"></div>
ça ça fait un carré rouge

ommmmgggg c'est combinable avec un a
genre tu peux faire un carré jaune et appuyer dessus pour aller sur un lien o.o
(pour cela il faut mettre la balise de a puis celle de div puis tout fermer dans l'ordre)

<SPAN>
c'est pareil que div mais pour contrôler des petits trucs genre un mot d'un texte. on peut donc changer la couleur d'un mot, mais aussi la taille, la police...

______
LE CSS (enfin !)
-veut dire cascading style sheets
-utilisé pour définir l'apparence et la forme d'un contenu html


p {
    color: red;
}
 rend le texte rouge (c'est le p de <p>)
pour qu'un mot soit d'une couleur on utilise la balise span dans le fichier html et on définit sa couleur dans le fichier css comme ça :
span {
    color: blue;
}

on peut aussi déclarer du css dans la balise head du fichier html avec la balise <style>

syntaxe du css :
selector {
    property: value;
}
le selector peut être importe quel élément html sans les < >
une propriété est une caractéristique du sélecteur, comme color, font-family ou font-size
chaque couple propriété valeur se termine par un point virgule

rappel : commentaire d'html : <!-- Je suis un commentaire -->
alors que commentaire de css :  /*Je suis un commentaire*/

on peut utiliser des couleur en code hexadécimal en css (les chiffres sont en base 16, soit 1 2 3 4 5 6 7 8 9 A B C D E F)
code hexadécimal : hex

autre unité pour définir la taille de la police que px :
em
em est une mesure relative : c'est égal à la police de défaut de l'écran utilisé (donc parfait pour faire un site que ordi et téléphone puissent regarder)
2em : 2 fois plus grand et 0,5 em : la moitié

3 type de police :
serif : qui a de petites allongations sur les bords
sans-serif : pas les petites allongations
cursive : qui ressemble à l'écriture manuscrite

il est possible de mettre plusieurs polices séparées par des virgules. l'ordinateur testera la première, mais s'il ne l'a pas, la deuxième, et ainsi de suite.

le div est toujours défini par 3 propriétés : backround-color pour la couleur (en hex), height pour la hauteur et width pour la largeur

voici une nouvelle propriété : BORDER elle peut prendre plusieurs valeurs, mises à la suite sans virgules ou point virgule :
le nombre de px, solid/dashed (un trait continu ou en pointillés) et la couleur.
ça sert surtout pout les tableaux

possibilité de mettre au sélecteur a la caractéristique "text-decoration" sur none qui qui fait que le lien ne sera plus souligné
ex: a{  text-decoration:none;

pour faire un bouton:
utiliser div
les caractéristiques nécessaires :
div{
    height:50px;
    width:120px;
    border-color:#6495ED;
    background-color:#BCD2EE;
    border-width:4px;
    border-style:solid;
    border-radius:5px;
    margin:auto;
    text-align:center;
}


pour positionner une image au milieu : margin: auto (ça dit au navigateur : met des marges identiques, donc, au milieu)
text-align ne marche que pour le texte.