HTML: Базовая структура
Любой HTML-документ можно разбить на несколько основных составляющих:
- Блок head , содержащий метаинформацию о нашем сайте. Данные из этого блока не отображаются непосредственно на странице, а служат для её описания, подключения стилей и скриптов.
- Блок body является основным местом, где строится HTML-разметка. Данные в этом блоке будут обработаны и выведены в браузер.
Простейшая разметка в HTML5 выглядит следующим образом:
Базовая разметка HTML Code Basics
Бесплатные уроки по программированию и HTML для новичков
Обратите внимание на первую строку . DOCTYPE (document type) — служебная информация для браузера, где описывается стандарт HTML, который нужно обработать. Текущий стандарт HTML5 поддерживается всеми браузерами, поэтому достаточно указать в первой строке документа , который говорит, что наш документ размечен по стандарту HTML5.
Далее открывается парный тег с атрибутом lang=»ru» . Указание языка также необходимо для браузеров, особенно если сайт рассчитан на массовую аудиторию, в том числе и за рубежом.
Во избежание ошибок, обе вышеописанные конструкции, при их отсутствии, будут добавлены браузером автоматически. В некоторых ситуациях браузеры могут добавить не те строки, которые вы бы хотели, и вместо обработки страницы по стандарту HTML5 браузер будет обрабатывать всё как HTML4, что приведёт ко множеству проблем, так как старые стандарты могут не знать о существовании многих тегов, таких как , и так далее
Задание
Скопируйте базовую разметку HTML из примера выше. Внутри тега вставьте любую разметку. Попробуйте различные теги из тех, которые были пройдены в предыдущих курсах.
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
2. HTML – Введение в язык: теги для создания html-документа и его структура
HTML – расшифровывается как «язык гипертекстовой разметки» (англ. HyperText Markup Language), который является наиболее широко используемым языком для написания веб-страниц.
- Гипертекст относится к способу связывания веб-страниц (HTML-документов). Таким образом, ссылка, доступная на веб-странице, называется гипертекстом.
- Как следует из названия, HTML – это язык разметки, что означает, что Вы используете HTML, чтобы просто «разметить» текстовый документ с тегами, которые сообщают веб-браузеру, как структурировать его для отображения.
Первоначально HTML был разработан с целью определения структуры документов, таких как заголовки, списки, абзацы и так далее, чтобы облегчить обмен научной информацией между исследователями.
Теперь HTML широко используется для форматирования веб-страниц с помощью различных тегов, доступных на языке HTML.
HTML-документ
В следующем примере показан HTML-документ в простейшей форме:
Заголовок документа Заголовок
Здесь содержание документа.
Давайте сохраним код в HTML-файле document.html с помощью вашего любимого текстового редактора. И откройте файл с помощью веб-браузера, такого как Internet Explorer, Google Chrome или Firefox и др. Он должен показать следующий результат:
Теги для создания HTML-документа
Как уже говорилось ранее, HTML является языком разметки и использует различные теги для форматирования содержимого. Эти теги заключены в угловые скобки . Большинство тегов имеют соответствующие закрывающие теги, за исключением нескольких тегов. Например, тег имеет закрывающий тег и тег имеет тег закрытия и другие.
В приведенном выше примере используются следующие теги для создания HTML-документа:
| Тег | Описание |
| Этот тег определяет тип документа и версию HTML. | |
| Этот тег охватывает полный HTML-документ и в основном состоит из заголовка документа, который представлен тегами . и телом документа, которое представлено тегами . . | |
| Этот тег представляет заголовок документа, который может содержать другие html-теги, такие как , и т.д. | |
| Тег используется внутри тега , чтобы указать название документа. | |
| Этот тег представляет тело документа, в котором хранятся другие html-теги, такие как , , и другие. |
|
| Этот тег представляет заголовок. | |
| Этот тег представляет абзац. |
Знание этих тегов вполне хватит чтобы создать html-документ (html-страницу).
Чтобы изучить HTML, Вам нужно знать различные теги и понимать, как они ведут себя при форматировании текстового документа. Учить HTML легко, так как пользователям нужно только выучить использование разных тегов, чтобы отформатировать текст или изображения, тем самым сделать красивую веб-страницу.
Консорциум World Wide Web (W3C) рекомендует использовать строчные теги, начиная с HTML 4.
Структура HTML-документа
Структура типичного HTML-документа будет иметь следующий вид:
Тег декларации документа Теги, связанные с заголовком документа Теги, связанные с телом документа Мы изучим все теги заголовка и тела в последующих уроках, теперь давайте посмотрим, что такое тег декларации документа.
Декларация
Тег декларация используется веб-браузером для понимания версии HTML, используемой в документе. Текущая версия HTML – 5, и она использует следующее объявление:
Существует много других типов объявлений, которые могут использоваться в документе HTML в зависимости от того, какая версия HTML используется. Мы увидим более подробную информацию об этом при обсуждении тега вместе с другими тегами HTML.
Оглавление
- 1. HTML – Самоучитель для начинающих
- 2. HTML – Введение
- 3. HTML – Основные теги
- 4. HTML – Элементы
- 5. HTML – Атрибуты
- 6. HTML – Форматирование текста
- 7. HTML – Фразовые теги
- 29. HTML – Теги
- 41. Коды языков ISO
Структура html-документа
Язык HTML состоит из тегов. Каждый тег является элементом разметки гипертекста, и выполняет свою определенную функцию. Одни теги нужны для создания структуры html-документа, указания различной информации о веб-странице, другие – для форматирования и создания элементов на веб-странице, например, чтобы создать кнопку, необходим тег , а чтобы перенести текст на новую строку – тег
.
Теги бывают парными, например тег , и одиночными, например, тег
. Парные теги состоят из начального или открывающего тега, и конечного или закрывающего тега. Закрывающий тег записывается со слэшем.
Каркас html-документа
Название веб-страницы
Тип документа
В первой строке html-документа принято указывать тип документа. Делать это нужно обязательно, потому что существует несколько версий языка html, и у каждой есть свои правила и стандарты. Если браузеру не сообщить о версии HTML, то он не будет знать какому стандарту нужно следовать при отображении веб-страницы, что может привести к ее некорректному отображению.
При вёрстке веб-страниц мы будем использовать пятую версию языка – HTML5. Для этой версии тип документа записывается таким образом: .
Теги верхнего уровня
Каркас html-документа образуют теги верхнего уровня , и .
Теги и определяеют заголовок и тело html-документа.
Теги заголовка документа
В заголовке документа размещается различная информация о веб-странице: кодировка, название, описание, ключевые слова, пути к файлам со стилями, скриптами и т.д. Эта информация, кроме названия, на веб-странице не отображается.
Кодировка html-документа
Кодировку html-документа указывают при помощи тега и его атрибута charset .
Атрибуты тегов записываются как пара, состоящая из имени и значения. Значения атрибутов записываются в кавычках. У тега может быть несколько атрибутов, в этом случае они записываются через пробел.
В качестве значения атрибута charset , мы будем использовать кодировку utf-8, так как она включает в себя символы всех языковых групп.
Обратите внимание! Если вы указали в качестве кодировки веб-страницы значение utf-8, то и сохранить html-документ необходимо в этой кодировке.
Название html-документа
Название или заголовок html-документа записывается между тегами . Данный тег является обязательным, а также очень полезным как для пользователей, так и для самой веб-страницы.
Содержимое тега отображается:
- на вкладках веб-страниц
- в списке закладок
- в названии файла при сохранении веб-страницы на жесткий диск;
- в списке результатов поискового запроса на сайтах популярных поисковых систем (Google, Yandex) первыми отображаются сайты, содержащие слова вашего запроса именно в заголовке.
Теги тела документа
В теле документа можно размещать теги, предназначенные для разметки и форматирования содержимого веб-страницы. Все что будет записано в этом контейнере, отобразится на веб-странице в окне браузера. В следующих уроках мы приступим к изучению таких тегов.
Структура HTML файла
Типичный HTML файл представляет собой текстовый файл с набором тегов. Теги — это особые команды, которые помогают браузеру отображать страницу. Благодаря тегам браузер понимает, в каком месте текст должен быть выделен жирным или курсивом, какой заголовок будет у страницы и как отображать таблицу. Их содержание не будет отображаться на странице браузера.
Далее будут рассмотрены примеры содержания HTML файлов. Если вы не знаете, как создать HTML файл, то посмотрите статью «Как создать HTML файл».
Существует большое количество тегов, часть из которых мы постараемся разобрать в курсе.
Рассмотрим пример упрощённого HTML файла, страницы сайта:
Свойства страницы, правила отображения, стили, скрипты, подключаемые файлы Содержание страницы Всё, что написано латиницей и заключено в скобки — это теги. Разберём пример по сторкам:
— эта строчка говорит о том, что документ является html файлом. Следовательно, браузер сможет показать его как html страницу.
. — это парный тег (у него есть открывающая часть и закрывающая , которые различаются наличием слеша «/«). Внутри него заключено всё тело html документа.
. — всё, что находится внутри этого тега не выводится на экран. Но в нём содержится важная информация, которая поможет браузеру правильно показать страницу. К примеру, в этом теге могут находиться указание кодировки и языка страницы, правила отображения, стили и скрипты.
. — этот тег, внутри которого находится отображаемая область страницы.
Пример html страницы
Теперь разберём усложнённый пример html страницы, в котором будут добавлены несколько дополнительных тегов относительно предыдущего примера:
Про мышей
Тише, мыши, кот на крыше,
а котята ещё выше.
Кот пошёл за молоком,
а котята кувырком.
Кот пришёл без молока,
а котята ха-ха-ха. Относительно предыдущего примера в новом появилось несколько изменений: во второй строке стоит . У этого тега появился атрибут lang=»ru». Обратите внимание, что атрибут ставится внутри скобок тега . Как можно догадаться из названия, он указывает на то, что страница использует русский язык. Современные браузеры практически все могут безошибочно определить язык, поэтому в этом атрибуте нет особой необходимости, но привели его в качестве примера атрибута, которым может обладать тег.
Второе изменение касается содержания тега . . Здесь в первой строчке появилось указание на кодировку текста . Тег «meta» называется метатегом.
Если сохранить html файл с одной кодировкой, а в «meta» написать другую, то все буквы в документе будут отображаться браузером как непонятные значки.
В блоке . также появилась строчка
Внутри тега . появился текст стихотвориения. Каждая строчка этого стиха заканчивается на тег , который говорит браузеру о том, что должна начаться новая строка. Если убрать все теги , то браузер отобразит стихотворение как одну длинную строку без переносов. Обратите внимание, что тег не имеет закрывающей пары по аналогии с . или . .
Ради практики создайте файл на своём компьютере с любым названием и расширением «.html». К примеру, «page.html». Затем откройте его любым текстовым редактором и вставьте в него код из примера выше. Сохраните файл. Кликните на файл два раза и он откроется в браузере. Теперь измените что-либо в файле, сохраните и перезагрузите страницу в браузере.
Комментарии в HTML коде
Существует способ оставлять комментарии в HTML коде. Они могут быть полезными для разработчика. К примеру, комментарии о том, что необходимо доделать на сайте. Эти комментарии не видны обычным пользователям на странице браузера, но видны в HTML коде. Задать комментарий можно через такую конструкцию: . Пример комментариев: