Введение в НTML

Для тех, кто вообще себе не представляет, как устроены web-страницы и как их сделать, предназначен этот раздел.

0. Как создать web-страницу

1. С чего надо начинать деланье web-страницы, основные определения.

2. Стили (может, вы не знаете об этом, но это очень удобно)

3. Пример простейщей web-страницы (подставьте сюда свой текст на специально отведённые места, и у вас всё заработает)

4. Объекты в web-странице: таблицы, картинки, списки, ссылки

0. Как создать web-страницу

Если у вас нет никаких специальных программ для создания web-страниц, то:

web-страницу можно написать на простом текстовом редакторе типа блокнот для виндовз (notepad) или другом простеньком текстовом редакторе. Для того, чтобы ваш файл воспринимался как web-страница, его расширение следует переименовать в .htm или .html.

Свойства текста на web-стренице и свойства самой страницы задаются при помощи тегов.

Что такое тег? Тег - это код, который указывает какие-либо параметры текста, web-страницы и других объектов. Так же тег может определять объекты, находящиеся на web-странице, такие как рисунки, таблицы и другие. В языке HTML тег заключается в угловые скобки (<ТЕГ>). Теги бывают открывающие (<ТЕГ>) и закрывающие (</ТЕГ>). Вместо слова ТЕГ в данном случае подставляется какой-либо параметр или свойство, которое применяется ко всему, что находится между открывающим и закрывающим тегами.

Название тега можно писать как большими, так и маленькими буквами.

Не для каждого тега необходим закрывающий тег. Так, например, такие теги, как перевод каретки <br>, или вставка картинки, вполне самодостаточны.

Итак, при помощи тегов мы задаём свойства текста, определяем объекты и задаём свойства объектов. Текст, располагающийся на странице можно писать непосредственно текстом, который расположен между соответствующими тегами. В текст также можно включать картинки, таблицы, а так же символы, не содержащиеся в шрифте, который поддерживает ваша операционная система. Символы задаются не при помощи тегов, а при помощи специальных кодов, имеющих вид: &_название_или_номер_символа;.

Знаки &, <, >, " воспринимаются броузером как управлающие символы, поэтому, если вам необходимо отобразить их на своей web-странице, то в том месте, где они должны находиться следует писать: &amp;, &lt;, &gt;, &quot; соответственно.

NB При написании символа имеет значение, какие вы используете буквы, строчные или заглавные. Так, например, код &Theta; рисует заглавную букву "тетта" (Θ), а код &theta;- маленькую (θ).

Другой способ: воспользоваться специальными программами для написания web-страниц.

Для этой цели существуют специальные программы:

font-page (поставляется вместе с пятым Internet Explorer) - в общем-то программа для полных дубов. Многие возможности языка HTML остаются не реализованными, многие вещи от пользователя скрыты, да и вообще, она не очень-то удобна.

Macromedia Dremwever - в общем-то неплохая программа для написания web-страниц, позволяет использовать как визуальный режим (как страница будет выглядеть), так и теговый режим (отображает все управдяющие символы и команды), что позволяет с одной стороны быстро и легко редактировать Вашу страницу, с другой, использование тегового режима даёт вам возможнсть более точно контролировать свойства самой вашей страницы, а так же объектов, размещённых на ней, использовать скрипты и т.п. Недостатком этой порограммы является то, что она подглючивает. Пятая версия вообще не работает под Windows 98 (просто зависает вместе со всем компьютером). Пользоваться ей можно только под Windows 95 и Windows NT 2000. Версия 6 (MX) идёт под Windows 98 и Windows NT 2000, насчёт Windows 95 не знаю.

И самый простой (но не смаый оптимальный) способ - Microsoft Word

Если первые два способа оказались (или показались) для вас слишком сложными, то можно воспользоваться простым Microsoft Word версии 97 или выше. Для того, чтобы Вы могли создать на нём web-страницу, у вас должен быть установлен конвертор HTML (для тех, кто не знает: при установке Microsoft Office надо выбрать установку по выбору и проследить, чтобы в разделе "Конверторы и фильтры" стоял этот конвертор).

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

1. С чего надо начинать

