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

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

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

Введение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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>

Разберем подробно каждую строку:

Структура проекта

Под структурой проекта понимается способ организации файлов проекта в его директории. Лучше всего отдельные категории файлов помещать в свои папки: изображения в папку images или img, CSS-файлы (меню, стили оформления) в папку css, JS-скрипты в папку js. В корне папки должен находиться только файл index.html и страницы сайта, либо только index.html, а страницы в отдельной папке pages. Соблюдение этих правил позволит в дальнейшем не запутаться в проекте.

Для удобства работы чаще всего применяются следующие имена файлов: главная страница – это index.html, стили проекта styles.css, скрипты scripts.js. Вёрстка страницы делается поэтапно: сначала пишется HTML-код страницы, затем добавляются стили (CSS), а после, если необходимо, пишутся скрипты (JS), добавляются необходимые плагины и библиотеки.

Copyright © 2014-2022 Design by Skyer