Coding Tech

Open in Telegram

France56 502 Social Networks23 548

400

Subscribers

No data24 hours

No data7 days

No data30 days

No data

Post views

No data24 hours

No data48 hours

No data

Engagement rate

No data

Posts per day

Ads index

beta

Posts Archive

\n\nL'utilisation de cette balise nécessite deux attributs type qui indique le type de script à importer et SRC qui désigne la cible du fichier. Généralement, elle est utilisée pour l'importation d'un fichier JavaScript ou pour écrire du code JavaScript (dans ce cas, l'attribut src n'a pas lieu d'être mentionné !)\nEx : Pour l'importation d'un fichier\n \n\nPour l'écriture d'un script dans le fichier en cours \n\n\nPour autres balises de ce types, veuillez vous documenté de cela en faisant des recherches.","datePublished":"2023-06-27T20:10:04Z","dateModified":"2023-06-27T20:10:04Z","author":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"publisher":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":140},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3}]}},{"@type":"ListItem","position":3,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/161","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/161","mainEntityOfPage":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/161","headline":"𝕃𝕖𝕤 𝕓𝕒𝕝𝕚𝕤𝕖𝕤 𝕕'𝕖𝕟𝕥𝕖𝕥𝕖 Elles sont généralement utilisé pour authentifier la connexion, le navigateur, les diffé…","articleBody":"𝕃𝕖𝕤 𝕓𝕒𝕝𝕚𝕤𝕖𝕤 𝕕'𝕖𝕟𝕥𝕖𝕥𝕖\n\nElles sont généralement utilisé pour authentifier la connexion, le navigateur, les différents paramètres du site via le protocole http (hypertext transfert protocole) ou https (hypertext transfert protocole secure).\n\nElles sont également nombreuses mais on verra juste les plus importantes !\nNB : Ces balises se place généralement dans la balise ... et donc n'ont aucun effet visuel. La plupart d'entre elles sont orphelines.\n\n- : la principale balise d'entête. Elle définit plusieurs paramètres du site tel que : \n• L'encodage : (c'est L'encodage le plus utilisé) \n• L'adaptation écran : elle a besoin de deux attributs name avec la valeur viewport (le viewport est toute la partie visible de l'écran autrement dit la taille réelle de nos écrans) et content ( ). Elle peut par la même occasion interdire ou accepter le zoom.\n• La redirection : on peut vouloir rédiger un utilisateur vers une autre page de son site de façon immédiate ou encore après un intervalle de temps.\n\nPour une redirection immédiate, le contenu de la page courante ne sera pas vu, puisqu'il sera immédiatement rédiger !\n\n\nPour une redirection après un certain délai qui sera donnée en seconde, indiqué cette valeur dans l'attribut content suivi de l'URL de la page ou du site vers lequel on souhaite rediriger le visiteur.\nSi on souhaite rediriger après 5 minutes un utilisateur, on calculera le temps en seconde càd 5*60 = 300secs.\n\n\n• L'auteur de la page web : utile pour indiquer que c'est vous qui avez fait la page qu'il visite (seulement à un programmeur qui voudra le savoir). Cette balise aura besoin des attributs name avec pour valeur author et content qui aura pour valeur votre nom.\n\n\n• La description de la page en question : utile pour se référencer sur les moteurs de recherche (pour faire voir son site sur les moteurs de recherche).\nOn aura besoin des attributs name avec pour valeur description et content avec comme valeur la description du site.\n\n\n• Les mots clés : utile pour se référencer. Un utilisateur va généralement taper des mots clés comme : apprendre, HTML5, apprendre le web lorsqu'il cherche a apprendre, et non votre nom de domaine.\nPour ce faire, pour que votre site apparaissent lorsqu'il fait cette recherche, votre site dois disposé ses mots clés. \n","datePublished":"2023-06-27T20:01:14Z","dateModified":"2023-06-27T20:01:14Z","author":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"publisher":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":156},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2}]}},{"@type":"ListItem","position":4,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/160","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/160","mainEntityOfPage":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/160","headline":"Coding Tech","datePublished":"2023-06-27T19:59:01Z","dateModified":"2023-06-27T19:59:01Z","author":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"publisher":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":149}]}},{"@type":"ListItem","position":5,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/159","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/159","mainEntityOfPage":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/159","headline":"Bonsoir à tous, on se retrouve aujourd'hui pour continuer avec un nouveau tuto sur l'HTML. Votre environnemen…","articleBody":"Bonsoir à tous, on se retrouve aujourd'hui pour continuer avec un nouveau tuto sur l'HTML.\n\nVotre environnement de travail étant déjà prêt, vous serez invité à tester des codes et à faire de petits exercices.\n\nLet's go...\nInstallez-vous bien 😊","datePublished":"2023-06-27T19:58:01Z","dateModified":"2023-06-27T19:58:01Z","author":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"publisher":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":151}]}},{"@type":"ListItem","position":6,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/158","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/158","mainEntityOfPage":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/158","headline":"Coding Tech","datePublished":"2023-06-26T21:18:21Z","dateModified":"2023-06-26T21:18:21Z","author":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"publisher":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":173}]}},{"@type":"ListItem","position":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/157","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/157","mainEntityOfPage":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/157","headline":"Coding Tech","datePublished":"2023-06-26T21:10:04Z","dateModified":"2023-06-26T21:10:04Z","author":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"publisher":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":200}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/156","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/156","mainEntityOfPage":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/156","headline":"Coding Tech","datePublished":"2023-06-26T21:05:03Z","dateModified":"2023-06-26T21:05:03Z","author":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"publisher":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":168}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/155","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/155","mainEntityOfPage":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/155","headline":"Un bon programmeur est celui qui teste tout ce qu'on lui montre... Si tu veux tester, maintien ton doigt sur…","articleBody":"Un bon programmeur est celui qui teste tout ce qu'on lui montre...\n\nSi tu veux tester, maintien ton doigt sur un des codes et il sera instantanément copier. Colle le dans ton éditeur, et pour créer un fichier réfère toi au 𝕥𝕙𝕖𝕞𝕖 𝟶 vu précédemment et plus précisément sur 𝔼𝕥𝕦𝕕𝕖 𝕕'𝕦𝕟 𝕖𝕕𝕚𝕥𝕖𝕦𝕣 𝕕𝕖 𝕥𝕖𝕩𝕥𝕖.\n\nSinon, envoi ton problème ou pose ta question dans le groupe de discussion directement ici :\n\nhttps://t.me/+wA27vACOEU8xZDM8","datePublished":"2023-06-26T21:05:03Z","dateModified":"2023-06-26T21:05:03Z","author":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"publisher":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":177}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/154","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/154","mainEntityOfPage":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/154","headline":"𝕃𝕖𝕤 𝕓𝕒𝕝𝕚𝕤𝕖𝕤 𝕤𝕖𝕞𝕒𝕟𝕥𝕚𝕢𝕦𝕖𝕤 (suite et fin) - La balise d'article :

...

, comme son nom l'indiqu…","articleBody":"𝕃𝕖𝕤 𝕓𝕒𝕝𝕚𝕤𝕖𝕤 𝕤𝕖𝕞𝕒𝕟𝕥𝕚𝕢𝕦𝕖𝕤 (suite et fin)\n\n- La balise d'article :

...

, comme son nom l'indique, elle indique au navigateur que voici un des articles de la section. Un article peut être une partie des nombreuses faces d'un thème qu'on peut aborder.\n\nEx: \nSi je parle d'informatique dans mon site et que je veux parler de HTML, CSS et JavaScript\n\nUne

...

parlera de HTML\nUn

...

parlera des balises de type mise en forme\nUn autre

...

parlera des balises sémantiques par exemple.\n\n- La balise de contenu associé : . Cette balise est destiné au contenu indirectement lié à l'article lui-même c'est à dire , elle parle d'un sujet annexe à l'article qu'on propose où est généralement utile pour faire des publicités presqu'en rapport avec l'article.\n\nEx: Si je parle d'informatique,\nDans mon

...

je parle de HTML, le contenu annexe pourrait proposer un exemple sur le XML par exemple.\n\nIl existe de nombreux autres types de balises sémantiques et paramétriques, faites des recherches dessus. A la fin du cours, je vous proposerai un PDF regroupant une très large gamme de balises en général, y compris les balises sémantiques.","datePublished":"2023-06-26T21:00:29Z","dateModified":"2023-06-26T21:00:29Z","author":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"publisher":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":181},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/153","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/153","mainEntityOfPage":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/153","headline":"𝕃𝕖𝕤 𝕓𝕒𝕝𝕚𝕤𝕖𝕤 𝕤𝕖𝕞𝕒𝕟𝕥𝕚𝕢𝕦𝕖𝕤 (suite) - La balise de navigation : . Cette balise indique au navigateu…","articleBody":"𝕃𝕖𝕤 𝕓𝕒𝕝𝕚𝕤𝕖𝕤 𝕤𝕖𝕞𝕒𝕟𝕥𝕚𝕢𝕦𝕖𝕤 (suite)\n\n- La balise de navigation : . Cette balise indique au navigateur que ceci est mon volet (ou menu) de navigation. C'est généralement ici qu'on placera le menu du site. Cette balise sera elle même placée dans le

...

.\n\n- Les balises de contenance :

...

et ...\n •

...

est une balise de type block qui peut contenir d'autres balises. Elle n'a pas d'effet visuel mais elle indique au navigateur que voici un conteneur. Utile lorsqu'on veut appliquer du style CSS sur une grande partie du code.\n • ... est une balise de type inline qui peut également contenir d'autres balises. Utile lorsqu'on veut appliquer du style à une partie de notre code. Une lettre, un mot, ou phrase par exemple. Pour un paragraphe où des paragraphes, l'utilisation de

...

est recommandé !\n\n- La balise de paragraphe :

...

. Elle indique au navigateur qu'on souhaite faire un paragraphe.\n\n- La balise de section :

...

: elle indique au navigateur qu'on crée une section (un thème par exemple différents d'un autre). Elle est similaire à la balise

...

. Elle peut également contenir un

...

