Et on continue ensemble votre apprentissage du langage HTML5.
Dans ce cours vidéo, apprenez à effectuer la mise en forme de votre texte (gras, italique, exposant, indice) directement depuis HTML5.
Et découvrez la technique pour ajouter des commentaires dans votre code HTML5.
Tout est dans le cours vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
La technique pour mettre en forme rapidement votre texte avec HTML5
Bonjour à tous et bienvenu sur Développement Facile.
Dans ce nouveau cours toujours consacré à HTML 5, vous allez apprendre à mettre en forme vos textes avec les nouvelles balises HTML 5.
Le saut de ligne
Alors comme d’habitude, vous connaissez sûrement le saut de ligne, donc pour effectuer un saut de ligne, c’est très simple il suffit d’utiliser la balise <br/>, donc remarquez un truc dans la balise <b\>r, vous avez une barre oblique, un anti slash à la fin, ça permet de respecter les normes du W3C certains développeurs ne mettent pas la barre, sachez que les deux écritures fonctionnent, vous pouvez écrire <br>, ou <br/>. Je vous conseille de mettre l’anti slash, c’est comme pour la balise image, de mettre l’anti slash à la fin. Donc vous avez un saut de ligne HTML 5 écrit sur la première ligne, saut de ligne, CSS écrit sur la deuxième ligne. L’avantage c’est que je démarre du départ, pour si vous êtes débutants avec le langage HTML, vous pouvez directement utiliser cette vidéo, ces cours, le contenu, dans votre développement de sites Internet.
Pour mettre un texte en gras, donc bold, il suffit d’utiliser la balise <b>, et votre texte, une balise <b> ouvrante, votre texte, une balise </b> fermante, avec l’anti slash votre texte. En dessous vous avez un exemple de code source au format HTML 5, donc on met HTML 5 en gras sur la première ligne, on saute une ligne avec le <br/>, CSS en gras sur la deuxième ligne.
Texte en italique
Ensuite pour mettre votre texte en italique, c’est exactement le même principe pour mettre votre texte en gras, sauf que vous allez utiliser la balise <i> pour italique, et votre texte entre les deux balises <i>. Vous avez un exemple de code source ou là on met carrément, vous pouvez cumuler plusieurs balises HTML, i pour italique, b pour gras, donc HTML 5 va s’écrire en gras et en italique en même temps sur la première ligne, on saute une ligne avec le br, le CSS écrit uniquement en gras parce qu’il y a les balises b autour du texte CSS, donc vous pouvez très bien cumuler plusieurs balises avec votre texte.
Texte en exposant et en indice
Vous pouvez mettre du texte en exposant ou en indice, donc pour mettre vos textes en exposant, vous utiliser la balise sup, donc exposant c’est 10 puissance 2 par exemple, et la balise sub pour mettre votre texte en indice, donc justement un exemple avec une formule mathématique a+b² donc a+b sup en exposant au carré 2 = a²+2ab+b² toujours avec la balise HTML sup pour passer en exposant. Ensuite, pour passer en indice donc H2O en indice c’est écrit ici, H2O vous utilisez la balise sub, c’est un exemple vraiment très parlant a+b² et H2O, voila un peu comment mettre en forme votre texte.
Texte barré
Vous pouvez également afficher du texte barré, comme dans les éditeurs de texte, comme Word, OpenOffice, Libre Office, là il suffit d’utiliser la balise del dans votre texte, donc sur l’exemple que vous voyez, on met HTML 5 en gras, sur la première ligne on saute une ligne avec le br, juste en dessous CSS on le met en barré, parce qu’il est entre les balises del et sur la deuxième ligne.
Les commentaires avec HTML 5
Vous pouvez également ajouter des commentaires en HTML 5, il faut savoir que vos commentaires HTML 5 ils seront visibles dans le code de la page. Quand votre site web va s’afficher sur Internet, les visiteurs de votre site pourront voir le code source, et ils verront vos commentaires HTML 5, faites tout simplement attention à ce que vous mettez dans vos commentaires, dans vos documents HTML, tout simplement, faites attention.
Il suffit d’utiliser la balise <!– votre commentaire, vous pouvez faire des sauts de lignes, tous ce que vous voulez dans votre commentaire, ensuite –>, voici un exemple de code source ou je mets en commentaires début du contenu de la page. Globalement dans un document HTML, ce qu’on met en commentaires c’est les sections, par exemple une section header de votre site, vous mettrez en commentaires header du site. Contenu A zone a de votre site, vous mettrez en commentaires, footer de la page vous le mettrez également en commentaires. Ça permet d’indiquer les zones dans votre document HTML 5 et à quoi elles servent ? Grace aux commentaires, donc utilisez à bon escient les commentaires, et ayez toujours en tête que vos visiteurs, vos internautes, peuvent les lires, donc ne mettez pas des données sensibles, des mots de passe, des choses comme ça.
Les caractères spéciaux
Vous avez les caractères spéciaux donc les signes excusez-moi pour la faute d’orthographe sur signe, désolé, donc les signes <, > peuvent être confondus avec une balise, évidemment si vous voulez afficher dans votre texte < ou > ça peut être confondu avec des débuts de balise, des fins de balises, les guillemets avec les attributs d’une balise, et le signe & pour le début d’une réponse de caractères, donc les caractères spéciaux, vous devez les encoder, donc je vous ai affiché pour les signes inférieur, supérieur, les guillemets et le &, l’encodage que vous utilisez comme ça, ça va vous permettre de les afficher dans votre page HTML, sous forme de texte et HTML 5 ne les prendra pas comme des balises donc pensez à encoder les caractères.
Voici un exemple de code source, HTML 5 on le met en italique sur la première ligne, on saute une ligne, vous remarquez l’utilisation de la balise br pour sauter une ligne, vous pouvez mettre du texte après, tout en sachant que dans l’affichage HTML de votre page, ça affichera la première ligne et la deuxième ligne il y aura quand même le saut de ligne même si dans le code source les données sont côte à côte, l’utilisation de la balise br sert à ça, et là on va afficher la balise i … la balise i fermante pour dire que ça met du texte en italique, donc ça va afficher à votre écran les balises i d’italique met du texte en italique, donc vous affichez bien les caractères spéciaux directement pour vos visiteurs en mode lisible.
Votre plan d’actions !
Maintenant vous avez de quoi mettre en forme votre texte en gras, en italique, en exposant, en indice, les commentaires HTML, vous avez vraiment de quoi commencer à créer vos premières pages HTML 5, retrouvez comme d’habitude un exemple de code source sous ce cours vidéo si vous avez des questions posez-les directement sous la vidéo et je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez le code source HTML5
Retrouvez un exemple de code source HTML5 pour la mise en forme du texte.
Téléchargement du code source Mise en forme du texte avec HTML5
