План урока
| Цель. | Освоение базовых приемов разметки текста. Понимание правил вложения тегов, блочных и строчных элементов |
| Инструменты. | Любой текстовый редактор, браузер. |
| Время / сложность. | 1-2 часа / простой. |
В прошлом уроке мы узнали, что такое html, рассмотрели общие вопросы создания простейшего документа, познакомились с тегами.
Сегодня мы научимся использовать теги html для разметки текста и дополним нашу страничку из прошлого урока.
Еще раз о тегах (немного теории)
Как мы уже знаем, теги подразделяются на одиночные и парные. Использование одиночных тегов элементарно, при использовании парных тегов важно следовать двум правилам:
- Парный тег всегда должен иметь открывающий и закрывающий элемент.
- Недопустимо пересечение тегов, например
<h1><p></h1></p>. Вложение тегов друг в друга разрешено:<h1><p></p></h1>
Казалоь бы все просто, следим за закрытием тегов и правильным порядком и получаем отсутствие ошибок. Но не тут-то было. В html есть менее очевидное, но гораздо более важное разделение тегов на строчные и блочные. Этот момент настолько важен, что мы посвятим ему отдельный урок. Сейчас же достаточно будет представлять себе, что строчный элемент это чать строки, а блочный — представляет собой прямоугольную область. Отсюда становится интуитивно понятным следующее требование: блочный элемент никогда не должен быть заключен в строчный.
Теперь, чтобы не было скучно пора возвращаться к практике.
Теги html для оформления текста
Наиболее часто употребимыми тегами при оформлении текста являются уже знакомые нам теги заголовка и параграфа (<h1> и <p>). Данные теги относятся к парным блочным элементам.
О следующих тегах так же нетрудно догадаться, вспомнив структуры, встречающиеся на страницах сайтов:
<ul>— парный блочный тег, обозначает маркированный список.<ol>— парный блочный тег, обозначает нумерованный список.<li>— парный блочный тег, обозначает элемент списка, располагается внутри тега ul или ol.<a>— парный строчный тег, обозначает гиперссылку.<table>— парный блочный тег, обозначает таблицу.<tr>— парный блочный тег, обозначает строку таблицы, располагается внутри тега table.<td>— парный блочный тег, обозначает ячейку таблицы, располагается внутри тега tr.
Существует еще немало тегов, которые можно применить для разметки текста, однако и этот базовый набор предоставляет немалые возможности.
От слов к делу!
Я глубоко убежден, что практика — один из лучших учителей. Поэтому вместо рассказа, как использовать данные теги предлагаю выполнить несложное задание. Откройте свой редактор html (ведь вы же установили его?) и создайте страницу, на которой будет представлен текст этой статьи до текущего пункта и ссылка на адрес этой статьи. Не забудьте об корректном оформлении страницы, о котором мы говорили в предыдущем уроке.
Если что-то не получатся, счелкните в браузере правой кнопкой мыши на статье и выберите в контекстном меню просмотр исходного кода страницы. Как можно увидеть в этой статье используются все теги, о которых мы говорили и еще тег <code>, который предназначен для выделения примеров кода. В итоге вы должны получить что-то следующее:
Как мы видим, html верно передает структуру текста, однако элементы оформления списков, заголовков и т.п. отличаются. Серьезно мы займемся стилизацией элементов html через несколько занятий, сейчас же хочу предостеречь вас от распространенной ошибки начинающих верстальщиков.
Для оформления современных html страниц используется язык CSS (каскадные таблицы стилей). Подвох заключается в том, что старые стандарты html определяли для тегов большое количество атрибутов, которыми можно заменить css стили (частично), хотя большинство из них уже считаются исключенными из html, браузеры поддерживают их для обратной совместимости.
Иногда кажется удобным применить устаревший атрибут, но этого не стоит делать ни в коем случае по нескольким причинам:
- отсутствует в стандарте, поэтому в любой момент может перестать работать в новых браузерах;
- смешивает код, определяющий структуру информации, с оформлением, что вызывает хаос, путаницу и необходимость внесения изменений в исходный код при настройке оформления.
Спецсимволы html
Ну как справились с заданием? Если вы новичек и честно писали теги самостоятельно, то высока вероятность, что у вас возникли проблемы с выводом в браузер текста тегов. Ведь в самом деле, если тег записать в его непосредственном виде, браузер обработает его, как управляющую конструкцию, а не как текст. Если вы заглянули в исходный код, то должны были заметить, что для вывода тегов используется такая запись: <tag>. Символы угловых скобок заменяются мнемониками html, которые используются для вывода различных спецсимволов. Еще одним примером использования мнемоник в тексте данной статьи является вставка длинного тире «—».
Домашнее задание
Используя приведенные в уроке теги, создайте первый текст на тему вашего нового сайта. Не ленитесь! После окончания уроков по созданию первого сайта мы начнем продвижение и монетизацию учебных сайтов. В случае возникновения вопросов или желания показать мне результат вашей домашней работы — пишите мне.
Самое важное
- Помните о правилах вложения тегов:
- всегда закрывать парный тег;
- запрещено пересечение тегов;
- не вкладывать блочные элементы в строковые (даже после переопределения режима отображения, о чем вы узнаете из следующих уроков).
- Используйте html только для представления структуры информации, а CSS для оформления.
- Заменяйте спецсимволы на html сущности.
