La page Web html est. Création de pages Web. Apprentissage du langage HTML. Éléments de la page Web : en-tête

Avant de commencer notre voyage à travers les didacticiels sur la création de sites Web avec HTML et CSS, il est important de comprendre les différences entre les deux langues, la syntaxe de chaque langue et une terminologie de base.

Qu'est-ce que HTML et CSS ?

HTML (HyperText Markup Language) définit la structure du contenu et sa signification en définissant ce contenu comme, par exemple, des titres, des paragraphes ou des images. CSS (Cascading Style Sheets) ou Cascading Style Sheets est un langage de présentation conçu pour concevoir l'apparence du contenu en utilisant, par exemple, des polices ou des couleurs.

Ces deux langages, HTML et CSS, sont indépendants l'un de l'autre et doivent le rester. CSS ne doit pas être écrit à l'intérieur d'un document HTML et vice versa. En règle générale, HTML représentera toujours le contenu et CSS définira toujours son style.

Avec cette compréhension de la différence entre HTML et CSS, plongeons dans le HTML plus en détail.

Termes HTML de base

Avant de commencer à travailler avec HTML, vous rencontrerez probablement des termes nouveaux et souvent étranges. Vous apprendrez à tous les connaître plus en détail au fil du temps, mais pour l'instant, vous devriez commencer par les trois termes HTML de base - éléments, balises et attributs.

Éléments

Les éléments spécifient comment définir la structure et le contenu des objets sur une page. Certains des éléments couramment utilisés comprennent plusieurs niveaux de titres (définis comme des éléments avec

avant

) et les paragraphes (définis comme

); les éléments peuvent être ajoutés à la liste ,

, , Et et plein d'autres.

Les éléments sont identifiés à l'aide de chevrons<>, entourant le nom de l'élément. Ainsi, l'élément ressemblera à ceci :

Mots clés

Ajout de crochets angulaires< и >crée ce qu'on appelle une balise autour d'un élément. Les balises apparaissent le plus souvent par paires de balises ouvrantes et fermantes.

La balise de début marque le début d'un élément. Il est composé du symbole<, затем идёт имя элемента и завершается символом >; Par exemple,

.

La balise de fin marque la fin d'un élément. Il est composé du symbole< с последующей косой чертой и именем элемента и завершается символом >; Par exemple,

.

Le contenu entre les balises de début et de fin est le contenu de cet élément. Le lien, par exemple, aura une balise d'ouverture et balise fermante. Ce qui se trouve entre ces deux balises sera le contenu du lien.

Ainsi, les balises de lien ressembleraient à ceci :

...

Les attributs

Les attributs sont des propriétés utilisées pour fournir Informations Complémentaires sur l'élément. Les attributs les plus courants incluent l'attribut id, qui identifie l'élément ; l'attribut class, qui classe l'élément ; l'attribut src, qui spécifie la source du contenu intégré ; et l'attribut href, qui spécifie un lien vers la ressource associée.

Les attributs sont définis dans la balise d'ouverture après le nom de l'élément. En général, les attributs incluent un nom et une valeur. Le format de ces attributs se compose du nom de l'attribut suivi d'un signe égal, suivi de la valeur de l'attribut entre guillemets. Par exemple, l'élément avec l'attribut href ressemblerait à ceci :

Shay Howe

Démonstration des termes HTML de base

Ce code affichera le texte "Shay Howe" sur une page Web et lorsqu'il cliquera sur ce texte, l'utilisateur sera redirigé vers http://shayhowe.com. L'élément de lien est déclaré avec une balise de début et balise fermante texte englobant, ainsi que l'attribut et la valeur de l'adresse du lien déclaré avec href="http://shayhowe.com" dans la balise d'ouverture.

Riz. 1.01. La syntaxe HTML du schéma comprend un élément, un attribut et une balise

Maintenant que vous savez ce que sont les éléments HTML, les balises et les attributs, examinons ensemble notre première page Web. Si quelque chose semble nouveau ici, ne vous inquiétez pas - nous le déchiffrerons au fur et à mesure.

Personnalisation de la structure d'un document HTML

Les documents HTML sont des documents en texte brut enregistrés avec l'extension .html plutôt que .txt. Pour commencer à écrire du HTML, vous devez d'abord éditeur de texte ce qui est pratique pour vous d'utiliser. Malheureusement, cela n'inclut pas Microsoft Word ou Pages, car ce sont des éditeurs complexes. Les deux éditeurs de texte les plus populaires pour écrire du HTML et du CSS sont Dreamweaver et Sublime Text. Alternatives gratuites Voir aussi Notepad++ pour Windows et TextWrangler pour Mac.

Tous les documents HTML contiennent une structure obligatoire qui inclut les déclarations et éléments suivants : , , Et .

Déclaration du type de document ousitué au tout début d'un document HTML et indique aux navigateurs quelle version de HTML est utilisée. Puisque nous allons utiliser dernière version HTML, notre type de document sera simplement. Vient ensuite l'élément indiquant le début du document.

À l'intérieur élément définit le haut du document, y compris diverses métadonnées (informations d'accompagnement sur la page). Contenu à l'intérieur d'un élément n'apparaît pas sur la page Web elle-même. Au lieu de cela, il peut inclure le titre du document (qui apparaît dans la barre de titre de la fenêtre du navigateur), des liens vers des fichiers externes ou toute autre métadonnée utile.

Tout le contenu visible de la page Web sera dans l'élément . La structure d'un document HTML typique ressemble à ceci :

Bonjour le monde!

Bonjour le monde!

Ceci est une page Web.



Démonstration de la structure d'un document HTML

