Добавлен: 15.05.2023
Просмотров: 193
Скачиваний: 3
заканчиваются тегом -->. Все, что находится между этими тегами отображаться на веб-странице не будет. Если после сохранения открыть web-страницу браузером мы увидим перед собой пустую вкладку. Начнем заполнять код нашей web-страницы - добавляем после тега <head> строку
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Тег <meta>[7] является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка. Рассмотрим дескрипторы которые отвечают за форматирования текста. Ниже тега <meta> добавляем строку
<title> Основы программирования на языке HTML </title>
Тег <title> выполняет множество задач, как прямо, так и косвенно:
- По тексту заголовка пользователь получает дополнительную информацию, что это за сайт, на котором он находится и как называется текущая страница. Не стоит думать, что достаточно в документе указать логотип сайта и проигнорировать заголовок, ведь посетитель может свернуть окно. В свернутом виде заголовок также отображается на кнопках панели задач, поэтому можно легко ориентироваться, с каким сайтом в данный момент работать, а не перелистывать их по очереди.
- Большинство браузеров поддерживают возможность сохранения веб-страницы на локальный компьютер. В этом случае имя сохраненного файла совпадает с названием заголовка документа. Если в тексте заголовка содержатся символы недопустимые в имени файла (\ / : * ? " < > |), они будут проигнорированы или автоматически заменены другими дозволенными символами.
- При сохранении в разделе браузера «Избранное», адрес текущей страницы с ее заголовком помещается в список предпочитаемых ссылок. Поскольку этот список, как правило, хранится в виде отдельных файлов, к их именам также прилагается уже вышеописанное правило.
- В результатах поиска по ключевым словам, поисковые системы используют заголовок страницы для указания ссылки на данный документ. Интересно написанный заголовок, содержащий ключевые слова, привлечет больше внимания посетителей и увеличит шансы на то, что сайт посетит больше людей.
Ниже тега <body> добавляем строку
<h4> Введение. </h4>
HTML предлагает шесть текстовых заголовков разного уровня[8], которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h1> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>...<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.
Ниже тега < h4> добавляем набор строк :
<p>Согласно выбранной теме “Основы программирования на языке HTML”
мы рассмотрим основные элементы HTML и попробуем совместно на примерах в них разобраться.
Цель работы - изучение основ языка HTML.
Для использования примеров необходимо: ОС Windows,блокнот,paint, браузер.
Все примеры сохраняются в блокноте в кодировке UTF-8.
Задачи:
-Рассмотреть основы языка HTML:
- Что является базовым элементом HTML
- Какие типы дескрипторов существуют
- На примерах рассмотреть дескрипторы для обработки различных элементов (теста, изображения)
-Рассмотреть процесс создания веб-страниц используя текстовый редактор, без использования конструкторов и специализированных программных продуктов;
Структура: работа состоит из введения, трех глав, заключения и списка использованной литературы. </p>
Тег <p> является блочным элементом, поэтому текст всегда начинается с новой строки[9], абзацы идущие друг за другом разделяются между собой отбивкой (так называется пустое пространство между ними).Тег <p> определяет абзац (параграф) текста. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.
Сохранив текст и запустив его в браузере, мы увидим (скриншот № 3)
скриншот № 3
теперь нам необходимо отформатировать наш текст и в этом нам помогут:
- Тег <br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца <p>, использование тега <br> не добавляет пустой отступ перед строкой. Устанавливаем его следующим образом :
<p>Согласно выбранной теме “Основы программирования на языке HTML” <br>
мы рассмотрим основные элементы HTML и попробуем совместно на примерах в них разобраться. <br>
Цель работы - изучение основ языка HTML. <br>
Для использования примеров необходимо: ОС Windows,блокнот,paint, браузер. <br>
Все примеры сохраняются в блокноте в кодировке UTF-8. <br>
<br>
Задачи: <br>
-Рассмотреть основы языка HTML: <br>
- Что является базовым элементом HTML<br>
- Какие типы дескрипторов существуют<br>
- На примерах рассмотреть дескрипторы для обработки различных элементов (теста, изображения) <br>
-Рассмотреть процесс создания веб-страниц используя текстовый редактор, без использования конструкторов и <br> специализированных программных продуктов; <br>
<br>
Структура: работа состоит из введения, трех глав, заключения и списка использованной литературы. </p>
Таким образом установив тег <br> в указанных местах текста , мы сможем добиться форматирования текста как указанно на скриншоте № 4
скриншот № 4
- Тег <strong> предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием. Тег является парным.
Используем данный тег:
<strong> Задачи: </strong> <br>
<strong>Структура:</strong>
Полученный нами результат добавления тега <strong> в текст веб-страницы (скриншот № 5)
(скриншот № 5)
- Тег <b> устанавливает жирное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста. Тег является парным.
Используем данный тег для выделения в тексте “ HTML”:
<b>HTML</b>
… элементы <b>HTML</b> и попробуем ...
… языка <b>HTML</b> …
… <b>HTML</b> …
… <b>HTML</b> …
Полученный нами результат добавления тега <b> в текст веб-страницы (скриншот № 6)
Согласно спецификациям W3C, предписывается использовать тег <strong> взамен устаревшему <b>
(скриншот № 6)
- Тег < em> является аналогом тега <i> - устанавливает курсивное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста. Тег является парным. Согласно спецификациям W3C, предписывается использовать тег < em > взамен устаревшему < i >.
Используем данный тег для выделения в тексте “ HTML”:
<p>Согласно выбранной теме <i>“Основы программирования на языке HTML” <i><br>
Полученный нами результат добавления тега <i> в текст веб-страницы (скриншот № 7)
(скриншот № 7)
Теперь давайте разберем, как осуществлять выравнивание. Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому краю, правому краю, по центру или по ширине. Наиболее распространенный вариант — выравнивание по левому краю, когда
слева текст сдвигается до края, а правый остается неровным. Выравнивание по правому краю и по центру в основном используется в заголовках и подзаголовках. Следует иметь в виду, что при использовании выравнивания по ширине, в тексте между словами могут появиться большие интервалы, что не очень красиво. Для установки выравнивания текста обычно используется тег параграфа <p> с атрибутом align, который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега <div> с аналогичным атрибутом align. Он может принимать следующие значения:
- left — выравнивание по левому краю, задается по умолчанию;
- right — выравнивание по правому краю;
- center — выравнивание по центру;
- justify — выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для текста, длина которого более, чем одна строка.
Атрибут align можно применять как для текста, так и для заголовков.
Давайте попробуем посмотреть на результат применения атрибут align
на примере заголовков - создадим страницу c названием “выравнивание.html”
со следующим кодом:
<!DOCTYPE html>
<html>
<head>
<title> Основы программирования на языке HTML </title>
<body>
<h4> • left — выравнивание по левому краю, задается по умолчанию; </h4>
<h4 align=right> • right — выравнивание по правому краю; </h4>
<h4 align=center> • center — выравнивание по центру; </h4>
<h4 align=justify> • justify — выравнивание по ширине (одновременно по правому и левому краю). Этозначение работает только для текста, длина которого более, чем одна строка.</h4>
</body>
</html>
Полученный нами результат изменения кода в веб-страницы (скриншот № 8)
(скриншот № 8)
Теперь давайте остановимся и рассмотрим наш пример – форматирование текста необходимо продолжить (шрифт и цвет фона), но копнув глубже выяснится, что существует множество других тегов HTML для вывода и форматирования текста и оформления web-сайтов, но их инструментарий весьма скуден и в большей части уже не используется напрямую. Что же делать?
Глава III – CSS.
Ответ прост - необходимо использовать CSS. На сегодняшний день CSS, поддерживается всеми браузерами и дает огромнейший инструментарий для работы с визуализацией. Давайте немного рассмотрим, что такое CSS и для чего он нужен.
CSS это акроним для Cascading Style Sheets/Каскадных таблиц стилей.[10]
Это значит, что CSS это язык стилей, определяющий отображение HTML-документов. Например, CSS работает с шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами. В чём разница между CSS и HTML? HTML используется для структурирования содержимого страницы. CSS используется для форматирования этого структурированного содержимого. Появление CSS стало революцией в мире web-дизайна.
Конкретные преимущества CSS:
- управление отображением множества документов с помощью одной таблицы стилей;
- более точный контроль над внешним видом страниц;
- различные представления для разных носителей информации (экран, печать, и т. д.);
- сложная и проработанная техника дизайна.
Так, как цель работы рассмотреть основы работы разберем лишь необходимую нам часть функционала для форматирования текста и один из методов применения CSS.
Изменим наш код:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h4 {color:red}
p {color:blue}
</style>
<title> Основы программирования на языке HTML </title>
<body>
<h4> Введение. </h4>
<p>Согласно выбранной теме <i>“Основы программирования на языке HTML”</i> <br>
мы рассмотрим основные элементы <b>HTML</b> и попробуем совместно на примерах в них разобраться. <br>
Цель работы - изучение основ языка <b>HTML</b>. <br>
Для использования примеров необходимо: ОС Windows,блокнот,paint, браузер. <br>
Все примеры сохраняются в блокноте в кодировке UTF-8. <br>
<br>
<strong>Задачи:</strong> <br>
-Рассмотреть основы языка <b>HTML</b>: <br>
• Что является базовым элементом <b>HTML</b><br>
• Какие типы дескрипторов существуют<br>
• На примерах рассмотреть дескрипторы для обработки различных элементов (теста, изображения) <br>
-Рассмотреть процесс создания веб-страниц используя текстовый редактор, без использования конструкторов и <br>
специализированных программных продуктов; <br>
<br>
<strong>Структура:</strong> работа состоит из введения, трех глав, заключения и списка использованной литературы. </p>