Основные теги оформления текста
Заголовки
Как и в газетах и журналах, в HTML-странице любая статья или новость должна начинаться с заголовка. Предусмотрено 6 уровней заголовков: первый из них будет отображен самым крупным шрифтом, а далее чем выше уровень, тем меньше будет размер шрифта.
.Для отображения заголовков существует тег <h> и указывается цифра от 1 до 6, которая соответствует уровню заголовка. Тег заголовка – парный, не забудьте его закрыть.
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвертого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>
Параграфы
После заголовка обычно следует какой-нибудь текст, который необходимо заключать в параграфы, или абзацы. При составлении документа выделяйте блоки текста в отдельные параграфы, как это сделано в книгах – в противном случае может получиться сплошной текст, который очень трудно будет читать посетителю сайта.
В HTML для параграфов используется парный тег <p>, и внутри него помещается тот текст, который нужно отобразить. Пример:
<p>Здесь мы напишем первый параграф</p> |
Теги выделения текста
Иногда необходимо выделить слово, словосочетание, предложение или целый участок текста, чтобы привлечь внимание читателя или поискового робота. Чтобы это сделать, можно выделить фрагмент жирным, курсивом или подчеркнуть.
|
|
Аккуратнее с подчеркиванием текста: по стандартам принято, что подчеркнуты гиперссылки, и многие пользователи уже настолько к этому привыкли, что, видя подчеркнутый текст, хотят «кликнуть» по этому участку текста, ожидая перехода на другую страницу.
Теги <b> и <strong> внешне делают одно и то же: выделяют текст полужирным. Разница в том, что <strong> указывает на важность текста, а <b> просто делает текст полужирным. Так, текст в тегах <strong> устройство для чтения текста вслух будет выделять интонацией, а <b> – нет.
Аналогично с тегами <em> и <i>, делающими текст курсивным: <em> указывает на важность текста, а <i> нет.
<small> уменьшает размер шрифта на единицу по отношению к обычному тексту.
<sub> используется для создания нижних индексов. Сдвигает текст ниже уровня строки, уменьшая его размер.
<sup> используется для создания степеней и верхних индексов. Сдвигает текст выше уровня строки, уменьшая его размер.
<ins> выделяет текст в новой версии документа, подчеркивая его.
<del> перечеркивает текст. Используется для выделения текста, удаленного из документа.
<code> служит для выделения фрагментов программного кода. Отображается моноширинным шрифтом.
|
|
<pre> позволяет вывести текст на экран, сохранив изначальное форматирование. Пробелы и переносы строк при этом не удаляются.
<q> используется для выделения коротких цитат. Браузерами заключается в кавычки.
Вложенные теги
Очень часто при верстке веб-страниц необходимо вкладывать одни теги в другие. Эта вложенность может достигать несколько уровней. Поэтому следует запомнить одно простое правило: закрывать теги необходимо именно в той последовательности, в которой вы их открывали. Первый открытый тег закрывается последним.
<p>Использовать вложенность тегов <b>легко <i>и просто</i> </b> </p> |
Тег <i> был открыт последним – закрываем его первым, а далее уже все остальные теги по очереди.
Необходимые инструменты
● Чтобы начать создавать свои веб-странички, необходим текстовый редактор. Можно воспользоваться встроенным в Windows блокнотом, но для начала удобнее использовать более функциональные текстовые редакторы Sublime text, Notepad++ или Brackets.
● Браузер. Выберите для себя наиболее удобный браузер, только на начальном этапе НЕ используйте Internet Explorer. Я рекомендую пользоваться браузером Google Chrome.
|
|
Горячие клавиши
Alt + tab – перемещение между открытыми окнами.
Ctrl + z – отменить действие.
Ctrl + y – вернуть действие.
Ctrl + x – вырезать.
Ctrl + c – копировать.
Ctrl + v – вставить.
Ctrl + s – сохранить.
Ctrl + a – выделить все.
Ctrl + tab – перемещение между открытыми вкладками.
F5 – обновить страницу.
F2 – переименовать.
Shift + Tab – вернуть одну табуляцию назад.
Shift + home – выделить с указанного места до начала строчки.
Shift + end – выделить с указанного места до конца строчки.
Shift + стрелка – при зажатом Shift выделять в указанную стрелками сторону.
Практика
● Создаем в папке мои докумнты папку с именем группа_фамилия_инициалы.
● Заходим в эту папку, щелкаем правой кнопкой мыши, выбираем пункт «Создать текстовый документ» с расширением «.txt».
● Переименовываем этот файл, даем ему имя index, а расширение меняем на «.html».
● Щелкаем по файлу правой кнопкой мыши, выбираем пункт «Открыть с помощью», выбираем текстовый редактор и открываем.
● Напишем теперь первое приветствие миру. Переходим в текстовый редактор и набираем: <h1>Hello world!</h1> <p>I’m here</p>.
● Чтобы посмотреть результат в браузере, щелкаем по этому файлу.
|
|
Практическое задание
Создание страницы товара каталога
- Создать HTML-страницу визитку.
На странице должны присутствовать:
○ Структура HTML-документа.
○ ФИО
○ Фото.
○ О себе.
○ Ваша специализация
○ Краткое резюме
○ Ваши услуги.
○ Заголовок «Подробное описание услуг».
○ Текст подробного описания услуг
○ Горизонтальная черта.
○ Текст «Все права защищены».
- Выучить комбинации горячих клавиш
- * Добавить произвольные подразделы описания услуг, например репетитор по математике, информатике, русскому …
- * Добавить 2 страницы услуг по вашей тематике.
Задачи со * предназначены для продвинутых учеников, которым мало сделать обычное задание.
Дополнительные материалы
Что такое IP адрес.
Какие есть браузеры и как его выбрать.
Полезная статья о структуре HTML-документа.
Используемая литература
Для подготовки данного методического пособия были использованы следующие ресурсы:
- http://htmlbook.ru/samhtml/struktura-html-koda.
- https://ru.wikipedia.org/wiki/%D0%91%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80.
- http://html.manual.ru/book/html/hierarchy.php.
- https://webref.ru/.
Дата добавления: 2021-06-02; просмотров: 55; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!