La FAQ sur le HTML essentiel à retenir

Added 2018-03-15

Le HTML existe depuis longtemps maintenant, il est donc temps que vous en appreniez les bases. Qu'est-ce que c'est, comment ça marche et comment écrire des éléments communs en HTML.

Qu'est-ce que HTML?

HTML est le langage utilisé pour construire des pages Web. HTML signifie Langage Signalétique Hyper Text  et est simple un ensemble d'instructions pour votre navigateur Web. En utilisant ces instructions, votre navigateur affiche à quoi une page Web devrait ressembler.

Il est important de comprendre que c’est un balisage  langue, pas une la programmation  la langue. Les langages de programmation vous permettent de résoudre des problèmes tels que des équations mathématiques, la manipulation de données ou le déplacement d'un personnage de jeu vidéo.

Vous ne pouvez pas écrire de logique en HTML. Il ne concerne que la mise en page.

À quoi ressemble HTML?

Le HTML est composé de plusieurs éléments appelés «balises». Les balises sont des instructions pour styler une partie spécifique de votre page Web. Pour revenir à la construction, HTML correspond aux plans et les balises sont des fonctionnalités spécifiques telles que les fenêtres ou les portes.

Voici à quoi ressemble une page Web très basique en HTML:

& lt; html & gt;
  & lt; tête & gt;
    & lt; title & gt; Site Web MUO & lt; / title & gt;
  & lt; / head & gt;
  & lt; corps & gt;


  & lt; / body & gt;
& lt; / html & gt;

Les balises HTML sont prédéfinies et spécifient des fonctionnalités communes telles que des images, des liens vers d'autres pages Web, des boutons, etc.

La grande majorité des tags doivent être ouvrir  et fermé . Cela définit simplement une caractéristique, avec du texte, des images ou d’autres balises, puis termine la définition. Revenir aux maisons, ouvrir l’étiquette revient à dire «commencez la fenêtre ici», et fermer l’étiquette revient à dire «ici où la fenêtre se termine».

Les balises HTML n'apparaissent pas réellement sur votre site Web. Votre navigateur suit les instructions, mais ne les montre jamais à aucun visiteur. Ce n’est pas secret, cependant. Tout le monde peut consulter votre code HTML une fois que vous avez publié vos pages Web.

Bien qu'il existe un grand nombre de balises HTML différentes, vous ne devez pas toutes les apprendre avant de pouvoir coder un site Web. Aujourd’hui, vous apprendrez à écrire des balises courantes et leur utilité.

Que sont les attributs de balises HTML?

Une dernière chose à savoir sur les tags est les attributs . Les attributs définissent les caractéristiques spéciales des balises. Si les balises sont des fenêtres et des portes, les attributs spécifient des détails spécifiques au bâtiment. Cela peut être la largeur et la hauteur du cadre, que la fenêtre soit ouverte ou si la porte est verrouillée.

Les attributs sont inclus dans la balise d'ouverture, comme ceci:

& lt; p width = "123" height = "567" & gt; & lt; / p & gt;

Vous ne pouvez pas créer vos propres balises ou attributs. Les attributs et les balises sont prédéfinis par le World Wide Web Consortium  (W3C).

Qu'est-ce que HTML5?

HTML5 est la dernière version de HTML. Il contient plusieurs nouveaux tags, attributs et fonctionnalités.

Comme le HTML est un ensemble d’instructions, différents navigateurs Web l’interprètent parfois différemment. Un navigateur peut décider que les fenêtres et les portes doivent être peintes en noir, sauf indication contraire de votre part.

<16>

Alors que les navigateurs ont finalement commencé à devenir assez cohérents les uns avec les autres, vous pouvez toujours être surpris parfois avec de nouvelles fonctionnalités. Peut-être que Google Chrome a mis en place une nouvelle balise, mais pas Internet Explorer de Microsoft.

Dans la plupart des cas, vos pages Web auront la même apparence dans tous les principaux navigateurs, mais il est toujours utile de faire un test rapide avant de publier quoi que ce soit, surtout si vous utilisez des balises plus récentes, qui ne sont peut-être pas encore compatibles avec tous les navigateurs.

Comment commenter HTML

Comme beaucoup d'autres langages, balisage ou programmation, HTML a la capacité de «commenter» des blocs de balisage. Un commentaire est quelque chose qui est ignoré par le navigateur. Cela peut être une note pour vous rappeler ce que cette partie particulière de votre site Web fait.

En commentant le balisage, vous indiquez au navigateur d’ignorer un ou plusieurs tags. Cela peut être utile pour supprimer des fonctionnalités ou pour masquer une partie de votre site Web sans supprimer le code.

Lorsqu'un navigateur Web voit un commentaire, il le comprend comme «n'utilisez pas ces instructions avant que je ne dise le contraire». Les commentaires sont constitués d'un commentaire «d'ouverture» et d'un commentaire «de clôture», comme des balises.

Voici un exemple:

& lt;! - N'oubliez pas d'ajouter le XYZ ici! - & gt;
& lt; p width = "123" height = "567" & gt; & lt; / p & gt;

La mise en commentaire du code se fait exactement de la même manière:

& lt;! - & lt; p width = "123" height = "567" & gt; & lt; / p & gt; - & gt;

Plutôt qu'un message, placez votre balise entre les balises de commentaire.

Comment insérer des images en HTML

