Apprendre à programmer du HTML CSS à partir de zéro. Bases du HTML pour débutants en langage clair
De l'auteur : Bonjour à tous. Nous voulons tous mieux comprendre la création de sites Web afin d'aborder des projets intéressants et de donner vie à nos idées. Mais que se passe-t-il si vous êtes complètement débutant ? Notre manuel HTML pour les nuls avec des leçons pratiques vous aidera enfin à faire une avancée aussi importante dans la création de sites Web, du niveau zéro à au moins une compréhension de base.
Dans la création de sites Web d’apprentissage, comme dans presque tout autre domaine, la pratique est importante. Vous pouvez relire la recette pour faire du bortsch 1000 fois, mais cela ne vous empêchera pas de le cuisiner. Vous pouvez apprendre les principes de base de la conduite automobile, mais jusqu'à ce que vous preniez le volant, tout reste un mystère. Les connaissances théoriques présentent sans aucun doute certains avantages, mais pas autant que les compétences réelles.
Donc, si nous parlons d’apprendre le HTML, il y a aussi la théorie, puis la pratique. La théorie dans ce cas est simplement une sorte de série d'articles, de leçons sur le thème du langage, des balises de base et de leur application, etc.
La pratique commence pour vous lorsque vous créez vous-même un fichier HTML, y écrivez le code de départ et commencez à étudier de vos propres mains comment tout cela fonctionne. J'ai écrit une balise et vu comment cela fonctionne. J'ai inséré une photo et je l'ai vérifiée. Ajout de quelques attributs, etc. C'est la pratique qui permet de comprendre et de mémoriser rapidement les principales balises. Ensuite, vous les écrivez automatiquement et vous n’avez pas besoin de vous rappeler pendant une demi-heure comment créer une liste.
Eh bien, pour les balises rares, vous devriez toujours utiliser un dictionnaire. Personne, pas un seul super maquettiste ou développeur Web, je pense, ne connaît toutes les balises par cœur. Ce n'est tout simplement pas nécessaire. Si vous utilisez un tag une fois tous les 10 ans, pourquoi le garder en tête ? Je pense que c'est clair.
Mais j’appellerais cette pratique simplement une sorte de jeu bac à sable. Vous écrivez simplement différentes balises, essayez de tout comprendre avec le plus de détails possible, mais pour quoi faire ? Il doit y avoir un but. Généralement, le HTML et le CSS sont étudiés afin de créer ultérieurement vos propres pages Web et des sites Web à part entière.
La meilleure pratique consiste donc à prendre une mise en page de site Web prête à l’emploi et à la mettre en page. La mise en page est précisément le processus de création de pages Web à partir d'un dessin multicouche à l'aide des langages HTML et CSS. Même pendant la mise en page, ils peuvent utiliser des frameworks, du javascript et des bibliothèques d'applications, mais c'est un sujet pour une autre conversation. Tout cela est un ajout. HTML est une technologie de base qui doit être très bien comprise.
Mais je vais vous faire plaisir, c'est basique, c'est le plus simple. Il est très simple d'apprendre comment fonctionnent certaines balises et comment les appliquer. Il n'y a pas d'algorithmes, de fonctions, de méthodes, de classes complexes en HTML, comme c'est le cas dans les langages de programmation. C'est un langage de balisage, étudiez-le un peu et tout sera extrêmement clair.
Comment apprendre correctement une langue et où la pratiquer ?Encore une fois, je parle d'un apprentissage facile seulement si vous suivez le bon chemin. Autrement dit, regardez des didacticiels vidéo intelligents où les éléments nécessaires sont expliqués étape par étape, du plus simple au plus complexe. Si vous regardez des leçons qui ne sont pas structurées selon ce format, vous ne comprendrez probablement tout simplement pas la majeure partie du contenu.
Heureusement, sur notre site Web, toutes les leçons sont structurées et organisées du simple au complexe. Par conséquent, si vous étudiez le HTML en utilisant nos leçons, vous n'aurez aucun problème à maîtriser la matière.
Je peux vous assurer que le CSS est plus intéressant à apprendre ! Et d’une certaine manière, c’est encore plus facile. Premièrement, CSS possède également un certain nombre de propriétés et de règles dont vous devez vous souvenir. Deuxièmement, ce langage a une syntaxe très simple, donc même un débutant n'aura aucun problème à y écrire du code. Troisièmement, puisque CSS est responsable de l’apparence de la page, vous serez d’abord ravi d’avoir rendu la page rouge et d’avoir donné un cadre à cette image.
En général, apprendre le CSS est simple et intéressant, je recommande donc de ne pas tergiverser et de commencer immédiatement après avoir terminé les bases du HTML.
Votre pratique finaleEnfin, vous avez un examen. Mais ne vous inquiétez pas, ce ne sera pas difficile. De plus, vous n’êtes pas obligé de le faire vous-même, mais uniquement selon les instructions contenues dans les leçons. Cet examen est un cours. Dans ce document, vous atteindrez enfin l'objectif intermédiaire principal : vous concevrez votre premier site Web et comprendrez comment utiliser le HTML et le CSS dans la création de sites Web réels. Même s’il s’agit d’un site simple, les connaissances que vous aurez acquises seront suffisantes pour évoluer davantage et créer des mises en page plus complexes.
HTML est le langage de balisage hypertexte qui a fait d’Internet ce que nous connaissons et aimons. C'est grâce à ce merveilleux outil que les sites sont beaux et modernes, et garantissent également une facilité d'utilisation. HTML organise simplement les éléments d'une page Web dans un format convivial. Son travail est comparable à ce que font des gens comme MS Word ou OpenOffice. Ils transforment une masse de lettres sans relief en un document contenant des paragraphes, du texte en gras, en italique, des tableaux et même des images. Le langage HTML fait à peu près la même chose, à la seule différence que ses documents sont affichés dans le navigateur, et les capacités de cet outil sont bien plus larges que celles d'un éditeur de texte. Les balises sont utilisées pour le balisage - des commandes spéciales qui décrivent la structure d'une page Web. Ils sont placés entre crochets afin que le navigateur puisse les distinguer de la majeure partie du texte. Ensuite, nous aborderons les bases du HTML pour les débutants.
Éditeurs visuelsLes débutants qui viennent de se lancer dans l'apprentissage du HTML commencent souvent leur travail avec des programmes qui vous permettent de créer des sites Web sans aucune connaissance. Dans ceux-ci, vous pouvez simplement disposer les éléments sur l'écran de la manière dont ils seront affichés dans le navigateur. Il semblerait que ce soit la source de la grâce éternelle qui permet de se débarrasser de la majorité des développeurs web. Mais tout n'est pas si simple, car les éditeurs visuels présentent de nombreux défauts qui rendent impossible leur utilisation dans des projets sérieux.
Tous ces programmes créent de nombreuses balises inutiles qui rendent la page finale lourde et sous-optimale. Bien sûr, à l'ère de l'Internet haut débit, cela est moins important qu'avant, mais il existe un certain nombre de raisons pour lesquelles un site Web concis et bien rédigé s'avère plus pratique que son homologue créé dans un éditeur visuel. Une page Web créée dans un tel programme sera mal traitée par les robots de recherche, car chaque kilo-octet de code est important pour eux, et il est peu probable qu'un code volumineux et illogique avec un tas convienne à leur goût. De plus, les éditeurs sont souvent à la traîne, deviennent inutiles, et il est peu pratique de consacrer des ressources à leur développement, car aucun professionnel n'utilise ces produits. Par conséquent, toute personne souhaitant travailler dans le secteur du développement de sites Web doit connaître les bases du HTML.
Mots clésComme mentionné ci-dessus, les balises décrivent la structure d'une page Web au navigateur. La plupart d’entre eux ont une balise d’ouverture et de fermeture, mais pas tous. Par exemple, ..., où au lieu de points il y a du contenu. Le premier montre où commence la balise et le second la ferme. Il peut y avoir d’autres éléments de balisage de page à l’intérieur ; ils peuvent être imbriqués les uns dans les autres comme une poupée gigogne. Il est important de fermer les balises à temps afin que la page s'affiche correctement.
Il existe également des balises simples qui n'ont pas besoin d'être fermées. Dans ceux-ci, le contenu est situé à l'intérieur, tout comme il peut être écrit pour la plupart des balises HTML, et définit les propriétés de l'élément. Il est indiqué dans la balise d'ouverture et ressemble à ceci : attribut="...", où au lieu de points se trouve la valeur de l'attribut. Connaître les balises est la première et la plus importante étape pour maîtriser le HTML. Les bases de cet art impliquent également de comprendre la structure d’une page Web.
Structure du documentChaque document HTML a une extension correspondante, par exemple Index.html. De cette façon, le navigateur peut comprendre à quoi il a affaire et afficher correctement la page. Il est conseillé de stocker tous les fichiers utilisés pour créer un site Web dans un seul répertoire, ce qui vous facilitera grandement la vie à l'avenir. Les bases du langage de balisage hypertexte HTML nécessitent une compréhension claire de la structure du document. Il commence par une balise qui indique au navigateur la version du HTML utilisée dans ce document. Pour le moment, la cinquième version du langage est pertinente, il n'est donc pas nécessaire d'inventer quoi que ce soit, vous pouvez insérer en toute sécurité la balise ci-dessus au début de n'importe quelle page.
Viennent ensuite les principales structures jumelées qui constituent le « squelette » du site. La première balise, dans laquelle toutes les autres sont imbriquées, est .... Tout ce qui se trouve en dehors n'est pas reconnu par le navigateur comme une page Web, il ouvre donc le document et le ferme. Cette balise est obligatoire pour tout document. Il contient également plusieurs autres balises obligatoires, qui seront discutées ci-dessous.
TêteA l'intérieur de la balise ... se trouvent des informations techniques qui n'apparaîtront pas sur la page, mais qui constituent néanmoins une partie importante du document HTML. Les bases du site sont posées à cet endroit, ici l'encodage est sélectionné et le nom de la page est saisi. Il est contenu à l'intérieur d'une balise obligatoire.... Le titre est affiché en haut du navigateur, où vous pouvez également placer une petite icône qui caractérise le contenu de la page. Il est conseillé d'indiquer immédiatement l'encodage du document pour son affichage correct. Cela peut être fait en utilisant la balise. Les balises méta fournissent des informations sur la structure de la page et sont généralement situées à l’intérieur de l’en-tête.
LienConnaître les bases du HTML implique également d'utiliser le style en cascade, ou CSS. Ils définissent les propriétés des éléments qui seront affichés sur la page. Une approche moderne de cette tâche consiste à transférer des caractéristiques telles que la couleur, la hauteur et l'emplacement de l'élément vers un fichier externe pour plus de commodité. Pour inclure un fichier CSS, utilisez la balise. Dans sa forme finale, cela ressemble à ceci : où href indique l'emplacement du fichier et type indique son type.
CorpsC'est dans cette partie du document HTML qu'est créée la partie visible de la page. Tout ce qui est fait à l'intérieur du "corps" sera affiché par le navigateur. Il utilise un grand nombre de balises HTML. Les bases sont le formatage du texte, l'utilisation des liens et les outils de base pour structurer une page Web. Pour commencer à travailler en HTML, il vous suffit de connaître les balises de base et de pouvoir les utiliser. Voici les plus populaires :
- - utilisé pour mettre en évidence une sous-chaîne qui sera soumise à un style particulier décrit en css ;
- - crée un lien sur une page web ; l'adresse de transition est spécifiée par l'attribut href ;
- - l'un des tags les plus populaires de notre époque ; quiconque décide d'apprendre les bases du langage HTMLl doit y prêter une attention particulière, car il s'agit d'un élément de bloc, sur la base duquel est constituée la part du lion des sites modernes (les paramètres des blocs sont définis en CSS, et les autres blocs peut être situé à l'intérieur de cette balise);
Sélectionne un paragraphe dans le texte ; le contenu du paragraphe se situe entre les balises d'ouverture et de fermeture ;
- - une liste numérotée dont les éléments sont enfermés dans une balise appariée
- - une liste à puces, dans laquelle, tout comme dans une liste numérotée, les éléments sont désignés par une balise
- - - les titres du document (le numéro indique le niveau du titre, c'est-à-dire le titre principal, et les options suivantes sont ses sous-titres ; d'ailleurs, les titres de niveau sont presque impossibles à trouver sur Internet), il est également important de se rappeler qu'il ne peut être qu'un seul en-tête sur une page ;
- - vignette;
- - italique ;
- - insérer une image sur un site Web (il s'agit d'une balise unique, elle ne nécessite pas de balise de fermeture, mais elle doit inclure l'attribut alt, qui spécifie le texte de l'image) ;
- - insérer une vidéo dans une page Web ;
- - une balise qui insère un fichier audio dans le document.
Ce ne sont pas toutes les balises dont vous avez besoin pour créer votre propre page Web, mais elles suffisent à poser les bases du HTML pour les débutants.
CSSLe développement du langage HTML a conduit au fait que chaque balise a acquis de nombreux attributs et que les exigences relatives à l'apparence des pages Web ont considérablement augmenté. Le code est devenu encombrant et peu pratique, il était difficile de le lire, encore moins de l'adapter ou de le modifier. De plus, si votre site comporte dix pages avec de nombreux titres marqués en vert et que vous souhaitez soudainement les rendre rouges, vous devrez travailler dur en modifiant chacun d'eux manuellement. Avec l'avènement des feuilles de style en cascade, ce processus est devenu simple et logique, et le code HTML est devenu beaucoup plus lisible.
Application de CSSPour créer des pages Web, il faut connaître les bases du HTML et du CSS, puisque désormais il n'y a plus rien à faire dans ce domaine sans connaissance des feuilles de style en cascade. Ils définissent les attributs de tout élément qui s'appliquent à l'ensemble du document. De cette façon, vous pouvez définir la couleur de tous les éléments à la fois
Afin de connecter un fichier CSS à un document, il existe une balise de lien. Le principe de son utilisation a été décrit un peu plus haut, mais ce n'est pas la seule option permettant de combiner tous les styles en un seul endroit. Il existe également une balise située dans « l’en-tête » du document et qui vous permet d’écrire des styles sans utiliser de fichiers CSS. Il n’est pas nécessaire d’utiliser une méthode ou une autre. Ils peuvent être combinés avec succès pour obtenir le meilleur résultat. Pour créer un fichier avec des feuilles de style, vous devez créer un fichier avec une extension .css, par exemple Styles.css.
JavascriptSouvent, une personne qui décide de commencer à se rendre compte que les outils proposés par HTML ne suffisent pas pour ses tâches. Les bases vous permettront de créer une belle page, mais que se passe-t-il si vous avez soudainement besoin de la rendre interactive ? À ces fins, il existe une programmation unique qui interagit parfaitement avec HTML. Il s'appelle JavaScript, car il a été conçu comme le frère cadet du langage Java populaire. Aujourd'hui, ces langues ont acquis des différences significatives et l'écart entre elles ne fait que se creuser.
JavaScript peut étendre les capacités du HTML en vous permettant de créer et de modifier des balises. De plus, en utilisant ce merveilleux outil, vous pouvez travailler avec Cokie, télécharger des données depuis le serveur sans recharger la page et rendre le site plus interactif que ne le permettent les capacités HTML. Ce langage présente également des limites liées à la sécurité. Si JavaScript n’est pas utilisé côté serveur, il sera exécuté dans des conditions qui limitent ses capacités, afin que les attaquants ne puissent utiliser de code malveillant sur aucun ordinateur.
ÉditeursLes bases du HTML pour un débutant nécessitent la connaissance des programmes les plus pratiques et les plus pratiques pour créer des pages Web. Comme indiqué ci-dessus, les éditeurs visuels tels que Dreamweaver et autres ne conviennent pas à ces fins. Alors, devriez-vous écrire des balises dans un bloc-notes ordinaire ? Cette option est également discutable, puisqu'un bloc-notes standard ne dispose pas d'outils de mise en page particuliers. Notepad++ peut très bien gérer cette tâche. Le gros avantage de ce produit est qu’il est open source et distribué de manière totalement gratuite. Il propose une coloration syntaxique pratique et une fermeture automatique des balises. Notepad++ propose également une large sélection de langages d'interface et ses capacités sont facilement étendues avec de nombreux modules complémentaires.
Sublime Text 3 est un programme similaire à Notepad++, mais disponible moyennant des frais. C'est elle qui a conquis le cœur de la plupart des développeurs. Sublime Text 3 est parfait pour JavaScript, CSS et HTML. Vous devrez apprendre les bases pour travailler avec vous-même, mais cela en vaut la peine. Il contient des possibilités de réglage vraiment illimitées, ce qui vous permet d'adapter autant que possible le programme à vos besoins.
Bases HTML et CSS pour les débutantsComme vous pouvez le constater, apprendre l’art de créer des pages Web n’est pas aussi difficile qu’il y paraît à première vue. Quelques mois seulement de pratique vous transformeront d’utilisateur timide en développeur novice. L'apprentissage de la mise en page est beaucoup plus facile que la maîtrise d'un langage de programmation ou de Linux. En fait, il n’existe pas tellement de balises HTML, il est important de comprendre l’aspect pratique de leur utilisation.
La maîtrise de Adobe Photoshop ne sera pas superflue dans ce domaine. Ce programme vous permet de travailler avec des photographies, des images et d'autres éléments graphiques d'une page Web. Pour le moment, c'est Photoshop qui fait le mieux face à de telles tâches, il a peu de concurrents. Pour ceux qui n'aiment pas ce produit Adobe, il existe Lightroom, GIMP, Illustrator et d'autres programmes dotés de fonctions similaires.
Que donne la connaissance du HTML ?Les compétences en création de pages Web sont très pertinentes aujourd’hui, alors qu’Internet se développe à pas de géant. Chaque entreprise, même le plus petit magasin, les ateliers et les clubs sportifs, souhaite avoir son propre site Internet. Et bien sûr, pour cela, ils auront besoin d’un développeur connaissant CSS et HTML. Les bases sont faciles à maîtriser, après quoi c'est une question de pratique. Étant donné que les technologies de mise en page évoluent constamment, les développeurs front-end seront toujours recherchés. Quiconque décide de se consacrer à cette industrie intéressante ne se retrouvera jamais sans travail.
HTML Basics contient les règles de base du langage HTML, une description de la structure d'une page HTML et les relations dans la structure d'un document HTML entre les éléments HTML.
Un document HTML est un document texte ordinaire qui peut être créé soit dans un éditeur de texte classique (Notepad), soit dans un éditeur spécialisé avec surbrillance de code (Notepad++, Visual Studio Code, etc.). Un document HTML a une extension .html.
Un document HTML se compose d'une arborescence d'éléments HTML et de texte. Chaque élément est identifié dans le document source par une balise de début (ouverture) et de fin (fermeture) (à de rares exceptions près).
La balise de début indique où commence l'élément, la balise de fin indique où il se termine. La balise de fermeture est formée en ajoutant une barre oblique / avant le nom de la balise : .... Entre les balises de début et de fermeture se trouve le contenu de la balise - le contenu.
Les balises simples ne peuvent pas stocker le contenu directement ; celui-ci est écrit sous forme de valeur d'attribut, par exemple, une balise créera un bouton avec le texte Button à l'intérieur.
Les balises peuvent être imbriquées les unes dans les autres, par exemple :
Texte
. Lorsque vous investissez, vous devez suivre l'ordre dans lequel ils sont fermés (principe de la « matriochka »), par exemple, la saisie suivante sera incorrecte :Texte
.Les éléments HTML peuvent avoir des attributs (globaux, appliqués à tous les éléments HTML et les leurs). Les attributs sont écrits dans la balise d'ouverture de l'élément et contiennent un nom et une valeur, spécifiés au format attribut name="value" . Les attributs vous permettent de modifier les propriétés et le comportement de l'élément pour lequel ils sont définis.
Chaque élément peut se voir attribuer plusieurs valeurs de classe et une seule valeur d'identifiant. Plusieurs valeurs de classe sont écrites séparées par un espace, . Les valeurs de classe et d'identifiant doivent être constituées uniquement de lettres, de chiffres, de traits d'union et de traits de soulignement, et doivent commencer uniquement par des lettres ou des chiffres.
Le navigateur visualise (interprète) le document HTML, construit sa structure (DOM) et l'affiche conformément aux instructions incluses dans ce fichier (feuilles de style, scripts). Si le balisage est correct, la fenêtre du navigateur affichera une page HTML contenant des éléments HTML - en-têtes, tableaux, images, etc.
Le processus d'interprétation (analyse) commence avant que la page Web ne soit entièrement chargée dans le navigateur. Les navigateurs traitent les documents HTML de manière séquentielle, depuis le début, tout en traitant le CSS et en associant les feuilles de style aux éléments de la page.
Un document HTML se compose de deux sections - l'en-tête - entre les balises... et la partie contenu - entre les balises....
Structure des pages Web 1. Structure du document HTMLHTML suit les règles contenues dans le fichier de déclaration de type de document (Définition du type de document, ou DTD). Une DTD est un document XML qui définit quelles balises, attributs et leurs valeurs sont valides pour un type HTML particulier. Chaque version de HTML possède sa propre DTD.
DOCTYPE est responsable du bon affichage d'une page web par le navigateur. DOCTYPE spécifie non seulement la version HTML (par exemple html) mais également le fichier DTD correspondant sur Internet.
...
Les éléments à l'intérieur de la balise forment une arborescence de documents, appelée modèle objet de document, DOM (document object model). Dans ce cas, l'élément est l'élément racine.
Riz. 1. La structure la plus simple d'une page WebPour comprendre l’interaction des éléments d’une page Web, il est nécessaire de considérer ce que l’on appelle les « relations familiales » entre les éléments. Les relations entre plusieurs éléments imbriqués sont classées comme parent, enfant et sœur.
Un ancêtre est un élément qui contient d’autres éléments. Dans la figure 1, l'ancêtre de tous les éléments est . En même temps, l'élément est l'ancêtre de toutes les balises qu'il contient : ,
, , etc.
Un descendant est un élément situé dans un ou plusieurs types d'éléments. Par exemple, est un descendant de , et l'élément
Est un descendant des deux et .
Un élément parent est un élément lié à d’autres éléments à un niveau inférieur et situé au-dessus d’eux dans l’arborescence. Dans les figures 1 et . Étiqueter
Est-ce parent uniquement pour .
Un élément enfant est un élément directement subordonné à un autre élément de niveau supérieur. Dans la figure 1, il n'y a que des éléments , ,
Et sont des enfants de .
Un élément sœur est un élément qui a un élément parent commun avec celui en question, ce qu'on appelle les éléments de même niveau. Sur la figure 1 et sont des éléments de même niveau, ainsi que des éléments , et
Elles sont sœurs l'une de l'autre.
1.1. Élément 1.2. ÉlémentLa section... contient des informations techniques sur la page : titre, description, mots-clés pour les moteurs de recherche, encodage, etc. Les informations que vous y saisissez ne sont pas affichées dans la fenêtre du navigateur, mais elles contiennent des informations qui indiquent au navigateur comment traiter la page.
1.2.1. ÉlémentLa balise de section requise est . Le texte placé à l'intérieur de cette balise apparaît dans la barre de titre du navigateur web. Le titre ne doit pas comporter plus de 60 caractères pour s’intégrer complètement dans le titre. Le texte du titre doit contenir la description la plus complète du contenu de la page Web.
1.2.2. ÉlémentUne balise de section facultative est une balise unique. Avec son aide, vous pouvez définir une description du contenu de la page et des mots-clés pour les moteurs de recherche, l'auteur du document HTML et d'autres propriétés de métadonnées. Un élément peut contenir plusieurs éléments car ils portent des informations différentes selon les attributs utilisés.
La description du contenu de la page et les mots-clés peuvent être spécifiés simultanément dans plusieurs langues, par exemple en russe et en anglais :
A l'aide d'une balise, vous pouvez bloquer ou autoriser l'indexation d'une page web par les moteurs de recherche :
Pour recharger automatiquement la page après une période de temps spécifiée, vous devez utiliser la valeur d'actualisation :
La page sera rechargée après 30 secondes. Pour rediriger le visiteur vers une autre page, vous devez préciser l'URL dans le paramètre url :
crochets, à l'intérieur desquels est écrit le nom de la balise. Le navigateur examine la structure du document, le construit et l'affiche selon ses instructions sur votre moniteur, si, bien sûr, vous avez tout fait correctement.
Tout ce processus commence avant même que vous voyiez l’image finale. Les navigateurs traitent un document de manière séquentielle, du début à la fin. Y compris tout ce qui devrait être sur la page. Tableaux, images, scripts, etc., sauf que cela inclut les styles CSS.
Bases pour les débutantsQu'est-ce que le HTML - si vous regardez ce qu'écrit Wikipédia - (HyperText Markup Language), langage de balisage hypertexte pour les documents. La plupart des pages sur Internet contiennent un balisage de page dans cette langue. Cette langue interprété par les navigateurs, le texte formaté résultant est affiché sur votre écran d'ordinateur ou votre appareil mobile.
Cette langue est intrinsèquement très facile et accessible à apprendre. Tout le monde peut apprendre et comprendre ses bases. Pour utiliser un tel langage, il faut connaître et utiliser des descripteurs, également appelés balises. C'est à l'aide de balises qu'un document est créé.
En quoi doit consister la structure du document, quelles balises doivent être présentes. Regardons tout avec un petit exemple. J'ai écrit du texte dans MS Office et je l'ai montré dans cette capture d'écran.
Pour afficher ce texte dans le navigateur de la même manière qu'il a été écrit dans le document, vous devez y ajouter un balisage de page, qui inclut certaines balises. Regardez-les d’abord, puis je décrirai chacun qui est responsable de quoi.
Bienvenue sur mon blog, vous suivez maintenant une leçon sur les bases du HTML. Si vous avez aimé cet article, vous pouvez vous abonner à ce blog pour recevoir de nouveaux articles dans votre boîte email.
Blog d'Evgeny Nesmelov ! site Web Bases du HTML et du CSS pour les débutantsDe quelles balises se compose un document HTML, que contient-il et où tout cela doit-il être écrit ?
< html >
< body >
< h2 >< / h2 >
< p >Bienvenue sur mon blog, suivez maintenant le tutoriel sur les bases du HTML. Si vous avez aimé cet article, vous pouvez vous abonner à ce blog pour recevoir de nouveaux articles dans votre boîte email.< / p >
< h2 >Blog d'Evgenia Nesmelov ! Nesmélov. ru Bases de HTML et CSS pour les débutants< / h2 >
< / body >
< / html >
Tout code est constitué de caractères placés entre crochets. Tous ces éléments sont appelés éléments. Tous les éléments sont généralement constitués de deux balises, ouvrante et fermante. Je vous conseille dans un premier temps de regarder attentivement les balises ; si vous en manquez une et ne la fermez pas, vous devrez réviser de grandes parties du code pour trouver l'erreur.
Il y a eu des cas où cela a pris plus d'une journée, une personne contacte et demande de l'aide, elle ne trouve pas d'erreur sur son site, alors regardez toujours très attentivement ce que vous écrivez et où. Allons-y maintenant dans cet exemple Examinons chaque élément du code, ce qui y est écrit, ce qu'il signifie et ce qui se passe à la fin.
La plupart des balises sont appariées, ce qui comprend une balise d'ouverture et une balise de fermeture. En plus de ces balises, il existe également des balises simples. Les balises peuvent aller de pair avec d’autres, s’emboîtant ainsi les unes dans les autres. Par exemple, affichez le texte en gras et en italique à la fois.
Texte
Structure du document HTML< strong > < i >Texte< / strong > < / i >
Permettez-moi de vous rappeler encore une fois que vous devez suivre les règles présentes dans le document. C'est ainsi que le navigateur comprend le contenu de la page, sa séquence, son contenu, etc.
Une balise est un composant qui indique au navigateur Web d'effectuer une tâche particulière. Par exemple, la présence d'un paragraphe, d'un tableau, d'un formulaire ou d'une image.
Attribut - modifie la balise. Par exemple, vous pouvez aligner un paragraphe centré ou aligné à droite, également définir l'emplacement de l'image sur la page, etc.
Fermez TOUJOURS les balises, si vous l’ouvrez, assurez-vous de la fermer. Sinon, une erreur se produira et votre document ne s'affichera pas correctement sur la page. Il existe également des exceptions qu'il ne faut pas oublier.
Il faut bien comprendre qu'il existe un titre de document et son corps. Le titre est tout ce qui est contenu dans la balise. Corps du document (), le corps du document contient tout le contenu de la page. S'il est nécessaire de vous laisser une section de code, en enfermant ainsi ces balises dans des commentaires, la balise est utilisée à cet effet. Tout ce qui se trouve à l'intérieur d'une telle balise sert de commentaire et n'est pas perçu par les navigateurs.
Commençons par le tout premier. Au début du document j'ai ouvert une balise et à la fin je l'ai fermée. Ce code est présent dans absolument tous les documents ; il indique au navigateur que tout ce qui est placé entre ces balises est du code HTML. C'est la racine du document lui-même ; tout ce qui est ensuite présent derrière cette balise n'est plus inclus dans le document et n'est pas perçu par les navigateurs. Au tout début du document, la balise est ouverte et à la toute fin elle doit être fermée.
La section entière de cette balise contient toutes les informations techniques du document. Comme la balise précédente, head doit également être ouvert et fermé à la fin. Ces informations incluent le titre de la page, la description, les mots-clés des moteurs de recherche et l'encodage. A propos de l'encodage un peu ci-dessous.
Contenu
< head >Contenu< / head >
Cette balise est incluse dans la balise head et doit être écrite à l’intérieur de la balise head. Cette balise titre est obligatoire et doit être présente dans chaque document HTML. En plus de cela, il apparaît comme titre de la fenêtre du navigateur. La longueur d'un tel en-tête ne doit pas dépasser 60 caractères. Le texte d'un tel en-tête doit contenir les informations les plus complètes qui caractérisent le contenu de la page.
Si vous avez écrit « Hello World » dans l'en-tête, c'est cette information qui doit être affichée sur la page et aucune autre. Vous ne devriez pas tromper les gens et les moteurs de recherche, ils n’aiment pas ça et vous aggravez ainsi la situation. Les informations contenues dans cette balise doivent être pertinentes par rapport au contenu de votre page.
Après la balise de titre obligatoire, il y a une balise méta facultative mais tout aussi importante. Cette balise est unique. A l'aide de cette balise, vous définissez une description de la page (description) et ses mots-clés (keywords).
De plus, la balise méta peut contenir des données sur l'auteur de la page et d'autres propriétés de métadonnées. Vous pouvez empêcher l’indexation de la page entière par les moteurs de recherche. Mettre mise à jour automatique page après 20 secondes ou après 5 secondes suivie d'une transition vers une autre page.
< meta name = "robots" content = "index, follow" >
< meta http - equiv = "refresh" content = "20" >
< meta http - equiv = "refresh" content = "5; url=http://сайт/" >
Il peut y avoir plusieurs méta-éléments de ce type, car ils peuvent contenir des informations complètement différentes. Les autres utilisateurs, lorsqu'ils ouvrent la page dans le navigateur, ne voient pas toutes vos descriptions ; tout cela reste caché.
La balise style peut également être utilisée pour définir des styles sur la page. Si vous utilisez de nombreux styles CSS différents, il est conseillé de les définir dans un fichier séparé. Si vous devez en préciser plusieurs, tout cela peut être précisé directement dans le document html.
.base ( largeur : 100px ; couleur d'arrière-plan : #000 ; hauteur : 150px ; couleur : #fff; )
< style type = "text/css" >
Base(
largeur : 100 px ;
fond - couleur : #000;
hauteur : 150px ;
couleur : #fff;
Ou ajoutez des styles spécifiquement à une balise ; pour ce faire, vous devez ajouter un élément de style à l’intérieur de la balise elle-même. Cette balise doit être utilisée dans un conteneur qui définit les styles de la page. Vous pouvez utiliser plusieurs de ces balises, ce ne sera pas une erreur.
Un peu similaire à la balise précédente, la balise link permet de définir des styles pour un document qui se trouvent dans un autre fichier. En d’autres termes, vous pouvez joindre une feuille de style CSS complète, composée de nombreuses propriétés, à un document existant. Ainsi, vous réduisez la taille du document, qui au final se chargera et s'ouvrira plus rapidement sur un ordinateur ou appareil mobile avec un faible débit Internet.
Vous pouvez connecter plusieurs fichiers, il n'y a aucune restriction. Il n'est pas nécessaire de fermer une telle balise. Si tout est fait correctement, des styles spécifiques provenant d'un fichier séparé seront chargés dans votre document. Cette balise peut être ajoutée aux bases du HTML sans oublier son existence. Le résultat est une image comme celle-ci :
< link href = "css/style-lg.css" rel = "stylesheet" >
< link href = "css/style-md.css" rel = "stylesheet" >
< link href = "css/style-sm.css" rel = "stylesheet" >
À l'aide de la balise script, vous pouvez connecter différents scénarios (scripts) à un document. La présence de la balise fermante est obligatoire. Le script lui-même peut être situé au début du document, à l'intérieur ou à la fin.
Indique au navigateur que tout ce qui est placé entre ces balises doit apparaître dans la fenêtre de votre navigateur. Voici les principales balises qui peuvent être présentes dans absolument tous les documents. La balise body sert de corps principal de la page, qui inclut tout son contenu. Il est conseillé d'ouvrir cette balise et de penser à la fermer à la fin du document.
En-têtes de pages h1 h2 h3Allons plus loin, on voit une balise qui s'ouvre et se ferme de la même manière. Cette balise désigne le titre principal du texte ; dans la plupart des cas, sous le titre H1 se trouve le titre de la page. En fait, il n'y a que six rubriques de données. . Ils sont également utilisés en référencement, mais il s’agit d’un sujet légèrement différent. Je vais certainement souligner un article à ce sujet et donner Description détaillée pour eux, abonnez-vous aux mises à jour du blog pour ne rien manquer.
La présence de tels titres dans l'article jouera un rôle important dans la promotion de la page. De plus, leur utilisation vous donne une structure de page claire, son titre, ses sous-titres, ses surlignages, ses sous-paragraphes, etc. Utilisez-les toujours et mettez-les en pratique. Sur de nombreux CMS, comme WordPress, lors de la rédaction d'un texte, vous pouvez voir « titre 1 », « titre 2 », « titre 3 », etc. Ce sont eux qui sont responsables de h1, h2 et h3.
Si vous écrivez le corps du texte d'un nouveau paragraphe, vous écrivez une balise
Au début et fermez-le à la fin
. Marquer un paragraphe en HTML équivaut à créer un nouveau paragraphe dans un document MS Word. Je n'ai rien ajouté de nouveau au document. Mais ce n’est pas tout ce qui devrait être présent dans un document HTML. Regardons un autre exemple, la description viendra un peu plus tard.Document HTML
Ce texte sera en gras, et celui-ci est aussi en italique
Éléments de base Titre et Titre< ! DOCTYPE html >
< html >
< head >
< meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / >
< title >Document HTML< / title >
< / head >
< body >
< p >
< b >
< / b >
< / p >
< / body >
< / html >
Chaque document contient un élément head et title. Le premier, qui vient immédiatement après la première balise. Cette balise contient toutes les informations sur la page, elle contient également l'élément. Titre – informations sur le titre de la page, c'est-à-dire le titre de la page, son nom. C'est dans le titre que vous indiquez le nom correct de la page par laquelle l'utilisateur vous recherchera via un moteur de recherche, un point très important. Les deux éléments doivent être ouverts et également fermés. Chaque élément est fermé par un signe « / ». Le résultat est une image comme celle-ci.
Contenu du titre et de la page
< / html > Comme vous pouvez le constater, il n'y a rien de compliqué. Voici les balises les plus élémentaires qui devraient être présentes dans chaque document HTML. N'oubliez pas de fermer chacun d'eux, sinon le navigateur ne pourra pas percevoir l'image complète du code. Vous devez toujours le savoir et vous en souvenir. Ensuite, vous commencez à insérer du texte, des images, des vidéos, etc. Mais cela sera déjà dans d’autres articles.
Éditeur Notepad++Pour travailler avec le code, utilisez le programme Notepad++. C'est gratuit et il n'est pas difficile de le trouver sur Internet. Très pratique pour comprendre n’importe quel code ; il affiche également facilement les balises d’ouverture et de fermeture. Nous prenons en charge la syntaxe de plus de 40 langages de programmation. Juste ce dont vous avez besoin pour apprendre les bases du HTML.
Le Bloc-notes est supérieur à tous égards à un bloc-notes ordinaire. Pour un maximum de commodité, de simplicité et d'apprentissage, cet éditeur doit être initialement installé sur votre ordinateur. L'avantage et la commodité les plus importants sont que l'éditeur Notepad++ affiche des astuces lors de l'écriture du code, ce qui rend votre travail beaucoup plus rapide et de meilleure qualité.
Élément DOCTYPEChaque document doit également contenir l'élément doctype suivant. Pourquoi est-il nécessaire et que devrait-il contenir. Habituellement, les gens ne sont pas très friands de ces lignes, ils les copient dans leurs documents et travaillent sereinement. Ces éléments indiquent au navigateur quelle version du HTML est utilisée dans le document, quelle est la description de la page, quel encodage est utilisé, quels mots-clés sont inclus, qui est l'auteur et comment s'appelle la page.
Ils sont généralement placés au tout début. Il existe plusieurs options et elles diffèrent toutes les unes des autres, j'écrirai un exemple qui est le plus souvent utilisé. Ce blanc peut être utilisé comme modèle prêt à l'emploi. Ensuite, il y aura une description claire de chaque ligne, cela ne devrait poser aucun problème.
Brièvement en langage clair sur les bases du HTML : Cette ligne indique au navigateur que ce document est XHTML version 1.0, l'anglais est utilisé et tout ce désordre se trouve à cette adresse. Ensuite, dans la balise méta, nous indiquons l'encodage utilisé. Le plus couramment utilisé est Windows 1251.
Description - le thème du référencement est abordé, l'une des trois balises principales qui doivent être présentes dans absolument chaque document ; cette balise indique la description de la page. Ce qui est écrit sur cette page, une brève description, pas plus de deux phrases. La balise mots-clés couvre également le thème du référencement, cette balise est obligatoire. Il contient des mots-clés grâce auxquels les internautes vous trouveront grâce à moteurs de recherche.
La balise title contient le nom du document lui-même, son titre, que l'on voit dans le navigateur. Probablement la balise la plus importante de tout le document, celle qui a le plus grand impact sur la promotion de la page. L'article sur l'ajout et la conception décrit cette balise plus en détail.
Ce qu'il faut retenir de cette leçon sur les bases du HTML :
- Presque toutes les balises s'ouvrent et se ferment ;
- Le document commence par la balise ;
- Présence d'étiquette ;
- Présence d'étiquette ;
- Structure claire du document HTML.
- Élément ( élément) est une construction du langage HTML. Il s'agit d'un objet qui contient des données et permet de les formater d'une manière spécifique. Toute page Web est un ensemble d'éléments. L’une des idées principales de l’hypertexte est la possibilité d’imbriquer des éléments.
- Étiqueter ( étiqueter) sont les marqueurs de début ou de fin d'un élément. Les balises définissent les limites de l'action des éléments et séparent les éléments les uns des autres. Dans le texte d'une page Web, les balises sont placées entre crochets et la balise de fin est toujours suivie d'une barre oblique.
- Attribut - un paramètre ou une propriété d'un élément. En d'autres termes, il s'agit d'une variable qui a un nom standard et peut se voir attribuer un ensemble spécifique de valeurs : standard ou arbitraires. Les valeurs des attributs de caractère doivent être placées entre guillemets droits, mais certains navigateurs vous permettent d'omettre les guillemets. En effet, le type d'attribut est toujours connu à l'avance. Les attributs sont situés à l'intérieur de la balise de début et sont séparés les uns des autres par des espaces.
- Un lien hypertexte est un morceau de texte qui pointe vers un autre fichier ou objet. Des hyperliens sont nécessaires pour permettre la navigation d'un document à un autre.
- Cadre ( cadre) - ce terme a deux significations. La première est la zone du document avec ses propres barres de défilement. La deuxième valeur est une image dans un complexe ( Animé) fichier graphique (semblable à une image fixe d'un film). Il est également possible qu'au lieu du terme « frame » dans la littérature spécialisée et les produits logiciels localisés, vous trouviez le terme « frame » ou « frame ».
- Un fichier HTML ou page HTML est un document créé sous forme d'hypertexte basé sur le langage HTML. Ces fichiers portent les extensions htm ou html.
- Applette ( applet) est un programme transféré sur l’ordinateur du client sous forme de fichier séparé et lancé lors de la visualisation d’une page Web.
- Script ou script ( scénario) est un programme inclus dans une page Web pour étendre ses capacités.
- Extension ( extension) est un élément qui n'est pas inclus dans la spécification du langage, mais est utilisé pour offrir la possibilité de créer un effet de formatage nouveau et intéressant.
- Image de synthèse ( Interface de passerelle commune) est un nom général pour les programmes qui, exécutés sur un serveur, vous permettent d'étendre les capacités des pages Web. Par exemple, sans de tels programmes, il est impossible de créer des pages interactives.
- Code HTML - hyper Document texte dans sa forme originale, lorsque tous les éléments et attributs sont visibles.
- Une page Web est un document (fichier) préparé au format hypertexte et publié sur le World Wide Web.
- Site web ( site) - un ensemble de pages Web situées au même endroit et interconnectées.
- Navigateur ( navigateur) est un programme permettant de visualiser des pages Web. () - copier des fichiers du serveur vers l'ordinateur client.
- URL ( Localisateur de ressources uniformes) ou un localisateur de ressources uniforme, l'adresse d'un objet sur Internet, c'est-à-dire Une URL typique pour WWW ressemble à : http://www.name.domain/filename.
- aligner="gauche"
- aligner="centre"
- align = "droite"
- align = "justifier"
- Élément de liste 1
- Élément de liste 2
- Élément de liste 3
- align="gauche" - gauche ;
- align="center" - au centre ;
- align="right" - à droite.
- javascript - code en JavaScript ;
- vbscript - code en langage VBScript.
Toutes les pages principales doivent toujours être nommées index. C'est ainsi que c'est accepté et tout le monde y est habitué, quelle que soit l'extension du fichier, cela peut être html ou php. On l'appelle toujours ainsi.
Regardez une vidéo sur les bases du HTML de Webformyself.
Langage Signalétique Hyper Text, éléments basiques et structure. Je vais essayer de décrire tout cela et bien plus encore sur mon blog. Tout d'abord, des informations utiles seront rédigées pour les débutants, un exemple de code sera fourni et la possibilité de télécharger l'exemple lui-même avec la page terminée sera offerte.
Tout le monde utilise Internet et tout le monde navigue sur différents sites, et probablement tout le monde aimerait placer son site Web sur Internet, mais ce n'est pas facile à faire, il y a plusieurs raisons à cela. Cependant, pour que vous puissiez héberger un site internet de qualité, il suffit d’en connaître les bases” Programmation web", qui est le langage HTML. Dans cet article, nous examinerons les principaux éléments, balises, attributs et même rédigerons la première page Web.
Langage de balisage hypertexte - "HTML" ( Langage Signalétique Hyper Text) beaucoup ont depuis longtemps cessé de le considérer comme un simple langage de programmation. Puisque le concept même de HTML inclut diverses méthodes de conception de documents hypertextes, de conception, d'éditeurs hypertextes, de navigateurs et bien plus encore. Un utilisateur maîtrisant ce langage acquiert la capacité de faire des choses sérieuses avec des méthodes simples et surtout rapides, ce qui est considéré comme très bien dans le monde moderne !
En langage HTML, vous pouvez créer vos propres produits multimédias et les diffuser sur CD, et tous ces produits, réalisés sous forme d'ensembles de pages HTML, ne nécessitent pas le développement de logiciels spécialisés, puisque tout le nécessaire pour travailler avec les données ( Navigateurs Web) font désormais partie du logiciel standard de la plupart des ordinateurs personnels.
Tous les éléments du langage peuvent être divisés en trois groupes. Le premier comprend des éléments qui créent la structure d'un document hypertexte. L’utilisation de tels éléments est une formalité nécessaire qui ne peut être négligée. Le deuxième groupe comprend des éléments qui créent des effets de formatage. Leur utilisation est dictée par les exigences spécifiques du document, l'imagination et la compétence du développeur. Le troisième groupe comprend des éléments qui permettent de gérer logiciel installé et exécuté sur l'ordinateur client. Souvent, ces éléments sont créés automatiquement lorsqu'un développeur utilise un éditeur hypertexte ou un programme similaire pour insérer un objet dans un document.
Bien que la spécification HTML soit un standard, de nouveaux éléments sont ajoutés au langage ( extensions). Par conséquent, certaines pages Web sont plus pratiques à visualiser à l’aide de certains navigateurs. Les extensions sont créées uniquement par des sociétés renommées qui développent logiciel pour WWW, et les utilisateurs ordinaires peuvent améliorer leurs pages Web à l'aide de la programmation. Les applets permettent de supprimer les limitations du HTML et de laisser libre cours à l'imagination du développeur.
Versions HTMLLa première version de HTML a été développée au début des années 90 par Tim BenersLee pour l'un des navigateurs Mosaic les plus populaires du passé. Mais à cette époque, ni le navigateur ni le HTML lui-même n’avaient encore trouvé une bonne utilisation. HTML+ est apparu en 1993, et cette version est également passée quasiment inaperçue. Mais le langage HTML s'est généralisé grâce à la version 2.0, apparue en juin 1994. Et à partir de ce moment, la popularité du WWW n’a cessé de croître dans le monde entier. Les normes incluses dans la version 2 sont devenues si établies qu'elles sont encore utilisées aujourd'hui.
La version HTML 3.0, apparue environ un an plus tard, a introduit la possibilité de dessiner des symboles mathématiques ( signes intégraux, infini, fractions, parenthèses, etc.) en utilisant des éléments de langage. Mais le développement de ce projet s'est ralenti et n'a pas été davantage diffusé.
En 1996, la version HTML 3.2 est apparue. C'était une solution brillante ; il suffit de mentionner que les frames ont été introduits dans la spécification du langage, qui sont désormais devenus très populaires parmi les développeurs de sites Web. À ce jour, tous les navigateurs prennent en charge cette version du HTML.
Spécification officielle HTML 4 ( HTML dynamique) a été élaboré en 1997. À cette époque, il était déjà évident que le développement ultérieur de l’hypertexte se ferait grâce à la programmation Web. Cela s’est avéré bien plus efficace que d’introduire de nouveaux éléments dans le langage.
Structure des pages WebVous trouverez ci-dessous le code de la page Web, qui est réalisé en HTML, et en utilisant cette page comme exemple, nous analyserons sa structure, mais d'abord, copiez tout le code dans un bloc-notes de texte ordinaire, cliquez sur « Enregistrer sous » et enregistrez le fichier avec l'extension html, c'est-à-dire . après le nom write.html
Structure d'un document web Aller à la fin du document Rubrique 1 Rubrique 2 Rubrique 3 Rubrique 4 Rubrique 5 Rubrique 6 Le premier lien se trouve ici Doit être situé ici
texte principal de la page Web.
Et moi, par exemple, j'insérerai ici
plusieurs transferts,
pour que tu puisses
observer clairement
comment ça marche pour toi
des liens dans le document,
sinon si vous avez une grande résolution,
Vous ne remarquerez tout simplement pas les liens suivis
Notation des documents HTML. L'un des principes du langage est l'imbrication d'éléments à plusieurs niveaux. Cet élément est l'élément le plus externe, puisque la page Web entière doit être située entre ses balises de début et de fin. En théorie, cet élément peut être considéré comme une formalité. Il possède les attributs version, lang et dir, qui sont rarement utilisés dans ce cas, et permet l'imbrication de HEAD, BODY FRAMESET et d'autres éléments qui déterminent la structure globale de la page Web. Naturellement, tous ces documents se terminent par une balise de fin.
< head >
La zone de titre d'une page Web. Autrement dit, sa première partie. Tout comme l'élément précédent, HEAD sert uniquement à former la structure générale du document. Cet élément peut avoir les attributs lang et dir.
< title >
Un élément pour placer le titre d'une page Web. La ligne de texte située à l'intérieur de cet élément n'apparaît pas dans le document, mais dans la barre de titre de la fenêtre du navigateur. Cet élément influence grandement la promotion dans le moteur de recherche car les moteurs de recherche accordent une attention particulière à la balise TITLE. Mon conseil : ne faites jamais de texte très long dans cette balise ( 65 caractères suffisent).
Cet élément contient des informations de service qui ne sont pas reflétées lors de l'affichage d'une page Web. Il n’y a pas de texte à l’intérieur au sens habituel du terme, donc il n’y a pas de balise de fin. Chaque élément META contient deux attributs principaux, le premier définissant le type de données et le second définissant le contenu.
< body >
Cet élément combine l'hypertexte, qui définit la page Web elle-même. C'est la partie visible du document qui est développée par la page auto et qui est affichée par le navigateur. Par conséquent, la balise de fin de cet élément doit se trouver à la fin de la page Web. À l'intérieur de l'élément BODY, vous pouvez utiliser tous les éléments destinés à la conception de pages Web. Dans la balise de début de l'élément BODY, vous pouvez placer de nombreux attributs qui servent à définir la page entière. Regardons-les dans l'ordre.
L'un des attributs les plus utiles de cette balise, qui a un impact sur la conception de la page, est
background="chemin d'accès au fichier d'arrière-plan"
Une conception d'arrière-plan plus simple revient à définir sa couleur
bgcolor=”#FFFFFF”
La couleur d'arrière-plan est spécifiée par trois nombres hexadécimaux à deux chiffres qui déterminent l'intensité des couleurs rouge, vert et bleu (rbg).
Puisque vous pouvez modifier l’arrière-plan de la page, vous pouvez également modifier la couleur du texte. A cet effet, il existe l'attribut suivant
texte="#RRGGBB"
Pour définir la couleur du texte des hyperliens, utilisez l'attribut suivant
lien = "#RRGGBB"
Vous pouvez également spécifier un changement de couleur pour le dernier lien hypertexte sélectionné par l'utilisateur.
Élément d'en-tête. Il existe six niveaux de titres, désignés comme suit.
Titre
Titre
Titre
Titre
Titre
Titre
Le titre de niveau 1 est le plus grand et le niveau 6 fournit le titre le plus petit. Pour les titres, vous pouvez utiliser un attribut qui spécifie l'alignement à gauche, au centre ou à droite :
align="gauche" align="centre" align="droite"
Pour créer un nouveau paragraphe, utilisez la balise
Et pour passer à une nouvelle ligne sans créer de paragraphe - tag
c'est-à-dire que le transfert se produit. Il n'est pas nécessaire de fermer ces balises. Bien sûr, si vous n'utilisez pas dans le tag
L'élément ALIGN, qui peut définir l'alignement des paragraphes :
Gauche
Centré
Droite
Le texte entre ces éléments est aligné en largeur
Ligne horizontale ( La règle horizontale) est un élément très courant. Premièrement, parce que cela rend très simple et pratique la division d’une page en plusieurs parties. Deuxièmement, parce que l’auteur de la page dispose d’une très petite sélection de ces éléments de conception. L'élément n'a pas de balise de fin, mais possède un certain nombre d'attributs pour gauche, centre, droite et justification :
Un document HTML peut être très fastidieux et peu pratique pour l'utilisateur qui doit accéder rapidement à la section souhaitée du document. Pour ce faire, vous pouvez utiliser le mécanisme de lien hypertexte. Pour ce faire, placez les marques appropriées aux bons endroits dans le texte.
Texte libre
Dans ce cas, une ligne donnée du document reçoit un nom, et donc un lien hypertexte peut être créé vers une autre partie du document, voire sur un autre document, menant vers cette étiquette.
Pour insérer des images ( Des photos) dans un document HTML, la balise suivante est utilisée ( fournit une description complète des attributs de cette balise):
(liste) ont été développés en HTML, sans doute influencés par le succès des éditeurs de texte. Une liste diffère du texte ordinaire, tout d'abord, en ce que l'utilisateur n'a pas besoin de penser à numéroter ses éléments : HTML se charge de cette tâche. Si la liste est complétée par de nouveaux éléments ou raccourcie, la numérotation se poursuit automatiquement. Dans le cas de listes non numérotées, HTML précède chaque élément de marques : cercles, rectangles, losanges et autres images. En fin de compte, la liste prend une forme décente. Il existe deux groupes de telles balises : certaines définissent l'apparence générale de la liste ( et vous permettent de spécifier des attributs), tandis que d'autres précisent sa structure interne. Vous pouvez utiliser des attributs standard dans les listes. Il existe plusieurs types de listes.
La plus courante est la liste non numérotée ( liste non ordonnée). Il est présenté ci-dessous :
L'élément ul est une sorte de mise en évidence d'une liste. Il vous permet de séparer une liste d'une autre. L'élément li représente chacun des éléments.
les tablesIls constituent l’un des moyens les plus nécessaires pour formater les données d’une page Web. La principale commodité est que le navigateur se charge de dessiner l’intégralité du tableau. La taille du cadre peut être automatiquement ajustée à la taille de la fenêtre de visualisation du navigateur et, bien sûr, à la taille des lignes de texte et des images dans les cellules du tableau. En plus de tout le reste, les tableaux permettent de résoudre de nombreux problèmes de conception : aligner des parties d'une page les unes par rapport aux autres, placer des images et du texte les uns à côté des autres, gérer les jeux de couleurs, etc. Lors de la création de tableaux, le principe d'imbrication est appliqué : à l'intérieur de l'élément principal du tableau (TABLE), un certain nombre d'éléments sont créés qui définissent des lignes (TR), et à l'intérieur de ces éléments se trouvent des éléments pour décrire chaque cellule de la ligne (TD, ÈME).
Afin de comprendre la structure d'un tableau existant ou de développer un nouveau tableau, il existe une règle selon laquelle la séquence d'éléments décrit le tableau de haut en bas et de droite à gauche. Par exemple, si un élément TABLE est suivi d'un élément TR, cela indique qu'une nouvelle ligne de tableau est en cours de définition. Tout ce qui se trouve derrière cet élément sera placé sur une seule ligne (de droite à gauche). Cela pourrait être une séquence d'éléments TD ( cellules), une autre table et ainsi de suite. Après l'apparition d'un nouvel élément TR, la description de la ligne suivante commence, et ainsi de suite jusqu'à la fin du tableau (balise).
Le tableau peut être aligné horizontalement à l'aide de l'attribut align :
La largeur du tableau peut être définie exactement en pixels ou en pourcentage de la largeur de la page dans la fenêtre du navigateur. Par exemple : largeur=400 ou largeur=50 %
Deux attributs sont utilisés pour contrôler l'apparence du cadre. Le fait est que le navigateur crée une image du cadre, simulant sa tridimensionnalité ( convexe) utilisant les différences d'éclairage des visages
ScénariosPresque tous les webmasters souhaitent que les pages de leur site Web aient un aspect moderne, soient multifonctionnelles, belles et dynamiques. Par des moyens standards Ceci n'est pas possible en HTML, donc différents outils sont utilisés : applets, objets, feuilles de style en cascade, etc. Mais le type le plus populaire et le plus répandu ( réception) est l'utilisation de scripts.
Un script est un code de programme inclus dans le texte de la page sous la forme texte source et est exécuté par le navigateur lorsque la page est consultée. Le script peut être écrit en Javascript, développé par Netscape, ou en Visual Basic Script ( VBScript), développé par Microsoft.
Cette balise vous permet de séparer le texte du programme de script des autres informations de la page. La balise SCRIPT doit inclure un attribut de langue, qui spécifie la langue et peut prendre les valeurs suivantes :
L'attribut type peut également indiquer le type de langue, bien que son utilisation ne soit pas obligatoire. Afin de ne pas enfreindre toutes les règles, vous pouvez placer la définition suivante à l'intérieur de l'élément :
type="texte/javascript"
L'une des fonctionnalités les plus intéressantes des scripts est la possibilité de modifier le contenu d'une page à la suite de l'exécution d'un programme. Mais ce n’est qu’une caractéristique et non une règle. En utilisant l'attribut defer (qui n'accepte aucune valeur), vous pouvez « indiquer » au navigateur que de telles modifications ne seront pas apportées. Dans certains cas, cela permet à la page de se charger plus rapidement.
Parmi les attributs standard, vous pouvez utiliser l'attribut charset.
Balise SCRIPT ( ou un certain nombre de ces éléments) peut être situé soit à l’intérieur de l’élément HEAD, soit à l’intérieur de l’élément BODY. Si le script se trouve à l'intérieur de l'élément BODY, il est également possible qu'un navigateur qui ne prend pas en charge l'élément SCRIPT perçoive le code du programme comme du texte brut et l'affiche à l'écran. Pour éviter que cela ne se produise, le code du script est saisi en commentaire :
—
—
—
Tous les navigateurs modernes reconnaissent cette technique et ignorent les caractères de commentaire. Si vous devez saisir un commentaire dans le texte du script, une notation différente est utilisée pour cela : deux barres obliques // sont saisies au début de la ligne.
Le code du script est exécuté lorsque la page est chargée, c'est-à-dire lorsque son contenu est encore visible à l'écran. Vous trouverez ci-dessous un exemple du scénario le plus simple ( afficher un message dans une fenêtre).
—
—
—
- Juste un script
—
- alert("Vous avez écrit votre premier script !")
—
—
—
—
C'est une page simple, mais elle comprend un script d'une seule ligne. En utilisant la méthode d'alerte, un message s'affiche avant le chargement. Et il se bloquera jusqu'à ce que l'utilisateur clique sur le bouton OK, le téléchargement ne continuera pas.
Il est possible que la page soit visualisée dans un navigateur ne prenant pas en charge les scripts ; l'élément NOSCRIPT est prévu à cet effet. Les programmes de visualisation modernes ignorent son contenu. Cet élément peut être utilisé de plusieurs manières. Pour commencer, vous pouvez afficher une annonce à l’intérieur comme celle-ci : « Votre navigateur ne peut pas exécuter le script requis pour afficher cette page Web !"Deuxièmement, à l'intérieur de l'élément, vous pouvez développer une version simplifiée de la page, sans scripts. Troisièmement, vous pouvez créer un lien vers un autre document HTML. L'élément NOSCRIPT doit avoir une balise de fin.
Nous avons donc examiné les bases d'un langage de programmation WEB tel que HTML. Même après avoir lu ce court article, vous avez déjà une idée, et même la possibilité de programmer dans ce langage. Bonne chance!