Coding Learn
4.73K subscribers
279 photos
109 videos
47 files
199 links
Canal de partage de contenus sur la programmation et sur l'informatique

📬 Pour suggérer venez sur @codingsupport_bot
Download Telegram
Structure de base d'une page HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Titre de la page</title>
</head>
<body>

</body>
</html>
⁉️Explication


👉<!DOCTYPE html> : la toute première ligne s'appelle le doctype et est indispensable car c'est elle qui indique qu'il s'agit bien d'une page web html


👉L'en-tête <head> : cette section donne des infos générales sur la page comme son titre, l'encodage (pour géré les caractères spéciaux). Ces informations ne sont pas affichés sur la page mais néanmoins elles restent importante.

👉Le corps <body>: c'est la partie principale de la page. Tout ce que nous écrivons ici s'affichera sur la page.

👉 <meta Charsest="UTF-8"> : cette balise indique l'encodage utiliser dans votre fichier html.
Je précise qu'il existe d'autres encodage tel que ISO-8859-1 , OEM 775, etc

👉<title> : c'est le titre de la page . Toute page doit avoir un titre qui décrit en bref le contenu. Elle s'affiche dans l'onglet du navigateur
III - Organisation du texte


📋 Dans cette partie nous allons voir:

👉 Comment construire un paragraphe
👉comment structuré une page avec des titres
👉comment donner de l'importance à certains mot du texte
👉 Comment organiser les informations sous forme de liste
📑 Les paragraphes

Pour insérer du texte sur une page web on utilise des paragraphes. Le langage HTML propose la balise <p> pour délimiter les paragraphes.

Exemple : <p> Bienvenue sur ma page web </p>

<p> signifie début du paragraphe
</p> signifie fin du paragraphe

Notez que ceci doit être inséré a l'intérieur de la balise <body></body>
🌀Vous appuyer ce qui est encerclé en bleue pour exécuter.
Vous obtenez ça .
C'est pas trop beau mais c'est bon pour un debut
🏃‍♂Comment sauter une ligne ?

En HTML si vous tapez entre dans le code cela ne créé pas une nouvelle ligne. Essayer le dans votre code

Pour revenir donc à la ligne vous devez écrire un nouveau paragraphe avec la balise <p> bien-sûr.

Il y'a aussi un autre moyen. Vous pouvez utiliser la balise <br/> (voir dans la figure ci-dessous)
🔺Les titres
🌟 En HTML on à 6 balise pour illustrer les titres. Ce sont:
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

Attention ne confondez pas la balise <title> qui affiche le titre de la page dans l'onglet du navigateur avec la balise <h1>
La mise en valeur

Au sein de votre page d'autres mots sont plus important que les autres. Pour les faire ressentir on utilise la balise <em></em>.
Sont utilisation est tres simple. Vous encadrés juste le mot que vous voulez mettre en valeur
Mais il y'a une autre manière de mettre en valeur des mots.
On utilise la balise <strong></strong> qui permet de mettre le texte en gras
On peut aussi utiliser la balise <mark> pour marker le texte en couleur jaune
J'espère que tout le monde suit.
Si il y'a des incompréhensions n'hésitez pas a poser vos questions sur @codingsupport_bot


On continue demain
Bonjour on vas enchaîné avec la suite du cours

IV - Création des liens

Comme vous le savez un site web est constitué de plusieurs pages. Nous allons voir comment faire pour quitter une page a une autre.

Nb: on peut faire un lien entre une page a.html et une page b.html mais on peut aussi faire un lien vers un autre site.
Il est facile de reconnaître un lien sur une page, ils sont écrits d'une façon différente (par défaut en bleue et souligner).


La balise qu'on utilise pour créer un lien est la suivante <a></a>
Cependant on ajoute un attributs " href " pour indiquer vers quelle page le lien doit conduire.

Exemple : <a href="http://www.codelearn.com">Code learn</a>
Les liens que nous venons de voir sont appelés lien absolue (lien complet). Maintenant nous allons voir comment faire un lien qui relie tout les pages de notre site web.

Pour commencer on va créer deux pages html dans le même dossier
Suite du cours sur le développement web

Comment établir une liste ?

Les listes nous permettent de mieux structurer notre texte et d'ordonner les informations.

Il y'a deux types de liste
:
👉 Les listes non ordonnées

Pour créer une liste on utilise la balise <ul></ul> .
Ensuite on doit écrire chacun des éléments de la liste qu'on veut constitué entre la balise <li></li> qui elle même sera écrit au dans la balise <ul></ul> qu'on à vu en haut.

Code HTML
<ul>
<li>Python</li>
<li>Java</li>
<li>JavaScript</li>
</ul>

(Observez la figure 1)


👉 Les listes ordonnées ou énumération

C'est le même principe que pour les listes non ordonnées mais on utilise la balise <ol></ol> au lieu <ul></ul>

Code HTML
<ol>
<li>Python</li>
<li>Java</li>
<li>JavaScript</li>
</ol>
Observez la figure 2
Figure 1
Figure 2
🤩
HTML et JavaScript <\> (web développement)