Histoire de la création et du développement du HTML

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 ; il 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'identification. 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 HTML

HTML 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 Web

Pour 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ément

La 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 données qui indiquent au navigateur comment traiter la page.

1.2.1. Élément

La 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ément

Une 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 :

Tableau 2. Attributs de balise Attribut

jeu de caractères	Spécifie l'encodage des caractères du document HTML actuel :
contenu	Contient du texte arbitraire qui spécifie la valeur associée à l'attribut http-equiv ou name, en fonction de leur valeur.
http-équiv	Contrôle les actions du navigateur sur une page Web donnée (équivalent aux en-têtes HTTP). Lors du rendu de la page, le navigateur suivra les instructions spécifiées dans l'attribut : style par défaut spécifie le style préféré à utiliser sur la page. L'attribut content doit contenir l'ID de l'élément qui fait référence à la feuille de style CSS, ou l'ID de l'élément qui contient la feuille de style. L'actualisation indique le temps en secondes avant le rechargement de la page ou le temps avant la redirection vers une autre page si l'attribut de contenu contient la ligne "url=page_address" après le temps. Recharger automatiquement la page après une période de temps spécifiée, dans cet exemple, après 30 secondes : Si vous devez transférer immédiatement le visiteur vers une autre page, vous pouvez spécifier l'URL dans le paramètre url :
nom	Associé à la valeur contenue dans l'attribut content. Ne doit pas être utilisé si l'élément a déjà les attributs http-equiv , charset ou itemprop définis. application-name spécifie le nom de l'application Web utilisée sur la page. author précise le nom de l'auteur du document en format libre. description définit une brève description du contenu de la page, par exemple : générateur spécifie l'un des progiciels utilisés pour créer le document, par exemple : . mots-clés contient une liste de mots-clés séparés par des virgules qui correspondent au contenu de la page, par exemple : . En outre, l'attribut name peut prendre les valeurs suivantes de la spécification étendue, telles que créateur, googlebot, éditeur, robots, slurp, viewport, bien qu'aucune d'entre elles n'ait encore été officiellement adoptée.

1.2.3. Élément

À l'intérieur de cet élément, les styles utilisés sur la page sont définis. CSS est utilisé pour définir les styles dans un document HTML. Il peut y avoir plusieurs de ces éléments sur une page.

À l'intérieur de cet élément, vous pouvez écrire du code de formatage pour les éléments de la page Web eux-mêmes et pour la page Web entière.

