Цель данного мини курса - дать Вам базовые знания HTML, которые помогут Вам создавать свои первые web-страницы или редактировать уже готовые шаблоны своих web-сайтов!

Что такое HTML?

HTML это "родной язык" вашего браузера (программы просмотра вэб-страниц).
Говоря кратко, HTML был изобретён в 1990 году учёным, Тимом Бёрнсом-Ли (Tim Berners-Lee), и предназначался для облегчения обмена документами между учёными различных университетов. Проект имел больший успех, чем Tim Berners-Lee мог ожидать. Этим изобретением HTML он заложил основы современной сети Internet.

HTML это язык, который позволяет представлять информацию (например, научные исследования) в Internet. То, что вы видите при просмотре страницы в Internet, это интерпретация вашим браузером HTML-текста. Чтобы увидеть HTML-коды страницы в Internet, щёлкните "Вид" в линейке меню вашего браузера и выберите "Исходный код страницы", или нажмите комбинацию клавишь Ctrl + U .

Для неискушённого HTML-код выглядит сложным, но этот мини курс поможет вам разобраться в нём.
Для чего я могу использовать HTML?

Если вы хотите создавать web-сайты, вы не обойдётесь без HTML. Даже если вы используете для создания web-сайтов такие программы, как Dreamweaver, знание основ HTML значительно упростит вам жизнь, а ваш web-сайт станет намного интересней. Хорошей новостью является то, что HTML легко изучать и использовать. Через два урока вы уже создадите ваш первый web-сайт.

HTML используется для создания web-сайтов. И это очень просто!
Но как расшифровывается H-T-M-L?

HTML это сокращение от "HyperText Mark-up Language/язык гипертекстовой разметки" - и на данном этапе этого знания вам вполне достаточно. Однако, чтобы всё было путём, давайте разъясним некоторые детали.

* Hyper противоположно linear/построчно. В добрые старые времена - когда кошки ловили мышей - компьютерные программы работали построчно: программа выполняла одну строку, затем переходила к выполнению следующей, и т. д. Но HTML работает по-иному - вы можете перейти куда и когда захотите. Например, не нужно посещать MSN.com до того, как посетить MegaWeb.su.
* Text - всё понятно.
* Mark-up - это разметка, то, что вы делаете с текстом. Вы размечаете текст так же, как вы делаете это в текстовых редакторах: выставляете заголовки, списки, выделяете текст жирным шрифтом и т. д.
* Language это язык - HTML. В нём используется много английских слов.

В данном мини курсе вы будете изучать так называемы XHTML (Extensible HyperText Mark-up Language), который, коротко говоря, является новым и более структурированным вариантом HTML.
Если вы поняли, что такое HTML (и XHTML), давайте перейдём к тому, для чего они оба предназначены: к созданию web-сайтов.

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

ПРИМЕЧАНИЕ :
Веб-страница определяется как единый HTML-документ, независимо от его длины. При ее просмотре вы можете не прокручивать экран вообще, а можете прокручивать много раз. В любом случае вы наблюдаете на экране только лишь одну веб-страницу.
Само название языка дает некоторое понятие о его предназначении: это язык разметки. И это отличает его от языков программирования. Можно говорить, что HTML — это набор инструкций, которые указывают веб-браузеру, каким образом выводить тот или иной текст или изображение.

Многие думают, что создать web-сайт очень трудно. Это совершенно не так! Каждый может научить создавать web-сайты. Если вы готовы, то сможете сделать сайт уже через час.

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

Цель данного мини курса - дать вам простое и корректное понимание того, как делать web-сайты. Это мини курс начинается с нуля и не требует абсолютно никаких предварительных навыков программирования.

Мы не можем рассказать здесь обо всём. От вас потребуется немного настойчивости и желания поэкспериментировать. Но не сомневайтесь - создание web-сайтов вам понравится и принесёт громадное удовлетворение результатами вашей работы.

То, как вы будете использовать этот учебник, зависит от вас. Но мы советуем читать не более двух-трёх уроков в день и выделять время для экспериментов с тем новым, что вы узнаете в каждом уроке.

И так, начнём!

Урок 1: Начало:

В этом первом уроке мы кратко представим вам утилиты, которые нужны для создания web-сайта.
Что же необходимо иметь?

Вероятнее всего у вас уже всё необходимое.

У вас есть "браузер/browser". Это программа просмотра web-страниц. Сейчас вы просматриваете данную страницу в вашем браузере.

