Элементы, теги и атрибуты

Ввод «М» в HTML

Таким образом, «M» в HTML означает «маркап»(разметка), но что на самом деле означает «маркап»? По сути, это означает аннотировать документ дополнительной информацией. Такие вещи, как, где различные разделы и абзацы начинаются и заканчиваются, какая часть является названием, какие вещи должны быть выделены и так далее.

Существует много способов разметки документа, но HTML заимствует технику из языка предков, SGML ( Стандартный обобщенный язык разметки ), который использует угловые скобки ("<" и ">") для отделения аннотаций от обычного текста. В HTML эти аннотации называются «тегами».

Например, рассмотрим следующий фрагмент кода HTML:

   <body>
      <h1>A Tale of Two Cities</h1>
      <p>
         It was the best of times, it was the worst of times, . . . .
      </p>
      . . .
      <p>
         . . . it is a far, far better rest
         that I go to than I have ever known.
      </p>
   </body>

Если вы удалите все, что находится между угловыми скобками в тексте, для большинства целей оно все равно будет выглядеть так же:

A Tale of Two Cities
It was the best of times, it was the worst of times . . . .
  . . .
. . . it is a far, far better rest
    that I go to than I have ever known.

Если вы знаете, что все в угловых скобках является «метаинформацией», это оставляет большую гибкость. Вы можете поместить в скобки много разных вещей, чтобы они не отображались (прямо) в готовом документе. И хотя вы обычно не видите непосредственно, что находится в этих угловых скобках, они часто могут сильно влиять на то, как выглядит ваша веб-страница, а также на то, как она реагирует и взаимодействует с вами.

Попробуйте!

Я ожидаю, что в этот момент вам может понадобиться написать HTML-код. Как это принято в учебниках по программированию, мы остановимся здесь, чтобы создать простую программу «Hello HTML». Пожалуйста, выберите любой понравившийся вам веб-редактор (см. Подраздел «Инструменты курса» - Модуль 0).

Примечание. Если вы хотите поделиться своим HTML-кодом в обсуждениях, вы можете вставить его непосредственно в сообщение на форуме (выделите код и Ctrl + K / используйте виджет кода). Но лучше использовать один из следующих онлайн-редакторов кода:

Это редакторы кода HTML, CSS и JavaScript, которые просматривают / демонстрируют биты кода в вашем браузере. Помогает в тестировании между устройствами, в режиме реального времени для дистанционного программирования пар.

Программирование "Привет HTML"!

Вы можете создавать и редактировать свои HTML-страницы, используя онлайн-редакторы или редакторы, которые можно установить на свой компьютер, например, код Visual Studio.

Использование онлайн-редакторов:

Оба JSBin и CodePen два онлайн редакторы , которые можно использовать для создания веб - страниц HTML. Следующие два видео показывают, как создать свою первую HTML-страницу, используя JSBin и CodePen.

Онлайн кодирование видео: с использованием JSBin

(ожидается видео)

Онлайн кодирование видео: с использованием Codepen

(ожидается видео)

Использование кода Visual Studio:

Посмотрите эти три демонстрации ниже, чтобы узнать, как использовать код Visual Studio (VS) для написания HTML-страниц, и изучить поддержку, которую вы получаете при использовании кода Visual Studio для создания веб-страниц. Вы также узнаете, как просмотреть HTML-страницу, используя расширение «открыть в браузере». Наконец, вы узнаете, как создать свой первый «Hello HTML!» страницу с использованием VSСode

Живое кодирование видео: использование кода Visual Studio Code

(ожидается видео)

Живое кодирование видео: предварительный просмотр HTML с использованием VS Code

(ожидается видео)

Живое кодирование видео: первая страница с VS Code

(ожидается видео)

Элементы

Если вы сидите в кафе рядом со столом веб-разработчиков, вы, вероятно, услышите три слова: «Теги», «Атрибуты» и «Элементы» (или иногда «элементы DOM», то же самое, просто более точно и многословно).

«Элементы» - это сами части, то есть абзац - это элемент, или заголовок - это элемент, даже тело - это элемент. Большинство элементов могут содержать другие элементы, так как элемент body будет содержать элементы заголовка, элементы параграфа, фактически практически все видимые элементы DOM.

Посмотрите на рисунок выше. Он содержит один элемент html. Оказывается, он включает в себя все содержимое вашего HTML-файла. Вы увидите от узла «html» две ветки ведущие на два компонента: голову и тело. Каждый из них имеет соответствующее содержание. Эта структура - то, что мы, компьютерные ученые, называем «деревом». Любой данный элемент (за исключением самого внешнего элемента «html») целиком содержится внутри другого элемента, называемого «родительским» элементом. Не удивительно, что элементы, которые содержит данный элемент, являются его «дочерними» элементами. И, да, детей от общего родителя часто называют «братьями и сестрами».

Таким образом, в приведенном выше примере верхний элемент - это элемент html, который содержит всего два элемента - заголовок и тело. Элемент head содержит элемент title, а тело содержит элемент h1 и элемент p. В более типичном примере тело будет содержать гораздо больше детей, но для нашей цели этого достаточно.

Это может быть отличная картина, но как мы представляем такую ​​структуру в текстовом файле? Ну, вот где "теги" начинаются.

Теги

«Теги» - это то, что мы используем для организации текстового файла (который представляет собой просто длинную строку символов), так что он представляет собой дерево элементов, которые составляют HTMLдокумент. Теги - это не сами элементы, а фрагменты текста, которые вы используете, чтобы сообщить компьютеру, где элемент начинается и заканчивается. Когда ты 'разметить«документ, вы обычно не хотите, чтобы те дополнительные заметки, которые на самом деле не являются частью текста, были представлены читателю. HTML заимствует технику из другого языка, SGML, чтобы предоставить компьютеру простой способ определить, какие части являются «MarkUp», а какие - содержимым. Используя «<» и «>» в ​​качестве круглых скобок, HTML может указывать начало и конец тега, т. е. Наличие «<» сообщает браузеру «следующий бит - разметка, обратите внимание».

Что бы ни делал этот тег (или «открытый тег»), он применяется к контенту, следующему за тегом. Если вы не хотите, чтобы это был весь остальной документ, вам нужно указать, когда прекратить использовать этот тег и сделать что-то еще, поэтому снова используются «<» и «>». Поскольку элементы обычно вложены в другие элементы, браузер должен уметь различать конец текущего тега или начало нового тега (представляющего вложенный элемент). Это делается путем добавления «/» сразу после «<», чтобы указать, что это «закрывающий тег». Чтобы указать начало и конец абзаца (обозначается одной буквой 'p'), вы получите что-то вроде этого:

<p> Это мой первый абзац! </ р>

Большинство тегов имеют открытые и закрытые версии, но есть несколько странных. Мы узнаем больше об этом позже, но мы обычно называем странные каксам закрытиетеги. Обычноэти теги представляют элемент, который полностью описывается его атрибутами, и, следовательно, нет необходимости в другом контенте. Итак, если вы видите что-то вроде этого:

<img  src = "https://goo.gl/pVxY0e" alt = "Плавающий цветок" />

... тогда вы должны знать, что косая черта в конце открытого тега является своего рода сокращением для закрытого тега, поэтому вы не увидите никаких других указаний на то, что этот элемент завершен. Есть также несколько тегов, которые даже не используют '/' в конце, у них просто нет никакого закрытого тега вообще. Это работает, потому что вся информация, в которой нуждается этот тег, объявлена ​​в «атрибуте».

Комментарии

Компьютеры отлично умеют читать компьютерные языки, но людям не всегда легко. Комментарии - это способ добавления текста, который в первую очередь предназначен для читателей.

У каждого языка программирования, который я использовал, есть свой способ представления комментариев. HTML5 не является исключением. Если вы хотите добавить в файл что-то, что браузер должен полностью игнорировать, для этого есть специальный тег (что неудивительно называется «тег комментария»):

