Презентация на тему: Web- страницы. Язык HTML и др

Web- страницы. Язык HTML и др.
Web- страницы. Язык HTML и др.
Что такое Web- страницы?
Какие бывают Web- страницы?
Язык HTML
Тэги
Простейшая Web- страница
Редактор HEFS
Вставка тэгов в HEFS
Web- страницы. Язык HTML и др.
Заголовки: H1 … H6
Абзацы
Выравнивание
Абзацы в HEFS
Специальные символы
Специальные символы
Специальные символы в HEFS
Web- страницы. Язык HTML и др.
Маркированные списки
Нумерованные списки
Многоуровневые списки
Списки в HEFS
Web- страницы. Язык HTML и др.
Ссылки на другие страницы сайта
Примеры ( ссылки из файла rock.html )
Ссылки на другие сайты
Ссылки внутри страницы
Запуск почтовой программы
Гиперссылки в HEFS
Web- страницы. Язык HTML и др.
Содержание и оформление
Логическая разметка
Форматированный текст ( тексты программ)
Физическая разметка
Форматирование текста в HEFS
Кодирование цвета
Что такое CSS ?
Свойства элементов страницы
Подключение стилевого файла
Шрифты
Классы (стили оформления)
Размеры, выравнивание
Рамка и поля
Фоновый рисунок
Фоновый рисунок без повторения
Ссылки
Выделение отдельных слов
Web- страницы. Язык HTML и др.
Форматы рисунков
Фон страницы ( через CSS)
Рисунки в документе
Выравнивание
Отступы
Выравнивание и отступы ( CSS )
Другие атрибуты
Рисунок-гиперссылка
Рисунки в HEFS
Web- страницы. Язык HTML и др.
Простейшая таблица
Размеры (через CSS)
Выравнивание ( через CSS)
Фон и цвет текста ( CSS)
Отступы (CSS)
Объединение ячеек
Вложенные таблицы
Таблицы в HEFS
Web- страницы. Язык HTML и др.
Блоки ( DIV ) – любое содержимое
Блоки ( DIV ) – рамки и отступы
«Плавающие» блоки
Web- страницы. Язык HTML и др.
Что может Javascript ?
Основные принципы
Замена рисунка при движении мыши
Скрытый блок
Скрытый блок: оформление ссылки
Скрытый блок: как его открыть?
Формы
Форма: обращение к элементам
Конец фильма
1/80
Средняя оценка: 4.3/5 (всего оценок: 78)
Код скопирован в буфер обмена
Скачать (1037 Кб)
1

Первый слайд презентации: Web- страницы. Язык HTML и др

Введение Структура документа Списки Гиперссылки Оформление документа Рисунки Таблицы Фреймы Блоки ( DIV ) Понятие о JavaScript

Изображение слайда
2

Слайд 2: Web- страницы. Язык HTML и др

Тема 1. Введение

Изображение слайда
3

Слайд 3: Что такое Web- страницы?

3 Что такое Web- страницы? Гиперссылка – «активная»ссылка на другой документ. Гипертекст – текст, содержащий гиперссылки. Гипермедиа-документ – документ, включающий текст, рисунки, звуки, видео, в котором любой элемент может быть гиперссылкой. WWW (World Wide Web) – « всемирная паутина», служба Интернет для обмена информацией в виде гипертекста (и гипермедиа). Web- страница – текстовый файл, в котором описано размещение материала на экране. Браузер – программа для просмотра Web- страниц на экране ( Internet Explorer, Mozilla Firefox, Opera ).

Изображение слайда
4

Слайд 4: Какие бывают Web- страницы?

4 Какие бывают Web- страницы? статические – существуют на сервере в виде готовых файлов: *.htm, *.html динамические – полностью или частично создаются на сервере в момент запроса (выбор информации из базы данных) *.shtml, *.asp, *.pl, *.php позволяют выбирать информацию из базы данных по заранее неизвестным запросам дополнительная нагрузка на сервер загружаются медленнее

Изображение слайда
5

Слайд 5: Язык HTML

5 Язык HTML HTML = Hypertext Markup Language (язык разметки гипертекста) HTML – это не язык программирования! ! HTML -страница – это текстовый файл ( Блокнот ): <HTML> <HEAD> <TITLE> Моя страница </TITLE> </HEAD> <BODY> Привет! … </BODY> </HTML> index.html sail.jpg man.jpg sunset.jpg clock.avi ball.swf bee.wav images