.paper (largeur : 200 px ; hauteur : 300 px ; couleur d'arrière-plan : #ef4444 ; couleur : #666666 ; )

Pour attacher un style donné à un élément, vous devez attribuer le nom approprié à l'élément à l'aide de l'attribut class (ou id) :

...

Le code CSS peut être intégré directement dans un élément de balisage en tant que valeur de l'attribut style, par exemple :

1.2.4. Élément

Vous pouvez également définir des styles pour un document en utilisant une autre méthode : écrivez-les dans un fichier séparé avec l'extension .css, par exemple style.css.

Il existe deux manières de connecter un fichier avec des styles à une page Web :
via la directive @import url

@import url(style.css);

en utilisant l'élément. L'élément ne nécessite pas de balise de fermeture. Cet élément définit la relation entre la page actuelle et les autres documents. Il peut y avoir plusieurs de ces éléments sur une page. L'entrée ressemblera à ceci :

Tableau 4. Attributs de balise Description de l'attribut, valeur acceptée

origine croisée	Indique si CORS (une technologie de navigateur qui permet à une page Web d'accéder aux ressources d'un autre domaine) doit être utilisé lors de la récupération d'une image d'un site. anonyme — le navigateur ajoute automatiquement un en-tête Origin à une requête inter-domaines, contenant le nom du domaine à partir duquel la requête a été effectuée. Si le serveur ne répond pas avec l'en-tête CORS Access-Control-Allow-Origin: * (ou le nom de domaine au lieu d'un astérisque), alors le chargement de l'image sera bloqué. use-credentials - Si le serveur ne fournit pas d'informations d'identification à l'aide de Access-Control-Allow-Credentials: true , le chargement de l'image sera bloqué.
href	L'attribut principal de la balise, la valeur est le chemin d'accès au fichier avec les styles.
hreflang	Détermine la langue du texte dans le document référencé.
médias	Spécifie le type de périphérique auquel la ressource de lien doit être appliquée.
occasionnellement	Variable de chaîne générée aléatoirement sur le serveur qui définit les règles d'utilisation des styles en ligne pour protéger le contenu. La valeur de l'attribut est une chaîne de texte.
rapport	L'attribut définit la relation entre le document actuel et le document référencé. alternatif - un lien vers le même document, mais dans un format différent (par exemple, pages à imprimer, traduction, miroir, flux au format RSS ou Atom), . archives - indique que le document lié présente un intérêt historique. Un lien peut pointer vers une collection d’enregistrements, de documents ou d’autres éléments. lien auteur vers une page sur l’auteur du document ou vers une page avec les coordonnées de l’auteur. ajouter dans vos favoris une référence à l'ancêtre le plus proche de l'article qui est le lien, ou à la section de l'article la plus étroitement liée à l'élément s'il n'y a pas d'ancêtre. external est utilisé pour indiquer que la page vers laquelle le lien est lié ne fait pas partie de ce site. first spécifie un lien pointant vers le premier document d'une séquence de documents. help lien vers un document d'aide. icon spécifie le chemin d'accès à l'icône qui sera utilisée pour le document actuel. last spécifie un lien pointant vers le dernier document d'une séquence de documents. licence Un lien vers les informations de copyright d'un document. next indique que ce document fait partie d'une série et que le lien mène au document suivant de cette série. nofollow indique que le lien n'est pas approuvé par l'auteur de la page ou que le lien est de nature commerciale. noreferrer indique que l'en-tête de la requête client contenant l'url de la source de la requête ne doit pas être transmis lorsque l'on suit le lien. pingback spécifie l'adresse du serveur pingback, qui permet au blog de notifier automatiquement les sites qui y renvoient. prefetch spécifie que le fichier référencé doit être mis en cache à l'avance. prev indique que ce document fait partie d'une série et que le lien renvoie vers un document précédent de cette série. La recherche indique que le document référencé contient une interface de recherche et des ressources associées. La barre latérale indique que le document lié sera affiché dans un contexte de navigateur supplémentaire, si possible, et certains navigateurs, lorsque vous cliquez sur un lien hypertexte, ouvrent une fenêtre pour ajouter le lien à votre barre de favoris. la feuille de style est un lien vers un fichier externe qui sera utilisé comme feuille de style pour ce document. La balise indique que la balise du lien hypertexte s'applique à ce document. up indique que la page fait partie d'une structure hiérarchique et que le lien hypertexte mène à un niveau de ressource plus élevé dans la structure.
tailles	Spécifie la taille des icônes pour l'affichage visuel. L'attribut size est utilisé uniquement en conjonction avec rel="icon" et peut prendre les valeurs suivantes : largeurs-hauteur - définit une liste de tailles séparées par des espaces, chaque taille doit être au format - largeurs-hauteur (les dimensions des icônes sont spécifiées en pixels), par exemple : ; any - l'icône peut être redimensionnée à n'importe quelle taille.
titre	Définit le titre d'un lien ou le nom d'un ensemble de feuilles de style alternatives. La valeur de l'attribut est du texte.
taper	Spécifie le type MIME du document référencé. Dans ce cas il prend la valeur "text/css" .

1.2.5. Élément Tableau 5. Attributs de balise Description de l'attribut, valeur acceptée

