Содержание

Слайд 2

Троицкий Д.И. Интернет-технологии

Язык описания страниц HTML (HyperText Markup Language) по сей день

Троицкий Д.И. Интернет-технологии Язык описания страниц HTML (HyperText Markup Language) по сей
остается базовым для представления информации в Интернете.

Файлы HTML – это обычные текстовые файлы, содержащие команды оформления Web-страницы, называемые тегами (tag).

В документе HTML можно выделить два основных блока: головная часть и тело документа.

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

Слайд 3

Троицкий Д.И. Интернет-технологии



Это заголовок страницы


Здравствуйте!


Это моя первая страница HTML. Этот текст выводится

Троицкий Д.И. Интернет-технологии Это заголовок страницы Здравствуйте! Это моя первая страница HTML.
жирным шрифтом.




Пример простейшей Web-страницы:

Слайд 4

Троицкий Д.И. Интернет-технологии

Теги HTML используются для выделения элементов HTML.

Обычно теги HTML

Троицкий Д.И. Интернет-технологии Теги HTML используются для выделения элементов HTML. Обычно теги
используются парами и заключены между двумя символами угловых скобок < > (начальный тег) и (конечный тег), как begin..end в Паскале. Текст между начальным и конечным тегами является содержимым элемента. Некоторые теги не имеют конечного, например, тег принудительного переноса строки
.

Теги могут иметь атрибуты, которые предоставляют дополнительную информацию об элементах HTML. Атрибуты всегда используются в виде пары "имя/значение".

Общий формат задания атрибутов имеет вид:
<имя_тега имя_атрибута="значение">

Например, тег:

Слайд 5

Троицкий Д.И. Интернет-технологии

В HTML, начиная с версии 4.0, используется стандартизированное представление символов,

Троицкий Д.И. Интернет-технологии В HTML, начиная с версии 4.0, используется стандартизированное представление
отличных от английского набора латиницы (первых 127 символов таблицы ASCII). Тип кодировки задается в заголовке документа при помощи тега .

Кодировки символов

Например для русского текста в кодировке Windows 1251:
content="text/html; charset=Windows-1251">

Символы, имеющие специальные названия, могут быть закодированы в виде &entity;, например:
à — à
α — α

Слайд 6

Троицкий Д.И. Интернет-технологии

Все символы могут быть также закодированы в числовом обозначении с

