Developpeurs web/mobile au cameroun -Debutants a pro

Informations de contact, plan et itinéraire, formulaire de contact, heures d'ouverture, services, évaluations, photos, vidéos et annonces de Developpeurs web/mobile au cameroun -Debutants a pro, Site internet éducatif, Yaoundé.

Fonctionnement normal

02/09/2023

code source disponible

02/09/2023

barre de navigation responsive avec espace superieur deroulant et hamburger menu pour version mobile...
impressions et demande de code en commentaires

Photos from Developpeurs web/mobile au cameroun -Debutants a pro's post 27/07/2023

Photos from Developpeurs web/mobile au cameroun -Debutants a pro's post 27/07/2023

Photos from Developpeurs web/mobile au cameroun -Debutants a pro's post 20/07/2023

validation d un formulaire:principe de base.realisé en html,css,js.

Photos from Developpeurs web/mobile au cameroun -Debutants a pro's post 21/06/2023

design de texte d'entête en html et css...

02/05/2023

le modele de boite et la propriété box-sizing

avant d aborder le positionnement d elements html sur une page web il vaudrait mieux se faire une image precise de la representation des elements html par les navigateurs.

chaque element sur une page web est assimilable a une boite.cette boite possede les propriétés suivantes
-width représentant la largeur de l element

-height representant la hauteur de l element

- border(bordures) representant les bordures de la boite contenant en son centre le contenu de l element html.

-padding(bordure interne) representant les marges internes de l element html c est a dire l espace entre la bordure et le contenu de l element html.

-margin(marge exterieure) representant les marges externes de l element html c est a dire l espace entre la bordure de l element html et la bordure d un element voisin ou parent.

chacune de ces propriétés est utilisable en css pour modifier l apparence de l element.
generalement margin est utilisé pour creer de l espace entre les elements voisins ou parent.
padding quant a lui sert a "aerer" un element en ajoutant des espaces entre le contenu et la bordure.
border comme son noms l indique modifie les bordures /delimitations physiques de l elements.
width et height definissent la largeur et la hauteur de l element.
margin,padding et border peuvent s utiliser avec les suffixes -top,-left,-right,-bottom si l on souhaite modifier un côté precis.border-top par exemple modifie la bordure du côté superieur,margin-left modifie la marge extérieure gauche et padding-bottom modifiera la marge interne du côté bas de l element.
les valeurs seront soit absolues(pixel..) soit relatives(%,vw ,vh,rem,em) et il est possible de composer ces propriétés.
border par exemple combine 3 valeurs et se presente generalement sous la forme
border :dimension type couleur
pour une bordure de 2pixels en trait continu de couleur noire on peut donc dire
border:1px solid black ....

