Здесь представлены учебные материалы, необходимые для написания небольшого проекта по теме Web-программирование в углубленном курсе школьной информатики.
Введение
HTML (HyperText Markup Language, Язык гипертекстовой разметки) – стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML. Язык HTML интерпретируется браузером. Полученный в результате форматированный текст отображается на экране монитора компьютера или мобильного устройства.
Верстка веб-страниц – процесс создания структуры HTML-кода, размещающего элементы веб-страницы (изображения, текст и т. д.) в окне браузера, согласно разработанному макету.
HTML – теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными тегами. Все теги можно разделить на парные и одиночные. Каждый парный тег состоит из двух частей: открывающего тега и закрывающего. Внутри закрывающего тега используется символ /. Парные теги обычно нужны, чтобы оформить некоторый участок текста. Благодаря паре тегов можно указать начало и конец этого участка.
Например, так выглядит тег абзаца
<p> Текст абзаца </p>А вот так выглядит тег выделения текста
<strong> Текст будет полужирным </strong>Но есть и теги, которые не предназначены для оформления фрагментов текста. Например, тег для вставки изображения или тег для вставки разделительной полосы. Такие теги добавляют на страницу одиночный объект, и им не нужно для этого заключать в себя какой-то текст. Поэтому их называют одиночными.
Примеры таких тегов:
- <br> – тег перевода строки.
- <hr> – тег добавления горизонтальной линии.
- <img> – тег вставки изображений.
Теги могут иметь атрибуты. Некоторые теги есть смысл использовать только с атрибутами. Наиболее яркий пример – тег <img>, обозначающий изображение. Для него обязательно нужно указывать атрибут src, который задаёт адрес картинки (иначе браузер не сможет загрузить её).
В общем случае тег записывается следующим образом:
<имя-тега атрибут1="значение1" атрибут2="значение2" ...>Атрибуты разделяются одним или несколькими пробелами.
HTML имеет ряд особенностей интерпретации:
- Перенос строки реализуется только через тег.
- Несколько пробелов, идущих подряд, считаются за один.
- Нечувствительность к регистру тегов. <br> даст такой же результат, что и <BR>, и <Br>, и <bR>. Несмотря на это, писать разметку лучше в нижнем регистре - это негласное правило.
- Переносы строки при определении тега и его атрибутов не влияют на разметку.
HTML позволяет вкладывать теги друг в друга, и одна из самых частых ошибок заключается в неправильной вложенности, например:
<p> Текст <strong> выделен </p> полужирным </strong>
В этом примере тег <p> закрывается раньше, чем тег <strong> – это ошибка.
Другой тип ошибок случается из-за досадных опечаток и невнимательности, когда забывают пробелы между атрибутами тега или неправильно пишут их названия.
Шаблон HTML-страницы
<!DOCTYPE html>
<html>
<head>
<!-- Заголовок документа -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Заголовок страницы</title>
<!-- Здесь подключаются стилевые файлы и скрипты -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- Тело документа -->
<p>Пример HTML-страницы</p>
</body>
</html>
Разберем подробно каждую строку:
- <!DOCTYPE html> — тип документа. Каждый HTML-документ должен начинаться с указания типа документа. Тип документа нужен, чтобы браузер мог определить версию HTML и правильно отобразить страницу. Приведенное указание типа документа используется в 5-ой версии HTML.
- <html>...</html> - начало и конец документа. Внутри этих тегов должны находиться теги заголовка (<head> и </head>) и тела (<body> и </body>) документа.
- <head>...</head> - информация о странице (кодировка, заголовок страницы, специальная информация для поисковиков), а еще подключаются стилевые файлы и скрипты. Тег <head> не отображается. Его цель сообщить браузеру информацию о странице.
- <meta charset="UTF-8"> — кодировка символов документа. Если не указать кодировку, то в некоторых браузерах определенные символы могут отображаться некорректно.
- <meta name="viewport" content="width=device-width"> — мета-тег области просмотра, позволяющий изменять ширину области просмотра, что необходимо для адаптивного веб-дизайна. width = device-width устанавливает ширину области просмотра равной ширине экрана.
- <title>Заголовок страницы</title> — название страницы, котороые отображается во многих местах, например, на вкладке браузера, в результатах поиска при сохранении страницы в качестве закладки и т.д.
- <link>...< — подключение внешних CSS-стилей и скриптов на языке JavaScript
- <body>...</body> - контент страницы, который пользователь увидит в браузере.
Структура проекта
Под структурой проекта понимается способ организации файлов проекта в его директории. Лучше всего отдельные категории файлов помещать в свои папки: изображения в папку images или img, CSS-файлы (меню, стили оформления) в папку css, JS-скрипты в папку js. В корне папки должен находиться только файл index.html и страницы сайта, либо только index.html, а страницы в отдельной папке pages. Соблюдение этих правил позволит в дальнейшем не запутаться в проекте.
Для удобства работы чаще всего применяются следующие имена файлов: главная страница – это index.html, стили проекта styles.css, скрипты scripts.js. Вёрстка страницы делается поэтапно: сначала пишется HTML-код страницы, затем добавляются стили (CSS), а после, если необходимо, пишутся скрипты (JS), добавляются необходимые плагины и библиотеки.