Тема: Введение в HTML . Структура HTML документа.
ПЛАН ЗАНЯТИЯ
Дисциплина: ОП.16 Основы web - технологий
Преподаватель: Машарова Р.В.
Курс: 2
Группа: 1ИСП-21
Специальность: Информационные системы и программирование
Дата: 10.02.2023
Время проведения: 13.30-15.00, 4 пара
Тема: Введение в HTML. Структура HTML документа.
Цель занятия:
Дидактическая: познакомиться с структурой HTML документа
Развивающая: развивать логическое и критическое мышление, умение обобщать и синтезировать знания
Вид занятия лекция
Литература:
1. Храмцов П.Б., Брик С.А.,. Русак А.М., Сурин А.И., Основы web-технологий. Курс лекций. -3- е изд., пер. и доп. – Интернет-Университет Информационных Технологий, 2017. – 512 с.
2. Гаврилов М.В., Информатика и информационные технологии. Учебник для прикладного бакалавриата /М.В.Гаврилов, В.А.Климов. -4-е изд., пер. и доп. – М.: Юрайт, 2017. – 383с.
3. Новожилов О.П. Информатика. Учебник для прикладного бакалавриата /О.П.Новожилов. -3-е изд., пер. и доп. – М.: Юрайт, 2018. – 619с.
4. Симонович С.В. «Основы Информатики. Базовый курс» СПб: Питер 2018 год – 640 с.
Тема: Введение в HTML . Структура HTML документа.
1. Основные понятия и определения.
2. Инструменты и технологии программирования.
3. Структура HTML-документа.
4. Параметры тегов.
1. Основные понятия и определения.
HTML (HyperText Markup Language) – язык создания гипертестовых документов. HTML не является языком программирования, т.к. предназначен только для представления данных (команды языка указывают клиенту, в каком виде должна быть отображена та или иная часть документа). В связи с этим язык HTML имеет следующие ограничения:
• не содержит средств обработки информации.
• не предоставляет никакой возможности сохранять данные в процессе работы приложения.
• имеет ограниченные возможности для взаимодействия с пользователем
Любая HTML страница состоит из набора объектов: текста, графики, ссылок, списков и т.д. Для представления этих объектов в языке HTML используются специальные операторы - тэги (от англ tag - ярлык).
Любой тег состоит из 3 элементов: начала тега, (открывающий тег) обозначаемого скобками <>, тела тега (например, текстовой информации) и конца тега (закрывающего тега) обозначаемого скобками </>).
Например.
<TITLE>Мой первый сайт</TITLE>
Таким образом, HTML документ состоит из последовательности тегов. При написании HTML-документов нужно помнить следующие особенности:
• HTML не чувствителен к регистру. Команда <title> эквивалентна <TITLE> или
<TiTlE>.
• HTML заменяет произвольные последовательности пробелов, табуляций и символов перехода на новую строку одним пробелом.
• Не все теги поддерживаются всеми Web-браузерами. Если браузер не поддерживает тег, он его просто игнорирует.
2. Инструменты и технологии программирования.
HTML документы представляют собой обычные текстовые документы и могут быть созданы в любом текстовом редакторе, например в Блокноте. Существуют специализированные WYSIWYG (What You See Is What You Get) HTML-редакторы, например, Adobe Dream Waver или MS Frontpage.
HTML документы принято сохраниять в файлы с расширением *.htm или *.html. Просмотр HTML документов осуществляется при помощи специальных программ-просмоторщиков (web-браузеров), которые интерпретируют HTML код для отображения на экране.
3. Структура HTML-документа.
HTML со времени своего рождения (1989 г.) постоянно развивается, непрерывно претерпевая изменения и дополнения стандартов.
Структура HTML-документа выглядит следующим образом:
<HTML>
<HEAD>
<TITLE>Заголовок документа</TITLE>
</HEAD>
<BODY>
Тело документа
</BODY>
</HTML>
Как видно из приведенного кода, HTML документ всегда помещается в тег <HTML> и состоит из двух частей:
заголовка документа, определяемого тегом <HEAD>,
тела документа, определяемого элементом <BODY>.
В заголовке HTML-документа приводится информация о документе, которая не отображается в окне браузера. Исключением является тег <TITLE>, содержимое которого выводится в заголовке окна браузера и используется для идентификации документа пользователем или поисковой машиной.
Каждый HTML документ должен иметь название, например:
<TITLE>Введение в HTML</TITLE>
В заголовок также включаются метатеги <META> для указания кодировки, ключевых слов, описания документа и т.д.
Например .
<meta name ="Content-Type" content="text/html; charset=windows-1251">
<meta name="keywords" content="Web, программирование, HTML">
<meta name="description" content="Курс лекций по Web-программированию">
Тело HTML-документа обозначенное тегом <BODY></BODY> определяет видимую часть документа.
4. Параметры тегов.
Открывающие теги могут содержать дополнительную информацию - параметры, которые существенно расширяют возможности представления информации. Параметры в открывающем теге записываются после названия тега в виде параметр=”значение” или параметр=’значение’ и разделяются пробелами. Порядок следования параметров в теге не произвольный. Если параметр отсутствует, его значение принимается по умолчанию согласно спецификации.
Пример использования параметров в теге <BODY> приведен ниже:
<BODY text="black" bgcolor="white">
Основные параметры тега <BODY> приведены в таблице.
|
| Основные параметры тега <BODY> | |
| Параметр | Значение | |
| text | Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB. | |
| Например: text=”000000” - черный цвет. | ||
| link | Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB. | |
| Например: text=”FF0000” – красный цвет. | ||
| vlink | Устанавливает цвет гиперссылок на которых пользователь уже побывал. | |
| Например: text=”00FF00” – зеленый цвет. | ||
| alink | Устанавливает цвет гиперссылок при нажатии. | |
| Например: text=”0000FF” – синий цвет. | ||
| bgcolor | Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB. | |
| Например: text=”FFFFFF” – белый цвет. | ||
| background | Устанавливает изображение фона документа. | |
| Например: Background=“bg.gif” | ||
| Topmargin | Устанавливает величину верхнего поля документа. | |
| (marginheight*) | Пример: Topmargin=”0” | |
| Leftmargin | Устанавливает величину левого поля документа. | |
| (marginwidth*) | Пример:Leftmargin=”10” | |
Параметры marginheight и marginwidth используются для установки величины верхнего и левого поля в браузерах Netscape.
Выдающиеся личности Интернет.
Марк Андриссен Еще в 1992 году "паутина" была ориентирована на текст и была мало известна вне академических кругов. Ею пользовались в основном инженеры, ученые и те, для кого компьютер было хобби. Весной 1993 года Марк Андриссен в составе группы студентов Университета штата Иллинойс осуществил революцию в области интернет-навигации, значительно ее упростив за счет создания первого интернет-браузера Mosaic, способного просматривать как текстовые, так и графические документы. Переход к визуальному интерфейсу вызвал взрыв интереса к "паутине", а Марка Андриссен стал позднее одним из основателей Netscape, одного из двух главных браузеров в "паутине".
Контрольные вопросы
1. С какой целью браузеры в HTML документах заменяют произвольные последовательности пробелов, табуляций и символов перехода на новую строку одним пробелом?
2. Как правильно указать величины верхнего и левого полей документа, чтобы web-страница корректно просматривалась различными браузерами?
3. Особенности HTML
4. Является ли свойство пропускать незнакомые теги Web-браузерами положительным или отрицательным?
5. Структура тегов.
6. Дать определение HTML .
7. Перечислить ограничения HTML .
8. Инструменты для создания HTML документа.
9. Расширение файлов с HTML документов.
10. Структура HTML .