- Структура HTML файла
- Пример html страницы
- Комментарии в HTML коде
- Разбираем HTML документ
- Заголовок статьи
- Тег — основа языка HTML
- Теги — начало и конец HTML-документа
- Заголовок статьи
- Теги и — голова и тело HTML-документа
- Заголовок статьи
- Теги — название HTML-страницы
- Заголовок статьи
- Теги и — заголовок и абзац статьи
- Заголовок статьи
- Обобщаем материал по структуре HTML-документа:
Структура HTML файла
Типичный HTML файл представляет собой текстовый файл с набором тегов. Теги — это особые команды, которые помогают браузеру отображать страницу. Благодаря тегам браузер понимает, в каком месте текст должен быть выделен жирным или курсивом, какой заголовок будет у страницы и как отображать таблицу. Их содержание не будет отображаться на странице браузера.
Далее будут рассмотрены примеры содержания HTML файлов. Если вы не знаете, как создать HTML файл, то посмотрите статью «Как создать HTML файл».
Существует большое количество тегов, часть из которых мы постараемся разобрать в курсе.
Рассмотрим пример упрощённого HTML файла, страницы сайта:
Свойства страницы, правила отображения, стили, скрипты, подключаемые файлы Содержание страницы Всё, что написано латиницей и заключено в скобки — это теги. Разберём пример по сторкам:
— эта строчка говорит о том, что документ является html файлом. Следовательно, браузер сможет показать его как html страницу.
. — это парный тег (у него есть открывающая часть и закрывающая , которые различаются наличием слеша «/«). Внутри него заключено всё тело html документа.
. — всё, что находится внутри этого тега не выводится на экран. Но в нём содержится важная информация, которая поможет браузеру правильно показать страницу. К примеру, в этом теге могут находиться указание кодировки и языка страницы, правила отображения, стили и скрипты.
. — этот тег, внутри которого находится отображаемая область страницы.
Пример html страницы
Теперь разберём усложнённый пример html страницы, в котором будут добавлены несколько дополнительных тегов относительно предыдущего примера:
Тише, мыши, кот на крыше,
а котята ещё выше.
Кот пошёл за молоком,
а котята кувырком.
Кот пришёл без молока,
а котята ха-ха-ха. Относительно предыдущего примера в новом появилось несколько изменений: во второй строке стоит . У этого тега появился атрибут lang=»ru». Обратите внимание, что атрибут ставится внутри скобок тега . Как можно догадаться из названия, он указывает на то, что страница использует русский язык. Современные браузеры практически все могут безошибочно определить язык, поэтому в этом атрибуте нет особой необходимости, но привели его в качестве примера атрибута, которым может обладать тег.
Второе изменение касается содержания тега . . Здесь в первой строчке появилось указание на кодировку текста . Тег «meta» называется метатегом.
Если сохранить html файл с одной кодировкой, а в «meta» написать другую, то все буквы в документе будут отображаться браузером как непонятные значки.
В блоке . также появилась строчка . Этот тег указывает, какой заголовок будет у страницы браузера (у вкладки).
Внутри тега . появился текст стихотвориения. Каждая строчка этого стиха заканчивается на тег , который говорит браузеру о том, что должна начаться новая строка. Если убрать все теги , то браузер отобразит стихотворение как одну длинную строку без переносов. Обратите внимание, что тег не имеет закрывающей пары по аналогии с . или . .
Ради практики создайте файл на своём компьютере с любым названием и расширением «.html». К примеру, «page.html». Затем откройте его любым текстовым редактором и вставьте в него код из примера выше. Сохраните файл. Кликните на файл два раза и он откроется в браузере. Теперь измените что-либо в файле, сохраните и перезагрузите страницу в браузере.
Комментарии в HTML коде
Существует способ оставлять комментарии в HTML коде. Они могут быть полезными для разработчика. К примеру, комментарии о том, что необходимо доделать на сайте. Эти комментарии не видны обычным пользователям на странице браузера, но видны в HTML коде. Задать комментарий можно через такую конструкцию: . Пример комментариев:
Разбираем HTML документ
Урок №3
Разбираем HTML код
Давайте разберём, что означает каждая часть нашего кода HTML-документа, введённого в Блокнот на прошлом уроке:
Заголовок статьи
Абзац статьи.
Но для начала узнаем, что такое HTML-тег или просто «тег»?
Тег — основа языка HTML
Основной частью языка HTML является — тег. HTML документ (как и весь html-код) и состоит и тегов. Тег содержит в себе имя и угловые скобки, которые расположены по бокам — :
— это один из множества, различных HTML-тегов, означает абзац.
Теги бывают открывающими и закрывающими. У закрывающих тегов перед именем стоит косая черта (слэш) /
— открывающий тег.
— закрывающий тег.
Между открывающим и закрывающим тегами, обычно располагается текст или другие теги.
У тегов разные имена и каждое имя означает какой либо элемент HTML-страницы: заголовок статьи , абзац (параграф) статьи , фотографию , ссылку , кнопку и т.п.
Рассмотрим другие теги используемые в нашем HTML коде.
Теги — начало и конец HTML-документа
Возвращаемся к нашему HTML документу:
Заголовок статьи
Абзац статьи.
Каждый HTML-документ начинается с открывающегося тега и заканчивается закрывающимся тегом
Теги и — голова и тело HTML-документа
Между тегами располагаются два блока.
1. Первый блок начинается и заканчивается тегами — их называют головой HTML-документа.
2. Второй блок начинается и заканчивается тегами — их называют телом HTML-документа.
Заголовок статьи
Абзац статьи.
1. — голова HTML-документа .
2. — тело HTML-документа , между этими тегами располагается основная информация страницы: заголовки , абзацы , фотографии , ссылки , кнопки и т.д.
Теги — название HTML-страницы
Заголовок статьи
Абзац статьи.
В голове между тегами , располагаются теги
. Между тегами помещают текст, который выступает в качестве названия страницы .
В нашем примере, между тегами , находится текст:
Название страницы
Текст помещённый между тегами появляется в двух местах, в виде названия окна браузера и в виде названия вкладки браузера:
Название страницы, которую вы сейчас читаете, содержит следующий текст:
Разбираем код HTML-документа. Выясняем что такое тег.
Теги и — заголовок и абзац статьи
Заголовок статьи
Абзац статьи.
В теле нашего HTML-документа, между тегами , располагаются два вида тегов:
— теги заголовока статьи,
— теги абзаца статьи.
— между этими тегами располагается текст, который является заголовком статьи.
Например, текст заголовока статьи, которую вы сейчас читаете содержит следующее:
Разбираем HTML код
— между этими тегами располагается текст, который является абзацем статьи.
Например, второй абзац статьи, которую вы сейчас читаете, содержит следующее:
Но для начала узнаем, что такое HTML-тег или просто «тег»?
Обобщаем материал по структуре HTML-документа:
Каждый HTML-документ начинается и заканчивается тегами Каждый HTML-документ состоит из двух блоков, головы и тела:
1. — голова HTML-документа,
2. — тело HTML-документа.
В голове HTML-документа между тегами , располагаются теги и некоторая служебная информация о странице (мета-теги) , которую мы изучим чуть позже.
В теле HTML-документа между тегами , располагается основной контент: тексты, изображения, формы, которые обрамлены тегами заголовков h1 , абзацев p , изображений img , ссылок a , кнопок input и т.д.