👋 Bonjour
aujourd'hui nous allons aborder le cours sur le développement des sites webs. Ils existent plusieurs logiciels de création de sites web mais ici nous allons nous intéresser essentiellement a l'usage des langages HTML et CSS .
Pour se faire nous aurons besoin d'un éditeur de texte
Je vais plutôt m'intéresser au cours sur Android en utilisant l'application TrebEdit et je vous le conseille aussi si vous êtes sur Android. Il existe aussi d'aussi d'autres éditeurs comme vim ou gEdit que vous pouvez installer sous le terminal de Linux , si vous utilisez un PC je vous conseille plutôt Notepad++, Sublime Text
✍ Cours entièrement écrit par Max Robot
aujourd'hui nous allons aborder le cours sur le développement des sites webs. Ils existent plusieurs logiciels de création de sites web mais ici nous allons nous intéresser essentiellement a l'usage des langages HTML et CSS .
Pour se faire nous aurons besoin d'un éditeur de texte
Je vais plutôt m'intéresser au cours sur Android en utilisant l'application TrebEdit et je vous le conseille aussi si vous êtes sur Android. Il existe aussi d'aussi d'autres éditeurs comme vim ou gEdit que vous pouvez installer sous le terminal de Linux , si vous utilisez un PC je vous conseille plutôt Notepad++, Sublime Text
✍ Cours entièrement écrit par Max Robot
📋 On va procéder étape par étape
Voici le plan du travail👇
Partie1 - les bases du HTML
I - rôle du langage HTML
Il - Structure de base d'une page
III - Organisation du Texte
IV - création des liens
V - insertion d'images
VI - les formulaires
Voici le plan du travail👇
Partie1 - les bases du HTML
I - rôle du langage HTML
Il - Structure de base d'une page
III - Organisation du Texte
IV - création des liens
V - insertion d'images
VI - les formulaires
I - rôle du langage HTML
🤓 Le langage HTML a été créer par un certain Tim Berners-Lee en 1991
HTML (
CSS ( cascading style sheet ). Son rôle est de géré l'apparence de la page web: positionnement , couleurs, texture , ... Il est venu complété le HTML en 1996.
II - Structure de base d'une page
Pour commencer nous allons ouvrir notre éditeur de texte TrebEdit
Ensuite dans TrebEdit ouvrez le menu , appuyer sur l'icône + et créer un projet.
Entrez dans le projet que vous avez créer et vous créer maintenant un fichier
Nb: donner le nom que vous voulez à votre fichier et ajouter
🤓 Le langage HTML a été créer par un certain Tim Berners-Lee en 1991
HTML (
HyperTexte Markup Langage) a fait son apparition en 1991 dès le lancement du web . Son rôle est de géré et organiser le contenu. C'est donc en HTML que vous écrirez ce qui doit être affiché sur la page : texte ,images , liens...CSS ( cascading style sheet ). Son rôle est de géré l'apparence de la page web: positionnement , couleurs, texture , ... Il est venu complété le HTML en 1996.
II - Structure de base d'une page
Pour commencer nous allons ouvrir notre éditeur de texte TrebEdit
Ensuite dans TrebEdit ouvrez le menu , appuyer sur l'icône + et créer un projet.
Entrez dans le projet que vous avez créer et vous créer maintenant un fichier
Nb: donner le nom que vous voulez à votre fichier et ajouter
.html à la fin pour montrer à l'ordinateur que le fichier sera écrit en langage HTML. Dans mon cas j'ai mis max.html👌 On y est . On peut maintenant ouvrir le fichier et commencer les premiers pas.
💡 Les balises
Pour ce faire nous allons devoir utiliser des balises pour indiquer à l'ordinateur ce qu'il doit affiché sur l'écran
Les balises sont encadrés par des chevrons <balise> .
Il existe deux types de balises :
On a les balises paires qui s'ouvrent et se referment
La balise ouvrante <balise>
La balise fermante </balise>
ex: <balise> Max Robot </balise>
Et les balises orphelines
ex: <image />
🛠 Les attributs
Les attributs sont un peut les options des balises . Elles viennent les compléter pour donner des informations supplémentaires. Elle se placer après le nom de la balise ouvrante
ex: <balise attributs="valeur" >
On peut par exemple inséré un photo en tapant <image nom="photo.jpg" />
Nb: dans les balises paires on ne met l'attribub que dans la balise ouvrante.
Toutes les balises que nous venons de voir sont fictive les vrais balises sont en anglais.
💡 Les balises
Pour ce faire nous allons devoir utiliser des balises pour indiquer à l'ordinateur ce qu'il doit affiché sur l'écran
Les balises sont encadrés par des chevrons <balise> .
Il existe deux types de balises :
On a les balises paires qui s'ouvrent et se referment
La balise ouvrante <balise>
La balise fermante </balise>
ex: <balise> Max Robot </balise>
Et les balises orphelines
ex: <image />
🛠 Les attributs
Les attributs sont un peut les options des balises . Elles viennent les compléter pour donner des informations supplémentaires. Elle se placer après le nom de la balise ouvrante
ex: <balise attributs="valeur" >
On peut par exemple inséré un photo en tapant <image nom="photo.jpg" />
Nb: dans les balises paires on ne met l'attribub que dans la balise ouvrante.
Toutes les balises que nous venons de voir sont fictive les vrais balises sont en anglais.
⚙ 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
Je précise qu'il existe d'autres encodage tel que ISO-8859-1 , OEM 775, etc
👉<!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 navigateurIII - 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
📋 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> signifie début du paragraphe
</p> signifie fin du paragraphe
Notez que ceci doit être inséré a l'intérieur de la balise
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>🏃♂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
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:
Attention ne confondez pas la balise <title> qui affiche le titre de la page dans l'onglet du navigateur avec la balise <h1>
🌟 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
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 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
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>
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
Pour commencer on va créer deux pages html dans le même dossier
Suite du cours sur le développement web
👉 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
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