NB Кому уже нетерпится написать страницу, сразу рекомендуется перейти к разделу 3, где будет приведён простенький примерчик, а так же посмотреть начало раздела 2, в котором речь пойдёт о стилях (для того, чтобы узнать, что стили - это очень удобно). Этот раздел идёт первым не потому, что он самый простой для понимания, а потому, что все удобные и хорошо сделанные web-страницы начинаются именно с этого.

1. Первый тег в странице <HTML>

Вообще-то, по-хорошему, все уважающие себя web-страницы начинаются с тега: <html> или, можно большими буквами: <HTML>.

Зачем это надо? В общем, для порядку положено, возможно, бывают такие случаи в жизни web-страниц, когда это просто необходимо. Во-первых, бывают интернет-броузеры (программы, которые просматривают web-страницы), которые просто отказываются понимать страницу, не начинающуюся с этого тега. Хотя, надо сказать, internet Explorer 5 и выше понимает и без этого.

Итак, всякая уважающая себя web-страница начинается с тега <html>

2. Второй по порядку, но не по важности тег <HEAD>

А далее открывается тег <head>. Между открывающим и закрывающим тегами head располагается информация, которая определяет свойства данной страницы, а именно:

Кодировка (набор символов, которые используются в вашей странице)

Первая строчка, которая помещается в теле раздела HEAD имеет следующий вид:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

Здесь указывается тип страницы (http-equiv="Content-Type" content="text/html) и кодировка шрифта (charset). Значение charset=windows-1251 означает, что у вас использована стандартная русскоязычная кодирока windows. Если вы не укажете в своей странице кодировку, то у всех посетителей вашей страницы, у которых по тем или иным причинам броузер настроен на другую кодировку, текст будет отображаться как абра-кадабра. В общем, конечно, посетители Вашей страницы, скорей всего, имеют возможность перенастроить свой броузер на вашу кодировку, но согласитесь, это очень неприятно, когда путешествуя по интернету, постоянно приходится переключать кодировку. Поэтому, чтобы облегчить посетителям жизнь и сделать посещение вашей страницы более приятным, очень рекомендуется в начале файла разделе HEAD указать кодировку, в которой написан текст Вашей страницы.

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

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

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

Название страницы <TITLE>

Между открывающимся (<title>) и закрывающимся (</title>) тегами помещается название страницы, которое будет отображаться в полосе CAPTION BAR вашего броузера (самая верхняя строчка окна броузера). Если вы ходите по интернету, обратите внимание, что вторая часть надписи меняется в зависимости от страницы, на которой вы находитесь.

Стили

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

Стили заюаются между тегами <style> и </style> (об этом подробнее речь пойдёт в разделе 2), либо стили можно задать в отдельном файле с расшерением .css (тогда одни и те же стили можно будет использовать для разных страниц).

Итак, для задания стиля нужно написать либо:

<style>

Здесь задаются стили (подробнее см. раздел 2).

</style>

Либо подключить файл, в котором заданы стили:

<LINK href="название_файла_со_стилями.css" rel=STYLESHEET type=text/css>

Задавать свойства стилей не обязательно, поскольку у всех стандартных (предусмотренных броузером) стилей есть свойства, заданные по умолчанию, которые используются в случае, если стили не заданы. Если вы не хотите задавать стили, просто опустите эти строки.

Другое

Кроме того, в разделе HEAD можно разместить JAvA-скрипты (минипрограммки, используемые на web-странице), а так же некоторую другую информацию.

После того, как вы разместили всю необходимую инйормацию, указывающую свойства страницы, необходимо поставить закрывающий тег </head>.

который означает, что указания относительно свойств страницы кончились.

3. Тело страницы

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

4. В конце страницы

В самом конце страницы следует закрыть раздел BODY тегом </body> а далее завершить саму страницу тегом </html>.

Примечание:

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

2. Стили

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

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

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

1) Несколько пробелов подряд воспринимаются броузером как один пробел;

2) Перевод строки игнорируется

Эти проблемы решаются при помощи управлающих тегов и управлающих символов.

Дополнительные пробелы:

Если вам необходимо поставить несколько пробелов подряд, придётся использоватьсимвол: &nbsp; - неразрывный пробел.

Перевод строки

Перевод строки может осуществляться либо с началом нового абзаца (закрытие тега старого абзаца и открытие тега нового абзаца), либо по тегу<br>.