mais aussi un ou encore une ... Bref tous les autres types de balises.","datePublished":"2023-06-26T20:50:07Z","dateModified":"2023-06-26T20:50:07Z","author":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"publisher":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":173},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/152","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/152","mainEntityOfPage":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/152","headline":"𝕃𝕖𝕤 𝕓𝕒𝕝𝕚𝕤𝕖𝕤 𝕤𝕖𝕞𝕒𝕟𝕥𝕚𝕢𝕦𝕖𝕤 Les balises sémantiques sont ces balises qu'on utilise généralement et donc on ne voi…","articleBody":"𝕃𝕖𝕤 𝕓𝕒𝕝𝕚𝕤𝕖𝕤 𝕤𝕖𝕞𝕒𝕟𝕥𝕚𝕢𝕦𝕖𝕤\n\nLes balises sémantiques sont ces balises qu'on utilise généralement et donc on ne voit pas d'effet visuel.\nLa sémantique est sur le fait qu'elle donne des informations précises au navigateur afin que votre site soit valide au près des moteurs de recherche comme Google, Yahoo, etc...\n\nElles sont nombreuses, et on ne pourrait pas tous les voir.\nParmi celle qu'on verra, on a :\n\n- La balise d'entête :

...

: c'est une balise de type block. Elle peut contenir d'autres balises, et sa valeur sémantique est d'indiquer au navigateur et moteurs de recherche qu'on est sur l'entête du site.\nC'est généralement ici qu'on placera les menu pour un site.\n\n\n- La balise de pied de page : : également de type block, elle indique au navigateur que : ceci est le pied de page du site. On placera dans cette balise les liens externes, à propos du site, les services et partenaires et généralement les contacts du site, sans oublier le copyright.","datePublished":"2023-06-26T20:40:04Z","dateModified":"2023-06-26T20:40:04Z","author":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"publisher":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":172}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/151","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/151","mainEntityOfPage":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/151","headline":"TAF: Votre père précédemment qui a son cinéma, a été fière de l'emploi du temps que vous avez fais pour lui.…","articleBody":"TAF: \nVotre père précédemment qui a son cinéma, a été fière de l'emploi du temps que vous avez fais pour lui.\nIl souhaite s'agrandir en créant son site. Pour ce faire, il vous sollicite pour créer un formulaire d'inscription.\n\nIl exige ceci :\n- Un champ de texte pour le nom\n- Un champ de texte pour le prénom\n- Choisir son sexe (Homme ou Femme ) parmis ces deux choix\n- choisir son âge compris entre 17 et 80\n- Un champ de texte pour l'adresse email (a rechercher puisqu'on ne l'a pas abordé, on ne peut pas tout voir)\n- Un champ mot de passe\n- Un autre pour confirmer le mot de passe\n\nUn bouton d'envoi du formulaire via la méthode POST sur la même page.\n\n\nLes commentaires sont pas obligés et la présentation grâce aux tableaux est facultative.\nBonne chance.\n\nOn corrige mardi avant le prochain cours","datePublished":"2023-06-26T20:30:34Z","dateModified":"2023-06-26T20:30:34Z","author":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"publisher":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":200},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/150","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/150","mainEntityOfPage":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/150","headline":"𝕃𝕖𝕤 𝕗𝕠𝕣𝕞𝕦𝕝𝕒𝕚𝕣𝕖𝕤 (suite et fin) Les attributs supplémentaires des balises d'un formulaire - min et max : prenn…","articleBody":"𝕃𝕖𝕤 𝕗𝕠𝕣𝕞𝕦𝕝𝕒𝕚𝕣𝕖𝕤 (suite et fin)\n\nLes attributs supplémentaires des balises d'un formulaire\n\n- min et max : prennent comme valeur un nombre. S'intégre dans les zone de saisie numérique (number, tel, mais aussi range) et ont pour rôle de définir un quota minimum et un quota maximum à ne pas dépasser.\n\n- placeholder : permet de renseigner un texte qui sera visible mais remplacer dès que l'utilisateur aura saisie au moins un caractère. Si elle est vide, la valeur de cet attribut sera de nouveau visible.\n\n- value : est la value que prendra le champ de saisie. Pour le type texte , la valeur de l'attribut value sera bel et bien visible et directement utilisable.\n\n- minlength et maxlength permettent de définir les caractères respectivement minimales et maximales d'un champ.\nEx: on souhaite que le mot de passe doit d'un minimum de 3 caractères et d'un maximum de 50 on écrira :\n \n\n- required : force le navigateur a bloqué l'envoi du formulaire si le ou les champ(s) qui contient (ent) cet attribut est (sont) vide(s).\nEx : va bloqué l'envoi du formulaire si ce champ est vide.","datePublished":"2023-06-26T20:20:06Z","dateModified":"2023-06-26T20:20:06Z","author":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"publisher":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":183},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/149","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/149","mainEntityOfPage":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/149","headline":"𝕃𝕖𝕤 𝕗𝕠𝕣𝕞𝕦𝕝𝕒𝕚𝕣𝕖𝕤 Avant, il était difficile d'interagir avec nos utilisateurs. Les utilisateurs étaient comme d…","articleBody":"𝕃𝕖𝕤 𝕗𝕠𝕣𝕞𝕦𝕝𝕒𝕚𝕣𝕖𝕤 \n\nAvant, il était difficile d'interagir avec nos utilisateurs. Les utilisateurs étaient comme des spectateurs.\nDepuis l'arrivée des formulaires, ce fléau n'est plus un problème.\n\nLes formulaires sont donc un bon moyen de pouvoir interagir avec nos visiteurs.\n\nPour déclarer un formulaire, il faudrait commencer par la balise :\n \n\n😅 Évidemment, écrire juste celà ne suffit, vous vous en doutez bien.\n\nLa balise\n \na besoin de 2 à 3 attributs. Le 3e utilisé généralement lors du transfert de fichiers vers le serveur (upload). Il s'agit de :\n- action qui va indiqué où seront envoyés la ou les données collectées par le formulaire\n- method qui va indiqué la façon ou la méthode par laquelle les informations collectées seront transmises. L'attribut method prend deux (02) valeurs : GET ou POST\n • La méthode GET : permet d'envoyer les données via l'URL.\n\nUne URL est nom unique qui sert a identifié un site web.\nEx: Pour le réseau social Facebook, son URL est : https://facebook.com\n\nPour revenir à notre méthode GET, Les données transitent par l'URL sous forme identifiant=valeur !\nReprenons le site de Facebook et supposent que nous utilisons la méthode GET et que les données sont renvoyées sur la même page.\nSupposons également que Facebook ne demande que notre adresse mail.\nVoici un exemple de transmission d'information via la méthode GET :\nhttps://facebook.com/?mail=exemple@example.com\n\nOn dit que GET est la méthode la moins sécurisée en matière de sécurité, car comme elle transitent par l'URL, elles peuvent être modifiés et rendre les données non cohérentes !\n\n • La méthode POST : c'est la méthode la plus sur, car les données transitent entre via un flux propre gérer par le navigateur. Ainsi les données envoyées sont non modifiables et plus sûre !\n\n\nLes autres balises d'un formulaire\nLa principale balise d'un formulaire est la balise :\n \n(balise orpheline)\n\n \nnous permet de créer une zone de saisie uni-ligne (sous une seule ligne de frappe en apparence)\n\nIl existe différents types de zones saisie, et c'est au rôle de l'attribut type qu'on précisera celle qu'on voudrait utilisée.\n\n- \n: zone de texte (contenant lettres, chiffres, symbole etc...) visible.\n\n- \n: zone de saisie numérique (contenant uniquement les chiffres positifs ou négatifs)\n\n- \n: zone de saisie pour les numéros de téléphone (pas de chiffres négatifs, l'acceptation aussi du signe (+) ou de l'espace ( ) est permise.)\n\n- \n: permet de définir une zone de saisie donc les caractères sont masqués \n\n- \n: Permet de définir une value a l'aide d'un slide. Pour qu'elle fonctionne on aura besoin de deux attributs de plus (min et max qu'on verra plus tard).\n\n- \n: permet de définir une zone de sélection de la date.\n\n- \n: permet de créer une palette de sélection de couleur\n\n- \npour choisir une option parmi plusieurs\n\n- pour choisir plusieurs options parmi plusieurs \n\nÉvidemment, nous n'allons pas lister toutes les valeurs pour l'attribut type.\n\n\nLa balise de sélection : \n\n .\nPour que cette balise fonctionne, elle a besoin d'au moins une balise \n\n et cette dernière a besoin d'une valeur qu'on donnera grâce à l'attribut value !\n\nSyntaxe :\n\n\n\n\nLa zone de saisie multi-ligne (écriture sur plusieurs lignes avec possibilité de faire des retours à la ligne) : \n` !","datePublished":"2023-06-26T20:10:07Z","dateModified":"2023-06-26T20:10:07Z","author":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"publisher":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":191},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/148","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/148","mainEntityOfPage":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/148","headline":"𝕃𝕖𝕤 𝕔𝕠𝕞𝕞𝕖𝕟𝕥𝕒𝕚𝕣𝕖𝕤 Comme vu précédemment, ils sont très utiles. Imaginez un seul instant que vous avez travaill…","articleBody":"𝕃𝕖𝕤 𝕔𝕠𝕞𝕞𝕖𝕟𝕥𝕒𝕚𝕣𝕖𝕤\n\nComme vu précédemment, ils sont très utiles.\nImaginez un seul instant que vous avez travaillé sur un projet, puis vous décidez de le mettre à jour après un très long moment. Il est fort probable que vous ne vous retrouvez plus ou alors, vous vous retrouvez difficilement. Le meilleur moyen pour ce faire est de commenter son code. \n\nUn commentaire est alors un indice pu une explication de son code. Utiles par exemple pour des travaux en équipe, ou pour donner des leçons ou même encore pour se souvenir de comment notre code fonctionne après une longue absence.\n\nSyntaxe :\n \n\nNB: Un commentaire est ignorer lorsque de l'interprétation de nos pages web.\n\n\n𝕃𝕖𝕤 𝕓𝕒𝕝𝕚𝕤𝕖𝕤 𝕕𝕖 𝕞𝕚𝕤𝕖 𝕖𝕟 𝕗𝕠𝕣𝕞𝕖 \n- Mettre le texte en gras en HTML :\n Notre texte \nou alors\n Notre texte \n\n- Mettre le texte en italique en HTML :\n Notre texte \n\n- Mettre le texte souligné en HTML :\n Notre texte \n\n- Mettre le texte barré en HTML :\n ~~Notre texte~~ \nou alors\n ~~Notre texte~~\n\n- Faire défiler le texte :\n Notre texte \n\n\n- Surligné le texte :\n Notre texte","datePublished":"2023-06-26T20:01:01Z","dateModified":"2023-06-26T20:01:01Z","author":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"publisher":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":185},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/147","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/147","mainEntityOfPage":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/147","headline":"Bonsoir à tous, on se retrouve aujourd'hui pour continuer avec un nouveau tuto sur l'HTML. Votre environnemen…","articleBody":"Bonsoir à tous, on se retrouve aujourd'hui pour continuer avec un nouveau tuto sur l'HTML.\n\nVotre environnement de travail étant déjà prêt, vous serez invité à tester des codes et à faire de petits exercices.\n\nLet's go...\nInstallez-vous bien 😊","datePublished":"2023-06-26T20:00:42Z","dateModified":"2023-06-26T20:00:42Z","author":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"publisher":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":175}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/146","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/146","mainEntityOfPage":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/146","headline":"Coding Tech","datePublished":"2023-06-26T19:59:01Z","dateModified":"2023-06-26T19:59:01Z","author":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"publisher":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":180}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/145","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/145","mainEntityOfPage":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/145","headline":"Coding Tech","datePublished":"2023-06-26T19:55:02Z","dateModified":"2023-06-26T19:55:02Z","author":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"publisher":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":181}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/144","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/144","mainEntityOfPage":"https://telemetr.io/en/channels/1817367665-ishigami_techs/posts/144","headline":"Bonsoir à tous, retrouvez la correction de ce devoir dans le groupe de discussion du canal : https://t.me/+wA…","articleBody":"Bonsoir à tous, retrouvez la correction de ce devoir dans le groupe de discussion du canal :\n\nhttps://t.me/+wA27vACOEU8xZDM8","datePublished":"2023-06-26T19:03:01Z","dateModified":"2023-06-26T19:03:01Z","author":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"publisher":{"@type":"Organization","name":"Coding Tech","url":"https://telemetr.io/en/channels/1817367665-ishigami_techs","image":"https://img.tlmtr.io/c/1YZulH/5902132427848006717?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":206},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1}]}}]}

