Wikme - solution étape 1
Demande
Formulé dans le language courant, la demande peut être "traduite" en html. On va en extraire les éléments principaux et refléchir à comment les réalisé en html.
Histoire de se présenter un peux pouvez vous crée une page .html avec votre
* nom prénom,
* un petit texte descriptif ( si vous n'êtes pas inspirez demandé à chatgpt )
* une adresse ( rue, ville etc )
* une liste de vos hobbies ( hobbies ou autres l'important c'est d'avoir une liste )
* une image ( photo, avatar peut importe et si pas d'inspiration vous avez https://unsplash.com/fr )
Crée une page html
Une page html c'est une structure avec une balise root contenant deux balises "enfants": head et body.
On pourrait donc l'écrire ainsi:
<!doctype html>
<html>
<head></head>
<body></body>
</html>
Actuellement notre page n'affiche absolument rien.
La balise body est vide: <body></body>.
Head n'est pas non plus utilisé.
Pour ajouter un peu de contenu on va donner un titre à notre page.
<head>
<title>Wikme</title>
</head>
Ce titre, mit dans head, serat affiché comme titre général et visible dans l'onglet du navigateur.
Comment savoir quoi utilisé et quand ?
Chaque balise à sa description et ses cas d'utilisations officiel.
Pour en savoir plus on peut se rendre sur la documentation des balises vues.
<html>
<head>
<title>
<body>
En s'intéressant à la balise html on constate, dans la documentation, que celle ci peut contenire des balises enfants.
La documentation indique les balises enfants en question, qui sont:
Du contenu
Notre structure html existe et est fonctionelle.
On fait la distinction entre head ( infos destiné au browser ) et body ( infos affiché pour l'utilisateur).
Le contenu à rendre visible est le suivant:
* nom prénom,
* un petit texte descriptif ( si vous n'êtes pas inspirez demandé à chatgpt )
* une adresse ( rue, ville etc )
* une liste de vos hobbies ( hobbies ou autres l'important c'est d'avoir une liste )
* une image ( photo, avatar peut importe et si pas d'inspiration vous avez https://unsplash.com/fr )
Il est possible d'identifier différents types de contenu depuis cette description. Nom et prénom on va partir du principe que c'est du texte. Idem pour le texte de description.
L'adresse pourrait être elle aussi considérée comme du texte mais en cherchant un peu on découvre qu'il existe un tag spécifique pour les adresses.
Tags specifiques !?
Il est possible d'écrire du html de manière brouillionne et que ça fonctionne.
Mais il est mieux d'utiliser les bonnes balises pour le bon contenu.
Par exemple il existe une balise générique ( sans sens profond ) qui est la <div>.
Je pourais l'utiliser pour y mettre mon texte de cette façon:
<div>Hello World</div>
Le problème c'est que lorsqu'on écrit du html on s'adresse à deux interlocuteurs, l'humain et la machine.
L'humain est l'utilisateur qui visualise la page html. Lui ne voit pas les balises et n'est intressé que par le resultat finale.
Ce résultat est le fruit de l'interprétation du code html par la "machine" c'est à dire votre navigateur.
Le navigateur ne s'interesse pas au contenu de vos balises lui ce qui le passionne ce sont les balises elles mêmes.
Pour être sur d'êtres bien comprit il faut donc lui parler avec les bons mots.
Ecrire
<div>Hello World</div>
reviens à dire au navigateur "met du texte dans un truc"... bof
Alors que
<p>Hello World</p>
signifie met du texte dans une balise p, balise paragraphe faite pour afficher du texte.
Sémantique
Un tag portant un sens par lui même est dit sémantique.
Le terme sémantique fait référence à l'étude du sens des mots, des phrases et des structures dans un langage. En développement web, la sémantique concerne l'utilisation appropriée des balises HTML pour décrire clairement le contenu d'une page web.
A contrario un tag sans sens spécifique est dit générique: ex <div>
Traduction
Reste à trouver les bons tags coorespondant au valeurs à affiché dans notre page web.
| Demande | Type | Html |
|---|---|---|
| Nom | text | p |
| Prénom | text | p |
| Description | text | p |
| Adresse | adresse | address |
| Liste | liste | ul |
| Image | image | img |
Réalisation
On a la structure html de base et on connait les balise à utiliser pour ajouter notre contenu.
Reste à assembler tout ça ensemble.
Pour le moment le coté esthétique n'est pas important.
Html existe pour structure l'information pas pour apporter des couleurs, du styles etc.