les propriétés width et height meritent un peu plus d attention car elles dependent d une autre propriété qui est box-sizing.
box-sizing permet de definir comment la hauteur et la largeur des elements sera calculée.elle prends 2 valeurs :border-box et content-box.content-box etant la valeur par defaut.
lorsque box-sizing vaut content-box les proprietes width et height definissent la taille du contenu.pour trouver la taille exacte de l element il faudra donc ajouter a la valeur de width/height ,les tailles des bordures gauche et droite et les tailles des marges internes gauche et droite si existantes.
c est extrêmement important et a garder a l esprit car dans ce cas de figure si l on souhaite avoir un bloc de 200px*200px par exemple composé de bordure disons de 2px et padding 10px il faudra donner pour valeur(200px-( (2px*2)+(10px*2) ) = 176px aux propriétés width et height. non 200px au risque d avoir un layout plus grand car si l on assigne a width et height la valeur 200px on aura un element de taille totale 224px*224px en tenant compte des dimensions des bordures et marge internes gauche et droite.

lorsque box-sizing par contre vaut border-box,les propriétés width et height definissent les dimensions exactes de l element en prenant en compte les bordures et les marges internes.la largeur du contenu de l element est calculée automatiquement en soustrayant les dimensions des bordures et marges internes ,dans le but d avoir un element de dimensions totales egalent aux valeurs specifiées a width/height.
ainsi pour avoir un bloc de 200px*200px avec une bordure de 2px et des marges internes de 10px ,il n y a plus de calcul a faire car le navigateur en comprenant box-sizing:border-box sait que l element a une largeur totale de 200px et calcule automatiquement la taille du contenu de telle sorte que contenu+bordure+marges internes fassent 200px ..cool ou bien?
une bonne pratique est de toujours commencer par definir cette propriété dans vos codes css.
*,*:after,*:before{ box-sizing:border-box;}

ca vous evitera des mesaventures avec les tailles de vos elements html(elements qui prennent plus de place qu ils ne devraient dans le design etc...)..

n hesitez pas a me contacter pour plus d eclaircissements ou corrections.les posts prochains porteront sur le positionnement en css.c est l un des themes les plus perturbants pour les etudiants,comme d habitude nous allons vulgariser cette question.
partagez et likez ce post si vous le trouvez
instructif et rdv au suivant.

-sizing

Photos from Developpeurs web/mobile au cameroun -Debutants a pro's post 13/04/2023

plutôt heureux de la progression des étudiants.....projet réalisé entièrement par l un d'eux .une note pour les encourager.

25/02/2023

Mention spéciale aux personnes qui ont récemment interagi avec moi !

Costa Titan, Ashley Dua, Jems'h Marcel, Vuluka Mwila Joseph, Hery Ny Heriniaina Famenontsoa, Rockets Monzar, Sergino Fnh

09/02/2023

bonjour mes chers Devs,j aimerais que chacun commente en disant le tuto qu il a le plus aimé et celui qu il attends (html/css/js/php/sql/node.js/java/python).

Photos from Developpeurs web/mobile au cameroun -Debutants a pro's post 21/01/2023

devenir developpeur web

partie2:post #3

ciblage d éléments d une page web grace au CSS.

le CSS nous permet d apporter du style a nos pages web grace a un ensemble de propriétés precises comme "color" et "font-size" qui permettent respectivement de modifier la couleur du texte et la taille de police d elements html.
avant de penser aux propriétés de style de css il faut cependant deja savoir cibler/choisir les elements html de notre page sur lesquels nous souhaitons apporter des changements.
le css nous fournit des regles pour cibler les elements html.en general il suffit de mentionner le noms de l element que l on cible.
si l on souhaite modifier les liens par exemple,il suffit d ecrire:
a{ propriété css a modifier...}
ou encore s il s agit des elements images de notre page que l on souhaite modifier ,il suffit d ecrire en css:
img{... propriété css a modifier...}
ainsi toutes les images ou liens de notre page verront leurs style etre mis a jour selon les valeurs des propriétés css se trouvant entres les "{ }".
cependant il est tres rare que l on souhaite donner un meme style a tous les elements de notre page.en general on veut avoir une image plus grande ou plus petite que les autres en fonctions de sa position dans la page web.le css nous permet de cibler avec plus de precisions les elements de notre page web grace a une syntaxe de ciblage particuliere.
pour cibler par exemple uniquement les images comprisent dans un bloc div on aura :

div img{ propriete css a modifier...}

il existe plusieurs regles pour vous aider a les voir en action et les assimiler plus facilement,j ai créé cette page web statique

https://anicetnge.github.io

n hesitez pas a la visiter pour en savoir plus sur le ciblage css.

Photos from Developpeurs web/mobile au cameroun -Debutants a pro's post 12/12/2022
Photos from Developpeurs web/mobile au cameroun -Debutants a pro's post 12/12/2022

barre de recherche customisée simple et facile...

Photos from Developpeurs web/mobile au cameroun -Debutants a pro's post 04/12/2022

NE MANQUES PAS LE TUTO DU DIMANCHE!!

comment realiser en HTML et CSS un bloc a bordures inclinées et texte droit..

n hesites pas a me proposer le tutoriel que tu souhaites avoir dimanche prochain en commentaires!!



WEBDEV237

Photos from Developpeurs web/mobile au cameroun -Debutants a pro's post 25/10/2022

le hamburger bouton le plus simple du monde en html & css!!

un bouton hamburger est ce petit bouton generalement situé en haut et a droite de la page web.il est constitué de 3 barres horizontales et ressemble a un hamburger 😋😋😋 d ou son noms :hamburger button.son role est d afficher ou de masquer les liens de la navigation lorsque l utilisateur clique dessus.
il existe plusieurs d
façons de le concevoir,certains devs utilisent une images,d autre des pseudo-elements CSS.dans ce tutoriel je vous presente la version la plus simplifiée et originale.le click sur le bouton pourra etre géré en javascript.


Photos from Developpeurs web/mobile au cameroun -Debutants a pro's post 23/10/2022

Photos from Developpeurs web/mobile au cameroun -Debutants a pro's post 21/10/2022

devenir developpeur web

partie2 - post #2

la cascade des regles CSS

dans le precedent post nous avons decouvert le CSS. cascading stylesheets ou feuilles de style en cascade.nous avons vu qu il existe 3 methodes de lier du css au html.dans l en-tête de la page web (balise head),grace a un fichier externe attaché a la page html grace a la balise link située dans l entête de la page et enfin directement dans les elements html grace a l attribut style.
le css n oblige aucune methode.ce qui signifie que vous etes libres d utiliser la methode que vous voulez. vous pouvez meme les utiliser toutes en meme temps et c est la qu intervient la cascade contenu dans CSS.
accrochez vous !!!
css en fonction de la methode utilisée definit des priorités,du favoritisme.
c est a dire que si par exemple on utilise l element style pour changer la couleur de texte du titre en bleu et ensuite on change egalement la couleur de texte en rouge directement dans l element titre grace a l attribut style,on constate que le titre sur la page web sera rouge.pourquoi? eh bien parce que le style definit directement dans l element html a plus d importance que le style defini dans l en-tête de la page web.
les regles css sont appliquées a la page web en fonction de regles de priorité.

-comprendre la cascade de façon simple.

le navigateur web de maniere simple applique le css du haut vers le bas.des qu il rencontre du style ,peu importe la methode,il l applique a l element et continue son chemin s il rencontre a nouveau du style il l applique a nouveau.jusqu a ce qu il n y ait plus de regles de style a appliquer.la regle de style qui remporte est alors celle qui est appliquée en derniere position.c est pourquoi le style definit dans l element html est prioritaire par rapport aux 2 autres.car le navigateur par ordre applique d abord le style contenu dans la balise style ,ensuite celui attaché grace aux balises link (dans ce cas de figure les balises link sint en dessous de la balise style dans l en-tête de la page) et pour finir il applique le style contenu directement dans les elements html.
on remarque que l application du style "rebondit" de regles en regles comme l eau d une cascade sur les rochers :)) c est une partie de la cascade en css.