<!-- This is a comment -->

HTML-тег комментария начинается с «<!--» и заканчивается «-->», что означает, что, когда компьютер читает ваш HTML-файл, если он видит «<!--», он будет игнорировать все, что видит, до тех пор, пока сталкивается с '-->'. Нет открытого или закрытого тега, только тег комментария. В отличие от большинства других вещей в HTML5, комментарии не могут быть вложенными. Если вы попробуете это, например:

<!--
Beginning of comment
  <!-- comment nested inside -->
This is after the nested comment
-->

Затем компьютер увидит начало тега комментария и начнет игнорировать все, пока не увидит «--->», включая второй «<!--». Как только он видит «-->», он предполагает, что комментарий сделан, и возвращается к обработке всего, что он видит как HTML-код и контент, даже если автор мог подразумевать, что это комментарий.

Как и большинство других тегов, он может занимать несколько строк вашего исходного файла. Это может быть очень удобно, когда вам есть что сказать:

<!--
If you want some good advice,
Neither a borrower nor a lender be,
For loan oft loses both itself and friend,
And borrowing dulls the edge of husbandry.
-->

Комментарии также часто используются в разработке для блокирования фрагментов кода, будь то для тестирования или оставления незавершенного бизнеса в файле:

<!-- Not sure if I want this wording or not:
<p>Eighty seven years ago, a bunch of guys started a new country</p>
-->

Важно помнить, что HTML, CSS и JavaScript - это три разных языка, каждый из которых имеет свой собственный способ написания комментариев. Это может показаться странным, но на самом деле важно, чтобы HTML-комментарии, по крайней мере, отличались от других. Что касается точной формы этих комментариев, мы рассмотрим это в свое время.

Атрибуты

Большая часть того, что мы расскажем об атрибутах, будет позже, но я хотел бы кратко изложить эту идею. По сути, данный элемент на вашей веб-странице может отличаться любым количеством уникальных или общих атрибутов. Вы можете однозначно идентифицировать его с помощью атрибута 'id' или сгруппировать его с классом других элементов, установив атрибут 'class'.

Атрибуты в HTML пишутся внутри открывающего тега так:

<p id="paragraph-1" class="regular-paragraphs red-paragraph">
   Call me Ishmael . . .
 </p>

Вышеуказанный абзац имеет уникальный идентификатор «paragraph-1» и является частью класса «regular-paragraphs». Буквы внутри кавычек не имеют никакого значения для компьютера, они просто должны быть последовательными. Они на самом деле являются строками, которые, как мы скоро узнаем, предполагают, что если вы хотите иметь другой абзац в этом классе, он должен сказать «regular-paragraphs», а не «regular» или «Regular-Paragraphs» или любой другой вариант ,

Опять же, тот факт, что компьютеру все равно, что мы помещаем в эти строки (за исключением некоторых ограничений), означает, что мы можем использовать их для передачи значения разработчику-человеку. С таким же успехом я мог бы сказать id = 'x' и class = 'y', но любой, кто смотрел бы на это, не имел бы понятия о значении x и y. Лучшая практика заключается в том, чтобы назвать эти вещи для повышения ясности, последовательности и краткости.

Но подробнее об атрибутах в следующем модуле.

Теперь все вместе!

Один из ключей к пониманию HTML или любого компьютерного языка - быть уверенным, что вы избегаете двусмысленность,потому что компьютеры, как правило, не очень хороши в суждениях Например, вы можете упростить HTML, чтобы каждый раз, когда вы видите тег <p> , вы начинали новый абзац, закрывающий тег не требовался. Это может работать большую часть времени, но это помешает вамгнездование один элемент внутри другого, поскольку компьютер не мог знать, подразумеваете ли вы новый элемент, который будет вложенным или преемником.

