1862 lines
71 KiB
Plaintext
1862 lines
71 KiB
Plaintext
FOR https://youtu.be/Tnym_6qCcNE
|
|
elle tout le monde j'espère que vous
|
|
allez bien et que vous êtes en forme
|
|
aujourd'hui je vous propose d'apprendre
|
|
les bases d'acheter ml et de css afin de
|
|
pouvoir commencer le développement web
|
|
et de pouvoir créer vos propres sites
|
|
web alors la vidéo que je vous propose
|
|
aujourd'hui bien sûr c'est une vidéo
|
|
d'initiation c'est un domaine assez
|
|
complexe sur lequel on ne peut pas vers
|
|
sur découvrir tout dans l'espace d'une
|
|
heure mais quand même ce que je vous
|
|
propose ça va être de bien survolé
|
|
vraiment tout l'ensemble est d'avoir une
|
|
bonne vision périphérique de ce qu'est
|
|
html de ce qu'est css dacquois tout cela
|
|
sert et quand même de réaliser un bon
|
|
petit site web tous ensemble alors c'est
|
|
vraiment une simple page 1 qu'on va
|
|
créer ensemble mais voilà on pourrait
|
|
découvrir quand même beaucoup de choses
|
|
et la vidéo d'aujourd'hui bien les
|
|
sponsorisés par aux stinger aux stingers
|
|
c'est un hébergeur web donc il met à
|
|
disposition des serveurs d hébergement
|
|
pour mettre vos sites en ligne et c'est
|
|
un hébergeur qui propose un hébergement
|
|
réellement performant a appris quand
|
|
même relativement accessible et si vous
|
|
souhaitez mettre votre site en ligne et
|
|
bien sachez que vous pouvez obtenir 7 %
|
|
de réduction grâce aux codes bertrand
|
|
sur le site de hosting heures pour votre
|
|
commande donc n'hésitez pas à en
|
|
profiter et un petit conseil avant de
|
|
commencer bien évidemment c'est de
|
|
toujours bien mettre le tutoriel sur
|
|
pause afin de reproduire les actions sur
|
|
votre ordinateur c'est vraiment un très
|
|
bon conseil que je peux vous donner en
|
|
informatique c'est toujours reproduire
|
|
pour vraiment bien apprendre pour
|
|
vraiment commencer à prendre les choses
|
|
en main et en fin de vidéo je vous
|
|
donnerai pas mal de pistes d autres
|
|
youtube heures de formation etc des
|
|
sites de référence sur lequel vous
|
|
pourrez approfondir le sujet
|
|
et comme toujours n'oubliez pas si vous
|
|
aimez mon travail de donner le petit
|
|
like de faire un petit commentaire pour
|
|
me donner votre avis pourquoi pas poser
|
|
vos questions partager etc afin de faire
|
|
vivre cette chaîne n'oubliez pas que
|
|
cette chaîne vie avant tout grâce à vous
|
|
et en parlant ça je tenais à vous
|
|
remercier parce qu'on est vraiment de
|
|
plus en plus sur la chaîne ça me fait
|
|
vraiment super plaisir alors n'hésitez
|
|
pas à nous rejoindre si ça n'est pas
|
|
encore fait pour commencer cette
|
|
introduction au développement eh bien on
|
|
va commencer par parler d' html html
|
|
c'est quoi bien c'est un langage qui va
|
|
vous permettre de créer la structure de
|
|
votre page c'est que son contenu mais
|
|
par contre on ne va pas tellement
|
|
s'intéresser en premier lieu au design
|
|
converse un petit peu par la suite grâce
|
|
au css donc en gros ça sera moche au
|
|
début mais il faut vraiment bien
|
|
comprendre tout ça allez on va commencer
|
|
avec ça ok alors allons-y pour la
|
|
création de notre premier site web alors
|
|
comme j'ai dit dans la trousse c'est
|
|
vraiment ici pour découvrir un petit peu
|
|
les bases pour avoir une bonne vision de
|
|
ce qui se passe
|
|
donc je présenterai peut-être pas
|
|
toujours la façon la plus idéale de le
|
|
faire mais en tout cas quand vous aurez
|
|
terminé cette vidéo vous aurez vraiment
|
|
cette bonne vision qui vous permettra
|
|
vraiment de comprendre le process dans
|
|
sa globalité alors la première chose
|
|
simplement c'est de commencer et de
|
|
télécharger peut-être atom le logiciel
|
|
éditeur de texte créé par github à la
|
|
base qui vous permettra de travailler
|
|
plus facilement théoriquement vous
|
|
pourriez le faire avec le bloc notes de
|
|
windows mais bon autant s'équiper de
|
|
bons outils une fois qu'il est installé
|
|
et bien utiliser simplement atom pour
|
|
aller chercher votre projet vous pouvez
|
|
le faire par exemple avec un coup de
|
|
file et ensuite choisir at project
|
|
folder pas ajouté le
|
|
dossier de votre site web et donc pour
|
|
le coup moi je lui ai déjà créé par
|
|
avance donc je les crée simplement
|
|
ici et ici bien simplement ce que j'ai
|
|
fait j'ai simplement ajouté déjà de base
|
|
un petit logo mon logo pour pouvoir
|
|
illustrer les ajouts d'image par la
|
|
suite mais ça on verra ça plus tard donc
|
|
vous n'hésitez pas à choisir une petite
|
|
image de votre choix et ensuite eh bien
|
|
je vais choisir ouvrir pour venir
|
|
prendre le dossier de mon site web alors
|
|
pour l'instant par le logo il n'a rien
|
|
est ce que je vais faire et bien c'est
|
|
de venir créer du coup un nouveau
|
|
fichier et se fichent et là pour le coup
|
|
c'est assez important je vais l'appeler
|
|
index point html et pourquoi un vexe
|
|
simplement ces conventions pour dire aux
|
|
serveurs aux navigateurs voilà quand
|
|
vous arrivez sur mon site web et bien
|
|
fichier de la page d'accueil le premier
|
|
fichier que vous devez lire eh bien
|
|
c'est celui ci est donc du coup je
|
|
valide et je crée mon fichier index pour
|
|
acheter mais lorsque vous devez
|
|
comprendre ici c'est que la création
|
|
d'un site web et bien c'est
|
|
principalement en tout cas de base
|
|
l'édition de fichiers textes et cette
|
|
édition de fichiers textes et bien on va
|
|
la faire sous forme de balises ça veut
|
|
dire quoi une valise c'est que vous
|
|
allez avoir tout tout tout un tas
|
|
d'éléments ici dans votre fichier qui
|
|
vont commencer par un chevron devant
|
|
dans lequel vous avez trouvé le nom de
|
|
la balise à proprement parler et ensuite
|
|
et bien un chevron ferment ensuite vous
|
|
pourrez mettre votre contenu par exemple
|
|
et ensuite et bien souvent vous
|
|
retrouvez une balise ferment-ils sera
|
|
identique à la première sauf que vous
|
|
aurez un slash ici vous avez également
|
|
des balises qui fonctionne seul par
|
|
exemple c'est le cas de la balise images
|
|
que l'on verra par la suite ça et dans
|
|
ce cas bien simplement je vais me
|
|
contenter d'avoir cette balise 6 donc ça
|
|
c'est vraiment pour le principe de base
|
|
et vous allez voir que html et bien est
|
|
constitué de ses balises
|
|
est que ces balises vous permettre de
|
|
formater l'ensemble de votre site pour
|
|
en décrire le contenu alors je parle
|
|
bien sûr du contenu parce que tout ce
|
|
qui est design mais on le verra par la
|
|
suite mais ça sera fait en css le
|
|
deuxième langage que l'on découvrira
|
|
ensemble dans cette vidéo donc ici pour
|
|
le coup et bien je vais supprimer ma
|
|
balise images parce que je n'ai pas
|
|
vraiment l'enseigné et on va les voir le
|
|
rendu dans notre navigateur donc pour ça
|
|
simplement je vais aller choisir le
|
|
projet de mon site web donc le
|
|
index.html dans mon navigateur jeu
|
|
louvre et on en voit du coup le rendu
|
|
dans le navigateur est ce qu'on constate
|
|
bien et bien c'est que les balles des
|
|
dixie ont disparu alors quand je voulais
|
|
dit ses valises sont vraiment là pour
|
|
décrire votre contenu donc du coup je
|
|
pourrais lui dire par exemple ça c'est
|
|
pas un paragraphe mais un titre est
|
|
alors un titre principal en html et bien
|
|
ça va être plutôt la balise h1
|
|
reviendront encore un petit peu là
|
|
dessus par la suite mais du coup si
|
|
j'enregistre n'oubliez pas l'enregistrer
|
|
sinon verrez pas les modifs évidemment
|
|
et que je recharge la page dont on
|
|
appuyons ici sur le bouton rechercher
|
|
cette page eh bien vous avez maintenant
|
|
un affichage sous forme de titres alors
|
|
il ya un petit style de base en fonction
|
|
du navigateur pour les balises html ce
|
|
qui vous permet de visualiser la
|
|
différence mais gardez bien à l'esprit
|
|
que vraiment modifier le rendu visuel de
|
|
tout ça se fera en css par la suite donc
|
|
maintenant que vous avez compris le
|
|
système de ben ali et bien il est temps
|
|
de commencer vraiment avoir une
|
|
structure complète alors sur l'atome
|
|
c'est ça qui pratique vous pouvez
|
|
directement commencé à taper html et
|
|
vous devriez avoir un petit raccourci
|
|
qui va vous donner le canevas de base
|
|
alors ce canevas de quoi il est
|
|
constitué au final est bien est
|
|
constitué d'une première balise ici qui
|
|
donne le type du document la balise
|
|
doctype et qui précise qu'on travaille
|
|
en html ensuite vous trouvez une balise
|
|
html ici et la balise fermente ici dans
|
|
lequel au final tout le reste sera
|
|
contenue
|
|
vous voyez à côté de la balise des
|
|
choses comme langué galets andy régal
|
|
ltr avec des guillemets ici et bien ça
|
|
c'est ce qu'on appelle des attributs
|
|
donc on va parler d'attributs pour
|
|
donner un genre d'option la balise html
|
|
ici la balise langue nous dit que notre
|
|
site est en anglais donc nous on va le
|
|
faire en français donc je m haies ferris
|
|
et et ensuite la tribu dire qui est ici
|
|
nous dit que notre texte va de gauche à
|
|
droite littéralement left to right
|
|
donc comme la langue française ou
|
|
anglaise par exemple du coup qu'est ce
|
|
qu'on retrouve ensuite à l'intérieur on
|
|
va retrouver deux groupes deux balises
|
|
assez important les balises raid et les
|
|
balises body ce qu'il faut bien
|
|
comprendre ici c'est que dans la balise
|
|
body on va mettre tout ce qui sera
|
|
affiché sur la page vous souvenez notre
|
|
titre de tout à l'heure mais on pourrait
|
|
très bien devenir le maître ici dans la
|
|
balise aide on va trouver des choses qui
|
|
ne s'affiche pas à proprement parler
|
|
mais qui ont malgré tout leur importance
|
|
la première qui est vraiment son
|
|
importance ici c'est la balise title
|
|
cette balise title lycée on va mettre
|
|
par exemple mon premier site je vais
|
|
enregistrer et si je reviens que je
|
|
recharge la page mais on voit qu'ici
|
|
âprement et revu il n'y a rien qui a
|
|
changé par contre ici si vous regardez
|
|
votre barre d'onglets bien là vous voyez
|
|
que la balise title a bien été
|
|
reproduite ici et donc c'est vraiment
|
|
l'intérêt de cette balise title sait
|
|
qu'elle va décrire le titre de votre
|
|
page c'est aussi elle qui sera utilisée
|
|
par exemple pour les résultats de la
|
|
page de recherche sur google donc cette
|
|
balise elle est vraiment très important
|
|
ensuite qu'est ce qu'on va retrouver
|
|
bien on va retrouver ici une balise meta
|
|
cette balise meta en fait elle vous sert
|
|
à quoi elle vous sert à donner pas mal
|
|
d'informations supplémentaires ici on
|
|
dit aux navigateurs on utilise le char
|
|
cette ut f8 donc ça c'est un petit peu
|
|
plus technique mais c'est plutôt relatif
|
|
à l'encodage une voie informatique des
|
|
caractères donc une telle fuite pour
|
|
vous ça devrait fonctionner donc on va
|
|
le laisser comme ça ensuite comme je
|
|
voulais dit on va vraiment se retrouver
|
|
à l'intérieur de notre balises body
|
|
cette balise body elle va vraiment avoir
|
|
toute son importance parce que comme je
|
|
vous le dis c'est là qu'on va voir le
|
|
contenu principal du site alors
|
|
une chose ici quand même c'est que vous
|
|
voyez à chaque fois que pour chaque
|
|
niveau on a des tabulations voilà c'est
|
|
la touche juste à côté du à sur votre
|
|
clavier qui permettent d'ajouter de la
|
|
lisibilité techniquement le code
|
|
fonctionnerait aussi si on l'avait comme
|
|
ça seulement en ce serait beaucoup
|
|
beaucoup beaucoup moins lisible
|
|
et donc prenez vraiment cet habitus
|
|
avons une très bonne habitude que
|
|
d'inventer votre code pour qu'il soit
|
|
beaucoup plus lisible avec le temps est
|
|
donc maintenant on va commencer à venir
|
|
construire notre page alors comme je
|
|
voulais dit par exemple on pourrait
|
|
utiliser une balise titre qu'on va
|
|
mettre ici directement une balise
|
|
condamne être une balise h1
|
|
et cette balise on va mettre voilà html
|
|
et css 2 points les bases
|
|
je ferme la balise la balise h1 et d'une
|
|
balise qui fonctionne par deux éléments
|
|
et j'enregistre je regarde le rendu et
|
|
on voit bien que ça fonctionne comme
|
|
prévu on va continuer un petit peu ça
|
|
et j'aurais aussi envie de mettre ici
|
|
par exemple une image cette image elles
|
|
s'ajoutent grâce à la balise img qui est
|
|
ici et elle va prendre au moins une
|
|
option importante qui est frcs rcc pour
|
|
lui dire qu'elle est la source de
|
|
l'image ou est-ce que tu dois aller la
|
|
chercher et la simplement et bien si
|
|
vous avez mis votre image moi je les
|
|
appelais logo point png ici dans le même
|
|
dossier que votre site web et bien vous
|
|
avez simplement à dire où elle se trouve
|
|
à leur actif jour regardez donc ici par
|
|
exemple on est sûr logo enfin tng notre
|
|
image elle se situe au même niveau que
|
|
notre fichier index donc si je viens et
|
|
que je recharge
|
|
alors pour l'instant elle n'est pas très
|
|
visible parce que c'est du bluff sur du
|
|
blanc simplement mais en fait elle est
|
|
bien ici voilà je la fais un peu glissé
|
|
comme ça vous la voyez bien vous voyez
|
|
j'ai vu dans cette image ici on verra
|
|
par la suite comment css comment changer
|
|
la couleur de fond et donc faire
|
|
ressortir notre logo dans les images il
|
|
ya une deuxième option intéressante
|
|
ajouté au moins systématiquement presque
|
|
c'est la tribu halte qui est ici la
|
|
tribu halte qu'est-ce qui vous dit en
|
|
gros il vous dit ok si jamais l'image
|
|
n'arrive pas à s'afficher par exemple
|
|
parce que la personne qui regarde votre
|
|
site à une déficience visuelle ça donne
|
|
une alternative textuelles pour lui
|
|
expliquer ce qu est l image si je vais
|
|
mettre logo de bertrand par exemple
|
|
j'enregistre et là je suis bon pour ma
|
|
première partie ensuite je vais venir un
|
|
petit peu plus loin et je vais mettre un
|
|
paragraphe cette fois ci c'est à bali ce
|
|
qu'on a vu dans tout début de vidéo est
|
|
là du coup c'est la balise p cette
|
|
balise là aussi je vais terminer comme
|
|
ça je la mets au même niveau pour que ce
|
|
soit lisible et je vais mettre le
|
|
contenu de mon paragraphe à l'intérieur
|
|
et je vais m créer
|
|
votre site web voilà tout simplement
|
|
j'enregistre et je vais
|
|
regarder le résultat est donc on voit
|
|
bien qu'on a
|
|
le titre l'image qui est pas très
|
|
visible et mme ensuite non paragraphe
|
|
qui est ici d'accord voilà on voit qu'on
|
|
a vraiment où tu as la suite et là je
|
|
vous vois venir vous ok là on a qu on
|
|
est en train de créer une page web mais
|
|
c'est quoi un site web au final un site
|
|
web simplement c'est plusieurs pages qui
|
|
sont mises ensemble et donc ici par
|
|
exemple je pourrais très bien créer une
|
|
deuxième page donc je vais venir faire
|
|
un clic droit sur un espace vide dans
|
|
cette barre latérale alors si elle n'est
|
|
pas affiché bien vous avez simplement
|
|
ici vous voyez un petit tiroir pour
|
|
l'affiché donc je vais faire un clic
|
|
droit et je vais faire new file vous
|
|
pourriez aussi le créez simplement sur
|
|
windows ou sur mac os est simplement
|
|
comme fichiers nouveau one tout
|
|
simplement est donc ici je vais je vais
|
|
l'appeler page 2 par exemple point html
|
|
je l'enregistré et du coup et bien je
|
|
vais venir simplement marqué un petit
|
|
texte ici dans ce paragraphe bien je
|
|
veux mettre bienvenue sur la page 2
|
|
j'enregistre et maintenant si j'ouvre
|
|
cette page si sûr mon navigateur et bien
|
|
je vois que on a bien un affichage comme
|
|
on l'avait pensé et donc du coup
|
|
maintenant l'intérêt ici on a deux pages
|
|
ensemble et bien c'est les faire
|
|
communiquer de faire en sorte au final
|
|
que cette page si elles puissent
|
|
retourner sur cette page 2 et donc pour
|
|
ça vous avez le principe de liens les
|
|
liens vous connaissez vous les utilisez
|
|
très très très souvent et vous l'avez
|
|
compris c'est simplement un texte ou une
|
|
image sur laquelle on peut cliquer pour
|
|
passer de page en page donc pour créer
|
|
un lien là aussi vous avez une balise
|
|
que vous pouvez utiliser par exemple
|
|
l'intérieur d'un paragraphe qui est la
|
|
balise ha pour hans or c'est à dire pour
|
|
une encre donc du coup je vais ici je
|
|
crée la balise a ensuite je passe option
|
|
href achever ses quoi bien c'est pour
|
|
lui dire simplement bac quand tu cliques
|
|
on va là est donc ici on va où on va en
|
|
page 2 points html alors encore une fois
|
|
ici on voit bien ici elles sont sur le
|
|
même niveau 1 donc voilà si on a
|
|
vraiment tout sur le même niveau c'est
|
|
très simple à faire c'est pas bien il
|
|
faudra mettre le chemin complet et donc
|
|
du coup une fois que cette balise là est
|
|
ouverte je m y si le texte qui
|
|
s'affichera donc mon lien par exemple ou
|
|
alors aller en page 2
|
|
voilà je vais fermer ensuite la balise
|
|
ais je vais enregistrer et donc
|
|
maintenant si je reviens sur la première
|
|
page je vois que j'ai maintenant aller
|
|
en page 2 et quand je clique dessus et
|
|
bien j'arrive bien sur la deuxième page
|
|
que je viens de créer donc si je voulais
|
|
retourner sur la page une il me
|
|
suffirait de recréer un lien ici de
|
|
toute façon ces liens sont aussi à la
|
|
base même des menus dont on parlera un
|
|
petit peu plus tard juste la différence
|
|
entre un lien interne donc un lien comme
|
|
celui ci un vers une autre page de mon
|
|
site web dans mon dossier et c'est
|
|
d'un lien externe l'externe saint pierre
|
|
vers un autre site par exemple on
|
|
pourrait faire un lien vers youtube est
|
|
donc simplement pour ça je vais taper
|
|
l'url du site
|
|
auquel je souhaite accéder
|
|
voilà donc pour la différence entre un
|
|
lien interne et un lien externe et donc
|
|
maintenant justement on pourrait
|
|
s'amuser à venir créer un menu et donc
|
|
pour ça simplement je vais utiliser une
|
|
autre type de balises et souvent les
|
|
menus sont fait sur base de balises ul
|
|
et elie alors la balise ul c'est une
|
|
balise qui fait quoi bien simplement
|
|
c'est une balise pour créer des listes
|
|
sans numéro devant voilà on va dire ça
|
|
comme ça et donc cette balise ul est là
|
|
pour dire ok il va y avoir une nouvelle
|
|
liste dans cette liste on va mettre nos
|
|
éléments devenus et pour chaque élément
|
|
de la liste eh bien je vais mettre une
|
|
balise elle y donc ici ce sera la page
|
|
d'accueil
|
|
est en dessous on va mettre par exemple
|
|
la page 2
|
|
voilà j'enregistre et je regarde le
|
|
résultat alors je vois bien que j'ai ici
|
|
une liste et je vois bien que j'aie les
|
|
éléments écrits que je désire alors
|
|
cependant j'ai pas encore vraiment créé
|
|
le côté liens de temps là bas ça va être
|
|
pareil que pour le lien qu'on a créé ici
|
|
c'est à dire qu'on va revenir à choisir
|
|
d'encadrer notre texte par une balise à
|
|
on va mettre href égal slash pour lui
|
|
dire bah voilà ou alors index.html voilà
|
|
pour pointer vers notre fichier d'axa
|
|
je vais mettre accueil et je m slash ah
|
|
voilà tout simplement
|
|
et je vais faire pareil pour man pour le
|
|
lien qui va aller vers la page 2 donc je
|
|
veux dire que c'est vers pages de bois
|
|
je t aime elle qu'on doit pointer et je
|
|
vais venir ensuite ici a pas
|
|
terminé le lien en fermant la balise est
|
|
donc maintenant quand je registre et
|
|
bien je recherche ma page et je vois du
|
|
coup que j'ai bien accueilles et page 2
|
|
quand je clique sur accueil on voit que
|
|
sa charge ça renvoie sur cette page si
|
|
et quand je clique sur page 2 et bien là
|
|
on arrive à la page 2
|
|
je reviens au début et ici
|
|
les choses commencent à peu à prendre
|
|
forme ok alors avant de continuer on
|
|
voit qu'à chaque fois on forme un petit
|
|
peu ici tous des blocs de code qui
|
|
visuellement seront affichées de façon
|
|
différente je veux dire ici par exemple
|
|
vous pourrez mettre une couleur de fond
|
|
pour faire ressortir le logo invisible
|
|
pour l'instant parce que les blancs et
|
|
si on pourrait mettre une image en fond
|
|
par exemple voilà on pourrait faire tout
|
|
ce genre de choses le menu on va devoir
|
|
le stylisé aussi de l'ancien bloc à part
|
|
et donc dites vous bien à chaque fois on
|
|
aura comme des blocs de contenu et bien
|
|
ces blocs il y à une balise pour ça
|
|
aussi en html qui est la balise div
|
|
et donc je vais commencer maintenant
|
|
déjà à venir encapsulé tous et ensemble
|
|
de codes dans ce style de blocs et donc
|
|
pour ça qu est ce que je vais faire bien
|
|
ici je vais créer une balise div
|
|
voilà tout simplement et je vais venir
|
|
la fermer à la fin de mon blog de
|
|
contenu
|
|
tout simplement et alors pour garder une
|
|
belle visibilité je vais reprendre
|
|
toutes ses lignes de code et je vais
|
|
faire un petit coup de tabulation pour
|
|
venir voilà bien ta bulle et et bien
|
|
organisée ma hiérarchie
|
|
de ma liste je vais faire pareil pour
|
|
ici donc je vais venir créer une div
|
|
j'ai attentes
|
|
et je ferme ma div
|
|
et je vais faire encore une fois la même
|
|
chose ici
|
|
alors si on recharge on voit qu'il ya
|
|
pas tellement de différence à ce niveau
|
|
ci
|
|
mais qu'importe la base est là et on
|
|
pourra venir structuré ça un petit peu
|
|
plus tard et stylisé tout ça en css mais
|
|
au moins on a déjà bien séparés notre
|
|
contenu mais attention c'est pas tout là
|
|
on a des div qui sont général maintenant
|
|
il est il en existe qui ont pratiquement
|
|
le même effet et qui visuellement auront
|
|
le même effet mais qui vont donner un
|
|
indice sur le contenu du bloc et ses
|
|
balises bien par exemple c'est la balise
|
|
nav pour dire aux navigateurs est bien
|
|
là là dedans tu vas trouver un menu qui
|
|
va permettre de naviguer dans le site
|
|
vous trouvez aussi une balise
|
|
qui s'appelle mail et qui va contenir le
|
|
contenu principal de notre site donc
|
|
voilà je veux englobait encore une fois
|
|
l'ensemble dans une balise nine
|
|
et vous allez aussi trouver les balises
|
|
section pour chaque section 2 contenu
|
|
voilà donc vous pourriez très bien voir
|
|
une structure qui au final ressemble à
|
|
ça pratiquement ça aura le même effet on
|
|
va les recharges encore une fois le site
|
|
et on voit que ça pas changer grand
|
|
grand grand chose mais par contre est
|
|
bien le navigateur c'est maintenant que
|
|
ici on a un menu que ici on a des
|
|
sections deux contenus et pour tout un
|
|
tas de raisons référencement par exemple
|
|
donc c'est à dire positionner votre site
|
|
sur google je pourrais faire une vidéo
|
|
sur le sujet si ça vous intéresse ou
|
|
encore pour des logiciels par exemple
|
|
qui vont venir
|
|
faciliter la lecture pour les personnes
|
|
aveugles et c est bien là
|
|
sa toute son importance donc je vous
|
|
encourage vraiment eut adopté cette
|
|
façon de faire le html sémantique dites
|
|
vous bien tous vos blocs de code on va
|
|
les séparer dans des div certains de ces
|
|
div ont un usage spécifique pour décrire
|
|
le contenu des boîtes et enfin on pourra
|
|
mettre tout ça un peu plus en forme
|
|
grâce au css et du coup on va continuer
|
|
un petit peu on a une première section
|
|
une 2ème et bien on va en créer une
|
|
troisième tout simplement
|
|
voilà et ici à l'intérieur je vais
|
|
utiliser des divins peut générer pour
|
|
faire deux colonnes qui n'en n'ont
|
|
seront qu'une par exemple sur la version
|
|
mobile donc voilà on va voir ça un petit
|
|
peu plus tard et donc ici à l'intérieur
|
|
je vais mettre 1 h 2
|
|
avec un sous titre donc là je vais
|
|
mettre html
|
|
est ensuite directement en dessous je
|
|
mets une balise paragraphe pour mettre
|
|
un petit peu de contenu en plus donc ici
|
|
va justement vous l'avez compris le html
|
|
c'est pour le contenu et la structure et
|
|
ensuite je vais fermer cette vive
|
|
et je vais en créer une nouvelle ici
|
|
dans cette divine je vais faire plus ou
|
|
moins la même chose je vais remettre un
|
|
sous titre de maître css
|
|
et je vais mettre un petit paragraphe
|
|
pour le style le css c'est ce qu'on
|
|
étudiera un petit peu plus tard dans
|
|
cette vidéo
|
|
enfin je vais rajouter une dernière
|
|
section avec un petit prototype de
|
|
formulaires c'est aussi quelque chose
|
|
qu'on croise réellement souvent
|
|
sur le web et donc pour ça j'ai une
|
|
balise aussi à part entière qui
|
|
s'appelle la balise for more est très
|
|
importante il ya beaucoup de soupe à
|
|
lise possible à l'intérieur je vous
|
|
montrerai où les trouver un petit peu
|
|
plus tard et cette balle et je vais
|
|
aussi venir la fermer cette valise forme
|
|
elle prend généralement une action comme
|
|
poste guette et c'est alors ça je n'ai
|
|
pas l'aborder dans cette vidéo dites
|
|
vous bien qu'en html en css on va créer
|
|
le formulaire en lui-même mais pas son
|
|
traitement c'est à dire quoi c'est à
|
|
dire qu'ici bien par exemple je peux
|
|
créer
|
|
un champ donc pour un chant vote
|
|
isabelle is in qt et je veux lui dire
|
|
que c'est une balise qui attend du texte
|
|
ensuite
|
|
je vais lui donner un nom ici on va dire
|
|
par exemple que sa valise email pour
|
|
récolter une adresse email et à ce
|
|
niveau là maintenant je suis bon je vais
|
|
te retourner voir ce que ça donne on
|
|
voit html pour le contenu css pour le
|
|
style est alors ici je vois le chant que
|
|
je peux du coup complété donc c'est pas
|
|
tout à fait fini et si on peut mettre un
|
|
petit titre aussi dit l'un age 2
|
|
inscrivez-vous
|
|
à la newsletter
|
|
voilà j'ai mon champ alors devant ce
|
|
champ je voudrais bien m ben voila un
|
|
petit texte qui explique ce qu'est mon
|
|
champ pour ça je vais pouvoir utiliser
|
|
la belle est alors la belle il va
|
|
prendre un attribut fort qui sera en
|
|
fait le nom du champ auquel il est
|
|
rattaché donc ici on va dire que c'est
|
|
le les bêtes le label fort email tout
|
|
simplement
|
|
et là par contre ça fonctionne comme une
|
|
balle comme une balise paragraphe est
|
|
donc je vais mettre ici email ça sera le
|
|
texte qui sera affichée et ensuite je
|
|
vais fermer la balise
|
|
alors je vois ici du coup que ça
|
|
fonctionne j'ai bien mon titre j'ai mis
|
|
mon label j'aime bien mon espace et me
|
|
manque les ducs ou qu'un petit bouton
|
|
pour valider celui là aussi vous avez
|
|
un championnat et là vous pouvez
|
|
utiliser le taipei subite
|
|
j'enregistre
|
|
et je recharge et je vois que j'ai
|
|
maintenant un bouton envoyer alors ce
|
|
bouton envoyer pour l'instant il va pas
|
|
faire grand chose parce que comme je
|
|
voulais dit le principe avec html et css
|
|
c'est de créer la structure le contenu
|
|
le style mais pas tellement de créer les
|
|
actions dont pour créer les actions de
|
|
ce formulaire j'aurai besoin d'autre
|
|
chose par exemple de php ou java script
|
|
etc ça sera vu vous inquiétez pas dans
|
|
les prochaines vidéos mais du coup
|
|
voilà on va en rester pour ce formulaire
|
|
et on voit que dans notre page html ici
|
|
on a du coup déjà pas mal de choses on a
|
|
une image et qu'on verra mieux plus tard
|
|
on a un titre de niveau 1 ont des titres
|
|
de niveau 2 on a des paragraphes on a
|
|
des liens voilà tout simplement et on a
|
|
même un formulaire donc c'est déjà
|
|
plutôt pas mal pour commencer on a déjà
|
|
donné un bon petit coup d'oeil ici mais
|
|
bien sûr vous pourriez retrouver toutes
|
|
ces balises html et pour ça simplement
|
|
ou est-ce que vous pouvez les retrouver
|
|
et bien simplement si vous tapez balises
|
|
html sur google vous avez une tonne de
|
|
sites qui vont vous permettre de
|
|
découvrir l'ensemble de ces balises un
|
|
site de référence et bien c'est le
|
|
développeur pour mozilla point org et là
|
|
vous avez les références des éléments
|
|
html et vous retrouverez une liste très
|
|
complète de toutes les balises html que
|
|
vous pouvez utiliser alors l'attention
|
|
il y en a vraiment beaucoup beaucoup
|
|
beaucoup beaucoup moi je vous ai montré
|
|
le principe général mais vous pouvez du
|
|
coup vraiment aller beaucoup plus loin
|
|
ok donc maintenant qu'on s'est attardé
|
|
au contenu et bien on va commencer à
|
|
parler un petit peu du css c'est à dire
|
|
la mise en forme c'est à dire le style
|
|
de votre passé ici qu'on va vraiment
|
|
commencer à s'intéresser au design et on
|
|
va découvrir ça ensemble et donc
|
|
maintenant on a envie de styliser un peu
|
|
tout ça grâce justement aux csss et donc
|
|
venons au css vous avez trois façons
|
|
d'inclure votre css la première que vous
|
|
pourrez parfois retrouvé ses deux
|
|
inclure directement au niveau de votre
|
|
balise comme un attribut et donc par
|
|
exemple si j'ai envie de venir ici
|
|
mettre justement tout ça en bleu voilà
|
|
mon premier blog vraiment deux contenus
|
|
ma première section et bien je peux
|
|
venir au niveau de ma section voilà de
|
|
la balise et commençaient à passer mon
|
|
css et pour ça je vais ajouter un
|
|
attribut steam et je vais lui dire égal
|
|
ouvrez et fermez les guillemets et à
|
|
l'intérieur je peux venir ici marqué mon
|
|
css non css ça sera toujours la même
|
|
structure je vais commencer ici par lui
|
|
donner une directive de ce que je
|
|
souhaite changer ici dans ce cas ci
|
|
c'est la couleur de fond et donc
|
|
background color ensuite je vais mettre
|
|
deux points et je vais lui passer la
|
|
valeur et non ce cas ci je vais lui
|
|
passer par exemple une valeur blue et je
|
|
vais enregistrer donc il ya différentes
|
|
façons de marquer les couleurs la
|
|
j'utilisais la plus simple et je reviens
|
|
de recharger ma page et on voit que ça a
|
|
bien fonctionné on voit vraiment ici que
|
|
mon arrière plan est passée totalement
|
|
en bleu et donc on peut continuer à
|
|
travailler mais si je me dis à un moment
|
|
donné bah voila j'ai envie aussi par
|
|
exemple que cette section 6 avec html et
|
|
css donc celle ci soit passé également
|
|
bleus eh bien je vais devoir repasser
|
|
exactement la même chose au niveau de ma
|
|
section et je vais devoir lui remarqué
|
|
du coup style égale background color
|
|
de pointe blue
|
|
j'enregistre
|
|
et je recharge et je vois que ça
|
|
fonctionne bien cependant c'est quand
|
|
même pas l'idéal parce que du coup je
|
|
dois retaper tout ça à chaque fois que
|
|
je veux que mon fonds soit bleu et donc
|
|
du coup ça ça pose quelques soucis 1 et
|
|
là je ne change d'une propriété je
|
|
pourrais ont changé plusieurs ce qu'on
|
|
va voir plus tard et donc pour ça il
|
|
faut venir définir le css à un endroit
|
|
comme un conte pourra réutiliser et ça
|
|
aussi vous avez plusieurs façons de le
|
|
faire la première c'est de venir dans le
|
|
raid est de venir ajouter une balise
|
|
style 7 be still à l'intérieur je vais
|
|
pouvoir y placer mon css et je pourrais
|
|
par exemple lui dire background color
|
|
blue mais si je fais ça comme ça mais
|
|
qu'est ce qui va se passer je vais
|
|
recharger
|
|
voilà et on voit que ça rien changé en
|
|
finale j'ai laissé les styles ici donc
|
|
voilà il faudrait vraiment les enlever
|
|
voilà c'est ce que je vais faire
|
|
maintenant
|
|
j'enregistre je recharge et je vois du
|
|
couple les modifications ne s'affiche
|
|
plus nulle part et bien c'est normal il
|
|
faut lui dire voilà l'endroit précis
|
|
auxquels ces modifications doigts être
|
|
apportées et pour ça et on va utiliser
|
|
ce qu'on appelle des sélecteurs et donc
|
|
pour ça on va commencer avant de lui
|
|
donner vraiment les instructions a
|
|
changé on va lui dire qu'on veut
|
|
modifier les sections
|
|
voilà tout simplement et donc on va
|
|
ouvrir donc simplement c'est le nom de
|
|
la balise on va ouvrir et fermer une
|
|
accolade et à l'intérieur on va lui
|
|
mettre backbone color blue et on va
|
|
aussi naître un point virgule juste
|
|
derrière l'instruction
|
|
comme ça on est vraiment dans le vrai
|
|
quand celle ci
|
|
le nom de la propriété a changé deux
|
|
points la valeur est ensuite un point
|
|
virgule si j'ai besoin de rajouter une
|
|
deuxième propriété eh bien je la joue
|
|
très à la suite déjà terminée là aussi
|
|
par un point virgule donc j'enregistre
|
|
je recharge et là par contre je vois que
|
|
tout mais section déjà on voit bien les
|
|
différents son passé en bleu et tout ça
|
|
pourquoi parce qu'on lui a dit que on
|
|
voulait prendre la balise section si je
|
|
voulais prendre la balise paragraphe par
|
|
exemple je mets un petit p j'enregistre
|
|
je recharge et là je vois que ce sont
|
|
les paragraphes sur lesquels on a été
|
|
appliqué du coup la modification et nous
|
|
c'est pas vraiment ce qu'on veut faire
|
|
nous ce qu'on veut faire en fait c'est
|
|
venir l'appliquer oui à des sections
|
|
mais juste à la première ici et par
|
|
exemple juste à celle-ci ou juste à
|
|
celle ci est donc pour ça qu'est-ce que
|
|
j'ai fait le mien je vais utiliser des
|
|
sélecteurs de classe par exemple les
|
|
sélecteurs de classe ça c'est simple je
|
|
vais lui dire ici je peux les créé sur
|
|
demande donc je viens ici par exemple
|
|
sur ma section la première et je voulais
|
|
passer une classe et je vais lui dire
|
|
que cette classe je peux créer le nom à
|
|
la demande et donc je vais lui dire que
|
|
c'est la classe fond bleu tout
|
|
simplement
|
|
et qu'est ce qu'on va faire maintenant
|
|
du coup eh bien on va venir modifier ça
|
|
pour non plus avoir les balises
|
|
paragraphe mais la classe fond bleu
|
|
alors quand on choisit une classe en css
|
|
on commence par un point et ensuite on
|
|
mais voilà le nom de la classe donc je
|
|
m'attaque à ce fond bleu
|
|
donc c'est ça ici la classe
|
|
qui est définie et qui dit en fait voilà
|
|
toute cette section elle doit être mise
|
|
en forme selon la classe fond bleu fond
|
|
bleu qui se trouve ici du coup
|
|
j'enregistre je recharge et là je vois
|
|
bien que ça fonctionne et qu'on a bien
|
|
le résultat escompté et du coup la
|
|
retirer bien c'est que à chaque fois que
|
|
j'aurai besoin de mettre une balise on
|
|
fond bleu et bien je n'aurai qu'à venir
|
|
sur la balise en question pour lui
|
|
rajouter la classe correspondante à
|
|
mettons que je souhaite la mettre sur le
|
|
h2 html donc sur le titre de html mais
|
|
un jour ajoute la classe égale fond bleu
|
|
j'enregistre je recharge et je vois bien
|
|
que du coup juste cet élément-là a été
|
|
mis en bleu donc ça c'est le principe de
|
|
classe donc moi je vais enlever ce fond
|
|
bleu ci parce que je n'avais pas besoin
|
|
je voulais juste avoir celle ci alors
|
|
par contre c'est pas la seule façon
|
|
d'être une couleur là je trouve que le
|
|
bleu il est pas terrible j'ai vraiment
|
|
un boulot très classique et donc je peux
|
|
venir par exemple un nouvel onglet et
|
|
taper une recherche comme par exemple
|
|
palette couleurs
|
|
html par exemple
|
|
voilà je trouve ici code couleur html
|
|
et je trouve sur ce style de sit ins
|
|
électeurs qui va me permettre de choisir
|
|
une couleur donc si je venais de choisir
|
|
un bleu plus sympa voilà peut-être un
|
|
blog un petit peu plus profond voilà
|
|
quelque chose comme ça et du coup mais
|
|
bien j'ai les valeurs maintenant ici qui
|
|
me permettent de l'identifier cette
|
|
couleur là précisément sur des millions
|
|
donc ici je peux prendre le code
|
|
hexadécimal qui est ici à côté de hayes
|
|
et je fais un copier de ce code et je
|
|
viens simplement maintenant sur mon css
|
|
pour changer background color blue park
|
|
art et si on met un hexadécimal on
|
|
commence toujours par le fameux style
|
|
ici voilà on va appeler ce caractère
|
|
comme ça dans les faits on l'appelle le
|
|
croisions et dans les faits je fais un
|
|
col et
|
|
lemm avait pris le croisillon avec donc
|
|
voilà donc nos besoin que d'un seul
|
|
j'enregistre et je colle bien du coup la
|
|
valeur hexadécimal que j'ai trouvé sur
|
|
cette palette là donc je fais à
|
|
recharger et là
|
|
voit bien du coup que j'ai la couleur
|
|
qui m'intéresse à
|
|
mais maintenant parlons du troisième
|
|
endroit où mettre notre css parce que
|
|
bien ici on va avoir un fichier qui va
|
|
vite devenir très gros surtout si on
|
|
cumule html et css dans le même fichier
|
|
et nous en informatique et surtout quand
|
|
on code on aime bien séparées tout ça
|
|
dans des fichiers différents pour s'y
|
|
retrouver un petit peu plus et donc pour
|
|
ça qu est ce que je vais faire eh bien
|
|
je vais revenir faire un clic droit je
|
|
vais faire encore agnew file et je vais
|
|
créer un nouveau fichier mais ce fichier
|
|
du coup je vais l'appeler style point
|
|
css dans les faits vous pourriez
|
|
l'appeler à peu près n'importe comment
|
|
mais par convention le fichier css
|
|
principal on l'appelle style point css
|
|
j'enregistre hélas que je vais faire et
|
|
bien c'est que je vais reprendre css qui
|
|
est ici je vais venir le collet dont
|
|
document j'enregistre et ensuite eh bien
|
|
je vais plutôt enlevé ça et faire un
|
|
lien vers cette fiche c'est c'est ce que
|
|
je viens de créer alors pour ça
|
|
simplement qu'est ce que je vais faire
|
|
je vais revenir dans le raid et je vais
|
|
utiliser la balise link qui me permet de
|
|
lier à un fichier je vais lui dire dans
|
|
un attribut rôle que
|
|
le fichier est un fichier de feuilles de
|
|
style et donc je vais appeler ça style
|
|
sheet et je vais ensuite tout comme
|
|
amiens mettre une référence 1 h res vers
|
|
le fichier css style point css ici parce
|
|
qu'il est dans le même fichier
|
|
et je vais fermer cette valise c'est une
|
|
balise unique j'enregistre un et je
|
|
recharge et là on voit que tout est
|
|
toujours fonctionnel et maintenant si je
|
|
veut modifier mon css et bien je viens
|
|
dans le fichier steal princess pour
|
|
venir modifier la valeur que je veux
|
|
oui j'oubliais le petit croisions à pain
|
|
pour modifier ça tout simplement donc
|
|
ici je reviens j'annule les
|
|
modifications avec contrôle z ou comment
|
|
y êtes si vous êtes sur mac
|
|
et on voit bien du coup qu'on a trois
|
|
façons dans une feuille externe
|
|
dans une balise style au niveau du head
|
|
ou alors en ajoutant
|
|
un attribut style voilà au même niveau
|
|
que j'ai ajouté cette tribu classe
|
|
alors des propriétés css bien sûr il y
|
|
en a une tonne également donc moi je
|
|
tapais par exemple ici c'est 16
|
|
properties mdn soit propriétés css sur
|
|
le mozilla developer network et je vais
|
|
prendre le lien référence ss faye de
|
|
style en cascade et ici je vais pouvoir
|
|
également retrouvé une liste de toutes
|
|
les propriétés que vous pouvez ajouter
|
|
donc quand nous vous le voyez on a quand
|
|
même vraiment pas mal pour chacune
|
|
d'elle d'ailleurs quand je clique j'ai
|
|
des démonstrations de ce que ça fait en
|
|
temps réel avec quelques petits exemples
|
|
une petite visualisation à droite qui
|
|
est vraiment pas mal ainsi qu'à la fin
|
|
le support sur les différents
|
|
navigateurs parce que oui css est
|
|
implémenté avant tout aussi au niveau de
|
|
votre navigateur web et donc et bien les
|
|
propriétés les plus récentes ne seront
|
|
peut-être pas dispo sur tout l'est sur
|
|
tous les navigateurs par exemple
|
|
par exemple si une propriété sort après
|
|
la version 12 de edge et bien la version
|
|
12 de edge connaîtra jamais cette
|
|
propriété là et donc ne sera pas là les
|
|
roses qui serait peut-être que le cas
|
|
par exemple de la version trêve donc ça
|
|
ça à prendre en compte et ça va vous
|
|
inviter aussi attesté souvent votre site
|
|
web sur les différents navigateurs afin
|
|
de voir que tout fonctionne à peu près
|
|
partout de la même façon et ça parfois
|
|
ça peut être un peu casse tête même si
|
|
c'est un petit peu mieux qu'avant à ce
|
|
niveau là
|
|
mais du coup et bien on peut utiliser
|
|
toutes ses balles ici pour continuer à
|
|
customiser notre site web maintenant
|
|
qu'on a compris les principes de base
|
|
alors la première chose ici est bien
|
|
c'est que vous voyez que les bords bah
|
|
voilà ils sont pas vraiment il ya un
|
|
genre de petites marges là tout autour
|
|
et donc ça c'est une marge qui mit un
|
|
peu par défaut par votre navigateur et
|
|
donc pour ça mais on va continuer sur
|
|
notre style et on va lui dire que au
|
|
niveau du body dans notre page donc là
|
|
on fait référence directement à la
|
|
valley à la balise et bien on a une
|
|
marge
|
|
donc la maj c'est vraiment ici tout le
|
|
petit encart que vous avez autour c'est
|
|
là c'est un espace on va dire vide entre
|
|
plusieurs blocs et cette nage voilà m à
|
|
0
|
|
donc je recharge et là je vois que la
|
|
marge qu'ils étaient tout autour a
|
|
disparu je peux maintenant vraiment
|
|
venir fixer les choses moi-même j'ai
|
|
envie maintenant de customiser la façon
|
|
dont mon titre à sa fiche et donc pour
|
|
ça maintenant je vais revenir toujours
|
|
sur mon style et je vais modifier cette
|
|
balise h1 jeu peut la modifier
|
|
directement parce que ça sera la seule
|
|
balise h1 de mappage et donc je vais lui
|
|
ajouter différentes propriétés par
|
|
exemple texte à ligne et je vais le
|
|
mettre en centers qui permettra deux
|
|
centres et le texte
|
|
ensuite je vais rajouter color et je
|
|
vais mettre la couleur blanc alors pour
|
|
ça le blanc ça vous pouvez le retenir
|
|
ces sifflets f
|
|
je recharge et je vois que ça fonctionne
|
|
maintenant je vois que le html et css
|
|
est vraiment très très collée par
|
|
rapport au bord de mon cadre et pour ça
|
|
j'ai envie de rajouter un genre de petit
|
|
match interne et bien cette marge
|
|
interne c'est ce qu'on appelle un
|
|
padding
|
|
et donc pour ça je vais rester sur mon
|
|
chemin et je vais ajouter fading alors
|
|
je peux préciser tirer top pour viser la
|
|
marge interne supérieure celle où j'ai
|
|
justement un petit beurre avec le cadre
|
|
et je veux lui dire que je souhaite par
|
|
exemple se passer de 30 pixels 30 pixels
|
|
c'est une valeur fixe un pixel c'est un
|
|
point sur votre ordinateur à point sur
|
|
votre écran et donc si je recharge ici
|
|
voilà je vois que j'ai la marge qui est
|
|
venu se crée ici la marge interne qui
|
|
venus se crée entre le début du bloc
|
|
et le contenu si j'ai envie de mettre de
|
|
la même façon un planning
|
|
voilà pour le sol un peu bling pour le
|
|
dessous un tadine bottom donc est bien
|
|
ici je peux mettre par exemple je vais
|
|
exagéré un petit peu pour vous montrer
|
|
mais si je mets 150 pixels ici je
|
|
recharge est bien là vous voyez qu'on a
|
|
vraiment
|
|
une très grosse différence donc moi
|
|
c'est un petit peu trop pour moi je vais
|
|
plutôt venir mettre quelque chose comme
|
|
15 pixels parce que je veux que ça colle
|
|
assez bien au logo l'image qui est ici
|
|
justement parlons-en
|
|
cette image là j'ai envie
|
|
qu'elle fasse un certain pourcentage par
|
|
exemple de mappage pas envie qu'elle
|
|
s'affiche comme ça en grand alors pour
|
|
ça qu est ce que je vais faire je vais
|
|
rajouter une classe par exemple
|
|
et je vais l'appeler
|
|
logo principal
|
|
j'enregistre et je reviens maintenant
|
|
dans css pour rajouter le css
|
|
correspondant au logo
|
|
principal donc cette classe
|
|
ce qui explique que j'ai ici un point du
|
|
coup et qu'est ce que je vais lui dire
|
|
eh bien j'ai besoin ici de lui donner
|
|
par exemple une largeur ou une hauteur
|
|
spécifique donc je vais lui dire par
|
|
exemple que sa largeur avant qu'on va
|
|
appeler sa rive oui c'est largeur en
|
|
anglais et qu'est ce qu'on va humer a
|
|
très bien on va y mettre par exemple 70%
|
|
j'enregistre je recharge et là on voit
|
|
que mon image elle a vraiment ici
|
|
diminuer de taille
|
|
alors admettons maintenant que je
|
|
souhaite aussi centre un petit pot final
|
|
tous les éléments qui se trouvent dans
|
|
cette partie ci est bien pour le coup ce
|
|
que je vais faire simplement c'est que
|
|
je vais venir par exemple sur ma section
|
|
d'ailleurs je vais lui donner un nom
|
|
alors souvent le premier élément comme
|
|
ça le premier bloc le plus imposant on
|
|
l'appelle i wore d'accord en anglais
|
|
donc vous retrouver ça souvent dans des
|
|
thèmes et c'est donc autant s'habituer à
|
|
ça et donc je vais modifier mon fond
|
|
bleu mains voila je vais lui donner le
|
|
nom plus explicite heroes et ensuite je
|
|
continue et ce que je vais faire ici du
|
|
coup s'est rajoutée par exemple un texte
|
|
aligne
|
|
center voilà je le mets sont très voilà
|
|
comme ça et ainsi tout ce qui sera ici
|
|
sera centré si je trouve ici encore une
|
|
fois que le logo ici est un petit peu
|
|
trop proche du pauvre est bien là je
|
|
peux revenir sur le css du logo
|
|
principal et lui dire aussi par exemple
|
|
20 painting convainc pas bling en
|
|
dessous donc padding bottom et qu'on
|
|
veut ding 2 20 pixels
|
|
j'enregistre et là on voit justement
|
|
qu'on est bon à ce niveau 6
|
|
qui est continuons donc un petit peu
|
|
cette mise en forme donc ici on va
|
|
simplement agrandir un petit peu le
|
|
texte le mettre au centre et ensuite
|
|
pourquoi pas créer ici un bouton voilà
|
|
customiser un petit peu ce lien le
|
|
transformer en une sorte du design de
|
|
boutons alors pour ça qu est ce que je
|
|
le fais rien dans un premier temps je
|
|
vais venir ici aussi pourquoi pas
|
|
identifié cette section 6 donc je
|
|
pourrais mettre que c'est la classe logo
|
|
par exemple et ensuite je vais venir
|
|
customiser encore une fois mon css
|
|
donc ici je vais venir m
|
|
point slogan c'est le nom de la classe
|
|
que j'ai créé
|
|
et ensuite je peux aussi venir mettre un
|
|
texte aligne
|
|
center
|
|
ensuite ça voilà la gelée du coup centre
|
|
est qu'est-ce que j'ai besoin de faire
|
|
j'ai besoin d'agrandir ce paragraphe est
|
|
du coup mes seins c'est quoi quand on y
|
|
réfléchit bien c'est des paragraphes
|
|
contenus dans slogan est donc pour ça je
|
|
peux aussi venir sélectionner
|
|
directement en css simplement je vais
|
|
venir faire un coup de poing slogans et
|
|
puis je vais rajouter la balise
|
|
paragraphe derrière et ça veut bien dire
|
|
ce que ça veut dire on a le paragraphe
|
|
de la classe los gants et ce paragraphe
|
|
est bien ce qu'on veut c'est modifier sa
|
|
sonde saiz sa taille d'écriture et pour
|
|
ça je vais aussi en profiter pour vous
|
|
montrer une petite valeur qui reviendra
|
|
souvent c'est les em donc là je met par
|
|
exemple 3ème point virgule et ça veut
|
|
dire quoi c'est tu aimes bien c'est par
|
|
rapport à taille de référence de votre
|
|
texte donc c'est une valeur qu'on
|
|
appelle relative ça veut dire quoi se
|
|
dire que ça va être trois fois plus
|
|
grand que cette taille de masse
|
|
j'enregistre et on voit ici que c'est
|
|
bien le cas alors par contre moi je
|
|
trouve ça un petit peu trop grand j'ai
|
|
peut-être juste m 2 m pour voir ça aussi
|
|
il faut bien vous en rendre compte ça
|
|
sera souvent d'expérimentation ça sera
|
|
souvent testé modifié et c'est jusqu'à
|
|
avoir quelque chose qui vous plaît dans
|
|
un design forcément base et qu'on
|
|
découvre on signe ici mais comprenait
|
|
déjà un petit peu cette logique ensuite
|
|
on doit venir modifier ça pour l'avoir
|
|
sous forme de bouton alors du coup mais
|
|
a là aussi je vais revenir sur le code
|
|
html et on voit que simplement c'est la
|
|
balise à contenu donc la balise n'est un
|
|
contenu dans la classe dans la section
|
|
de la classe slogans
|
|
et donc du coup j'y vais je prononçais
|
|
cesse
|
|
j'ajoute point slogan
|
|
à pour rien
|
|
et je vais lui dire voilà qu'on va
|
|
mettre
|
|
un background color
|
|
et qu'on va la voir par exemple vers
|
|
voilà pour choisir une couleur un peu
|
|
plus sympa et c'est plus tard mais voilà
|
|
vraiment pour la démo à parce qu'on voit
|
|
ici c'est un verre assez assez foncée
|
|
mais bon c'est pas encore l'idéal on n'a
|
|
pas encore vraiment notre bouton alors
|
|
pour ça on va rajouter un petit peu plus
|
|
de css
|
|
je vais commencer par rajouter à padding
|
|
un passing qui sera dans toutes les
|
|
directions et qui sera par exemple de 5
|
|
pixels on aura déjà quelque chose qui
|
|
s'approche plus ensuite on va lui dire
|
|
que ensuite on va lui dire que la
|
|
couleur vraiment la couleur de
|
|
l'écriture là on la veut en blanc
|
|
et enfin on va lui dire avec text
|
|
decoration
|
|
qu' on ne veut rien text decoration voit
|
|
ici le valeur qui peut prendre donc text
|
|
decoration c'est la propriété qui nous
|
|
permet par exemple de souligner notre
|
|
élément d' pour rajouter underline sur à
|
|
peu près tout ce qu'on veut et moi ici
|
|
du coup je vais lui mettre une bonne
|
|
pour lui dire que non je ne veux rien
|
|
parce que par défaut les liens sont
|
|
soulignés et je vais recharger la page
|
|
et est ici on voit quelque chose qui
|
|
ressemble vraiment de plus en plus un
|
|
bouton et la dernière chose qui nous
|
|
manque et bien c'est les petits coins
|
|
arrondis et pour ça aussi on a une
|
|
propriété qui est bord de radio
|
|
et qu'on peut définir par exemple en
|
|
pixels donc je vais mettre 20 pixels
|
|
recharger et là on voit bien qu'on a
|
|
quelque chose de nettement mieux on
|
|
pourrait encore augmenter un petit peu
|
|
notre padding on pourrait le passé par
|
|
exemple à 20 pixels
|
|
c'est peut-être un petit peu trop à 10
|
|
voilà et là on peut voir que c'est déjà
|
|
nettement mieux donc c'est pour la base
|
|
bien sûr mais ça commence déjà à bien
|
|
ressembler à ce qu'on veut et donc pour
|
|
le coup je vais simplement venir le
|
|
mettre dans un nouveau paragraphe
|
|
je recharge et là je vois bien que j'aie
|
|
le résultat escompté ok on continue donc
|
|
avec cette partie si ici on pourrait
|
|
mettre ça à chaque fois dans des petits
|
|
blocs qui se suivent bien voilà qui
|
|
présente bien et c'est ce qu'on va faire
|
|
maintenant du coup alors pour ça mais ça
|
|
va toujours être un peu la même logique
|
|
quand j'ai une section ici et pour
|
|
chaque section bien j'ai indique une
|
|
petite boîte qui me permet voilà deux
|
|
groupes et mon contenu avec à chaque
|
|
fois un h2 et un paragraphe est donc
|
|
allons-y pour le classe on va mettre
|
|
contenu voilà pour la classe
|
|
j'enregistre et je suis parti pour
|
|
styliser un peu ça
|
|
alors je vais juste un petit peu de
|
|
place pour que vous voyez vraiment bien
|
|
et du coup
|
|
je vais mettre point contenu et je vais
|
|
commencer à styliser alors ici je
|
|
pourrais mettre une image par exemple
|
|
pour servir de fonds ici alors pour ça
|
|
je vais aller par exemple
|
|
sur pick savez
|
|
je vais chercher une image abstraite
|
|
pourquoi pas quelque chose qui pourrait
|
|
donner
|
|
voilà on va prendre celle ci
|
|
et je vais enregistrer l'image dans le
|
|
même de ces bien sûr que mon site web je
|
|
l'avais nomme au passage vous l'appelez
|
|
font point jpeg et j'enregistre
|
|
alors quand je viens ici du coup
|
|
maintenant je peux lui dire que le
|
|
background
|
|
emails
|
|
et bien se situe à l'eurl font point
|
|
jpeg puisqu'il se trouve encore une fois
|
|
ici dans le même dossier alors c'est pas
|
|
spécialement une bonne idée tout mettre
|
|
dans le même dossier ici c'est vraiment
|
|
pour la démo mais à terme c'est plutôt
|
|
bien de l'organiser sous forme de sous
|
|
dossier et c'est donc du coup
|
|
je recharge
|
|
et je vois bien ici que le fonds a été
|
|
modifiée que j'ai bien cette image c est
|
|
donc j'ai l'image qui me sert de fond
|
|
pour mon bloc je vais maintenant stylisé
|
|
le reste donc jeu au final un contenu et
|
|
1h 2 dans contenu et un contenu toujours
|
|
et un paragraphe dans le contenu et bien
|
|
sûr si je veux utiliser les blocs je
|
|
peux aussi stylisé les divans contenu
|
|
divin
|
|
je vais commencer par utiliser les div
|
|
et ici ce que je pourrais mettre par
|
|
exemple c'est à fond de couleurs donc je
|
|
pourrais mettre un background color et
|
|
je pourrais mettre du bleu par exemple
|
|
je recharge et je vois ici qu'on est
|
|
passé en bleu alors c'est pas encore
|
|
génial je pourrais mettre nu yves de
|
|
80%
|
|
déjà mieux
|
|
je pourrais mettre aussi un aligne
|
|
center
|
|
et je pourrais mettre également
|
|
un bord de radius
|
|
de 30 pixels
|
|
s'est déjà mis
|
|
je pourrais aussi rajouter margin right
|
|
auto mavs du nect auto pour les avoir au
|
|
centre de mon affichage
|
|
alors ici c'est une petite précision
|
|
mais on commence souvent par la version
|
|
mobile du site c'est à dire qu'après
|
|
quand je vais l'agrandir par exemple là
|
|
c'est un petit peu trop grand à la voilà
|
|
ici ça pourrait se mettre côte à côte et
|
|
bien on verra ça plus tard dans cette
|
|
vidéo et c'est ce qu'on appelle
|
|
responsive web design ou webdesign
|
|
adaptatif en français je vais d'ailleurs
|
|
utilisé le même bleu que celui utilisé
|
|
plus haut
|
|
voilà on n'oublions pas le petit
|
|
croisions
|
|
c'est plus sympa et à l'intérieur deux
|
|
contenus bien je vais plutôt créer un
|
|
planning
|
|
tata de 30 pixels pareil
|
|
pour le sol pareil pour en dessous
|
|
ce qui me permet d'avoir ici encore un
|
|
meilleur affichage
|
|
je pourrais aussi rajouter un bord à ces
|
|
blocs et pour ça je vais utiliser la
|
|
propriété border et je voulais lui dire
|
|
que je veux un bord de trois pixels
|
|
solide et blanc
|
|
j'enregistre
|
|
et on voit déjà que ça donne assez bien
|
|
je peux aussi rajouter une petite marine
|
|
top pourrait se passer un petit peu ces
|
|
blocs là
|
|
enfin je passe la couleur en blanc
|
|
je recharge
|
|
et j'ai déjà une bonne base je pense que
|
|
voilà pour la démo c'est déjà pas mal
|
|
donc je vais pas spécialement utilisé au
|
|
final le h2 et le paragraphe que j'avais
|
|
créé à la base mais bon on aurait très
|
|
bien pu aller encore plus loin bien sûr
|
|
j'essaye de faire des choix de rester
|
|
compréhensible par rapport à la vidéo
|
|
pour vraiment expliquer le process en
|
|
son entier
|
|
enfin je voudrais maintenant m'occuper
|
|
d'inscrits vevo la newsletter ici
|
|
que je vais simplement aligné
|
|
et donc je vais aussi donner une classe
|
|
à la section
|
|
je l'appelais newsletters
|
|
je vais l'ajouter dans mon css 2.1
|
|
newsletter pour dire que c'est une
|
|
classe et je vais également la ligne
|
|
ainsi que mettre un petit peu ning top
|
|
de 30 pixels et un petit padding bottom
|
|
2,30 pixels
|
|
et la chaude donne plutôt bien reçue par
|
|
le site web du siècle mais c'est
|
|
vraiment déjà pour la démo de voir
|
|
comment vous pouvez mettre en forme
|
|
votre contenu avec le css
|
|
alors bien sûr maintenant et encore une
|
|
chose qu'on n'a pas ce que ça nous ont
|
|
mis en forme ici c'est le menu qui est
|
|
ici et maintenant intéressons nous au
|
|
menu un comme on l'a dit alors le menu
|
|
est bien pour l'instant on a une liste
|
|
et l'idée notre liste bien c'est de la
|
|
faire plutôt ressembler à un menu qui
|
|
est donc pour ça et bien pareil hein je
|
|
vais utiliser mon css et qu'est ce que
|
|
je veux venir modifier ici bien c'est
|
|
mon avis c'est mon ul et c'est moins
|
|
liessies mondiale alors pour ça eh bien
|
|
je vais continuer
|
|
et ici je vais lui dire que mon avis
|
|
et plus précisément mon modèle au niveau
|
|
de son liste style taille aps mais un
|
|
jeu lui dire 'non' je ne veux pas en
|
|
fait un style au niveau de ces au niveau
|
|
de cette puce qui sont là donc je
|
|
recharge et je vois qu'elle disparaisse
|
|
ça c'est déjà nettement mieux donc voilà
|
|
et maintenant qu'est ce que je vais bien
|
|
je veut modifier le ahly et pour ça donc
|
|
je vais reprendre nav elle y est je vais
|
|
venir aussi modifié je vais lui dire au
|
|
niveau du display que je veux en inline
|
|
alors qu'est ce que c'est que le display
|
|
in line et bien vous allez découvrir ici
|
|
quand je vais leur charge et hop vous
|
|
voyez qu'ils viennent maintenant à la
|
|
suite les uns des autres et ça c'est le
|
|
contraire exactement le contraire d'un
|
|
disent les blocs un disque les blogs
|
|
c'est quoi si je recharge saison mais
|
|
l'élément éléments au final va occuper
|
|
un blog et le deuxième bloc va se battre
|
|
en dessous etc etc le display and line
|
|
celle inverse hop on reste sur la même
|
|
ligne et donc voilà ici je recharge et
|
|
tous mes biens les uns à la suite des
|
|
autres je peux je peins ligne et
|
|
à droite
|
|
voilà
|
|
où au centre ça donnera peut-être mieux
|
|
on est bon
|
|
et je m'occupe ensuite des liens
|
|
présents dans la balise nav
|
|
donc
|
|
je vais pas mettre de text decoration je
|
|
vais enlever le soulignement je vais
|
|
venir mettre une fonsai un peu plus
|
|
élevé 1.5 em par exemple
|
|
et je peux aussi l'utiliser fond de
|
|
variantes ça pour modifier l'affichage
|
|
par exemple small caps va me permettre
|
|
de le passer en petit majuscule
|
|
c'est déjà nettement mieux ensuite pour
|
|
la couleur je vais mettre du gris on est
|
|
bon pour notre petit mieux alors c'est
|
|
vraiment une approche très très très
|
|
très basique du menu évidemment parce
|
|
que ce petit menu si j'avais voilà trois
|
|
à quatre pages il serait vite beaucoup
|
|
trop petit pour afficher sur une version
|
|
mobile donc généralement ce qu'on fait
|
|
c'est qu'on est un petit bouton qu'on
|
|
clique et quand on clique on déroule
|
|
voilà par exemple un menu spécifique
|
|
pour inverser mobile dans cette vidéo on
|
|
va pas le faire parce que j'ai vraiment
|
|
envie de centrer la vidéo un maximum
|
|
pour voile en une bonne heure on puisse
|
|
découvrir un petit peu tout ça mais
|
|
n'empêche que on pourrait partir là
|
|
dessus évidemment sur la version
|
|
ordinateur etc là ça poserait moins de
|
|
problèmes on peut aussi mettre une
|
|
petite marge
|
|
pour séparer un peu mieux les éléments
|
|
dans le menu enfin il existe aussi des
|
|
petits modificateurs qui sont par
|
|
exemple ouvert si on rajoute deux points
|
|
heures au dessus par exemple d'une
|
|
balise les uns ça marche à peu près sur
|
|
tout et bien ça va me permettre
|
|
d'appliquer un style à ce moment précis
|
|
et donc c'est j'utilise à ouvrir ici je
|
|
peux lui dire que quand on passe dessus
|
|
on revient en couleur black voilà par
|
|
exemple et on revient aussi par exemple
|
|
à une text decoration
|
|
souligné
|
|
je recharge
|
|
et on voit que ça fonctionne bien ok
|
|
alors pour l'instant votre design il
|
|
commence à être un petit peu aboutis
|
|
mais comme vous le savez bien maintenant
|
|
un site web on va l'utiliser autant sur
|
|
smartphones que sur tablette que sur
|
|
ordinateur et pour ça du coup il est
|
|
nécessaire que le style s'adapte en
|
|
fonction de la taille d'écran sur
|
|
laquelle vous vous trouvez et bien ça
|
|
c'est ce qu'on appelle le responsive
|
|
webdesign et il ya plusieurs techniques
|
|
plusieurs façons de mettre en place on
|
|
va en voir deux ensemble la première qui
|
|
est vraiment quelque chose de base qui
|
|
sont les médias qui reese et après je
|
|
vous parlerai un petit peu d'effets l'ex
|
|
boxe ok donc notre site si c'est une
|
|
version mobile ce serait déjà pas si mal
|
|
en soi pour si on est vraiment loin
|
|
d'avoir fait le tour mais par contre si
|
|
on augmente la taille d'envoi que sur
|
|
écran d'ordinateur bah ça donnerait pas
|
|
aussi bien même loin de là hein parce
|
|
que ben voilà le logo ici par exemple
|
|
beaucoup trop grand et ses blocs là
|
|
aussi on les verrait plus côte-à-côte
|
|
par exemple et donc ça c'est ce qu'on va
|
|
appeler le reste on site web design
|
|
c'est à dire le design web adaptatif et
|
|
je voulais vous en parlez aussi pour
|
|
bien clôturer un petit peu ce petit tour
|
|
d'horizon
|
|
et donc il ya plusieurs moyens plusieurs
|
|
façons de faire ça et c'est plusieurs
|
|
techno qui peuvent s'imbriquer et lune
|
|
que vous retrouverez très souvent et
|
|
bien ce sont les media queries les media
|
|
queries qu'est ce que c'est exactement
|
|
bien ça va permettre de reprendre la
|
|
taille de votre surface d'affichage donc
|
|
ici on sera sur un écran de bureau donc
|
|
il sera beaucoup plus grand et de
|
|
modifier votre style on fonctions c'est
|
|
à dire qu'ici si je viens sur mon index
|
|
point html eh bien on va commencer
|
|
d'abord par ajouter une balise dans le
|
|
ed pour définir le niveau de zoom par
|
|
défaut est utilisée ensuite à dans nos
|
|
médias crise donc on va rajouter une
|
|
balise meta on va lui dire que le nom et
|
|
bien c'est viewport ça et que le contenu
|
|
est bien c'est quoi ces
|
|
vives
|
|
qui sera équivalent à
|
|
la largeur de l'écran
|
|
et que initials qu'il
|
|
est égal à
|
|
voilà
|
|
je note ça et ensuite quand c'est fait
|
|
et bien je vais utiliser mes médias que
|
|
oui et comment ça s'utilise ou juste une
|
|
médiatrice et bien au final c'est
|
|
vraiment pas si compliqué que ça ce que
|
|
je vais faire je vais revenir dans ses
|
|
assassins voilà un petit peu plus loin
|
|
encore ajouté un petit peu de place pour
|
|
bien écrire et ici je vais lui dire at
|
|
médias
|
|
voilà on faire une petite démo pour que
|
|
vous compreniez bien et je vais dire que
|
|
le média que je veux viser bien c'est
|
|
l'écran parce que on peut aussi utiliser
|
|
des médias crise etc ou du css sur pour
|
|
faire de la mise en page papier par
|
|
exemple qu'on vous créer une impression
|
|
et donc du coup ce média screen et bien
|
|
qu'est ce que je vais faire je vais dire
|
|
que la taille minimum donc entre
|
|
parenthèse ici elle est minimum weave
|
|
voilà ici
|
|
doit être 2
|
|
768 pixels qui est un ce qu'on appelle
|
|
un break paint c'est-à-dire un point de
|
|
rupture et 768 pixels une fois qu'on
|
|
dépasse a généralement on est sur
|
|
tablette ou sur écran d'ordinateur en
|
|
dessous on est plus souvent sur un écran
|
|
de smartphone et bien du coup à ce
|
|
niveau si on va faire une petite rupture
|
|
et modifier le style est donc pour ça je
|
|
vais simplement ouvrir encore une fois
|
|
les accolades et entre et bien je peux
|
|
rajouter du css qui s'appliquera dès que
|
|
la taille de l'écran dépasse
|
|
768 pixels et donc du coup par exemple
|
|
ici je pourrais lui dire par exemple
|
|
alors fait une petite démo main que la
|
|
navigation display note que je n'affiche
|
|
pas en fait la navigation
|
|
je recharge et je vois effectivement ici
|
|
que quand je passe sur un écran plus
|
|
grand la navigation a disparu je pense
|
|
que vous le voyez bien ici donc du coup
|
|
ici je vais l'enlever parce que ce qu'on
|
|
a fait là n'a pas vraiment beaucoup de
|
|
sens dans la pratique mais vous
|
|
commencez du coup à comprendre comment
|
|
on pourrait afficher ou cacher un menu
|
|
mobile et un menu des stops par exemple
|
|
1 c'est sur le même principe là c'était
|
|
vraiment pour la démo mais nous ce qu'on
|
|
veut c'est pas ça donc je recharge c'est
|
|
que cette image là quand on passe
|
|
voilà ici sur un écran plus grand et
|
|
bien qu'elle s'affiche en plus petit par
|
|
exemple et pour ça bien qu'est ce que je
|
|
vais faire à tout simplement eh bien je
|
|
vais reprendre la classe sur laquelle on
|
|
a greffé notre logo donc il si je les
|
|
appelais logo principal je vais
|
|
reprendre cette classe point nouveau
|
|
principal
|
|
et
|
|
je vais simplement récré du css comme
|
|
normalement et donc ici je vais lui dire
|
|
que sa largeur ça doit être de 30 %
|
|
j'enregistre je recharge et je vois ici
|
|
que quand je suis
|
|
sur un grand affichage bien au maximum
|
|
mon logo va prendre 30% de la fenêtre ce
|
|
qui me permet d'avoir quelque chose de
|
|
beaucoup plus peur de beaucoup plus
|
|
présentable sur grand écran donc ici si
|
|
je diminue hop là vous voyez on est
|
|
revenue à la taille mobile donc un
|
|
principe à comprendre avec ça et bien
|
|
ainsi que du coup en fonction de la
|
|
taille de notre affichage et bien on
|
|
peut faire varier le css du coup vous
|
|
commencez à comprendre comment
|
|
fonctionne le design adaptatif et la
|
|
deuxième est bien c'est qu'au final on
|
|
va développer un même site pour portable
|
|
et pour
|
|
grand écran on va dire ça comme ça mais
|
|
qu' on va appliquer du coût des
|
|
variations en fonction et donc souvent
|
|
le conseil qu'on donne c'est ce qu'on
|
|
appelle le mobileye first c'est de
|
|
commencer ici par la version mobile de
|
|
votre site web et ensuite de commencer à
|
|
l'adapter en grand écran parce qu'il
|
|
faut bien commencer quelque part et donc
|
|
plutôt fonctionné dans ce sens là il ya
|
|
une tonne de raisons là dessous mais en
|
|
tout cas c'est vraiment ce qu'il faut
|
|
comprendre de la même façon pourrait
|
|
modifier html et css qui sont ici
|
|
évidemment et donc pour ça dans la même
|
|
optique je vais reprendre le même
|
|
breakpoint donc je vais continuer à la
|
|
suite et je vais lui dire voilà on va
|
|
reprendre un petit peu ces éléments là
|
|
qui étaient du coup contenu est contenue
|
|
div et je vais les remodifier donc voilà
|
|
je vais revenir ici avec point contenu
|
|
on verra ce qu'on mettra dedans et point
|
|
contenu div
|
|
là aussi on verra ce qu on m a dedans et
|
|
du coup je vais commencer mon adaptation
|
|
et cette modification que nous allons
|
|
faire bien justement elle va me
|
|
permettre d'introduire encore quelque
|
|
chose d'important que sont les flex box
|
|
les flex boxe c'est quoi et bien c'est
|
|
une autre façon de gérer le display qui
|
|
se prête plutôt bien au design adaptatif
|
|
et qui est apparue voilà du site 2011
|
|
2012 et les années suivantes et qui
|
|
permet justement de bien mettre en forme
|
|
ce genre d'éléments donc du co pour ça
|
|
je vais aller dans le contenu et je vais
|
|
lui dire donc mon contenu c'est vraiment
|
|
le bloc ici qui contient mais de boîte
|
|
mais de dives et je vais changer son
|
|
display alors si on avait déjà vu ni
|
|
line et bloque ici on va utiliser flex
|
|
display flex me permet du coup de créer
|
|
un espace qui se pourra s'agencer
|
|
facilement en adaptatif on va expliquer
|
|
ça comme ça vous allez comprendre je
|
|
fais à rechargement et je vois du coup
|
|
que les boîtes sont venus se mettre à la
|
|
suite si j'en avais créer une troisième
|
|
voie là je vais venir sur l'île d'aix
|
|
pointe t n l et je vais venir on créer
|
|
une troisième voie là ici ça me créerait
|
|
en somme une troisième colonne
|
|
voilà vous voyez bien ici comment les
|
|
choses se mettent en place
|
|
donc moi je vais annuler ça mais je vais
|
|
garder du coup mais deux éléments
|
|
maintenant ces deux éléments et ces deux
|
|
éléments qu'est-ce que j'ai besoin de
|
|
faire maintenant et bien j'ai besoin de
|
|
diminuer un petit peu leur taille déjà
|
|
beaucoup trop grand ici donc je vais
|
|
venir encore une fois dans le style et
|
|
je veux dire que pour les div voilà la
|
|
rive et bien qu'on avait fixé à 81% ou
|
|
quelque chose comme ça ici en eau voilà
|
|
80% je vais la redéfinir ici à 35% alors
|
|
ce qui me fait penser justement que ces
|
|
tirs bien l'origine du nom du css les
|
|
css en français feuilles de style en
|
|
cascade signifie que la dernière
|
|
modification sera celle qui va faire
|
|
fois on va dire au niveau de l'ordre de
|
|
votre motif donc par exemple ici si je
|
|
rajoute et oui végal 45 juste en dessous
|
|
et bien c'est le 45 qui seraient pris
|
|
qu'apporte ici je enregistre et je
|
|
recherche et là on voit bien que ça se
|
|
met comme on le voulait et que ça
|
|
fonctionne très bien par contre j'ai pas
|
|
utiliser tout le potentiel de flex boxe
|
|
ici j'ai utilisé des mages automatique
|
|
il s'est au niveau
|
|
de mes divas et donc du coup si j'enlève
|
|
ses marges automatique qui sont ici
|
|
voilà je recharge là ça vient se
|
|
recoller normalement et bien flex box
|
|
nous permet de gérer ça également c'est
|
|
à dire que si je viens maintenant sur
|
|
mon contenu voilà donc qui en finale le
|
|
conteneur le bloc qui contient mais
|
|
boîte flexible et bien je peux lui dire
|
|
voilà que je veut modifier le contenu la
|
|
façon en fait dont elles s'alignent et
|
|
je peux lui dié voilà que je veux de
|
|
l'espace autour services et du coup je
|
|
recharge et là ça se met correctement
|
|
donc ça montre un peu la puissance de
|
|
flex boxe c'est à dire que quand vous
|
|
mettez pour un conteneur voilà ici on a
|
|
mis cette partie contenu voilà en tant
|
|
qu' on dire ça souvent vous retrouverez
|
|
le mot containers pour la classe et bien
|
|
à l'intérieur toutes les div vous leur
|
|
dites maintenant de se disposer d'une
|
|
certaine façon et c'est ça que flex doc
|
|
sa porte donc c'est quelque chose
|
|
d'important vraiment moyen de creuser
|
|
tous a énormément à flex boxe je pense
|
|
que je pourrais faire une très grande
|
|
vidéo dessus mais en tout cas
|
|
vous en comprenait le principe est là on
|
|
a vu quand même deux éléments très
|
|
importants tout cas on les a survolé
|
|
mais vous savez maintenant ce que c'est
|
|
mais attention du coup en faisant comme
|
|
ça et bien comme on a enlevé les marges
|
|
automatique eh bien vous voyez que quand
|
|
on revient sur une taille plus petite
|
|
et bien du coup là on a plus ça qui est
|
|
centrée donc y aurait plusieurs façons
|
|
de le faire la première se serait
|
|
modifié un peu l'ensemble pour tout
|
|
faire tourner sur facebook ça serait
|
|
vraiment possible ça serait honnêtement
|
|
la meilleure solution mais on va dire
|
|
que vraiment pour la démo est pour vous
|
|
montrer aussi vraiment le principe des
|
|
médias crise on pourrait utiliser ici
|
|
une deuxième média qui risque pour
|
|
rajouter les marges dès qu'on est sur un
|
|
écran plus petit que
|
|
768 pixels et donc ça fonctionnerait un
|
|
petit peu de la même façon je ferais je
|
|
ferai un autre média tu dirais que c'est
|
|
un média écrans
|
|
et je lui dirai du coup que voilà pour
|
|
la taille maximum and max bill
|
|
qui serait du coup de 767 pixels
|
|
voilà et bien ce que je lui dirai c'est
|
|
que pour
|
|
le contenu ici et pour les div du
|
|
contenu et bien du coup pour les martin
|
|
on repasse en moto voilà ça pourrait
|
|
aussi très bien ces crises comme ça pour
|
|
ce cas là je recharge et là on voit du
|
|
coup que ça fonctionnaires tu pourrais
|
|
encore juste rajouté une petite marge
|
|
et 6 2 5 pixels pour assurer une petite
|
|
différence est comme ça on voit que
|
|
quand on est sur un petit écran bien on
|
|
est sur ce système là et que quand on
|
|
part sur un grand écran on est dans ce
|
|
système là encore une fois on aurait
|
|
vraiment pu tout faire ici avec flex box
|
|
plutôt qu'avec les mardis une auto etc
|
|
mais c'est pour vraiment vous montre un
|
|
petit peu toutes les possibilités dites
|
|
vous que le css html il a progressé là
|
|
évoluent sur des années entières de 10
|
|
zen d'année et que donc vous retrouverez
|
|
pas mal de façon de coder c'est pour ça
|
|
que je voulais vraiment vous présenter
|
|
ici un petit peu ce que vous retrouverez
|
|
y est je veux dire de base dans la
|
|
pratique
|
|
pour flex box vous avez vraiment voilà
|
|
ici par exemple sur le site cs strict ce
|
|
point comme une idée de toutes les
|
|
possibilités ici que vous pouvez avoir
|
|
avec cette méthode là c'est à dire qu'il
|
|
ya vraiment énormément de choses que
|
|
vous pouvez faire avec
|
|
ok donc voilà pour cette démonstration
|
|
de base alors si vous souhaitez mettre
|
|
votre site en ligne je vais vous mettre
|
|
un petit lien sur mon tutoriel sur
|
|
l'hébergement d'un site web il vous
|
|
suffira de suivre pour bien être votre
|
|
site en ligne et pour la suite et bien
|
|
découvrons une petite sélection de
|
|
ressources sur lesquelles vous pourrez
|
|
continuer à progresser alors si vous
|
|
souhaitez continuer bien dans les
|
|
chaînes youtube française qu'est ce que
|
|
vous pourrez trouver bien vous pourrez
|
|
retrouver graphique à quai une référence
|
|
absolue dans le domaine clos depuis des
|
|
années et qui fait vraiment de chouettes
|
|
vidéo vous pouvez aussi retrouver from
|
|
scratch qui est à serris mans aussi un
|
|
peu comme moi mais qui présente plein
|
|
plein plein de vidéos intéressantes sur
|
|
pas mal de sujets en développement web
|
|
vous retrouvez aussi benjamin code qui
|
|
vous présente des vidéos voilà aussi
|
|
thématique sur le sujet est aussi voilà
|
|
beaucoup de vidéos intéressantes dans la
|
|
thématique vous retrouvez aussi grave n
|
|
qui est aussi à mon avis plus à
|
|
présenter et qui vous propose plein de
|
|
choses intéressantes dans le domaine est
|
|
forcément un petit peu d'auto promotion
|
|
vous retrouvez aussi ma chaîne qui
|
|
aborde pas mal de sujets sur le
|
|
développement web et je vous recommande
|
|
particulièrement la vidéo de 75 techno l
|
|
expliquer simplement si vous voulez vous
|
|
y retrouvez aussi un petit peu dans le
|
|
sujet dans si vous voulez vous y
|
|
retrouver dans le vaste monde qu'est le
|
|
développement web et toutes ces
|
|
technologies s'appelle pas les
|
|
techniques vous allez utiliser tout de
|
|
suite tout de suite mais ça peut vous
|
|
aider a déjà vingt un très bon aperçu
|
|
ensuite dans les sites pour avoir des
|
|
formations peut-être plus en détail plus
|
|
suivis et c est bien vous retrouver hugh
|
|
des mises sur lequel vous et toujours
|
|
énormément de formation intéressante
|
|
vous avez open classroom et vous
|
|
retrouvez aussi fricote kent qui est
|
|
gratuit mais qui est en anglais mais qui
|
|
aborde énormément de sujets et qui est
|
|
vraiment une des très grosses références
|
|
pour apprendre le développement et donc
|
|
voilà pour ce que j'avais à vous dire
|
|
aujourd'hui alors n'oubliez pas on est
|
|
vraiment ici au tout début d'un chemin
|
|
le développement web est un monde
|
|
vraiment très riche avec vraiment plein
|
|
de choses à voir enfin sur html css et
|
|
que c'est à d'ailleurs maintenant que
|
|
cette vidéo est sortie fait moi ça va
|
|
dans les commentaires c'est une vidéo
|
|
avec un design plus avancée que ses
|
|
draps vous intéresse ici j'ai vraiment
|
|
et ça c'est important le comprendre j'ai
|
|
vraiment fait en sorte de garder les
|
|
choses simples au maximum et j'ai aussi
|
|
fait évoluer le site etc de façon à
|
|
faire venir petit à petit tout plein de
|
|
notions donc voilà effectivement ce que
|
|
j'avais à vous dire aujourd'hui sur le
|
|
sujet gars vraiment bien en tête que
|
|
c'est bien sûr une vidéo d'initié
|
|
n'oubliez pas que vous pouvez avoir 7 %
|
|
de réduction sur votre hébergement aux
|
|
stinger avec le code bertrand encore
|
|
merci à eux d'ailleurs de m'avoir aidé à
|
|
vous aider et surtout et bien si vous
|
|
aimez mon contenu n'hésitez pas à vous
|
|
abonner à activer les notifications avec
|
|
la petite cloche pour ne pas manquer
|
|
mais prochaine vidéo je vous propose
|
|
vraiment à chaque fois des vidéos qui
|
|
vous permettent d'en apprendre plus sur
|
|
l'informatique en général sur le
|
|
développement etc et de récupérer la
|
|
puissance sur le numérique et moi
|
|
j'espère avoir si vous aidez on se
|
|
retrouve vraiment très bientôt et d'ici
|
|
là portez vous bien
|