la cascade garantie a la derniere règle appliquee d etre favorite mais elle exige egalement que la regle favorite soit la plus precise et ciblée.si vous ciblez par exemple un element a partir de son noms et ciblez egalement le meme element a partir de son attribut id ,les regles specifiées a partir du ciblage grace a l id seront appliquées.pourquoi? parce qu utiliser l id est plus precis et ciblé qu utiliser un noms d element.c est comme si vous entrez dans une salle de classe pour designer un eleve particulier.si vous utilisez son noms l eleve precis se levera mais si vous demandez aux eleves de se lever ,tous se leveront.utilisez son noms(id) est donc plus precis qu utilisez le groupe auquel il appartient (noms de l element).
la cascade definit ainsi aussi un ordre de priorité en fonction de la precision du ciblage de l element a qui appliquer des règles de style.

comme on le dit tres souvent il n y a pas de regles sans exception.c est ainsi qu il existe en css l indication " !important " , qui se place juste avant le point-virgule d un style pour indiquer que ce style est tres important et doit recevoir la priorite maximale. !important brise toute la chaine en donnant la plus haute priorité a la regle css qui le precede.

exemple: h1{ color:yellow ! important}
peu importe ou et comment on va changer la couleur du h1 ,ce titre sera toujours jaune car l on indique clairement en css que ce style la a la priorité absolue.

