Principes de base HTML Ce sont les règles de base du langage HTML, la description de la structure de la page HTML, la relation dans la structure du document HTML entre les éléments HTML.
Le document HTML est l'habituel document textepeut être créé comme dans l'éditeur de texte habituel (Carnet)et dans une spécialisation, avec code d'éclairage (Notepad ++, code Visual Studio, etc.). Le document HTML a une extension .html.
Le document HTML consiste en un arbre d'éléments HTML et de texte. Chaque élément est désigné dans le document initial initial (ouverture) et la balise finale (fermeture) (avec une rare exception).
Tag de démarrage Montre où l'élément commence, la finale - où elle se termine. Fermeture Il est formé en ajoutant une barre oblique / avant le nom de la balise:<имя тега> … . Entre les étiquettes initiales et fermées, il y a le contenu du contenu de la balise.
Les balises simples ne peuvent pas stocker le contenu directement, il est prescrit sous forme de valeur d'attribut, par exemple, étiquette Créer un bouton avec du texte Bouton À l'intérieur.
Les balises peuvent être investies les unes dans les autres, par exemple,
Texte
. Lorsque vous investissez, l'ordre de sa fermeture devrait être suivi. (Le principe de "matryshka")Par exemple, la prochaine entrée sera incorrecte:Texte
.Les éléments HTML peuvent avoir des attributs (globaux applicables pour tous les éléments HTML et leur propre). Les attributs sont écrits dans la balise d'élément de découverte et contiennent le nom et la valeur spécifiés dans le format du nom d'attribut \u003d "valeur". Les attributs vous permettent de modifier les propriétés et le comportement de l'élément pour lequel ils sont spécifiés.
Chaque élément peut être attribué à plusieurs valeurs de classe et une seule valeur d'identification. Plusieurs valeurs de classe sont enregistrées via l'espace,
Le navigateur Navigation (interprète) un document HTML, construisant sa structure (DOM) et l'affichage conformément aux instructions incluses dans ce fichier (styles, scripts). Si le balisage est correct, la page HTML contenant des éléments HTML sera affichée dans la fenêtre du navigateur - titres, tables, images, etc.
Processus d'interprétation (Analysement) Commence avant que la page Web soit complètement chargée dans le navigateur. Les navigateurs gèrent des documents HTML séquentiellement, à partir du tout début, tandis que le traitement de CSS et de la corrélation de feuilles de style avec des éléments de page.
Le document HTML est composé de deux sections - Titre - entre les balises
… et partie significative - entre les étiquettes ….
Structure de la page Web
1. Structure de documents HTML
La langue HTML suit les règles contenues dans le fichier AD de type AD de document. (Définition du type de document ou DTD). DTD est un document XML qui détermine les balises, les attributs et leurs valeurs valables pour un type HTML spécifique. Pour chaque version de HTML a sa propre DTD.
DOCTYPE. Responsable de l'affichage correct du navigateur de page Web. DOCTYPE définit non seulement la version HTML (par exemple, HTML), mais également le fichier DTD correspondant sur Internet.
Éléments situés à l'intérieur de la balise , former un arbre d'un document soi-disant modèle d'objet Document, DOM (modèle d'objet de document). En même temps C'est un élément racine.
Figure. 1. Structure de page Web la plus simple Pour comprendre l'interaction des éléments de page Web, il est nécessaire de considérer le soi-disant "Relation associée" Entre les éléments. La relation entre plusieurs éléments imbriqués est divisée en parent, filiales et soins infirmiers.
Ancêtre - un élément qui entre dans d'autres éléments. Figure 1, l'ancêtre pour tous les éléments est . En même temps
C'est l'ancêtre pour toutes les balises contenues dans:,
, ,
Descendant - un élément situé à l'intérieur d'un ou plusieurs types d'articles. Par example,
C'est un descendant et élémentEst un descendant en même temps pour
et .Élément parental - L'élément associé à d'autres éléments du niveau inférieur et sur l'arbre au-dessus d'eux. Figure 1.
et . ÉtiqueterEst le parent seulement pour .
Élément fille - élément directement subordonné à un autre élément de niveau supérieur. Figure 1 Seuls les éléments
, ,
ET
Élément infirmier - un élément ayant un élément parent commun avec les éléments dites d'un niveau. Figure 1.
et - éléments d'un niveau, ainsi que des éléments , et
Sont entre eux des soins infirmiers.
1.1. Élément
1.2. Élément
Section
... Contient des informations techniques sur la page: Titre, Description, Mots-clés des moteurs de recherche, codage, etc. Toutefois, les informations saisies ne sont pas affichées dans la fenêtre du navigateur contiennent les données indiquant que le navigateur indique comment traiter la page.1.2.1. Élément </h4>
<p>Section d'étiquette obligatoire <head> est tag <title> . Le texte situé à l'intérieur de cette balise est affiché dans la barre de titre du navigateur Web. La longueur de l'en-tête ne doit pas dépasser 60 caractères pour intégrer complètement le titre. Le texte d'en-tête doit contenir la description la plus complète du contenu de la page Web.</p>
<h4>1.2.2. Élément <meta></h4>
<p>Étiquette en coupe optionnelle <head> est la même étiquette <meta> . Avec elle, vous pouvez définir une description du contenu de la page et des mots-clés des moteurs de recherche, de l'auteur du document HTML et d'autres propriétés des métadonnées. Élément <head> Peut contenir plusieurs éléments <meta> Parce que en fonction des attributs utilisés, ils portent diverses informations.</p><p>
<meta name="description" content="Description du contenu de la page">
<meta name="keywords" content="Mots-clés à travers une virgule">
</p><p>La description du contenu de la page et des mots-clés peut être indiquée simultanément en plusieurs langues, par exemple en russe et en anglais:</p><p>
<meta name="description" lang="ru" content="Description du contenu de la page">
<meta name="description" lang="en" content="La description.">
<meta name="keywords" lang="ru" content="Mots-clés à travers une virgule">
<meta name="keywords" lang="en" content="Mots clés.">
</p><p>En utilisant la balise <meta> Vous pouvez interdire ou autoriser l'indexation de la page Web par les moteurs de recherche:</p>
<p>
<meta name="robots" content="index, follow">
</p><p>
<meta name="robots" content="index, nofollow">
</p><p>
<meta name="robots" content="noindex, nofollow">
</p><p>Pour redémarrer automatiquement la page à une période de temps spécifiée, vous devez utiliser la valeur de rafraîchissement:</p><p>
<meta content="30">
</p><p>La page sera redémarrée après 30 secondes. Pour transférer le visiteur sur une autre page, vous devez spécifier l'URL dans le paramètre URL:</p><p>
<meta content="0; url=http://yandex.ru/">
</p><table class="t3"> Tableau 2. Attributs de tag <meta>
<tbody><tr><th style="width: 20%;">Attribut</th>
<th></th>
</tr><tr><td> Charset.</td>
<td>Spécifie l'encodage des caractères du document HTML actuel: <meta charset="UTF-8">
</td>
</tr><tr><td> Contenu</td>
<td>Contient du texte arbitraire qui détermine la valeur associée à l'attribut http-equiv ou nom, en fonction de leur valeur.</td>
</tr><tr><td> Http-equiv.</td>
<td>Contrôle les actions du navigateur sur cette page Web (équivalent des en-têtes HTTP). Lors de l'affichage de la page, le navigateur suivra les instructions spécifiées dans l'attribut: <br> Style par défaut Spécifie le style préféré à utiliser sur la page. L'attribut de contenu doit contenir un identifiant d'élément <link> qui fait référence à la table de styles CSS ou à un identifiant d'élément<style> , содержащего таблицу стилей.<br>
refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы" .<br>
Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:<br>
<meta content="30"> <br>
Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:<br>
<meta content="0; url=http://mail.ru/">
</td>
</tr><tr><td> name
</td>
<td>Ассоциируется со значением, содержащемся в атрибуте content . Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv , charset или itemprop .<br>
application-name указывает название веб-приложения, используемого на странице.<br>
author указывает имя автора документа в свободном формате.<br>
description определяет краткое описание к содержимому страницы, например:<br>
<meta name="description" content="Описание содержимого страницы"> <br>
generator указывает один из пакетов программного обеспечения, используемого для создания документа, например:<br>
<meta name="generator" content="WordPress 4.0"> .<br>
keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например:<br>
<meta name="keywords" content="Ключевые слова через запятую"> .<br><i>Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator , googlebot , publisher , robots , slurp , viewport , хотя ни одно из них еще не было официально принято.
</i>
</td>
</tr></tbody></table><h4>1.2.3. Элемент <style></h4>
<p>Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.</p>
<p>Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.</p><p>
<style type="text/css">
.paper {
width: 200px;
height: 300px;
background-color: #ef4444;
color: #666666;
}
</p><p>Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:</p><p>
<div class="paper">
...
</div>
</p><p>CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:</p><p>
<h4>1.2.4. Элемент <link></h4>
<p>Задать стили для документа можно также при помощи другого способа - записать их в отдельный файл с расширением.css , например, style.css .</p>
<p>Подключить файл со стилями к веб-странице можно двумя способами:<br>через
директиву @import url</p><p>
<!DOCTYPE html>
<html>
<head>
<style>
@import url(style.css);
</style>
<meta>
<title>
utilisation de l'élément . L'élément ne nécessite pas de balise de fermeture. Cet élément détermine la relation entre la page en cours et d'autres documents. Il peut y avoir plusieurs éléments de ce type sur la page. L'enregistrement aura le formulaire suivant:
| Attribut | La description |
|---|---|
| Crossorigin. | Spécifie si CORS doit être utilisé (technologie de navigateur qui vous permet de fournir une page de page Web à d'autres ressources de domaine) lors de l'extraction d'une image du site. Anonymous - dans la requête croisée, le navigateur ajoute automatiquement l'en-tête d'origine contenant le nom de domaine à partir duquel une demande est effectuée. Si le serveur ne répond pas à l'origine de la commande d'accès-Control-Autory: * (ou nom de domaine au lieu des étoiles), la charge d'image sera bloquée. Utilisez-les-identificiels - Si le serveur ne fournit pas de références à l'aide de l'accès-Control-Autory-Autory-Apthentials: True, la charge d'image sera bloquée. |
| href. | L'attribut principal de la balise, en tant que valeur, est le chemin du fichier avec des styles. |
| hreflang. | Spécifie la langue du texte dans le document auquel le lien est. |
| Médias | Définit le type de périphérique auquel la ressource de référence doit être appliquée. |
| Nonce | Randing variable générée au hasard sur le serveur, qui définit les règles d'utilisation de styles intégrés pour protéger le contenu. Valeur d'attribut - chaîne de texte. |
| Rel. | L'attribut détermine la relation entre le document actuel et le document que références est. Alternatif - lien vers le même document, mais dans un autre format (par exemple, pages d'impression, traduction, miroir, ruban en format RSS ou Atom), . Archives - indique que le document sur le lien représente un intérêt historique. Le lien peut indiquer une collection d'enregistrements, de documents et d'autres matériaux. Auteur Lien à la page de l'auteur du document ou de la page avec les coordonnées de l'auteur. Référence de signets à l'ancêtre le plus proche de l'article, qui est un lien, ou à la section article, la plus étroitement liée à l'élément, s'il n'y a pas d'ancêtre. Externe est utilisé pour indiquer que la page auquel le lien ne fait pas partie de ce site. Premier spécifie le lien menant au premier document de la séquence de documents. Aider à faire référence à un document avec un certificat. L'icône définit le chemin d'accès à l'icône qui sera utilisée pour le document actuel. La dernière spécifie le lien menant au dernier document de la séquence de documents. Référence de licence aux informations de copyright pour le document. Ensuite indique que ce document fait partie de la série et que le lien conduit au document suivant dans cette série. Nfoollow indique que le lien n'est pas approuvé par l'auteur de la page ou que le lien est commercial. NOREFERRER indique que l'en-tête de requête client contenant l'URL de la source de demande ne doit pas être transmis pendant le lien. Pingback Spécifie l'adresse du serveur Pingback, qui permet au blog de notifier automatiquement les sites qui s'agrandent. Le préfetch indique que le fichier doit être conservé à l'avance auquel le lien mène. Indique indique que ce document fait partie de la série et que le lien conduit au document précédent dans cette série. La recherche indique que le document de référence contient l'interface de recherche et les ressources associées. La barre latérale indique que le document de référence, si possible, sera affiché dans le contexte supplémentaire du navigateur et des navigateurs lorsque vous cliquez sur le lien hypertexte Ouvrir la fenêtre pour ajouter un lien vers le panneau Signets. Lien de stylesheet sur un fichier externe qui sera utilisé comme une feuille de style pour ce document. La balise indique que l'étiquette sur laquelle l'hyperlien conduit à ce document. UP indique que la page fait partie de la structure hiérarchique et que le lien hypertexte conduit à un niveau de ressources plus élevé dans la structure. |
| Tailles. | Spécifie la taille des icônes pour l'affichage visuel. L'attribut tailles est utilisé uniquement avec rel \u003d "icône" et peut prendre les significations suivantes: Les largeurs sont la hauteur - définit une liste de tailles séparées par des espaces, chaque taille doit être au format - les largeurs de la hauteur (les dimensions des icônes sont définies en pixels), par exemple: ; Toutes les icônes peuvent écheler à n'importe quelle taille. |
| Titre | Spécifie le titre du lien ou du nom de l'ensemble des tables de style alternatif. Valeur d'attributs - Texte. |
| Taper | Spécifie le type de document MIME auquel le lien est. Dans ce cas, il faut la valeur "Text / CSS". |