400

HTML n'est pas la que pour la structuration, il nous permet d'introduire également des ressources multimédias sur notre site. Parmi lesquels nous avons : 𝕃'𝕒𝕦𝕕𝕚𝕠 𝕖𝕥 𝕝𝕒 𝕍𝕚𝕕𝕖𝕠 L'audio ou la vidéo sont incontournables maintenant avec l'avancée technologique qu'on a maintenant. Pour introduire une vidéo ou audio sur son site nous aurons besoin de ces balises <audio></audio> et <video></video> pour respectivement l'audio et la vidéo. Nous aurons ensuite besoin d'indiquer : La source via l'attribut src Les boutons de contrôles via l'attribut controls Le démarrage de la vidéo ou audio après le chargement du site via l'attribut autoplay (facultatif) La répétition via l'attribut loop (facultatif). Ex : - Audio : <audio src="nom_fichier.extension" controls></audio> - Vidéo : <video src="nom_fichier.extension" controls></video> Ajouter des médias sur son site c'est bien, sauf que quelques extension de fichiers peuvent être lu ou pas en fonction des navigateur en dépend de la compatibilité de ce dernier. La gamme des extensions audio majoritairement soutenu sont : .mp3 et .ogg Tandis que ceux de la vidéo sont : .mp4, .mov, .flv Il peut également être possible de laisser un message à l'utilisateur si le navigateur ne soutient pas l'extension du fichier ou s'il ne prend pas en compte l'audio (on parle de navigateur obsolète) en plaçant dont notre message entre les balises audio ou vidéo. Ex:

