Презентация "Web-страницы. Язык HTML и др."
Подписи к слайдам:
Web-страницы.
Язык HTML и др.
Специальные символы
Форматированный текст (тексты программ)
Форматирование текста в HEFS
- Введение
- Структура документа
- Списки
- Гиперссылки
- Оформление документа
- Рисунки
- Таблицы
- Фреймы
- Блоки (DIV)
- Понятие о JavaScript
- Тема 1. Введение
- <number>
- Гиперссылка – «активная»ссылка на другой документ.
- Гипертекст – текст, содержащий гиперссылки.
- Гипермедиа-документ – документ, включающий текст, рисунки, звуки, видео, в котором любой элемент может быть гиперссылкой.
- WWW (World Wide Web) – «всемирная паутина», служба Интернет для обмена информацией в виде гипертекста (и гипермедиа).
- Web-страница – текстовый файл, в котором описано размещение материала на экране.
- Браузер – программа для просмотра Web-страниц на экране (Internet Explorer, Mozilla Firefox, Opera).
- <number>
- статические – существуют на сервере в виде готовых файлов: *.htm, *.html
- динамические – полностью или частично создаются на сервере в момент запроса (выбор информации из базы данных) *.shtml, *.asp, *.pl, *.php
- позволяют выбирать информацию из базы данных по заранее неизвестным запросам
- дополнительная нагрузка на сервер
- загружаются медленнее
- <number>
- 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
- <number>
- Тэг – это команда языка HTML, которую выполняет браузер:
- непарные тэги
- парные тэги (контейнеры)
- <IMG SRC = "vasya.jpg">
- вставить рисунок
- <TABLE>
- ...
- </TABLE>
- открывающий
- закрывающий
- область действия тэга: описание таблицы
- <number>
- <HTML>
- <HEAD>
- <TITLE>Моя первая
- Web-страница</TITLE>
- </HEAD>
- <BODY>
- Привет!
- </BODY>
- </HTML>
- first.html
- <HEAD>
- <TITLE>Моя первая
- Web-страница</TITLE>
- </HEAD>
- шапка («голова»)
- <BODY>
- Привет!
- </BODY>
- основная часть («тело»)
- <number>
- файловые операции
- буфер обмена
- один экран
- запуск
- браузера (F9)
- назад
- вперед
- текстовый редактор
- браузер (IE)
- отмена
- <number>
- Тема 2. Структура документа.
- Специальные символы
- <number>
- <BODY>
- <H1>Заголовок документа</H1>
- <H2>Заголовок раздела</H2>
- <H3>Заголовок подраздела</H3>
- <H4>Заголовок параграфа</H4>
- <H5>Комментарий</H5>
- <H6>Авторские пометки</H6>
- </BODY>
- выравнивание:
- <H1 ALIGN=center>История</H1>
- left,
- center,
- right
- <number>
- переход на новую строку
- абзац (с отступами)
- И вечный бой! Покой
- нам только снится<BR>
- Сквозь кровь и пыль...<BR>
- Летит, летит степная
- кобылица<BR>
- И мнет ковыль...
- <P>
- Одно физическое тело захотело поменять три своих старых варежки
- на что-нибудь хорошее. </P>
- <P> До самого вечера тело с варежками ...
- </P>
- <number>
- <P ALIGN="center">
- Этот текст выровнен по центру.
- </P>
- <P ALIGN="justify">
- Этот текст выровнен по ширине.
- Этот текст выровнен по ширине.
- Этот текст выровнен по ширине.
- Этот текст выровнен по ширине. </P>
- left по левой границе
- right по правой границе
- center по центру
- justify по ширине
- Не используйте выравнивание по ширине для узких столбцов!
- !
- атрибут тэга <P>
- <number>
- <number>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- <number>
- А.С. Пушкин — солнце русской поэзии.
- Дом сдали в 2011 году.
- Пёс весил 12 кг.
- Из дома вышел А.С. Пушкин – солнце
- русской поэзии.
- Вышел А.С. Пушкин – солнце русской поэзии.
- <number>
- Тема 3. Списки
- <number>
- <UL>
- <LI>Вася
- <LI>Петя
- <LI>Коля
- </UL>
- unordered list (неупорядоченный список)
- list item (элемент списка)
- изменение маркера:
- <UL TYPE="disk">
- ...
- </UL>
- disk
- circle ○
- square ■
- <number>
- <OL>
- <LI>Вася
- <LI>Петя
- <LI>Коля
- </OL>
- ordered list (упорядоченный список)
- изменение нумерации:
- <OL TYPE=i START=3>
- ...
- </OL>
- 1, i, I, a, A
- <number>
- <DL>
- <DT>компьютер
- <DD>устройство для обработки информации
- <DT>дискета
- <DD>гибкий магнитный диск
- <DT>винчестер
- <DD>жесткий магнитный диск
- </DL>
- definition list (список определений)
- definition term (термин)
- definition description (описание)
- <number>
- <UL> <LI>Города России
- <LI>Города Украины
- </UL>
- <OL> <LI>Москва <LI>Санкт-Петерург </OL>
- <OL> <LI>Киев <LI>Одесса </OL>
- <number>
- Ctrl-L вставить элемент списка <LI>
- Тема 4. Гиперссылки
- <number>
- <A HREF="table.htm">Таблицы</A>
- страница в той же папке
- anchor (якорь)
- hyper reference (гиперссылка)
- страница во вложенной папке
- <A HREF="example/ex1.htm">Пример</A>
- страница в соседней папке
- <A HREF="../texts/text1.htm">Текст</A>
- выйти из текущей папки
- <number>
- story.html
- stories
- –
- novels
- –
- new
- –
- old
- –
- list.html
- sea.html
- verse.html
- rock.html
- <number>
- <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>
- <number>
- <A NAME="up"></A>
- <A HREF="#chap1">Глава 1</A><br>
- <A HREF="#chap2">Глава 2</A><br>
- <A NAME="chap1"></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>
- метка (якорь)
- переход на метку
- <number>
- <A HREF="mailto:[email protected]">
- Напишите мне!
- </A>
- <number>
- локальная ссылка
- Автоматически строится относительный адрес!
- !
- Ctrl-A гиперссылка на выделенный блок, адрес вводить вручную
- вставить только адрес файла
- Тема 5. Оформление документа. Стилевые файлы (CSS)
- <number>
- <H1>Сборник задач по физике</H1>
- <P class=“author”>Григорий Остер</P>
- <H2>Задача 61</H2> Петя ехал к бабушке на электричке, и всю дорогу над ним издевались какие-то два неведомые ему явления. Одно при каждой остановке толкало Петю вперед, а другое, когда вагон трогался – дергало назад. Что это за хулиганские явления, и может ли транспортная милиция с ними справиться?
- содержание (контент)
- логическая разметка
- (*.html)
- оформление
- физическая разметка
- (*.css)
- main.css
- mini.css
- print.css
- <number>
|
|
|
|
|
|
|
|
|
|
|
|
- <number>
- 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)
- <number>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- <number>
- Ctrl-B
- <number>
- цвет фона и текста
- цвет гиперссылок
- <BODY TEXT="white" BGCOLOR=#00FF00>
- Привет!
- </BODY>
- <BODY LINK="#FF8C00" VLINK=green>
- ...
- </BODY>
- цвет текста
- цвет фона
- посещенные ссылки
- (visited link)
- цвет ссылок
- атрибуты тэга
- <number>
- вставить только код цвета
- <number>
- <BODY LINK="#FF8C00" VLINK=green ALINK=red>
- ...
- </BODY>
- LINK ссылки, на которых не были
- VLINK посещенные ссылки
- ALINK активные ссылки
- <number>
- цвет текста
- размер шрифта
- Привет!
- <FONT COLOR=red>
- Как дела?
- </FONT>
- Привет!
- <FONT COLOR=red
- SIZE=6>
- Как дела?
- </FONT>
- от 1 до 7
- (3 – нормальный)
- <number>
- <HR>
- <HR WIDTH="60%" SIZE="3" ALIGN="right">
- horizontal rule
- ширина в пикселях или процентах
- толщина
- выравнивание
- Не рекомендуется использовать – лучше заголовки разделов!
- !
- <number>
- имена
- 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
- <number>
- HTML – язык логической разметки текста, определяющий содержание и структуру страницы (заголовки разных уровней, абзацы)
- HTML–код не должен содержать оформления!
- оформление частей документа (заголовков, параграфов) описывается в отдельном файле
- CSS = Cascading Style Sheets – каскадные таблицы стилей
- стилевые файлы: *.css
- HTML + CSS
- оформление
- содержание
- + Javascript
- анимация
- <number>
- body {
- color: white;
- background: #FF6600;
- }
- название тэга
- свойство
- селектор
- color – цвет символов
- background – цвет фона
- my.css
- значение
- <number>
- <html>
- <head>
- <title>Пример CSS</title>
- <link rel="stylesheet" href="my.css"
- type="text/css">
- </head>
- <body>
- ...
- </body>
- </html>
- qq.html
- my.css
- body {
- color: white;
- background: #0000E0;
- }
- <body>
- ...
- </body>
- <number>
- p {
- font-family: Arial,sans-serif;
- font-size: 20px;
- font-style: italic;
- font-weight: bold;
- }
- для всех абзацев
- семейство шрифтов
- serif – с засечками
- sans-serif – без засечек
- monospace – моноширинный
- размер в пикселях
- normal – обычный
- italic - курсив
- normal – обычный
- bold - жирный
- <number>
- 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>
- <number>
- 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
- фон
- абзацный отступ
- <number>
- p {
- background: #ccffcc;
- border: 1px solid green;
- margin: 0 40px 20px 40px;
- 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
- p.hallo {
- background: white url(images/grad.jpg);
- }
- <number>
- <p class="hallo">
- Привет, Вася!
- </p>
- Привет, Вася!
- p.hallo {
- background: url(grad.jpg) repeat-y;
- }
- Привет, Вася!
- <number>
- p.email {
- background: url(letter.gif) no-repeat;
- padding-left: 20px;
- }
- <p class="email">
- <a href="mailto:[email protected]">[email protected]</a>
- </p>
- 20px
- <number>
- p.email a {
- color: green;
- text-decoration:none;
- }
- p.email a:hover {
- color: #00F;
- text-decoration:underline;
- }
- p.email a:visited {
- color: #F0F;
- }
- ссылки внутри абзаца стиля email
- убрать подчеркивание
- посещённые ссылки
- подчеркнуть
- когда мышь над ссылкой
- <number>
- .latin {
- color: green;
- font-style: italic;
- }
- класс, применимый ко всему
- курсив
- <p>
- Собака(лат.
- <span class="latin">Canis lupus
- familiaris</span>) — одно из наиболее
- Домашних "животных-компаньонов".
- </p>
- Что хочется исправить?
- !
- Тема 6. Рисунки
- <number>
- 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)
- прозрачность и полупрозрачность (альфа-канал)
- нет анимации
- плохо сжимает мелкие рисунки
- <number>
- body {
- background: url(back.jpg);
- }
- 'images/back.jpg'
- '../images/back.jpg‘
- 'http://www.vasya.ru/images/back.jpg'
- Не должно быть «швов»!
- !
- Фон не должен мешать!
- !
- #6e5c62;
- <number>
- <IMG SRC="flag.jpg">
- <IMG SRC="images/flag.jpg">
- <IMG SRC="../images/flag.jpg">
- <IMG SRC="http://www.vasya.ru/img/flag.jpg">
- из той же папки:
- из другой папки:
- с другого сервера:
- image (изображение)
- source (источник)
- <number>
- <IMG SRC="flag.jpg" ALIGN="left">
- left
- right
- top
- bottom
- (по умолчанию)
- middle
- <number>
- <IMG SRC="net.jpg" ALIGN="left">
- <IMG SRC="net.jpg" ALIGN="left" HSPACE=10 VSPACE=10>
- VSPACE
- (vertical space)
- HSPACE
- (horizontal space)
- <number>
- <img src="net.jpg" class="left">
- img.left {
- float: left;
- margin: 5px 10px;
- }
- = VSPACE
- = HSPACE
- = ALIGN
- margin: 5px 10px 5px 0;
- отступа слева нет!
- <number>
- <IMG SRC="myphoto.jpg" ALT="Моя фотография" WIDTH=100 HEIGHT=150 BORDER=0>
- всплывающая подсказка
- надпись на месте рисунка, если его нет
- размеры позволяют:
- растянуть - сжать
- не портить дизайн, если рисунка нет
- толщина рамки вокруг рисунка
- <number>
- <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 …>, будет «хвост»
- не будет «хвоста»
- <number>
- вставить рисунок
- Автоматически вставляются размеры!
- !
- Тема 7. Таблицы
- <number>
- <TABLE BORDER="1">
- <TR>
- <TD>Таблица из одной строки</TD>
- <TD>из трех столбцов</TD>
- <TD>без указания ширины таблицы
- и ячеек.</TD>
- </TR>
- </TABLE>
- толщина рамки
- TABLE таблица
- TR = table row строка таблицы
- TD = table data данные таблицы
- TH = table header заголовок (жирный, по центру)
- <number>
- <TABLE WIDTH="60%" HEIGHT="300">
- ...
- </TABLE>
- ширина в пикселях или в % от ширины окна браузера
- высота в пикселях
- <TR HEIGHT="50">
- ...
- </TR>
- всей таблицы:
- строки:
- ячейки:
- <TD WIDTH="25%" HEIGHT="50">
- ...
- </TD>
- ширина в пикселях или в % от ширины таблицы
- <number>
- table.spec {
- width: 60%;
- height: 300;
- }
- table.spec tr {
- height: 50px;
- }
- всей таблицы:
- строки:
- ячейки:
- table.spec td.qq {
- width: 25%;
- height: 50px;
- }
- <table class="spec">
- ...
- </table>
- <number>
- <TABLE BORDER="1">
- <TR ALIGN="center"
- VALIGN="top">
- <TD WIDTH=120 HEIGHT=100>По
- центру, по верхней границе</TD>
- <TD ALIGN="right" VALIGN="middle"
- WIDTH=200>По правой границе,
- по середине</TD>
- </TR>
- </TABLE>
- <TABLE ALIGN="center">
- ...
- </TABLE>
- всей таблицы:
- информации в ячейках:
- left,
- center,
- right
- left,
- center,
- right
- top,
- middle,
- bottom
- <number>
- <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
- <number>
- <TABLE BORDER="1" BGCOLOR="green">
- <TR HEIGHT=30 BGCOLOR="blue">
- <TD><FONT COLOR="white">Привет!</FONT></TD>
- <TD BGCOLOR="red"></TD>
- </TR>
- <TR>
- <TD BACKGROUND="web.jpg">Таблица из двух строк</TD>
- <TD>и двух столбцов</TD>
- </TR>
- </TABLE>
- цвет фона
- фоновый рисунок
- <number>
- <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");
- }
- цвет фона
- рисунок
- <number>
- <TABLE CELLSPACING = 10 CELLPADDING = 10
- BGCOLOR = blue>
- <TR BGCOLOR = white>
- <TD WIDTH = 100>1</TD>
- <TD WIDTH = 100>2</TD>
- </TR>
- </TABLE>
- интервал между ячейками
- отступ внутри ячеек
- CELLSPACING
- CELLSPACING
- CELLPADDING
- CELLPADDING
- <number>
- <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
- <number>
- <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 охват строк
- <number>
- <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>
- <number>
- Тема 8. Фреймы
- <number>
- Фрейм (frame) – это часть сложной Web-страницы, в которую может быть загружена другая Web-страница.
- 3 файла:
- left.html – страница в левой части
- right.html – страница в правой части
- index.html – описание структуры
- <number>
- index.html
- <HTML>
- <HEAD>
- <TITLE>Фреймы-столбцы</TITLE>
- </HEAD>
- <FRAMESET COLS="30%,*">
- <FRAME SRC="left.html">
- <FRAME SRC="right.html" NAME="qq">
- </FRAMESET>
- </HTML>
- <BODY>
- ...
- </BODY>
- columns
- столбцы
- ширина в пикселях или %
- все остальное место
- source
- источник
- имя фрейма (для ссылок)
- <number>
- <FRAMESET COLS="30%,*" FRAMESPACING="10">
- ...
- </FRAMESET>
- <FRAMESET COLS="30%,*" FRAMEBORDER="0">
- ...
- </FRAMESET>
- граница между фреймами:
- 0 – невидима, 1 - видима
- ширина полосы между фреймами, за которую можно перетащить границу
- <number>
- <FRAME SRC="a.htm" MARGINWIDTH="0"
- MARGINHEIGHT="0"
- NORESIZE
- SCROLLING="auto">
- убрать отступы от края фрейма до содержимого
- полоса прокрутки:
- auto – появляется, когда надо
- yes – есть всегда
- no – нет никогда
- запретить изменение размеров
- <number>
- index.html
- <HTML>
- <HEAD>
- <TITLE>Фреймы-строки</TITLE>
- </HEAD>
- <FRAMESET ROWS="120,*">
- <FRAME SRC="up.html">
- <FRAME SRC="down.html"
- NAME="qq">
- </FRAMESET>
- </HTML>
- строки
- ширина в пикселях или %
- <number>
- index.html
- <FRAMESET COLS="30%,*">
- <FRAME SRC="left.html">
- </FRAMESET>
- <FRAMESET ROWS="40,*">
- <FRAME SRC="up.html">
- <FRAME SRC="down.html">
- </FRAMESET>
- <number>
- <FRAME ... NAME="qq">
- <A HREF="chapter2.htm"
- TARGET="qq">Глава 2</A>
- TARGET
- _blank – в новом окне
- _parent – в родительском окне
- _top – в главном окне
- (убрать фреймы)
- <number>
- <number>
- переключение страниц
- закрыть текущую страницу (Ctrl-W)
- просмотр активной страницы
- Тема 9. Блоки (DIV)
- <number>
- <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>
- <number>
- 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;
- }
- <number>
- .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>
- свойства блока
- свойства абзаца внутри блока
- Тема 10. Понятие о Javascript
- <number>
- информация статична
- нет интерактивности (только переход на другую страницу)
- Чем плоха HTML-страница?
- Что можно сделать с помощью Javascript?
- изменение рисунка при наведении мыши
- выпадающие меню
- всплывающие подсказки
- фотогалерея без перегрузки страницы
- движение объекта по экрану
- Javascript может быть отключен в браузере
- <number>
- каждый элемент на странице (текст, рисунок, таблица) – это объект, имеющий свои свойства
- свойства объекта можно менять из программы на Javascript (скрипта)
- все, что происходит – это события
- все события можно «обрабатывать», т.е. как-то реагировать на них
- Javascript – это язык программирования!
- !
- HTML + Javascript = DHTML (Dynamic HTML)
- <number>
- <IMG SRC="image1.gif" onMouseOver="this.src='image2.gif'" onMouseOut="this.src='image1.gif'">
- когда курсор мыши над рисунком
- после ухода мыши
- События:
- onMouseOver – курсор мыши над объектом
- onMouseOut – курсор мыши ушел с объекта
- начальный рисунок
- this – этот объект
- this.src – свойство SRC этого объекта
- <number>
- <div id="details" class="hidden">
- Детали — это гайка, шайба, болт, винт, шуруп, гвоздь и др.
- </div>
- .hidden {
- display:none;
- }
- <number>
- <a href="#"
- onClick="show('details');return false;">
- Показать детали
- </a>
- остаться на странице
- по щелчку вызвать функцию show
- переход не выполнять
- <number>
- 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
- <number>
- <form name="calc">
- <input name="answer">
- <input type="button"
- value="Готово" onClick="check();">
- </form>
- надпись на кнопке
- имя формы
- имя элемента
- делать по щелчку
- <number>
- function check()
- {
- if ( calc.answer.value == "4" )
- alert("Правильно!");
- else alert("Неправильно!");
- }
- test.js
- вывести сообщение
- <number>
- ПОЛЯКОВ Константин Юрьевич
- д.т.н., учитель информатики высшей категории,
- ГОУ СОШ № 163, г. Санкт-Петербург
- [email protected]