asynchrone	L'attribut indique que le script s'exécutera de manière asynchrone avec le reste de la page (le script commencera à s'exécuter en même temps que le chargement de la page).
jeu de caractères	Définit le codage des caractères
origine croisée	Détermine si CORS sera utilisé lors du chargement de scripts externes (à l'aide de l'attribut src). anonyme — avant de charger le script dans une requête cross-domain, le navigateur ajoute automatiquement l'en-tête Origin, sans transmettre de paramètres d'accès (cookie, certificat X.509, login/mot de passe pour l'authentification de base via HTTP). Si la réponse du serveur ne contient pas l'en-tête Access-Control-Allow-Origin: domain name, le script ne sera pas chargé. use-credentials — avant de charger le script dans une requête inter-domaines, le navigateur ajoute automatiquement un en-tête Origin indiquant les paramètres d'accès (cookie, certificat SSL ou paires login/mot de passe). Si la réponse du serveur ne contient pas l’en-tête Access-Control-Allow-Credentials: true, le script ne sera pas chargé.
reporter	L'interprétation des scripts est retardée jusqu'à ce que le document soit rendu sur l'appareil de l'utilisateur.
occasionnellement	Assure la sécurité en protégeant contre les attaques de script intersite (XSS). Définit les règles d'utilisation des scripts intégrés à l'aide de valeurs occasionnelles et de hachages. Lors du rendu de la page, le navigateur calcule les hachages pour chaque script en ligne et les compare à ceux répertoriés dans le CSP. Les téléchargements à partir de ressources non incluses dans la « liste blanche » sont bloqués.
src	Indique l'emplacement du fichier avec le script ; la valeur de l'attribut est l'url du fichier contenant le programme JavaScript.
taper	Utilisé pour déclarer le langage de script utilisé pour composer le contenu de la balise.

1.3. Élément

Cette section contient tout le contenu du document. Disponible pour l'élément.

Tableau 5. Attributs de balise Description de l'attribut, valeur acceptée

suraprèsimpression	Un événement qui se déclenche après l'envoi d'une page pour impression ou après la fermeture de la fenêtre d'impression.
suravantimpression	Un événement qui se déclenche avant qu'une page ne soit envoyée pour impression.
avant le déchargement	L'événement est déclenché lorsque le visiteur initie une transition vers une autre page ou clique sur « fermer la fenêtre ». Vous permet d'afficher un message dans la boîte de dialogue de confirmation pour indiquer à l'utilisateur s'il souhaite rester ou quitter la page en cours.
sur le changement de hachage	L'événement est déclenché lorsque la partie de hachage de l'URL change, par exemple lorsque l'utilisateur passe de example.domain/test.aspx#page1 à example.domain/test.aspx#page2 .
sur message	Un événement se produit lorsqu'un message est reçu via une source d'événement.
en lignehors ligne	L'événement est déclenché par le navigateur lorsque celui-ci détermine que la connexion Internet a été perdue.
en ligne	L'événement est déclenché par le navigateur lorsque la connexion Internet a été rétablie.
sur la pagemasquer	L'événement se produit lorsque l'utilisateur quitte la page via la navigation, par exemple en cliquant sur un lien, en actualisant la page, en remplissant un formulaire, etc.
sur la pageafficher	L'événement se produit lorsque l'utilisateur accède à la page Web, après l'événement onload.
au déchargement	L'événement est déclenché si la page ne se charge pas pour une raison quelconque ou lorsque la fenêtre du navigateur est fermée.

Bienvenue sur les pages de mon blog. HTML est un langage de balisage simple utilisé pour créer des pages Web. J'ai dit que c'était simple pour que vous ne soyez pas intimidé en l'apprenant. Le langage HTML est tout simplement idéal pour les débutants - il est beaucoup plus difficile de maîtriser immédiatement un langage de programmation à partir de zéro, mais le HTML est en réalité beaucoup plus simple.

Dans cet article, je veux vous expliquer comment apprendre cette langue le plus rapidement et le plus efficacement possible, afin qu'en un mois ou deux vous la connaissiez parfaitement. Pensez-vous que c'est impossible ? J'ai commencé à apprendre le HTML fin mars. Fin mai, je connaissais déjà 90% des tags nécessaires au travail sans aucun problème.

Comment apprendre une langue gratuitement ?

Bien entendu, pour un apprentissage plus rapide, vous devriez trouver plusieurs sites utiles. Tout d’abord, vous aurez besoin de la référence HTML. Même les programmeurs chevronnés l'utilisent, car il est tout simplement impossible de garder en tête des dizaines de balises et leurs attributs.

Parmi les ouvrages de référence que je peux vous recommander - htmlbook. C'est un site vraiment sympa qui rassemble toutes les balises et montre le résultat de leur travail avec une description détaillée. Mais l'ouvrage de référence n'est qu'un outil supplémentaire ; le plus grand effet peut être obtenu avec une pratique réelle.

Cours interactifs

Et ici je parle de cours interactifs. Il s'agit de la capacité d'écrire du code et de voir immédiatement comment il s'affiche. Pendant les cours, des devoirs vous seront confiés. Tout d’abord, des tâches simples, par exemple transformer le texte en titre ou créer un tableau. Ensuite, c'est plus difficile. Finalement, vous comprendrez ce que vous pouvez faire avec HTML. Si vous pensez que vous devez payer pour cela, vous vous trompez.

est un site merveilleux avec des cours sur HTML et CSS. Les 16-18 premiers cours sont gratuits ! Si vous souhaitez poursuivre vos études et accéder à des études payantes, vous devrez payer 300 roubles par mois ou 1 800 par an. Personnellement, j'ai payé 300 roubles, j'ai suivi tous les cours payants en un mois et j'en ai beaucoup profité.

Importance des dossiers

Un autre conseil de ma part : écrivez-le ! Notez toutes les informations nouvelles et importantes pour vous. Sans l’écrire, vous risquez de ne pas conserver en mémoire les connaissances nécessaires. Personnellement, j'ai trois cahiers généraux sur mon étagère, presque entièrement remplis d'écritures, et de temps en temps je les regarde lorsque j'oublie tel ou tel bien.

Etude parallèle du HTML et du CSS

HTML n'est qu'une technologie Web qui permet de créer la structure et la mise en page d'une page Web. CSS est entièrement responsable de la conception dans le développement de sites Web. Ces langues doivent être apprises simultanément car elles interagissent entre elles.

Pratique indépendante

Une fois que vous aurez acquis quelques connaissances, vous pourrez pratiquer par vous-même. Comment faire cela ? Essayez de présenter un article avec des images, un tableau, une liste imbriquée, une simple mise en page à deux colonnes ou autre chose. Vous devez vous entraîner car c’est le seul moyen d’ancrer rapidement dans votre cerveau une compréhension du fonctionnement des choses. Le mieux, bien sûr, est de vous trouver un professeur en la matière, mais vous devrez très probablement payer pour cela.

Leçons de l'équipe webformyself

Webformyself est un merveilleux portail Internet qui fournit une tonne d'informations sur la création de sites Web. Sur leur site Web, vous pouvez trouver de nombreux articles gratuits sur HTML, CSS et la mise en page de sites Web, mais ils ont également publié des didacticiels vidéo payants, dont le but est de vous transmettre des connaissances utiles le plus rapidement possible.

En fin de compte, vous devriez avoir une raison pour laquelle vous apprenez ces technologies Web. Ceci est généralement effectué afin d'apprendre à créer vous-même des mises en page de sites Web. Si vous avez également cet objectif, une excellente option pour vous serait d’acheter l’accès à des leçons premium sur webformyself.com. En conséquence, vous pouvez accéder non seulement à des cours sur HTML et CSS, mais aussi à bien d’autres. Par exemple, JavaScript et WordPress.

Il y a des leçons utiles, y compris la possibilité de créer votre première mise en page en utilisant les leçons. Ceci est très important, car vous obtiendrez une bonne pratique, après quoi vous pourrez améliorer vos compétences par vous-même, en essayant de créer d'autres mises en page pour les sites que vous trouvez sur Internet.

Combien de temps faut-il pour apprendre les langues ?

En moyenne, HTML et CSS peuvent être appris très rapidement avec la bonne approche. Par exemple, cela m'a pris plusieurs mois. Si vous savez où acquérir des connaissances, le processus d'apprentissage peut être accéléré plusieurs fois.

Je vous ai donné de bons sites avec du matériel utile - alors c'est à vous de décider. En principe, les ressources ci-dessus sont les meilleures sur Internet. Par exemple, plus de cent mille personnes ont suivi les cours de Htmlacademy et plus de 87 mille personnes se sont abonnées aux mises à jour de Webformyself.

Je vais probablement commencer par le début...

HTML n'est pas à la base un langage de programmation. C'est un langage de balisage pour les documents hypertextes. Autrement dit, il se charge de la disposition dans le document de vos textes, dessins, tableaux... destinés à la vie sur Internet. Il est impossible de le forcer à calculer combien deux fois deux font deux, il n'y a pas de fonctions logiques, mais c'est beau et, surtout, facile d'afficher l'information que deux fois deux font quatre - c'est facile. Ce langage est lu à l'aide de programmes qui vous sont familiers, appelés navigateurs (navigateurs), qui « connaissent » les commandes standards du langage html, et les « mâchent », affichent des documents sur l'écran de l'ordinateur sous la forme dans laquelle le web master - le compilateur de documents - veut les présenter.

Parlons maintenant des commandes - elles sont appelées descripteurs, mais le plus souvent - balises.

Revenons à notre première page... alors nous avons écrit :

Ma première page


Bonjour le monde!!!

C'est donc ce qui est écrit entre - ils sont appelés balises ; ils ne sont pas visibles par le lecteur qui regarde votre page, mais sont clairement visibles par le navigateur, qui, étant tombé sur une balise, la comprend comme un signal qu'il y aura être un document qui doit être lu et affiché sur le moniteur sous la forme requise .. mais la balise indique que le document est terminé et que rien de plus n'est requis de sa part, c'est-à-dire le navigateur, et il peut reposer en toute conscience .

Alors qu’avons-nous écrit ? et comment le navigateur le lit-il ?

Pensées du navigateur :

- le début du document.. encore beaucoup de travail..
- regarde le dictionnaire anglais et traduis « head »… il n’y a aucun problème dans ma tête avec la sciure !! ... voici les informations de service de base sur le document... alors qu'est-ce qu'ils attendent de moi ?
- "titre" signifie... vous devez écrire son nom dans l'en-tête de la fenêtre :
Ma première page - La bouilloire s'entraîne à nouveau.
- tout le nom est terminé.. vous pouvez passer à autre chose..
- ouais, et à part le nom, on ne garde plus de pensées absurdes dans la tête..
- Le « corps » du document, tout ce qui est écrit en dessous est exposé au public
Bonjour le monde!!! - comme c'est gentil ! Ça suffit déjà !!!

- déplacer le texte à la ligne suivante... Je peux même deviner ce qu'il y aura dedans...
Je m'appelle (votre nom ici), ceci est ma première page ! - eh bien, oui, c'est le cas.. ils ne peuvent rien proposer de plus original..
- c'est tout ? Ne rien montrer d'autre ?
- Eh bien, c'est fini !! Ne vous réveillez pas, ne vous retournez pas, en cas d'incendie, sortez d'abord !!

C'est à peu près ainsi que fonctionne la lecture de notre page.. Comme vous pouvez le constater, le navigateur est d'un type plutôt capricieux, il doit donc donner des commandes claires et précises, sinon il jurera.. et à voix haute.. et rappelons donc ce qui suit des choses:

1) Il faut rappeler une fois pour toutes que s’il y a une balise ouvrante, il doit aussi y avoir une balise fermante

Bien qu'il existe des exceptions, comme notre tag
- il ne nécessite pas de fermeture car il dit seulement qu'il doit être écrit sur une nouvelle ligne. À propos, essayez d'en ajouter quelques autres avant la ligne « Mon nom est… » et vous verrez qu'en conséquence, il a sensiblement baissé. (Eh bien, bien sûr, enregistrez les modifications dans le bloc-notes, et appuyez sur le bouton « actualiser » dans le navigateur)

2) Tous les documents doivent avoir le modèle de code suivant :

