Apprendre le HTML

Vidéo: [Cours HTML] Apprendre HTML de zéro

Contenu

Avancer d'un pas
Partie 1 sur 2: Apprendre les bases du HTML
Partie 2 sur 2: Apprendre le HTML avancé
Conseils
Mises en garde
Nécessités

HTML est l'abréviation de Langage Signalétique Hyper Text, c'est le code ou Langue qui est utilisé pour créer des sites Web. Cela peut sembler compliqué si vous n'avez jamais programmé auparavant, mais pour l'essayer, il vous suffit d'un simple programme de traitement de texte et d'un navigateur Internet. Vous pouvez reconnaître du HTML à partir de forums, de profils en ligne ou d'articles de wikiHow. Le HTML est une ressource utile pour quiconque utilise Internet, et l'apprentissage du HTML peut prendre moins de temps que prévu.

Avancer d'un pas

Partie 1 sur 2: Apprendre les bases du HTML

Ouvrez un document HTML. La plupart des programmes de traitement de texte, notamment Notepad ou Word pour Windows et Text Editor pour Mac, peuvent être utilisés pour créer des documents HTML. Ouvrez un nouveau document et sélectionnez Fichier → Enregistrer sous dans le menu supérieur pour enregistrer votre document en tant que page Web, ou modifiez l'extension de fichier de ".doc", ".rtf" ou autre chose en ".html" ou ".htm ".
- Vous pouvez maintenant voir un avertissement indiquant que votre document est en cours de modification du format RTF (Rich Text Format) au format «texte brut» et que certaines options de mise en forme et images ne sont pas enregistrées correctement. Vous pouvez ignorer cet avertissement; Les documents HTML n'utilisent pas ces options.
- Les fichiers .html et .htm sont identiques. Cela fonctionne tous les deux.
Affichez votre document avec un navigateur. Enregistrez votre document vierge, fermez-le, puis double-cliquez sur le document à l'emplacement où il a été enregistré pour l'ouvrir à nouveau. Votre document doit maintenant être ouvert par votre navigateur en tant que page Web vierge. Si cela ne fonctionne pas, faites glisser l'icône du fichier vers la barre d'adresse de votre navigateur. Plus tard, si vous modifiez votre document HTML en suivant les étapes de cet article, vous reviendrez dans le navigateur pour vérifier à quoi ressemblent les modifications du code.
- Remarque: votre page Web n'est pas encore en ligne. La page n'est pas accessible aux autres et vous n'avez pas besoin d'une connexion Internet fonctionnelle pour la tester. Vous utilisez simplement votre navigateur pour "lire" le document HTML comme s'il s'agissait d'un site Web.
Comprenez ce que sont les «balises». Les balises ne sont pas visibles sur la page Web finale, comme le peut le texte normal. Les balises indiquent à votre navigateur comment afficher la page et le contenu de la page. La balise de départ contient des instructions. Par exemple, il peut indiquer au navigateur d'afficher le texte en gras. La balise de fin est nécessaire pour indiquer au navigateur où les instructions s'appliquent: dans cet exemple, tout le texte entre les balises de début et de fin est en gras. Les balises de fin sont également placées entre parenthèses, mais une barre oblique suit la première parenthèse.
- Écrivez les balises de départ entre parenthèses: c'est le jour de départ>
- Écrivez les balises de fin entre parenthèses, mais mettez une barre oblique après la première parenthèse: /c'est la balise de fermeture>)
- Lisez plus loin dans l'article comment écrire des balises fonctionnelles. Dans cette étape, il vous suffit de vous rappeler de quelle manière écrire les balises:> et />.
- Dans d'autres cours HTML, les balises sont également appelées "éléments" et le texte entre les balises d'ouverture et de fermeture est également appelé "contenu de l'élément".
Écrivez votre première balise html>. Chaque document HTML commence par un html>étiquette et se termine par un / html>étiqueter. Cela indique au navigateur que tout ce qui se trouve entre ces balises est écrit en HTML. Ajoutez ces balises à votre document:
- Écrivez html> en haut de votre document.
- Appuyez plusieurs fois sur Entrée ou Retour pour vous donner un peu d'espace, puis écrivez / html>
- Souviens-toi tout dans cet article entre ces deux balises.
Intégrez la tête> à votre document. Entre les balises html> et / html> vous écrivez un tête>balise de début et un / tête>-end balise. Faites de nouveau de l'espace entre ces balises. Tout ce qui est écrit entre ces balises ne sera pas visible sur la page Web elle-même. Essayez les étapes suivantes et voyez si vous pouvez voir où les informations apparaissent:
- Écrivez entre les balises head> et / head>: titre> et / titre>
- Entre les balises title> et / title> vous écrivez: Comment apprendre le HTML (avec images) - wikiHow.
- Enregistrez le document et ouvrez-le dans un navigateur (ou enregistrez le document et actualisez la page dans le navigateur si la page était encore ouverte). Voyez-vous ce que vous venez d'écrire en haut de la page, au-dessus de la barre d'adresse?
Créez un corps> section. Tout le reste dans ce document pour débutant est placé dans la section body> et il est affiché sur la page Web. Après la balise / tête>, mais pour la balise / html> que vous écrivez corps> et / corps>. Tout ce que nous discutons plus loin dans cet article, nous le plaçons entre les balises body. Vous devriez maintenant avoir un document qui ressemble à ceci (sans les puces):
- html>
- tête>
- title> apprendre le HTML - wikiHow / title>
- / tête>
- corps>
- / corps>
- / html>
Ajoutez du texte dans différents styles. Il est maintenant temps que vous commenciez à écrire quelque chose qui sera réellement visible dans le navigateur! Tout ce que vous écrivez dans les balises de corps sera visible dans le navigateur après avoir enregistré les modifications et actualisé la page dans le navigateur. Écrivez ne pas quelque chose avec les signes et >parce que votre navigateur interprétera cela comme une instruction HTML au lieu de texte brut. Ecrire par exemple Bonjour le monde! (Anglais pour "Hello world!", Ceci est le texte standard global comme premier exemple dans n'importe quel cours de programmation dans un langage de programmation particulier) ou autre chose, et placez les balises suivantes avant et après le texte et voyez ce qui se passe:
- em> Bonjour tout le monde! / em> ressemble à du texte en italique: Bonjour le monde!
- strong> Bonjour tout le monde! / strong> ressemble à du texte en gras: Bonjour le monde!
- s> Bonjour tout le monde! / s> ressemble à du texte barré: ~~Bonjour le monde!~~
- sup> Bonjour tout le monde! / sup> ressemble à un exposant:
- sub> Bonjour tout le monde! / sub> ressemble à la légende: _{Bonjour le monde!}
- Essayez des combinaisons: comment voit em> strong> Bonjour tout le monde! / strong> / em> Sortez?
Divisez votre texte en paragraphes. Si vous mettez différentes lignes de texte dans votre document, vous verrez que toutes les lignes sont placées les unes après les autres. Vous devez programmer vous-même de nouvelles lignes et des lignes vierges:
- p> Ceci est une section séparée./p>
- Cette phrase est sur la première ligne et cette phrase sur la suivante.
  C'est la première balise que nous rencontrons qui n'a pas besoin de balise de fin! Nous appelons une telle balise balise vide.
- Créez des en-têtes pour clarifier les noms des sections:
  h1> en-tête / h1>: le plus grand en-tête possible
  h2> en-tête / h2> (l'en-tête à 2 niveaux)
  h3> en-tête / h3> (l'en-tête à 3 niveaux)
  h4> en-tête / h4> (l'en-tête à 4 niveaux)
  h5> en-tête / h5> (le plus petit en-tête possible)
Apprenez à créer des listes. Il existe plusieurs façons de créer des listes sur une page Web. Essayez les méthodes suivantes pour découvrir ce que vous préférez. Notez qu'une paire de balises est placée autour de la liste entière (comme les balises ul> et / ul> pour les listes non ordonnées) et qu'une paire de balises différente est placée autour de chaque élément de la liste, comme li> et / li> .
- Utilisez le code suivant pour créer des listes à puces:
  ul> li> Un élément / li> li> Un autre élément / li> li> Un autre élément / li> / ul>
- Ou ce code pour créer des listes numérotées:
  ol> li> Item 1 / li> li> Item 2 / li> li> Item 3 / li> / ol>
- Ou ce code pour créer une soi-disant liste de définitions:
  dl> dt> Café / dt> dd> - Boisson chaude / jj> dt> Lait / dt> jj> - Boisson froide / jj> / dl>
Rendez votre page plus attrayante avec de nouvelles lignes, des lignes horizontales et des images. Il est maintenant temps de commencer à ajouter d'autres éléments à votre page. Essayez les balises suivantes (l'image doit être publiée en ligne pour que vous puissiez utiliser un lien vers l'image):
- Insérez une ligne: br> ou alors hr>
- Insérer des images: img src = "the_url_of_your_image">
Insérez des liens vers d'autres endroits sur la page. Vous pouvez également utiliser ce code pour créer un lien vers d'autres pages et sites Web, mais comme vous n'avez pas encore de site Web, nous nous concentrerons sur les "ancres", qui sont des endroits spécifiques sur la page auxquels vous pouvez créer un lien:
- Tout d'abord, créez une ancre avec la balise a> au point de la page vers laquelle vous souhaitez créer un lien. Donnez à votre ancre un nom clair et facile à retenir:
  
  a name = "Tips"> C'est le texte autour duquel vous placez votre ancre./a>
- Utilisez la balise href> pour créer un lien vers votre ancre ou vers une autre page Web:
  
  a href = "url de la page Web ou nom de l'ancre sur cette page"> Écrivez le texte ou l'image affiché sous forme de lien ici./a>
- Pour créer un lien vers une ancre sur une autre page, ajoutez le caractère # après l'url, suivi du nom de votre ancre. Par exemple, http://www.wikihow.com/HTML-leren#Tips vous amènera directement à la section "Astuces" de cette page.

Partie 2 sur 2: Apprendre le HTML avancé

Renseignez-vous sur les attributs. Les attributs sont placés dans la balise et sont utilisés pour apporter des ajustements supplémentaires au "contenu de l'élément" entre les balises de début et de fin. Ils ne sont jamais seuls. Ils sont écrits de la manière suivante: name = "valeur". Nom représente le nom de l'attribut (par exemple, "couleur") et valeur décrit ce cas particulier (par exemple «rouge»).
- Si vous avez regardé de près dans la partie précédente de cet article, vous avez déjà rencontré des attributs. La balise img> utilise l'attribut src, une ancre utilise l'attribut Nom et les liens utilisent l'attribut href. Vous pouvez dire qu'ils sont tous de taille ___='___’ suivre.
Expérimentez avec des tableaux HTML. Pour créer un tableau ou un graphique, vous avez besoin de plusieurs balises:
- Commencez par les balises de table ("table" en anglais) autour de la table entière:table> / table>
- Placez des balises autour du contenu de chaque ligne: tr>
- Placez les en-têtes de colonne dans la première ligne: th>
- Placez les cellules sur des lignes consécutives: td>
- Voici un exemple de la façon dont tout cela se réunit:
  
  table> tr> th> Colonne 1: Mois / th> th> Colonne 2: Argent économisé / th> / tr> tr> td> janvier / td> td> 100 € / td> / tr> / table>
Apprenez les autres balises utilisées dans la section head. Vous avez déjà appris la balise head>, que vous placez au début de chaque document. En plus de la balise title>, il peut y avoir d'autres balises dans la section head:
- Les balises Meta sont utilisées pour créer métadonnées à propos d'une page Web. Ces données sont utilisées par les moteurs de recherche pour catégoriser les pages Web. Pour rendre votre page visible aux moteurs de recherche, vous pouvez placer une ou plusieurs balises META (les balises de fin ne sont pas nécessaires), chaque balise doit contenir exactement un attribut de nom et un attribut de contenu, par exemple: meta name = "description" content = "mis ici description ">; ou meta name = "keywords" content = "écrivez ici une liste de mots-clés, toujours séparés par une virgule">
- Les balises link> sont utilisées pour lier d'autres fichiers à la page. Généralement utilisées pour associer des feuilles de style CSS à des pages HTML, ces pages sont construites avec un type de code différent et sont utilisées pour déterminer le style général d'une page.
- Les balises script> sont utilisées pour associer des fichiers javascript à la page HTML. Javascript permet à la page de changer si l'utilisateur fait quelque chose sur la page.
Jouez avec du HTML à partir de pages existantes. L'affichage du code source des pages Web est un excellent moyen d'élargir vos connaissances HTML. Faites un clic droit sur la page et sélectionnez "Afficher la source", "Afficher la source de la page" ou similaire. Découvrez ce que fait une balise particulière que vous ne connaissez pas ou recherchez la réponse en ligne.
- Vous ne pouvez pas modifier les sites Web d'autres personnes, mais vous pouvez copier le code HTML dans votre propre document et jouer avec lui pour voir ce que font les différents ajustements. Remarque: comme de nombreux sites Web utilisent des feuilles de style CSS, vous ne pourrez peut-être pas voir beaucoup de couleurs ou d'autres styles.
Apprenez-en davantage sur le HTML en lisant des articles plus détaillés. Il existe de nombreuses ressources sur Internet pour maîtriser davantage de balises HTML telles que W3Schools ou Codecademy. Il existe également de nombreux livres HTML disponibles, mais assurez-vous que vous utilisez une édition récente car la norme HTML change de temps en temps. Une fois que vous avez maîtrisé le HTML à un bon niveau, vous pouvez vous tourner vers CSS pour plus de contrôle sur la conception et le style de votre page Web. Après cela, l'étape suivante est généralement javascript.

Conseils

Il peut être utile de trouver une simple page Web sur Internet, puis de commencer à jouer avec le code. Essayez de déplacer du texte, de changer la police, de changer les images, tout ce que vous voulez!
Vous pouvez utiliser un cahier pour écrire le code, de sorte que vous ayez quelque chose sur quoi vous rabattre si vous ne vous en souvenez pas pendant un moment. Vous pouvez également imprimer cette page et la conserver pour référence.
XML et RSS sont de plus en plus utilisés sur les sites Web de nos jours. Le code peut sembler inaccessible à l'œil humain, en particulier lorsqu'il est visualisé dans le code source, mais la fonctionnalité peut être utile.
Les balises utilisées dans HTML ne sont pas sensibles à la casse, mais la valeur par défaut est d'utiliser des lettres minuscules (comme nous le faisons dans cet article). Les lettres minuscules pour les balises sont fortement recommandées, également pour la compatibilité avec XHTML.

Mises en garde

Certaines balises ne sont plus utilisées et ont été remplacées par d'autres balises qui font de même, mais offrent souvent plus d'options.
Si vous souhaitez vous assurer que votre page est conforme à la norme HTML, accédez au site Web W3 pour tester votre code par rapport à la norme actuelle. De nombreuses balises sont devenues obsolètes et ont été remplacées par des balises qui fonctionnent mieux sur les navigateurs modernes.

Nécessités

Un programme de traitement de texte, tel que Notepad (Windows) ou Text Editor (Mac).
une feuille de papier ou un cahier (optionnel)
Un programme spécialement conçu pour écrire du HTML, tel que Notepad ++ pour Windows ou TextWrangler pour Mac (optionnel)