42
249 550 
© 2023, Качалова Александра Алексеевна 145 0
СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ
Благодаря готовым учебным материалам для работы в классе и дистанционно
Скидки до 50 % на комплекты
только до 22.06.2025
Готовые ключевые этапы урока всегда будут у вас под рукой
Организационный момент
Проверка знаний
Объяснение материала
Закрепление изученного
Итоги урока
HTML. Повторение всех тем.
Категория:
Прочее
03.12.2023 17:57
Просмотр содержимого документа
«HTML. Повторение всех тем.»
Структура документа HTML
Основные составляющие документа
Веб-страницы могут и будут отличаться друг от друга, но все они, преимущественно, состоят из аналогичных стандартных компонентов:
- Основное содержимое
- Заголовки (колонтитулы)
Большая область в центре страницы, содержащая, в основном, уникальный контент данной веб-страницы. Это одна из частей сайта, которая определённо будет меняться от страницы к странице!
Обычно это большая полоса вверху страницы, с крупным заголовком и / или логотипом. Здесь указывается общая информация о веб-сайте, не меняющаяся от страницы к странице.
- Боковая панель
- Навигационное меню
Как правило, содержит некоторую второстепенную информацию, ссылки, цитаты, рекламу и т.д.
Ссылки на основные разделы сайта; обычно в виде кнопок, ссылок или вкладок. Также как и заголовок, навигация остаётся неизменной на всех страницах сайта.
- Нижний колонтитул (футер)
Полоса в нижней части страницы, которая обычно содержит уведомления об авторских правах или контактную информацию.
Структура «типичного веб-сайта»
Структура веб-страницы
HTML-код , который пишут программисты – это всего лишь текстовый файл определенного формата, а DOM – результат действий браузера , который создает объекты при синтаксическом анализе текстовых файлов.
Имеем некую веб-страницу, состоящую из:
- Объявления стандарта HTML ;
- Тега ;
- Тега заголовков ( , включающего );
- Тела страницы, отображаемого пользователю (обозначен тегом ).
Такая структура web-документа является стандартной. Обязательно объявление доктайпа , наличие тега , внутри которого содержатся и .
Теги
Теги могут дополняться атрибутами, свойствами. С их помощью можно модифицировать содержимое элемента, уникализировать его.
Рассмотрим типичную структуру web-элемента:
- Открывающий тег (все теги представляются в угловых скобках, в открывающем, если требуется, перечисляются атрибуты);
- Закрывающий тег (присутствует не во всех тегах, идентифицируется косой чертой);
- Атрибут , свойство (название свойства и его значение предпочтительно в двойных кавычках, возможно использовать и одинарные);
- Содержимое (внутреннее содержимое тега, обычно в виде текста либо других вложенных тегов).
Теги верхнего уровня
Кроме информации, демонстрируемой непосредственно посетителю сайта, на нем обязана присутствовать и служебная . Она включает объявление доктайпа, заголовка, перечисление метасведений, ссылок на CSS- и JS-файлы и т.д.
Помимо объявления стандарта документа, типичная веб-страница включает еще 3 тега:
1. Тег Корневой тег, подразумевающий содержимое в качестве HTML-кода. Начинает любой веб-документ и заканчивает его. Может иметь глобальные атрибуты. Из глобальных атрибутов рекомендуется указывать lang, т.е. язык, который применяется для текста сайта.
2. Тег Блок кода, в который оборачивается заголовочная часть веб-страниц. Это контейнер с метаданными, т.е. информацией о самом документе, которые напрямую не отображаются в окне браузера. Особыми атрибутами не обладает, но может использовать глобальные при необходимости. Внутри обязательно наличие тега . Может также включать элементы: , , , , , .
3. Тег Основная часть кода HTML-страницы, так называемое тело документа. Все оставшиеся теги будут присутствовать здесь. Естественно, в документе может встречаться только один раз. Допустимо применение глобальных и событийных свойств.
HTML-элемент определяет основной адрес (URL), используемый для всех относительных адресов (URLs) в документе .
Комментарии
Особый тип данных, который встречается как в заголовочной части документа, так и в его теле. Код никак не обрабатывается браузером напрямую, но достаточно важен для разработчиков, так как позволяет включать пояснения, комментарии, уточнения.
Наличие комментариев в коде – хорошая практика, свидетельствующая о профессионализме верстальщика и его уважении коллег.
Заголовочные тэги
Заголовочная часть HTML-документа, оборачиваемая тегом , хоть и не видна пользователю, имеет важное значение. Она существенно расширяет возможности разработчиков и позволяет включать информацию для браузера для верной обработки кода.
3. Тег
Является одиночным элементом, но может присутствовать во многих экземплярах в документе. Определяет отношения между текущим файлом и внешними ресурсами.
4. Тег
Также одиночный тег, используемый для указания метаинформации о странице. Эти сведения используются браузером, поисковыми машинами или другими сервисами.
1. Тег
Необходим для отображения заголовка страницы. Его видно во вкладке окна. Контент – только текст. Для каждой страницы возможен только в единственном экземпляре
2. Тег
Применяется для указания информации о каскадных таблицах стилей. Когда этих стилей на сайте не так много, не обязательно их размещать в отдельном файле. Достаточно обернуть в этот тег.
Тело web-страницы
Работа с текстом
Так как огромная часть наполнения сайта – текст, то для работы с ним предусмотрено солидное количество тегов. Они могут носить как стилистический, так и семантический контекст.
Всего 6 видов заголовков - от h1 до h6 . Тегу h1 соответствует самый большой заголовок, тегу h6 - самый маленький. Закрывающий тег обязателен.
Тег
создает новый параграф.
Атрибуты:
align - Выравнивает параграф относительно одной из сторон документа.
left - выравнивание по правому краю.
right - выравнивание по правому краю.
center - выравнивание по центру.
justify - выравнивание по ширине.
title - Всплывающая подсказка.
Тэги для работы с текстом
1. Тег Как следует из именования, внутри тега приводится контактная информация. По умолчанию текст внутри тега выделяется курсивом.
2. Тег Делает текст жирным, но не несет семантической нагрузки. Используется для визуального эффекта. Тег является строчным, поэтому текст внутри не переносится на новую строку.
3. Тег
Выделяет текст жирным шрифтом. Рекомендуется использовать этот тег для выделения наиболее значимого ключевого слова/словосочетания для акцентирования на нем внимая посковых систем.
4. Тег
8. Тег
Добавляет в документ горизонтальную линию. Закрывающий тег не обязателен.
Делает надиндекс. X 2 = 4.
Атрибуты:
9. Тег
Выводит более мелкий , чем окружающий текст.
size - Устанавливает толщину линии.
width - Устанавливает ширину линии в пикселах или процентах.
10. Тег , тег
noshade - Создает линию без тени.
Выделяет текст курсивом.
color - Задает линии определенный цвет.
11. Тег
5. Тег
Делает текст зачеркнутым.
12. Тег , тег
Переводит текст на новую строку.
Выделяет текст моноширинным шрифтом.
6. Тег
Выводит более крупный текст .
13. Тег
Делает текст подчеркнутым.
7. Тег
Делает подиндекс. H 2 O.
16. Тег
Заставляет текст перемещаться из стороны в сторону.
Атрибуты:
behavior - Определяет вид движения.
alternate - Колебательные движения налево и направо.
scroll - Перемещение текста в направлении, указанном в direction. Достигнув края экрана, надпись появляется снова с противоположной стороны.
slide - Схоже с scroll, но текст перемещается только один раз и останавливается.
direction - Определяет направление движения.
down - Движение вниз.
left - Движение справа налево (по умолчанию).
right - Движение слева направо.
up - Движение вверх.
14. Тег
Определяет цвет, размер и выводимый шрифт. Закрывающий тег обязателен.
Атрибуты:
color - определяет цвет текста.
face - определяет гарнитуру шрифта.
size - определяет размер текста в пределах от 1 до 7. По умолчанию равен 3.
15. Тег
Определяет предварительно отформатированный блок текста. Это удобно, когда вы хотите отобразить текст, в котором типографское форматирование влияет на смысл содержимого, например фрагменты кода и стихотворения.
Ссылки
Понятие HTML включает так называемый гипертекст. Если текст ссылается на другую часть документа или иной ресурс, то его обозначают именно таким термином. Для обозначения ссылок используется ряд тегов.
1. Тэг Определяет гиперссылку. Имеет немало особых атрибутов (главный из которых – href ), поддерживает глобальные и событийные свойства. Поведение тега по умолчанию в современных браузерах следующее:
Не посещённая ссылка выделяется синим цветом и подчеркиванием
Посещенная ссылка – голубого цвета и подчеркнута
Активная ссылка – красная с подчеркиванием
Атрибуты
Атрибуты
download — если кликнуть по такой ссылке, браузер предложит пользователю скачать то, что по ней находится.
href — важнейший атрибут, содержащий адрес, по которому перейдёт пользователь, нажав на ссылку.
rel — обычно это очень техническая информация, которая нужна браузерам и разработчикам, чтобы определять, что находится по ссылке, и, в некоторых случаях, какое действие нужно выполнить сайту, который открывается по ссылке.
type — определяет, к какому типу относится документ по ссылке.
title — это глобальный атрибут, он содержит текст, который будет виден при наведении на ссылку.
- Абсолютная ссылка — это адрес ресурса целиком. Обычно такие ссылки ставят на сторонние ресурсы и надеются, что адрес не изменится.
- Относительные ссылки — то, куда ведут относительные ссылки, зависит от расположения текущей страницы.
- Якорные ссылки пригодятся, если нужно сослаться на определенное место документа — например, на заголовок. Для этого заголовку нужно установить определенный атрибут id, а в ссылке через # дописать этот атрибут в конце.
Используйте этот атрибут, только если указан href.
Вместе с атрибутом target обязательно используйте rel="noopener noreferrer" , чтобы в момент открытия внешние сайты не узнали лишнего про текущую страницу.
Атрибуты
target — определяет, где откроется ссылка: в том же окне, в новой вкладке или в новом окне браузера. Без этого атрибута содержимое ссылки откроется в той же вкладке. Вот все варианты, где можно открыть URL-ссылку:
_ self : на той же странице. Значение по умолчанию.
_blank : в новой вкладке или в новом окне браузера.
_parent : на родительской странице от текущей, то есть уровнем вложенности выше.
_top : в самой высокой «корневой» странице.
Ссылки
2. Тэг Этот тег сам по себе не является ссылкой, но служит оберткой для главного меню сайта (элементы которого уже являются ссылками). Обычно применяется в единственном экземпляре на странице. Относится к блочным тегам.
Рисунки и мультимедиа
Современный сайт вдоволь наполнен картинками, аудио- и видео-данными, так как ограничения трафика и медленный Интернет для большинства пользователей – давно забытое явление.
1. Тэг
Любое изображение растрового формата на сайте обозначается тегом . Рекомендуется применять его с атрибутами src (тут указывается адрес фотографии) и alt (на случай невозможности отобразить картинку выведется текст).
Рисунки и мультимедиа
Логотип Яндекса на светлом фоне
2. Тэг Более семантически грамотный способ обозначать иллюстрации на странице. Мы не просто задаем адрес изображения, но и подпись к нему (и сообщаем тем самым, что эта надпись относится к данной картинке). Внутри себя содержит теги и .
Рисунки и мультимедиа
3. Тэг Более гибкая настройка отображения картинок. Позволяет не просто шкалировать рисунки в зависимости от используемого девайса или ширины экрана, но и отображать разные фото (по качеству, содержанию). Для этого применяют дополнительно теги , .
4. Тэг Новый тег, появившийся в HTML5 . Используется для внедрения на сайт видео-содержимого. Внутри включает элементы , используемые для роликов разных форматов. Всего их поддерживается 3: MP4 , WebM , и OGG .
Списки
Для более наглядного восприятия информации ее принято делить на списки, которые могут быть нумерованными или ненумерованными. HTML позволяет их создавать при помощи набора тегов:
- ,
- , , , .
1. Нумерованные списки
2. Ненумерованные списки
Представляют собой перечисление элементов порядковыми значениями.
В качестве маркеров (
- ) используются специальные значки.
- отображает отдельные элементы списка.
- показывает, что список нумерованный. Атрибуты: reversed (обратный порядок нумерации);
По умолчанию в роли маркеров используются закрашенные диски. Изменить тип маркера можно через CSS (вплоть до своих собственных рисунков) либо через атрибут type ( type="circle" - выведет окружности, type="square" - делает квадратные маркеры).
start (начали с последней буквы английского алфавита);
type – указали, что в качестве номеров будут использоваться буквы в нижнем регистре.
3. Списки с определениями Особый тип списков, в которых содержатся термины и их трактовка. Удобно применять при формировании толкового словаря терминов.
Таблицы
Для построения таблиц применяются соответствующие теги:
При помощи свойств rowspan и colspan у тегов , ячейки таблиц можно объединять
1. Тэг
(содержимое таблицы), 2.Тэги (заголовок), (основная часть), 4. Тэг (строка таблицы), 5. Тэги (колонка таблицы), (группировка колонок) 6. Тэг(заглавная ячейка), (группирование заголовочной части таблицы) 3. Тэг (ячейка), 7. Тэг (итоговое содержимое). 
Формы и поля ввода
Форма является интерактивным элементом, так как позволяет пользователю вводить некоторые данные и отправлять их на сервер.
Формы оборачиваются тегом , внутри которого возможно наличие элементов: 1. Тэг (после ввода), 2. Тэг (текстовое поле для ввода длинного текста), 3. Тэг (кнопка), 4. Тэг (меню опций), 5. Тэг (определенная опция), 6. Тэг (группирование опций),
8. Тэг (подпись элемента), 9. Тэг (поле для результатов вычисления в ответ на действия пользователя), 10. Тэг (заголовок для содержимого тега ), 11. Тэг (набор опций для выбора в поле ввода со свойством list ).
7. Тэг (группирование части формы),
В теге указывают адрес скрипта, который обрабатывает результат заполнения формы, а также метод отправки данных ( GET или POST ).
Пример – HTML Формы
Стили и семантика
Теги данной категории несут в себе некий смысл, понятный разработчикам, роботам, браузерам, но не посетителям сайта. Они даже не заметят, что на сайте имеется логическая верстка.
1. Тэги и Это два нейтральных тега, не имеющие смысловой нагрузки. Основная задача – соединить определенный контент в единое целое.
3. Тэг Данным элементом выделяют обособленную часть страницы, имеющую законченную мысль. В отличие от (который является самостоятельным и независимым) подразумевает логический раздел документа.
2. Тэг Предназначается для данных, которые пользователь может раскрывать или прятать. Это удобно в случае дополнительных пояснений, наличия необязательной информации, которую можно пропустить. Применяется в совокупности с тегом .
Вебинар для учителей
Свидетельство об участии БЕСПЛАТНО!
Полезное для учителя
Реализация образовательных программ осуществляется с применением исключительно электронного обучения и ДОТ
Тег
- отображает отдельные элементы списка.
- ,