Язык HTML предусматривает несколько стилей:

Стили абзаца

Абзац начинается с новой строки (которая может начинаться с отступа или выступа). Внутри абзаца перевод строки осуществляется только по тегу <br>, причём новая строка начинается с того же уровня, с которого начинаются все строки, кроме первой. Между символами абзаца не надо ставить тег перевода строги. В абзаце, кроме текста и символов могут располагаться таблицы и картинки, а также всё, что вы разместите между открывающимся и закрывающимися тегами абзаца. В абзац можно засунуть другой абзац, список. В некоторых случаях, абзацы, помещённые в абзац, могут смотреться как абзацы сами по себе, в других случаях, например, если задан,отступ от текста до края страницы, для вложенного абазаца он увеличится.

<p></p> - обычный абзац.

Обычно люди не пользуются закрывающим тегом обычного абзаца, поскольку в большинстве случаев броузер понимает каждое открывающее <p> как начало нового абзаца, однако, вообще-то, тогда получается, что у вас получается, что в

<h1></h1> ... <h6></h6> - стили заголовков (от англ. heading - заглавие, заголовок). Заголовки устроены также, как обычный абзац (начинаются с новой строки). Крупность заголовков убывает от h1 к h6.

<dir></dir> - абзац с отступом от левого края страницы.

<pre></pre> - сформированный заранее текст. В тексте, помещённом между этими тегами учитываются все энтеры, несколько пробелов подряд, символы табуляции. Этот стиль хорош для написания стихов и образцов текстов программ.

Стили символа

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

Стили шрифта:

Эти стили знают все пользователи Word и начинающие составители web-страниц, поскольку эти стили являются фундаментальными, на основе их формируются все остальные стили.

<i></i> -наклонный шрифт

<b></b> - жирный шрифт

<u></u> - подчёркивание

Переопределяемые стили

<var></var> - переменная

<em></em> - выделение (от англ. emphasis - подчёркивание (в смысле обращения внимания)).

<strong></strong> - более основательный шрифт

<cite></cite> - цитата

<dfn></dfn> - определение

Все эти стили можно переопределить совершенно произвольным образом. Так, стили var, cite, em и dfn по умолчанию все наклонные, Вы, задав им соответствующие свойства, можете сделать их прямыми. Кроме того, поигравшись с настройками, можно сделать стиль strong (что само по себе означает толстый, основательный) тощим и тщедушным.

Примечание к стилям:

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

К примеру, стили заголовков вовсе не обязательно использовать для заглавия, можно использовать их как абзацы с определёнными настройками. Так же можно переопределить стиль dir так, что он не будет иметь отступа от края. То же касается и стилей символа: вовсе не обязательно использовать стиль var для выделения переменных, точно так же, как стилями dfn и cite выделять определения и цитаты. Использовать эти стили можно для выделения вообще любых слов на ваше усмотрение.

NB Фундаментальные стили <i>, <b> и <u> не могут быть переопределены!

Определение свойств стилей

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

Итак, как определить стили? Существует два способа.

1. Определение стилей в странице: В теле раздела head (см. выше, раздел 1) открывается тег <style>, далее идет определение стилей, потом тег закрывается: </style>

2. Стили определяются отдельным файлом с расширением .css, а в теле раздела head пишется:

<LINK href="нзвание_файла_со_стилями.css" rel=STYLESHEET type=text/css>

NB Если файл находится не в той же папке, что и ваша страница, то необходимо указать его относительный путь следующим образом: если файл лежит в папке (каталоге, директории), находящейся в той же папке, что и ваша страница, то необходимо указать название всех вложенных друг в друга папок, в которых находится сайт, через слешы / (точно будет работать) или даже \. После последнего слеша идёт название файла. Если файл находится не в той папке, где расположена ваша страница, то надо выйти на столько уровней вверх, насколько это необходимо, при помощи сочетания символов: ../ (две точки и слеш), а потом указать путь к файлу от того места, куда вы вышли.

Итак, свойства стилей определяются либо между тегами <style></style>, либо в отдельном файле (там ничего в начале и конце файла писать не надо, сразу непосредственно приступить к определению стилей).

Определение стиля имеет следующий вид: сначала пишется название стиля (без скобок <>), потом в скобках {} перечисляются свойства, которые вы хотите изменить через точку с запятой.