- début du document
- début de la tête
- fermer la tête
- début du corps
- fermeture du corps
- fin du document

Ces balises sont obligatoires ! Ils doivent toujours être rédigés à chaque nouvelle page, et uniquement dans cet ordre ! N'essayez pas de tout chambouler...

3) À propos de la commande :

La balise d'ouverture et de fermeture est une sorte de conteneur, une boîte dans laquelle d'autres balises peuvent être stockées - des boîtes plus petites... donc, selon la logique, le document devrait ressembler à ceci :

contenu

Si vous écrivez par exemple comme ceci :

contenu

Il s'agira d'un déchet qui ne rentre pas dans votre tête, le « grand » est déjà fermé, et le « petit » en « dépasse », qui est enfermé au « milieu », et le « contenu » s'est dispersé partout.. Il est difficile, même pour une personne, d'imaginer de quoi il s'agit du navigateur.. Structurez clairement le code de votre page, sinon rien ne fonctionnera..

Eh bien, nous avons appris à écrire un texte simple, c'est un début ! dans le prochain chapitre, je parlerai de ce que vous pouvez en faire.

Lorsque vous écrivez un site Web, créez un dossier à n'importe quel endroit pratique de votre disque dur, appelez-le comme vous voulez, tant qu'il est clair... enregistrez vos pages dans ce dossier, en leur donnant des noms significatifs... des options comme aaa. html, 123.html entraînera confusion et confusion... A ce stade, ce conseil ne semblera pas pratique, mais à l'avenir il facilitera grandement votre travail. Imaginez, par exemple, au moins 20 à 30 fichiers de ce type dont vous devez garder les noms à l'esprit afin de pouvoir les croiser. Commandez d'abord !