Ce code affiche le document, en commençant par la déclaration du type de document,, suivi immédiatement de l'élément . À l'intérieur aller éléments Et . Élément contient l'encodage de la page via la balise et le titre du document via l'élément . Élément <body>inclut l'en-tête via l'élément <h1>et un paragraphe de texte à travers<р>. Parce que le titre et le paragraphe sont imbriqués dans l'élément <body>, ils sont visibles sur la page web.</p><p>Lorsqu'un élément se trouve à l'intérieur d'un autre élément, également appelé élément imbriqué, il est judicieux d'y ajouter un rembourrage pour que la structure du document reste bien organisée et lisible. Dans le code précédent, les deux éléments <head>Et <body>imbriqué et décalé à l'intérieur de l'élément <html>. La structure de rembourrage pour les éléments se poursuit avec de nouveaux éléments ajoutés à l'intérieur <head>Et <body> .</p><h3>Éléments à fermeture automatique</h3><p>Dans l'exemple précédent, l'élément <meta>était la seule balise qui n'incluait pas de balise fermante. Ne vous inquiétez pas, cela a été fait exprès. Tous les éléments ne sont pas constitués de balises ouvrantes et fermantes. Certains éléments reçoivent simplement du contenu ou un comportement via des attributs au sein de la même balise. <meta>fait partie de ces éléments. Contenu de l'élément <meta>dans l'exemple est attribué à l'aide de l'attribut et de la valeur charset. D'autres éléments typiques à fermeture automatique incluent :</p><ul><li><br> </li><li><embed> </li><li><hr> </li><li><img> </li><li><input> </li><li><li><meta> </li><li><param> </li><li><source> </li><li><wbr> </li> </ul><p>La structure cast, réalisée avec une déclaration de type de document<!DOCTYPE html>et éléments <html> , <head>Et <body>, est assez commun. Nous voulons garder cette structure de document à portée de main car nous l'utiliserons fréquemment lors de la création de nouveaux documents HTML.</p><h3>Validation des codes</h3><p>Peu importe le soin avec lequel nous écrivons notre code, les erreurs sont inévitables. Heureusement, lors de l'écriture HTML et CSS, nous avons des validateurs pour vérifier notre travail. Le W3C propose des validateurs HTML et CSS qui analysent le code à la recherche d'erreurs. La validation de notre code nous aide non seulement à afficher correctement dans tous les navigateurs, mais nous aide également à apprendre les meilleures pratiques lors de l'écriture de code.</p><h2>En pratique</h2><p>En tant que concepteurs Web et développeurs front-end, nous avons le luxe d'assister à un certain nombre de grandes conférences dédiées à notre métier. Nous allons organiser notre propre conférence sur les styles et créer un site Web pour celle-ci lors des prochaines leçons. Comme ça!</p><br><img src='https://i2.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy loading=lazy><p>Changeons un peu, éloignons-nous du HTML et jetons un coup d'œil au CSS. N'oubliez pas que HTML définit le contenu et la structure de nos pages Web, tandis que CSS définit leur style visuel et leur apparence.</p><h2>Termes CSS de base</h2><p>En plus des termes HTML, il y a quelques termes CSS de base avec lesquels vous devrez vous familiariser. Ces termes incluent les sélecteurs, les propriétés et les valeurs. Comme pour la terminologie HTML, plus vous travaillez avec CSS, plus ces termes deviennent une seconde nature pour vous.</p><h3>Sélecteurs</h3><p>Lors de l'ajout d'éléments à une page Web, ils peuvent être stylisés avec CSS. Un sélecteur détermine le ou les éléments HTML à cibler et leur applique des styles (tels que la couleur, la taille et la position). Les sélecteurs peuvent inclure une combinaison de différentes métriques pour sélectionner des éléments uniques, en fonction de la spécificité que nous voulons être. Par exemple, nous souhaitons sélectionner chaque paragraphe d'une page ou sélectionner un seul paragraphe en particulier.</p><p>Les sélecteurs sont généralement associés à une valeur d'attribut, telle qu'une valeur d'identifiant ou de classe, ou à un nom d'élément, tel que <h1>ou<р> .</p><p>En CSS, les sélecteurs sont associés à des accolades () qui entourent les styles appliqués à l'élément sélectionné. Ce sélecteur cible tous les éléments <span><p>P(...)</p><h3>Propriétés</h3><p>Une fois qu'un élément est sélectionné, la propriété détermine les styles qui lui seront appliqués. Les noms de propriété viennent après le sélecteur, à l'intérieur des accolades () et immédiatement avant les deux-points. Il existe de nombreuses propriétés que nous pouvons utiliser telles que background , color , font-size , height et width et d'autres propriétés couramment ajoutées. Dans le code suivant, nous définissons les propriétés color et font-size qui s'appliquent à tous les éléments <span><p>P ( couleur : ... ; taille de la police : ... ; )</p><h3>Valeurs</h3><p>Jusqu'à présent, nous avons uniquement sélectionné l'élément via le sélecteur et déterminé le style que nous souhaitons lui appliquer via les propriétés. Nous pouvons maintenant définir le comportement de cette propriété via une valeur. Les valeurs peuvent être spécifiées sous forme de texte entre deux-points et un point-virgule. Ci-dessous, nous sélectionnons tous les éléments <p >Et définissez la valeur de la propriété color sur orange et la valeur de la propriété font-size sur 16 pixels.</p><p>P (couleur : orange ; taille de la police : 16 px ; )</p><p>Pour tester, en CSS, notre ensemble de règles commence par un sélecteur, suivi immédiatement d'accolades. Ces accolades contiennent des déclarations composées de paires de propriétés et de valeurs. Chaque déclaration commence par une propriété, suivie de deux-points, de la valeur de la propriété et enfin d'un point-virgule.</p><p>Une pratique courante consiste à déplacer une paire de propriétés et de valeurs dans des accolades. Comme avec HTML, l'indentation aide à garder notre code organisé et clair.</p><p><img src='https://i0.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy loading=lazy></p><p>Riz. 1.03. La structure de la syntaxe CSS comprend le sélecteur, les propriétés et les valeurs</p><p>Connaître quelques termes de base et la syntaxe CSS générale est un bon début, mais nous avons encore quelques points à apprendre avant de plonger dans les profondeurs. En particulier, nous devons examiner de plus près le fonctionnement des sélecteurs en CSS.</p><h2>Travailler avec des sélecteurs</h2><p>Les sélecteurs, comme mentionné précédemment, indiquent quels éléments HTML seront stylisés. Il est important de bien comprendre comment utiliser les sélecteurs et comment ils fonctionnent. La première étape devrait être de faire connaissance <a href="https://5visa.ru/fr/obrazovanie/zte-blade-a515---tehnicheskie-harakteristiki-mobilnyi-telefon-zte-blade-a515.html">divers types</a> sélecteurs. Nous allons commencer par les sélecteurs les plus basiques : les sélecteurs de type, les classes et les identifiants.</p><h3>Sélecteurs de types</h3><p>Les sélecteurs de type ciblent les éléments selon leur type. Par exemple, si nous voulons cibler tous les éléments <div>nous devons utiliser le sélecteur div. Le code suivant montre le sélecteur de type pour les éléments <div>, ainsi que le code HTML correspondant.</p><p>Div(...)</p><p> <div>...</div> <div>...</div> </p><h3>Des classes</h3><p>Les classes vous permettent de sélectionner un élément en fonction de la valeur de l'attribut de classe. Les sélecteurs de classe sont un peu plus spécifiques que les sélecteurs de type dans la mesure où ils sélectionnent un groupe spécifique d'éléments plutôt que tous les éléments du même type.</p><p>Les classes vous permettent d'appliquer le même style à plusieurs éléments à la fois en utilisant la même valeur d'attribut de classe pour plusieurs éléments.</p><p>En CSS, les classes sont désignées par un point suivi de la valeur de l'attribut class. Le sélecteur de classe ci-dessous sélectionne tous les éléments qui contiennent la valeur de l'attribut de classe awesome, y compris les éléments <div>Et <span><p>Génial (...)</p><p> <div class="awesome">...</div> </p><h3>Identifiants</h3><p>Les identifiants sont encore plus précis que les classes car ils ne ciblent qu'un seul élément à la fois. Tout comme les sélecteurs de classe utilisent la valeur de l'attribut class, les identificateurs utilisent la valeur de l'attribut id comme sélecteur.</p><p>Quel que soit le type d'élément rendu, la valeur de l'attribut id ne peut être utilisée qu'une seule fois par page. Si des identifiants sont présents, ils doivent être réservés aux éléments importants.</p><p>En CSS, les identifiants sont indiqués par un symbole dièse devant, suivi de la valeur de l'attribut id. Ici, id sélectionnera uniquement l'élément contenant l'attribut id avec la valeur shayhowe .</p><p>#shayhowe ( ... )</p><p> <div id="shayhowe">...</div> </p><h3>Sélecteurs supplémentaires</h3><p>Les sélecteurs sont extrêmement puissants et ceux décrits ci-dessus sont parmi les sélecteurs les plus courants que nous rencontrons. Ces sélecteurs ne sont qu'un début. Il existe de nombreux sélecteurs avancés et ils sont facilement disponibles. Une fois que vous êtes à l'aise avec eux, n'ayez pas peur de regarder également certains des plus avancés.</p><p>Bon, commençons à tout assembler. Nous ajoutons des éléments à la page dans notre code HTML, puis nous pouvons sélectionner ces éléments et les styliser avec CSS. Relions maintenant les points entre HTML et CSS pour que les deux langages fonctionnent ensemble.</p><h2>Connexion CSS</h2><p>Pour que notre CSS parle à notre HTML, nous devons pointer vers le fichier CSS à partir du HTML. C'est une bonne pratique d'inclure tous nos styles dans un fichier externe pointé à l'intérieur de l'élément. <head>notre document HTML. L'utilisation d'un CSS externe nous permet d'appliquer les mêmes styles sur tout le site et d'y apporter rapidement des modifications.</p><h3>Autres options pour ajouter du CSS</h3><p>D'autres options pour inclure CSS incluent l'utilisation de styles en ligne et en ligne. Vous pouvez voir ces options dans la vraie vie, mais elles sont généralement mal vues car elles rendent les mises à jour du site fastidieuses et encombrantes.</p><p>Pour créer notre feuille de style externe, nous souhaitons à nouveau utiliser l'éditeur de texte sélectionné pour en créer un nouveau. <a href="https://5visa.ru/fr/ustanovka-i-nastrojjka/failovaya-sistema-v-vide-spiska-na-vb6-chtenie-izapis-vtekstovoi.html">fichier texte</a> avec l'extension .css. Notre fichier CSS doit être enregistré dans le même dossier ou sous-dossier que notre fichier HTML.</p><p>A l'intérieur d'un élément <head>élément appliqué <link>, qui définit la relation entre les fichiers HTML et CSS. Puisque nous établissons un lien vers CSS, nous utilisons l'attribut rel avec la valeur de la feuille de style pour indiquer leur relation. De plus, l'attribut href est utilisé pour indiquer l'emplacement ou le chemin d'accès au fichier CSS.</p><p>Dans l'exemple de document HTML suivant, l'élément <head>pointe vers un fichier de style externe.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>Pour que CSS s'affiche correctement, la valeur du chemin de l'attribut href doit correspondre directement à l'endroit où le fichier CSS est enregistré. Dans l'exemple précédent, le fichier main.css est stocké au même emplacement que le fichier HTML, également appelé dossier racine.</p><p>Si le fichier CSS se trouve dans un sous-dossier, la valeur de l'attribut href doit correspondre à ce chemin en conséquence. Par exemple, si notre fichier main.css a été enregistré dans un sous-dossier nommé stylesheets, alors la valeur de l'attribut href serait stylesheets/main.css . Ici, une barre oblique (ou barre oblique) est utilisée pour indiquer un déplacement vers un sous-dossier.</p><p>Sur <a href="https://5visa.ru/fr/proshivka/apple-iphone-se-2017-dizain-harakteristiki-funkcii-i-data-vyhoda-vse-chto.html">ce moment</a> nos pages commencent à s'animer, lentement mais sûrement. Nous n'avons pas encore approfondi le CSS, mais vous avez peut-être remarqué que certains éléments ont des styles que nous n'avons pas déclarés dans notre CSS. C'est le navigateur qui impose ses propres styles préférés à ces éléments. Heureusement, nous pouvons remplacer ces styles assez facilement, ce que nous ferons ensuite avec une réinitialisation CSS.</p><h2>Utilisation de la réinitialisation CSS</h2><p>Chaque navigateur a ses propres styles par défaut pour <a href="https://5visa.ru/fr/problemy/soedinenie-treh-provodov-cherez-klemmnik-osobennosti-podklyucheniya-silovogo.html">divers éléments</a>. Comment <a href="https://5visa.ru/fr/navigatory/chto-takoe-brauzer-google-kak-polzovatsya-gugl-hrom-google-chrome-vse-po.html">Google Chrome</a> affiche les en-têtes, les paragraphes, les listes, etc., peut différer de la façon dont il le fait <a href="https://5visa.ru/fr/multimedia/oshibka-veb-stranicy-vypolnit-otladku-oshibki-scenariya-v-internet-explorer-prichiny-i.html">Internet Explorer</a>. La réinitialisation CSS est devenue largement utilisée pour assurer la compatibilité entre navigateurs.</p><p>Reset CSS prend tous les éléments HTML de base avec un style donné et fournit un style cohérent sur tous les navigateurs. Ces réinitialisations incluent généralement la suppression des tailles, du rembourrage, des marges ou des styles supplémentaires pour réduire ces valeurs. Étant donné que la cascade CSS fonctionne de haut en bas (plus à ce sujet bientôt), notre réinitialisation devrait être tout en haut de notre style. Cela garantit que ces styles sont lus en premier et c'est tout. <a href="https://5visa.ru/fr/multimedia/chto-takoe-kuki-brauzera-zachem-ih-udalyat-i-kak-eto-mozhno-sdelat.html">différents navigateurs</a> travaillera à partir d'un point de référence commun.</p><p>Il existe un tas de réinitialisations CSS différentes à appliquer, elles ont toutes la leur <a href="https://5visa.ru/fr/sovety/chto-takoe-wordpress-i-joomla-bitva-besplatnyh-titanov-joomla-ili-wordpress.html">forces</a>. L'un des plus populaires d'Eric Meyer, sa réinitialisation CSS est adaptée pour inclure de nouveaux éléments HTML5.</p><p>Si vous vous sentez un peu aventureux, il y a aussi Normalize.css de Nicholas Gallagher. Normalize.css se concentre non pas sur l'utilisation d'une réinitialisation matérielle sur tous les éléments principaux, mais plutôt sur la définition de styles communs pour ces éléments. Cela nécessite une compréhension plus approfondie de CSS, ainsi que de savoir ce que vous attendez des styles.</p><h3>Compatibilité et tests entre navigateurs</h3><p>Comme mentionné précédemment, différents navigateurs rendent les éléments différemment. Il est important de reconnaître la valeur de la compatibilité et des tests entre navigateurs. Les sites ne doivent pas nécessairement se ressembler exactement dans tous les navigateurs, mais doivent être proches. Quels navigateurs vous souhaitez prendre en charge et dans quelle mesure est une décision que vous devrez prendre en fonction de ce qui convient le mieux à votre site.</p><p>Il y a quelques points à garder à l'esprit lors de l'écriture de CSS. La bonne nouvelle est que c'est faisable et qu'il faut un peu de patience pour le maîtriser.</p><h2>En pratique</h2><p>Revenons là où nous nous sommes arrêtés pour la dernière fois sur notre site de conférence et voyons comment nous pouvons ajouter du CSS.</p><ol><li>Dans notre dossier styles-conference, créons un nouveau dossier appelé assets. C'est là que nous stockerons tous les éléments de notre site Web, tels que les styles, les images, les vidéos, etc. Pour nos styles, allons-y et ajoutons un autre dossier de feuilles de style dans le dossier des éléments.</li><li>À l'aide d'un éditeur de texte, créez un nouveau fichier appelé main.css et enregistrez-le dans le dossier des feuilles de style que nous venons de créer.</li><p>En regardant le fichier index.html dans le navigateur, nous pouvons voir que les éléments <h1>Et <p>Contient déjà le style par défaut. En particulier, ils ont une taille de police et un espace uniques autour d'eux. En utilisant la réinitialisation d'Eric Meyer, nous pouvons adoucir ces styles, permettant à chacun d'eux de partir de la même base. Pour ce faire, jetez un œil à son site Web, copiez le code et collez-le en haut de notre fichier main.css.</p><p>/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 Licence : aucune (domaine public) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, gros, citer, code, del, dfn, em, img, ins, kbd, q, s, samp, petit, grève, fort, sous, souper, tt, var, b, u, je, centre, dl, dt, dd, ol, ul, li, champs, formulaire, étiquette, légende, tableau, légende, tbody, tfoot, thead, tr, th, td, article, de côté, toile, détails, intégrer, figure, figcaption, pied de page, en-tête, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video ( margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline ; ) /* Réinitialisation du rôle d'affichage HTML5 pour les anciens navigateurs */ article, apart, details, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1; ) ol, ul ( style de liste : aucun ; ) blockquote, q ( guillemets : aucun ; ) blockquote:before, blockquote:after, q:before, q:after ( content : "" ; contenu : aucun ; ) table ( border- effondrer :c effondrer; espacement des bordures : 0 ; )</p><li>Notre fichier main.css commence à prendre forme, alors incluons-le dans notre fichier index.html. Ouvrez index.html dans un éditeur de texte et ajoutez un élément <link>V <head>, juste après l'élément <title> .</li><li>Parce que nous pointons les styles à travers l'élément <link>ajoutez un attribut rel avec une valeur de stylesheet .</li><p>Nous inclurons également un lien vers notre fichier main.css en utilisant l'attribut href. N'oubliez pas que notre fichier main.css est enregistré dans le dossier stylesheets, qui se trouve dans le dossier assets. Ainsi, la valeur de l'attribut href, qui est le chemin vers notre fichier main.css, devrait être assets/stylesheets/main.css .</p><p> <head> <meta charset="utf-8"> <title>Conférence Styles

