Les paragraphes sont l’un des composants de base du HTML. Utilisez les balises "<p>" et "</p>" pour définir les paragraphes. Par exemple:
<p> Ceci est un paragraphe. </p>
Un lien hypertexte est un lien vers une autre page ou un autre site. Utilisez les balises "<a href=''>" et "</a>" pour créer des hyperliens, où l'attribut href spécifie l'URL du lien. Par exemple:
<a href="https://www.jb51.net">Ceci est un lien</a>
Les images peuvent améliorer l’impact visuel d’une page et transmettre plus d’informations. Insérez des images à l'aide de la balise "<img src='' alt=''/>", où l'attribut src spécifie le chemin d'accès au fichier image et l'attribut alt contient un texte alternatif qui s'affiche lorsque l'image ne peut pas être affichée. Par exemple:
<img src="image.jpg" alt="Une belle photo">
Les tableaux constituent le principal moyen de présenter des données sur des pages Web. Utilisez les balises "<table>", "<tr>" et "<td>" pour définir respectivement les tableaux, les lignes et les cellules. Par exemple:
<tableau> <tr> <td>Première ligne, première colonne</td> <td>Première ligne, deuxième colonne</td> </tr> <tr> <td>Deuxième ligne, première colonne</td> <td>Deuxième ligne, deuxième colonne</td> </tr> </table>
Utilisez les balises "<ul>" ou "<ol>" pour créer une liste non ordonnée ou ordonnée, puis utilisez la balise "<li>" pour définir les éléments de la liste. Par exemple:
<ul> <li>Élément de liste 1</li> <li>Élément de liste 2</li> </ul> <ol> <li>Élément de liste 1</li> <li>Élément de liste 2</li> </ol>
Les formulaires sont des composants utilisés pour collecter les entrées des utilisateurs. Utilisez la balise "<form>" pour créer le formulaire et la balise "<input>" pour définir les champs de saisie. Par exemple:
<form action="submit.php" method="post"> <label for="username">Nom d'utilisateur :</label> <input type="text" name="username" id="username"> <label for="password">Mot de passe :</label> <input type="password" name="password" id="password"> <input type="submit" value="Soumettre"> </form>
CSS peut être utilisé pour contrôler l’apparence et la mise en page des pages Web. Les styles CSS peuvent être ajoutés aux documents HTML à l'aide de la balise "<style>". Par exemple:
<style>
corps {
couleur d'arrière-plan : #f2f2f2 ;
}
h1 {
couleur : bleu ;
alignement du texte : centre ;
}
</style>L'extrait de code ci-dessus n'est que la pointe de l'iceberg dans le langage HTML. Cependant, ils peuvent vous aider à créer une structure et un style de base pour vos pages Web et vous inspirer pour davantage d’apprentissage. Maintenant, essayez de créer votre propre site Web en utilisant ces codes HTML !
Déclaration de documentation HTML5
<!DOCTYPEhtml>
Le bloc de code ci-dessus est une déclaration de document HTML5, indiquant que la page Web actuelle est écrite conformément aux normes HTML5.
Lorsque vous écrivez une page Web, assurez-vous d'écrire la déclaration du document HTML5 en haut de la page Web. Si vous n'écrivez pas de déclaration de document, certains navigateurs entreront dans un mode étrange. Après être entré dans le mode étrange, le navigateur analysera la page et la page ne s'affichera pas normalement. Par conséquent, afin d'éviter d'entrer dans ce mode, vous devez rédiger une déclaration de document.
Déclarations de documents couramment utilisées
HTML5
<!DOCTYPEhtml>
HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Remarque : <!DOCTYPE> n'est pas une balise HTML. Il fournit au navigateur des informations (une déclaration) sur la version du HTML qui a été écrite.
Afin d'être compatible avec certaines anciennes pages, le navigateur dispose de deux modes d'analyse :
Mode normes Mode normes
Mode bizarreries mode bizarre
Les modes étranges produiront un comportement imprévisible lors de l'analyse des pages Web, et nous devons éviter l'apparition de modes étranges.
Type de fichier <HTML></HTML> (placé en début et en fin de fichier)
Titre du document <TITLE></TITLE> (doit être placé dans le bloc "En-tête")
En-tête <HEAD></HEAD> (informations descriptives, telles que « sujet »)
Style <BODY></BODY> (corps du document)
Titre <H?></H?> (de 1 à 6, il y a six niveaux de choix)
Alignement du titre <H?ALIGN=LEFT|CENTER|RIGHT></H?>
Distinguer <DIV></DIV>
Alignement différencié <DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
Bloc de citation <BLOCKQUOTE></BLOCKQUOTE> (généralement en retrait)
Accentuation <EM></EM> (généralement en italique)
Accent particulier sur <STRONG></STRONG> (généralement affiché en gras)
Citation <CITE></CITE> (généralement affichée en italique)
Code <CODE></CODE> (pour afficher le code source)
Échantillon<SAMP></SAMP>
Saisie au clavier<KBD></KBD>
Variable<VAR></VAR>
Définir <DFN></DFN> (non fourni par certains navigateurs)
Adresse<ADDRESS></ADDRESS>
Grands caractères<BIG></BIG>
Petits caractères<SMALL></SMALL>
Gras<B></B>
italique<I></I>
Conclusion <U></U> (certains navigateurs ne le fournissent toujours pas)
Barré <S></S> (certains navigateurs ne le proposent toujours pas)
Indice<SUB></SUB>
Exposant <SUP></SUP>
Machine à écrire <TT></TT> (affichée en police à espace simple)
Format prédéterminé <PRE></PRE> (préserve la taille des espaces dans le fichier)
La largeur du format préformaté <PRE WIDTH=?></PRE> (en caractères)
Alignez-le avec <CENTER></CENTER> (le texte et les images sont acceptables)
Shine <BLINK></BLINK> (le tag le plus moqué de tous les temps)
Taille de la police <FONTSIZE=?></FONT> (de 1 à 7)
Changer la taille de la police <FONTSIZE=+|-?></FONT>
Taille de police de base <BASEFONTSIZE=?> (de 1 à 7 ; la valeur par défaut est 3)
Couleur de la police<FONTCOLOR="#$$"></FONT> ($$ est le code couleur)
1) Texture : <img src="adresse de l'image">
2) Rejoignez le lien : <a href="Adresse associée à connecter">Écrivez les mots que vous souhaitez écrire</a>
3) Ouvrez le lien dans une nouvelle fenêtre : <a href="Adresse associée" target="_blank">Écrivez les mots que vous souhaitez écrire</a>
4) Police mobile (marquee) : <marquee>Écrivez les mots que vous souhaitez écrire</marquee>
5) Police en gras : <b>Écrivez les mots que vous souhaitez écrire</b>
6) Police italique : <i>Écrivez les mots que vous souhaitez écrire</i>
7) Soulignement de la police : <u>Écrivez les mots que vous souhaitez écrire</u>
8) Police barrée : <s>Écrivez les mots que vous souhaitez écrire</s>
9) Augmentez la taille de la police : <big>Écrivez les mots que vous souhaitez écrire</big>
10) Contrôle de la taille de la police : <h1>Écrivez les mots que vous souhaitez écrire</h1> (la taille de la police peut aller de h1 à h5, h1 est la plus grande, h5 est la plus petite)
11) Changez la couleur de la police : <font color="#value">Écrivez les mots que vous souhaitez écrire</font> (la valeur est comprise entre 000000 et ffffff (hexadécimal 16 bits)
12) Supprimez le soulignement de la connexion : <a href="Related address" style="text-decoration:none">Écrivez les mots que vous souhaitez écrire</a>
13) Publier de la musique : <embed src="Adresse musicale" width="Width" height="Height" autostart=false>
14) Coller le flash : <embed src="adresse flash" width="width" height="height">
15) Coller les fichiers vidéo : <img dynsrc="adresse du fichier" width="width" height="height" start=mouseover>
16) Saut de ligne :<br>
17) Paragraphe : <p>Paragraphe</p>
18) Style de texte original : <pre>Texte</pre>
19) Modifier l'arrière-plan de la publication : <body background="adresse de l'image d'arrière-plan">
20) Correction de l'arrière-plan de la publication ne défilant pas avec la barre de défilement : <body background="Adresse de l'image d'arrière-plan" bodybgproperties=fixed>
21) Personnalisez la couleur d'arrière-plan de la publication : <body bgcolor="#value">(voir 10 pour la valeur)
22) Publier une musique de fond : <bgsound="Adresse de la musique de fond" loop=infinite>
23) Publiez la page Web : <iframe="Related Address" width="Width" height="Height"></iframe>