Создание первой веб-страницы

Чтобы начать разработку, в отдельной папке (у меня на рабочем столе) создайте текстовый документ и смените его название на «index.html». В нём мы будем хранить структуру документа, или HTML-код.

HTML — язык разметки гипертекста (HyperText Markup Language). Гипертекст — это текст, имеющий в себе ссылки. Визуально ссылка из себя представляет, как правило, подчёркнутый и выделенный цветом текст. Вот ссылка на текст о ссылках :) .

Название index традиционно присваивается файлу, который будет являться корнем директории. Или проще говоря, если вы заходите на какой-то сайт example.ru, то на самом деле открывается файл example.ru/index.html (или index.php, что чаще бывает или же index.js, index.asp и т.д.). На сервере в каждой папке может быть много файлов с расширением «.html», но если запрашивают сайт, не указывая конкретного файла, то откроется тот, что имеет имя index.

Небольшое отступление. Сервер — это удалённый компьютер, постоянно включенный в сеть. Сайт является содержимым одной из его папок. Это упрощенное определение. Что из себя представляет сайт на самом деле, мы узнаем по мере обучения.

Откройте созданный файл index.html и скопируйте код ниже в этот файл. Сохраните.

<!DOCTYPE html>

<html lang="ru">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="author" content="" />
	<title>Вёрстка - введение</title>
	<link rel="stylesheet" href="css/style.css" />
	<link rel="shortcut icon" href="ico/favicon.png" sizes="32x32" />

</head>

<body>

	<h1>Привет мир!</h1>

</body>

</html>

Двойным кликом откройте ваш первый html-файл в браузере. Если вы видите что-то типа этого, то нужно изменить в текстовом редакторе кодировку.

Каждый элемент, который начинается с «<», а заканчивается «>», называется тегом.

Например, в приведённом документе используются теги: <head>, <body>, <meta>, <title>, <link> и <h1>.

Конструкции, которые включают в начале себя слеш (символ /), называются закрывающими тегами. Например: </h1>, </body>, </html>. Когда говорят, что-то вроде: «Я поместил в тег <form> таблицу», — имеют ввиду, что таблица размещена между открывающим и закрывающим тегами, т.е. между <form> и </form>.

В теге между угловыми скобками размещаются параметры (они же атрибуты), например, в нашем файле у тега <html> параметр lang имеет значение ru. А самый первый тег <meta> имеет параметры http-equiv и content со значениями, соответственно, Content-Type и text/html; charset=UTF-8.

Существуют теги, внутрь которых ничего «не положишь». Вся их смысловая нагрузка размещается в параметрах. В таком случае, у тега отсутствует закрывающий тег. Вместо этого, перед закрывающей угловой скобкой ставится слэш: <meta />, <link />, <img />. Такие теги называются «самозакрывающимися». В нашем примере в теге <head> лишь тег <title> не является самозакрывающимся.