Il est temps de tester notre travail et de voir comment notre HTML et CSS s'emboîtent. L'ouverture du fichier index.html (ou l'actualisation de la page si elle est déjà ouverte) dans le navigateur devrait afficher un résultat légèrement différent qu'auparavant.

Riz. 1.04. Notre site Web Styles Conference avec réinitialisation CSS

Démo et code source

Ci-dessous, vous pouvez voir le site Web de Styles Conference dans son état actuel, ainsi que télécharger source site pour le moment.

Résumé

Alors, tout va bien ! Nous avons franchi de grandes étapes dans ce didacticiel.

Pensez-y, vous connaissez maintenant les bases du HTML et du CSS. Au fur et à mesure que nous continuons et que vous passez plus de temps à écrire du HTML et du CSS, vous deviendrez beaucoup plus à l'aise avec ces deux langages.

Rappelons que nous avons considéré ce qui suit :

  • La différence entre HTML et CSS.
  • Introduction aux éléments, balises et attributs HTML.
  • Mise en place de la structure de votre première page Web.
  • Introduction aux sélecteurs, propriétés et valeurs CSS.
  • Travailler avec des sélecteurs CSS
  • Pointeur vers CSS depuis HTML.
  • Importance de la réinitialisation CSS.

Examinons maintenant de plus près le HTML et apprenons un peu à connaître la sémantique.

Ressources et liens

  • Termes HTML courants via Scripting Master
  • Termes et définitions CSS via des sites Web impressionnants
  • Outils CSS : Réinitialiser le CSS via Eric Meyer

La plupart du contenu sur Internet est constitué de pages Web. Il s'agit historiquement du tout premier type de documents destinés à être placés dans l'espace réseau virtuel, mais il conserve toujours sa pertinence et n'a pratiquement pas de formats concurrents. Quelle est la structure des pages Web ? Quels outils de développement web sont utilisés pour les créer ?

Qu'est-ce qu'une page Web ?

« Lister les éléments de base d'une page Web », nous dit un examinateur dans un cours d'informatique. Que pouvons-nous lui dire en réponse ? Tout d'abord, parlons de ce qu'est en principe une page Web.

Selon la définition généralement acceptée parmi les informaticiens, il s'agit d'un document destiné à être ouvert dans un programme spécialisé - un navigateur, et qui contient des données permettant d'afficher divers contenus utiles sur un écran d'ordinateur à l'aide du type de logiciel approprié - textes, liens, graphiques, vidéos, musique, etc. etc. Une page Web est un document texte. Les données pertinentes pour le navigateur sont des lettres, des chiffres et Symboles spéciaux, utilisés comme éléments de langage de balisage - HTML. C'est à l'aide de celui-ci que le créateur de la page web « explique » au navigateur comment afficher tel ou tel contenu à l'écran.

Place et rôle des pages web dans la structure des sites

Peut-on dire qu'une page Web est le composant principal d'un site Web ? C'est en partie vrai. Cependant, comme nous l'avons noté ci-dessus, une page Web n'est qu'un document texte. En règle générale, le site contient également des images, des vidéos et d'autres éléments multimédias. Une page Web ne peut pas les contenir, mais dans sa structure, elle peut contenir des liens vers eux. Ainsi, une page Web peut être qualifiée de composant principal du site en termes de rôle principal dans l'affichage du contenu virtuel aux utilisateurs.

Dans de rares cas, bien sûr, le document en question sera le seul élément du site - si, pour une raison quelconque, il ne prévoit pas l'affichage de graphiques, de vidéos et d'autres éléments multimédias. En particulier, les tout premiers sites - lors de l'apparition des langages de balisage des pages Web - n'incluaient pas le contenu correspondant. Sous les yeux de l'utilisateur, il n'y avait que du texte et des liens.

Le principe de l'utilisation de l'hypertexte

Ainsi, une page web est un document rédigé en Langage HTML, qui est utilisé pour baliser l'hypertexte. Mais quel est ce phénomène ? Qu'est-ce que l'hypertexte ? Sans trop entrer dans la théorie, notons qu'il s'agit d'un texte qui d'une manière ou d'une autre permet d'obtenir accès rapideà l'autre par le biais de liens. Dans un livre ordinaire, c'est impossible - il y a du «texte brut». Pour accéder à la page souhaitée, le lecteur doit effectuer plusieurs retournements, après avoir lu au préalable le contenu ou les notes de bas de page. En mode "hypertexte", l'essentiel du travail est effectué par l'ordinateur - en raison des informations reflétées dans les éléments HTML de la page.

Si un professeur d'informatique nous dit : « Lister les principaux éléments d'une page Web », alors nous pouvons correctement commencer à parler des composants du document correspondant, qui sont créés à l'aide du langage de balisage HTML. Par conséquent, pour commencer, examinons quelques points théoriques concernant HTML.

Structure du langage HTML : balises

Comment un navigateur lit-il les données nécessaires sur une page Web à partir d'un document HTML ? Très simple.

Éléments essentiels langue donnée sont des balises. Dans la plupart des cas, ils sont appariés - il y en a un d'ouverture et un de fermeture. Les premiers sont désignés uniquement par des crochets angulaires. Les seconds sont similaires, mais le deuxième crochet est précédé d'une barre oblique - le symbole /. Le navigateur est capable de les reconnaître et affiche donc sans problème le contenu des pages Web conformément aux algorithmes créés par le développeur du document.

La balise d'ouverture est généralement écrite en majuscules, la balise de fermeture est écrite en minuscules. C'est une norme qui s'est imposée parmi les professionnels de l'informatique. Le navigateur reconnaîtra certainement la commande HTML dans toutes les lettres, mais il est toujours conseillé aux développeurs Web de s'en tenir au schéma d'écriture des balises marquées. Cela facilitera, par exemple, la complétion d'une page web par d'autres spécialistes.

Les attributs

Les autres éléments importants du langage HTML sont les attributs. Avec leur aide, le créateur d'une page Web peut définir les propriétés du contenu - par exemple, la hauteur de la police, la couleur, la position par rapport à la page. Il en va de même pour les photos, vidéos et autres composants multimédias. Les attributs sont écrits dans la balise d'ouverture.

Contenu

Entre les balises d'ouverture et de fermeture se trouve le prochain élément clé d'une page Web, le contenu. C'est, en fait, le contenu même qui devrait être affiché devant l'utilisateur sur l'écran. Il peut s'agir de texte, de lien, d'image, de vidéo ou de tout autre élément multimédia.

Éléments de pages Web

« Alors listez les éléments de base d'une page Web, enfin ! - répète le professeur. "Avec plaisir", lui répondons-nous. Qu'est-ce qui est inclus dans la structure du type de documents à l'étude ? Convenons que nous considérerons cet aspect dans le contexte des éléments HTML de la page Web. Autrement dit, leur affichage dans le navigateur - ce que l'utilisateur voit à l'écran - nous intéressera dans une moindre mesure. Le fait est que les algorithmes HTML correspondants, sur la base desquels le programme affiche le contenu de la même manière, peuvent être différents. Et c'est la particularité du langage HTML : l'image souhaitée sur la page Web peut être affichée différentes façons. Dans le même temps, ils peuvent être soit équivalents en termes de coûts de main-d'œuvre du créateur de la page Web, soit impliquer une quantité d'efforts et de temps différente pour leur mise en œuvre.

Éléments de la page Web : en-tête

Les éléments standards d'une page Web, aussi surprenant que cela puisse paraître, sont présents en très petit nombre. En fait, il n'y en a que deux - le titre et le corps du document. Cependant, chacun d'eux peut avoir une structure assez complexe.

Quelle est la spécificité de l'en-tête ? Il est situé tout en haut de la page Web. Le code HTML qui génère le titre suppose généralement que seul le texte est "crypté", mais si nécessaire, de petits inserts graphiques peuvent également être placés dans l'élément correspondant. Et c'est en fait tout ce que l'on peut dire sur le titre. Il semblerait que son rôle dans la structure du document correspondant soit insignifiant. Mais ce n'est pas. Les titres des pages Web sont très importants en termes d'indexation des sites dans les moteurs de recherche - Yandex, Google. Cet élément doit être pleinement pertinent par rapport au contenu de la page Web, ainsi qu'aux spécificités thématiques du site.

Comment le titre d'une page Web est-il capturé à l'aide de HTML ? Très simple. Tout d'abord, la balise d'ouverture est écrite, qui ressemble toujours à HEAD avec des crochets angulaires, puis le contenu de l'en-tête, après cela, la balise de fermeture. Ils sont écrits, bien sûr, tout en haut du document Web.

Le titre d'un document Web peut inclure un certain nombre d'éléments supplémentaires. Parfois, le format d'une page Web peut exiger que le texte soit affiché dans un codage particulier. Comment s'assurer que le document web répond à ce critère ? Très simple. La structure d'en-tête du document doit contenir des algorithmes HTML qui demandent au navigateur d'utiliser un codage de langue spécifique - par exemple, le cyrillique. Les commandes correspondantes sont placées dans la balise META, qui, comme les autres, peut s'ouvrir et se fermer.

Corps principal de la page Web

Le corps principal d'un document Web s'ouvre avec la balise BODY et se ferme avec l'élément correspondant, qui comprend une barre oblique. Dans le même temps, il peut y avoir un grand nombre de commandes supplémentaires du langage de balisage hypertexte entre les balises d'ouverture et de fermeture. Cela est dû au fait que la partie principale de la page Web contient son contenu utile - textes, liens, graphiques, vidéos, divers formulaires à remplir.

Chacun des types de contenu respectifs a ses propres balises. La structure de la partie principale d'un document Web peut contenir des commandes HTML qui peuvent également être utilisées pour formater du texte, par exemple, en donnant à la police une couleur, une taille et d'autres propriétés spécifiques.

Examinons les spécificités de certaines balises HTML couramment utilisées. En fait, ils forment également les principaux éléments de la page Web.

Balises HTML de base

Ainsi, afin d'étudier en détail ce que sont les éléments d'une page Web, étudions plus en détail l'essence des balises HTML de base. Nous en avons déjà répertorié certains ci-dessus - en particulier ceux avec lesquels le navigateur lit les en-têtes des pages Web et détermine où se trouve le corps principal du document.

La balise P est assez courante et, comme d'autres éléments similaires du langage de balisage hypertexte, elle peut s'ouvrir et se fermer. Cette balise permet de formater un seul paragraphe d'un document. Vous pouvez, par exemple, définir un type de police ou une couleur spécifique pour celle-ci. Cependant, cela se fait à l'aide d'une balise supplémentaire - FONT. En même temps, il sera placé à l'intérieur de celui qui indique les limites du paragraphe - cela vous permettra de ne pas distribuer la commande HTML qui reflète le type de police préféré à d'autres éléments de la page Web.

Les tableaux sont créés à l'aide de la balise TABLE. À l'aide des attributs correspondants, vous pouvez déterminer le nombre requis de colonnes et de lignes, définir leur largeur, les spécificités des bordures, la taille et la couleur de la police du texte dans le tableau.

Responsable du traitement des images par le navigateur. Vous pouvez également y placer divers attributs qui régulent la taille de l'image, sa position sur la page.

Les liens vers d'autres documents ou fichiers Web sont indiqués à l'aide de la balise A. En règle générale, des attributs sont situés à l'intérieur de celle-ci qui indiquent le fait que la structure de la page Web est un lien hypertexte. Ceci indique le document, le fichier ou le site auquel il mène.

Une balise courante est FRAMESET. Avec lui, vous pouvez diviser l'espace d'une page Web en plusieurs zones - des cadres. Dans chacun d'eux, il est possible de séparer les documents Web. Autrement dit, les cadres vous permettent de placer correctement deux pages ou plus sur le même écran en même temps.

L'histoire sur les éléments clés des pages Web et l'histoire suivante sur les moyens de les formater en utilisant le langage HTML - quelque chose comme ça sera l'algorithme de notre réponse à la question que l'examinateur nous a posée. S'il nous contacte en disant "énumérez les principaux éléments de la page Web", nous aurons alors, en utilisant la méthodologie appropriée, toutes les chances de révéler le sujet. Autrement dit, par le terme "éléments", nous pouvons comprendre les composants clés de la structure d'un document Web, ou types de contenu - texte, images, tableaux, cadres, liens que le webmaster forme à l'aide d'un outil tel que le langage HTML.

Spécificités des outils de développement web

En plus de ce qui a été dit, nous pouvons préciser qu'il existe un grand nombre de balises et d'attributs fournis par les normes HTML. En plus du HTML, les développeurs Web peuvent utiliser des outils de formatage supplémentaires pour les documents hypertextes. Par exemple, avec Javascript vous pouvez créer des pages Web dynamiques - c'est-à-dire celles dont le contenu est constamment mis à jour (à la fois en raison des actions de l'utilisateur lui-même et conformément à des algorithmes pré-écrits dans des scripts).

