5 Текст, ссылки и изображения

ТЕКСТ

Теги для текста
Тэг-выделитель для
подсветка
текста
Удаленный текст
Зачеркнутый
Строка - дополнение к документу
Подчеркнутая
Жирный текст
Жирный
текст
Курсив
Курсив

Теги для текста
x
2
x2
H
2
O
H2O

Теги для текста
цитата в тексте
Блок с цитатой
источник
10:00 19.08.2020
улица Пушкина, дом Колотушкина

CSS правила для текста
font-size:16px;
line-height: normal;
font-family: "PT Sans", "Arial", sans-serif;
font-weight: bold;
text-align: center; /* left, right, justify */
vertical-align: middle; /* top, bottom, baseline*/
color: black;

CSS правила для текста
text-decoration: underline;
font-style:italic;
text-transform: uppercase;
padding
margin

Единицы измерения
Абсолютные (px, cm, mm и др)
font-size: 1cm;
font-size: 38px;
width:500px;
Относительные (em, rem, % и др)
font-size: 2em;
font-size: 2rem;
width:50%;

Цвета
Табличные цвета - https://colorscheme.ru/html-colors.html
Шестнадцатеричный код - #RRGGBB или #RGB: #e0b743, #ffbb00 (#fb0)
Функция rgb(r, g, b) – rgb(255, 0, 0)
Функция rgba(r, g, b, a) – rgba(0, 0, 0, 0.5)

Шрифты
serif — шрифты с засечками (антиквенные), типа Times;
sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
cursive — курсивные шрифты;
fantasy — декоративные шрифты;
monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).
Google Fonts - https://fonts.google.com/

Списки
Неупорядоченные ul
Упорядоченные ol
Списки описания dl

Неупорядоченные списки
Горячие напитки:
чай
какао
кофе

Атрибуты неупорядоченного списка
...

Упорядоченный список
Рейтинг моих любимых горячих напитков:
кофе
чай
какао

Атрибуты упорядоченного списка
...
…
…

Список определений
Термин 1
Определение термина 1
Термин 2
Определение термина 2

Вложенные списки
1
1.1
1.2
2

Стили для списков
list-style
http://htmlbook.ru/css/list-style

Задание
Создайте в личном сайте верстальщика список статей (как неупорядоченный список). Минимум 5-6 названий статей.
Примерные названия статей:
Что такое HTML и как его изучать?
Топ лучших редакторов html-кода
Определение структуры сайта
Список терминов
…

Задание
В папке нашего проекта, создайте новый файл article1.html
Определите структуру этого документа как на рисунке
В тексте вы должны использовать различные теги для текстовых блоков (для дат, времени, цитат, выделения и т.д.)
Аналогично создайте еще несколько страниц со статьями (минимум 3 страницы).
Одна из страниц должна быть со списком терминов, оформленных как список определений

Задание
Необходимо использовать следующие теги:
заголовки h1-h6,
параграфы p,
списки (ol, ul, li, dl, dt, dd),
теги для цитат (q, blockquote) и источников (cite),
теги, задающие клавиши и их сочетания (kdb) и код (code)
тег задания даты и времени time,
тег важности storng, тег акцентирования внимания em,
теги исправления (del, ins) и др.

Ссылки

Тег a
...
Посмотрите на эту фотографию!
Статья 1

Адреса
Абсолютные
Статья 1
Справочник по HTML
Относительные
Статья 1

Относительные адреса
contact.html
product/products.html
/
../images/contact.png

Задание
На главной странице сайта в разделе Мои статьи названия статей сделайте ссылками на страницы со статьями
На каждой страницы со статьей текст «На главную» сделайте ссылкой на главную страницу

Ссылки на файл
Открыть в браузере
Скачать
Скачать со сторонних сервисов

Якоря
…
наверх

Задание
В одной из статей выделите части и озаглавьте их (подумайте заголовками какого уровня должны быть эти заглавия).
Каждое заглавие должно содержать индивидуальный идентификатор.
В начале статьи (после заглавия статьи) сделайте оглавление. Каждый пункт оглавления должен быть ссылкой на соответствующую часть статьи.
В футере сайта параграф «Вы также можете найти меня здесь» сделайте ссылкой на свою персональную страницу (vk, портал и т.д.).

Изображения

Тег img "about.html">

Теги figure и figcaption
Схема, график, диаграмма или код
Подпись к содержимому

Форматы графических файлов
Растровые формат
JPG
GIF
PNG (8 и 24)
Векторный формат
SVG

jpg и png

gif и png