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

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

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

3 План урока История языка 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

29 Итог урока