9-1_Компьютерные сети

1. Повторим

1
Повторим
<html>
<head><title>Заголовок
страницы</title></head>
<body>
</body>
</html>
© К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

2. Списки

2
Списки
<ol>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>
<ul>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>
© К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

3. Гиперссылки

3
Гиперссылки
Переход на
<a href="newpage.html">новую страницу</a>.
на URL:
<a href="http://example.net/news/info.htm">
Информация</a>.
© К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

4. Вставка изображений

4
Вставка
изображений
из той же папки:
<img src="night.jpg">
из другой папки:
<img src="images/night.jpg">
с другого сервера:
<img src="http://example.com/img/night.jpg">
© К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

5. Создание веб-сайтов

5
Создание веб-сайтов
© К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

6. Создание веб-сайтов

6
Создание веб-сайтов
Таблицы
© К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

7.

7
Таблицы
© К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

8. Простые таблицы

8
Компьютерные сети, 9 класс
Простые таблицы
<table border="1">
. . .
толщина рамки
</table>
table row
(строка)
table data
(ячейка с
данными)
<table border="1">
<tr>
<td>Вася</td>
<td>Петров</td>
</tr>
</table>
© К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

9. Заголовки таблиц

9
Компьютерные сети, 9 класс
Заголовки таблиц
<table border="1">
<tr>
<th>месяц</th>
</tr>
<tr>
<td>январь</td>
</tr>
<tr>
<td>февраль</td>
</tr>
<tr>
<td>март</td>
</tr>
</table>
© К.Ю. Поляков, Е.А. Ерёмин, 2017
table header
(заголовок)
жирный, по
центру
http://kpolyakov.spb.ru

10. Объединение ячеек – столбцы

Компьютерные сети, 9 класс
10
Объединение ячеек – столбцы
<table border="1">
<tr>
<th colspan="3">месяц</th>
</tr>
<tr>
column span
<td>январь</td>
(охват столбцов)
<td>февраль</td>
<td>март</td>
</tr>
</table>
© К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

11. Объединение ячеек – строки

Компьютерные сети, 9 класс
11
Объединение ячеек – строки
<table border="1">
<tr>
<th rowspan="3">Привет,</th>
<td>Вася!</td>
</tr>
row span
<tr>
(охват строк)
<td>Петя!</td>
</tr>
<tr>
<td>Коля!</td>
</tr>
</table>
© К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

12. Табличная вёрстка

12
Компьютерные сети, 9 класс
Табличная вёрстка
<table>
<tr>
<td>
<table border="1">
<tr>
<th>Франция</th>
<td>Париж</td>
</tr>
</table>
скрытая таблица!
</td>
<td>Самая большая страна
Западной Европы.</td>
</tr>
</table>
© К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

13. Вложенные таблицы

Компьютерные сети, 9 класс
13
Вложенные таблицы
<table border="0" cellspacing=10>
<tr><td>
<table border="1">
<tr><td>Вася</td><td>Петя</td></tr>
<tr><td>Маша</td><td>Даша</td></tr>
</table>
</td>
<td>
<table border="1">
<tr><td>1</td><td>22</td></tr>
<tr><td>333</td><td>4444</td></tr>
</table>
</td></tr>
</table>
© К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

14. Размеры

14
Компьютерные сети, 9 класс
Размеры
всей таблицы:
высота в пикселях
<table width="60%" height="300">
...
ширина в пикселях
</table>
или в % от ширины
строки:
окна браузера
<tr height="50">
...
ширина в пикселях
</tr>
ячейки:
или в % от ширины
таблицы
<td width="25%" height="50">
...
</td>
© К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

15. Выравнивание

15
Компьютерные сети, 9 класс
Выравнивание
всей таблицы:
<table align="center">
...
</table>
информации в ячейках:
left,
center,
right
left,
center,
right
<table border="1">
<tr align="center"
valign="top">
<td width="120">по центру,
по верхней границе</td>
<td align="right" valign="middle"
width="200">по правой границе,
по середине</td>
</tr>
</table>
© К.Ю. Поляков, Е.А. Ерёмин, 2017
top,
middle,
bottom
http://kpolyakov.spb.ru

16. Отступы

16
Компьютерные сети, 9 класс
Отступы
интервал между
ячейками
отступ внутри
ячеек
<table cellspacing = "10" cellpadding = "10"
bgcolor = blue>
<tr bgcolor = white>
<td width = "100">1</td>
<td width = "100">2</td>
</tr>
</table>
cellpadding
cellpadding
© К.Ю. Поляков, Е.А. Ерёмин, 2017
cellspacing
cellspacing
http://kpolyakov.spb.ru

17. Практическая работа

Компьютерные сети, 9 класс
17
Практическая работа
Выполнить практическую работу
© К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru