Язык программирования HTML

Цель урока: Получить представление об основных средствах языка HTML Научится пользоваться языком HTML Научится создавать Web страницы

План урока История языка HTML Структура простейшего HTML документа Гиперссылки Оформление внешнего вида документа CSS. Каскадные таблицы стилей. Слои (Layers) Слои (Layers) META-теги META-теги Формы Технология Server Side Include (SSI) Технология Server Side Include (SSI) Скрипты в HTML документах Скрипты в HTML документах DHTML. Динамический HTML DHTML. Динамический HTML Технология активных серверных страниц. ASP Технология активных серверных страниц. ASP JAVA-апплеты JAVA-апплеты Внедрение объетов. Тег Внедрение объетов. Тег Преход к языку XML Преход к языку XML

История развития языка HTML

Структура простейшего HTML документа test

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

тег разбиения текста на абзацы

Гиперссылки коллекция бесплатных программ Одна из лучших коллекций бесплатных программ

Включение изображения изображение

Все документы и элементы сайта должны размещаться в одной папке или во вложенных в нее.

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

CSS. Каскадные таблицы стилей

Полный HTML код будет выглядеть так: пример использования CSS оформленный текст

Изменение свойства стилей

Слои (Layers) (таблица шириной в 100% по отношению к пространству страницы, толщина рамки 0, расстояние между ячейками 0, отступ содержимого ячейки от ее границ 0) (начало 1 строки таблицы) (1 столбец 1 строка) (2 столбец 1 строка) (3 столбец 1 строка) (начало 2 строки таблицы) (1 столбец 2 строка) (2 столбец 2 строка) (3 столбец 2 строка (конец таблицы)

Соответствующий HTML код, при использовании таблицы, будет выглядеть так

Вид в Web редакторе

То же самое расположение изображений можно реализовать с помощью слоев.

Пример: Изображение во втором слое располагается над изображением в первом потому, что второй слой имеет z-index:2, а первый z-index:1.

Учебный класс Второй слой id="Layer2" имеет фоновый цвет layer- background-color: #CCFFCC; и в нем располагается текст.

META-теги пример мета-тегов

Формы имя ваши комментарии:

Скрипты в HTML документах \function calculation() { var x= 12; var y= 5; var result= x + y; alert(result);

Технология активных серверных страниц. ASP Simple ASP Example 11 And Hour(Now) < 18 Then strGreeting = "Good Afternoon" ElseIf Hour(Now) > 17 Then strGreeting = "Good Evening!" End If %>

Если системное время на сервере, например, больше 17 часов, то броузер посетителя получит следующий HTML-документ Simple ASP Example Good Evening!

JAVA-апплеты Документ со встроенной ссылкой на applet.

В общем случае контейнер АРРLЕТ имеет следующий вид:

Внедрение объектов. Тег Movie1 classid = uriuri

Итог урока