2020-04-12
142
Каждая страница в HTML-документе состоит из трех обязательных элементов:
- Тип документа.
- Раздел <head></head> с технической информацией о странице: заголовок, описание, ключевые слова для поисковых машин, кодировка. Введенная в нем информация в основном не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.
- Раздел <body></body>, где располагаются все элементы, которые видит пользователь. Именно с этим разделом мы в основном и будем работать.
DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в интернете.
Элементы, находящиеся внутри тега <html>, образуют дерево документа, так называемую объектную модель документа, DOM (document object model). При этом элемент <html> является корневым.
Пример структуры HTML 5:
| <!doctype html> <html> <head> <title>Hello HTML</title> <meta charset="UTF-8"> </head> <body>... </body> </html> |
Основные теги оформления текста
|
|
|
Заголовки
Как и в газетах и журналах, в 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 страницы услуг по вашей тематике.
Задачи со * предназначены для продвинутых учеников, которым мало сделать обычное задание.