Человек-дизайнер мог бы понять, что вы имели в виду из контекста, и зная, что ошибки случатся выберите ту, которая, по ее мнению, лучше всего подходит в этом случае. Компьютер, с другой стороны, испытывает трудности с такой задачей, поэтому полезно использовать закрывающий тег, соответствующий открытому тегу, чтобы сделать вещи абсолютно ясными.

<p>
    The old lady pulled her spectacles
down and looked over them about the
room; then she put them up and looked
out under them.

    There was a slight noise behind her
and she turned just in time to seize a
small boy by the slack of his roundabout
and arrest his flight.
</p>

Читатель мог легко обнаружить, что есть два абзаца и что автор, вероятно, просто забыл завершить один и запустить другой. Компьютер, с другой стороны, будет видеть только один абзац и макет соответственно.

С другой стороны, вы можете подумать, что, поскольку компьютер всегда точно знает, с каким тегом он работает (эйдетическая память), вы можете предоставить своего рода «универсальный закрывающий тег», который не определяет тип закрываемого им типа. Было бы известно, чтобы закрыть текущий тег. Хотя это технически верно, для людей, читающих код, удобно иметь закрывающий тег. Тег закрытия позволяет легче запомнить, какой тег он закрывает. Мы, люди, можем запутаться, пытаясь вспомнить подобные детали.

Но есть и другие неясности, которые следует учитывать. Например, когда браузер получает файл, он может знать, что он получает файл HTML, но он не будет знать, какая версия HTML используется (это имеет значение).

Вот почему первое, что вам нужно в любом HTML-файле, - это тег, который сообщает вам, какой это тип HTML-файла:

<!DOCTYPE html>

Другими словами, первое, что видит браузер - это объявление «Это файл HTML5, если вам интересно». Может показаться утомительным помещать это в начало каждого файла, но, поверьте мне, раньше было хуже. Вы, наверное, заметили, что там не написано "! DOCTYPE HTML5", а просто "html".

HTML5 может сделать это, потому что все предыдущие версии были намного длиннее. Например, в верхней части страницы HTML 4.01 у вас может быть что-то вроде этого:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Нам не нужно вдаваться в детали того, почему и что это значит, просто будьте благодарны, что HTML5 покончил с этим.

Все в HTML

Это может показаться излишним, но следующий бит сообщает компьютеру, где начинается настоящий HTML-код, используя тег <html>:

<html>

Почти каждый HTML-документ состоит из двух частей. «Тело» - это основное содержимое страницы, содержащее текст, изображения, таблицы и т. Д. «Голова» предшествует «телу» (сверху?). Это место, куда вы помещаете информацию о документе, который на самом деле не помещается в теле, ака-мета-информацию. Такие вещи, как то, какой набор символов использует страница, где браузер может найти советы по стилю, и каков заголовок страницы (который может отличаться от названия, которое читает пользователь) - все это содержится в <head>. Если вы обращали внимание, вы должны быть в состоянии создать очень простойHTMLфайл, в правильной форме, без какого-либо содержания. Подсказка, для заголовка документа вы бы написали:

<head>
    ...
</head>

Вы можете вспомнить тег <p> абзаца, который мы использовали в приведенном выше примере. Попробуйте вставить абзац в текст вашего нового документа. Вы должны получить что-то похожее на это:

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
     <p>
       As my English teacher used to say, 'One sentence does not a paragraph make'!
     </p>
   </body>
</html>

Задание - Просмотр источника

Выберите 5 веб-сайтов и выполните «Просмотр источника» на каждом из них, щелкнув правой кнопкой мыши на странице и выбрав «Просмотр источника» в контекстном меню:

  • Сколько используют HTML5? ( Подсказка : если у вас есть проблемы с поиском сайтов, которые не используют HTML5, попробуйте поискать старые сайты)

  • У скольких есть правильные <body>и <html>закрытые теги?

  • Много ли пробелов? Почему есть или почему нет?

PreviousБольшая тройка: основные инструменты, используемые для кодирования.NextКодирование символов

Last updated