Изображение слайда
6

Слайд 6: Тэги

6 Тэги Тэг – это команда языка HTML, которую выполняет браузер: непарные тэги парные тэги ( контейнеры ) <IMG SRC = "vasya.jpg"> вставить рисунок <TABLE> ... < / TABLE> открывающий закрывающий область действия тэга: описание таблицы

Изображение слайда
7

Слайд 7: Простейшая Web- страница

7 Простейшая Web- страница <HTML> <HEAD> <TITLE> Моя первая Web-страница </TITLE> </HEAD> <BODY> Привет! </BODY> </HTML> first.html <HEAD> <TITLE> Моя первая Web-страница </TITLE> </HEAD> шапка («голова») <BODY> Привет! </BODY> основная часть («тело»)

Изображение слайда
8

Слайд 8: Редактор HEFS

8 Редактор HEFS файловые операции буфер обмена один экран запуск браузера ( F9) назад вперед текстовый редактор браузер ( IE ) отмена

Изображение слайда
9

Слайд 9: Вставка тэгов в HEFS

9 Вставка тэгов в HEFS

Изображение слайда
10

Слайд 10: Web- страницы. Язык HTML и др

Тема 2. Структура документа. Специальные символы

Изображение слайда
11

Слайд 11: Заголовки: H1 … H6

11 Заголовки: H1 … H6 <BODY> <H1>Заголовок документа</H1> <H2>Заголовок раздела</H2> <H3>Заголовок подраздела</H3> <H4>Заголовок параграфа</H4> <H5>Комментарий</H5> <H6>Авторские пометки</H6> </BODY> выравнивание: <H1 ALIGN =center >История</H1> left, center, right

Изображение слайда
12

Слайд 12: Абзацы

12 Абзацы переход на новую строку абзац ( с отступами) И вечный бой! Покой нам только снится < BR > Сквозь кровь и пыль... < BR > Летит, летит степная кобылица < BR > И мнет ковыль... < P > Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее. < / P > < P > До самого вечера тело с варежками ... </ P >

Изображение слайда
13

Слайд 13: Выравнивание

13 Выравнивание <P ALIGN ="center " > Этот текст выровнен по центру. </P> <P ALIGN ="justify " > Этот текст выровнен по ширине. Этот текст выровнен по ширине. Этот текст выровнен по ширине. Этот текст выровнен по ширине. </P> left по левой границе right по правой границе center по центру justify по ширине Не используйте выравнивание по ширине для узких столбцов! ! атрибут тэга <P>

Изображение слайда
14

Слайд 14: Абзацы в HEFS

14 Абзацы в HEFS

Изображение слайда
15

Слайд 15: Специальные символы

15 Специальные символы Символ HTML-код Название – &mdash; (длинное) тире &nbsp; неразрывный пробел § & sect ; параграф © &copy; символ авторского права « &laquo; левая русская кавычка » &raquo; правая русская кавычка ® &reg; зарегистрированная торговая марка ° & deg ; градус ² & sup2 ; квадрат ³ & sup3 ; куб ¼ & frac14 ; четверть ½ & frac12 ; половина ¾ & frac34 ; три четверти × & times ; знак умножения ÷ & divide ; знак деления

Изображение слайда
16

Слайд 16: Специальные символы

16 Специальные символы А.С. & nbsp ; Пушкин & nbsp ; & mdash ; солнце русской поэзии. Дом сдали в 2011 & nbsp ; году. Пёс весил 12 &nbsp; кг. Из дома вышел А.С. Пушкин – солнце русской поэзии. Вышел А.С. Пушкин – солнце русской поэзии.

Изображение слайда
17

Слайд 17: Специальные символы в HEFS

17 Специальные символы в HEFS

Изображение слайда
18

Слайд 18: Web- страницы. Язык HTML и др

Тема 3. Списки

Изображение слайда
19

Слайд 19: Маркированные списки

19 Маркированные списки < UL > < LI >Вася < LI >Петя < LI >Коля </ UL > unordered list ( неупорядоченный список ) list item ( элемент списка ) изменение маркера: <UL TYPE ="disc"> ... </UL> disc  circle ○ square ■