jusqu ici les regles definies dans l element html grace a l attribut style avait la priorité maximale.mais en utilisant l indication !important dans notre balise style par exemple l on constate que la regle contenue dans style est cette fois appliquée.car comme on l a dit !important surclasse tout en terme de priorité.

de facon generale
-les regles avec !important surclassent toutes autres regles de style.
-les regles de style definies dans le html grace a l attribut style,surclasse celles definies dans un fichier css ou dans la balise style située dans l en-tête de la page web.
-plus un ciblage est precis ,plus les regles associées a celui ci predominent
-les regles css qui arrivent plus t**d dans le code predominent.

question de bonnes pratiques,utilisez toujours un fichier css externe .pourquoi? parce que ca rend le code plus lisible.si vous travaillez en equipe le responsable du css aura son fichier de travail a part et celui du html aussi aura son fichier html a part,ca evitera que l un fasse une erreur et ne modifie le code de l autre.en plus de ca le code n est pas répété pour chaque element html comme ce serait le cas si l on ecrivait les regles directement dans les elements html.

ouff 😅 trop de blabla sur cette cascade ...mais ne vous inquietez pas a partir du post prochain on entre dans le vif du sujet.on verra comment cibler les elements html d une page web dans le but de leurs appliquer du style.on verra es regles de ciblages d elements les plus utilisées et comment les utiliser.je vous dis donc a plus t**d pour de nouvelles connaissances.

ABONNES TOI,LIKE ET PARTAGES SURTOUT!


Photos from Developpeurs web/mobile au cameroun -Debutants a pro's post 19/10/2022

devenir developpeur web

partie2 -post #1

introduction au CSS

CSS ou cascading stylesheet (feuilles de style en cascade) est la technologie utilisée pour donner du style et un meilleur visuel a une page web.car si nous avons chargé nos pages web d elements html ,il faut reconnaitre qu une page web uniquement ecrite en html est plutot "moche" et tres peu captivante.c est pourquoi il a fallu creer une technologie pour ameliorer le visuel des pages web:CSS .
appliquer du style a un element est plutot simple .on designe les elements que l on souhaite modifier grace aux noms ou attributs id/class,ou encore sa position par rapport a un autre element parent/voisin,ensuite on leurs donne le style desiré en donnant des valeurs a des propriétés css prédéfinies.
par exemple on pourra dire l element h1 de la page,je veux son texte en bleu..
ou le premier paragraphe dans la section avec l id="section1" augmenter sa taille de texte a 18px (pixels).
ou encore tous les éléments "a"(liens) contenu dans des listes,ne doivent pas etre soulignés.

attention le css defini les propriétés que l on puisse changer sur un element.couleur de texte,bordure,taille,arriere plan,position etc..il faudra donc retenir celles ci ou les plus importantes.

h1{ color:"skyblue"; }

h1 represente l element de la page qu on cible afin de le modifier.toutes les modifications qu on souhaite apporter a cet element sont contenues entre les accollades { }
color represente la propriété css que l on souhaite modifier.ici c est la couleur de texte qu on change en "skyblue" (bleu ciel) en donnant cette valeur a notre propriété color.
les propriétés modifiées sont terminées par des point-virgule ;

structure des regles css

element { propriété : valeur ; }

-comment lier le HTML et CSS ?

il existe 3 façons de relier html et css.
1) on peut ajouter du style a sa page web grace a l element style que l on place dans la balise head de la page web.cf image.
les regles css sont alors inscrites entres les balises ouvrantes et fermantes ....
2) la 2eme methode possible est l utilisation de l attribut style.tous les éléments html possedent cet attribut.les valeurs données a l attribut style d un élément definissent le style que l on souhaite appliquer a cet élément.cf. image
3) la 3eme methode est celle recommandée:l utilisation d un fichier a part qui contiendra le css et sera lié a la page web grace a l element link qu on ajoutera dans l element head de la page web cf. image.
l attribut href indique le chemin vers le fichier contenant le css et l attribut rel signale qu il s agit effectivement d un fichier de style .
creez un fichier renommez le comme vous souhaitez mais terminez le noms par ".css" ,pour creer un fichier de style css.dans l exemple j ai nommé le fichier style.css.