L'insertion d'images dans votre code HTML se fait avec la balise image:

& lt; img src = "MUO_logo.jpg" alt = "
<20>
 Logo "& gt;

Notez comment le nom de la balise est appelé img , et il y a deux attributs. le src  attribut spécifie où trouver l'image, et le alt  tag est une description textuelle alternative, au cas où l'image ne pourrait pas être chargée pour une raison quelconque.

La balise image n'a pas besoin d'être fermée, contrairement à la plupart des autres balises.

Comment changer la police en HTML

Les polices peuvent être changées en utilisant le Police de caractère  tag et le visage  attribut:

& lt; font face = "arial" & gt; MUO Arial Text & lt; / font & gt;

<20>

La taille de la police peut être facilement modifiée à l’aide des touches Taille  attribut:

& lt; font size = "12" & gt; Gros texte MUO & lt; / font & gt;

<20>

Si vous souhaitez modifier la couleur de la police, vous pouvez le faire facilement avec Couleur  attribut:

& lt; font color = "red" & gt; MUO Texte rouge & lt; / font & gt;

<20>

Ces attributs sont uniques à la Police de caractère  étiquette. Si vous souhaitez utiliser une autre balise, vous pouvez nid  balises, en les plaçant l'une dans l'autre:

& lt; p & gt; & lt; font color = "red" & gt; MUO Texte rouge & lt; / font & gt; & lt; / p & gt;

Comment ajouter un lien en HTML

Des liens peuvent être ajoutés en utilisant le une  étiquette:

& lt; a href = "// www.
<20>
.com "& gt;
<20>
.com & lt; / a & gt;

le href  attribut est la destination de votre lien.

Comment faire un tableau en HTML

Les tableaux HTML impliquent l'imbrication de plusieurs balises différentes. Vous devrez commencer par un table  étiquette:

& lt; table & gt;
  
& lt; / table & gt;

Maintenant, ajoutez quelques lignes en utilisant le tr  étiquette:

& lt; table & gt;
  & lt; tr & gt;
    
  & lt; / tr & gt;
  & lt; tr & gt;
    
  & lt; / tr & gt;
  & lt; tr & gt;
    
  & lt; / tr & gt;
& lt; / table & gt;

Enfin, utilisez le td  balise pour créer vos cellules de table, ce qui créera également les colonnes:

& lt; table & gt;
  & lt; tr & gt;
    & lt; td & gt; & lt; / td & gt;
    & lt; td & gt; & lt; / td & gt;
    & lt; td & gt; & lt; / td & gt;
  & lt; / tr & gt;
  & lt; tr & gt;
    & lt; td & gt; & lt; / td & gt;
    & lt; td & gt; & lt; / td & gt;
    & lt; td & gt; & lt; / td & gt;
  & lt; / tr & gt;
  & lt; tr & gt;
    & lt; td & gt; & lt; / td & gt;
    & lt; td & gt; & lt; / td & gt;
    & lt; td & gt; & lt; / td & gt;
  & lt; / tr & gt;
& lt; / table & gt;

Il est possible d’exacerber avec la disposition de la table, mais il est généralement préférable de garder les choses simples, si possible. Dans le passé, les tableaux étaient utilisés pour structurer une page Web, mais cette pratique est périmée et a une apparence terrible. Gardez les tables simplement pour relayer les données au lecteur.

Utiliser CSS avec HTML

Ces exemples couvrent les bases, mais si vous voulez être vraiment créatif, vous devrez utiliser CSS. Les feuilles de style en cascade vous permettent de mieux contrôler la conception de votre site Web et vous permettent de réutiliser beaucoup de code entre différentes parties de votre site Web.

Si vous souhaitez écrire du CSS avec votre code HTML, vous pouvez utiliser le style  attribut. Cet attribut applique simplement le code CSS à la balise sur laquelle il est utilisé:

& lt; p & gt; & lt; / p & gt;

Bien que cette méthode fonctionne bien, vous aurez du mal à maintenir si vous avez beaucoup de balisage qui nécessite un style similaire.

La meilleure façon est d'utiliser le style  tag, placé à l'intérieur du tête  étiquette. Ici, vous pouvez définir le CSS pour votre page entière:

& lt; html & gt;
  & lt; tête & gt;
    & lt; style type = "text / css" & gt;
      BEAUCOUP DE RÈGLES CSS
    & lt; / style & gt;
  & lt; / head & gt;
& lt; / html & gt;

La balise de style a un attribut de text / css . Ceci est nécessaire pour que votre navigateur connaisse le style exact à attendre dans la balise.

La troisième et dernière façon d’utiliser CSS est de créer un fichier externe, en utilisant lien  étiquette. Cela lie votre HTML au CSS stocké dans son propre fichier, ce qui est génial si vous en avez une grande quantité:

& lt; link rel = "stylesheet" type = "text / css" href = "muostyle.css" & gt;

Plusieurs attributs sont utilisés ici. le rel  attribut déclare votre lien comme une feuille de style. Le type de «text / css» est à nouveau défini dans le type  attribut, et le href  attribut est où trouver le fichier externe.

Comment faites-vous un site Web avec HTML?

Comme vous avez pu le constater, le langage HTML n’est vraiment pas si mal, non? En utilisant quelques balises et attributs simples, vous pouvez rapidement créer une page Web, même si vous n’avez jamais écrit HTML auparavant!