HTML
<<  Язык разметки гипертекста Вставка изображений на сайт  >>
Языки разметки гипертекста
Языки разметки гипертекста
Язык разметки гипертекста HTML
Язык разметки гипертекста HTML
Синтаксис парного тега
Синтаксис парного тега
Теги структуры HTML-документа
Теги структуры HTML-документа
Теги разметки списков
Теги разметки списков
Пример разметки упорядоченного списка
Пример разметки упорядоченного списка
Пример разметки простой таблицы
Пример разметки простой таблицы
Теги вставки изображений
Теги вставки изображений
Теги вставки гиперссылки
Теги вставки гиперссылки
Технология каскадных таблиц
Технология каскадных таблиц
Способы связывания страницы и таблицы стилей
Способы связывания страницы и таблицы стилей
Перечисление описаний стилей
Перечисление описаний стилей
Синтаксис
Синтаксис
Способ внедрения таблицы стилей
Способ внедрения таблицы стилей
Встраивание стилей непосредственно в теги страницы
Встраивание стилей непосредственно в теги страницы
Особый стиль элемента
Особый стиль элемента
Примеры определения классов стилей:
Примеры определения классов стилей:
Метатеги в языках разметки гипертекста
Метатеги в языках разметки гипертекста
Типы веб-документов
Типы веб-документов
Пример начала web-страницы
Пример начала web-страницы
Метатеги в примерах
Метатеги в примерах
Ключевые слова
Ключевые слова
Описание сайта
Описание сайта
Сведения об авторе сайта
Сведения об авторе сайта
Санкт-Петербургский торгово-экономический институт
Санкт-Петербургский торгово-экономический институт
Особенности языка разметки гипертекста XHTML
Особенности языка разметки гипертекста XHTML
Особенности языка XHTML
Особенности языка XHTML
Одиночные теги
Одиночные теги
Типы документов
Типы документов
Аппаратно-зависимые стили
Аппаратно-зависимые стили
Презентация «Язык разметки гипертекста HTML». Размер 89 КБ. Автор: Египко.

Язык разметки гипертекста HTML

содержание презентации «Язык разметки гипертекста HTML.ppt»
СлайдТекст
1 Языки разметки гипертекста

Языки разметки гипертекста

Тема лекции: «Языки разметки гипертекста». http://egipko.narod.ru.

2 Язык разметки гипертекста HTML

Язык разметки гипертекста HTML

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

3 Синтаксис парного тега

Синтаксис парного тега

Язык разметки гипертекста HTML. Синтаксис парного тега: <тег атрибут1="значение1" атрибут2="значение2"… > Область действия тега </тег>. Пример: <font size="6" color="#00ff00">Символы зеленого цвета</font> В следующих слайдах при описании тегов используются следующие шрифтовые выделения: · наименования тегов имеют жирное начертание; · наименования атрибутов – жирное и курсивное начертание; · значения атрибутов (в кавычках) – курсивное начертание. Ниже используются также следующие условные обозначения: символ «|» разделяет допустимые значения в списке, из которого следует выбрать лишь одно значение; цифры «1, 2, …, 9» в значениях атрибутов тегов символизируют десятичное значение.

4 Теги структуры HTML-документа

Теги структуры HTML-документа

Теги структуры HTML-документа. <html> <head> <title>Название документа, наблюдаемое в области наименования окна браузера </title> метатеги, описание стилей и пр. </head> <body> Основное содержание страницы </body> </html>

5 Теги разметки списков

Теги разметки списков

Теги разметки списков. <ol type=”1|A|a|I|i”> - начало упорядоченного (нумерованного) списка с атрибутом, задающим вид номера (по умолчанию нумерация - арабскими цифрами, прописная буква “i” соответствует нумерации римскими цифрами и т.д.) <lh>Заголовок списка – заголовок списка <li>Элемент списка - пометка элемента списка упорядоченного или неупорядоченного <ul> - начало неупорядоченного (маркированного) списка <dl> - список определений (термин + его описание) <dt>Термин - определяемый термин <dd>Описание термина.