dans le prochain post on verra les regles qui interviennent lors d ajout de css dans une page web.l ordre de priorité dans l application du style et l avantage a utiliser un fichier css séparé pour contenir nos regles css....ainsi que la structure des regles css.
n hesitez pas a commenter et surtout aimez/suivez la page pour ne pas rater les prochains tutos. WEBDEV237

15/10/2022

devenir developpeur web

partie1 - post #10

les attributs id et class

avant d entamer le css,qui nous le rappelons,nous permettra d ajouter du style(couleurs,positionnement,police,dimensions etc..) a nos pages web,il est super important de parler de 2 attributs particuliers des elements HTML.
on rapelle une fois de plus que les attributs d elements html sont des propriétés qui sont placées dans la balise ouvrante

et dont les valeurs permettent d ajouter des spécificités a ces elements.
on a vu l attribut "href" des liens qui nous a permis de renseigner l adresse vers laquelle pointe notre lien,l attribut "src" des images qui indique le chemin vers l image devant etre affichée a la place de la balise image dans la page web...etc...
aujourd'hui je vais vous presenter 2 attributs tres speciaux:
"id" et "class" .
ils sont si speciaux qu ils vous accompagneront dans toute votre carriere de developpeur web et croyez moi vous allez les voir partout car ils sont super importants en CSS et en JAVASCRIPT.
la premiere particularité de "id" et "class" est qu ils sont passe-partout.tous les éléments HTML peuvent prendre un attribut "id" ou "class". a l opposé des attributs comme "src" qui sont specifiques a certains elements comme "img" mais ne vont pas avec les elements titres "h" par exemple.
la deuxieme particularité est leurs fonction.ces attributs servent uniquement a nommer un element ou un groupe d element dans le but de pouvoir les differencier ou les regrouper.
l attribut id (identifiant) comme son noms l indique permet de donner un identifiant unique a un element html.il est comme votre noms ,c est un identifiant pour vous distinguer car il est unique et propre a vous.de la meme façon en attribuant par exemple un id a un element paragraphe d une page
lorem ipsum...
on lui attribue un noms pour le differencier de tous les autres elements paragraphes mais aussi de n importe quel element html de notre page web. 2 elements d une meme page web ne peuvent donc pas avoir une meme valeur d id.grace a cet identifiant on pourra plus precisement cibler cet element en CSS pour lui appliquer du style.

l attribut class(classe), par contre permet de grouper plusieurs elements pour signifier l appartenance a un meme groupe.les elements appartenant au meme groupe possedent la meme valeur d attribut class.ainsi on pourra en css cibler plusieurs elements en meme temps pour leurs appliquer un style commun.ca nous evitera de devoir cibler des elements un par un.on pourra par exemple donner un meme attribut class au titre h1 et au premier paragraphe p et se servir de cet attribut class en css pour changer la couleur de ces 2 elements h1 et p en rouge.

ces 2 attributs sont tres important car nous allons nous en servir tres prochainement en css pour designer les elements de notre page web sur lesquels l on souhaite appliquer un style particulier.
on pourra dire l element avec l id=paragraphe1 je veux son texte en rouge
ou encore les elements appartenant a la classe "police_xl" (tous les elements ayant l attribut class="police_xl") je veux que leurs textes mesurent 25pixels.....

RDV dans les prochains posts pour entamer le design web grace a CSS.

14/10/2022

Devenir développeur web.

partie 1 -post #9

les elements HTML importants tres souvent mal utilisés par les developpeurs.

