HTML/Введение
HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — общепринятый стандартный язык разметки веб-страниц.
HTML указывает веб-браузеру на то, как веб-страницы должны быть показаны пользователю.
HTML является статическим языком и это означает, что он не может обработать (или изменить содержание на веб-странице) ввод данных пользователем.
- То, что мы видим на экране монитора при просмотре веб-страницы, называется графическим представлением веб-страницы.
- Графическое представление веб-страницы формирует веб-браузер путём преобразования исходного кода веб-страницы.
- Веб-браузер получает исходный код веб-страницы от веб-сервера в виде текста.
- Исходный код веб-страницы представляет собой текст, который можно просматривать и редактировать в любом текстовом редакторе.
- Исходный код веб-страницы состоит из списка элементов, с возможным вложением друг в друга.
- Элемент состоит из начального тега, содержимого элемента и конечного тега.
Элемент <html> [ править ]
- Базовым элементом веб-страницы является элемент <html> .
- Начальный тег — <html> , конечный тег — </html> .
- Внутри этого элемента располагаются все остальные элементы.
- Теги элемента <html> указывают веб-браузеру на начало и конец обрабатываемого исходного кода веб-страницы.
Элемент <head> [ править ]
- Элемент <head> содержит различную техническую информацию о веб-странице, например название, ключевые слова, метаданные.
- Начальный тег — <head> , конечный тег — </head> .
Элемент <title> [ править ]
- Элемент <title> содержит название веб-страницы, для идентификации её содержимого.
- Начальный тег — <title> , конечный тег — </title> .
- Элемент <title> должен находится в контейнере <head> .
Элемент <body> [ править ]
- Элемент <body> содержит все основные элементы отображаемой веб-страницы: текст, изображения, цвета, графика.
- Начальный тег — <body> , конечный тег — </body> .
Пример №1 [ править ]
Пример простейшей веб-страницы:
Использование примера [ править ]
Для использования примера №1 на практике создайте в любом текстовом редакторе файл с расширением .htmll или .htm, например «index.htmll». Затем скопируйте текст примера в этот файл и сохраните изменения. После этого откройте созданный файл любым веб-браузером.
Задание №1 [ править ]
Задания предназначены для проверки усвоенного материала и для практики. Как было написано в аннотации к курсу, Вы будете разрабатывать собственный сайт.
- На своём компьютере создайте файл index.html. Создайте в нём HTML-разметку, включив все обязательные теги.
- Cоздайте аккаунт на одном из бесплатных хостингов или можете приобрести какой-нибудь дешёвый платный хостинг (также возможно установить набор Денвер, разворачивающий на вашем компьютере локальный сервер, но тогда другие люди не смогут зайти на ваш сайт) [1] .
- Получите бесплатное доменное имя для будущего сайта. Доменное имя должно включать в себя Ваш ник в Викиверситете [2] .
- Обычно вместе с именем сайта создаётся и шаблонное содержимое или устанавливается CMS. Нам нужно начинать с чистого листа. Удалите шаблонное содержимое или CMS. Загрузите свой созданный файл index.html на свой сайт и проверьте доступность.
- Придумайте интересную тему для своего сайта. [3] В теле HTML-файла напишите вступительный текст для главной страницы сайта. Пока что в браузере текст отобразится без форматирования. Этим мы займёмся позже.
- Разместите ссылку на Ваш сайт и тему будущего сайта на странице Основы создания сайтов в разделе Студенты. Размещайте в таблице «Ведомость успеваемости» информацию, задания каких уроков вы считаете выполненными.
Задания должны присутствовать внутри каждого урока по HTML. Пока что это не так, — спрашивайте задания на страницах обсуждения уроков.
HTML5 шпаргалка
Элемент <head> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера <head> находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем.
*-закрывающий тег не требуется.
Элементы тега <body>
HTML тег <body> определяет содержимое (контент) HTML-документа, которое отображается в окне браузера (текст, ссылки, картинки (изображения), таблицы, списки и т.д.). Он должен быть единственным в документе и всегда должен располагаться внутри элемента <html> , сразу после элемента <head> .
Теги документа
| Тег | Описание | Атрибуты |
|---|---|---|
| <body> | Cодержит все содержимое HTML-документа, например текст, гиперссылки, изображения, таблицы, списки и т. д. | Универсальные атрибуты и события |
| <article> | Применяется для обозначения раздела страницы, содержащего завершенную, независимую композицию. Данный элемент может содержать в себе такую информацию как запись блога, товар в интернет-магазине, пост на форуме, газетная статья, любой другой независимый элемент содержимого или просто основной текст страницы. | Универсальные атрибуты и события |
| <aside> | Определяет блок сбоку от контента для размещения рубрик, ссылок на архив, меток и другой информации. Такой блок, как правило, называется «сайдбар» или «боковая панель». | Универсальные атрибуты и события |
| <address> | Предназначен для хранения информации об авторе и может включать в себя любые элементы HTML вроде ссылок, текста, выделений и т.д. Планируется, что поисковые системы будут анализировать содержимое этого тега для сбора информации об авторах сайтов. | Универсальные атрибуты и события |
| <section> | Содержит элементы, сгруппированные по темам.Применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др. Раздел обычно содержит заголовок. Допускается вкладывать один тег <section> внутрь другого. | Универсальные атрибуты и события |
| <header> | Задает «шапку» сайта или раздела, в которой обычно располагается заголовок. | Универсальные атрибуты и события |
| <nav> | Задаёт навигацию по сайту. Если на странице несколько блоков ссылок, то в <nav> обычно помещают приоритетные ссылки. Также допустимо использовать несколько <nav> в документе. Запрещается вкладывать <nav> внутрь <address>. | Универсальные атрибуты и события |
| <footer> | Задаёт «подвал» сайта или раздела веб-страницы, в нём может располагаться имя автора, дата документа, контактная и правовая информация. <footer> нельзя вкладывать внутрь другого <footer>, а также внутрь элементов <address> и <header>. Внутри <footer> не должно быть элемента <main>. | Универсальные атрибуты и события |
| <hgroup> | Используется для группирования заголовков веб-страницы или раздела. Внутри располагаются теги заголовков от <h1> до <h6>. | Универсальные атрибуты и события |
| <h1> .. <h6> | Заголовок для текущего раздела. | Универсальные атрибуты и события |
| <!— —> | Добавляет комментарий в код документа. | нет |
<address> — блочный элемент. Блочные элементы занимают всю ширину своего родителя (контейнера), формально создавая «блок».
Теги группировки, списки
* — закрывающий тег не требуется.
<address> — блочный элемент. Блочные элементы занимают всю ширину своего родителя (контейнера), формально создавая «блок».
<br> — строчный элемент. Используются для разметки частей содержимого элементов. Ширина строчного элемента равна объему содержимого.
Теги табличных данных
* — закрывающий тег не требуется.
Теги создания форм
* — закрывающий тег не требуется.
Интерактивные элементы
* — закрывающий тег не требуется.
Семантика и форматирование текста
* — закрывающий тег не требуется.
<br> — строчный элемент. Используются для разметки частей содержимого элементов. Ширина строчного элемента равна объему содержимого.
Какие теги определяют структуру html страницы
От автора: приветствую вас на блоге webformyself. Язык html, как и многие другие вещи в нашей жизни, имеет определенную структуру. В нашем случае ее закладывают специальные команды. Какие теги определяют структуру html страницы и где их нужно прописывать? Об этом я постараюсь рассказать сегодня.
Теги структуры документа html
Любой, абсолютно любой html документ имеет какие-то одинаковые фрагменты. Количество заголовоков, абзацев и списков на веб-страницах может быть разным, но есть определенные теги, которые обязательно присутствуют в исходном коде любого сайта.
<!DOCTYPE> — с этого указания начинается любой html-файл. Этот фрагмент кода используется для указания типа документа. Зачем это нужно? Дело в том, что существует несколько версий языка html, также есть его модификация. Указав доктайп, вы помогаете браузеру точно определить тип и интерпретировать код без ошибок.
Ранее значения этого параметра были очень длинными и непонятными. Сегодня все упростилось и для работы с современной версией языка нужно использовать такую строку:
Изучите Веб-вёрстку с нуля
Если вы мечтаете создавать сайты, но не знаете, с чего начать. Хотите глубоко погрузиться в основы веб-разработки, а не просто пройтись по верхам — этот курс для вас!
Все, тип документа указан и можно двигаться дальше.
<html> — главный элемент-контейнер на странице, в который помещаются теги заголовка и тела страницы. Он парный и закрывается в самом-самом конце документа.
<head> — парный тег, содержащий очень важную информацию для работы веб-страницы, однако его содержимое никак не выводится на нее. В этом контейнере записывается заголовок страницы, возможно, метатеги, кодировка, подключение внешних файлов, таких, как таблицы стилей и скрипты. Вот пример того, как в head записывается кодировка:
Кодировка сама по себе непосредственно никак не отображается на веб-странице и все же она играет большую роль. Если она не будет задана явно, то могут возникнуть ошибки при открытии в разных браузерах, а чтение может оказаться невозможным.
<body> — с точки зрения объема можно сказать, что этот блок включает в себя больше всего информации, потому что именно в нем формируется тело страницы. Это непосредственно то, что будет выведено на экран.
Рис. 1. Это типичный пример обязательных тегов, которые формируют структуру документа.
Поскольку мы дошли до тела страницы, дальше я бы хотел описать несколько тегов, которые формируют уже непосредственно видимую структуру, то есть те элементы, которые мы видим на странице и которые отделяют информацию друг от друга.
<h1> — <h6> — очень важные парные теги заголовков, которые выводятся на веб-страницу. Как правило, в h1 заключают название статьи или другой публикации, в h2 – подзаголовки, в h3 – подзаголовки подзаголовков и т.д. В крупном документе действительно могут понадобиться все эти теги.
Заголовок выводится как блочный элемент и имеет отступы сверху и снизу. Большие тексты рекомендуется разбивать на множество подзаголовков, потому что таким образом у читателя улучшается восприятие материала. Также заголовок имеет важную функцию в плане оптимизации сайта под требования поисковых систем. Ключевое слово в заголовке и подзаголовках улучшает ревелантность страницы.
<p> — формирует абзац (параграф) текста. Также очень важный элемент. Едва ли кто-то захочет читать сплошной текст, никак не разделенный на абзацы, верно?
Абзац также имеет небольшие отступы. В визуальных редакторах систем управления сайтом этот тег может проставляться автоматически всякий раз, когда вы делаете два переноса строки.
Выше были описаны, пожалуй, самые основные теги, которые отвечают за структуру. Они есть у любой веб-странички. Но как вообще формируется тег и что в него входит?
Урок 3. HTML: Структура страницы, DOM-дерево, применение тэгов
1. Структура веб-страницы и DOM-модель
2. Основные понятия DOM
3. Теги верхнего уровня: <html>, <head>, <body>
4. Заголовок. Тэги.
- Open Graph Protocol
- Resource Description Framework
- RSS
- Работа с текстом
- Ссылки
- Рисунки и мультимедиа
- Списки
- Таблицы
- Формы и поля ввода
- Фреймы
- Стили и семантика
- Программирование
Код, который можно обнаружить в Инструментах разработчика ( Developer Tools ) любого веб-браузера не обязательно показывает исходный HTML-документ . Современная разработка сайтов – процесс сложный и многоуровневый. Программисты работают не только с HTML , CSS или JavaScript в рамках нескольких отдельных файлов. Сегодня их применяется огромное множество. На продакшене (окончательной публикации сайта в сеть) интернет-сервис, состоящий из большого количества документов, объединяется воедино. Зачастую применяются и другие языки программирования: Java , Python , С# . Они могут генерировать куски HTML-кода , складывающиеся при запросе той или иной страницы.
- Соединения разных документов ( HTML , CSS и скриптов) в единую структуру;
- Генерации тегов языками программирования и их фреймворками ( Python и Django , JavaScript и Angular );
- Обращения к данным из некоторой базы (реляционной или NoSQL );
- Воздействия Javascript и AJAX-технологии (позволяет динамически подгружать элементы сайта);
- Работы браузера по построению дерева документа.
Другими словами, непосредственно сам документ в виде HTML браузер не показывают в исходном виде. Сначала идет запрос к серверу, а полученный ответ разбирается для построения дерева страницы или DOM-дерева . Схема такова:
1. Сервер создает HTML-код страницы или отдает его (если это простой статический сайт);
2. Браузер получает код и разбирает на элементы дерева;
3. При необходимости подключается JavaScript , если он используется, чтобы изменить поведение тегов и их содержимого в зависимости от воздействий пользователя;
4. DOM-дерево отображается во вкладке браузера в том виде, который задуман разработчиками.
Благодаря W3-консорциуму выработан единый стандарт построения и разбора содержимого веб-страницы. До этого разные браузеры действовали по-своему, что создавало массу неудобств разработчикам. Ознакомиться с актуальным DOM-стандартом можно на официальном сайте.
- Дерево (веб-страница может быть представлена как иерархическое перевернутое дерево, начинающееся с главного элемента и расширяющееся к низу. У каждого объекта дерева есть родитель, который может быть пустым, т.е. null , и дети, если он находится не в самом низу);
- Наследник (любой дочерний элемент узла дерева. Наследник может быть инклюзивным, т.е. не прямым. Пример: у тега <html> есть дочерний элемент <body> , внутри которого содержится элемент <article> , тогда тег <article> это не прямой наследник <html> );
- Предок (если у объекта DOM-дерева есть потомки, то для них он является предком. Здесь также возможна инклюзивность. Из примера выше у тега <article> есть прямой предок – тег <body> , а также инклюзивный родитель – тег <html> );
- Братья / сестры (в стандарте используется термин sibling , что с английского переводится как родной брат или сестра. Так объект подразумевает наличие у него «соседей», стоящих на там же уровне дерева и единого предка, не являющегося пустым);
- События (к объектам дерева можно применять разные события при помощи JavaScript . Они могут срабатывать на действия пользователя или сетевую активность. Так, при наведении мыши, клике, нажатии клавиши или обрыве связи возможно разное поведение всего сайта или его элементов);
- Узел (все элементы DOM-дерева являются узлами, нодами, nodes . Их можно создавать, изменять, вызывать свойства и методы с помощью JS ).
- Объявления стандартаHTML (в нашем случае доктайп свидетельствует об использовании HTML5 );
- Тега<html> (все заключенное между ним будет воспринято как язык разметки);
- Тега заголовков ( <head> , включающего <title> , внутри которого текст);
- Тела страницы, отображаемого пользователю (обозначен тегом <body> ). Здесь мы видим только один HTML-элемент – тег <span> с некоторым текстовым содержимым.
Означенное выше наследование элементов представляется браузером как дерево.
- Узел <html> является родителем для <body> и <head> , а также инклюзивным родителем для, например, <span> и текста Изучаем HTML ;
- Узел <title> имеет наследника, т.е. текст HTML , а также прямого родителя в виде <head> ;
- Узлы <body> и <head> относятся к классу родственников (братья или сестры), так как расположены на одном уровне DOM-дерева и имеют общего предка <html> .
Все это объясняется так: современные браузеры сами дорисовывают отсутствующие элементы. Доказать это просто: создайте любой файл с расширением .html , напишите в нем Моя первая, а потому никакая web-страница . Да, вообще не помещайте никаких тегов, просто текст!
Если открыть данный документ в браузере, никаких ошибок не появится: вы увидите свое сообщение. Просмотр кода покажет, что программа дописала отсутствующие элементы.
Конечно так делать не нужно, ведь если неправильно оформлять код страниц, то и называть себя веб-разработчиком не стоит. Тем более разные браузеры могут повести себя по-разному.
3.1. Переходный / строгий <!DOCTYPE>
Как говорилось ранее, доктайп задает стандарт, в котором создана веб-страница, чтобы браузерам было проще распарсить содержимое и построить DOM-дерево . На текущее время можно встретить 3 типа:
1. HTML5: <!DOCTYPE html>
2. HTML4: < !DOCTYPE . «http://www.w3.org/TR/html4/loose.dtd»>
3. XHTML: < !DOCTYPE . «http://www.w3.org/TR/. /xhtml11.dtd»>
Самым популярным и функциональным является первый вид ( HTML5 ), но встречаются и остальные.
3.2. Корневые элементы
Помимо объявления стандарта документа, типичная веб-страница включает еще 3 тега:
1. Тэг <html>
Корневой тег, подразумевающий содержимое в качестве HTML-кода . Начинает любой веб-документ и заканчивает его. Может иметь глобальные атрибуты. Также включает в себя при необходимости уникальное свойство xmlns , если ваша страница обязана следовать стандарту XHTML . Из глобальных атрибутов рекомендуется указывать lang , т.е. язык, который применяется для текста сайта.
В примере мы задали в качестве языка документа русский и xml пространство имен. Валидатор не будет ругаться, если вы опустите xmlns свойство, так как оно по умолчанию включается в XHTML .
2. Тэг <head>
Блок кода, в который оборачивается заголовочная часть веб-страниц. Это контейнер с метаданными, т.е. информацией о самом документе, которые напрямую не отображаются в окне браузера. Особыми атрибутами не обладает, но может использовать глобальные при необходимости. Внутри обязательно наличие тега <title> . Может также включать элементы: <style>, <base>, <link>, <meta>, <script>, <noscript> .
3. Тэг <body>
Основная часть кода HTML-страницы , так называемое тело документа. Все оставшиеся теги будут присутствовать здесь. Естественно, в документе может встречаться только один раз. Допустимо применение глобальных и событийных свойств.
3.3. Комментарии
Итак, заголовочная часть HTML-документа , оборачиваемая тегом <head> , хоть и не видна пользователю, имеет важное значение. Она существенно расширяет возможности разработчиков и позволяет включать информацию для браузера для верной обработки кода. Охарактеризуем эти элементы.
1. Тэг <title>
Необходим для отображения заголовка страницы. Его видно во вкладке окна. Контент – только текст. Содержимое заголовка важно для SEO , оптимизации поиска роботами вашего сайта. Для каждой страницы возможен только в единственном экземпляре.
Может включать глобальные атрибуты. Должен отражать суть страницы (используется при показе в результатах поиска Яндексом, Google’ом и др.) и не быть очень длинным (так как не поместится во вкладке).
2. Тэг <style>
Применяется для указания информации о каскадных таблицах стилей. Когда этих стилей на сайте не так много, не обязательно их размещать в отдельном файле. Достаточно обернуть в этот тег.
Содержимое страницы модифицируется: все заголовки <h1> станут коричневыми, а любой другой текст тела документа будет зеленым. Пока не будем углубляться в CSS свойства, так как мы их еще не проходили.
При необходимости включает атрибуты: media (указывает на тип устройства, для которого предназначаются эти свойства) и type (со значением text/css ).
3. Тэг <base>
Данный тег является одиночным и необходим для указания основного адреса сайта. Все относительные ссылки внутри портала будут отталкиваться от этого корня.
Тут мы уточняем, что корневым адресом для остальных относительных ссылок на сайте будет https://smartiqa.ru/, и все они будут открываться в новой странице.
4. Тэг <link>
Является одиночным элементом, но может присутствовать во многих экземплярах в документе. Определяет отношения между текущим файлом и внешними ресурсами. Необходим для указания ссылок на CSS-документы , шрифты, фавикон.
5. Тэг <meta>
Также одиночный тег, используемый для указания метаинформации о странице. Эти сведения используются браузером, поисковыми машинами или другими сервисами. Зачастую игнорируется начинающими разработчиками, но в руках умелых специалистов творит чудеса.
6. Тэг <script>
Данный тег применим не только в заголовочной части страницы, но и в любом другом месте (в зависимости от задачи). Содержит JavaScript код или ссылки на js-скрипты .
Когда нужно, чтобы скрипт сработал с самого начала загрузки сайта, то его включают в заголовочную часть. Если же требуется его функционал после полной загрузки страницы, обычно помещается в самом конце тега <body> (есть и другие способы, но о них в теме по JS ).
Первый тег <script> говорит о том, что сайт использует фреймворк jQuery , а во втором случае мы обернули им просто код на языке JavaScript , который выводит в консоли инструментов разработчика в браузере обозначенный текст.
7. Тэг <noscript>
Не всегда браузеры поддерживают JavaScript (особенно старые версии), либо эта опция отключена. Чтобы не ломать функционал сайта заботятся и о таких посетителях: их либо предупреждают об ограниченных возможностях, либо просят обновить программу, либо убеждают включить опцию поддержки JS .