Lors de l’écriture du code, je vous conseille de respecter un « bon style d’écriture », c’est-à-dire d’écrire les balises de manière « en échelle », car une balise est imbriquée dans une autre. Au fil du temps, vous comprendrez qu'en lisant du code écrit comme ceci :



Ma première page


Bonjour le monde!!!

Je m'appelle Carlson, ceci est ma première page !



Beaucoup plus simple que ça :



Ma première page


Bonjour le monde!!!

Je m'appelle Carlson, ceci est ma première page !



Et plus encore que ça :

Ma première pageBonjour tout le monde !!!
Je m'appelle Carlson, ceci est ma première page !

Même si c’est une question d’habitude… mieux vaut quand même s’habituer à écrire « lisiblement ».

Bonjour chers webmasters débutants. Commençons par apprendre les langages de programmation.

Et nous commencerons à les étudier avec du HTML.

Je dirai tout de suite qu'à la fin du cours vous serez capable d'écrire vous-même un site Internet en HTML pur et de le publier sur Internet. Mais je recommande quand même de prendre votre temps, et après le HTML, de vous familiariser avec le CSS.

Ensuite, vous rendrez le site plus cool et vous pourrez corriger l'apparence du site créé sur un CMS (système de gestion de contenu) prêt à l'emploi.