<audio src="ma_music.ogg" controls>Votre navigateur ne soutient peut-être pas l'audio, ou cette extension de fichiers, veuillez mettre à jour votre navigateur si tel n'est pas le cas.</audio>

400

𝕃𝕖𝕤 𝕓𝕒𝕝𝕚𝕤𝕖𝕤 𝕕'𝕖𝕟𝕥𝕖𝕥𝕖 (suite) - Le titre de la page : <title>...</title>, elle nous permet de définir un titre pour la page actuel (c'est le seul élément qui sera visible dans le navigateur). Ex : <title>Découvrez les bienfaits du HTML 5</title> - Lier des fichiers externes aux fichiers en cours Cela se fait grâce à la balise <link />. Son utilisation de fait généralement grâce aux attributs rel qui indique le type de l'importation, href qui indique la cible ou la source du fichier et type qui désigne le MIME du fichier à importer. Seulement cette balise peut lier différentes formes de fichiers, la différence de l'importation se trouve grâce aux attributs rel et type. • Lier une feuille de style CSS a sa page : <link rel="stylesheet" type="text/css" href="lien_vers_le_fichier_css"> • Lier une police d'écriture à votre page web :

<link rel="preload" href="nom_police.extension" as="font"
      type="font/extension" crossorigin="anonymous">