Изображение слайда
20

Слайд 20: Нумерованные списки

20 Нумерованные списки < O L > < LI >Вася < LI >Петя < LI >Коля </ O L > ordered list ( упорядоченный список ) изменение нумерации: <OL TYPE =i START =3> ... </OL> 1, i, I, a, A

Изображение слайда
21

Слайд 21: Многоуровневые списки

21 Многоуровневые списки <UL> <LI>Города России <LI>Города Украины </UL> <OL>   <LI>Москва   <LI>Санкт-Петерург </OL> <OL>   <LI>Киев   <LI>Одесса </OL>

Изображение слайда
22

Слайд 22: Списки в HEFS

22 Списки в HEFS Ctrl-L вставить элемент списка <LI>

Изображение слайда
23

Слайд 23: Web- страницы. Язык HTML и др

Тема 4. Гиперссылки

Изображение слайда
24

Слайд 24: Ссылки на другие страницы сайта

24 Ссылки на другие страницы сайта < A HREF ="table.htm"> Таблицы </A> страница в той же папке anchor ( якорь) hyper reference ( гиперссылка) страница во вложенной папке <A HREF=" example/ ex1.htm"> Пример </A> страница в соседней папке <A HREF="../ texts/text1.htm"> Текст </A> выйти из текущей папки

Изображение слайда
25

Слайд 25: Примеры ( ссылки из файла rock.html )

25 Примеры ( ссылки из файла rock.html ) story.html stories – novels – new – old – list.html sea.html verse.html rock.html

Изображение слайда
26

Слайд 26: Ссылки на другие сайты

26 Ссылки на другие сайты <A HREF=" http:// www.mail.ru"> Почта </A> на главную страницу сайта index.htm, index.html, default.asp, … на конкретную страницу сайта ( URL ) <A HREF="http://www.vasya.ru /text/a.htm "> Васин текст </A> на файл для скачивания <A HREF="http://www.vasya.ru /prog.zip "> Скачать </A>

Изображение слайда
27

Слайд 27: Ссылки внутри страницы

27 Ссылки внутри страницы <A NAME= " up " ></A> <A HREF="#chap1"> Глава 1</A><br> <A HREF="#chap2"> Глава 2</A><br> <A NAME= " chap 1" ></A> <H1>Глава 1</H1> Это текст главы 1. Это текст главы 1. Это текст главы 1. Это текст главы 1.<BR> <A HREF="#up"> Наверх</A> <A NAME= " chap2 " ></A> <H1>Глава 2</H1> Это текст главы 2. Это текст главы 2. Это текст главы 2. Это текст главы 2.<BR> <A HREF="#up"> Наверх</A> в другом файле <A HREF="texts.html #color "> Цвет текста </A> метка (якорь) переход на метку

Изображение слайда
28

Слайд 28: Запуск почтовой программы

28 Запуск почтовой программы <A HREF=" mailto: vasya@mail.ru"> Напишите мне! </A>

Изображение слайда
29

Слайд 29: Гиперссылки в HEFS

29 Гиперссылки в HEFS локальная ссылка Автоматически строится относительный адрес! ! Ctrl-A гиперссылка на выделенный блок, адрес вводить вручную вставить только адрес файла

Изображение слайда
30

Слайд 30: Web- страницы. Язык HTML и др

Тема 5. Оформление документа. Стилевые файлы ( CSS )

Изображение слайда
31

Слайд 31: Содержание и оформление

31 Содержание и оформление <H1> Сборник задач по физике </H1> <P class=“author”> Григорий Остер </P> <H2> Задача 61 </H2> Петя ехал к бабушке на электричке, и всю дорогу над ним издевались какие-то два неведомые ему явления. Одно при каждой остановке толкало Петю вперед, а другое, когда вагон трогался – дергало назад. Что это за хулиганские явления, и может ли транспортная милиция с ними справиться? содержание ( контент ) логическая разметка ( *.html ) оформление физическая разметка ( *.css ) main.css mini.css print.css

Изображение слайда
32

Слайд 32: Логическая разметка

