diff options
Diffstat (limited to 'files/fr/learn/html/howto/index.md')
| -rw-r--r-- | files/fr/learn/html/howto/index.md | 159 |
1 files changed, 67 insertions, 92 deletions
diff --git a/files/fr/learn/html/howto/index.md b/files/fr/learn/html/howto/index.md index e5f130e8ca..bcc9479b69 100644 --- a/files/fr/learn/html/howto/index.md +++ b/files/fr/learn/html/howto/index.md @@ -7,131 +7,106 @@ tags: translation_of: Learn/HTML/Howto original_slug: Apprendre/HTML/Comment --- -<p>Une fois <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML">les bases acquises</a>, il n'existe pas de voie idéale pour apprendre {{Glossary("HTML")}}. Vous pouvez ensuite progresser à votre rythme, en utilisant les balises qui vous sont utiles. HTML n'est qu'un ensemble de balises que vous pouvez utiliser pour structurer votre document et lui ajouter des fonctionnalités supplémentaires. Dans les articles suivants, nous travaillerons sur différents exemples illustrant comment utiliser HTML pour résoudre des problèmes fréquents qu'on rencontre lorsqu'on développe pour le Web. Si vous avez besoin d'explications détaillées sur une balise HTML donnée, n'hésitez pas à consulter <a href="/fr/docs/Web/HTML/Reference">notre référence HTML</a>.</p> +Une fois [les bases acquises](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML), il n'existe pas de voie idéale pour apprendre {{Glossary("HTML")}}. Vous pouvez ensuite progresser à votre rythme, en utilisant les balises qui vous sont utiles. HTML n'est qu'un ensemble de balises que vous pouvez utiliser pour structurer votre document et lui ajouter des fonctionnalités supplémentaires. Dans les articles suivants, nous travaillerons sur différents exemples illustrant comment utiliser HTML pour résoudre des problèmes fréquents qu'on rencontre lorsqu'on développe pour le Web. Si vous avez besoin d'explications détaillées sur une balise HTML donnée, n'hésitez pas à consulter [notre référence HTML](/fr/docs/Web/HTML/Reference). -<h2 id="Cas_d'utilisation_fréquents">Cas d'utilisation fréquents</h2> +## Cas d'utilisation fréquents -<p>HTML permet de résoudre de nombreux problèmes qui se posent lors de la conception de sites web. Il est très probable que vous rencontriez au moins l'un de ces scénarios :</p> +HTML permet de résoudre de nombreux problèmes qui se posent lors de la conception de sites web. Il est très probable que vous rencontriez au moins l'un de ces scénarios : -<h3 id="Structure_de_base">Structure de base</h3> +### Structure de base -<p>En HTML, tout commence par la structure du document. Si vous débutez avec HTML, vous devriez démarrer avec :</p> +En HTML, tout commence par la structure du document. Si vous débutez avec HTML, vous devriez démarrer avec : -<ul> - <li><a href="/fr/docs/Apprendre/HTML/Comment/Cr%C3%A9er_un_document_HTML_simple">Comment créer un document HTML simple</a></li> - <li><a href="/fr/docs/Apprendre/HTML/Comment/D%C3%A9couper_une_page_web_en_sections_logiques">Comment diviser une page web en sections logiques</a></li> - <li><a href="/fr/docs/Apprendre/HTML/Comment/Mettre_en_place_une_hi%C3%A9rarchie_de_titres">Comment organiser une hiérarchie de titres</a></li> -</ul> +- [Comment créer un document HTML simple](/fr/docs/Apprendre/HTML/Comment/Cr%C3%A9er_un_document_HTML_simple) +- [Comment diviser une page web en sections logiques](/fr/docs/Apprendre/HTML/Comment/D%C3%A9couper_une_page_web_en_sections_logiques) +- [Comment organiser une hiérarchie de titres](/fr/docs/Apprendre/HTML/Comment/Mettre_en_place_une_hi%C3%A9rarchie_de_titres) -<h3 id="Sémantique_de_base_pour_le_texte">Sémantique de base pour le texte</h3> +### Sémantique de base pour le texte -<p>Le but de HTML est de fournir des informations sémantiques (c'est-à-dire sur le sens) d'un document et de ce qui le compose. HTML permettra donc de répondre à de nombreuses questions sur le sens du texte qu'on veut utiliser dans un document.</p> +Le but de HTML est de fournir des informations sémantiques (c'est-à-dire sur le sens) d'un document et de ce qui le compose. HTML permettra donc de répondre à de nombreuses questions sur le sens du texte qu'on veut utiliser dans un document. -<ul> - <li><a href="/fr/docs/Learn/HTML/Howto/Create_list_of_items_with_HTML">Comment créer une liste d'éléments en HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">Comment faire pour accentuer un contenu</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">Comment indiquer qu'un texte est important</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Display_computer_code_with_HTML">Comment afficher du code informatique avec HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Indicate_exponential_notation_with_HTML">Comment indiquer une notation exponentielle avec HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Provide_contact_information_within_a_webpage">Comment fournir des informations de contact dans une page web</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Annotate_images_and_graphics">Comment annoter des images et des graphiques</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable">Comment marquer des abréviations et les rendre compréhensibles</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Add_citations_to_webpages">Comment ajouter des citations à une page web</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Define_terms_with_HTML">Comment définir des termes en HTML</a></li> -</ul> -<h3 id="Les_hyperliens">Les hyperliens</h3> +- [Comment créer une liste d'éléments en HTML](/fr/docs/Learn/HTML/Howto/Create_list_of_items_with_HTML) +- [Comment faire pour accentuer un contenu](/fr/docs/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important) +- [Comment indiquer qu'un texte est important](/fr/docs/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important) +- [Comment afficher du code informatique avec HTML](/fr/docs/Learn/HTML/Howto/Display_computer_code_with_HTML) +- [Comment indiquer une notation exponentielle avec HTML](/fr/docs/Learn/HTML/Howto/Indicate_exponential_notation_with_HTML) +- [Comment fournir des informations de contact dans une page web](/fr/docs/Learn/HTML/Howto/Provide_contact_information_within_a_webpage) +- [Comment annoter des images et des graphiques](/fr/docs/Learn/HTML/Howto/Annotate_images_and_graphics) +- [Comment marquer des abréviations et les rendre compréhensibles](/fr/docs/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable) +- [Comment ajouter des citations à une page web](/fr/docs/Learn/HTML/Howto/Add_citations_to_webpages) +- [Comment définir des termes en HTML](/fr/docs/Learn/HTML/Howto/Define_terms_with_HTML) -<p>Les {{Glossary("hyperlien", "hyperliens")}} rendent la navigation très simple sur le web, ils peuvent être utilisés de différentes façons :</p> +### Les hyperliens -<ul> - <li><a href="/fr/docs/Learn/HTML/Howto/Create_a_hyperlink">Comment créer un hyperlien</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Create_list_of_items_with_HTML">Comment créer une table des matières en HTML</a></li> -</ul> +Les {{Glossary("hyperlien", "hyperliens")}} rendent la navigation très simple sur le web, ils peuvent être utilisés de différentes façons : -<h3 id="Images_et_multimédia">Images et multimédia</h3> +- [Comment créer un hyperlien](/fr/docs/Learn/HTML/Howto/Create_a_hyperlink) +- [Comment créer une table des matières en HTML](/fr/docs/Learn/HTML/Howto/Create_list_of_items_with_HTML) -<ul> - <li><a href="/fr/docs/Learn/HTML/Howto/Add_images_to_a_webpage">Comment ajouter des images à une page web</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">Comment ajouter une vidéo à une page web</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">Comment ajouter un contenu audio à une page web</a></li> -</ul> +### Images et multimédia -<h3 id="Script_et_mise_en_forme">Script et mise en forme</h3> +- [Comment ajouter des images à une page web](/fr/docs/Learn/HTML/Howto/Add_images_to_a_webpage) +- [Comment ajouter une vidéo à une page web](/fr/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage) +- [Comment ajouter un contenu audio à une page web](/fr/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage) -<p>HTML ne permet que de gérer la structure et le contenu d'un document. Pour régler les aspects de styles, on utilisera du {{glossary("CSS")}}, pour l'aspect interactif et script, on utilisera {{glossary("JavaScript")}}.</p> +### Script et mise en forme -<ul> - <li><a href="/fr/docs/Learn/HTML/Howto/Use_CSS_within_a_webpage">Comment utiliser CSS dans une page web</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">Comment utiliser JavaScript dans une page web</a></li> -</ul> +HTML ne permet que de gérer la structure et le contenu d'un document. Pour régler les aspects de styles, on utilisera du {{glossary("CSS")}}, pour l'aspect interactif et script, on utilisera {{glossary("JavaScript")}}. -<h3 id="Intégrer_du_contenu">Intégrer du contenu</h3> +- [Comment utiliser CSS dans une page web](/fr/docs/Learn/HTML/Howto/Use_CSS_within_a_webpage) +- [Comment utiliser JavaScript dans une page web](/fr/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage) -<ul> - <li><a href="/fr/docs/Learn/HTML/Howto/Embed_a_webpage_within_another_webpage">Comment intégrer une page web dans une autre page web</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Add_Flash_content_within_a_webpage">Comment ajouter du contenu Flash dans une page web</a></li> -</ul> +### Intégrer du contenu -<h2 id="Problèmes_avancés_ou_rares">Problèmes avancés ou rares</h2> +- [Comment intégrer une page web dans une autre page web](/fr/docs/Learn/HTML/Howto/Embed_a_webpage_within_another_webpage) +- [Comment ajouter du contenu Flash dans une page web](/fr/docs/Learn/HTML/Howto/Add_Flash_content_within_a_webpage) -<p>Au-delà des briques de bases qu'on peut assembler dans les exemples précédents, HTML reste très riche et offre des fonctionnalités avancées qui permettent de résoudre de nombreux problèmes complexes. Ces articles décrivent certains de ces problèmes, moins fréquents, et expliquent comment les résoudre :</p> +## Problèmes avancés ou rares -<h3 id="Les_formulaires">Les formulaires</h3> +Au-delà des briques de bases qu'on peut assembler dans les exemples précédents, HTML reste très riche et offre des fonctionnalités avancées qui permettent de résoudre de nombreux problèmes complexes. Ces articles décrivent certains de ces problèmes, moins fréquents, et expliquent comment les résoudre : -<p>Les formulaires correspondent à une structure HTML complexe qui permet d'envoyer des données d'une page web vers un serveur web. Nous vous invitons à suivre <a href="/fr/docs/Web/Guide/HTML/Formulaires">le guide dédié aux formulaires</a>. Vous pouvez commencer ici :</p> +### Les formulaires -<ul> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Comment créer un formulaire web simple</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment organiser un formulaire web</a></li> -</ul> +Les formulaires correspondent à une structure HTML complexe qui permet d'envoyer des données d'une page web vers un serveur web. Nous vous invitons à suivre [le guide dédié aux formulaires](/fr/docs/Web/Guide/HTML/Formulaires). Vous pouvez commencer ici : -<h3 id="Les_informations_tabulaires">Les informations tabulaires</h3> +- [Comment créer un formulaire web simple](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML) +- [Comment organiser un formulaire web](/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML) -<p>Certaines informations doivent être organisées en tableaux, sur des colonnes et des lignes. Les tableaux sont une des structures HTML les plus complexes et s'avèrent particulièrement difficiles à maîtriser de A à Z :</p> +### Les informations tabulaires -<ul> - <li><a href="/fr/docs/Learn/HTML/Howto/Create_a_data_spreadsheet">Comment créer un tableur où saisir de sdonnées</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Make_HTML_tables_accessible">Comment rendre accessibles les tableaux HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering">Comment optimiser le rendu d'un tableau HTML</a></li> -</ul> +Certaines informations doivent être organisées en tableaux, sur des colonnes et des lignes. Les tableaux sont une des structures HTML les plus complexes et s'avèrent particulièrement difficiles à maîtriser de A à Z : -<h3 id="La_représentation_de_données">La représentation de données</h3> +- [Comment créer un tableur où saisir de sdonnées](/fr/docs/Learn/HTML/Howto/Create_a_data_spreadsheet) +- [Comment rendre accessibles les tableaux HTML](/fr/docs/Learn/HTML/Howto/Make_HTML_tables_accessible) +- [Comment optimiser le rendu d'un tableau HTML](/fr/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering) -<ul> - <li><a href="/fr/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML">Comment représenter des valeurs numériques en HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">Comment associer du contenu lisible avec des structures de données informatiques arbitraires</a></li> -</ul> +### La représentation de données -<h3 id="Interactivité">Interactivité</h3> +- [Comment représenter des valeurs numériques en HTML](/fr/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML) +- [Comment associer du contenu lisible avec des structures de données informatiques arbitraires](/fr/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures) -<ul> - <li><a href="/fr/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML">Comment créer du contenu dépliable/repliable avec HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage">Comment ajouter des menus contextuels à une page web</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML">Comment créer des boîtes de dialogue avec HTML</a></li> -</ul> +### Interactivité -<h3 id="Sémantique_avancée_pour_les_éléments_textuels">Sémantique avancée pour les éléments textuels</h3> +- [Comment créer du contenu dépliable/repliable avec HTML](/fr/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML) +- [Comment ajouter des menus contextuels à une page web](/fr/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage) +- [Comment créer des boîtes de dialogue avec HTML](/fr/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML) -<ul> - <li><a href="/fr/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">Comment contrôler le passage à la ligne en HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion">Comment restituer des changements (du texte ajouté/retiré)</a></li> -</ul> +### Sémantique avancée pour les éléments textuels -<h3 id="Images_et_multimédia_avancés">Images et multimédia avancés</h3> +- [Comment contrôler le passage à la ligne en HTML](/fr/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking) +- [Comment restituer des changements (du texte ajouté/retiré)](/fr/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion) -<ul> - <li><a href="/fr/docs/Learn/HTML/Howto/Add_responsive_image_to_a_webpage">Comment ajouter une image adaptative (<em>responsive</em>) à une page web</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage">Comment ajouter une image vectorielle à une page web</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Comment ajouter une cartes de zones cliquables sur une image</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Create_dynamic_and_interactive_images">Comment créer des images dynamiques et interactives</a></li> -</ul> +### Images et multimédia avancés -<h3 id="L'internationalisation">L'internationalisation</h3> +- [Comment ajouter une image adaptative (_responsive_) à une page web](/fr/docs/Learn/HTML/Howto/Add_responsive_image_to_a_webpage) +- [Comment ajouter une image vectorielle à une page web](/fr/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage) +- [Comment ajouter une cartes de zones cliquables sur une image](/fr/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image) +- [Comment créer des images dynamiques et interactives](/fr/docs/Learn/HTML/Howto/Create_dynamic_and_interactive_images) -<p>HTML n'est pas monolingue. Il existe des outils qui permettent de résoudre les problèmes fréquents qui se posent lorsqu'on internationalise du contenu.</p> +### L'internationalisation -<ul> - <li><a href="/fr/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">Comment ajouter plusieurs langages sur une seule page web</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters">Comment gérer les caractères japonais (ruby)</a></li> - <li><a href="/fr/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML">Comment afficher des heures et des dates avec HTML</a></li> -</ul>
\ No newline at end of file +HTML n'est pas monolingue. Il existe des outils qui permettent de résoudre les problèmes fréquents qui se posent lorsqu'on internationalise du contenu. + +- [Comment ajouter plusieurs langages sur une seule page web](/fr/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage) +- [Comment gérer les caractères japonais (ruby)](/fr/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters) +- [Comment afficher des heures et des dates avec HTML](/fr/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML) |