Il serait utile d'ajouter qu'un développeur Web peut utiliser des langages de programmation à part entière dans son travail, tels que, par exemple, Perl, PHP, Java, Python, à l'aide desquels les possibilités de travailler avec des documents hypertextes deviennent encore plus large. La nécessité de cela peut être due au fait que les domaines d'application des technologies Web sont aujourd'hui très différents. Les tâches auxquelles les développeurs modernes sont confrontés peuvent être assez complexes. Par exemple, il est parfois nécessaire de traduire des pages Web écrites en russe vers l'anglais. Dans ce cas, la boîte à outils du développeur sera la plus diversifiée.

Objectif du travail : familiarisation des étudiants avec les concepts de base du langage HTML, la structure d'un document HTML, les balises obligatoires, les commentaires, les méthodes de formatage du texte, les styles physiques et logiques, et l'acquisition de compétences dans la création de documents Web statiques simples.

Dans le laboratoire, nous utiliserons l'éditeur de texte Bloc-notes pour préparer les fichiers HTML, et le navigateur Internet Explorer comme outil de suivi de ce qui a été fait.

Informations théoriques

Concepts de base

Hypertexte- une structure d'information qui permet d'établir des relations sémantiques entre des éléments textuels sur un écran d'ordinateur de manière à pouvoir facilement effectuer des transitions d'un élément à l'autre. En pratique, dans l'hypertexte, certains mots sont mis en évidence par un soulignement ou une coloration d'une couleur différente (hyperliens). La surbrillance d'un mot indique la présence d'une connexion de ce mot avec un document dans lequel le sujet associé au mot surligné est examiné plus en détail. Un seul document HTML s'appelle :

