- •Основные понятия
- •Создание html-документа
- •Работа с текстом
- •Любое количество пробелов идущих подряд, на веб-странице отображается как один
- •Нет расстановки переносов в тексте
- •Текст занимает ширину окна браузера
- •То, что выделено цветом, на занятие не изучалось. Сохраните пока себе это для справки. К этому типу форматирования текста мы еще вернемся, когда будем изучать продвижение. Списки
- •Маркированный список
- •Нумерованный список
- •Открытие ссылки в новом окне
- •Изображения
- •Атрибуты colspan и rowspan позволяют объединять ячейки, таким образом, создаются сложные таблицы.
Работа с текстом
Прежде чем приступить к редактированию текста, следует принять во внимание некоторые особенности, которые присущи HTML при работе с текстом по умолчанию:
Любое количество пробелов идущих подряд, на веб-странице отображается как один
Нет расстановки переносов в тексте
Текст занимает ширину окна браузера
Существует два вида форматирования текста:
Физическое (визуальное, необходимо для пользователя, с него то мы и начнем свою работу);
Открывающий тэг |
Закрывающий тэг |
Что означают |
<p> |
</p> |
Абзац, используется отступ первой строки, еще называемый «красная строка» |
<br> |
Это непарный тег, у него нет закрывающей части |
Перенос строки, работает как «enter», в отличие от абзаца, тег переноса строки не создает дополнительных вертикальных отступов между строками |
<b> |
</b> |
Жирный* |
<i> |
</i> |
Курсив* |
<u> |
</u> |
Подчеркнутый* |
<s> |
</s> |
Перечеркнутый* |
<sup> |
</sup> |
Верхний индекс |
<sub> |
</sub> |
Нижний индекс |
*Теги, которые обозначены звёздочкой устарели, но это не значит, что их нельзя использовать, можно, но рекомендую вместо них использовать стили(css).
Логическое (ценится поисковыми системами)
Открывающий тэг |
Закрывающий тэг |
Что означают |
<h*> |
</h*> |
Несколько видов заголовков (* - 1.2.3.4.5.6) |
<strong> |
</strong> |
Аналог <b> |
<em> |
</em> |
Аналог <i> |
<cite> |
</cite> |
Для обрамления цитат (по умолчанию наклонный текст) |
То, что выделено цветом, на занятие не изучалось. Сохраните пока себе это для справки. К этому типу форматирования текста мы еще вернемся, когда будем изучать продвижение. Списки
Списком называется взаимосвязанный набор отдельных фраз или предложений, которые начинаются с маркера или цифры.
Очень важно усвоить эту тему, так как в дальнейшем мы будем делать меню на основе списков.
Любой список представляет собой контейнер <ul>, который устанавливает маркированный список, или <ol>, определяющий список нумерованный. Каждый элемент списка должен начинаться с тега <li>.
Открывающий тэг |
Закрывающий тэг |
Что означают |
<ul> |
</ul> |
Маркированный список: <ul> <li> элемент 1 </li> <li> элемент 2 </li> <li> ………………. </li> <li> элемент n </li> </ul> |
<ol> |
</ol> |
Нумерованный список: <ol> <li> элемент 1 </li> <li> элемент 2 </li> <li> ………………. </li> <li> элемент n </li> </ol> |
Маркированный список
Маркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка.
<html>
<head>
<title>маркированный список </title>
</head>
<body>
Список элементов:
<ul>
<li> элемент 1 </li>
<li> элемент 2 </li>
<li> …………. </li>
<li> элемент n </li>
</ul>
</body>
</html>
Обрати внимание на отступы сверху, снизу и слева от списка. Такие отступы добавляются автоматически.
Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора стиля маркера используется параметр type тега <UL>.
Таким цветом выделяю не самую важную информацию, которая не была озвучена на занятии, тем не менее, у кого-то это вызывало интерес.
|
||
Тип списка |
Код HTML |
Пример |
Маркированный список с маркерами в виде круга |
<ul type="disc"> <li>...</li> </ul> |
|
Маркированный список с маркерами в виде окружности |
<ul type="circle"> <li>...</li> </ul> |
|
Маркированный список с квадратными маркерами |
<ul type="square"> <li>...</li> </ul> |
|