32 Логическая разметка выделение ( emphasize ) Это моя < EM > первая </ EM > победа. сильное выделение ( strong ) < STRONG > Вася </ STRONG > код программы < CODE >a:= 2*b</ CODE > определение ( definition ) < DFN > Сурок </ DFN > - это... цитата ( citation ) < CITE > Блажен, кто верует,... </ CITE > сокращение ( abbreviation ) < ABBR > НИИЧАВО </ ABBR >

Изображение слайда
33

Слайд 33: Форматированный текст ( тексты программ)

33 Форматированный текст ( тексты программ) program qq; var a, b: integer; begin writeln("Введите два числа"); read(a,b); writeln(a,'+',b,'=',a+b); end. < PRE > program qq; var a, b: integer; begin writeln("Введите два числа"); read(a,b); writeln(a,'+',b,'=',a+b); end. </ PRE > отформатированный текст ( preformatted )

Изображение слайда
34

Слайд 34: Физическая разметка

34 Физическая разметка курсив ( italic ) < I > Вася </ I > Вася жирный ( bold ) < B > Вася </ B > Вася подчеркивание ( underline ) < U > Вася </ U > Вася зачеркивание ( strike out ) < S > Вася </ S > Вася верхний индекс ( superscript ) Вася < SUP >2</ SUP > Вася 2 нижний индекс ( subscript ) Вася < SUB >2</ SUB > Вася 2

Изображение слайда
35

Слайд 35: Форматирование текста в HEFS

35 Форматирование текста в HEFS Ctrl-B

Изображение слайда
36

Слайд 36: Кодирование цвета

36 Кодирование цвета имена red, green, blue, magenta, black, шестнадцатеричные коды white # F A 8 0 7 2 R G B # F F 0 0 0 0 # F F F F F F # 0 0 F F F F # 0 0 0 0 0 0 # A A A A A A

Изображение слайда
37

Слайд 37: Что такое CSS ?

37 Что такое CSS ? HTML – язык логической разметки текста, определяющий содержание и структуру страницы (заголовки разных уровней, абзацы) HTML– код не должен содержать оформления! оформление частей документа (заголовков, параграфов) описывается в отдельном файле CSS = Cascading Style Sheets – каскадные таблицы стилей стилевые файлы: *.css HTML + CSS оформление содержание + Javascript анимация

Изображение слайда
38

Слайд 38: Свойства элементов страницы

