Россия, с.Каскара
СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ
Благодаря готовым учебным материалам для работы в классе и дистанционно
Скидки до 50 % на комплекты
только до
Готовые ключевые этапы урока всегда будут у вас под рукой
Организационный момент
Проверка знаний
Объяснение материала
Закрепление изученного
Итоги урока
Была в сети 12.03.2026 19:38
Крымова Татьяна Анатольевна
учитель математики и информатики
40 лет
13 824
3 108 
Местоположение
Специализация
Урок по теме: "Создание веб-сайтов"
Категория:
Информатика
15.01.2019 19:46
Просмотр содержимого документа
«Урок по теме: "Создание веб-сайтов"»
Создание веб-сайтов
§ 24 . Веб-сайты и веб-страницы
§ 25 . Текстовые веб-страницы
§ 26 . Оформление документов
§ 27 . Рисунки
§ 28 . Мультимедиа
§ 29 . Таблицы
§ 30 . Блоки
§ 31 . Динамический HTML
§ 32. XML и XHTML
§ 33. Размещение веб-сайтов
Создание веб-сайтов
§ 24 . Веб-сайты и веб-страницы
Основные определения
Гипертекст (англ. hypertext ) – это текст, содержащий гиперссылки.
Гиперссылка (англ. hyper reference ) – это «активная» ссылка на другой объект (часть того же документа, другой документ, файл, каталог, программу и т.д.).
Веб-страница – это гипертекстовый документ в Интернете.
Веб-сайт – группа веб-страниц, которые объединены общей темой и оформлением, связаны гиперссылками.
Веб-сервер – это программа, которая принимает запросы по протоколу HTTP и отвечает на них – возвращает веб-страницы и дополнительные данные (рисунки, звуковые файлы, видеофайлы).
Браузер – это программа для просмотра веб-страниц на экране монитора.
Что такое веб-страница?
HTML = Hypertext Markup Language (язык разметки гипертекста)
!
HTML – это не язык программирования!
запрос на каждый файл!
index.html
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis scelerisque metus, non hendrerit neque convallis placerat. Phasellus consequat convallis nisl, a volutpat qua m posuere sed . Maecenas laoreet congue nibh, et euismod lectus varius sit amet. In tristique mattis leo, eget commodo ante egestas eget. Sed id purus quis ligula scelerisque fringilla. Suspendisse scelerisque, sapien id scelerisque imperdiet, tellus odio consequat nunc, eu fermentum diam lacus non urna. Praesent faucibus massa in risus sagittis a luctus justo aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent metus dolor, semper ut fermentum vel, imperdiet in risus. Nam a lectus lorem, dictum semper nulla. In eget ipsum non arcu aliquet lacinia. Morbi iaculis sodales metus, vel posuere orci vulputate vel. Nulla non felis sem, sagittis porttitor mi. Curabitur in tortor in nisi egestas cursus quis at sapien. Proin pulvinar, odio id lacinia suscipit, sem justo aliquam risus, nec suscipit enim felis at justo. Donec at nulla orci, suscipit auctor arcu. Donec nec tortor quis justo scelerisque cursus id et magna.
media
images
tree.jpg
sunset.jpg
movie.flv
laugh.wav
4
Какие бывают веб-страницы?
- статические – готовые файлы *.htm , *.html
- динамические – полностью или частично создаются на сервере в момент запроса *.php , * .asp , *.pl , *.cgi , *.shtml …
- быстро загружаются
- почти не нагружают сервер
- невозможна работа с базами данных (в т.ч. гостевые книги, комментарии, Веб 2.0)
- работа с базами данных
- загружаются медленнее
- дополнительная нагрузка на сервер
Системы управления сайтами
CMS = Content Management System , система управления содержимым сайта.
Функции :
- создание разделов сайта
- создание страниц
- база данных пользователей
- управление доступом
- обеспечение навигации и поиска
!
Не нужно знать HTML !
бесплатно!
Joomla!
joomla.org
Drupal
drupal.org
1c-bitrix.ru
ucoz.ru
wordpress.org
Интерактивные страницы
DHTML = Dynamic HTML , динамический HTML .
Скрипт или сценарий (англ. script ) – это программный код для автоматизации действий пользователя.
Javascript
- замена текста, оформления, рисунков
- многоуровневые выпадающие меню
- скрытие и показ частей страницы
- проверка данных, введенные пользователем
- выполнение вычислений
- игры…
Создание веб-сайтов
§ 25 . Текстовые веб-страницы
Как создать веб-страницу?
Любой текстовый редактор ( Блокнот и т.п.)
2×ЛКМ
Текстовые редакторы с подсветкой HTML- тэгов:
Sublime Text ( sublimetext.com )
NotePad++ ( notepad-plus-plus.org )
Bluefish ( bluefish.openoffice.nl )
HEFS ( kpolyakov.spb.ru/prog/hefs.htm )
бесплатно!
Редакторы WYSIWYG = What You See Is What You Get
TinyMCE ( www.tinymce.com )
Kompozer ( kompozer.net )
CKEditor ( ckeditor.com )
openWYSIWYG ( www.openwebware.com )
BlueGriffon ( bluegriffon.org )
бесплатно!
/html закрывающий тэг Первая страница Привет! head title Первая страница title head body Привет! body " width="640"
Первая веб-страница
Тэг – команда языка HTML
контейнер (парный тэг)
открывающий тэг
html
/html
закрывающий тэг
Первая страница
Привет!
head
title Первая страница title
head
body
Привет!
body
– заголовок документа h2 – заголовок раздела h3 – заголовок подраздела h4 – заголовок параграфа Глава 1. Информация 1.1 Что такое информация? Задачи, связанные с хранением, передачей и обработкой информации человеку приходилось решать во все времена... " width="640"
Заголовки
заголовок документа
заголовок раздела
h1 – заголовок документа
h2 – заголовок раздела
h3 – заголовок подраздела
h4 – заголовок параграфа
Глава 1. Информация
1.1 Что такое информация?
Задачи, связанные с хранением, передачей и обработкой информации человеку приходилось решать во все времена...
Глава 1. Информация h 1 left, center, right " width="640"
Выравнивание заголовков
атрибут (свойство)
h 1 align = "center" Глава 1. Информация h 1
left,
center,
right
Абзацы (параграфы)
И вечный бой! Покой нам только снится
Сквозь кровь и пыль...
Летит, летит степная кобылица
И мн ё т ковыль...
!
Браузер «проглатывает» переходы на новую строку!
И вечный бой! Покой нам только снится p p Сквозь кровь и пыль... p p Летит, летит степная кобылица p p И мн ё т ковыл ь... p интервал " width="640"
Абзацы (параграфы)
paragraph – абзац
p И вечный бой! Покой нам только снится p
p Сквозь кровь и пыль... p
p Летит, летит степная кобылица p
p И мн ё т ковыл ь... p
интервал
Молекула воды испарилась из кипящего чайника и, подлетая к потолку, лоб в лоб столкнулась с неизвестно как прокравшейся на кухню молекулой водорода. Кто быстрей отлетел? ? Что плохо? Решение: align= "left" " width="640"
Выравнивание абзацев
left, center, right, justify
align = "justify"
Молекула воды испарилась из кипящего чайника и, подлетая к потолку, лоб в лоб столкнулась с неизвестно как
прокравшейся на кухню молекулой
водорода. Кто быстрей отлетел?
?
Что плохо?
Решение:
align= "left"
Переход на новую строку
И вечный бой! Покой нам только снится
Сквозь кровь и пыль...
Летит, летит степная кобылица
И мн ё т ковыль...
break – разрыв
© левая угловая скобка > правая угловая скобка © ® символ авторского права ® ° зарегистрированная торговая марка & deg ; ² ³ & sup2 ; градус квадрат & sup3 ; × куб & times ; ÷ знак умножения & divide ; знак деления " width="640"
Специальные символы ( HTML entities )
Символ
HTML-код
Название
–
неразрывный пробел
–
—
короткое тире
—
§
«
(длинное) тире
& sect ;
параграф
«
»
левая русская кавычка
»
правая русская кавычка
<
©
левая угловая скобка
>
правая угловая скобка
©
®
символ авторского права
®
°
зарегистрированная торговая марка
& deg ;
²
³
& sup2 ;
градус
квадрат
& sup3 ;
×
куб
& times ;
÷
знак умножения
& divide ;
знак деления
Применение специальных символов
Неразрывный пробел ( )
не отрывать:
год
Дом сдали в 2011 & nbsp ; году.
инициалы
А.С. & nbsp ; Пушкин
единицы измерения
Пёс весил 12 кг.
Из дома вышел А.С. Пушкин – солнце
русской поэзии.
Применение специальных символов
Длинное тире ( — )
Вышел А.С. Пушкин — солнце русской поэзии.
Вышел А.С. Пушкин – солнце русской поэзии.
не начинать строку с тире!
?
Что плохо?
Короткое тире ( – )
Дорога Васюки &n dash ; Васютино строилась
в 2007 &n dash ; 2013 годах.
Применение специальных символов
Угловые скобки ( < > )
Верно ли, что X
?
X < Y
В чём проблема?
это начало тэга?
li Вася / li li Петя / li li Коля / li ul изменение маркера: disk circle ○ square ■ type = "disk" ... " width="640"
Маркированные списки
unordered list ( неупорядоченный список )
list item ( элемент списка )
ul
li Вася / li
li Петя / li
li Коля / li
ul
изменение маркера:
disk
circle ○
square ■
type = "disk"
...
li Вася / li li Петя / li li Коля / li o l изменение нумерации: 1, i, I, a, A type = " i " start = "4" ... " width="640"
Нумерованные списки
ordered list ( упорядоченный список )
o l
li Вася / li
li Петя / li
li Коля / li
o l
изменение нумерации:
1, i, I, a, A
type = " i " start = "4"
...
li Россия li li Украина li ul li Москва li li Санкт-Петербург li ul ul li Киев li li Одесса li ul " width="640"
Многоуровневые списки
ol
li Россия
li
li Украина
li
ul
li Москва li
li Санкт-Петербург li
ul
ul
li Киев li
li Одесса li
ul
новую страницу a . anchor hyper reference ( гиперссылка) ( якорь) во вложенном каталоге: news/ info.htm" Информация . в родительском каталоге: .. / info.htm" Информация . в соседнем каталоге: .. /news/ info.htm" Информация . " width="640"
Гиперссылки (локальные)
страница в том же каталоге:
Переход на
a href = " newpage . html " новую страницу a .
anchor
hyper reference ( гиперссылка)
( якорь)
во вложенном каталоге:
news/ info.htm" Информация .
в родительском каталоге:
.. / info.htm" Информация .
в соседнем каталоге:
.. /news/ info.htm" Информация .
Информация. на главную страницу сайта: http:// example.net "Информация. для скачивания архива: http:// example.net /game.zip " Скачать . для запуска почтовой программы: mailto: vasya@mail.ru " Напишите мне! " width="640"
Гиперссылки (внешние)
на URL :
http:// example.net/news/info.htm "
Информация.
на главную страницу сайта:
http:// example.net "Информация.
для скачивания архива:
http:// example.net /game.zip "
Скачать .
для запуска почтовой программы:
mailto: vasya@mail.ru " Напишите мне!
Как записать гиперссылки от show.htm ?
main
index.htm
goods
goods.htm
food
food.htm
show
show.htm
history
hist.htm
before
before.htm
медведь . ... ... ... name = "bear" Медведь Медведь — хищное млекопитающее семейства медвежьих. на метку в другом файле: #bear " медведь #bear " медведь " width="640"
Метки внутри документов
Там в лесу живет
" # bear" медведь .
...
...
...
name = "bear"
Медведь
Медведь — хищное млекопитающее семейства медвежьих.
на метку в другом файле:
#bear " медведь
#bear " медведь
... ../example.html "... ../../../example.html "... ../new/old/example.html "... example.html#resume "... download/example.zip "... mailto:john@yahoo.com "... example.html "... ../example.html "... ../../../example.html "... ../new/old/example.html "... example.html#resume "... download/example.zip "... mailto:john@yahoo.com "... " width="640"
Куда переход?
example.html "...
../example.html "...
../../../example.html "...
../new/old/example.html "...
example.html#resume "...
download/example.zip "...
mailto:john@yahoo.com "...
- example.html "... ../example.html "... ../../../example.html "... ../new/old/example.html "... example.html#resume "... download/example.zip "... mailto:john@yahoo.com "...
Создание веб-сайтов
§ 26 . Оформление документов
Содержание и оформление
Веб-страница:
оформление
содержание ( контент )
содержание
оформление
Сборник задач по физике
Задача 61 Петя ехал к бабушке на электричке, и всю дорогу над ним издевались какие-то два неведомые ему явления .
физическая разметка
( *.css )
логическая разметка
( *.html )
Вася em Сильное выделение ( strong ): strong Вася strong Программный код ( code ): code a:=b+c; code Определение ( definition ): dfn Информация dfn — это... Цитата ( citation ): cite Карету мне, карету! cite Сокращение ( abbreviation ): abbr НИИЧАВО abbr " width="640"
Логическая разметка (HTML)
Выделение ( emphasize ):
em Вася em
Сильное выделение ( strong ):
strong Вася strong
Программный код ( code ):
code a:=b+c; code
Определение ( definition ):
dfn Информация dfn — это...
Цитата ( citation ):
cite Карету мне, карету! cite
Сокращение ( abbreviation ):
abbr НИИЧАВО abbr
iMin := 1; for i:=2 to n do if a[i] iMin := i; pre " width="640"
Оформление текстов программ
iMin := 1;
for i:=2 to n do
if a[i]
iMin := i;
preformatted ( уже отформатированный )
pre
iMin := 1;
for i:=2 to n do
if a[i]
iMin := i;
pre
Вася i Жирный ( bold ): b Вася b Вася Подчёркивание ( underline ): Вася u Вася u Зачёркивание ( strikeout ): s Вася s Верхний индекс ( superscript ): Вася sup 2 sup Вася 2 Нижний индекс ( subscript ): Вася sub 2 sub Вася 2 " width="640"
Тэги физической разметки HTML
Курсив ( italic ):
Вася
i Вася i
Жирный ( bold ):
b Вася b
Вася
Подчёркивание ( underline ):
Вася
u Вася u
Зачёркивание ( strikeout ):
s Вася s
Верхний индекс ( superscript ):
Вася sup 2 sup
Вася 2
Нижний индекс ( subscript ):
Вася sub 2 sub
Вася 2
Стилевые файлы
содержание
оформление
Рекурсия
У попа была собака, он её любил,
Она съела кусок мяса, он её убил,
В землю закопал,
Надпись написал:
У попа была собака, он её любил,
...
main.css
mob.css
printer.css
CSS ( Cascading Style Sheets ) – каскадные таблицы стилей.
Стилевые файлы
название тэга
test.css
свойство
значение
body {
color: white;
background: # FF 66 00 ;
}
селектор
R = FF 16 = 255
G = 66 16 = 102
B = 0
color – цвет символов
background – цвет фона
Привет, Вася! test.css body { color: white; background: #0000E0; } " width="640"
Подключение стилевого файла
qq.html
M ultipurpose I nternet M ail E xtension
таблица стилей
тип данных MIME
Страница с файлом стилей
href=" test.css "
Привет, Вася!
test.css
body {
color: white;
background: #0000E0;
}
Привет, Вася! p Петя, тебе тоже привет! p body body { color: white; background: #0000E0; } наследуется не наследуется (прозрачный фон) " width="640"
Наследование стилей
body
Привет, Вася!
p Петя, тебе тоже привет! p
body
body {
color: white;
background: #0000E0;
}
наследуется
не наследуется
(прозрачный фон)
Стили для элементов: шрифты
для всех абзацев
serif – с засечками
sans-serif – без засечек
monospace – моноширинный
семейство шрифтов
p {
font-family: Arial,sans-serif;
font-size: 20px;
font-style: italic;
font-weight: bold;
}
размер в пикселях
normal – обычный
italic - курсив
normal – обычный
bold - жирный
Стили: размеры, выравнивание
p {
background: #E6E6FF;
width: 80%;
height: 100px;
text-align: left;
text-indent: 20px;
}
цвет фона
выравнивание:
left
center
right
justify
ширина
высота
абзацный отступ
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.
100px
80%
Рамка, поля, отступы
solid – сплошная
dashed - штриховая
dotted – точечная
p {
background: #ccffcc;
border: 1px solid green;
margin: 0 4 0px 20px 4 0px;
padding: 5px;
}
толщина
рамка
цвет
отступы снаружи
отступы внутри
сверху, справа, снизу, слева
со всех сторон
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
Рамка, поля и отступы
margin-top
border-top
padding-top
border-right
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.
padding-right
padding-left
border-left
padding-bottom
margin-right
margin-left
border-bottom
margin-bottom
Стили гиперссылок
Все гиперссылки :
убрать подчёркивание
a {
color: green;
text-decoration: none;
}
Посещённые гиперссылки :
a:visited { color: #0000AA; }
псевдокласс
Гиперссылки при наведении мыши :
псевдокласс
a:hover {
color: red;
text-decoration: underline;
}
подчёркивание
Ошибка! Что-то с памятью. для абзацев класса error p. error { background:red; } p { background:blue; color:white; } каскад! ! Более конкретное указание отменяет более общее! " width="640"
Классы
error " Ошибка!
Что-то с памятью.
для абзацев класса error
p. error {
background:red;
}
p {
background:blue;
color:white;
}
каскад!
!
Более конкретное указание отменяет более общее!
Ошибка! span Что-то с памятью. " width="640"
43
Классы
для всех элементов класса error
. error {
background:red;
color:white;
}
элемент в тексте
span class=" error " Ошибка! span
Что-то с памятью.
Привет, Вася! Привет, Вася! p.hallo { background: url(grad.jpg) repeat-y ; } Привет, Вася! " width="640"
Фоновый рисунок
p. hallo {
background: white url(images/grad.jpg) ;
}
hallo "
Привет, Вася!
Привет, Вася!
p.hallo {
background: url(grad.jpg) repeat-y ;
}
Привет, Вася!
qq@mail.ru qq@mail.ru 20px " width="640"
45
Фоновый рисунок без повторения
qq@mail.ru
p. email {
background: url(letter.gif) no-repeat ;
padding-left: 20px;
}
email "
qq@mail.ru
qq@mail.ru
20px
46
Составные селекторы
Общие свойства для нескольких тэгов :
code , pre {
font- weight : bold ;
font-family: Courier New, monospace;
}
Вложенные элементы :
a внутри em
em a {
font-style: normal;
}
Сложные селекторы
ссылки внутри абзаца класса email
p.email a {
color: green;
text-decoration:none;
}
убрать подчеркивание
посещённые ссылки
p.email a:visited {
color: # F 0 F ;
}
то же, что # FF 00 FF
мышь над ссылкой
p.email a:hover {
color: #00F;
text-decoration:underline;
}
подчеркнуть
Создание веб-сайтов
§ 27 . Рисунки
Форматы рисунков
GIF (Graphic Interchange Format)
- сжатие без потерь ( LZW ) прозрачные области анимация
- сжатие без потерь ( LZW )
- прозрачные области
- анимация
- только с палитрой (2…256 цветов)
- только с палитрой (2…256 цветов)
рисунки с четкими границами, мелкие рисунки
JPEG (Joint Photographer Expert Group)
- сжатие с потерями только True Color ( 16,7 млн. цветов )
- сжатие с потерями
- только True Color ( 16,7 млн. цветов )
- нет анимации и прозрачности
- нет анимации и прозрачности
рисунки с размытыми границами, фото
PNG (Portable Network Graphic)
- сжатие без потерь с палитрой ( PNG-8) и True Color (PNG -24 ) прозрачность и полупрозрачность (альфа-канал) нет анимации
- сжатие без потерь
- с палитрой ( PNG-8) и True Color (PNG -24 )
- прозрачность и полупрозрачность (альфа-канал)
- нет анимации
- плохо сжимает мелкие рисунки
- плохо сжимает мелкие рисунки
stroke-width="1" stroke="rgb(0,0,0)" fill="rgb(0,0,255)"/ stroke-width="1" stroke="rgb(0,0,0)" fill="rgb(255,0,0)"/ " width="640"
Форматы рисунков
SVG (Scalable Vector Graphics, масштабируемые векторные изображения )
- SVG (Scalable Vector Graphics, масштабируемые векторные изображения )
x="0" y="10"
stroke-width="1" stroke="rgb(0,0,0)"
fill="rgb(255,255,255)"/
stroke-width="1" stroke="rgb(0,0,0)"
fill="rgb(0,0,255)"/
stroke-width="1" stroke="rgb(0,0,0)"
fill="rgb(255,0,0)"/
из другой папки: images/ night.jpg" ../../images/ night.jpg" с другого сервера: http://example.com/img/ night.jpg" " width="640"
Рисунки в документе
из той же папки:
image ( изображение )
source ( источник )
img src ="night.jpg"
из другой папки:
images/ night.jpg"
../../images/ night.jpg"
с другого сервера:
http://example.com/img/ night.jpg"
left right bottom ( по умолчанию ) top middle " width="640"
Выравнивание
align ="left"
left
right
bottom
( по умолчанию )
top
middle
align="left" vspace (vertical space) hspace (horizontal space) " width="640"
Отступы
align="left " hspace ="10" vspace ="10"
align="left"
vspace
(vertical space)
hspace
(horizontal space)
надпись на месте рисунка, если его нет всплывающая подсказка размеры позволяют: растянуть – сжать не портить дизайн, если рисунка нет " width="640"
Другие атрибуты
alt =" Ночь на Ладоге " width ="800"
height ="600"
- надпись на месте рисунка, если его нет
- всплывающая подсказка
размеры позволяют:
- растянуть – сжать
- не портить дизайн, если рисунка нет
border = " 0 " a если не вплотную к , будет «хвост» не будет «хвоста» ссылка на другой сервер: http://www.mail.ru " alt=" Бесплатная почта " border= " 0 " " width="640"
Рисунок-гиперссылка
локальная ссылка:
иначе будет синяя рамка вокруг
a href="gallery.htm"
border = " 0 "
a
если не вплотную к , будет «хвост»
не будет «хвоста»
ссылка на другой сервер:
http://www.mail.ru "
alt=" Бесплатная почта " border= " 0 "
имя файла размеры выравнивание " width="640"
Вставка векторных рисунков
тип нестандартных данных
image/svg+xml "
data=" test.svg "
width="48" height="48"
align="left"
имя файла
размеры
выравнивание
Фоновый рисунок
body {
background: url( grad.jpg );
}
если рисунка нет…
body {
background: url(grad.jpg) # E E E ;
}
' images /grad.jpg'
' ../images /grad.jpg‘
' http://www.vasya.ru/images /grad.jpg'
Фоновый рисунок
если рисунок меньше, он повторяется
body{ background: url(grad.jpg) no-repeat ; }
не повторять
body{ background: url(grad.jpg) repeat - y ; }
повторять по вертикали
Фоновый рисунок
!
Не должно быть «швов»!
!
Фон не должен мешать чтению!
Создание веб-сайтов
§ 28 . Мультимедиа
embed автозапуск имя файла Флэш-анимация: embed src=" cube.swf " width="275" height="200" embed размеры " width="640"
Вставка мультимедийных файлов
Звуковой файл:
имя файла
embed src=" myaw.wav "
autostart="false" embed
автозапуск
имя файла
Флэш-анимация:
embed src=" cube.swf "
width="275" height="200"
embed
размеры
размеры " width="640"
Вставка мультимедийных файлов
Видео:
адрес ролика
http://www.youtube.com/v/YvLNA5OW6xZ "
width="425" height="350"
размеры
audio показывать элементы управления размеры " width="640"
HTML5 – тэг audio
имя файла
audio
src=" nature.ogg "
autostart="false"
controls="controls"
width="425"
height="350"
audio
показывать элементы управления
размеры
Ваш браузер не поддерживает элемент video. video 425" height=" 350 " controls="controls" source src=" start.mp4 " type= 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"' 425" height=" 350 " controls="controls" source src=" finish.webm " type= 'video/webm; codecs="vp8, vorbis"' " width="640"
HTML5 – тэг video
video src=" sail.ogv "
controls="controls"
autostart="false"
width="425" height="350"
Ваш браузер не поддерживает элемент video.
video
425" height=" 350 "
controls="controls"
source src=" start.mp4 "
type= 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
425" height=" 350 "
controls="controls"
source src=" finish.webm "
type= 'video/webm; codecs="vp8, vorbis"'
Создание веб-сайтов
§ 29 . Таблицы
. . . table толщина рамки tr td Вася td td Петров td tr t able r ow (строка) t able d ata (ячейка с данными) " width="640"
Простые таблицы
table border="1"
. . .
table
толщина рамки
tr td Вася td td Петров td tr
t able r ow
(строка)
t able d ata
(ячейка с данными)
месяц th январь td февраль td март td t able h eader (заголовок) жирный, по центру " width="640"
Заголовки таблиц
th месяц th
январь td февраль td март td
t able h eader
(заголовок)
жирный, по центру
colspan =" 3 "месяц tr tr январь td февраль td март td tr col umn span ( охват столбцов ) " width="640"
Объединение ячеек – столбцы
tr tr tr tr
colspan =" 3 "месяц январь td февраль td март td
col umn span ( охват столбцов )
Привет, Вася! td Петя! td Коля! td row span ( охват строк ) " width="640"
Объединение ячеек – строки
rowspan =" 3 "Привет, Вася! td Петя! td Коля! td
row span ( охват строк )
Франция th Париж td скрытая таблица! " width="640"
Табличная вёрстка
Западной Европы. td
Самая большая страна
Франция th Париж td
скрытая таблица!
Вложенные таблицы
В ася П етя М аша Д аша
1 22 333 4444
... ширина в пикселях или в % от ширины окна браузера строки: height ="50" ... ширина в пикселях или в % от ширины таблицы ячейки: width = "2 5 %" height ="50" ... " width="640"
72
Размеры
высота в пикселях
всей таблицы:
... width ="60%" height ="300"
ширина в пикселях или в % от ширины окна браузера
строки:
... height ="50"
ширина в пикселях или в % от ширины таблицы
ячейки:
...
... строки: table.spec tr { height : 50px; } ячейки: table.spec td.qq { width : 2 5 % ; height : 50px; } " width="640"
Размеры (через CSS)
всей таблицы:
table.spec {
width : 60%;
height : 300;
}
... class="spec"
строки:
table.spec tr {
height : 50px;
}
ячейки:
table.spec td.qq {
width : 2 5 % ;
height : 50px;
}
... left, center, right информации в ячейках: top, middle, bottom align ="center" valign ="top" " 120 " по центру, по верхней границе align ="right" valign ="middle" width= " 200 " по правой границе, по середине " width="640"
Выравнивание
всей таблицы:
left,
center,
right
... align ="center"
left,
center,
right
информации в ячейках:
top,
middle,
bottom
valign ="top" по верхней границе width= " 200 " по правой границе, по середине
align ="center" " 120 " по центру, align ="right" valign ="middle"
class="centop" По центру, по верхней границе class="rmid" По правой границе, по середине left, center, right table.ex tr.centop { text-align : center; vertical-align : top; height:100px; } table.ex td.rmid { text-align : right; vertical-align : middle; width:200px; } top, middle, bottom " width="640"
Выравнивание (через CSS)
по верхней границе границе, по середине class="ex" border="1"
class="centop" По центру, class="rmid" По правой
left,
center,
right
table.ex tr.centop {
text-align : center;
vertical-align : top;
height:100px;
}
table.ex td.rmid {
text-align : right;
vertical-align : middle;
width:200px;
}
top,
middle,
bottom
class="spec" Привет! td class="r" class="pic" Таблица из двух строк td и двух столбцов td 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"); } цвет фона рисунок " width="640"
Фон и цвет текста (через CSS )
Таблица из двух строк td class= " qq "
class="spec" Привет! td class="r" class="pic" и двух столбцов td
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");
}
цвет фона
рисунок
= white = " 100"1 = " 100 " 2 cellpadding cellspacing cellpadding cellspacing " width="640"
Отступы
интервал между ячейками
отступ внутри ячеек
bgcolor = blue cellspacing = " 10 " cellpadding = " 10"
= white = " 100"1 = " 100 " 2
cellpadding
cellspacing
cellpadding
cellspacing
1 2 кроме IE 6 padding border-spacing padding border-spacing " width="640"
Отступы ( через CSS)
идентификатор – уникальное имя
table #qq {
background: blue;
border-collapse : separate;
border-spacing : 10px;
padding : 10px;
}
#qq tr {
background: white;
}
id =" qq "
1 2
кроме IE 6
padding
border-spacing
padding
border-spacing
Создание веб-сайтов
§ 30 . Блоки
... div свойства блока: padding 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. border margin " width="640"
Что такое блок ( div )?
... div ... div свойства блока: padding 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. border margin Рамка, поля и отступы margin-top border-top padding-top border-right 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. padding-right padding-left border-left padding-bottom margin-right margin-left border-bottom margin-bottom Стили для блоков info " id =" result " Ответ: 45. идентификатор (уникальный!) . info { margin: 5px 5px 10px 20px; padding: 3px; } #result { background: #CCCCFF; border: 1px solid blue; } «Плавающий» блок picture " width="100" height="66" p На природе p div . picture { float:left; margin: 5px; } . picture p { margin: 0; text-align: center; font-family: sans-serif; font-size: 80%; font-weight: bold; } Создание веб-сайтов § 31 . Динамический HTML Что такое DHTML? Динамический HTML ( DHTML ) – это технология создания интерактивных сайтов, использующая HTML , CSS , язык программирования (чаще всего JavaScript ) и объектную модель документа (англ. DOM = Document Object Model ). document DOM head body p Привет, em Вася! em p body html html head body title p DOM em Привет , Вася! «Живой» рисунок box_closed.gif box_o pen ed.gif onMouseOver ="this.src='box_opened.gif' " onMouseOut ="this.src='box_closed.gif'" свойство src этого объекта обработчик события ( Javascript ) вложенные кавычки this . src ='box_opened.gif' Скрытый блок ЛКМ id ="details" class=" hidden " Детали — это гайка, шайба, болт, винт, шуруп, гвоздь и др. . hidden { display:none; } ? Зачем нужен id ? block – во всю ширину inline – в тексте не показывать Javascript- файл Файл test.js функция имя функции function show ( name ) { var elem = document. getElementById (name); if ( elem ) elem.style. display = "block"; } найти элемент по id переменная если нашли block – во всю ширину inline – в тексте none – не показывать изменить свойство display Подключение Javascript- файла тип файла script type=" text/javascript " src=" test.js " script ... имя файла Вызов функции ссылка на эту страницу по щелчку вызвать функцию onClick=" show('details') ; return false ;" Показать детали дальнейшая обработка (переход по ссылке) не нужна HTML- файл Скрытый блок script type="text/javascript" src=" test.js " script link rel="stylesheet" type="text/css" href=" test.css " show('details'); return false; " Показать детали details " class=" hidden " Детали — это гайка, шайба, болт, винт, шуруп, гвоздь и др. ? Как сделать два скрытых блока ? Формы форма – набор элементов диалога form name="calc" answer " button " value="Готово" onClick=" check(); " form поле ввода кнопка текст на кнопке что делать при щелчке Формы calc " answer " value="Готово" onClick=" check ();" В файл calc .js Обработка события «щелчок мышью»: function check () { if ( calc . answer .value == "4" ) alert ( "Правильно!" ); else alert ( "Неправильно!" ); } введённый текст Создание веб-сайтов § 32. XML и XHTML В чём проблема? Интеграция (объединение) информационных систем В А обмен данными ? Б В каком формате? Двоичные файлы : В чём проблема ? Задачи : HTML : ) Что такое XML? xml version = "1.0" ? частота = "2 ГГц" Intel Celeron фирма = " Kingston " 2048 Мб фирма = " Seagate " 320 Гб Philips 190 C 1 SB Logitech Classic 200 Genius Navigator 600 Что такое XML? XML = eXtensible Markup Language ( расширяемый язык разметки) тэг ... тэг тэг атрибут ="значение" ... тэг ! Это иерархическая база данных! Использование XML набор XML - файлов zip -архив XML: «за» и «против» XHTML Задача: автоматическая обработка веб-страниц HTML : ) XHTML = e X tensible H ypertext M arkup L anguage « » « < » « & » « & ; » p strong Вася p strong HTML XHTML Создание веб-сайтов § 33. Размещение веб-сайтов Как разместить сайт? На своём компьютере : Что такое хостинг? Хостинг — услуга по размещению сайта (данных) на постоянно работающем сервере. Тарифный план стоимость ежедневно: 100 пользователей 10 страниц по 100 Кбайт в месяц: 3 Гбайт 100 Мбайт оплата – реклама Типы хостинга Виртуальный хостинг garage.ru toy.com vobla.net … до 1000 сайтов Виртуальный частный сервер garage.ru toy.com vobla.net Выделенный сервер vobla.net Доменные имена IP- адреса : 94.100.101.202 DNS- сервер Доменные имена : www.mail.ru ? Как зарегистрировать? nic.ru (RU-CENTER) Бесплатно (3- й уровень ) : vasya. ucoz.ru Загрузка файлов на сайт F ileZill a ( filezilla - project . org ) пароль логин сайт локальный компьютер каталог на сайте Конец фильма ПОЛЯКОВ Константин Юрьевич д.т.н., учитель информатики ГБОУ СОШ № 163, г. Санкт-Петербург kpolyakov@mail.ru ЕРЕМИН Евгений Александрович к.ф.-м.н., доцент кафедры мультимедийной дидактики и ИТО ПГГПУ, г. Пермь eremin@pspu.ac.ru Источники иллюстраций
Свидетельство об участии
БЕСПЛАТНО!
Ответ: 45. идентификатор (уникальный!) . info { margin: 5px 5px 10px 20px; padding: 3px; } #result { background: #CCCCFF; border: 1px solid blue; } " width="640"
width="100" height="66" p На природе p div . picture { float:left; margin: 5px; } . picture p { margin: 0; text-align: center; font-family: sans-serif; font-size: 80%; font-weight: bold; } " width="640"
body p Привет, em Вася! em p body html html head body title p DOM em Привет , Вася! " width="640"
свойство src этого объекта обработчик события ( Javascript ) вложенные кавычки this . src ='box_opened.gif' " width="640"
script ... имя файла " width="640"
Показать детали дальнейшая обработка (переход по ссылке) не нужна " width="640"
script link rel="stylesheet" type="text/css" href=" test.css " show('details'); return false; " Показать детали details " class=" hidden " Детали — это гайка, шайба, болт, винт, шуруп, гвоздь и др. ? Как сделать два скрытых блока ? " width="640"
answer " button " value="Готово" onClick=" check(); " form поле ввода кнопка текст на кнопке что делать при щелчке " width="640"
answer " value="Готово" onClick=" check ();" В файл calc .js Обработка события «щелчок мышью»: function check () { if ( calc . answer .value == "4" ) alert ( "Правильно!" ); else alert ( "Неправильно!" ); } введённый текст " width="640"
частота = "2 ГГц" Intel Celeron фирма = " Kingston " 2048 Мб фирма = " Seagate " 320 Гб Philips 190 C 1 SB Logitech Classic 200 Genius Navigator 600 " width="640"
... тэг атрибуты тэгов (дополнительные данные) тэг атрибут ="значение" ... тэг можно вводить новые тэги нет никаких тэгов оформления, только данные в контейнер могут быть вложены другие контейнеры иерархия – дерево ! ! Это иерархическая база данных! " width="640"
strong Вася p strong " dog.jpg " alt= " Пес Барбос " / HTML XHTML " width="640"
) " dog.jpg " alt= " Пес Барбос " /
Вебинар для учителей
Полезное для учителя
Детали — это гайка, шайба, болт, винт, шуруп, гвоздь и др. . hidden { display:none; } ? Зачем нужен id ? block – во всю ширину inline – в тексте не показывать " width="640"