Apprendre un langage de programmation et apprendre une langue étrangère n’est pas la même chose, et c’est beaucoup plus simple. De plus, ce n'est pas effrayant, mais très excitant.

C'est juste que l'incompréhensible vous fait toujours peur, mais je vous promets qu'après les toutes premières leçons, toutes les peurs passeront.

Nous apprendrons à utiliser l'éditeur que vous devez installer sur votre ordinateur.

Dans cet éditeur de fichiers, vous pouvez écrire du code et voir immédiatement comment le navigateur l'affiche. Très pratique.

Allez, je vais d'abord vous parler un peu de ce qu'est le HTML, et ce sera la partie ennuyeuse de notre cours, puis nous passerons à la pratique la plus intéressante. Ce ne sera certainement pas ennuyeux là-bas.

HTML (HyperText Markup Language) signifie littéralement langage de balisage hypertexte. Il est utilisé pour créer des pages Web.

Et si, à notre avis, un ensemble de pages simples unies par un même sujet est un livre, ou même, mieux dit, un gros magazine, alors un ensemble de pages Web unies par un même nom de domaine est un site Web.

Chaque page Web possède son propre texte unique, écrit par vous et entouré de code HTML.

Le code est une instruction destinée au navigateur sur la manière d'afficher un élément particulier. Disons que vous avez écrit un mot, mais la forme sous laquelle il apparaîtra à l'écran dépend du code dans lequel vous l'enfermez.

Le code html est constitué des éléments suivants :

2. Attributs de balise.

3. Valeurs d'attribut.

Regardons-les dans l'ordre.

La balise html est l'élément principal du code. C'est écrit ainsi :

Comme vous pouvez le constater, il se compose de deux parties. Les premières équerres sont la partie ouvrante, et les secondes, avec une barre oblique, sont la partie fermante.

Entre ces deux parties, est écrit le reste du code de la page qui sera affiché à l'écran.

La balise indique au navigateur qu'il s'agit d'un document HTML et qu'elle constitue la balise principale (parente) de tous les autres éléments.

Dans les balises restantes, éléments de code, une lettre ou un mot est écrit entre crochets, qui sera le nom de la balise et déterminera quel élément sera affiché à l'écran par cette balise.

Par exemple, si vous mettez la lettre h1 entre crochets, le texte s'affichera à l'écran sous forme de titre.

Bonjour

Autrement dit, la police du mot « Bonjour » sera plus grande et plus grasse que le reste du texte.

Si vous mettez la lettre p entre crochets, alors le texte inclus dans la balise sera affiché sous forme de paragraphe.

Bonjour

Autrement dit, la police sera normale, mais tout ce qui est écrit après cette balise commencera sur une nouvelle ligne.

Il existe plusieurs dizaines de lettres de ce type, et même des mots qui déterminent le type de commande, en HTML, bien que pas plus de 10 à 15 balises ne soient souvent utilisées.

Nous examinerons chacun d’eux plus en détail en cours de route.

Voici les attributs des balises. Fréquemment utilisé, pas plus d’une douzaine également. Et récemment encore moins, puisque toutes les fonctions d'attributs ont été déplacées vers CSS.

Mais nous y reviendrons plus tard, mais pour l'instant nous découvrirons encore ce qu'est un attribut, puisque certains d'entre eux n'ont pas perdu de leur pertinence et ne perdront jamais.

Un attribut est une commande supplémentaire. C’est écrit dans la partie d’ouverture de la balise. Par exemple, si vous souhaitez colorer le titre, vous devez alors insérer l'attribut color dans la partie d'ouverture de la balise h1.

Et passons directement aux valeurs des attributs. Le fait est que l'attribut doit avoir une valeur. Autrement dit, si vous avez donné l'ordre que le titre soit coloré, vous devez alors indiquer de quelle couleur il sera.

Cette indication sera la valeur de l'attribut. Cela ressemble à ceci :

C'est rouge.

De la même manière, mais en utilisant d'autres attributs, vous pouvez définir la taille du texte, les retraits, les alignements et bien plus encore.

Cependant, la conception évolue de plus en plus vers CSS et les attributs de conception deviennent progressivement obsolètes et hors de pratique.

Et maintenant, nous tirons une conclusion de tout ce qui précède :

HTML est un langage que les navigateurs comprennent. Nous en avons besoin pour communiquer avec le navigateur ou, pourrait-on dire, pour le contrôler, c'est-à-dire pour lui donner des commandes sur la façon de percevoir et d'afficher à l'écran ce que nous écrivons.

Je voudrais ajouter que les balises, les attributs et leurs significations sont faciles à retenir lors des exercices pratiques, ce que seront essentiellement tous les articles suivants.

Là, vous voyez immédiatement la balise, vous découvrez sa signification, dans quel cas et à quel endroit elle est utilisée, de quels signes elle est accompagnée et comment elle est écrite, alors maintenant je ne vais pas vous montrer toutes les balises et attributs, nous verrons tout en pratique.

Si quelqu'un est intéressé, vous pouvez toujours consulter la liste complète des balises et attributs HTML. .

Cependant, si vous n'allez pas programmer de manière professionnelle, il suffira de connaître quelques (environ une douzaine) balises de base et plusieurs attributs.

Eh bien, c'est tout, je suppose. Peu? Et pour l’instant, il n’y a pas besoin de plus. Nous apprendrons le reste au cours du processus d’apprentissage à l’aide d’exemples précis.

Je pense que cela sera mieux compris avec des exemples. Notre objectif est de créer un site Web et de comprendre comment tout cela fonctionne, alors allez-y et entraînez-vous.

Changement

Dès que vous vous asseyez pour étudier, un salaud va forcément vous réveiller !!!

A l'école, l'enseignant dit aux élèves :
- Lequel d'entre vous se considère finalement stupide ? Se lever.
Après une longue pause, un élève se lève :
- Alors tu penses que tu es stupide ?
- Eh bien, pas exactement, mais c'est en quelque sorte gênant que tu sois seul.

