Les éléments HTML sont nombreux, ils servent à entourer un contenu dans + la page
+Par exemple, si on écrit ce code : text souligné le
+ text va être sousligné (un style va lui être appliqué)
+
text soulignéChaque navigateur (Chrome.ium, Firefox.Brave, Safari), va lire ces + "diférentes balises" ("tag" en anglais) + et afficher leur contenu en fonction de celles-ci. Si chacune d'entre + elle se comporte diférement dans la page, c'est que, par + défaut, le Navigateur (qui lit et interpréte le code), va + leur ajouter des styles d'habillage
+ + Exemple de balises connues : +Mettre du texte entre deux balises....
+
+
lien vers
+ titre
+ titre
+ titre
+ titre
+ titre
+ titre
+
Mettre du texte entre deux balises text permettera
+ de créer un lien
Une balise
+
+ autres contenus
+
+
+ Plus d'informations :
+ MDN Firefox (DIV)
+ ( élément de division du contenu )
+ Dans une
+ C'est parce que une
On va y revenir avec un exemple
+ +
+On peut aussi forcer un saut à la ligne avec
ou un autre séparateur comme
+
+
+Si on veut éviter les sauts de ligne quand on entoure un élément de text (ou autre contenu), on utilisera des balises "inline"
+Des balises "inline" permettent au contraire d'entourer des bouts de textes (ou autres contenus) sans faire de saut de ligne !
+ +
+Plus d'informations :
+MDN Firefox (Display)
+Vous noterez que, même si je fais un saut de ligne dans le code, le lien ne passe pas à la ligne...
+Dans l'écriture dans l'éditeur de texte où l'on code, on peut faire autant de sauts à la ligne qu'on veut !
+ + + + + +À l'orgine il s'agissait de "mimer" certaines mises en formes usuelles dans le journalisme, l'édition
+Padding crée une marge entre le text est le bord de la feuille (page, support)
+ + +La balise...
"u" underline
"b" ou "strong"
+ gras
La balise "span"
+ est neutre mais permet d'entourer une partie du texte
On va voir ensuite comment il est possible d'ajouter des "classes" et "id" permettant de les identifier
+demo de balise inline qui crée du gras (et c'est tout)
++
Paragraphe -- Voluptate labore laboris pariatur. Dolore + exercitation et ex tempor tempor ut consequat sint + deserunt commodo sunt aute. Ex ad est culpa sint eiusmod dolor enim + fugiat ipsum eiusmod dolor deserunt. Reprehenderit ullamco pariatur + aliqua officia veniam deserunt duis esse nulla laborum ad adipisicing + reprehenderit cupidatat cupidatat. Sunt exercitation ad ullamco cillum + id. Tempor velit exercitation aute velit pariatur.
+Laboris dolor id do dolor aliquip excepteur consectetur nostrud + velit. Tempor Lorem eu nisi. Eiusmod id veniam minim duis + deserunt exercitation cupidatat. Et aliquip elit quis occaecat minim + sunt ut elit sit velit labore amet nisi cillum.
+Laboris nisi amet nisi laborum nostrud. Mollit nisi dolore + consectetur cupidatat magna occaecat reprehenderit labore esse + id. Irure esse excepteur ea aliquip eiusmod velit ipsum exercitation + fugiat officia ullamco ut et reprehenderit laboris. Culpa ipsum tempor + excepteur. Officia in ea magna do commodo exercitation. Laborum + voluptate incididunt incididunt do Lorem in est laboris consectetur + enim occaecat. Culpa laboris incididunt eu id qui sit eu voluptate + quis laboris eiusmod. Eu aliquip aliqua labore ad eu sint adipisicing + laboris esse nisi ut mollit ex eu.
+On peut modifier les propriétés de ces éléments proposés "de base" en HTML
+ + +On peut opérer de plusieurs façons, d'abord on + peut ajouter du style directement dans un élement
+ + +
+Dolore exercitation et ex tempor
+
+labore laboris pariatur....
+labore laboris pariatur....
+labore laboris
+ pariatur, devrait être en gras (propriété inérante à
+
+
(et non pas "bold", valeur par défaut attribuée à
+
+petit text
+plus petit text
+Je peux voir le code source de la page en faisant CTRL+MAJ+I les outils de dev. s'affichent
+ Dans Firefox je trouve les parametres via icon "..." (à droite) puis Parametres ("icon rouage") /OU/ F1
+Je peux ensuite demander d'afficher ces styles par défaut
+ +
+Firefox montre bien que "strong" a des valeurs par défaut... on peut + voir d'autres propriétés et feulles de style
+ ++ + + +
On peut également créer une "feuille de style" pour "Cascading Style Sheet" == CSS
+Elle va contenir des instructions de mise en forme/page qui vont habiller les éléments de la page
+L'intéret c'est que ces règles sont accessibles dans un fichier + distinct de la page HTML (ce qui rend son accès et lecture plus simple) +
+On peut surtout ainsi modifier plusieurs éléments récurents dans nos pages... (cela + donnera de la cohérence esthétique à un site)
+ + + ++ + +
Voyons d'abord comment fonctionne une feuille de styles (CSS)
+ +Pareillement à une page web (par exemple index.html), une feuille CSS a une extension + particulière : ".css"
+On peut la nomer de plein de façons ! style.css par + exemple
+"On ne met pas d'espace dans le nom des + fichiers !, on les remplace par "_" ou "-", plutôt "_""
+Une fois la feuille de style crée on devra la charger dans la page HTML + + + +
+ +
Dans la page actuelle j'en ai chargé plusieures...
+Certaines vont servir plusieurs fois, être chargées dans plusieurs + pages HTML
+Ainsi, avec une même feuille de style mon site aura une certaine + homogénéité, une cohérence visuelle
+ +Je peux voir le code source de la page en faisant CTRL+U ou CTRL+MAJ+I
+
+La feuille de style (fichier) est pratique si on l'utilise plusieurs fois de page en page
+Et, formellement, cela permet d'avoir toutes les inforamtions séparées au même endroit...
+Mais on peut aussi charger cette cascade d'instructions directement dans la page...
+Au lieu d'utiliser
Sur VSCODE, le logiciel de code qu'on va utiliser...
+
je peux créer un fichier index.html
+
l'ouvrir... et tapper "!", un popup s'ouvre (Intellisens), en faisant ENTRER, le template (gabari, préformatage) d'une page HTML est chargé...
+ + + + + + +
+#important_wrapper { /* id */
+ margin-left: 10px;
+ border-left: 3px solid red;
+ padding-left: 20px;
+}
+.important { /* classe */
+ font-weight: bolder;
+ color: red;
+}
+
+
+ tempor ut consequat sint...
+ deserunt commodo sunt aute...
+ Laboris nisi amet nisi laborum nostrud. Mollit nisi dolore.....
+ Eiusmod id veniam minim duis deserunt exercitation cupidatat....
+
+Un "id" (identifiant) sert à identifier un élément unique dans la page
+ +Les "classes" sont attribuées à des éléments qu'on veut habiller de la même façon (leur donner le même comportement)
+
Une classe est utilisée plus souvent, elle va contenir des mises en formes courament utilisées
+
Aussi il est interessant de trouver des noms de classes équivoques (ce n'est pas toujours facile)
+
CSS On peut attribuer les mêmes consignes (propriétés:valeurs) à plusieurs élémens ciblés en même temps (via leur classe, id, etc)
+HTML On peut attribuer plusieurs classes à un même élément
+ +
+/* ID */
+#text_principal {
+ font-family: sans-serif;
+ line-height: 0.4em;
+}
+/* CLASSE */
+.para {
+ background-color: yellowgreen;
+}
+/* CLASSE, autres instructions */
+.fond_bleu {
+ background-color: blue;
+ color: #FFF;
+}
+/* CLASSE/ID plusieures cibles en même temps */
+/* Séparées par une "," */
+.para, #sad {
+ font-weight: bold;
+}
+/* PSEUDO CLASSE :last-child */
+p:last-child .para {
+ background-color: orangered;
+}
+
+
+ 1. Je suis le premier pargraphe !
+ 2. Et moi le deuxième pargraphe !
+ 3. Et moi le troisiem pargraphe !
+ 4. Et moi le dernier pargraphe =(
+
++ + +
Un autre exemple de ciblage d'un élément dans un élément
+#contenant .element_dedans .sous_element
+ +
+#enfant p {
+ text-transform: uppercase;
+}
+
+
+ tête
+
+ soutient
+
+ autonomie
+
+
+ jambes
+
++ + + + + + + + + + + + + + + +
S'il on veut créer un saut à la ligne on peut utiliser ajouter des propriétés d'espacement...
+Sur les éléments qui se comportent comme des "blocs" (telles les div)
+ +On peut ainsi espacer les contenus...
+ +
+/* Objet au centre, avec MARGE extérieure et PADDING intérieur */
+#test_margin_padding {
+ padding: 30px; /* PADDING */
+ margin: 30px; /* MARGIN */
+ border: 1px solid;
+ background-color: #e3dcff;
+ border: 3px solid red;
+}
+/* DEMO, sert à expliquer.montrer la MARGE EXTERIEURE (margin) autour de #test_margin_padding */
+#test_wrapper {
+ border: 1px solid gainsboro;
+ background: #fdffdf; /* jaune */
+ padding: 10px;
+}
+/* DEMO, sert à expliquer.montrer la MARGE INTERIEURE (padding) entre le bord de #test_margin_padding et son CONTENU */
+#inner_content {
+ background-color: #cff0fb;
+ padding: 0px;
+}
+
+
+
+ Contenu
+
+
+
+
+
++
Margin crée de l'espace, permet aussi de déplacer les éléments...
+ +
+#mousehover_movemargin_element {
+ height: 130px;
+ width: 130px;
+ background: red;
+ color: #FFF;
+ padding: 20px;
+ text-align: center;
+ display: block; /* par défaut, une div a la propriété "display" == "block" (comme valeur) */
+}
+#mousehover_movemargin:hover > #mousehover_movemargin_element {
+ margin-left: calc(100% - 130px - 50px);
+ background:yellow;
+ transition: all 1s;
+}
+
+
+
+ Youhouuuuu
+
+
+#margin_first,
+#margin_seconde,
+#margin_last {
+ display: inline-block;
+ border: 1px solid;
+}
+.margin_left {
+ margin-left: 100px
+}
+.margin_right {
+ margin-right: 100px
+}
+.large {
+ width:500px;
+}
+.petite {
+ width:200px;
+}
+
+
+ #margin_first
+
+
+ #margin_seconde
+
+
+ #margin_last
+
+Margin et Padding (mais aussi border ou encore text-shadow) fonctionnent comme ceci :
+
+
+
+#top_margin_block {
+ width: 100%
+}
+#margin_exemples_wrapper {
+ background: greenyellow;
+ border: 1px solid #000;
+ display: block;
+ clear: both;
+ float: left;
+ width: 100%;
+ margin-bottom: 4rem;
+}
+.margin_exemples {
+ display: inline;
+ border: 1px solid #000;
+ background: chartreuse;
+ padding: 5px 5px 0 5px; /* EXEMPLE Padding */
+ height: 100px; width: 100px;
+ float: left;
+}
+.margin_exemples.margin_autour {
+ margin: 100px 0px 0px 0px; /* EXEMPLE Margin */
+ height: auto; width: auto;
+ min-height: 100px;
+ background: lavender
+}
+
+
+ #top_margin_block
+ .margin_autour :
margin: 100px 0px 0px 0px;
+ style :
margin-top: 10px
+
++ + + + + + +
Alignement manuel (2 colones left/right)
+ ++ Un projet super simple construit grâce à un template sur GitLab +
+ + ++ Un projet super simple construit grâce à un template sur GitLab +
+ +Alignement css (column-count)
+ + +Flexbox 2 colones
+ +Flexbox items
+ + +-
+
+
-
+
+
+
+ -
+
+
+
+
-
+
+
+
+
-
+
+
+
+
Flexbox Navigation
+ + + + + +Flexbox Recap
+ +
+
+
+
+
+
+
+
diff --git a/public/2_flexbox/style_flexbox.css b/public/2_flexbox/style_flexbox.css
new file mode 100644
index 0000000..d3c8e71
--- /dev/null
+++ b/public/2_flexbox/style_flexbox.css
@@ -0,0 +1,119 @@
+/* //// Flexbox normal */
+/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
+
+#flex-container {
+ display: flex;
+ /* display: none !important; */
+ flex-direction: row;
+ gap: 0px 70px;
+ text-align: justify;
+}
+#flex-container > .flex-item {
+ flex: auto;
+}
+
+.flex-item {
+ width: 100px;
+ margin: auto; /* Magic! */
+}
+
+
+
+/* //// FLEX items (boites) */
+
+/* ... */
+.flex-container {
+ display: flex;
+ max-width: 80vw;
+
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: right;
+
+ /* RESET */
+ padding: 0;
+ list-style: none;
+ width: 100%;
+ margin: auto;
+
+ img {
+ display: none;
+ }
+}
+.flex-container.tomato
+.flex-item {
+ background: tomato;
+ padding: 0px;
+ width: 200px;
+ width: calc(100% / 4 - 10px);
+ box-sizing: content-box;
+ height: 150px;
+ margin-top: 10px;
+ line-height: 150px;
+ color: white;
+ font-weight: bold;
+ font-size: 3em;
+ text-align: center;
+}
+
+
+
+
+/* //// Navigation */
+.navigation li {
+ list-style: none;
+}
+
+/* Large */
+.navigation {
+ gap: 0px 20px;
+ display: flex;
+ flex-flow: row wrap;
+ /* This aligns items to the end line on main-axis */
+ justify-content: flex-end;
+}
+
+/* Medium screens */
+@media all and (max-width: 800px) {
+ .navigation {
+ /* When on medium sized screens, we center it by evenly distributing empty space around items */
+ justify-content: space-around;
+ }
+}
+
+/* Small screens */
+@media all and (max-width: 500px) {
+ .navigation {
+ /* On small screens, we are no longer using row direction but column */
+ flex-direction: column;
+ }
+}
+
+
+
+/* FIXS */
+body {
+ margin: 0;
+ max-width: none;
+ box-sizing: content-box;
+}
+
+#flexbox_css_tricks {
+ /* width: 100vw; */
+ width: calc(100vw - 13px);
+}
+
+
+/* ///// FLEXBOX */
+#flex-container,
+.flex-container {
+ margin: auto;
+ clear: both;
+ max-width: 80vw;
+}
+#flex-container,
+.flex-container,
+.navigation {
+ margin-top: 3rem;
+ margin-bottom: 3rem;
+}
diff --git a/public/3_grid/cat1.jpg b/public/3_grid/cat1.jpg
new file mode 100644
index 0000000..3814fec
Binary files /dev/null and b/public/3_grid/cat1.jpg differ
diff --git a/public/3_grid/cat10.jpg b/public/3_grid/cat10.jpg
new file mode 100644
index 0000000..ed5a36b
Binary files /dev/null and b/public/3_grid/cat10.jpg differ
diff --git a/public/3_grid/cat2.jpg b/public/3_grid/cat2.jpg
new file mode 100644
index 0000000..da08499
Binary files /dev/null and b/public/3_grid/cat2.jpg differ
diff --git a/public/3_grid/cat3.jpg b/public/3_grid/cat3.jpg
new file mode 100644
index 0000000..2ca4819
Binary files /dev/null and b/public/3_grid/cat3.jpg differ
diff --git a/public/3_grid/cat4.jpg b/public/3_grid/cat4.jpg
new file mode 100644
index 0000000..1687d0d
Binary files /dev/null and b/public/3_grid/cat4.jpg differ
diff --git a/public/3_grid/cat5.jpg b/public/3_grid/cat5.jpg
new file mode 100644
index 0000000..6f63c68
Binary files /dev/null and b/public/3_grid/cat5.jpg differ
diff --git a/public/3_grid/cat6.jpg b/public/3_grid/cat6.jpg
new file mode 100644
index 0000000..eef2ea9
Binary files /dev/null and b/public/3_grid/cat6.jpg differ
diff --git a/public/3_grid/cat7.jpg b/public/3_grid/cat7.jpg
new file mode 100644
index 0000000..4c299a2
Binary files /dev/null and b/public/3_grid/cat7.jpg differ
diff --git a/public/3_grid/cat8.jpg b/public/3_grid/cat8.jpg
new file mode 100644
index 0000000..d3c07e4
Binary files /dev/null and b/public/3_grid/cat8.jpg differ
diff --git a/public/3_grid/cat9.jpg b/public/3_grid/cat9.jpg
new file mode 100644
index 0000000..50aadea
Binary files /dev/null and b/public/3_grid/cat9.jpg differ
diff --git a/public/3_grid/index.html b/public/3_grid/index.html
new file mode 100644
index 0000000..efc2369
--- /dev/null
+++ b/public/3_grid/index.html
@@ -0,0 +1,54 @@
+
+
+
+
+
+ Grids
+ +Esse occaecat sint
Ex culpa veniam
Laborum labore ipsum
Commodo aliqua aliqua
Dolor eiusmod amet
Irure irure eiusmod
Eu quis velit
Ullamco deserunt duis
Grids (plus)
+ + + +Esse occaecat sint
Ex culpa veniam
Laborum labore ipsum
Commodo aliqua aliqua
Dolor eiusmod amet
Irure irure eiusmod
Eu quis velit
Ullamco deserunt duis
Occaecat sint
Bonjour le Monde !
- -- Un projet super simple construit grâce à un template sur GitLab -
- - -- Un projet super simple construit grâce à un template sur GitLab -
- -Bonjour le Monde !
- -- Un projet simple construit grâce à un template sur GitLab -
- - - diff --git a/public/parts/header.html b/public/parts/header.html new file mode 100644 index 0000000..a0b961d --- /dev/null +++ b/public/parts/header.html @@ -0,0 +1,10 @@ + + + + +