Актимель 2 С пробиотиками (Работа с текстом)

1.

Актимель 2
С пробиотиками
(Работа с текстом)

Вложенность тегов
Одни теги могут содержать внутри себя другие, это
называется вложенностью тегов. Например внутри абзаца
может содержаться ссылка.
Обратите внимание, что вложенный тег должен закрываться
раньше родительского.

3.

4.

Немного повторим
Тег <html> - служебный тег, который содержит в себе всю
информацию о web-странице. Он открывается во второй
строке, сразу после <!DOCTYPE html>, и закрывается в
последней строке.
Если что, <!DOCTYPE html> задает тип документа
(расширение файла .html).

5.

Немного повторим
Между открывающим и закрывающим тегами <html>
находятся еще 2 служебных тега:
<head> … </head> – вся техническая информация о
документе, которую мы не видим (кроме <title>);
<body> … </body> – внешний вид сайта и самый большой по
объему тег. Почти весь код пишется внутри него.

6.

Немного повторим
<title> … </title> – заголовок страницы, который
отображается в шапке браузера.
<meta> … </meta> – техническая информация о документе,
например:
- ключевые слова;
- описание сайта;
- кодировка документа.
Атрибут charset внутри тега <meta> указывает кодировку.
Например, UTF-8, которая нам уже известна.

7.

Атрибуты <body>
background – устанавливает фон страницы в формате
картинки или видео.
bgcolor – цвет фона (простая заливка).
bottommargin – отступ от нижнего края браузера.
topmargin – отступ от верхнего края браузера.
leftmargin – отступ от левого края браузера.
rightmargin – отступ от правого края браузера.
(отступ от края браузера до контента)
background

8.

9.

10.

Работа с текстом
 … – делает текст жирным. Происходит от слова
«bolt», что и означает жирное начертание текста.
Применяется только внутри текстовых тегов
(, <a> и похожие на них).
 … – делает текст курсивным. Происходит от слова
«italic», что и означает курсивное начертание текста.
Применяется только внутри текстовых тегов
(, <a> и похожие на них).
<s> … </s> – делает текст зачеркнутым. Происходит от слов
«cross out», что и означает – зачеркнуть.
Применяется только внутри текстовых тегов
(, <a> и похожие на них).

11.

12.

Работа с текстом
 – одиночный тег, который применяется для
принудительного переноса строки, аналог «Enter» при
работе с Word.
Соответственно, (2 раза подряд) будут делать
пустой интервал в 1 строку внутри абзаца.

13.

14.

Работа с линиями
Тег <hr> добавляет в документ горизонтальную линию.
Закрывающий тег не обязателен.
Атрибуты:
align – выравнивание линии;
color – цвет линии;
noshade – рисует линию без тени;
size – толщина линии;
width – ширина линии.

15.

16.

Верхний и нижний индексы
 … – создает нижний индекс.
(sub, b – bottom, то есть – низ).
 … – делает верхний индекс.
(sup, p – top, то есть – верх).

17.

18.

Работа с текстом
<blockquote> … </blockquote> – предназначен для
включения в документ цитаты. Создает отступы с обеих
сторон и отделяется от остального текста пустыми строками.

19.

Работа с текстом
<ul> … </ul> – создает маркированный список.
<li> … </li> – элемент маркированного списка.
Отображается, как большая жирная точка перед текстом.

20.

21.

Задание
Вместе с этой презентацией Вам будет выслан документ
«Пример сайта html – Задание 2.pdf». Вам необходимо
повторить его внешний вид наиболее полно и подробно.
Подсказка:
- заголовки размерами 1 и 3;
- текст не имеет стилей (нигде);
- внизу документа 2 ссылки в одной строке, знак «|» между
ними не является ссылкой;
- ссылки должны работать и вести на соответствующие
статьи на Википедии.
Пример тоже вам вышлю скрином для удобства
В .pdf-документе вид будет немного искаженным, вот
пример того, что должно получиться ->
+ Конспект!

English Русский Rules