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

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

Содержание

• Что такое Web-страница
• Как создать web-страницу
• С чего надо начинать деланье web-страницы, основные определения.
• Стили (может, вы не знаете об этом, но это очень удобно)
• Пример простейщей web-страницы
• Объекты в web-странице: таблицы, картинки, списки, ссылки
• Рекомендуемая литература (со ссылками на реальные источники)

Что такое web-страница

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

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

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

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

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

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

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

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

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

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

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

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

Не для каждого тега необходим закрывающий тег. Так, например, такие теги, как перевод строки (без разрыва абзаца) <br>, горизонтальная линия <hr> или вставка картинки <img src="путь, название картинки.расширение">, вполне самодостаточны.

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

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

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

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

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

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

Macromedia Dremwever (www.macromedia.com) - пожалуй, лучшая программа для написания web-страниц, позволяет использовать как визуальный режим (как страница будет выглядеть), так и теговый режим (отображает все управдяющие символы и команды), что позволяет с одной стороны быстро и легко редактировать Вашу страницу, с другой, использование тегового режима даёт вам возможнсть более точно контролировать свойства самой вашей страницы, а так же объектов, размещённых на ней, использовать скрипты и т.п.

Старые версии работают не стабильно. Пятая версия вообще не работает под Windows 98 (просто зависает вместе со всем компьютером). Пользоваться ей можно только под Windows 95 и Windows NT 2000. Версия 6 (MX) идёт под Windows 98 и Windows NT 2000 (возможно, и windows 95). 7-я, так же известная как Dreamweaver 2004.

Рекомендуется использовать более поздние версии, поскольку в ранних могут неправильно отображаться, или вовсе не отображатсья некоторые объекты или текст с определёнными свойствами. Так, например, в пятой и шестой версиях Dreamweaver нижние и верхние символы (они заключаются в теги  и  соответственно), отобржаются так же, как и весь остальной текст. Некоторые редкие символы, которые в броузере видны нормально, так же могут отображаться в виде пустых квадратов или не отображаться вообще. Чтобы не терпеть этих неудобств, желательно приобрести версию поновее.

В программе имеются средства для очистки файлов, созданных вMicrosoft Word от ненужной информации, однако, с вордовскими html-файлами она работает медленно.

Недостатком этой программы является то, что она медленно обрабатывает большие файлы (300 кБ и более), а так же может повиснуть, если пытаться ей открыть файлы, содержащие ошибки (такие файлы могут быть созданы на других программах или написаны на блокноте).

Достоинства:

1) правильное вставление ссылок на рисунки и другие объекты. Если вы вписываете ссылки на те или иные файлы на блокноте, то вам необходимо всё время следить за тем, чтобы регистр букв в точности совпадал с оным в названии файла (то есть если в названии файла присутствуют как большие, так и маленькие буквы, Вы должны повторить всё в точности). В пределах Вашего компьютера при несоблюдении регистра ссылки будут работать нормально, но в Интернет различие в регистре букв критично. Программа Macromedia Dreamweaver вставляет ссылки на файлы сама, достаточно лишь указать расположение файла при помощи диалога "обзор".

2) Возможность осуществлять автозамену. То есть, если вам надо заменить многократно повторяющиеся текстовые фрагменты, или теги, обладающие определёнными свойствами, программа Macromedia Dreamweaver поможет сделать вам это не только в пределах одного файла, но и при необходимости - во всех файлах, хранящихся в указанной папке.

3) Можно не знать и не помнить всех тегов, как правильно записываются те или иные свойства текста, стилей, как называются дополнительные символы, вставляемые как &_название_символа; всё это знает сама программа. Программа имеет менюшки, где человеческим языком описаны свойства текста, вы лишь ставите в нужном окне галочки, вписываете нужные цифры или выбираете из списка подходящие вам параметры, а синтаксис программа прописывает сама. То же касается дополнительных символов - их можно выбрать из менюшек, где они показаны уже такими, какими они будут после вставления. Вы выбираете, а программа сама вписывает название.

Итак, вам просто остаётся следить, чтобы теги и названия символов вставлялись в нужные вам места и располагались нужным вам образом. В теговом режиме в новых версиях Dreamweaver (в седьмой уже точно!) по началу ввода тега или названия символа сразу открывается всплывающее меню, где можно выбрать нужное вам. Например, стоит написать в теговом режиме значок &, как сразу открывается меню со всеми символами, где можно выбрать по внешнему виду. Начинаешь писать < - открывается меню всевозможных тегов. Если ввести первые буквы от тега или символа, список ограничится только тем, что с этих букв начинается - это облегчает поиск. Далее - набрав или выбрав из меню название тега и введя пробел, вы тут же получаете список свойств, допустимых для данного тега, где можете выбрать нужное вам свойство. Конечно, для работы в таком режиме надо знать кое что о синтаксисе, но согласитесь, такой сервис всё равно упрощает работу, экономит время и позволяет избежать грамматических ошибок в наборе команд и свойств. Если же вы вообще ничего не знаете о тегах и их свойствах - у вас есть возможность работать с меню, как у текстового редактора.

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

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