6 Пример разметки упорядоченного списка

Пример разметки упорядоченного списка

Пример разметки упорядоченного списка. HTML-код: <ol type=”I”> <lh>Состав группы: <li>Иванов <li>Петров <li>Сидоров </ol> В окне браузера: Состав группы: Иванов Петров Сидоров.

7 Пример разметки простой таблицы

Пример разметки простой таблицы

Пример разметки простой таблицы. HTML-код: <table width=”33%” border=”5”> <caption> <b>Туристские маршруты</b> </caption> <tr><th>Маршрут<th>Стоимость <tr><td>Париж<td align=”right”>$450 <tr><td>Будапешт <td align=”right”>$390 </table> В окне браузера:

8 Теги вставки изображений

Теги вставки изображений

Теги вставки изображений. <img src=“url | относительный_адрес_графического_файла”> - одиночный тег вставки рисунка с обязательным атрибутом src со значением-адресом файла рисунка в сети или относительным адресом на диске данного сервера width=”99% | 99” – атрибут относительного или абсолютного (в пикселях) размера изображения по ширине экрана height=”99% | 99” - то же по высоте alt=”Текст” – атрибут текста комментария, появляющегося в рамке рисунка при блокировке приема графических файлов (для ускорения приема документа) или в виде всплывающей подсказки (в последних версиях браузеров). Пример: <img src=“photodeda.jpg” width=”200” height=”100” alt=”Фото дедушки”>

9 Теги вставки гиперссылки

Теги вставки гиперссылки

Теги вставки гиперссылки. <a href=“url”>Гиперссылка</a> тег описания гиперссылки с обязательным атрибутом href определения перехода по указанному в значении атрибута Web-ресурсу (внутреннему или внешнему); атрибут target=“_blank” открывает новое окно браузера Пример ссылки на страницу в той же папке: <a href=”page2.htm”>К странице 2</a> Пример внешней ссылки – на поисковик Яндекс: <a href=“http://www.yandex.ru”>Поиск на Яндексе</a>

10 Технология каскадных таблиц

Технология каскадных таблиц

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

11 Способы связывания страницы и таблицы стилей

Способы связывания страницы и таблицы стилей

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

12 Перечисление описаний стилей

Перечисление описаний стилей

Технология каскадных таблиц стилей. Наиболее эффективным способом следует считать первый способ связывания web-страниц и таблицы стилей (linked) - перечисление описаний стилей в отдельном текстовом файле типа css для разметки повторяющихся элементов сразу в нескольких web-страницах. Для ссылки на этот файл в каждую такую страницу, в ее заголовочную часть, включается строка link…: <head> …<link rel=stylesheet type="text/css" href="имя_файла.css"> </head> (в данном примере предполагается, что файл таблицы стилей находится в той же папке, что и web-страница).

13 Синтаксис

Синтаксис

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

14 Способ внедрения таблицы стилей

Способ внедрения таблицы стилей

Технология каскадных таблиц стилей. Способ внедрения таблицы стилей в саму web-страницу (embedded) требует включения описания стилей в тег <style>, который вкладывается в тег страницы <head>: <head> … <style type="text/css"> Описание стилей </style> </head> Таким способом можно воспользоваться для определения стилей сразу нескольких элементов, но в пределах лишь одной страницы.

15 Встраивание стилей непосредственно в теги страницы

Встраивание стилей непосредственно в теги страницы

Технология каскадных таблиц стилей. Встраивание стилей непосредственно в теги страницы (inline) производится таким образом: <tag style=”описание стиля”> Пример: <h1 style=”font-family:verdana; text-align:left”> Этот метод нежелателен, так как он приводит к потере одного из основных преимуществ технологии CSS – возможности отделения содержания страницы от описания ее формата.

16 Особый стиль элемента

Особый стиль элемента

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

17 Примеры определения классов стилей:

Примеры определения классов стилей:

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

18 Метатеги в языках разметки гипертекста

Метатеги в языках разметки гипертекста