Document HTML ;

Documents Web

Page web.

Ces pages sont généralement au format HTM ou HTML.

Un ensemble de pages Web appartenant à un auteur ou à un IEDI et interconnectées par des hyperliens communs forme une structure appelée site Web ou site Web. Chaque page HTML a sa propre URL unique - undpec sur Internet.

Cadre (cadre) est un terme à deux sens. La première valeur est la zone de document avec ses barres de défilement. La seconde est une image 0DNN0H dans le fichier graphique d'animation (frame).

Applet (applet) - un programme qui est transféré sur l'ordinateur client sous la forme d'un fichier séparé et lancé lors de l'affichage d'une page Web.

Scénario (Scénario) , ou script, est un programme inclus dans une page Web pour améliorer ses fonctionnalités. Le navigateur Internet Explorer affiche dans certaines situations le message : "Autoriser les scripts sur la page ?". Dans ce cas, il s'agit de scripts.

Image de synthèse (Commun passerelle Interface) - le nom général des programmes qui, travaillant sur le serveur, vous permettent d'étendre les capacités des pages Web. Sans ces programmes, il est impossible de créer des pages Web interactives.

Navigateur (Navigateur) - un programme pour visualiser des pages Web.

Élément- la construction du langage HTML. Vous pouvez le considérer comme un conteneur qui contient des données et vous permet de les formater d'une certaine manière. Toute page Web est un ensemble d'éléments. L'une des principales idées de l'hypertexte est la capacité d'imbriquer des éléments. Par exemple:

