Практикум по Web

Здесь представлены учебные материалы, необходимые для написания небольшого проекта по теме Web-программирование в углубленном курсе школьной информатики.

Введение

HTML (HyperText Markup Language, Язык гипертекстовой разметки) – стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML. Язык HTML интерпретируется браузером. Полученный в результате форматированный текст отображается на экране монитора компьютера или мобильного устройства.

Верстка веб-страниц – процесс создания структуры HTML-кода, размещающего элементы веб-страницы (изображения, текст и т. д.) в окне браузера, согласно разработанному макету.

HTML – теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными тегами. Все теги можно разделить на парные и одиночные. Каждый парный тег состоит из двух частей: открывающего тега и закрывающего. Внутри закрывающего тега используется символ /. Парные теги обычно нужны, чтобы оформить некоторый участок текста. Благодаря паре тегов можно указать начало и конец этого участка.

Например, так выглядит тег абзаца

<p> Текст абзаца </p>

А вот так выглядит тег выделения текста

<strong> Текст будет полужирным </strong>

Но есть и теги, которые не предназначены для оформления фрагментов текста. Например, тег для вставки изображения или тег для вставки разделительной полосы. Такие теги добавляют на страницу одиночный объект, и им не нужно для этого заключать в себя какой-то текст. Поэтому их называют одиночными.

Примеры таких тегов:

– тег перевода строки.
<hr> – тег добавления горизонтальной линии.
<img> – тег вставки изображений.

Теги могут иметь атрибуты. Некоторые теги есть смысл использовать только с атрибутами. Наиболее яркий пример – тег <img>, обозначающий изображение. Для него обязательно нужно указывать атрибут src, который задаёт адрес картинки (иначе браузер не сможет загрузить её).

В общем случае тег записывается следующим образом:

<имя-тега атрибут1="значение1" атрибут2="значение2" ...>

Атрибуты разделяются одним или несколькими пробелами.

HTML имеет ряд особенностей интерпретации:

Перенос строки реализуется только через тег.
Несколько пробелов, идущих подряд, считаются за один.
Нечувствительность к регистру тегов. даст такой же результат, что и , и , и . Несмотря на это, писать разметку лучше в нижнем регистре - это негласное правило.
Переносы строки при определении тега и его атрибутов не влияют на разметку.

HTML позволяет вкладывать теги друг в друга, и одна из самых частых ошибок заключается в неправильной вложенности, например:

<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), добавляются необходимые плагины и библиотеки.