Показать сообщение отдельно
Старый 09.05.2008, 04:48   #1
ньюби

 Аватар для kaspian
 
Репутация: 17  
Адрес: По ту сторону иллюзии
Сообщений: 24
По умолчанию Интенсивные курсы вебдизайна

В этом топе я хочу поведать всем начинающим сайтостроителям о прелестях этого нелегкого мастерства, поделиться опытом и ответить на вытекающие вопросы %)

Зелуным отмечаются комментарии %)

Приятного обучения!

Добавлено через 1 минуту

Глава 1. Наш первый HTML-документ

Как устроен HTML-документ

HTML-документ . это просто текстовый файл с расширением *.htm (Unix-системы могут содержать файлы с расширением *.html). Вот самый простой HTML-документ:



<html>


<head>


<title>


Пример 1


</title>


</head>


<body>


<H1>


Привет!


</H1>


<P>


Это простейший пример HTML-документа.


</P>


<P>


Этот *.htm-файл может быть одновременно открыт и в Notepad, и в Netscape. Сохранив изменения в Notepad, просто нажмите кнопку Reload ('перезагрузить') в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе.

</P>


</body>


</html>

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



<html>


<head>


<title>Пример 1</title>


</head>


<body>


<H1>Привет!</H1>


<P>Это простейший пример HTML-документа.</P>


<P>Этот *.htm-файл может быть одновременно открыт и в Notepad, и в Netscape.


Сохранив изменения в Notepad, просто нажмите кнопку Reload ('перезагрузить')


в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе.</P>


</body>


</html>



Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, <html>) называется меткой (по-английски . tag, читается "тэг").

Большинство HTML-меток . парные, то есть на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением "/".

Метки можно вводить как большими, так и маленькими буквами. Например, метки <body>, <BODY> и <Body> будут восприняты браузером одинаково.

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

Обязательные метки
<html> ... </html>
Метка <html> должна открывать HTML-документ. Аналогично, метка </html> должна завершать HTML-документ.

<head> ... </head>

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


<title> ... </title>

Все, что находится между метками <title> и </title>, толкуется браузером как название документа. Netscape Navigator, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.

<body> ... </body>

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

<H1> ... </H1> . <H6> ... </H6>

Метки вида <Hi> (где i . цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня . самый крупный, шестого уровня, естественно . самый мелкий.

<P> ... </P>

Такая пара меток описывает абзац. Все, что заключено между <P> и </P>, воспринимается как один абзац.

Метки <Hi> и <P> могут содержать дополнительный атрибут ALIGN (читается "элайн", от английского "выравнивать"), например: [/color]

<H1 ALIGN=CENTER>Выравнивание заголовка по центру</H1>
или

<P ALIGN=RIGHT>Образец абзаца с выравниванием по правому краю</P>

Подытожим все!


<html>


<head>


<title>Пример 2</title>


</head>


<body>


<H1 ALIGN=CENTER>Привет!</H1>


<H2>Это чуть более сложный пример HTML-документа</H2>


<P>Теперь мы знаем, что абзац можно выравнивать не только влево, </P>


<P ALIGN=CENTER>но и по центру</P> <P ALIGN=RIGHT>или по правому краю.</P>


</body>


</html>

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


Последний раз редактировалось kaspian, 09.05.2008 в 17:33. Причина: Добавлено сообщение
kaspian вне форума   Ответить с цитированием