Свойство записывается следующим образом: название свойства, далее через двоеточие задаётся значение.

Пример:

p {font-size:medium; text-indent:30pt; text-align:justify}

h1 {font-size:large; text-indent:0pt;  text-align:center}

Так мы определяем свойства для двух стилей: для обычного абзаца и для заголовка. В данном примере для каждого из стилей определяется по три свойства: font-size - размер шрифта, text-indent - величина отступа красной строки и text-align - выравнивание текста (абзац выравнивается по ширине, а заголовок - по центру). На самом деле параметров у каждого стиля может быть гораздо больше. Тем параметры, которые мы не указали, будут присвоены значения, заданные по умолчанию. Для стилей, которые мы не определили, также будут использованы значения по умолчанию.

Подробнее, как задавать стили, можно посмотреть ЗДЕСЬ.

3. Пример простейшей web-страницы

a) Пример страницы с заданием только самого необходимого:

<html>
<body>
<h1>Пример страницы</h1>
<p>Это самая простая страница, которую только можно создать!</p>
<h1>Правила пользования</h1>
<p>Вам придётся настраивать кодировку в своём броузере.</p>
</body>
</html>

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

Если при открытии этой страницы у вас вместо букв будет абра-кадабра, попробуйте в меню броузера "вид" в пункте "вид кодировки" выбрать другую кодировку. Пользователем Windows, которые писали страницу в блокноте, следует выбрать "кирилица (Windows)".

Теперь создадим страницу посложней.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример страницы</title>
<style>
p{font-size:small; font-family:courier; color:#000033; text-align:justify; text-indent:30pt}
h1{font-size:xx-large; font-family:courier new; color:#0000aa}
body{margin-left:10%;margin-right:10%}
</style>
</head>
<body>
<h1>Пример страницы со встроенными стилями</h1>
<p>Это страница с основными аттрибутами. Обратите внимание на самую верхнюю строку 
вашего броузера. Там в конце строки должно быть написано &laquo;Пример страницы&raquo;</p>
<h1>Правила пользования</h1>
<p>Кодирвка настраивается автоматически.</p>
</body>
</html>

Как будет выглядеть эта страница, можно посмотреть ТУТА ВОТ. В этой странице мы определили стили (задали цвет, шрифт, размер и т.п. Если вы хотите ещё поиграться со стилями, то подробнее о параметрах стилей см. здесь (параметры стилей))

4. Объекты в web-странице

Списки

<li></li> - пункт списка. Перед пунктом списка ставится кружочек

<ul></ul> - маркерованный список

<ol></ol> -нумерованный список

Между тегами списка помещаются пункты списка, заключённые между тегами <li></li>.

Таблицы

Таблица начинается тегом <table>

Далее можно указать тег <table body>, а можно и не указывать.

Таблица состоит из строк, каждая из которых разбита на равное число столбцов. Строки открываются тегом <tr>.

В строках располагаются столбцы, открываемые тегом <td>.

Пример простой таблицы:

<table>
<tr>
<td>&nbsp;</td>
<td>Заполнено</td>
</tr>
<tr>
<td>Занято</td>
<td>Использовано</td>
</tr>
</table>

Если вы открывали тег <table body>, то перед закрывающим тегом </table> надо поместить </table body>.

И выглядеть таблица будет так:

Примечание: здесь приведён пример таблицы без использования каких-либо параметров. Возможно, если вы его скопируете, не увидите рамки, тогда вместо <table> напишите <table border="1">. Вообще, таблица имеет много параметров, некоторые из которых достаточно важны. Об этом подробнее можно будет узнать ЗДЕСЬ (когда сделают).

Картинки

Картинки вставляются при помощи одиночного тега

<img src="название файла.расширение">.

Интернет эксплорер 3 понимает только gif и jpg, а пятая версия и выше понимают gif, jpg, png, bmp.

Картинки можно помещать в абзацы (прямо в текст), сами по себе, в ячейки таблицы.

Если вы укажете

<img src="название файла.расширение" align="выравнивание">.

То если вы вместо "выравнивание" подставите "left" или "right", то у вас будет обтекание текстом (с размещением картинки слева или справа). Если вы используете "center", то картинка расположется по центру страницы без обтекания.