38 Свойства элементов страницы body { color: white; background: #FF 66 00; } название тэга значение селектор color – цвет символов background – цвет фона my.css

Изображение слайда
39

Слайд 39: Подключение стилевого файла

39 Подключение стилевого файла <html> <head> <title> Пример CSS</title> <link rel =" stylesheet " href =" my.css "> </ head> <body> ... </body> </html> qq.html my.css body { color: white; background: #0000E0; } <body> ... </body>

Изображение слайда
40

Слайд 40: Шрифты

40 Шрифты p { font-family: Arial,sans-serif; font-size: 20px; font-style: italic; font-weight: bold; } для всех абзацев семейство шрифтов serif – с засечками sans-serif – без засечек monospace – моноширинный размер в пикселях normal – обычный italic - курсив normal – обычный bold - жирный

Изображение слайда
41

Слайд 41: Классы (стили оформления)

41 Классы (стили оформления) p. spec { font-style: italic; background: green; } для абзацев класса spec <p class=" spec "> L’Etat c’est moi. </p> qq.html L’Etat c’est moi. . spec { font-style: italic; background: green; } для всех элементов класса spec <h1 class=" spec "> Россия молодая </h1>

Изображение слайда
42

Слайд 42: Размеры, выравнивание

42 Размеры, выравнивание p { background: #E6E6FF; width: 80%; height: 100px; text-align: left; text-indent: 20px; } ширина высота Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis velit, tempus sit amet cursus at, porta ut turpis. Sed augue tellus, tincidunt id ultricies at, tempor quis sem. выравнивание: left center right justify 100px 80% 20px фон абзацный отступ

Изображение слайда
43

Слайд 43: Рамка и поля

43 Рамка и поля p { background: #ccffcc; border: 1px solid green; margin: 0 4 0px 20px 4 0px; padding: 5px; } рамка отступы снаружи отступы внутри сверху, справа, снизу, слева со всех сторон толщина solid – сплошная dashed - штриховая dotted – точечная цвет Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis velit, tempus sit amet cursus at, porta ut turpis. Sed augue tellus, tincidunt id ultricies at, tempor quis sem. 40px 40px 5px 20px

Изображение слайда
44

Слайд 44: Фоновый рисунок

p. hallo { background: white url(images/grad.jpg) ; } 44 Фоновый рисунок <p class=" hallo "> Привет, Вася! </p> Привет, Вася! p.hallo { background: url(grad.jpg) repeat-y ; } Привет, Вася!

Изображение слайда
45

Слайд 45: Фоновый рисунок без повторения

45 Фоновый рисунок без повторения p. email { background: url(letter.gif) no-repeat ; padding-left: 20px; } <p class=" email "> <a href ="mailto:qq@mail.ru">qq@mail.ru</a> </p> qq@mail.ru qq@mail.ru 20px

Изображение слайда
46

Слайд 46: Ссылки

46 Ссылки p.email a { color: green; text-decoration:none; } p.email a:hover { color: #00F; text-decoration:underline; } p.email a:visited { color: #F0F; } ссылки внутри абзаца стиля email убрать подчеркивание посещённые ссылки подчеркнуть когда мышь над ссылкой

Изображение слайда
47

Слайд 47: Выделение отдельных слов

47 Выделение отдельных слов .latin { color: green; font-style: italic; } класс, применимый ко всему курсив <p> Собака(лат. <span class=" latin "> Canis lupus familiaris </span> ) — одно из наиболее Домашних "животных-компаньонов". </p> Что хочется исправить? !

Изображение слайда
48

Слайд 48: Web- страницы. Язык HTML и др

Тема 6. Рисунки

Изображение слайда
49

Слайд 49: Форматы рисунков

49 Форматы рисунков GIF (Graphic Interchange Format) сжатие без потерь прозрачные области анимация только с палитрой (2…256 цветов) рисунки с четкими границами, мелкие рисунки JPEG (Joint Photographer Expert Group) сжатие с потерями только True Color ( 16,7 млн. цветов ) нет анимации и прозрачности рисунки с размытыми границами, фото PNG (Portable Network Graphic) сжатие без потерь с палитрой ( PNG-8) и True Color (PNG -24 ) прозрачность и полупрозрачность (альфа-канал) нет анимации плохо сжимает мелкие рисунки

Изображение слайда
50

Слайд 50: Фон страницы ( через CSS)

50 Фон страницы ( через CSS) body { background : url(back.jpg); } 'images/back.jpg' '../images/back.jpg‘ 'http://www.vasya.ru/images/back.jpg' Не должно быть «швов»! ! Фон не должен мешать! ! #6e5c62;

Изображение слайда
51

Слайд 51: Рисунки в документе

51 Рисунки в документе < IMG SRC ="flag.jpg"> < IMG SRC ="images/flag.jpg"> < IMG SRC ="../../images/night.jpg"> < IMG SRC ="http://example.com/img/night.jpg"> из той же папки: из другой папки: с другого сервера: image ( изображение ) source ( источник )

Изображение слайда
52

Слайд 52: Выравнивание

52 Выравнивание <IMG SRC="flag.jpg" ALIGN ="left"> left right top bottom ( по умолчанию ) middle

Изображение слайда
53

Слайд 53: Отступы

53 Отступы <IMG SRC="net.jpg" ALIGN="left"> <IMG SRC="net.jpg" ALIGN="left " HSPACE =10 VSPACE =10> VSPACE ( vertical space ) HSPACE ( horizontal space )

Изображение слайда
54

Слайд 54: Выравнивание и отступы ( CSS )

54 Выравнивание и отступы ( CSS ) <img src="net.jpg" class="left" > img.left { float: left; margin: 5px 10px; } = VSPACE = HSPACE = ALIGN margin: 5px 10px 5 px 0; отступа слева нет!

Изображение слайда
55

Слайд 55: Другие атрибуты

55 < img src ="night.jpg" alt = "Фото: Ладога" title =" Ночь на Ладоге" width ="800" height ="600"> надпись на месте рисунка, если его нет размеры позволяют: растянуть – сжать не портить дизайн, если рисунка нет всплывающая подсказка

Изображение слайда
56

Слайд 56: Рисунок-гиперссылка

56 Рисунок-гиперссылка <A HREF="http://www.mail.ru"> <IMG SRC="mailru.jpg" ALT=" Бесплатная почта " BORDER =0></A> < A HREF="table.htm"> <IMG SRC="tbl.jpg" ALT=" Таблицы " BORDER =0> </ A > локальная ссылка: ссылка на другой сервер: иначе будет синяя рамка вокруг если </A> не вплотную к <IMG …>, будет «хвост» не будет «хвоста»

Изображение слайда
57

Слайд 57: Рисунки в HEFS

57 Рисунки в HEFS вставить рисунок Автоматически вставляются размеры! !

Изображение слайда
58

Слайд 58: Web- страницы. Язык HTML и др

Тема 7. Таблицы

Изображение слайда
59

Слайд 59: Простейшая таблица

59 Простейшая таблица < TABLE BORDER="1"> < TR > < TD >Таблица из одной строки</ TD > < TD >из трех столбцов</ TD > < TD >без указания ширины таблицы и ячеек.</ TD > </ TR > </ TABLE > толщина рамки TABLE таблица TR = table row строка таблицы TD = table data данные таблицы TH = table header заголовок (жирный, по центру)

Изображение слайда
60

Слайд 60: Размеры (через CSS)

60 Размеры (через CSS) table.spec { width : 60%; height : 300px; } table.spec tr { height : 50px; } всей таблицы: строки: ячейки: table.spec td.qq { width : 2 5 % ; height : 50px; } <table class="spec" > ... </table>

Изображение слайда
61

Слайд 61: Выравнивание ( через CSS)

61 Выравнивание ( через CSS) <table class="ex" border="1"> <tr class="centop" > <td>По центру, по верхней границе</td> <td class="rmid" >По правой границе, по середине</td> </tr> </table> table.ex tr.centop { text-align : center; vertical-align : top; height:100px; } table.ex td.rmid { text-align : right; vertical-align : middle; width:200px; } left, center, right top, middle, bottom

Изображение слайда
62

Слайд 62: Фон и цвет текста ( CSS)

62 Фон и цвет текста ( CSS) <table border="1" class= " qq " > <tr class="spec" > <td> Привет!</ td> <td class="r" ></td> </tr> <tr> <td class="pic" > Таблица из двух строк</ td> <td> и двух столбцов</ td> </tr> </table> table.qq td { background: green; } table.qq tr.spec td { background : blue; color : white; } table.qq tr.spec td.r { background: red; } table.qq td.pic { background : url ("web.jpg"); } цвет фона рисунок

Изображение слайда
63

Слайд 63: Отступы (CSS)

63 Отступы (CSS) <table id=" qq " > < tr > <td> 1 </td> <td> 2 </td> </ tr > </table> border-spacing border-spacing padding padding table#qq { background: blue; border-collapse : separate; border-spacing : 10px; padding : 10px; } # qq tr { background: white; } кроме IE 6

Изображение слайда
64

Слайд 64: Объединение ячеек

64 Объединение ячеек <TABLE BORDER="1"> <TR> <TD COLSPAN ="3">Привет!</TD> </TR> <TR> <TD>Вася,</TD> <TD>Петя,</TD> <TD>Маша!</TD> </TR> </TABLE> <TABLE BORDER="1"> <TR> <TD ROWSPAN ="3">Привет!</TD> <TD>Вася,</TD> </TR> <TR><TD>Петя,</TD></TR> <TR><TD>Маша!</TD></TR> </TABLE> column span охват столбцов row span охват строк

Изображение слайда
65

Слайд 65: Вложенные таблицы

65 Вложенные таблицы <TABLE BORDER="0" CELLSPACING=10> <TR><TD> </TD> <TD> </TD></TR> </TABLE> <TABLE BORDER="1"> <TR><TD>Вася</TD><TD>Петя</TD></TR> <TR><TD>Маша</TD><TD>Даша</TD></TR> </TABLE> <TABLE BORDER="1"> <TR><TD>1</TD><TD>22</TD></TR> <TR><TD>333</TD><TD>4444</TD></TR> </TABLE>

Изображение слайда
66

Слайд 66: Таблицы в HEFS

66 Таблицы в HEFS

Изображение слайда
67

Слайд 67: Web- страницы. Язык HTML и др

Тема 9. Блоки ( DIV )

Изображение слайда
68

Слайд 68: Блоки ( DIV ) – любое содержимое

68 Блоки ( DIV ) – любое содержимое <div id="mix" > <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et mauris. </p> <img src="vasya.jpg"> <table> <tr><td>1</td></td></tr> </table> </div>

Изображение слайда
69

Слайд 69: Блоки ( DIV ) – рамки и отступы

69 Блоки ( DIV ) – рамки и отступы Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et mauris. In hac habitasse platea dictumst. Cras dapibus nulla ac metus commodo viverra eget vitae erat. Donec ut mi tellus. Mauris eu turpis vel tellus tincidunt pulvinar. padding border margin #qq { padding: 5px 10px; border: 1px solid green; margin: 5px 15px 5px 10px; }

Изображение слайда
70

Слайд 70: Плавающие» блоки

70 «Плавающие» блоки .picture { float: left; margin: 5px; } .picture p { margin: 0; text-align: center; font-family: sans-serif; font-size: 80%; font-weight: bold; } <div class="picture"> <img src="dog.jpg"> < p >На природе</ p > </ div > свойства блока свойства абзаца внутри блока

Изображение слайда
71

Слайд 71: Web- страницы. Язык HTML и др

Тема 10. Понятие о Javascript

Изображение слайда
72

Слайд 72: Что может Javascript ?

72 Что может Javascript ? информация статична нет интерактивности (только переход на другую страницу) Чем плоха HTML- страница? Что можно сделать с помощью Javascript ? изменение рисунка при наведении мыши выпадающие меню всплывающие подсказки фотогалерея без перегрузки страницы движение объекта по экрану Javascript может быть отключен в браузере

Изображение слайда
73

Слайд 73: Основные принципы

73 Основные принципы каждый элемент на странице (текст, рисунок, таблица) – это объект, имеющий свои свойства свойства объекта можно менять из программы на Javascript ( скрипта ) все, что происходит – это события все события можно « обрабатывать », т.е. как-то реагировать на них Javascript – это язык программирования! ! HTML + Javascript = DHTML (Dynamic HTML)

Изображение слайда
74

Слайд 74: Замена рисунка при движении мыши

74 Замена рисунка при движении мыши <IMG SRC="image1.gif"       onMouseOver ="this.src= ' image2.gif ' "       onMouseOut ="this.src= ' image1.gif ' "> когда курсор мыши над рисунком после ухода мыши События : onMouseOver – курсор мыши над объектом onMouseOut – курсор мыши ушел с объекта начальный рисунок this – этот объект this.src – свойство SRC этого объекта

Изображение слайда
75

Слайд 75: Скрытый блок

75 Скрытый блок <div id="details" class="hidden" > Детали &#151; это гайка, шайба, болт, винт, шуруп, гвоздь и др. </div> .hidden { display:none; }

Изображение слайда
76

Слайд 76: Скрытый блок: оформление ссылки

76 Скрытый блок: оформление ссылки <a href="#" onClick="show('details');return false;" > Показать детали </a> остаться на странице по щелчку вызвать функцию show переход не выполнять

Изображение слайда
77

Слайд 77: Скрытый блок: как его открыть?

77 function show ( name ) { var elem = document.getElementById(name); if ( elem ) elem.style.display = "block"; } <head> <script type="text/javascript" src="test.js"> </script> </head> test.js найти блок по имени изменить свойство display

Изображение слайда
78

Слайд 78: Формы

78 <form name="calc"> < input name="answer"> < input type="button" value="Готово" onClick="check();" > </form> надпись на кнопке имя формы имя элемента делать по щелчку

Изображение слайда
79

Слайд 79: Форма: обращение к элементам

79 function check() { if ( calc.answer.value == "4" ) alert ("Правильно!"); else alert ("Неправильно!"); } test.js вывести сообщение

Изображение слайда
80

Последний слайд презентации: Web- страницы. Язык HTML и др: Конец фильма

80 Конец фильма ПОЛЯКОВ Константин Юрьевич д.т.н., учитель информатики высшей категории, ГОУ СОШ № 163, г. Санкт-Петербург kpolyakov@mail.ru

Изображение слайда