Далее, вы просто пишете на ворде свою страницу, как обычно, а потом сохраняете в виде HTML.

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

И к тому же, главное требование к web-странице - малый объём по килобайтам, страница должна быстро загружаться, чтобы экономить время пользователей, особенно если у них повременная оплата интернета. Microsoft Word создаёт наредкость большие файлы, в которых в лучшем случае 50 % - абсолютно ненужные данные, не содержащие в себе не только смысловой информации, но и никак не влияющие на оформление страницы.

Если вы создаёте сложную страницу, в которой много рисунков, таблиц и переключений раскладки клавиатуры на другой язык, то количество избыточной информации может достигать 90% и более. Word можно использовать на начальной стадии написания текста, посколько в нём удобно осуществлять набор и проверять орфографию. Но не сохраняйте вордом ваш файл сразу в формат HTML. На ворде можно быстро расставить управляющие теги (при помощи автозамены), а затем сохранить файл в виде .txt, которому потом сменить расширение на .htm (.html).

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

Этот раздел идёт первым не потому, что он самый простой для понимания, а потому, что все удобные и хорошо сделанные web-страницы начинаются именно с этого.

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

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

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

Итак, всякая уважающая себя web-страница начинается с тега <html>. Закрывать этот тег надо в самом-самом конце документа, когда всё уже написано.

2. Второй по порядку тег HEAD

А далее открывается тег head. (Этот тег вложен между двумя открывающимся и закрывающимся тегами HTML) Между открывающим и закрывающим тегами 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 Если вы не знаете, какая кодировка используется в вашем компьютере, то попробуйте подобрать. Создайте страницу и попробуйте повыбирать кодировку в браузере. Если кодировка соответствует той, которую вы используете, текст на странице будет отображаться правильно. Пользователи русской версии Windows могут смело ставить charset=windows-1251.

NB Будьте внимательны, если пишете страницу на Macromedia Dreamweaver! По умолчанию там может стоять какая-то дикая кодировка. Вы можете набирать текст в дизайнерском режиме (показывает, как будет выглядеть страница) и видеть русские буквы. Но если переключитесь в теговый режим, то увидите набор символов, закодированных описанным выше способом (&_название_или_номер_символа;) . Это значит, что у вас в вашей HTML-странице стоит не та кодировка, которая используется вашей операционной системой, не русская кодировка. Это плохо. Во-первых, при таком кодировании текста файл занимает больше килобайт, во-вторых, вам самим будет трудно ориентироваться в теговом режиме. Поэтому надо выбрать русскую кодировку в настройках свойств страницы через меню, или, если Вы не знаете, где это находится, открыть теговый режим и вручную исправить кодировку на нужную Вам.

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

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

Открывающийся и закрывающиеся теги TITLE помещаются между открывающимся и закрывающимся тегами HEAD.

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

Стили

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

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

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

<style>

Здесь задаются стили.

</style>

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

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

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

Другое

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

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

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

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

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

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

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

Примечание:

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

Стили

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

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

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

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

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

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

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

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

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

Перевод строки может осуществляться либо с началом нового абзаца (закрытие тега старого абзаца </p> и открытие тега нового абзаца <p>), либо без разрыва абзаца, по тегу <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> - подчёркивание

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

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

<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 выделять определения и цитаты. Использовать эти стили можно для выделения вообще любых слов на ваше усмотрение.

Можно даже переопределить стили <i>, <b> и <u>, сделать их ненаклонным, не жирным и неподчёркнутым. Но только обычно это не надо.

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

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

У каждого стиля есть определённые свойства и неопределённые. Определённые свойства будут такими, как определены для стиля, а неопределённые берутся от стиля тех тегов, в которые вложена наша данная часть текста.

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

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

1. Определение стилей в странице: В теле раздела head (см. выше) открывается тег <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 - выравнивание текста (абзац выравнивается по ширине, а заголовок - по центру). На самом деле параметров у каждого стиля может быть гораздо больше. Те параметры, которые мы не указали, будут присвоены значения, заданные по умолчанию. Для стилей, которые мы не определили, также будут использованы значения по умолчанию.

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

Подробнее о том, как задавать свойства стелей можно почитать в книге Каскадные таблицы стилей CSS. Учебник www.bousoft.com/books/css.zip (40 кб) (Формат CHM - файл справки Windows).

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

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

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

