5 шагов к своему сайту. Шаг первый

1. Введение

Это краткий курс блочной (<DIV>) верстки сайтов. Он даст только начальное представление о создании сайтов, дальнейшее совершенствование навыков и развитие мастерства в Ваших руках.

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

2. Основы HTML

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

Начинаем.

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

<p> - открывающий тег, для обозначения начала конструкции

</p> - закрывающий тег, для обозначения конца конструкции

Это краткий курс блочной (<DIV>) верстки сайтов - непосредственно данные

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

Из приведенного выше примера вы поняли, что теги бывают парные, т.е. <p> - открывает конструкцию, а </p> - закрывает её. Но существуют теги, которые не требуют обозначения закрытия. С ними мы познакомимся позже, по ходу курса.

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

<p align="left">Это краткий курс блочной (<'DIV>) верстки сайтов. Он даст только начальное представление о создании сайтов, дальнейшее совершенствование навыков и развитие мастерства в Ваших руках.</p>

<p align="right">По завершении изучения курса вы сможете самостоятельно сделать простейший работающий сайт. Наша цель - помочь Вам в этом.</p>

Как вы видите использованы два одинаковых элемента (тега), но с различными параметрами: первый абзац выравнен влево, а второй - вправо.

Теория скучна, но необходима для дальнейшего понимания.

Идеальный HTML документ состоит из трех частей

• информация о версии HTML;
• заголовок ("шапка") документа (тег head);
• тело документа (тег body)

Пример:

<!DОСТYPE НТМL PUBLIC "-//W3C//DТD HTML 4.01 Transitional//EN"> - информация о версии НТМL

<НТМL> - открывающий тег (начало)  документа

<НЕАD>- открывающий тег начала заголовка («шапки»)

Здесь находятся данные о документе и вспомогательная информация, которая не относиться к содержимому документа.

</НЕАD> - закрывающий тег начала заголовка («шапки»)

<ВОDY>- открывающий тег тела документа

Здесь находится информация отображаемая браузером

</ВОDY> - закрывающий тег тела документа

</НТМL> - закрывающий тег (конец) документа

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

Основные теги, используемые при работе:

<р></р> - параграф, парный тег;

<h1>…<h6></h1>…</h6> - заголовок материала (статьи и т.д.), парный тег;

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

<li></li> - конструкция текста элементов списка;

<a></a> - самый распространенный тег - гиперссылка.

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

3. Каскадные таблицы стиле (CSS)

Использование таблиц стилей позволяет управлять отображением практически любого содержимого НТМL - документа, избавляет от необходимости настраивать каждый элемент документа. CSS (Cascade Style Sheets)  можно размещать как внутри НТМL- документа (внутренние таблицы), так и в отдельном файле (внешние таблицы), файлы имеют расширение .css. Мы будем рассматривать только внешние таблицы, как наиболее используемые и удобные в применении.

Подключение к документу внешней CSS задается так:

для подключения используется тег <LINК> (одиночный тег) с следующими атрибутами (параметрами):

• href - указывае путь к файлу таблиц;
• rel - всегда для CSS имеет значение stylesheet;
• type - для таблиц задается text/css;
• media - обозначает тип устройства, для которого действует таблица (по умолчанию screen - для экрана)

Подключение таблиц стилей выполняется в заголовке ("шапке") НТМL - документа.

CSS - это множество записей, называемых селекторами. Селектор состоит из двух частей: наименование элемента (это как НТМL - элементы, так и созданные нами) и правила отображения этого элемента. Правила вы отделяются скобками {  }.

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

Стили оформления italic и newroman могут применяться только для отбражения элемента <р>(параграф), а стиль bold для любого элемента документа.

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