1 Тема лекции: «Языки разметки гипертекста»

2 Язык разметки гипертекста HTML Web-страницы создаются, точнее размечаются, с помощью специализированных языковых средств, классическим из которых является HTML (Hyper Text Mark up Language) – язык разметки гипертекста. Операторы HTML называются тегами. В настоящее время HTML (версии 4 и 5) все еще считается основой WWW, хотя статус официальных рекомендаций консорциума W3C (WWW Consortium – уже приобрел язык разметки XHTML (подмножество более гибкого языка разметки документов XML).

3 Теги структуры HTML-документа Название документа, наблюдаемое в области наименования окна браузера мета теги, описание стилей и пр. Основное содержание страницы

4 Теги разметки списков - начало упорядоченного (нумерованного) списка с атрибутом, задающим вид номера (по умолчанию нумерация - арабскими цифрами, прописная буква i соответствует нумерации римскими цифрами и т.д.) Заголовок списка – заголовок списка Элемент списка - пометка элемента списка упорядоченного или неупорядоченного - начало неупорядоченного (маркированного) списка - список определений (термин + его описание) Термин - определяемый термин Описание термина

5 Пример разметки упорядоченного списка HTML-код: Состав группы: Иванов Петров Сидоров В окне браузера: Состав группы: I. Иванов II. Петров III. Сидоров

6 Пример разметки простой таблицы HTML-код: Туристские маршруты Маршрут Стоимость Париж $450 Будапешт $390 В окне браузера:

7 Теги вставки изображений - одиночный тег вставки рисунка с обязательным атрибутом src со значением-адресом файла рисунка в сети или относительным адресом на диске данного сервера width=99% | 99 – атрибут относительного или абсолютного (в пикселях) размера изображения по ширине экрана height=99% | 99 - то же по высоте alt=Текст – атрибут текста комментария, появляющегося в рамке рисунка при блокировке приема графических файлов (для ускорения приема документа) или в виде всплывающей подсказки (в последних версиях браузеров). Пример:

8 Теги вставки гиперссылки Гиперссылка - тег описания гиперссылки с обязательным атрибутом href определения перехода по указанному в значении атрибута Web-ресурсу (внутреннему или внешнему); атрибут target=_blank открывает новое окно браузера Пример ссылки на страницу в той же папке: К странице 2 Пример внешней ссылки – на поисковик Яндекс: Поиск на Яндексе

9 Технология каскадных таблиц стилей Понятие стиля объединяет в себе совокупность значений форматных свойств тегов для разметки какого-либо элемента или группы элементов web страницы. Совокупность описаний стилей образует таблицу стилей - CSS. Использование технологии CSS полностью соответствует ключевой концепции проектирования Web- ресурсов, пропагандируемой консорциумом W3C (WWW Consortium – Суть данной концепции состоит в разделении содержания и визуального оформления Web-страниц.

10 Технология каскадных таблиц стилей (С пособы связывания страницы и таблицы стилей ) 1. Связывание (linked) - позволяет использовать одну таблицу стилей (в виде отдельного текстового файла типа CSS) для форматирования сразу нескольких связанных с этим файлом страниц. 2. Внедрение (embedded) - позволяет задавать все правила таблицы стилей непосредственно в самой странице (в её заголовочной части). 3. Встраивание стилей непосредственно в теги страницы (inline)

11 Синтаксис основного варианта описания стиля: тег{свойство_1: значение_1; свойство_2: значение_2; …} Пример: p {font-family: verdana, helvetica; font-size: 16pt; font-weight: bolder} Данный пример предполагает, что все абзацы, охваченные тегом, в web-странице/страницах будут оформлены шрифтом Verdana (а при его отсутствии – шрифтом Helvetica), размером 16 пунктов и жирным начертанием. Технология каскадных таблиц стилей

12 Способ внедрения таблицы стилей в саму web-страницу (embedded) требует включения описания стилей в тег, который вкладывается в тег страницы : … Описание стилей Таким способом можно воспользоваться для определения стилей сразу нескольких элементов, но в пределах лишь одной страницы.

13 Технология каскадных таблиц стилей Встраивание стилей непосредственно в теги страницы (inline) производится таким образом: Пример:

Этот метод нежелателен, так как он приводит к потере одного из основных преимуществ технологии CSS – возможности отделения содержания страницы от описания ее формата.

14 Технология каскадных таблиц стилей Если необходимо задать особый стиль элемента, отличный от других в таблице стилей, то в файл таблицы включают описание класса стиля - строки с точкой:.класс{свойство_1: значение_1; свойство_2: значение_2; …} или тег.класс{свойство_1: значение_1; свойство_2: значение_2; …} Использование такого стиля в теле web-страницы должно иметь вид:

15 Технология каскадных таблиц стилей Примеры определения классов стилей:.c1{font-size: 16pt; color: #0000ff; text-align: center} td.c2{vertical-align: top; background-image: url(images/fon.gif)} Данным примерам соответствуют фрагменты тела web-страницы: … … …

16 Тема лекции: «Метатеги в языках разметки гипертекста»

17 Типы веб-документов Современные версии языков гипертекстовой разметки web- страниц поддерживают следующие типы документов: - Strict – «строгий» тип документа, ориентированный на использование браузеров последних версий, поддерживающих технологию CSS и язык разметки XHTML; - Frameset – тип документа на основе фреймов; - Transitional – «переходный», т.е. нестрогий тип документа для не самых последних версий браузеров (рекомендуемый для использования в настоящее время).

… В после" title="Пример начала web-страницы типа Transitional: … В после" class="link_thumb"> 18 Пример начала web-страницы типа Transitional: … В последней строке примера значение атрибута lang определяет язык, на котором излагается основное содержание документа. Указание национального языка требуется для однозначного распознавания языка браузером и для повышения эффективности взаимодействия с поисковыми системами. … В после"> … В последней строке примера значение атрибута lang определяет язык, на котором излагается основное содержание документа. Указание национального языка требуется для однозначного распознавания языка браузером и для повышения эффективности взаимодействия с поисковыми системами."> … В после" title="Пример начала web-страницы типа Transitional: … В после">

19 Метатеги в примерах Метатеги содержат в себе справочную и управляющую информацию о web-сайте, которая предназначена для использования браузерами посетителей сайта, поисковыми роботами, направляемыми на сайт поисковыми системами и пр. Весьма полезным мета тегом является: где кодировка: Windows-1251, KOI8-R, utf-8, iso Данный мета тег предназначен для указания браузеру посетителя сайта вида русскоязычной кодировки, в которой исполнено содержание сайта. При отсутствии этого тега в окне браузера может наблюдаться нечитаемая последовательность букв русского алфавита и прочих знаков.

20 Метатеги в примерах где ключевые слова должны разделяться запятыми или пробелами, а общее число символов не должно превышать 800. Не допускается повторение ключевых слов.

21 Метатеги в примерах где описание сайта содержит текст, который будет отображаться в окнах поисковых систем в качестве результата поиска вместе с гиперссылкой на данный сайт. Длина такого описания не должна превышать 200 символов. Включение грамотно составленного описания web-сайта и перечня ключевых слов значительно увеличивает вероятность того, что данный сайт будет найден другими пользователями Internet.

22 Метатеги в примерах где 99 – время в секундах, через которое произойдет автоматический переход по указанному адресу. Метатег применяется в случае смены хостинг-провайдера для переадресации при обращении посетителей сайта по прежнему адресу.

23 Метатеги в примерах

24 Тема лекции: «Особенности языка разметки гипертекста XHTML»

25 Особенности языка XHTML (начало) Язык разметки web-страниц XHTML (eXtensible HTML) – это последняя, более строгая и хорошо структурированная версия HTML, имеющая статус официальной рекомендации консорциума W3C (WWW Consortium – с такими особенностями: 1. Необходимо, чтобы все теги были набраны в нижнем регистре. Единственным исключением является тег объявления типа документа DOCTYPE. 2. Наличие закрывающих тегов обязательно. 3. Должен строго соблюдаться принцип вложенности тегов: тег открытый последним должен закрываться первым.

26 Особенности языка XHTML (продолжение) 4. Одиночные теги должны иметь вид, например,. 5. Значения атрибутов должны обязательно заключаться в кавычки. 6. Сделан однозначный выбор в пользу логического форматирования в сочетании с таблицами стилей CSS. 7. Недопустимы булевы атрибуты (без присвоения значений). Например, вместо следует использовать запись.

27 Особенности языка XHTML (продолжение) 8. В XHTML версии 1.1 упразднены типы документов Transitional и Frameset, а теги и заменены на. 9. Символы комментария применять не рекомендуется, т.к. их содержание может быть неправильно истолковано браузерами последних поколений. В такие комментарии принято включать, в частности, описание встроенных стилей (для совместимости со старыми версиями браузеров, которые не поддерживают технологию CSS).

28 Особенности языка XHTML (окончание) 10. Поддерживается технология каскадных таблиц стилей второго поколения CSS2, что позволяет создавать аппаратно-зависимые стили. С их помощью можно определять специфические стили представления страниц, которые будут автоматически применяться при их выводе на экран монитора ПК (тип screen), на печать (тип print), на экран карманного компьютера (тип handheld), при интерпретации речевым синтезатором (тип aural) и т.д. Примечание: Для проверки web-страниц на соответствие новым стандартам гипертекстовой разметки следует воспользоваться валидатором W3C (validator.w3.org).