Reprendre sur youtube à partir du chapitre 28 ici

Notes sur le CSS

Le CSS permet de donner du style à une page internet. Si je veux contrôler ce style dans le HTML j'utilise les balises "style" dans la section "head" de mon code html.

Si je souhaite utiliser un style ponctuellement, je peux ajouter la valeur "style" dans la balise. Par exemple, ci-dessous un paragraphe en bleu :

J'écris ce paragraphe en bleu !

Je crée des commentaires dans le CSS avec /* en ouverture et */ en fermeture
/*Si je met un slash+étoile devant et derrière une propriété, la propriété est annulé : comme ça : /*color: red;* / ! C'est très utiliser pour les sites en javascript mais je n'en sais pas plus !*/

Si je crée un code css pour la balise "p", tout mes paragraphes seront identique. Pour créer des styles de paragraphes différents, je peux utiliser les attribu id et class. Donc >p id="p1" par exemple. Pour personnaliser p1, comme il s'agit d'un id je met un # devant dans mon code css. et > p class= "p1" pour personnaliser ma class je met .p1 en css. Le p1 c'est le nom que je lui ai attribué, ils peuvent être identique ou non peu importe.

Ceci est un paragraphe avec l'id p1

Ceci est un paragraph avec la class p1

Comm le code id pour p1 a déjà été utilisé, il ne s'appliquera plus ici même si j'ai écrit id=p1 dans mon code.

Spécificité du CSS a garder en méméoire

En CSS, il y a une notion de priorité et d'héritage.
            Heritage : Si j'applique un style à "body" en css et que sur ma feuille html h1 et p sont à l'intérieur de body, alors, h1 et p héritent des propriété de body.
            La notion de priorité est défini comme suit : l'élément le plus proche est prioritaire. Donc ci id ; p ; body on des proriétés identiques, ce sera dans l'ordre d'abord la notion id qui sera prise en compte, puis p, puis body. Donc du plus précis au plus général. Petit + : si j'applique un style depuis la page html, elle sera prioritaire sur les styles en css. Donc du plus au moins prioritaire : l'attribu style dans le html ; l'element style dans head dans le html ; le fichier css (et à l'intérieru du fichier css : element du plus précis (id/class/p/h1) au plus général (body) ! Et voilà!
        

Les éléments p, h1 (et autres h), form, div etc : sont des éléments dit "block" car ils occupent toute la place disponible dans la page. Même si le texte dans p n'est pas long, le block p occupe toute la largeur du body. Par contre, les éléments img, a, strong, em, span etc sont de type inline, c'est à dire qu'ils n'occupent que l'espace dont ils ont besoins.

Très important : div et span !

Famille de police d'écriture

En général, quand on veut changer l'élément body, on choisi trois type de police d'écrtiure dans la propriété font-family (à l'intérieur du css) : 1ere police: celle qu'on veut utiliser sur le site / 2ieme police: une police public supporté par tout les navigateurs (anciennes ou nouvelles versions) / 3ième police : une famille de police générique (genre sans-serif ou serif)

Google a créer pleins de fonts qui marchent sur la plus part des navigateurs -pas juste chrome- et ça ce trouve à cette adresse
Il faut choisir sa police ainsi que ces propriétés, ensuite google nous fourni le code html a mettre en partie head et le code css a mettre dans l'élément de notre choix

Test vers les images

Pour insérer une image, il vaut mieux qu'elle soit à la bonne taille (en pixel) avant pour ne pas avoir a faire de modif dans le html. On utilise pour sa la balise img src="nom de limage.jpg" par exemple :

Ou venant d'un autre site web, ici pinterest :

Qu'est-ce qu'elle est belle cette madame !

Test vers les liens

On peut créer des balises a href et dowload pour créer des liens cliquable pour télécharger des fichiers mais j'utiliserai cette méthode en temps voulu

Pour que les visiteurs puissent m'envoyer des mails, je peux crééer un lien avec -a href- en mettant en référence de href mailto:monmail@gmail.com mais je ne vais pas faire de test. flemme

Ceci est un test qui mène à une ancre vers mes test de titre, de paragraphes et de liste. Et ceci est une ancre qui mène vers les éléments créé par néocities lorsque j'ai créé le compte.

Il existe trois type de lien direct depuis un même site... href="lien de la page.html" lorsque les deux pages html a relier sont dans le même dossier ; href="dossier/lien de la page.html" lorsque la page d'arrivé est dans un sous dossier de la page de départ ; et enfin href="../lien de la page.html" lorsque la page d'arrivé est dans un dossier qui précède celui de la page de départ. L'exemple des trois types de lien est ici... Attention à bien respecter tout l'intitulé, avec les majuscules et tout sinon ça marche pas ^^!

Cliquer ici pour aller sur ma page SF. Ou cliquer ici pour y acceder depuis un nouvel onglet

Test des titres, paragraphes et listes

Titre le plus important

Titre moins important

Titre niveau 3

titre niveau 4

Titre niveau 5

Titre le plus faible

Premier paragraphe de ce site. Je ne sais pas encore ce que ce site va contenir mdrr

Bah pourquoi tu t'embête à le créer ce site alors ?

Un autre type de paragraphe
            qui enregistre mes sauts de ligne automatiquement
            C'est bien drole ça
            Et hop je prend de l'avance !
        

Ceci est un paragrapghe comportant un élément très important
et un autre élément de moindre importance

Je vais lister des éléments en HTML selon le principe "non-ordonné" :

• Velo
• Voiture
• Train

Je vais lister des éléments en HTML selon le principe "ordonné" :

1. Velo
2. Voiture
3. Train

Les listes peuvent être des points (ul) des chiffres comme plus haut (ol) ou d'autre signes qu'on peut faire apparaitre. Ci-dessous les possibilités parmis 5 types de signes : 1, I, i, A, a

1. Velo
2. Voiture
3. Train

je peux aussi créer des listes de definitions avec dl ; dt et dd :

Liste avec des défintions :

Mot à définir

Définition du mot écrit plus haut

Deuxieme mot à définir

Definition du deuxieme mot

Je vais lister des éléments een html avec des sous partie. Je peux commencer mettre des ol dans les ol / des ul dans les ul / des ol dans les ul / des ul dans les ol (bref tout est possible) :

1. Velo
   1. Guidon
   2. Frein
   3. Roue
   4. Siege
   5. Personne
2. Voiture
3. Train