Так мы создали до безобразия простую страницу, в которой использованы все значения по умолчанию. Как она выглядет: смотрите Здеся. (Кстати, можно посмотреть и HTML-когд, если кликнуть по странице (но не по ссылкам) правой кнопкой мыши, а потом в меню выбрать View Source (у кого русскоязычная версия, этот пункт называется "в виде HTML" или "просмотр кода HTML". Или ещё как-нибудь. В общем, если что-то про 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> -нумерованный список

Между тегами списка <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">, тогда рамка точно будет . Вообще, таблица имеет много параметров, некоторые из которых достаточно важны. Подробнее о параметрах тегов можно почитать в книге Html в примерах www.bousoft.com/books/tags.zip (126 кб) .

Картинки

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

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

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

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

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

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

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

Ссылки

Довольно важный элемент каждой веб-страницы. Без них Интернет не был бы Интернетом. Ссылка привязывается к какому-либо элементу страницы, к тексту или картинке, при клике на который происходит перемещение в указанное место. Всё, что касается ссылок, задаётся тегами <a>.

Непосредственно ссылка начинается тегом <a> с параметром href="место назначения", и выглядит это так:

<a href="место назначения">текст или объект ссылки</a>.

Местом назначения может быть файл. Необходимо указать путь для файла и его название (всё с учётом регистра), не забыть про расширение. Файл может быть любым, как другой HTML, так и какой-нибудь архив, типа zip, rar и любой другой, исполняемый файл exe, картинка и вообще всё, что только бывает. Если файл понимается броузером (например, файл html или картинка jpg, gif, bmp, png), броузер откроет его. Если это какой-либо другой файл, вам будет задан вопрос, что с ним сделать, сохранить на диске или открыть из текущего места. Будьте осторожны, ссылки на exe-файлы, сделанные нехорошими людьми могут быть не безопасны, они могут содержать вирусы или прописывать порнуху на ваш компьютер. Если вы уверены в сайте, на котором нашли этот exe-файл (к примеру, если это сайт известной фирмы, типа Microsoft), можете запускать. Но всё же лучше файл сначала сохранить на компьютер, а запускать уже потом, так будет удобнее и Вам, и файлу, и вашему компьютеру. Так же может быть предложено открыть архив, если у вас установлен соответствующий архиватор.

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

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

Местом назначения может быть не только файл, но и интернет-адрес какого-либо сайта (например, www.mail.ru).

У ссылки может быть параметр title, в котором содержится всплывающая подсказка к ссылке:

<a href="место назначения" title="всплывающая подсказка">текст или объект ссылки</a>.

Якоря

Якорь нужен для того, чтобы указать на вашей странице какое-либо конкретное место, куда будет ссылаться ссылка. Например, в начале страницы вы сделали оглавление, и хотите, чтобы по нажатии на пункты оглавления вы быстро перемещались в соответствующие разделы. Для этого в ключевых местах ставится якорь. Якорь так же ставится тегом <a>, только вместо href пишется name, а в ковычках указывается имя якоря.

<a name="имя якоря"></a>

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

Ссылаться на якорь надо так:

<a href="#имя якоря">текст или объект ссылки</a>

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

<a href="путь и имя файла.расширение#имя якоря">текст или объект ссылки</a>

Внимание: когда вы сохраняете веб-страницу при помощи интернет-эксплорера (в верхнем меню File/save as...), все ссылки меняются на абсолютные ссылки в Интернет. И если на странице были ссылки на якоря, находящиеся в ней самой, они переадресуются на исходную страницу, находящуюся в интернете. При этом НЕ сохраняются файлы, на которые ссылались ссылки. Сохраняются только картинки и файлы со стилями, а всё остальное остаётся в Интернете. Если вы хотите сохранить структуру ссылок при скачивании чужих страниц, лучше пользуйтесь программой Teleport PRO.

Рекомендуемая литература

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

• html.manual.ru

Хорошо и увлекательно написано, а главное, помимо того, как это делается, поясняется - зачем.

• скачать копию сайта для прочтения с html.manual.ru/html.manual.ru.zip
• Учебник по web-дизайну. Здесь даётся подробное и детальное описание того, как создавать web-страницы и какие элементы можно в них вставлять. Хорошая книга как для самостоятельного освоения, так и как справочник.
• Автор: Vladimir Drigalkin. Web-сайт: http://lenininc.narod.ru/
• Скачать книгу, 266 кБ
• Формат - система HTML-страниц, читать можно в любой операционной системе, поддерживающей HTML (зип-архив).
• Html в примерах.

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

• Автор: А.Климов. Web-сайт: http://winchanger.narod.ru.
• Скачать книгу с www.bousoft.com/books/tags.zip (126 кб)
• Формат - CHM - файл справки Windows, похоже, читать можно тоже только в Windows. В линкус 9x не открывается, например...
• Каскадные таблицы стилей CSS. Учебник

Вот как раз справочник, как задавать стили. Очень полезный справочник.

• Автор: н/д.
• Скачать с www.bousoft.com/books/css.zip (40 кб)
• Формат - CHM - файл справки Windows, похоже, читать можно тоже только в Windows. В линкус 9x не открывается, например...
• Первые шаги - учебник по HTML

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

  • Автор: Алленова Наталья Web-сайт: http://www.postroika.ru.
  • Формат - CHM - файл справки Windows, похоже, читать можно тоже только в Windows. В линкус 9x не открывается, например.