Ela_Back/Translated_Files/ytubes_Tnym_6qCcNE.txt

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