Pour plus d'explications sur cette fonction de la balise <link />, poser vos questions ! • Importer une icône pour son site : <link rel="icon" href="nom_image.extension" type="image/extension"> - Lier des scripts externes à son fichier : <script>...</script> L'utilisation de cette balise nécessite deux attributs type qui indique le type de script à importer et SRC qui désigne la cible du fichier. Généralement, elle est utilisée pour l'importation d'un fichier JavaScript ou pour écrire du code JavaScript (dans ce cas, l'attribut src n'a pas lieu d'être mentionné !) Ex : Pour l'importation d'un fichier <script type="text/JavaScript" href="nom_fichier.extension"></script> Pour l'écriture d'un script dans le fichier en cours <script type="text/JavaScript">...</script> Pour autres balises de ce types, veuillez vous documenté de cela en faisant des recherches.

400

𝕃𝕖𝕤 𝕓𝕒𝕝𝕚𝕤𝕖𝕤 𝕕'𝕖𝕟𝕥𝕖𝕥𝕖 Elles sont généralement utilisé pour authentifier la connexion, le navigateur, les différents paramètres du site via le protocole http (hypertext transfert protocole) ou https (hypertext transfert protocole secure). Elles sont également nombreuses mais on verra juste les plus importantes ! NB : Ces balises se place généralement dans la balise <head>...</head> et donc n'ont aucun effet visuel. La plupart d'entre elles sont orphelines. - <meta /> : la principale balise d'entête. Elle définit plusieurs paramètres du site tel que : • L'encodage : <meta charset="utf-8"> (c'est L'encodage le plus utilisé) • L'adaptation écran : elle a besoin de deux attributs name avec la valeur viewport (le viewport est toute la partie visible de l'écran autrement dit la taille réelle de nos écrans) et content ( <meta name="viewport" content="width=device-width, initial-scale="1.0"> ). Elle peut par la même occasion interdire ou accepter le zoom. • La redirection : on peut vouloir rédiger un utilisateur vers une autre page de son site de façon immédiate ou encore après un intervalle de temps. Pour une redirection immédiate, le contenu de la page courante ne sera pas vu, puisqu'il sera immédiatement rédiger ! <meta http-equiv="refresh" content="url=site_ou_page_à_rediriger" /> Pour une redirection après un certain délai qui sera donnée en seconde, indiqué cette valeur dans l'attribut content suivi de l'URL de la page ou du site vers lequel on souhaite rediriger le visiteur. Si on souhaite rediriger après 5 minutes un utilisateur, on calculera le temps en seconde càd 5*60 = 300secs. <meta http-equiv="Refresh" content="300; url=site_ou_page_à_rediriger" /> • L'auteur de la page web : utile pour indiquer que c'est vous qui avez fait la page qu'il visite (seulement à un programmeur qui voudra le savoir). Cette balise aura besoin des attributs name avec pour valeur author et content qui aura pour valeur votre nom. <meta name="author" content="𝐙𝐨𝐧𝐞 𝐂𝐨𝐝𝐢𝐧𝐠"> • La description de la page en question : utile pour se référencer sur les moteurs de recherche (pour faire voir son site sur les moteurs de recherche). On aura besoin des attributs name avec pour valeur description et content avec comme valeur la description du site. <meta name="description" content="Tuto, apprentissage pour tous : découvrez les avantages du langage HTML"> • Les mots clés : utile pour se référencer. Un utilisateur va généralement taper des mots clés comme : apprendre, HTML5, apprendre le web lorsqu'il cherche a apprendre, et non votre nom de domaine. Pour ce faire, pour que votre site apparaissent lorsqu'il fait cette recherche, votre site dois disposé ses mots clés. <meta name="keywords" content="apprendre, HTML5, apprendre le web">

400

sticker.webp0.03 KB

400

Bonsoir à tous, on se retrouve aujourd'hui pour continuer avec un nouveau tuto sur l'HTML. Votre environnement de travail étant déjà prêt, vous serez invité à tester des codes et à faire de petits exercices. Let's go... Installez-vous bien 😊

400

AnimatedSticker.tgs0.24 KB

400

☑️Notez nous 😊

Anonymous voting

400

sticker.webp0.08 KB

400

Un bon programmeur est celui qui teste tout ce qu'on lui montre... Si tu veux tester, maintien ton doigt sur un des codes et il sera instantanément copier. Colle le dans ton éditeur, et pour créer un fichier réfère toi au 𝕥𝕙𝕖𝕞𝕖 𝟶 vu précédemment et plus précisément sur 𝔼𝕥𝕦𝕕𝕖 𝕕'𝕦𝕟 𝕖𝕕𝕚𝕥𝕖𝕦𝕣 𝕕𝕖 𝕥𝕖𝕩𝕥𝕖. Sinon, envoi ton problème ou pose ta question dans le groupe de discussion directement ici : https://t.me/+wA27vACOEU8xZDM8

400

𝕃𝕖𝕤 𝕓𝕒𝕝𝕚𝕤𝕖𝕤 𝕤𝕖𝕞𝕒𝕟𝕥𝕚𝕢𝕦𝕖𝕤 (suite et fin) - La balise d'article : <article>...</article>, comme son nom l'indique, elle indique au navigateur que voici un des articles de la section. Un article peut être une partie des nombreuses faces d'un thème qu'on peut aborder. Ex: Si je parle d'informatique dans mon site et que je veux parler de HTML, CSS et JavaScript Une <section>...</section> parlera de HTML Un <article>...</article> parlera des balises de type mise en forme Un autre <article>...</article> parlera des balises sémantiques par exemple. - La balise de contenu associé : <aside>...</aside>. Cette balise est destiné au contenu indirectement lié à l'article lui-même c'est à dire , elle parle d'un sujet annexe à l'article qu'on propose où est généralement utile pour faire des publicités presqu'en rapport avec l'article. Ex: Si je parle d'informatique, Dans mon <article>...</article> je parle de HTML, le contenu annexe <aside>...</aside> pourrait proposer un exemple sur le XML par exemple. Il existe de nombreux autres types de balises sémantiques et paramétriques, faites des recherches dessus. A la fin du cours, je vous proposerai un PDF regroupant une très large gamme de balises en général, y compris les balises sémantiques.

400

𝕃𝕖𝕤 𝕓𝕒𝕝𝕚𝕤𝕖𝕤 𝕤𝕖𝕞𝕒𝕟𝕥𝕚𝕢𝕦𝕖𝕤 (suite) - La balise de navigation : <nav>...</nav>. Cette balise indique au navigateur que ceci est mon volet (ou menu) de navigation. C'est généralement ici qu'on placera le menu du site. Cette balise <nav>...</nav> sera elle même placée dans le <header>...</header>. - Les balises de contenance : <div>...</div> et

<span>...</span>

• <div>...</div> est une balise de type block qui peut contenir d'autres balises. Elle n'a pas d'effet visuel mais elle indique au navigateur que voici un conteneur. Utile lorsqu'on veut appliquer du style CSS sur une grande partie du code. • <span>...</span> est une balise de type inline qui peut également contenir d'autres balises. Utile lorsqu'on veut appliquer du style à une partie de notre code. Une lettre, un mot, ou phrase par exemple. Pour un paragraphe où des paragraphes, l'utilisation de <div>...</div> est recommandé ! - La balise de paragraphe : <p>...</p>. Elle indique au navigateur qu'on souhaite faire un paragraphe. - La balise de section : <section>...</section> : elle indique au navigateur qu'on crée une section (un thème par exemple différents d'un autre). Elle est similaire à la balise <div>...</div>. Elle peut également contenir un <header>...</header> mais aussi un <footer>...</footer> ou encore une <nav>...</nav>... Bref tous les autres types de balises.

400

𝕃𝕖𝕤 𝕓𝕒𝕝𝕚𝕤𝕖𝕤 𝕤𝕖𝕞𝕒𝕟𝕥𝕚𝕢𝕦𝕖𝕤 Les balises sémantiques sont ces balises qu'on utilise généralement et donc on ne voit pas d'effet visuel. La sémantique est sur le fait qu'elle donne des informations précises au navigateur afin que votre site soit valide au près des moteurs de recherche comme Google, Yahoo, etc... Elles sont nombreuses, et on ne pourrait pas tous les voir. Parmi celle qu'on verra, on a : - La balise d'entête : <header>...</header> : c'est une balise de type block. Elle peut contenir d'autres balises, et sa valeur sémantique est d'indiquer au navigateur et moteurs de recherche qu'on est sur l'entête du site. C'est généralement ici qu'on placera les menu pour un site. - La balise de pied de page : <footer>...</footer> : également de type block, elle indique au navigateur que : ceci est le pied de page du site. On placera dans cette balise les liens externes, à propos du site, les services et partenaires et généralement les contacts du site, sans oublier le copyright.

400

TAF: Votre père précédemment qui a son cinéma, a été fière de l'emploi du temps que vous avez fais pour lui. Il souhaite s'agrandir en créant son site. Pour ce faire, il vous sollicite pour créer un formulaire d'inscription. Il exige ceci : - Un champ de texte pour le nom - Un champ de texte pour le prénom - Choisir son sexe (Homme ou Femme ) parmis ces deux choix - choisir son âge compris entre 17 et 80 - Un champ de texte pour l'adresse email (a rechercher puisqu'on ne l'a pas abordé, on ne peut pas tout voir) - Un champ mot de passe - Un autre pour confirmer le mot de passe Un bouton d'envoi du formulaire via la méthode POST sur la même page. Les commentaires sont pas obligés et la présentation grâce aux tableaux est facultative. Bonne chance. On corrige mardi avant le prochain cours

400

𝕃𝕖𝕤 𝕗𝕠𝕣𝕞𝕦𝕝𝕒𝕚𝕣𝕖𝕤 (suite et fin) Les attributs supplémentaires des balises d'un formulaire - min et max : prennent comme valeur un nombre. S'intégre dans les zone de saisie numérique (number, tel, mais aussi range) et ont pour rôle de définir un quota minimum et un quota maximum à ne pas dépasser. - placeholder : permet de renseigner un texte qui sera visible mais remplacer dès que l'utilisateur aura saisie au moins un caractère. Si elle est vide, la valeur de cet attribut sera de nouveau visible. - value : est la value que prendra le champ de saisie. Pour le type texte , la valeur de l'attribut value sera bel et bien visible et directement utilisable. - minlength et maxlength permettent de définir les caractères respectivement minimales et maximales d'un champ. Ex: on souhaite que le mot de passe doit d'un minimum de 3 caractères et d'un maximum de 50 on écrira : <input type=

"password" minlength="3" maxlength="50"> 

- required

: force le navigateur a bloqué l'envoi du formulaire si le ou les champ(s) qui contient (ent) cet attribut est (sont) vide(s). Ex : <input type="text" placeholder="votre nom svp" required> va bloqué l'envoi du formulaire si ce champ est vide.

400

𝕃𝕖𝕤 𝕗𝕠𝕣𝕞𝕦𝕝𝕒𝕚𝕣𝕖𝕤 Avant, il était difficile d'interagir avec nos utilisateurs. Les utilisateurs étaient comme des spectateurs. Depuis l'arrivée des formulaires, ce fléau n'est plus un problème. Les formulaires sont donc un bon moyen de pouvoir interagir avec nos visiteurs. Pour déclarer un formulaire, il faudrait commencer par la balise :

 <form>...</form>

😅 Évidemment, écrire juste celà ne suffit, vous vous en doutez bien. La balise

 <form>...</form>

a besoin de 2 à 3 attributs. Le 3e utilisé généralement lors du transfert de fichiers vers le serveur (upload). Il s'agit de : - action qui va indiqué où seront envoyés la ou les données collectées par le formulaire - method qui va indiqué la façon ou la méthode par laquelle les informations collectées seront transmises. L'attribut method prend deux (02) valeurs : GET ou POST • La méthode GET : permet d'envoyer les données via l'URL. Une URL est nom unique qui sert a identifié un site web. Ex: Pour le réseau social Facebook, son URL est : https://facebook.com Pour revenir à notre méthode GET, Les données transitent par l'URL sous forme identifiant=valeur ! Reprenons le site de Facebook et supposent que nous utilisons la méthode GET et que les données sont renvoyées sur la même page. Supposons également que Facebook ne demande que notre adresse mail. Voici un exemple de transmission d'information via la méthode GET : https://facebook.com/?mail=exemple@example.com On dit que GET est la méthode la moins sécurisée en matière de sécurité, car comme elle transitent par l'URL, elles peuvent être modifiés et rendre les données non cohérentes ! • La méthode POST : c'est la méthode la plus sur, car les données transitent entre via un flux propre gérer par le navigateur. Ainsi les données envoyées sont non modifiables et plus sûre ! Les autres balises d'un formulaire La principale balise d'un formulaire est la balise :

 <input />

(balise orpheline)

 <input />

nous permet de créer une zone de saisie uni-ligne (sous une seule ligne de frappe en apparence) Il existe différents types de zones saisie, et c'est au rôle de l'attribut type qu'on précisera celle qu'on voudrait utilisée. - <input type="text" /> : zone de texte (contenant lettres, chiffres, symbole etc...) visible. -

<input type="number" />

: zone de saisie numérique (contenant uniquement les chiffres positifs ou négatifs) -

 <input type="tel" />

: zone de saisie pour les numéros de téléphone (pas de chiffres négatifs, l'acceptation aussi du signe (+) ou de l'espace ( ) est permise.) -

<input type="password" />

: permet de définir une zone de saisie donc les caractères sont masqués -

<input type="range" />

: Permet de définir une value a l'aide d'un slide. Pour qu'elle fonctionne on aura besoin de deux attributs de plus (min et max qu'on verra plus tard). -

