§ 5.2. Структура Web-страницы

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

Пример:

…

— парные

— одиночный

Закрывающий тэг содержит прямой слэш / перед обозначением. Тэги могут записываться как прописными, так и строчными буквами.

Пример написания ссылки на языке HTML

HTML-код страницы помещается внутрь контейнера html

CONTENT 

Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страница разделяется на две логические части: заголовок и содержание.

Заголовок Web-страницы заключается в контейнер … и содержит название страницы и справочную информацию о странице (например, тип кодировки), которая используется браузером для ее правильного отображения.

Название страницы помещается в контейнер и при просмотре отображается в верхней строке окна браузера.

Отображаемое в браузере содержание страницы помещается в контейнер …

Минимальный пример страницы

    Содержимое страницы  

Созданную Web-страницу необходимо сохранить в виде файла под именем index.html . Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке.

Необходимо различать имя файла index.html , под которым Web-страница хранится в файловой системе, и имя Web-страницы, например «Компьютер», которое высвечивается в верхней строке окна браузера. Имя Web-страницы должно соответствовать ее содержанию, так как оно в первую очередь анализируется поисковыми системами.

Контрольные вопросы#

1. Какие тэги (контейнеры) должны присутствовать в HTML-документе обязательно? Какова логическая структура Web-страницы?

Дополнительная литература#

© Денис Хананеин, Интерактивный учебник по информационно-коммуникационным технологиям Powered by Hugo & PaperMod

Таблица основных тегов html с примерами

HTML — язык разметки, который используется в большинстве веб-страниц. Браузер интерпретирует его значения (теги) и отображает текст и элементы так, как их представляли разработчики. Без стандартизированного языка страницы сайта превращались бы в мешанину из букв, картинок и форм, которой невозможно нормально пользоваться.

Несмотря на то, что сейчас можно создавать отличные сайты на конструкторах в визуальном режиме, использование языка HTML остаётся важным навыком разработчика. Даже если вы не пишете шаблон с нуля, может возникнуть необходимость отредактировать его или вставить виджет стороннего сервиса — через HTML-код.

HTML позволяет форматировать страницы, придавая им необходимый вид. Если такой задачи нет, то знание тегов поможет отредактировать код встраиваемого виджета. Понимая структуру HTML, вы, например, можете быстро изменить размер видео или виджета и другие особенности его отображения.

Базовые теги

— тег для добавления комментариев в документ. Помещённые внутри него теги не интерпретируются браузером.

— показывает браузеру тип документа, сообщает его версию и язык.

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

— контейнер, в который помещаются метаданные документа, не видимые пользователям, но считываемые поисковыми роботами: например, или .

— тег для оформления метаданных документа, используемых браузером для обработки страницы, а поисковиками — для индексации.

— тег, обрамляющий видимую пользователям часть документа. Всё, что вы укажите внутри этого контейнера, отобразится на странице. Тег имеет несколько атрибутов, позволяющих управлять цветами.

— цвет фона документа в формате RGB.

— цвет гиперссылок, по которым уже переходили.

— цвет гиперссылок при нажатии.

— метатег, который задаёт название страницы, отображаемое на вкладке браузера.

— определяет содержимое блока с вводной информацией сайта или группой ссылок.

Форматирование текста

. . — теги заголовков, от самого большого к самому маленькому.

— жирный текст без придания важности выделенному фрагменту.

— расставление акцентов в тексте путём выделения его фрагментов полужирным начертанием.

— выделение текста курсивом без придания важности.

— зачёркивает текст, помечая его удалённым.

— отображает перечёркнутый текст.

— подчёркивает текст, визуально выделяя внесённые изменения.

— подчёркивание без дополнительного акцентирования внимания.

— расставление акцентов путём выделения фрагментов текста курсивом.

— выделение частей текста жёлтым маркером.

— имитация текста, набранного на печатной машинке.

— отображение фрагмента с меньшим кеглем шрифта, чем у остального текста.

— подстрочное начертание символов.

— надстрочное начертание символов.

— добавление контактов или подписи автора. При открытии в вею-браузере выделяется курсивом.

— вывод неформатированного текста с сохранением пробелов и особенностей переносов.

— контейнер для абзаца.

— переносит текст на другую строку без создания абзаца.

— отступы с обеих сторон для оформления цитаты или врезки.

— контейнер для размещения термина и его определения.

— добавление определения понятия

— выделение термина курсивом. Последующий текст должен раскрывать понятие.

— указывает, что текст является аббревиатурой или акронимом. Для добавления пояснения используется атрибут title.

— список с цифрами.

— список со значками.

— добавление гиперссылки в текст. Имеет обязательный атрибут href, в котором указывается ссылка или якорь. Внутри контейнера помещается текст, при нажатии на который происходит переход на другую страницу или другое место на этой же странице.

— выделение фрагмента кода с помощью шрифта monospace.

Встраивание элементов

— вставка изображения. Имеет атрибут src, который указывает на адрес нужного файла. Есть и другие атрибуты:

— выравнивание к одной из сторон документа. Например, значение right переместит рисунок в правый край, а left — в левый.

— позволяет настроить в пикселях толщину рамки вокруг изображения.

— контейнер для расположения элемента без , который даёт браузеру возможность самостоятельно выбрать подходящую картинку.

— вставка звукового контента.

— вставка видео (поддерживается Ogg, WebM и MP4).

— указывает местоположение файла для , и

— контейнер, через который встраиваются мультимедийные файлы. Для передачи параметров применяется тег .

---

— размещает на странице горизонтальную линию. Имеет несколько атрибутов.

---

— устанавливает высоту линии.

---