DIV
permet au meme titre que l element section de segmenter le code de sa page en sections appartenant a la meme semantique.les developpeurs web polluent leurs code en creant des div partout pourtant il existe des éléments semantiques plus adequats comme on a pu le voir.
plutot que d utiliser une div pour delimiter une navigation utilisez l element nav.utilisez footer,section,article plutot que div cela augmentera votre seo et rendra vos pages plus accessibles.

BR
l element break line permet de creer un retour a la ligne.mais nous sommes toujours tentés de l utiliser pour creer des espaces entres elements de nos pages web.plutot que d utliser l element br utiliser les propriétés margin en css pour augmenter l espace separant des elements.n utilisez l element br que si vous souhaitez par exemple forcer un retour a la ligne dans un meme element p (paragraphe).

SPAN
l elemnt span n est pas mal utilisé par les developpeurs mais il est peu utilisé.cet element permet d encadrer une portion de texte a laquelle on souhaite appliquer un style.les developpeurs plutot que de se servir de cet element couplé au css pour donner du style gras (bold) par exemple ,se retrouvent en train d utiliser l element bold .mauvaise pratique!!

BOLD / EM
les elements bold et emphasys permettent de mettre l accent sur les termes qu ils delimitent.l element bold a un rendu style gras et emphasys a un rendu style italique dans le navigateur ce qui pousse bon nombre de developpeurs a les utiliser pour ajouter ces styles a des portions de texte de la page web.mauvaises pratiques.ces elements servent d indicateurs pours les moteurs de recherche...ils permettent d accentuer aupres des moteurs de recherche la valeur et importances des textes/mots qu ils delimitent . si vous souhaitez donner du style a une portion de texte,servez vous de l element span pour delimiter la portion de texte ainsi que des propriétés font-weight :bold et font-style:italic pour donner les styles bold(gras) et italique.

H
l element titre.on distingue 6 differents niveaux de titre h1-h6 .chaque niveau a un rendu different dans le navigateur web.les h1 etant plus importants ont une police plus grande que les h2 ainsi de suite jusqu'à h6.ce n est pas pour autant qu il faut utiliser un h1 si on souhaite un titre plus grand(police plus grande).le css est la pour appliquer le style .grace a la propriété font-size meme un h6 peut etre plus grand qu un h1.
ces nuveaux de titres servent a indiquer aux moteurs de recherches l organisation de notre contenu.une page web n a qu un seul h1.il peut apparaitre plusieurs element h1 dans le code source d une page web mais son contenu doit toujours etre le meme.c est le grand titre :) ensuite viennent lees sous titres h2 ...ainsi de suite les moteurs de recherches pourront alors creer un arbre credible des parties de votre page web et mieu l indexer pour les recherches.

n oubliez pas le contenu en html et le style en css!!!
like,follow & share ;)

Photos from Developpeurs web/mobile au cameroun -Debutants a pro's post 13/10/2022

les tableaux en HTML

le language html nous permet de creer des tableaux dans nos pages grace a l element "table" .

le language html construit un tableau ligne par ligne .ceci grace a l element "tr"(table row pour ligne de tableau) .

les lignes du tableau sont quant a elles constituées de cellules:les cellules d en-tête et les cellules de données.
les cellules de données(normales) sont definies grace a l element "td"(table data pour données de tableau) .
les cellules d en-tête situées generalement dans la premiere ligne du tableau sont formées grace a l element "th"(table head pour en tête de tableau).elles representent les titres des colonnes du tableau.
construisons un tableau a titre d exemple .cf. image.

attributs utilisables avec les tableaux.

border: l attribut border de l element table permet de definir la taille des bordures du tableau.la valeur par defaut etant 0 le tableau crée n aura pas de bordure.
rowspan et colspan:les attributs rowspan (expansion de ligne) et colspan(expansion de colonne) permettent de specifier sur combien de ligne ou colonne une cellule (td ou th) s etend.la valeur par defaut de ces 2 attributs est 1.pour creer une cellule qui s ete nd sur 2 colonnes comme sur l exemple i' suffit de lui ajouter l attribut colspan=2.