<Начало элемента>Le contenu de l'élément, les données que l'élément formate

Étiqueter(en anglais tag - label, descriptor, label) - le marqueur de début ou de fin d'un élément. Les balises définissent la portée 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. Texte qui n'est pas entre ces crochets (< >) est visible dans son intégralité lorsqu'il est affiché dans un navigateur. Par exemple:

<Начальный тег>Le contenu de l'élément, les données qui

formate l'élément

<Р>Ce texte sera dans un paragraphe séparé

Toute page Web est un ensemble d'éléments. L'un des principes de base du HTML est la possibilité d'imbriquer un élément dans un autre.

Attribut- paramètre ou propriété de l'élément. 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. Si le ciment contient du texte, les attributs peuvent définir la couleur et la taille de la police, l'alignement paragraphe de texte et ainsi de suite. Si l'élément contient une image, alors les attributs peuvent définir la taille de l'image, la présence et la taille du cadre autour de l'image, etc.

<Р align="center">Ce texte sera aligné au centre de l'écran

Dans cet exemple, il y a encore une balise qui définit le début et la fin d'un paragraphe. Cependant, la balise de début contient l'attribut align, qui définit l'alignement du texte au centre de l'écran.

Note:

Toute information utile doit se trouver entre les balises de début et de fin qui indiquent son format ;

