✅ Comment avez-vous trouvé les tutos sur le chapitre 1 du module 1 de la formation ?
💢Je demande à ce que tous les membres participent à ce sondage. Merci pour la compréhension🙏🙏.
Eh bien, nous avons terminé avec le chapitre 1 de ce premier Module.
On se retrouve Vendredi pour lancer le CSS.
Soyez ponctuel et faites des recherches, et surtout pratiquez beaucoup. Il y a que la pratique qui donne un quota de compréhension maximales et qui vous fera avoir des questions dans des cas d'incompréhension.
Ci joint, un pdf contenant une panoplie de balise HTML pouvant compléter votre apprentissage.
On se retrouve Vendredi Pour continuer avec le Chapitre 2:CSS.😊
Si tu as des questions va dans le groupe du canal ☺️
https://t.me/+wA27vACOEU8xZDM8
Bonus
Les attributs span et id
C'est attributs sont appelés attributs muettes car elles n'ont aucun effet sur le fonctionnement de la balise. Elles sont juste utilisées pour pouvoir appliquer du style CSS.
La différence qu'il peut y avoir entre les deux est la suivante :
- L'appellation niveau CSS
Pour une classe, on commence par le point (.) suivi du nom de la classe
Pour un id, on commencera par le hashtag (#) suivi du nom de l'id.
- Une même classe (même nom de classe) peut appartenir à plusieurs balises au sein de la même page web or un même id ( même nom de id) ne doit appartenir qu'à une seule balise au sein d'une même page web.
Autrement dit, pour une classe avec le nom maClass, on peut l'utiliser sur 2, 3, 1000 paragraphes ou balises de titres alors qu'un id avec le nom maClass ne doit être utilisé que sur un paragraphe ou une balise de titre par exemple !
Ainsi, on verra pourquoi un id n'es utilisé qu'une fois par balise et par page web.
Les ancres
Ils sont un bon moyen d'exemple d'utilisation des id.
Une ancre est un lien qui renvoie sur une partie de la page web qu'on parcours actuellement.
Utile pour faire des sommaires et renvoyer directement à la partie concernée de notre sommaire.
Son utilisation est simple.
- une balise cible contenant un id
- un lien hypertexte donc la cible commence par un hashtag (#) et donc le nom de la cible est celui de id de la balise concerné (celle où on veux renvoyer).
Exemple :
<a href="#maClass">Aller directement au paragraphe n⁰3</a>
<p> du texte du texte du texte <br>Il s'agit du paragraphe n⁰1</p>
<p> du texte du texte du texte <br>Il s'agit du paragraphe n⁰2</p>
<p id="maClass"> du texte du texte du texte <br>Il s'agit du paragraphe n⁰3</p>
Si vous cliquez sur le lien, cela renverra sur le paragraphe donc l'id vaut maClass. Dans notre exemple, il s'agit du paragraphe 3.
Cet exemple nous montre pourquoi il faut que chaque balise ait un id différents, tout simplement parce que si deux balises porte le même id, le navigateur choisira la première balise comme celle ayant l'attribut id="maClass", les autres balises seront ignorer.
𝕃𝕖𝕤 𝕝𝕚𝕖𝕟𝕤 𝕙𝕪𝕡𝕖𝕣𝕥𝕖𝕩𝕥𝕖𝕤 (suite et fin)
Bonus : Lien de téléchargement.
Inclure des médias ou fichiers en HTML c'est bien, mais laisser la possibilité au visiteur de l'avoir tout le temps avec lui sur sa mémoire c'est encore mieux (c'est ce qu'on appelle télécharger : récupérer un fichier depuis un serveur distant ou non et l'enregistrer sur sa mémoire).
Seulement, le navigateur ne nous facilite pas les choses, car il ouvre pas mal de fichiers qui sont compatibles tel que : audio, vidéo, image, pdf (navigateur sur PC), texte etc...
Ainsi, si on veux que le visiteur télécharge notre musique qui nous plaît tant, ça sera impossible !
Sauf s'il fait un clic droit et ensuite clique sur télécharger dans le menu contextuel ou encore s'il maintient le bouton alt de son clavier lorsqu'il clique sur le lien.
Néanmoins, on peut lui faire télécharger pas mal de choses comme les applications Android, les jeux pc ou Android, le fichier compressés (zip, rar, 7z ...) etc...
Pour ce faire, on fera juste ceci :
<a href="nom_fichier.extension">Télécharger mon super fichier ici</a>
Cet exemple a été tiré du fait que le fichier se trouve sur notre site (sur les serveurs de notre site).
Pour un site externes, il faudra renseigner l'adresse du site qui pointe sur le fichier en question.
Mais cela voudrait dire que si j'ai ma musique, je ne peux pas la faire télécharger par le visiteur ?
Si ! C'est possible, par les 2 astuces que nous avons vu, ou aussi en renseignant l'attribut download. Cet attribut si elle est utilisée, permet aussi de renommer le nom du fichier à télécharger par la valeur qu'elle contient. Mais aussi, si le fichier ne se trouve pas sur notre domaine (sur notre site ou notre serveur web), ça ne marchera pas.
Ex: supposons que j'ai mon fichier Audio ma_superbe_musique_que-jaime_et_que_jadore.mp3, j'aimerais que si le visiteur le souhaite, puisse là télécharger, mais comme le nom est grand, je ne modifie pas le nom du fichier directement mais plutôt lorsqu'il télécharge.
Je ferai ceci :
<a href="ma_superbe_musique_que-jaime_et_que_jadore.mp3" download="ma_musique.mp3">Télécharge la superbe musique ici</a>
Remarque :
- Au téléchargement, le fichier qu'il aura télécharger se nommera ma_musique.mp3 grâce à la valeur de l'attribut download
- Si le fichier ne se trouve pas dans notre domaine (si on est en local par exemple), le navigateur ne téléchargera pas le fichier mais le lira directement.
𝕃𝕖𝕤 𝕝𝕚𝕖𝕟𝕤 𝕙𝕪𝕡𝕖𝕣𝕥𝕖𝕩𝕥𝕖𝕤
La base du web est l'interconnexion grâce aux liens hypertextes.
Il en existe de toute les sortes, en partant des liens internes vers les liens externes.
Un lien hypertexte est donc un élément cliquable qui redirige sois vers une autre partie de notre site, une autre page ou carrément vers un autre site web.
On indique au navigateur qu'on souhaite faire un lien avec la balise <a>...</a>
On aura besoin de l'attribut href qui contiendra la cible vers laquelle on souhaite aller ou rédiger le visiteur et entre notre balise <a>...</a>, on place un texte qui sera vu et où le visiteur pourra cliquez pour se rediriger vers la cible contenu dans l'attribut href.
En gros, si on veux rediriger un visiteur on fera ceci :
<a href="cible">Texte où cliquer</a>
- Les liens internes sont tous les liens qui vont toujours renvoyer sur notre site.
Ex : le visiteur se trouve à l'accueil de notre site, on peut le rediriger à voir notre page a_propos.html via le texte À propos de nous comme suit :
<a href="a_propos.html">À propos de nous</a>
Ainsi, quand le visiteur va cliquer sur À propos de nous, il sera rediriger sur notre site directement sur la page a_propos.html de notre site.
- Les liens externes sont tous les liens qui vont renvoyer vers d'autres sites web. Dans ce cas, l'utilisation de l'attribut target avec pour valeur _blank est fortement recommandé car cela permettra d'ouvrir un nouvel onglet ou une nouvelle fenêtre pour ouvrir le site externe sans avoir à quitter votre propre site. Généralement, la cible commence par le protocole http ou https
Ex : supposons que nous souhaitons faire un lien qui renvoie vers la page Facebook de notre canal 𝐙𝐨𝐧𝐞 𝐂𝐨𝐝𝐢𝐧𝐠, on procédera comme suit :
<a href="https://www.facebook.com/zone Coding" target="_blank">Page Facebook du Canal</a>
- Les ancres
Nous verrons cette partie juste après le bonus des attributs id et class.
𝕃𝕖𝕤 𝕚𝕞𝕒𝕘𝕖𝕤
Tout comme L'audio ou la vidéo, il nous ait impossible de voir de nos jours un site sans images. Servant parfois d'illustration, ou même parfois publicitaire, on ne saurait s'en empêcher aujourd'hui.
Pour insérer une image, rien de plus facile avec sa balise orpheline
Néanmoins, grâce à l'attribut src, on pourra indiqué la cible du fichier
Grâce à l'attribut alt, on pourrait laisser une description de l'image où cas où notre image n'est pas chargé ou tarde à se charger dans le navigateur.
Ex :
Illustration :
Également certaines extensions sont autorisés en fonction de la compatibilité du navigateur, mais les plus recommandé sont : .jpg ou .jpeg, .png, .webm, .ico (pour l'icône de son site).
𝕃𝕖𝕤 𝕚𝕞𝕒𝕘𝕖𝕤, 𝕚𝕞𝕒𝕘𝕖 𝕖𝕥 𝕤𝕠𝕟 𝕥𝕚𝕥𝕣𝕖 (𝕓𝕠𝕟𝕦𝕤)
Par moment, on a envie de donner un titre qui sera visible par l visiteur a nos images. Le faire en utilisant un suivi du titre n'est pas recommandé. Dans ce cas l'utilisation de la balise ... est fortement conseillé.
Comment ça marche ?
Facile ! A l'intérieur de notre figure, nous aurons besoin de notre balise image () et une nouvelle balise ... (c'est à l'intérieur de cette balise qu'on placera le titre de notre image).
Concrètement, voilà ce qu'on devra faire pour une image qui doit avoir un titre :
Profil du Canal Télégram 𝐙𝐨𝐧𝐞 𝐂𝐨𝐝𝐢𝐧𝐠
Illustration :
Également certaines extensions sont autorisés en fonction de la compatibilité du navigateur, mais les plus recommandé sont : .jpg ou .jpeg, .png, .webm, .ico (pour l'icône de son site).
𝕃𝕖𝕤 𝕚𝕞𝕒𝕘𝕖𝕤, 𝕚𝕞𝕒𝕘𝕖 𝕖𝕥 𝕤𝕠𝕟 𝕥𝕚𝕥𝕣𝕖 (𝕓𝕠𝕟𝕦𝕤)
Par moment, on a envie de donner un titre qui sera visible par l visiteur a nos images. Le faire en utilisant un 