Лекция 1. Основы HTML
История языка HTML. Создание web-страниц
HTML (HypertextMarkupLanguage – язык разметки гипертекста),стандартный язык разметки документов для WWW (WorldWideWeb –
Всемирная паутина). HTML-документ интерпретируется браузерами и отображается в виде веб-страницы в удобной для просмотра визуальной форме.
HTML – «авторский» язык. Первая его версия была предложена в 1989 году ТимомБернерс-Ли (TimBerners-Lee) в рамках его проекта «Системы гипертекстовых документов», которая должна была использоваться внутри Европейского Центра ядерных исследований (CERN). В 1990 году эта система была названа WorldWideWeb.
Основными составляющими Всемирной паутины стали язык разметки гипертекста (HTML), протокол передачи гипертекста (HTTP), универсальный локатор ресурса (URL).
Активно поддерживался этот язык компанией NSCA (Национальный центр суперкомпьютерных приложений), где был реализован один из первых Web-браузеров – Mosaic.
HTML является приложением SGML (StandardGenerelizedMarkupLanguage - Cтандартный обобщённый язык разметки) и соответствует международному стандарту ISO 8879.
HTML (HyperTextMarkupLanguage — «язык гипертекстовой разметки») — стандартный язык разметки документов во Всемирной паутине.
Версии языка HTML
· HTML 2.0, одобренный как стандарт 22 сентября 1995 года;
· HTML 3.2— 14 января 1997 года;
· HTML 4.0 — 18 декабря 1997 года;
· HTML 4.01 — 24 декабря 1999 года;
· HTML 5— 28 октября 2014 года
· HTML 5.1 Рекомендован к применению с 1 ноября 2016 года.
Стандарт HTML и другие стандарты для Web разработаны под руководством WorldWideConsortium (консорциум WorldWideWeb) – W3C. Стандарты, спецификации и проекты новых предложений можно найти на сайте https://www.3w.org
Для создания web-страниц нам понадобиться обычный текстовый редактор, например, Блокнот или NotePad++. При сохранении создаваемым файлам дается расширение htm или html.
HTML определяет синтакcиc и размещение специальных инструкций (тегов) веб-документа, которые не выводятся на экран, но указывают браузеру, как отображать содержимое документа.
В основном, HTML-документ является простым текстовым файлом, который содержит текст (содержимое документа) и специальные команды, называемые тегами, с инструкциями о структуре, внешнем виде и функции содержимого.
Для обозначения тегов используется команда <тег>. Имя тега, как правило, представляет собой аббревиатуру его функции, что облегчает его запоминание.
Теги бывают двух видов: парные, которые также называют контейнером и одиночные.
Контейнер имеет начальный (открывающий) и конечный (закрывающий) тег. Текст, находящийся между тегами, будет выполнять содержащиеся в них инструкции. Конечный тег имеет то же имя, что и начальный, но перед ним стоит слэш (/), обозначаемый как </тег>.
Одиночные теги не имеют закрывающих тегов, так как они используются для размещения отдельных элементов на странице.
Например: тег изображения - <img>, разрыв строки - <br>, горизонтальная линия - <hr> и т.д.
Теги нечувствительны к регистру, поэтому запись <P> и <p> эквивалентна.
Рассмотрим создание страницы, выводящей фразу «НИЖЕГОРОДСКИЙ ГОСУДАРСТВЕННЫЙ АРХИТЕКТУРНО - СТРОИТЕЛЬНЫЙ УНИВЕРСИТЕТ». Для этого в блокноте набираем: <HTML><HEAD><TITLE>ННГАСУ</TITLE></HEAD><BODY>НИЖЕГОРОДСКИЙ ГОСУДАРСТВЕННЫЙ АРХИТЕКТУРНО - СТРОИТЕЛЬНЫЙ УНИВЕРСИТЕТ </BODY></HTML> (текст заключенный в контейнер <TITLE>это заголовок документа).
Сохраняем этот документ в виде файла с расширением html. Далее находим файл в папке и выполняем двойной щелчок по файлу. Файлы с расширением html автоматически открываются браузером, для просмотра результата.
Структура html-документа
Код программы HTML документа разделяется структурно на две основные части: <head> и <body>. В head содержится метаинформация о документе, например, язык, на котором пишется текст, версия языка HTML, ключевые слова, общий заголовок HTML-документа. В body находится само содержимое документа (то, что выводится в окне браузера).
Пример демонстрирует теги, образующие основной структурный скелет документа HTML:
<HTML>
<HEAD>
<TITLE>Названиедокумента</TITLE>
</HEAD>
<BODY> Содержимое документа
</BODY>
</HTML>
Рассмотрим теги управляющие структурой документа, а также предоставляющие информацию о документе, управляющие его внешним видом или функционированием на внешнем уровне.
Тег-контейнер HTML
Тег помещают в начало и конец документа, обозначает начало и завершение создания HTML-документа.
Тег-контейнер HEAD
Тег определяет заголовочную часть документа. Атрибутыотсутствуют. Тег используется в качестве контейнера для других тегов,
такихкак<meta>, <title>, <link>, <script>.
Тег-контейнер TITLE
Определяет название документа.
Тег-контейнер BODY
Тег определяет начало и конец основной части документа. Атрибуты
этого тега оказывают влияние на весь документ.
Основные атрибуты тега <body>:
• background = url - определяет изображение, которое будет служитьфоном для страницы
• bgcolor = “#rrggbb” или “название цвета” - задает цвет фонастраницы. Значение задается RGB-значением или названием цвета.
• alink= “#rrggbb” или “название цвета”. Устанавливает цвет активной ссылки.
• link= “#rrggbb” или “название цвета”. Цвет ссылок на веб-странице.
• vlink= “#rrggbb” или “название цвета”. Цвет посещенных ссылок.
Тег DOCTYPE
Тег указывает стандарт разработки HTML-документа. Согласно спецификациям HTML и XHTML тег DOCTYPE (что означает «объявление типа документа») сообщает, какая именно версия (X)HTML используется на странице.
Например: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""https://www.w3.org/TR/html4/strict.dtd">
Тег META
Все мета-теги не несут визуальной информации и располагаются всекции <head></head> документа. Информация, находящаяся в этом теге,полезна для серверов, браузеров и поисковых машин. Различают два видатегов: использующие атрибут name и использующие атрибут http-equiv. Вкаждом случае необходимо указывать атрибут content, который задаетзначение именованной информации или функции.
Основныеатрибутытега<meta>:
• <metahttp-equiv=“Content-Type” content=“text/html; charset=utf-8”> - указывает браузеру кодовую страницу для правильногоотображения символов браузером;
• <metahttp-equiv=“Content-Language” content=“ru” >– указываетязык документ. Значение этого атрибута может использоваться какпоисковыми роботами, так и веб-серверами.
• <metahttp-equiv=“Refresh” content=“время в секундах”> или<metahttp-equiv=“Refresh” content=“время в секундах”; URL> - в первом случае происходит периодическая перезагрузка документа через указанное время, во втором – через указанное время происходит переход по указанному адресу.
Автоматическую периодическую перезагрузку документа обычно назначают в случаях часто обновляемых данных (котировки акций, результаты спортивных соревнований и т.д.)
• <metaname=“Description” content=“Описание документа, до 100 символов”> - информация, содержащаяся в этом атрибуте, влияет на результаты поиска, осуществляемого поисковыми системами.
Общий результат включает следующие данные:
1. URL документа;
2. название документа (содержимое тега <title>);
3. описание документа, т.е. Description или начальный фрагментHTML-документа;
4. рейтинг (коэффициент соответствия документа запросупользователя)
• <metaname=“Keywords” content=“Ключевые слова, через,запятую”> - набор слов и фраз, наиболее полно характеризующихHTML-документ, которые являются основным критерием поискавашего документа поисковыми системами.
• <metaname=“Author” content=“ФИО”> - информация об автореданного документа
• <metaname=“Copyright” content=“ ”> - информация об авторскихправах.
• <meta name=“Robots” content=“all”> - правилаиндексации. Приуказании параметра all индексируются все HTML-страницы, призначении index – только индексные страницы.