autrefois ,les developpeurs utilisaient l element table pour structurer les elements d une page web sous forme de grille.il suffisait alors d inserer les elements html dans des cellules et jouer avec les attributs colspan et rowspan pour creer toute sorte de grille.(exemple en image).aujourd'hui cela est considéré comme une pratique a eviter car je vous rapelle en html il ne s agit que du fond et non de la forme.

abonnes toi pour ne rien manquer :)

Photos from Developpeurs web/mobile au cameroun -Debutants a pro's post 11/10/2022

devenir développeur web

partie 1 - post #8

bien structurer ses pages web grace aux elements semantiques du language html.

imaginez un instant que vous souhaitez analyser le code source d une page web dans le but d en etudier une partie.il y a cette belle page web que vous consultez régulièrement et vous souhaitez savoir comment son developpeur a créé cette navigation par exemple.vous faites un click droit dans la page et affichez son code source (html + css +..) et bam vous vous retrouvez avec des tags et des tags html et ne savez pas exactement ou commencer pour identifier la partie du code qui correspond a la navigation qui vous interesse.sans outils particuliers identifier cette zone de code sera tres penible.c est exactement le meme probleme auquel font face navigateurs et moteurs de recherche.ils voient le code source de votre page comme un long texte sans distinction de parties ou paragraphes.
il faudrait donc un moyen de pouvoir delimiter chaque partie d une page web dans le but de s y retrouver tres facilement.ca tombe bien,le language html prevoit a cet effet des elements appelés elements semantiques.ils fonctionnent comme l element body.ils ne sont pas visibles dans la page web mais encadrent les codes html des differentes parties de notre page web.c est comme des etiquettes qui permettent de dire ce bloc c est le code html de la navigation,celui ci c est le code html du pieds de page etc..et grace a ca on s y retrouve plus facilement lorsqu'on analyse la page web.
les éléments semantiques les plus utilisés sont header,nav,aside, section,article,footer cf image.
ainsi en inspectant une page web il suffit de trouver les balises et par exemple pour savoir ou le code source de la navigation commence et se termine.
que ce soit un developpeur ,un navigateur ou un moteur de recherche,il devient tres facile de se retrouver dans vos pages web car chaque bloc est desormais contenu dans un element semantique decrivant une zone precise du corps de la page web.

avant la création des elements semantiques ,les développeurs avaient recours a un element html particulier .l element div(division) et aujourd'hui beaucoups de developpeurs continuent de poluer leurs codes avec des div partout ce qui n est pas une bonne pratique.c est pourquoi je ne parlerai pas de cet element ici.le language html dispose d assez d elements pour chaque portion d une page web.

nav- ... - contient la navigation de la page web.

aside - ... -contient un contenu secondaire en general localisé a gauche ou a droite (aside - sur les côtés) du contenu principal.

section - ... -la page web est divisé en sections.comme sin noms l indique ,la balise section permet de definir ces sections.le contenu principal de notre page web peut comme dans l exemple avoir une section qui porte sur la description de webdev237 et une autre section qui liste les derniers tutos posté s sur webdev237.

article - ... -comme son noms l indique delimite un article.on peut s imaginer un article dans un journal .les articles peuvent avoir un titre qui peut etre contenu dans un en-tête,plusieurs sections et un pieds de page.

header - ... -contient l en-tête d une page web,d un article ou d une section.le header d une page web peut contenir la navigation ainsi que le logo de la page web.a ne surtout pas confondre avec l element head juste au dessut de body dans la page web et qui contient toutes les informations sur la page web(meta,title ...).

footer - ... -contient le pieds de page d une page web,d un article ou d une section.on s en sert generalement pour contenir le bloc en fin de page web contenant les liens utiles et les conditions d utilisations et droits en fin de page web.

