Documentation Programmation WEB

But de la documentation

Infos supplémentaires

Beaucoup de choses dans cette documentation ont été copiés sur d'autres site. Au début cette documentation était faite pour en être une, puis a tourné en site d'expérimentation.

Cela dit, 90% des éléments copiés sur d'autres sites ont été un peu modifiés comme ils me plaisaient, et la plupart viennent de W3Schools.

Moyens de réalisation

Public visé

Contenu de la documentation

Histoire de l'HTML et facts

Bases HTML

Liste non exhaustive des différentes balises

Les balises importantes et / ou obligatoires, celles qui sont utilisées dans tous les fichiers HTML et celles qui sont très utiles mais pas forcément tout le temps

<!doctype html>
Ce qu'il faut mettre au début d'un document HTML
Obligatoire
<html lang="fr">
Ce qu'il faut mettre après le début du document HTML
Il faut mettre </html> à la fin du document comme fermeture de balise finale
Obligatoire
<head>
Sert à insérer différents éléments importants
Fermer avec</head>
Obligatoire
<body>
On met tout ce qui sera affiché sur la page directement à cet endroit
Se ferme tout à la fin avec </body>
Obligatoire
<header>
Balise sémantique
Permet de créer un en-tête que l'on peut mettre en page individuellement avec du CSS
Facultatif
<section>
Balise sémantique
Permet de créer une section que l'on peut mettre en page individuellement avec du CSS
Facultatif
<article>
Balise sémantique
Permet de créer un article que l'on peut mettre en page individuellement avec du CSS
Facultatif
<footer>
Balise sémantique
Permet de créer un pied de page que l'on peut mettre en page individuellement avec du css
Facultatif

Les balises et l'explications de leurs but, ce qu'elles affichent, comment les modifier à l'aide d'un fichier CSS, les plus utilisées ou les moins utilisées mais utilisées dans des cas précis et important

<b>
Permet de mettre du texte en gras
<i>
Permet de mettre du texte en itallique
<a>
Permet de redigirer l'utilisateur vers un autre site / un autre endroit de la page
<table>
Base d'un tableau

Liens

Aide plus complète sur les liens

Tableaux

Aide plus complète sur les tableaux

Bases CSS

Partie de la documentation sur le CSS, la partie de la programmation WEB permettant de mettre en page un site de manière plutôt facile

Exemple de customisation de menus de navigation

Code du menu de cette page

Modifie des paramètres que seul .tab doit avoir
.tab {
Affiche le contenu de .tab à gauche
float: left;
Change la couleur du fond du .tab
background-color: #333;
Largeur définie
width: 30%;
Hauteur du menu
height: 300px;
}

Modifie des paramètres que seul .tab button doit avoir
.tab button {
Met le contenu en block
display: block;
Met la couleur à la même valeur que la couleur de .tab
background-color: inherit;
Change la couleur de la police
color: #ddd;
Change la marge intérieur à 22px en haut et en bas et de 16px sur les bords
padding: 22px 16px;
Largeur des boutons à 100% de la largeur du .tab
width: 100%;
Enlève les border par défaut des boutons
border: none;
Enlève les border par défaut des boutons quand pressés
outline: none;
Aligne le texte du bouton à gauche
text-align: left;
Change le curseur en petite main qui clique
cursor: pointer;
Fais que le bouton change de couleur plus lentement
transition: 0.3s;
Change la grandeur de police
font-size: 17px;
}

Modifie les paramètres que seul .tab button survolé doit avoir
.tab button:hover {
Change la couleur de fond quand le bouton est survolé
background-color: #555;
}
Modifie les paramètres que seul .tab button activé doit avoir
.tab button.active {
Change la couleur de fond quand le bouton est actif
background-color: #1f1f1f;
}

Exemple de customisation de liens

Code des liens de cette page

Lien basique, le met en orange et supprime le soulignement
a:link {
color: orange;
text-decoration: none;
}
Lien visité, garde la même couleur
a:visited {
color: orange;
}
Quand le lien est survolé, il change légèrement de couleur
a:hover {
color: orangered;
}
Quand le lien est pressé, il change légèrement de couleur
a:active {
color: darkorange;
}

A noter que ce menu est plus joli sur un écran 16/9, car les longs titres de tabs risquent de créer un tab plus grand sur un petit écran

Les trucs les plus fous

Timer trop bien

Timer

Ce timer a été 100% copié sur Timer Tab

Texte random

A ajouter plus tard