HTML

Языки для создания сайта

Для того, чтобы сделать сайт, нужно знать много разных веб языков. Языки HTML и CSS предназначены для верстки сайтов (верстка - это размещение элементов сайта по нужным местам). Язык PHP нужен для программирования сайта (с его помощью можно, к примеру, сделать регистрацию пользователей). Язык JavaScript нужен для того, чтобы "оживить" сайт: к примеру, сделать меняющиеся картинки.

Язык HTML

Язык HTML - это основа web сайтов, с его помощью создается каркас страницы, которую вы видите в браузере. Если сравнивать страницу сайта и обычную бумажную книгу, то на сайте, как и в книге, есть абзацы и заголовки.

В книге есть название всей книги (по сути самый главный заголовок), есть названия глав, параграфов в этих главах и так далее. Заголовки, абзацы и другие блоки можно выделить и на странице сайта. Это делается с помощью HTML тегов.

HTML теги

HTML теги - это специальные команды для браузера. Они говорят ему, что, к примеру, следует считать заголовком страницы, а что абзацем. Теги строятся по такому принципу: уголок <, потом имя тега, а потом уголок >. Имя тега может состоять из английских букв и цифр. Примеры тегов:

<h1> <p> <b>.

Теги обычно пишутся парами - открывающий тег и соответствующий ему закрывающий. Разница между открывающим и закрывающим тегами в том, что в закрывающем теге после уголка < стоит слеш /.

К примеру, <p> - так я открыл тег, а так - </p> - я его закрыл. Все, что попадает между открывающим и закрывающим тегами, подпадает под воздействие нашего тега.

Бывают теги, которые не нужно закрывать, например, <br> или <img>.

Атрибуты в HTML тегах

В тегах также могут размещаться атрибуты - специальные команды, которые расширяют действие тега. Атрибуты размещаются внутри открывающего тега в таком формате:

<атрибут1="значение"

атрибут2="значение"> Кавычки могут быть любыми - одинарными или двойными, допустимо их вообще не ставить, если значение атрибута состоит из одного слова (но это не желательно).

Стили HTML тегов

HTML тегам можно менять стили: цвета, размеры, шрифты, фон, а также позицию на экране. Для этого используется язык CSS, который расширяет возможности языка HTML.

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

Совместное использование HTML и CSS называется версткой страниц. Это мы и будем изучать в данном учебнике.

Основная структура страницы HTML

Страница сайта - это обычный текстовый файл с расширением .html. Внутри этого файла и хранится текст HTML страницы вместе с тегами. Этот файл обязательно должен иметь следующие теги: тег <html>, который должен содержать в себе текст всего сайта (все, что написано вне этого тега, браузером будет проигнорировано), а внутри него должны быть еще два тега: тег <head> для служебного содержимого страницы и тег <body> - до текста, который и виден на экране браузера.

В служебное содержимое, которое располагается внутри тега <head>, входит много различных вещей, но пока нам нужны только две из них. Это тег <title>, задающий название страницы, которое будет видно во вкладке браузера, и тег <meta>, который задает кодировку страницы (она ставится в атрибуте charset и обычно имеет значение utf-8).

Кроме того, перед тегом <html> обычно пишется конструкция doctype, которая указывает версию языка HTML, на которой сделан сайт. Актуальная сейчас версия языка имеет номер пять и доктайп для нее должен выглядеть так - vvvvvvv. Итак, давайте посмотрим на основную структуру страницы:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>This is the title<title>
</head>
<body> This is the main content of the page. </body>
</html>

Теги для абзацев

Одним из основных элементов страницы являются абзацы. Их можно сравнить с абзацами в книге - каждый абзац начинается с новой строки и имеет так называемую красную строку (это когда первая строка текста абзаца немного отступает вправо). По умолчанию красной строки нет, но ее легко сделать (об этом чуть позже). Абзац создается с помощью тега <p> таким образом:

<p> This is a paragraph.</p>
<p>That is one more paragraph</p>
<p>And one more paragraph</p>

Теги для заголовков страницы

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

Заголовки создаются с помощью тегов <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Они имеют разную степень важности. В заголовке h1 следует располагать название всей HTML страницы, в h2 - название блоков страницы, в h3 - название подблоков и так далее. Все заголовки по умолчанию жирные и имеют разный размер (это можно поменять через CSS, но об этом позже). Для примера сделаем заголовки всех уровней:

<h1>Heading h1<h1>
<h2>Heading h2<h2>
<h3>Heading h3<h3>
<h4>Heading h4<h4>
<h5>Heading h5<h5>
<h6>Heading h6<h6>

Теги для выделения текста жирным

Вы уже знаете, что заголовки по умолчанию жирные. Однако, можно сделать жирным и обычный текст - достаточно взять его в тег <b>. Смотрите пример:

<p>This is regular text and this is<b>bold</b></p>

Теги для выделения текста курсивом

Кроме жирного можно сделать также и курсив с помощью тега <i>:

<p>This is regular text and this is<i>italic</i></p>

Cписки в HTML

Наряду с абзацами и заголовками существует еще один важный элемент страницы - это списки. Такие элементы наверняка знакомы всем пользователям интернета. Они представляют собой перечисление чего-либо (список) по пунктам.

Списки, созданные через тег <ul>, называются неупорядоченными. Такое название им дано потому, что возле каждого пункта списка обычно стоит закрашенный кружок (он называется маркер списка). Внутри списка обязательно должны идти теги <li>. Тег ul задает сам список, а в теги li следует размещать пункты списка (то есть одному li соответствует один маркер списка). Смотрите пример:

Работа со ссылками в HTML

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

Ссылка создается с помощью тега <a>. В этом теге обязательно должен быть атрибут href, в который следует записывать адрес той страницы, на которую ведет ссылка. Давайте для примера сделаем ссылку на гугл. Для этого нужно открыть этот сайт в браузере, скопировать адрес страницы из адресной строки и вставить в атрибут href ссылки:

Внутренние ссылки в HTML

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

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

Для страниц своего сайта следует практиковать другой подход. Изучим его на примере. Пусть в корневой папке вашего сайта расположен файл index.html и файл page.html. Свяжем эти файлы ссылками. Для этого в атрибуте href ссылок следует просто написать имена этих файлов (с их расширением). Давайте сделаем это. На странице index.html сделаем ссылку на страницу page.html:

<h1>Index</h1><a href="page.html">link on Page</a>

А на странице page.html сделаем ссылку на страницу index.html:

<h1>Page</h1><a href="index.html">link on Index</a>

Работа с изображениями в HTML

Давайте теперь разберемся с тем, как разместить изображение на странице вашего сайта. Для этого предназначен тег <img>, имеющий обязательный атрибут src, в котором следует задавать путь к файлу картинки. При этом сам тег не требует закрывающего тега.

Давайте посмотрим на примере. Пусть в корневой папке нашего сайта находится файл smile.png с картинкой. Давайте выведем ее на странице нашего сайта:

Работа с таблицами в HTML

Сейчас мы научимся делать таблицы в HTML. Я думаю, вы представляете, что такое таблица в обычной жизни - это набор строк и столбцов, на пересечении которых находятся ячейки.

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

Код таблицы имеет жесткую структуру: главным является тег table, внутри которого должны лежать теги tr, которые создают ряды таблицы, а внутри них - теги td, которые создают ячейки. Тег table может иметь атрибут border, который задает границу таблице и ее ячейкам.

Давайте для примера сделаем таблицу с тремя рядами и тремя ячейками в каждом ряду:

О школе CSS