Tous les attributs sont situés dans la balise de début ;

Pour plus de commodité, vous pouvez écrire la balise de début avec une lettre majuscule (P) et la balise de fin avec une lettre minuscule (/p), bien que cela ne soit pas nécessaire ;

Tous les éléments ne nécessitent pas une balise de fin (fermante) ;

Commencez à écrire chaque nouvel élément sur une nouvelle ligne. Les éléments imbriqués sont en retrait (tabulation). Encore une fois, ce n'est pas obligatoire, mais cela vous facilitera grandement la tâche.

Une page Web est un document spécialement formaté qui peut inclure du texte, des graphiques, des hyperliens, de l'audio, de l'animation et de la vidéo.

Plusieurs pages Web qui partagent un thème, une conception et des liens communs, et qui sont généralement situées sur le même serveur Web, forment un site Web.

Site Web ait (de l'anglais. site Internet: la toile- "web, réseau" et placer- "placer", littéralement "placer, segmenter, faire partie du réseau") - un ensemble documents électroniques(dossiers) d'un individu ou d'une organisation dans réseau informatique, regroupés sous une même adresse (nom de domaine ou adresse IP).

L'ensemble des sites constituele World Wide Web, où la communication (web) réunit des segments d'information de la communauté mondiale en un seul ensemble - une base de données et des communications à l'échelle planétaire. Pour l'accès direct des clients aux sites sur les serveurs, un protocole a été spécialement développé http .

Un site Web est structuré comme un magazine qui contient des informations sur un sujet ou un problème. Tout comme un magazine est composé de pages imprimées, un site Web est composé de pages Web générées par ordinateur.

Le programme qui affiche une page Web s'appelle un navigateur Web.

La création de sites Web est mise en œuvre à l'aide du langage de balisage des documents hypertextes HTML. La technologie HTML consiste à insérer des caractères de contrôle (balises) dans un document en texte brut et, par conséquent, nous obtenons une page Web. Le navigateur, lors du chargement d'une page Web, la présente à l'écran sous la forme spécifiée par les balises.

HTML permet :

Formatage du texte

inclure des images, du multimédia dans le document ;

Ce langage crée des liens hypertextes vers d'autres pages Web.

HTML est utilisé pour créer le contenu informatif d'un fichier et pour définir la structure et le format des pages Web. Étant donné que les fichiers HTML sont des fichiers de texte brut, un tel fichier peut être envoyé à pratiquement n'importe quel ordinateur.

Pour créer des pages Web, on utilise des éditeurs de texte simples qui n'incluent pas de caractères de contrôle de formatage du texte dans le document en cours de création. En tant qu'éditeur dans Windows, vous pouvez utiliser application standard"Carnet de notes".

Généralement, un fichier de page Web porte l'extension .html ou .htm.

De plus, il existe de nombreuses technologies dans lesquelles les principales étapes de création de sites sont déjà automatisées, il ne reste plus qu'à apporter des modifications en fonction de leur objet.

Pour afficher une page HTML, il suffit de taper son URL dans la barre d'adresse de votre navigateur Web, puis de suivre les hyperliens. Mais c'est précisément le problème principal - comment connaître l'adresse de la page ? Le plus souvent, il arrive que vous sachiez ce que vous devez trouver, mais vous ne savez pas exactement où chercher. Pour résoudre ce problème, il existe des moteurs de recherche spéciaux. Du point de vue de l'utilisateur, système de recherche est un site normal page d'accueil qui contient des liens vers d'autres sites répartis par rubriques ("Sport", "Business", "Informatique", etc.). De plus, le moteur de recherche permet à l'utilisateur d'entrer plusieurs mots-clés et renvoie des liens vers des pages contenant ces mots-clés.

Site Internet

Site Web (eng. Site Web, du Web - Web et site - "lieu") - un ensemble de documents d'une personne ou d'une organisation privée réunis sous une même adresse dans un réseau informatique. Par défaut, on suppose que le site est situé sur Internet. Tous les sites Internet constituent collectivement le World Wide Web. Le protocole HTTP a été spécialement conçu pour l'accès direct des clients aux sites Web sur les serveurs. Les sites Web sont autrement connus comme la représentation Internet d'une personne ou d'une organisation. Quand ils disent "votre propre page sur Internet", cela signifie un site Web entier ou une page personnelle faisant partie du site de quelqu'un d'autre. En plus des sites Web sur Internet, des sites WAP pour téléphones mobiles sont également disponibles.

Initialement, les sites Web étaient des collections de documents statiques. Actuellement, la plupart d'entre eux se caractérisent par le dynamisme et l'interactivité. Dans de tels cas, les experts utilisent le terme application Web - prête progiciel pour résoudre les problèmes du site Web. Une application Web fait partie d'un site Web, mais une application Web sans données n'est techniquement qu'un site Web.

Dans la plupart des cas sur Internet, un site Web correspond à un nom de domaine. Précisément selon noms de domaine les sites sont identifiés dans réseau mondial. D'autres options sont possibles : un site sur plusieurs domaines ou plusieurs sites sous un même domaine. Habituellement, plusieurs domaines utilisent de grands sites (portails Web) pour séparer logiquement différents types de services fournis (mail.yandex.ru, news.yandex.ru, auto.yandex.ru). Il existe également des cas fréquents d'attribution de domaines distincts pour différents pays ou langues. Par exemple, google.ru et google.fr sont logiquement un site Google dans des langues différentes, mais techniquement ce sont des sites différents. La combinaison de plusieurs sites sous un même domaine est typique pour hébergement gratuit. Pour identifier les sites dans l'adresse, après avoir spécifié l'hôte, il y a un tilde et le nom du site : example.com/~my-site-name/.




Haut