Тема лекции: «Метатеги в языках разметки гипертекста». http://egipko.narod.ru.

19 Типы веб-документов

Типы веб-документов

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

20 Пример начала web-страницы

Пример начала web-страницы

Пример начала web-страницы типа Transitional: <!DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org / TR / xhtml1 / DTD/xhtml1-transitional.dtd"> <html xmlns=”http://www.w3.org / 1999/xhtml” xml : lang=”ru” >… В последней строке примера значение атрибута lang определяет язык, на котором излагается основное содержание документа. Указание национального языка требуется для однозначного распознавания языка браузером и для повышения эффективности взаимодействия с поисковыми системами.

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

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

Метатеги в примерах. Метатеги содержат в себе справочную и управляющую информацию о web-сайте, которая предназначена для использования браузерами посетителей сайта, поисковыми роботами, направляемыми на сайт поисковыми системами и пр. Весьма полезным метатегом является: <meta http-equiv=”content-type” content=”text/html charset=кодировка”> где кодировка: Windows-1251, KOI8-R, utf-8, iso-8859-1. Данный метатег предназначен для указания браузеру посетителя сайта вида русскоязычной кодировки, в которой исполнено содержание сайта. При отсутствии этого тега в окне браузера может наблюдаться нечитаемая последовательность букв русского алфавита и прочих знаков.

22 Ключевые слова

Ключевые слова

Метатеги в примерах. <meta name=”keywords” content=”Ключевые слова для роботов поисковых систем”> где ключевые слова должны разделяться запятыми или пробелами, а общее число символов не должно превышать 800. Не допускается повторение ключевых слов.

23 Описание сайта

Описание сайта

Метатеги в примерах. <meta name=”description” content=”Краткое описание сайта”> где описание сайта содержит текст, который будет отображаться в окнах поисковых систем в качестве результата поиска вместе с гиперссылкой на данный сайт. Длина такого описания не должна превышать 200 символов. Включение грамотно составленного описания веб-сайта и перечня ключевых слов значительно увеличивает вероятность того, что данный сайт будет найден другими пользователями Internet.

24 Сведения об авторе сайта

Сведения об авторе сайта

Метатеги в примерах. <meta name=”author” content=”Сведения об авторе сайта”> <meta name=”reflash” content=”99; url=Адрес_перехода”> где 99 – время в секундах, через которое произойдет автоматический переход по указанному адресу. Метатег применяется, например, в случае смены хостинг-провайдера для переадресации при обращении посетителей сайта по прежнему адресу.

25 Санкт-Петербургский торгово-экономический институт

Санкт-Петербургский торгово-экономический институт

Метатеги в примерах. <meta name="description" content="Санкт-Петербургский торгово-экономический институт, бесплатное высшее образование, очная и заочная форма образования” / > <meta name="keywords" content="высшее экономическое образование, бухгалтерский учет и аудит, экономика и управление, экспертиза потребительских товаров, общественное питание, аудит, маркетинг, менеджмент, повышение квалификации, бесплатное очное образование, бесплатное заочное образование“ />

26 Особенности языка разметки гипертекста XHTML

Особенности языка разметки гипертекста XHTML

Тема лекции: «Особенности языка разметки гипертекста XHTML». http://egipko.narod.ru.

27 Особенности языка XHTML

Особенности языка XHTML

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

28 Одиночные теги

Одиночные теги

Особенности языка XHTML (продолжение). 4. Одиночные теги должны иметь вид <tag … />, например, <br />. 5. Значения атрибутов должны обязательно заключаться в кавычки. 6. Сделан однозначный выбор в пользу логического форматирования в сочетании с таблицами стилей CSS. 7. Недопустимы булевы атрибуты (без присвоения значений). Например, вместо <option selected> следует использовать запись <option selected=”selected”>.

29 Типы документов

Типы документов

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

30 Аппаратно-зависимые стили

Аппаратно-зависимые стили

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

«Язык разметки гипертекста HTML»
Сайт

5informatika.net

115 тем
5informatika.net > HTML > Язык разметки гипертекста HTML.ppt