Не важно, какой браузер у вас имеется. Обычно это Microsoft Internet Explorer. Но есть и другие - Opera и Mozilla Firefox, и их также можно использовать.

Возможно вы уже слышали, или даже использовали такие программы, как Microsoft FrontPage, Adobe Dreamweaver или даже Microsoft Word, которые могут - или заявляют что могут - создавать web-сайты для вас. Пока что забудьте об этих программах! Они не научат вас тому, как кодировать web-сайт.

Вам нужен простой текстовый редактор. Если вы используете Windows, то в ней есть Notepad(Блокнот), который обычно находится в меню Старт, Программы, Стандартные:

Где найти Notepad(Блокнот)

Если вы используете не Windows, то можете выбрать аналогичный простой текстовый редактор. Например, Pico (Linux) или TextEdit (Mac).

Notepad(Блокнот) прекрасно подходит для создания кода, поскольку никак не влияет на то, что вы пишете. Это даёт вам полный контроль над текстом. Проблема многих навороченных программ в том, что в них много стандартных функций, из которых вы можете выбирать необходимые. Обратной стороной этого является то, что всё подгоняется под эти стандартные функции. Поэтому такие программы часто не в состоянии создать точно такой сайт, какой необходим вам. Или что ещё хуже, они начинают изменять написанный вами код. При использовании Notepad(Блокнот) или иного простого текстового редактора только вы отвечаете за то, что написано.

Браузер и Notepad(Блокнот или аналогичный простой редактор) - вот всё, что вам необходимо для работы с данным мини курсом и создания своих web-сайтов.
Нужно ли мне быть в сети online?

Вам не обязательно иметь соединение с Internet - ни для чтения мини курса, ни для создания ваших web-сайтов.

Вы можете даже распечатать этот мини курс, или просто отключиться от Internet. Вы можете делать web-сайт на жёстком диске вашего компьютера и
выгружать его в Internet после окончания работы.

Урок 2: Что такое HTML-тэги?

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

Все тэги имеют одинаковый формат: они начинаются знаком "<" и заканчиваются знаком ">".

Обычно имеются два тэга - открывающий: <html> и закрывающий: </html>.
Различие в том, что в закрывающем имеется слэш "/".

Всё содержимое, помещённое между открывающим и закрывающим тэгами, является содержимым тэга.

Но, как говорится, из каждого правила есть исключения, и в HTML также имеются тэги, которые являются и открывающими, и закрывающими. Эти тэги не содержат текста, а являются метками, например, перенос строки выглядит так: <br />.

HTML - это тэги, и ничего кроме тэгов. Для изучения HTML нужно изучить различные тэги.

Например: тэг <b> информирует браузер, что весь текст между <b> и </b> должен быть напечатан жирным шрифтом. ("b" это сокращение для "bold".)
Пример 1:


будет выглядеть при просмотре в браузере:



Тэги <h1>, <h2> <h3>, <h4>, <h5> и <h6> указывают браузеру создавать заголовки (h для "heading" (Главный)), где <h1> это заголовок первого уровня - самый крупный шрифт, <h2> - заголовок второго уровня - шрифт меньшего размера, и <h6> - заголовок шестого уровня - самого низкого в этой иерархии, и самый маленький шрифт.

будет выглядеть в браузере:



В каком регистре должны вводиться буквы тэгов?

Большинству браузеров безразлично, в каком регистре введены буквы тэгов. <HTML>, <html> или <HtMl> обычно даёт одинаковый результат. Однако корректным будет нижний регистр. Поэтому привыкайте печатать тэги в нижнем регистре.

Где размещать все эти тэги?

Вы печатаете ваши тэги в HTML-документе. На web-сайте имеется один или более HTML-документов. Когда вы бродите по Web, вы открываете различные HTML-документы.

Если вы перейдёте к следующему уроку, то уже через 10 минут сможете создать свой первый web-сайт.

Урок 3: Создайте свой первый сайт

После полученных в предыдущем уроке знаний вы уже через несколько минут создадите свой первый web-сайт.

В Уроке 1 мы узнали, что необходимо для создания web-сайта: браузер и Notepad (Блокнот или аналогичная программа - текстовый редактор). Поскольку вы читаете этот текст, то ваш браузер уже открыт. Вам нужно открыть лишь дополнительное окно браузера (открыть браузер ещё раз), и вы сможете читать этот мини курс и одновременно видеть ваш новый web-сайт.