<input type="date" />

: permet de définir une zone de sélection de la date

<input type="color" />

: permet de créer une palette de sélection de couleur -

<input type="radio" />

pour choisir une option parmi plusieurs -<input type="checkbox"> pour choisir plusieurs options parmi plusieurs

Évidemment, nous n'allons pas lister toutes les valeurs pour l'attribut type. La balise de sélection

 : 
<select>...</select>
 .

Pour que cette balise fonctionne, elle a besoin d'au moins une balise

<option>...</option>

et cette dernière a besoin d'une valeur qu'on donnera grâce à l'attribut value ! Syntaxe :

<select>
   <option value="">Sélectionnez une option</option>
   <option value="Géographie">Géographie</option>
   <option value="Informatique">Informatique</option>
 </select>

La zone de saisie multi-ligne (écriture sur plusieurs lignes avec possibilité de faire des retours à la ligne)

 : 
<textarea></textarea>` !

400

𝕃𝕖𝕤 𝕔𝕠𝕞𝕞𝕖𝕟𝕥𝕒𝕚𝕣𝕖𝕤 Comme vu précédemment, ils sont très utiles. Imaginez un seul instant que vous avez travaillé sur un projet, puis vous décidez de le mettre à jour après un très long moment. Il est fort probable que vous ne vous retrouvez plus ou alors, vous vous retrouvez difficilement. Le meilleur moyen pour ce faire est de commenter son code. Un commentaire est alors un indice pu une explication de son code. Utiles par exemple pour des travaux en équipe, ou pour donner des leçons ou même encore pour se souvenir de comment notre code fonctionne après une longue absence. Syntaxe :

 <!-- Notre commentaire -->

NB: Un commentaire est ignorer lorsque de l'interprétation de nos pages web. 𝕃𝕖𝕤 𝕓𝕒𝕝𝕚𝕤𝕖𝕤 𝕕𝕖 𝕞𝕚𝕤𝕖 𝕖𝕟 𝕗𝕠𝕣𝕞𝕖 - Mettre le texte en gras en HTML :

 <b>Notre texte</b>

ou alors

 <strong>Notre texte</strong>

- Mettre le texte en italique en HTML :

 <i>Notre texte</i>

- Mettre le texte souligné en HTML :

 <u>Notre texte</u>

- Mettre le texte barré en HTML :

 <s>Notre texte</s>

ou alors

 <strike>Notre texte</strike>

- Faire défiler le texte :

 <marquee>Notre texte</marquee>

- Surligné le texte : <mark>Notre texte</mark>

400

Bonsoir à tous, on se retrouve aujourd'hui pour continuer avec un nouveau tuto sur l'HTML. Votre environnement de travail étant déjà prêt, vous serez invité à tester des codes et à faire de petits exercices. Let's go... Installez-vous bien 😊

400

sticker.webp0.03 KB

400

sticker.webp0.41 KB

400

Bonsoir à tous, retrouvez la correction de ce devoir dans le groupe de discussion du canal : https://t.me/+wA27vACOEU8xZDM8