Троицкий Д.И. Интернет-технологии Все символы могут быть также закодированы в числовом обозначении
использованием десятичного (&#DD;) или шестнадцатеричного (&#xHHHH;) кода Unicode.

Наиболее часто встречающиеся символы представлены так называемыми мнемониками.

Например

Слайд 7

Троицкий Д.И. Интернет-технологии

Основные теги форматирования HTML-документов

Абзацы.



Это абзац 1.


Это абзац 2.


Это

Троицкий Д.И. Интернет-технологии Основные теги форматирования HTML-документов Абзацы. Это абзац 1. Это
абзац 3.




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

Для вставки пустых строк используйте тег
.

Любое число пробелов заменяется одним.

Слайд 8

Троицкий Д.И. Интернет-технологии

Заголовки определяются с помощью тегов от

до

. Тег

Троицкий Д.И. Интернет-технологии Заголовки определяются с помощью тегов от до . Тег

определяет заголовок самого большого размера, а

определяет заголовок самого маленького размера.

Заголовки автоматически отделяются дополнительными промежутками от остальных элементов документа.

Для переноса строк внутри абзаца используется тег
, который выполняет принудительный перенос строки.

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

Разделять различные элементы можно при помощи горизонтальной линейки, для этого используйте тег


.

Тег


не имеет закрывающего тега.

Слайд 9

Троицкий Д.И. Интернет-технологии

Тег комментария

код HTML.

Комментарии будут проигнорированы браузером.

Пример:


Этот текст будет показан в окне браузера.



Слайд 10

Троицкий Д.И. Интернет-технологии

Вставка изображения в документ. Для вставки графики следует воспользоваться тегом

Троицкий Д.И. Интернет-технологии Вставка изображения в документ. Для вставки графики следует воспользоваться
совместно с атрибутом SRC, поместив их в надлежащее место HTML-документа и вставив вместо filename URL-адрес изображения:


По умолчанию браузер выводит изображение сразу текста или другого объекта, описанного предыдущими инструкциями.

При помощи тега можно сообщить браузеру размеры изображения.

Для указания размеров изображения (в пикселах) служат атрибуты HEIGHT и WIDTH тега . Если указанные размеры не совпадают с размерами изображения, программа просмотра изменяет масштаб изображения.

Если браузер читателя не выводит изображение, на его месте можно поместить альтернативное описание. Для этого воспользуйтесь атрибутом ALT тега :
Description

Слайд 11

Троицкий Д.И. Интернет-технологии

Гиперссылки

Ссылка состоит из двух частей. Первая из них – это

Троицкий Д.И. Интернет-технологии Гиперссылки Ссылка состоит из двух частей. Первая из них
то, что вы видите на Web-странице; она называется указателем (anchor). Вторая часть, дающая инструкцию браузеру, называется адресной частью ссылки (URL-адресом, URL reference).

Указатели бывают двух типов – текстовые и графические.

Инструкция, соответствующая ссылке, выглядит следующим образом:
<А HREF="vero.html"> Earth Reconnaissance Office

Второй частью ссылки является URL-адрес. Указание адреса может быть относительным или абсолютным.

Слайд 12

Троицкий Д.И. Интернет-технологии

URL-адрес файла, расположенный на том же компьютере, что и документ,

Троицкий Д.И. Интернет-технологии URL-адрес файла, расположенный на том же компьютере, что и
в котором находится указатель этой ссылки, называется относительным.

Таким образом, если браузер загрузил страницу, находящуюся по адресу http://www.mysite.com/page, то относительный адрес /picture подразумевает адрес http://www.mysite.com/page/picture

URL-aдpec, полностью определяющий компьютер, каталог и файл, называется абсолютным.

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

Например,
Следовательно, вся относительная адресация в дальнейшем будет базироваться на этом адресе.

Слайд 13

Троицкий Д.И. Интернет-технологии

Кроме ссылок на другие документы, часто бывает необходимо включить ссылки

Троицкий Д.И. Интернет-технологии Кроме ссылок на другие документы, часто бывает необходимо включить
на разные части текущего документа.

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

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

Например,
<А NAME=MIDDLE>Middle Section in Web page
<А HREF="#MIDDLE">Jump to the middle

Слайд 14

Троицкий Д.И. Интернет-технологии

Кодирование цвета используется для раскрашивания шрифтов, фона и других элементов

Троицкий Д.И. Интернет-технологии Кодирование цвета используется для раскрашивания шрифтов, фона и других
страницы. Цвета обозначаются английскими названиями или числовыми шестнадцатеричными кодами.

В общем случае цвет определяется RGB – кодом. Любой цвет в этом случае представляется как комбинация красного (R), зелёного (G), синего (B) цветов, взятых в определённых пропорциях. Доля каждого базового цвета выражается двуразрядным шестнадцатеричным числом. В десятичном исчислении эти числа соответствуют диапазону от 0 до 255.

Управление цветом

Например

Слайд 15

Троицкий Д.И. Интернет-технологии

Мета-теги

Мета-теги — это необязательные атрибуты, размещенные в заголовке страницы, которые

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

Meta-теги выглядят следующим образом:


Поле name определяет, за что именно данный тег отвечает. Длина каждого поля content по стандарту ограничена килобайтом. Поле http-equiv означает, что данный мета-тег предназначен для управления браузером на стороне клиента.

Слайд 16

Троицкий Д.И. Интернет-технологии

Основные мета-теги



Троицкий Д.И. Интернет-технологии Основные мета-теги Тег, отвечающий за управление поисковыми роботами: индексировать
name="robots" content="index, follow">
Тег, отвечающий за управление поисковыми роботами: индексировать ли текущую страницу, индексировать ли страницы на которые есть ссылки с этой страницы.



Эти теги должны давать команду поисковой системе посещать данную страницу сайта так часто, как это прописано.



Слайд 17

Троицкий Д.И. Интернет-технологии


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

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


Этот тег контролирует занесение страниц в кэш-память компьютера.


Эта конструкция позволяет определять, в какой кодировке выдавать пользователю запрошенную страницу.

Слайд 18

Троицкий Д.И. Интернет-технологии

Дополнительные возможности

Пользуясь атрибутом bgcolor тега BODY, можно выкрасить фон документа

Троицкий Д.И. Интернет-технологии Дополнительные возможности Пользуясь атрибутом bgcolor тега BODY, можно выкрасить
в какой-нибудь один цвет. Однако вместо одноцветной заливки можно использовать картинку. Эта картинка будет, повторяясь, укладываться в экранное поле наподобие паркетных плиточек.

Фоновая картинка задается в теге BODY атрибутом background:

Если на странице присутствуют сокращения, то можно использовать тег acronym. Он создает всплывающую подсказку на сокращении.
Например:
ООП
Атрибут lang определяет (по стандарту ISO) используемый в сокращении язык.

Имя файла: ЯЗЫК-HTML.pptx
Количество просмотров: 100
Количество скачиваний: 0