le code de notre page web a été mis a jour dans le but d ameliorer sa structure.quelques elements ont été ajoutés (paragraphes ,articles de posts) pour creer des sections et d autres blocs semantiques (header,footer,article) afin que vous puissez voir exactement comment on s en sert pour delimiter le contenu d une page web .je vous demanderai de vraiment essayer de toujours utiliser ces balises semantiques pour structurer vos pages web plutôt que d utiliser des elements 'div' (division) pour creer des blocs semantiques.
remarquez que l element aside ne s affiche pas de coté automatiquement son seul but est d indiquer que ce bloc sera positionner plus t**d sur un côté de notre contenu principal de page web.ne vous inquietez pas nous apprendrons comment changer sa position grace au language css dans la 2eme partie de cette serie sur le developpement web.
dans le prochain post nous aborderons les notions d inline-elements et bloc-elements.ce sont 2 concepts qui permettent de classifier les elements html en fonction de leurs comportements (creer un retour a la ligne ou s afficher sur la meme ligne que l element precedent) sur une page web.
abonnez vous,likez ,commentez,partagez la page


Vous voulez que votre école soit école la plus cotée à Yaoundé ?

Cliquez ici pour réclamer votre Listage Commercial.

Vidéos (voir toutes)

barre de navigation responsive avec espace top coulissant vers le bas et menu deroulant a droite.realise en html css et ...
barre de navigation responsive avec espace superieur deroulant et hamburger menu pour version mobile...impressions et de...
simple validation de formulaire html css javascript
texte design cool juste en html et css
le modele de boite et la propriété box-sizingavant d aborder le positionnement d elements html sur une page web il vaudr...

Emplacement

Site Web

Adresse

Yaoundé
Autres écoles à Yaoundé (voir toutes)
Faculté de Philosophie UCAC ICY Faculté de Philosophie UCAC ICY
Nkolbisson
Yaoundé, 11628

La Faculté de Philosophie de l'Université Catholique d'Afrique Centrale (UCAC) a pour principale mission de promouvoir, à l'aune des défis globaux contemporains, une réflexion méthodique sur les dimensions de l'expérience humaine.

CBCTM Collège Bilingue Charles Thérèse Mbackop CBCTM Collège Bilingue Charles Thérèse Mbackop
Yaoundé

Informer sur l'évolution et la gestion du Collège Bilingue Charles et Thérèse Mbackop.

Schoolexams.fr Schoolexams.fr
Yaoundé
Yaoundé

Schoolexams.fr : la Promotion de L'éducation Camerounaise.... Numéro unique : +237 654581081

DIGINOVTrainingCenter DIGINOVTrainingCenter
A PROXIMITÉ DU CENTRE COMMERCIAL SANTA LUCIA NGOUSSO
Yaoundé

DIGINOV Training Center offre des formations pour insertion des jeunes sur le plan professionnel

faxeur.org faxeur.org
Yaoundé

AELybiek: Association des anciens élèves du lycée bilingue d'Ekorezock AELybiek: Association des anciens élèves du lycée bilingue d'Ekorezock
Ekorezock
Yaoundé

plateforme qui réunit tous les anciens élèves du lycée bilingue d'ekorezock

Sse Nemui Sse Nemui
Ntui
Yaoundé

Je suis sérigraphe peintre décorateur et je forme aussi les jeunes

Le stratège aux examens officiels Le stratège aux examens officiels
Yaoundé

Garantir son nom au BABILLARD ! ORA, LABORA ET SUCCEDUNT WhatsApp 657 390 470

Collège virtuel Mon Excellence+ Collège virtuel Mon Excellence+
Yaoundé

Communauté éducative

Grandprof. Org2 Grandprof. Org2
Essos
Yaoundé

Éducation divertissement

Centre de Repetition Peguy Pago Centre de Repetition Peguy Pago
Yaoundé

Nous sommes un groupe d'enseignants qualifiés ayant pour but d'amener les élèves à la réussite

Sagicam Training Center Sagicam Training Center
Auto Ecole Mozart Building, Carrefour Accacia
Yaoundé

Sagicam Institute of Technology is a vocational training center authorized by the ministry of vocational training. Its mission is to help equip students with the professional skills which will enable them to be at the top positions in the competitive job