HTML (Hyper Text Markup Language) est un langage de balisage de documents spécial. Il est important de noter que nous parlons de documents électroniques et non imprimés.

Un document imprimé a des formats de page et des marges strictement spécifiés. Il spécifie précisément les paramètres de police. Les documents électroniques et les pages Web ne sont pas destinés à être imprimés sur une imprimante, mais à être visualisés sur un écran. On ne sait pas à l’avance sur quel ordinateur le document sera consulté. La taille de la fenêtre du navigateur est inconnue et les polices disponibles ne sont pas connues.

Le langage HTML est spécialement créé pour concevoir des documents écran qui seront reproduits par des moyens inconnus. HTML n'était à l'origine pas destiné au formatage d'un document, mais à son balisage fonctionnel. Par exemple, le « titre » est une caractéristique du contenu et non du design. Le programme de visualisation d'un document à l'écran (navigateur, navigateur, explorateur) choisit sa manière d'afficher la partie du document décrite comme l'en-tête.

La création d'un document en HTML est similaire à la programmation. L'auteur d'un document prend du texte brut et y insère des codes spéciaux (appelés balises). Lorsqu'un document est visualisé, les balises agissent comme des commandes. Par exemple, s'il y a une balise au début d'un paragraphe, alors le paragraphe entier sera aligné au centre de la fenêtre, quelle que soit la fenêtre dans laquelle le document sera affiché et la police dans laquelle le texte sera affiché.

Les balises HTML vous permettent d'aligner les lignes du document, de contrôler la couleur de l'arrière-plan et de la police, d'insérer des illustrations et d'envelopper du texte autour d'elles, d'inclure des objets multimédias dans votre document, et bien plus encore. Le résultat est des documents Web significatifs et d’une conception impressionnante.

Parmi les nombreuses balises HTML, il existe un groupe spécial de balises conçues pour créer des liens hypertextes. Un lien hypertexte est un morceau de texte ou d’illustration sélectionné lié à l’adresse d’un autre document. Les liens hypertextes sont généralement soulignés ou d’une couleur différente. Si vous passez votre souris sur un lien hypertexte, celui-ci changera de forme. Si vous cliquez avec le bouton gauche sur un lien hypertexte, cela vous mènera à une autre page Web, peut-être située sur un autre serveur, peut-être même sur un autre continent.

Les documents créés au format HTML sont enregistrés dans des fichiers avec l'extension html ou htm.

Balises HTML

Les constructions de contrôle en HTML sont appelées balises. Les balises sont des ensembles de caractères utilisés pour baliser le texte. Toutes les balises sont écrites entre crochets angulaires, qui sont formés par les symboles inférieur à (). Après la parenthèse ouvrante vient un mot-clé qui définit la balise.

La casse des lettres dans les noms de balises n'a pas d'importance. Cependant, il est courant d’écrire les balises en majuscules pour les différencier du texte principal.

Les balises peuvent être appariées ou non. Pour influencer une partie d'un document (par exemple, un paragraphe), des balises appariées sont utilisées : ouverture et fermeture. La balise d'ouverture crée l'effet et la balise de fermeture l'arrête. Les balises de fermeture commencent par une barre oblique (/).

Les balises non appariées affectent l'ensemble du document ou ont un effet ponctuel là où elles apparaissent. Dans ce cas, la balise fermante n’est pas utilisée.

Si par erreur une balise contient un mot-clé qui n'est pas dans la langue, la balise est complètement ignorée.

Lors de la visualisation d'un document dans un navigateur, les balises elles-mêmes ne sont pas affichées, mais elles affectent la façon dont le document est affiché.

L'effet créé par une balise peut être influencé par des attributs. Les attributs sont des mots de fonction séparés du mot-clé de la balise et les uns des autres par des espaces. Si vous devez spécifier la valeur de l'attribut, elle est écrite après le signe égal et placée entre guillemets. Dans les balises appariées, les attributs sont ajoutés uniquement à la balise d'ouverture. Les balises fermantes ne contiennent jamais .

Le langage HTML permet de saisir dans un document