Также откройте Notepad (Блокнот) "Пуск" - "Программы" - "Стандартные" - "Блокнот"

Теперь мы готовы!

Начнём с чего-нибудь попроще. Как насчёт страницы, на которой написано: "Ура! Это моя первая web-страница." Читайте дальше, и вы узнаете, как это легко сделать.

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

Во-первых необходимо сообщить браузеру, что вы будете "говорить" с ним на языке HTML. Это делается тэгом <html> (тут ничего нового). Так что, прежде чем напечатать что-либо, нужно поставить тэг "<html>" в первой строке текстового документа в блокноте .

Как вы, возможно, помните из предыдущего урока, <html> это открывающий тэг, который должен иметь и закрывающий тэг после того, как вы закончите ввод HTML. Поэтому, чтобы не забыть, поставьте закрывающий тэг "</html>" на пару строк ниже и вводите весь текст документа между <html> и </html>.

Следующее, что необходимо, это "head" (голова или "шапка"), которая содержит служебную информацию о вашем документе, и "body" (тело), содержимое самого документа. Поскольку HTML логичен, head (<head> и </head>) находятся выше body (<body> и </body>).

Ваш документ теперь должен выглядеть так:



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

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

Как вы уже видели ранее, в вашем HTML-документе есть две части: а head и body. В разделе head вы вносите информацию о странице, а body содержит информацию самой страницы.

Например, если вы хотите дать название документу, чтобы оно появлялось в верхней строке браузера, это нужно сделать в разделе "head". Тэг для названия - <title>:



Обратите внимание, что этот title не появляется на самой web-странице. Всё, что вы хотите видеть на самой странице, является содержимым/content и должно, следовательно, находиться между тэгами "body".

Итак, мы хотим, чтобы на странице выводилось "Ура! Это моя первая страница." Этот текст, который вы хотите показать, и, естественно, он должен располагаться в разделе body. Поэтому в разделе body напечатайте следующее:



Буква p в <p> это сокращение от "paragraph" и означает именно это - параграф текста.
Ваш HTML-документ должен теперь иметь такой вид:



Готово! Вы создали свой первый настоящий web-сайт!

Теперь нужно сохранить его на жёсткий диск, а затем открыть в вашем браузере:

* В Блокноте выберите "Сохранить как..." в меню "Файл".
* Выберите "Все файлы" в боксе "Тип файла". Это очень важно - иначе вы сохраните файл как обычный текстовый документ, а не как HTML-документ.
* Теперь сохраните ваш документ как "page1.html" (расширение ".html" указывает, что это HTML-документ. ".htm" даст тот же результат. Я всегда использую ".html", но вы можете выбрать любое из этих двух расширений). htm - это для старых версий, виндовз, которые не поддерживали файлы с расширением более 3 символов. Где вы сохраните документ на жёстком диске - не имеет значения, главное запомнить это место, чтобы потом легко найти файлы.

Теперь откроем браузер:

* Выберите "Открыть" в меню "Файл".
* Щёлкните "Обзор" в появившемся диалоге.
* Теперь найдите ваш HTML-документ и щёлкните "Открыть".

Теперь вы должны увидеть страницу с текстом "Ура! Это моя первая страница." в вашем браузере. Поздравляем!

Урок 4: Повторим то, что уже знаем.

Всегда начинайте работу с базового шаблона, который мы создали на предыдущем уроке:



В разделе head всегда пишите: <title>Название вашей страницы</title>. Обратите внимание, что title выводится в строке заголовка окна браузера.
Этот title очень важен, поскольку используется поисковыми машинами (такими, как Google) для индексирования вашего web-сайта и показа в результатах поиска.
В разделе body вы записываете содержимое страницы. Теперь вы уже знаете несколько важных тэгов:



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

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

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

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

Урок 5: Ещё немного HTML-тэгов

Вы уже сделали несколько страниц ? Если нет, вот пример:



Теперь выучим семь новых тэгов.

Таким же образом, как вы делали текст жирным шрифтом с помощью тэга <b>, вы можете придать ему характер курсива/italic тэгом <i>. И конечно, "i" это сокращение от "italic".

Пример 1:



будет выглядеть в браузере:



Аналогично можно уменьшить размер шрифта тэгом <small>:

Пример 2:



будет выглядеть в браузере:



Можно ли использовать несколько тэгов одновременно?

