internetSimilar presentations:
Создание веб-сайтов
1. Создание веб-сайтов
1Создание веб-сайтов
§ 22. Веб-сайты и веб-страницы
§ 23. Текстовые веб-страницы
§ 24. Оформление документов
§ 25. Рисунки, звук, видео
§ 26. Таблицы
§ 27. Блоки
§ 28. XML и XHTML
§ 29. Динамический HTML
§ 30. Размещение веб-сайтов
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
2. Создание веб-сайтов
2Создание веб-сайтов
§ 24. Оформление документов
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
3. Содержание и оформление
Создание веб-сайтов, 11 класс3
Содержание и оформление
Веб-страница:
оформление
содержание (контент)
содержание
оформление
<h1>Сборник задач по физике</h1>
<p class="author">Григорий Остер</p>
<h2>Задача 61</h2>
Петя ехал к бабушке на электричке, и всю
дорогу над ним издевались какие-то два
неведомые ему явления.
логическая разметка
(*.html)
К.Ю. Поляков, Е.А. Ерёмин, 2018
физическая разметка
(*.css)
http://kpolyakov.spb.ru
4. Логическая разметка (HTML)
Создание веб-сайтов, 11 класс4
Логическая разметка (HTML)
Выделение (emphasize):
<em>Вася</em>
Сильное выделение (strong):
<strong>Вася</strong>
Программный код (code):
<code>a:=b+c;</code>
Определение (definition):
<dfn>Информация</dfn> — это...
Цитата (citation):
<cite>Карету мне, карету!</cite>
Сокращение (abbreviation):
<abbr>НИИЧАВО</abbr>
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
5. Оформление текстов программ
Создание веб-сайтов, 11 класс5
Оформление текстов программ
iMin := 1;
for i:=2 to n do
if a[i] < a[iMin] then
iMin := i;
preformatted (уже
отформатированный)
<pre>
iMin := 1;
for i:=2 to n do
if a[i] < a[iMin] then
iMin := i;
</pre>
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
6. Тэги физической разметки HTML
Создание веб-сайтов, 11 класс6
Тэги физической разметки HTML
Курсив (italic):
<i>Вася</i>
Вася
Жирный (bold):
<b>Вася</b>
Вася
Подчёркивание (underline):
<u>Вася</u>
Вася
Зачёркивание (strikeout):
<s>Вася</s>
Вася
Верхний индекс (superscript):
Вася<sup>2</sup>
Вася2
Нижний индекс (subscript):
Вася<sub>2</sub>
К.Ю. Поляков, Е.А. Ерёмин, 2018
Вася2
http://kpolyakov.spb.ru
7. Стилевые файлы
Создание веб-сайтов, 11 класс7
Стилевые файлы
содержание
<h1>Рекурсия</h1>
У попа была собака, он её любил,
Она съела кусок мяса, он её убил,
В землю закопал,
Надпись написал:
У попа была собака, он её любил,
...
оформление
main.css
mob.css
printer.css
CSS (Cascading Style Sheets) – каскадные
таблицы стилей.
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
8. Стилевые файлы
Создание веб-сайтов, 11 класс8
Стилевые файлы
test.css название тэга
селектор
body { свойство значение
color: white;
background: #FF6600;
}
color – цвет символов
background – цвет фона
К.Ю. Поляков, Е.А. Ерёмин, 2018
R = FF16 = 255
G = 6616 = 102
B=0
http://kpolyakov.spb.ru
9. Подключение стилевого файла
Создание веб-сайтов, 11 класс9
Подключение стилевого файла
qq.html
<html>
таблица стилей
<head>
<title>Страница с файлом стилей</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
Привет, Вася!
</body>
</html>
test.css
body {
color: white;
background: #0000E0;
}
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
10. Наследование стилей
Создание веб-сайтов, 11 класс10
Наследование стилей
<body>
Привет, Вася!
<p>Петя, тебе тоже привет!</p>
</body>
body {
color: white;
background: #0000E0;
наследуется
}
не наследуется
(прозрачный фон)
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
11. Стили для элементов: шрифты
Создание веб-сайтов, 11 класс11
Стили для элементов: шрифты
для всех
абзацев
семейство
шрифтов
serif – с засечками
sans-serif – без засечек
monospace – моноширинный
p {
font-family: Arial,sans-serif;
размер в пикселях
font-size: 20px;
font-style: italic;
normal – обычный
italic - курсив
font-weight: bold;
}
normal – обычный
bold - жирный
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
12. Стили: размеры, выравнивание
Создание веб-сайтов, 11 класс12
Стили: размеры, выравнивание
выравнивание:
left
center
right
j u s t i f y
20px
цвет фона
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.
100px
80%
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
13. Рамка, поля, отступы
Создание веб-сайтов, 11 класс13
Рамка, поля, отступы
рамка
отступы
снаружи
отступы
внутри
40px
solid – сплошная
dashed - штриховая
dotted – точечная
толщина
p {
background: #ccffcc;
цвет
border: 1px solid green;
margin: 0 40px 20px 40px;
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.
5px
К.Ю. Поляков, Е.А. Ерёмин, 2018
40px
20px
http://kpolyakov.spb.ru
14. Рамка, поля и отступы
Создание веб-сайтов, 11 класс14
Рамка, поля и отступы
margin-top
border-top
padding-top
border-right
border-left
margin-left
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam nunc
padding-left
padding-right
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-bottom
margin-right
margin-bottom
К.Ю. Поляков, Е.А. Ерёмин, 2018
border-bottom
http://kpolyakov.spb.ru
15. Стили гиперссылок
Создание веб-сайтов, 11 класс15
Стили гиперссылок
Все гиперссылки:
убрать
подчёркивание
a {
color: green;
text-decoration: none;
}
Посещённые гиперссылки:
a:visited { color: #0000AA; }
псевдокласс
Гиперссылки при наведении мыши:
a:hover { псевдокласс
color: red;
text-decoration: underline;
}
подчёркивание
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
16. Классы
Создание веб-сайтов, 11 класс16
Классы
<p class="error">Ошибка!
Что-то с памятью.
</p>
каскад!
для абзацев
класса error
p.error {
background:red;
}
p {
background:blue;
color:white;
}
! Более конкретное указание отменяет более общее!
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
17. Классы
Создание веб-сайтов, 11 класс17
Классы
для всех элементов
класса error
.error {
background:red;
color:white;
}
элемент в
тексте
<p>
<span class="error">Ошибка!</span>
Что-то с памятью.
</p>
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
18. Фоновый рисунок
Создание веб-сайтов, 11 класс18
Фоновый рисунок
p.hallo {
background: white url(images/grad.jpg);
}
<p class="hallo">
Привет, Вася!
</p>
Привет, Вася!
p.hallo {
background: url(grad.jpg) repeat-y;
}
Привет, Вася!
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
19. Фоновый рисунок без повторения
Создание веб-сайтов, 11 класс19
Фоновый рисунок без повторения
qq@mail.ru
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
20px
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
20. Составные селекторы
Создание веб-сайтов, 11 класс20
Составные селекторы
Общие свойства для нескольких тэгов:
code, pre {
font-weight: bold;
font-family: Courier New, monospace;
}
Вложенные элементы:
a внутри em
em a {
font-style: normal;
}
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
21. Сложные селекторы
Создание веб-сайтов, 11 класс21
Сложные селекторы
ссылки внутри абзаца класса email
p.email a {
убрать подчеркивание
color: green;
text-decoration:none;
}
посещённые ссылки
p.email a:visited {
color: #F0F;
то же, что #FF00FF
}
мышь над ссылкой
p.email a:hover {
подчеркнуть
color: #00F;
text-decoration:underline;
}
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
22. Практическая работа
Создание веб-сайтов, 11 класс22
Практическая работа
Практическая работа № 25.
Оформление страницы
Практическая работа № 26.
Оформление страницы с помощью CSS
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru