Создание веб-сайтов
Как создать веб-страницу?
Первая веб-страница
Заголовки
Выравнивание заголовков
Абзацы (параграфы)
Абзацы (параграфы)
Выравнивание абзацев
Переход на новую строку
Специальные символы (HTML entities)
Применение специальных символов
Применение специальных символов
Применение специальных символов
Маркированные списки
Нумерованные списки
Многоуровневые списки
Гиперссылки (локальные)
Гиперссылки (внешние)
Как записать гиперссылки от show.htm?
Метки внутри документов
Куда переход?
4.44M
Category: internetinternet

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

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

§ 23. Текстовые веб-страницы
1

2. Как создать веб-страницу?

Создание веб-сайтов, 11 класс
2
Как создать веб-страницу?
Любой текстовый редактор (Блокнот и т.п.)
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)
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru

3. Первая веб-страница

Создание веб-сайтов, 11 класс
3
Первая веб-страница
Тэг – команда языка HTML
<html>
открывающий тэг
</html>
закрывающий тэг
контейнер
(парный тэг)
<html>
<head>
<title>Первая страница</title>
</head>
<body>
Привет!
</body>
</html>
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru

4. Заголовки

Создание веб-сайтов, 11 класс
4
Заголовки
заголовок
документа
<h1>
<h2>
<h3>
<h4>
заголовок
раздела
– заголовок документа
– заголовок раздела
– заголовок подраздела
– заголовок параграфа
<h1>Глава 1. Информация</h1>
<h2>1.1 Что такое информация?</h2>
Задачи, связанные с хранением, передачей и
обработкой информации человеку приходилось решать
во все времена...
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru

5. Выравнивание заголовков

Создание веб-сайтов, 11 класс
5
Выравнивание заголовков
атрибут (свойство)
<h1 align="center">Глава 1. Информация</h1>
left,
center,
right
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru

6. Абзацы (параграфы)

Создание веб-сайтов, 11 класс
6
Абзацы (параграфы)
И вечный бой! Покой нам только снится
Сквозь кровь и пыль...
Летит, летит степная кобылица
И мнёт ковыль...
!
К.Ю. Поляков, Е.А. Ерёмин, 2018
Браузер «проглатывает» переходы на новую строку!
http://kpolyakov.spb.ru

7. Абзацы (параграфы)

Создание веб-сайтов, 11 класс
7
Абзацы (параграфы)
paragraph – абзац
<p>И вечный бой! Покой нам только снится</p>
<p>Сквозь кровь и пыль...</p>
<p>Летит, летит степная кобылица </p>
<p>И мнёт ковыль...</p>
интервал
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru

8. Выравнивание абзацев

Создание веб-сайтов, 11 класс
8
Выравнивание абзацев
left, center, right, justify
<p align="justify">
Молекула воды испарилась из кипящего
чайника и, подлетая к потолку, лоб в
лоб столкнулась с неизвестно как
прокравшейся на кухню молекулой
водорода. Кто быстрей отлетел?
</p>
?
Что плохо?
Решение:
align="left"
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru

9. Переход на новую строку

Создание веб-сайтов, 11 класс
9
Переход на новую строку
break –
разрыв
К.Ю. Поляков, Е.А. Ерёмин, 2018
И вечный бой! Покой нам только снится
<br>Сквозь кровь и пыль...
<br>Летит, летит степная кобылица
<br>И мнёт ковыль...
http://kpolyakov.spb.ru

10. Специальные символы (HTML entities)

Создание веб-сайтов, 11 класс
10
Специальные символы (HTML entities)
Символ
HTML-код
&nbsp;
Название
неразрывный пробел

&ndash;
короткое тире

&mdash;
(длинное) тире
§
&sect;
«
&laquo;
левая русская кавычка
»
&raquo;
правая русская кавычка
<
&lt;
левая угловая скобка
>
&gt;
правая угловая скобка
©
&copy;
символ авторского права
®
&reg;
зарегистрированная торговая марка
°
&deg;
градус
²
&sup2;
квадрат
³
&sup3;
куб
×
&times;
÷
&divide;
К.Ю. Поляков, Е.А. Ерёмин, 2018
параграф
знак умножения
знак деления
http://kpolyakov.spb.ru

11. Применение специальных символов

Создание веб-сайтов, 11 класс
11
Применение специальных символов
Неразрывный пробел (&nbsp;)
не отрывать:
Дом сдали в 2011&nbsp;году.
год
А.С.&nbsp;Пушкин
инициалы
Пёс весил 12&nbsp;кг.
единицы
измерения
Из дома вышел А.С.
Пушкин – солнце
русской поэзии.
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru

12. Применение специальных символов

Создание веб-сайтов, 11 класс
12
Применение специальных символов
Длинное тире (&mdash;)
Вышел А.С.&nbsp;Пушкин&nbsp;&mdash;
солнце русской поэзии.
не начинать
строку с тире!
Вышел А.С. Пушкин
– солнце русской
Что плохо?
?
поэзии.
Короткое тире (&ndash;)
Дорога Васюки&ndash;Васютино строилась
в 2007&ndash;2013&nbsp;годах.
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru

13. Применение специальных символов

Создание веб-сайтов, 11 класс
13
Применение специальных символов
Угловые скобки (&lt; &gt;)
<p>Верно ли, что X < Y?</p>
?
В чём проблема?
X &lt; Y
это начало
тэга?
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru

14. Маркированные списки

Создание веб-сайтов, 11 класс
14
Маркированные списки
unordered list
(неупорядоченный список)
list item
(элемент списка)
<ul>
<li>Вася</li>
<li>Петя</li>
<li>Коля</li>
</ul>
изменение маркера:
<ul type="disc">
...
</ul>
К.Ю. Поляков, Е.А. Ерёмин, 2018
disc
circle ○
square ■
http://kpolyakov.spb.ru

15. Нумерованные списки

Создание веб-сайтов, 11 класс
15
Нумерованные списки
ordered list
(упорядоченный список)
<ol>
<li>Вася</li>
<li>Петя</li>
<li>Коля</li>
</ol>
изменение нумерации:
1, i, I, a, A
<ol type="i" start="4">
...
</ol>
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru

16. Многоуровневые списки

Создание веб-сайтов, 11 класс
16
Многоуровневые списки
<ol>
<li>Россия
<ul>
<li>Москва</li>
<li>Санкт-Петербург</li>
</ul>
</li>
<li>Украина
<ul>
<li>Киев</li>
<li>Одесса</li>
</ul>
</li>
</ol>
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru

17. Гиперссылки (локальные)

Создание веб-сайтов, 11 класс
17
Гиперссылки (локальные)
страница в том же каталоге:
Переход на
<a href="newpage.html">новую страницу</a>.
anchor
(якорь)
hyper reference
(гиперссылка)
во вложенном каталоге:
<a href="news/info.htm">Информация</a>.
в родительском каталоге:
<a href="../info.htm">Информация</a>.
в соседнем каталоге:
<a href="../news/info.htm">Информация</a>.
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru

18. Гиперссылки (внешние)

Создание веб-сайтов, 11 класс
18
Гиперссылки (внешние)
на URL:
<a href="http://example.net/news/info.htm">
Информация</a>.
на главную страницу сайта:
<a href="http://example.net">Информация</a>.
для скачивания архива:
<a href="http://example.net/game.zip">
Скачать</a>.
для запуска почтовой программы:
<a href="mailto:[email protected]">
Напишите мне!</a>
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru

19. Как записать гиперссылки от show.htm?

Создание веб-сайтов, 11 класс
19
Как записать гиперссылки от show.htm?
main
index.htm
goods
goods.htm
food
food.htm
show
show.htm
history
hist.htm
before
before.htm
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru

20. Метки внутри документов

Создание веб-сайтов, 11 класс
20
Метки внутри документов
Там в лесу живет
<a href="#bear">медведь</a>.
...
...
...
<a name="bear"></a>
<h2>Медведь</h2>
Медведь&nbsp;&mdash; хищное
млекопитающее семейства
медвежьих.
на метку в другом файле:
<a href="animals.htm#bear">медведь</a>
<a href="http://qq.net/a.htm#bear">медведь</a>
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru

21. Куда переход?

Создание веб-сайтов, 11 класс
21
Куда переход?
<a href="example.html">...</a>
<a href="../example.html">...</a>
<a href="../../../example.html">...</a>
<a href="../new/old/example.html">...</a>
<a href="example.html#resume">...</a>
<a href="download/example.zip">...</a>
<a href="mailto:[email protected]">...</a>
К.Ю. Поляков, Е.А. Ерёмин, 2018
http://kpolyakov.spb.ru
English     Русский Rules