« 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-апплеты Внедрение объектов. Тег Внедрение объектов. Тег <OBJECT> Преход к языку 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 редакторе

То же самое расположение изображений можно реализовать с помощью слоев. <div id="Layer2" style="position:absolute; left:340px; top:148px; width:154px; height:148px; z-index:2">

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

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

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

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

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

Технология активных серверных страниц. ASP Simple ASP Example <% Dim strGreeting If Hour(Now) < 12 Then strGreeting = "Good Morning!" ElseIf Hour(Now) > 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. <APPLET CODE=hello width=200 height=100>

В общем случае контейнер АРРLЕТ имеет следующий вид: <applet [codebase = codebase url] code = applet.class [alt = text] [name= applet name] width = number of pixels height = number of pixels [align = alignment] [vspace=number of picsels] [hspace=number of pixels] [ ] [HTML text]

Внедрение объектов. Тег Movie1 <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B " codebase=" ID=Movie1 WIDTH=250 HEIGHT=200> <EMBED src="Movie1.swf" quality=high bgcolor=#FFFFFF WIDTH=250 HEIGHT=200 TYPE="application/x-shockwave-flash" PLUGINSPAGE=" ShockwaveFlash"> classid = uriuri