— устанавливает ширину линии.

---

— убирает тень у линии.

— определяет выполнение сценария на стороне посетителя сайта. Может содержать сам скрипт или иметь ссылку на внешний источник.

— ограничивает фрагмент документа, в котором скрипт не выполняется.

Работа с таблицами

— размещает таблицу. Все остальные теги для форматирования таблиц должны находиться внутри это контейнера.

— отмечает тело таблицы.

— создаёт одну ячейку.

— указывает на заголовок ячейки.

— показывает нижний колонтитул.

— позволяет указать ширину и другие параметры одной или нескольких колонок.

Создание форм и кнопок

— создание форм на странице. С помощью HTML описывается только внешний вид, для выполнения функций требуется запуск соответствующих скриптов на сервере.

— создаёт интерактивную кнопку. Внутри контейнера нужно поместить текст или изображение.

— формирует меню с поддержкой скроллинга.

— создаёт ниспадающее меню.

— описывает каждый отдельный пункт меню.

— формирует поля для добавления пользовательских данных.

— выводит результаты вычислений, сделанных с помощью скрипта.

— оформляет пометку для поля, созданного тегом .

— создаёт большие поля для ввода текста.

В какой контейнер помещается отображаемое в браузере содержимое страницы

Элемент предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера . К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.

Тег также применяется для определения цветов ссылок и текста на веб-странице. Подобная практика в HTML 4 осуждается и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору BODY . Тем не менее, большинство атрибутов до сих пор поддерживается разными браузерами.

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

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

Синтаксис

Атрибуты

alink Устанавливает цвет активной ссылки. background Задает фоновый рисунок на веб-странице. bgcolor Цвет фона веб-страницы. bgproperties Определяет, прокручивать фон совместно с текстом или нет. bottommargin Отступ от нижнего края окна браузера до контента. leftmargin Отступ по горизонтали от левого края окна браузера до контента. link Цвет ссылок на веб-странице. rightmargin Отступ от правого края окна браузера до контента. scroll Устанавливает, отображать полосы прокрутки или нет. text Цвет текста в документе. topmargin Отступ от верхнего края окна браузера до контента. vlink Цвет посещенных ссылок.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Открывающий и закрывающий теги не обязательны.

HTML5 IE Cr Op Sa Fx

    
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
 
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  

Результат текущего примера показан на рис. 1. При использовании события onload тега выполняется скрипт, написанный на языке JavaScript, в данном случае он выводит сообщение, что документ загружен.

Рис. 1. Всплывающее окно в документе

Статьи по теме

• Структура HTML-кода
• Структура XHTML-документа
• Теги верхнего уровня
• Цвет ссылок

Web-страницы и Web-сайты. Структура Web-страницы

1. Web-страницы и Web-сайты. Структура Web-страницы

Web-страницы и
Web-сайты.
Структура Webстраницы

2.

Web-страницы создаются с
использованием языка разметки
гипертекстовых документов HTML
(Hyper Text Markup Language).
В обычный текстовый документ
вставляются управляющие символы –
HTML-теги, которые определяют вид
страницы в Web-браузере.
Достоинство Web-страницы –
возможность просмотра в различных
ОС

3.

Для создания Web-страницы
используется простейший текстовый
редактор (блокнот), которые не
включаются в создаемый документ
управляющие символы
форматирования текста самого
редактора
Создание Web-страницы требует
знания синтаксиса языка. Поэтому для
создания применяются специальные
Webредакторы

4.

Web-страница сохраняется в виде
файла с разрешением .htm или .html
Пример: index.htm

5. Структура Web-страницы

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

6.

Структура Web-страницы
HTML – код страницы помещается в
контейнер
Без этих тегов браузер не сможет
определить формат документа и
правильно его интерпретировать.

7.

Структура Web-страницы
Web-страница разделяется на 2 логические
части:
Заголовок;
Содержание.

8. Заголовок страницы

Заголовок страницы помещается в
контейнер и содержит
название страницы и справочную
информацию о странице (тип кодировки,
версия языка HTML и т.д.).
Название страницы помещается в
контейнер . При
просмотре оно отображается в верхней
части браузера.

9. Содержание страницы

Отображаемое содержание страницы
помещается в контейнер

Тег может иметь
атрибуты. Например:
bgcolor =“black” – задает цвет фона
страницы;
text =“white” – задает цвет текста

10. Форматирование текста на Web-странице

Абзацы. Разделение текста на абзацы
происходит с помощью контейнера
. Для каждого абзаца можно
задать тип выравнивания и параметры
форматирования шрифта.
Заголовки. Размер шрифтов заголовков
задается парами тегов от
(самый крупный) до (самый
мелкий).

11. Форматирование текста на Web-странице

Шрифт. Параметры форматирования
шрифта задаются с помощью тега FONT и
его атрибутов:
SIZE – определяет размер шрифта;
FACE – определяет гарнитуру шрифта;
COLOR – определяет цвет шрифта.
Пример: COLOR =“RED”>Пример текста

12. Заголовки

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Заголовок 6

13. Форматирование текста на Web-странице

Выравнивание текста. Задается с
помощью атрибута ALIGN.
Выравнивание по левому краю: ALIGN =
“left”
Выравнивание по правому краю: ALIGN =
“right”
Выравнивание по центру: ALIGN = “center”
Пример:

текст

14. Форматирование текста на Web-странице

Тег . Создает жирный текст.
Тег . Создает наклонный текст
(курсив).
Тег
. Используется для перехода на
новую строку.

15. Пример Web-страницы

Web —
страница

Создана с помощью программы Блокнот

и языка HTML.

Спасибо за внимание!