Да, исключая перекрывание тэгов. Это проще увидеть на примере:

Пример 3:

Если вы хотите вывести текст bold и italic, это нужно сделать так:



а НЕ так :



Разница в том, что, в первом случае, мы закрыли первый тэг в последнюю очередь. Так мы избегаем конфликтов в браузере.

Как сказано в Уроке 3, есть тэги, которые являются одновременно открывающими и закрывающими. Эти тэги содержат команды, которые не связаны с конкретными буквами, являются изолированными командами. Пример - тэг <br />, который создаёт перевод строки:

Пример 4:



будет выглядеть в браузере:



Заметьте, что этот тэг записан как гибрид открывающего и закрывающего тэгов с пробелом и слэшем: <br />. В принципе, его можно записывать <br></br>, но зачем усложнять?

Другой такой тэг - <hr /> - рисует горизонтальную линию ("hr" от "horizontal rule"):

Пример 5:



будет выглядеть в браузере:



Примеры тэгов, требующих наличия и закрывающего тэга: <ul>, <ol> <li>. Эти тэги используются для вывода списков.

<ul> - сокращение от "unordered list/неупорядоченный(маркерованный) список" - вставляет значок кнопки для каждого элемента списка.
<ol> - сокращение от "ordered list/упорядоченный(нумерованный) список" - нумерует каждый элемент списка.
Для создания элемента списка используйте тэг <li> ("list item/элемент списка"). Непонятно? См. примеры:

Пример 7:



выглядит в браузере:



Пример 8:



выглядит в браузере:



Итак, экспериментируйте и создавайте ваши собственные страницы с семью новыми тэгами, изученными на этом уроке:

Урок 6: Атрибуты

Вы можете назначать атрибуты во многих тэгах.
Что такое атрибут?

Как вы, возможно, помните, тэги это метки, указывающие браузеру, как нужно представлять ваш web-сайт. (Например, <br /> информирует браузер, что нужно сделать перевод строки). В некоторых тэгах вы можете вводить дополнительную информацию. Такая дополнительная информация называется "атрибут".

Пример 1:



Атрибуты всегда записываются внутри тэга, после них следует знак равенства и детали атрибута, заключённые в двойные кавычки. Точка с запятой после атрибута служит для разделения команд разных стилей. Мы к этому ещё вернёмся.

Атрибуты бывают разные. Первый изученный вами атрибут это style/стиль. С помощью этого атрибута вы можете настраивать отображение вашего web-сайта. Например, цвет фона/background colour:

Пример 2:



выведет в браузере страницу красного цвета - проверьте сами. Мы детально объясним, как работает цветовая система.

Обратите внимание, что некоторые тэги и атрибуты используют американскую разновидность английского языка, т. е. color вместо colour. Важно использовать именно такой вариант написания, как мы используем в примерах в этом мини курсе - иначе браузеры не смогут понять ваш код. Также не забывайте ставить двойные кавычки после атрибута.
Как страница стала красной?

В предыдущем примере мы запросили вывод красного фона кодом "#ff0000". Это код красного цвета в т. н. шестнадцатиричном формате (HEX). Каждому цвету соответствует своё 16-ричное число. Вот примеры:

Белый: #ffffff
Чёрный: #000000 (нули)
Красный: #ff0000
Синий: #0000ff
Зелёный: #00ff00
Жёлтый: #ffff00

16-ричный код цвета состоит из # и шести цифр или букв. Существует более 1000 HEX кодов и бывает непросто определить, какой HEX-код какому цвету соответствует. Для удобства мы советуем иметь карту 216 самых распространённых кодов цвета: 216 Web Safe Colour Chart.

Можно использовать также английские названия самых распространённых цветов (white, black, red, blue, green, yellow).

Пример 3:



Но хватит о цвете. Давайте вернёмся к атрибутам.
Какие тэги могут использовать атрибуты?

Различные атрибуты могут применяться для большинства тэгов.

В таких тэгах, как body, вы будете часто использовать атрибуты, а, например, в тэге br - редко, поскольку перенос строки это обычно перенос строки без каких-либо уточняющих параметров.

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

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

В этом мини курсе мы рассмотрим самые важные атрибуты.
Кстати, из каких ещё частей состоит тэг?

Основная часть тэга называется элемент (например, p в <p>). Таким образом, тэг состоит из элемента (например, <p>), либо из элемента плюс один или более атрибутов (например, <p style="background-color:#ff0000;">). Проще некуда.