Урок 1.
Что такое HTML? HTML (HyperText Markup Language) - язык гипертекстовой разметки. Используется для создания web-страниц, которые являются HTML-документами. С помощью HTML мы делаем разметку документа, например, где должен находиться тот или иной файл, как будет звучать тот или иной фрагмент текста в речевых браузерах, какого цвета будет заголовок абзаца и т.д. Хочется особо отметить тот факт, что помимо графических браузеров, существуют ещё браузеры речевые и текстовые (не отображают графику), что и советую не забывать при создании web-страниц. Процент пользователей с такими браузерами невелик, но ни один профессионал не позволит себе проигнорировать эту, пусть и небольшую интернет-аудиторию.
Как же выглядит этот язык? (самый лёгкий язык в мире). HTML состоит из специальных символов, так называемых тэгов, с помощью которых мы управляем содержимым документа.
Например: мы хотим выделить текст курсивом.
мы хотим <EM> выделить текст курсивом </EM>
Так будет выглядеть строка в виде HTML, где <EM> - это тэг, который даёт браузеру команду выделить текст курсивом, а </EM>- это закрывающий тэг. Вместе они образуют пару тэгов, которая называется "элемент" или "тэг-контейнер". Большинство тэгов в HTML парные, однако, есть и одиночные.
Например: тэг принудительного перевода строки <BR>.
Обратите внимание на то, как выглядит сам тэг. Все тэги в HTML выделены ограничивающими символами "<" и ">", что позволяет легко узнавать их в процессе редактирования готового документа. А закрывающий тэг начинается со знака "/"
В процессе создания документа часто возникает необходимость делать заметки - комментарии, для того, что бы впоследствии свободнее ориентироваться в HTML-пространстве. Для этого, комментарии в своём документе вы заключаете в знаки
"<!--" и "-->".
Например:<!--saved from url=(0063)http://www.t1.com/us.html -->
У тэгов могут быть параметры. У одних их очень много, а у других нет вообще. Параметры в свою очередь могут иметь значения. Если значение не задано, параметр примет значение по умолчанию. Короче, если вы не задаёте значение, браузер задаст его сам.
Например: <BODY bgcolor="#335533">, где BODY-тэг, bgColor -параметр, #335533 -значение.
HTML-документ, отвечающий спецификации HTML4.0 начинается со строки:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> Эта строка говорит браузеру о том, что документ соответствует международной спецификации версии 4.0. Затем мы должны открыть документ с помощью элемента <HTML>. Запомним, что любой HTML-документ всегда открывается с помощью тэга <HTML> и закрывается с помощью тэга </HTML>. Между ними расположен сам документ, состоящий из двух разделов: HEAD и BODY ( заголовка и тела ).
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>пример простого HTML-документа</TITLE>
</HEAD>
<BODY>на экране появиться только эта фраза</BODY>
</HTML>
Согласитесь, что комментарии здесь излишне.
Не могу не сказать пару слов о таблицах стилей CSS (cascading style sheets), представляющих собой инструменты присоединения стилей к HTML- документам. С их помощью мы можем управлять шрифтом и цветом текста, распределением материала, и т.д. То есть мы задаём для всего документа определённые правила отображения на экране монитора тех или иных элементов данного HTML- документа. Допустим, нам нужно все заголовки первого уровня отобразить белым цветом, а заголовки третьего уровня - красным. Всё это реализуют CSS, к тому же очень просто!
Пример синтаксиса: <STYLE type="text/css">
H1 { color: white }
H3 { color: red }
</STYLE>
Введение таблиц стилей в процесс создания HTML-документов со временем приведёт к исчезновению многих элементов и параметров, применяемых сейчас в веб-страницах и описываемых мною в этой книге. Однако у нас с вами есть чёткая цель: научиться создавать сайты средствами HTML. Согласны? Тогда переходим к уроку 2.
Урок 2.
Раздел документа HEAD. HEAD - раздел документа, определяющий его заголовок. Определяется элементом , внутри которого располагаются следующие тэги и элементы:
Советую всегда использовать этот элемент при создании HTML-документов. Не ленитесь составлять качественное и понятное название своему творению. Постарайтесь отобразить в нём суть страницы, не обращая внимание на длину строки, и ваши старания окупятся в тот момент, когда роботы-поисковики заглянут к вам в гости.
META. Так как роботы поисковых машин существа очень примитивные, вам придётся это учитывать при разработке своего сайта. Для этой цели и существует тэг , у которого есть три параметра:
HTTP-EQUIVE
name
content
HTTP-EQUIVE используется для передачи дополнительной информации, в частности, при указании кодировки.
Пример:
name задаёт определение тэга. Имеет множество значений, из которых самыми популярными являются description и keywords.
content задаёт значение, определяющее содержание тэга .
Примеры:
Советую при составлении ключевых слов максимально продумать стратегию сайта. Нужен ли вам огромный траффик, или лучше привлекать на сайт действительно ценных посетителей? Решать только вам.
BASE задаёт базовый адрес документа (URL), с помощью которого работают относительные ссылки в документе. Что такое относительная ссылка? Это ссылка, в которой указывается не полный URL-адрес документа, а лишь имя файла. Тэг имеет один обязательный параметр href, который и задаёт URL-адрес.
Пример:
LINK. Этот тэг определяет взаимоотношения документов внутри сайта. Представляет интерес исключительно для роботов поисковых систем. Имеет ряд параметров и массу значений к ним. Параметры:
href - задаёт url-адрес другого документа
rel - определяет тип взаимоотношений с другими документами
type - задаёт тип таблицы стилей
Сомневаюсь, что вы будете использовать данный тэг в своих документах. Тем не менее, в следующих уроках мне придётся описать ещё ряд на мой взгляд ненужных тэгов, так сказать в общеобразовательных целях. Пардон!
STYLE - элемент, с помощью которого в документ вставляется таблица стилей CSS. Имеет параметр type, который задаёт тип вставляемой таблицы.
Пример:
SCRIPTE - элемент, который используется для внедрения JavaScript-сценариев в HTML-документ.
Пример:
Описание сценариев JavaScript не входит в формат этого учебник
Урок 3
Раздел документа BODY. Сейчас мы приступаем к самому интересному - изучению тела HTML-документа и его содержимого. Тело определяется элементом , внутри которого располагаются HTML-элементы и тэги, задающие свойства содержимого документа и отвечающие за то, что мы видим на экране монитора. Тэг имеет ряд полезных параметров:
bgcolor - задаёт цвет фона документа
background - задаёт url-адрес файла, который будет использоваться в качестве фона.
link - задаёт цвет не просмотренной ссылки
alink - задаёт цвет активной ссылки
vlink - задаёт цвет просмотренной ссылки
Пару слов о цвете в HTML. Если вы уже работали с каким-нибудь графическим приложением, вам должна быть знакома цветовая система RGB ( Red, Green, Blue ), т.е. ( Красный, Зелёный, Синий ). Каждый цвет в системе RGB имеет своё собственное шестнадцатеричное значение в виде цифр и латинских букв, а также название на английском языке.
Пример: синий: #0000FF или blue, зелёный: #008000 или green
При определении цвета в HTML-документе можно использовать как название, так и шестнадцатеричное значение.
Пример простого HTML-документа на основе пройденного материала:
Текст вашего документа
Гипертекстовые ссылки.
Основным инструментом в сети интернет являются гиперссылки. Щёлкнув по ссылке, мы даём браузеру команду загрузить на наш компьютер нужный документ. Внешний вид ссылки зависит от вашей фантазии и дизайнерского замысла. Это может быть как текст, так и изображение, и даже части изображения. В HTML-документе ссылки задаются с помощью элемента , который имеет параметры href и name.
Параметр href задаёт url-адрес документа на который указывает ссылка.
Пример: главная,
где слово "главная" является ссылкой на сайт: www.real.ru
Параметр name задаёт имя для части документа, на которую делается ссылка (внутренняя ссылка). В этом случае мы создаём что-то вроде метки:
А это ссылка на "помеченную" часть:
Для облегчения просмотра больших документов, достаточно раскидать по нему несколько меток, не забыв создать соответствующие ссылки, и разместить их в начале страницы.
Форматирование текста.
Рассмотрим элементы и тэги, участвующие в процессе форматирования текста HTML-документа. Они делятся на тэги логического и физического форматирования. Тэги логического форматирования определяют "характер" текстового фрагмента, который разные браузеры отобразят по разному (по умолчанию). К примеру, речевой браузер изменит интонацию части текста, которая заключена в пару тэгов логического форматирования. Тэги физического форматирования задают вид отображения выделенных участков текста в окне браузера.
Тэги логического форматирования
- используется для выделения текста в качестве программного кода. Текст внутри элемента браузерами обычно отображается моноширинным шрифтом.
Пример: $a1ref-> [o] = "q"
- используется для выделения текста в качестве цитаты. Текст внутри элемента браузерами обычно отображается курсивом.
Пример: Чем больше женщину мы любим, тем меньше нравимся мы ей.Помните, кто сказал?
- используется для смыслового выделения фрагмента, имеющего некоторую важность. Текст внутри элемента браузерами обычно отображается курсивом.
Пример: этоважный фрагменттекста
- используется для выделения фрагмента текста в качестве вводимого с клавиатуры. Текст внутри элемента браузерами обычно отображается моноширинным шрифтом.
Пример: Для того, что бы воспользоваться базой данных следует набратьexit
- используется для выделения очень важных участков текста. Текст внутри элемента браузерами обычно отображается полужирным шрифтом.
Пример: этону очень важный фрагменттекста
Тэги физического форматирования
- задаёт отображение текста курсивом.
Пример: выделениекурсивом
- задаёт отображение текста полужирным шрифтом.
Пример: выделениеполужирным шрифтом
- задаёт подчёркивание фрагмента текста .
Пример: текстподчёркнут
и задают перечёркнутый текст.
Пример: перечёркнутыйтекст
- задаёт текст моноширинным шрифтом.
Пример: это простомоноширинным шрифт
- отображает текст со сдвигом вверх, иногда шрифтом меньшего размера: верхний индекс.
Пример: WERstidioTM
- отображает текст со сдвигом вниз, иногда шрифтом меньшего размера: нижний индекс.
Пример: Blog
- задаёт фрагмент текста шрифтом большего размера.
Пример: текстбольшего размера
- задаёт фрагмент текста шрифтом меньшего размера.
Пример: текстменьшего размера
- задаёт основной цвет, размер и тип шрифта HTML-документа. Если в какой-нибудь части документа требуется изменить вид текста, используйте тэг . Тэг имеет три параметра: size, face, color.
Пример:
- задаёт параметры шрифта для фрагмента текста, расположенного между начальным и конечным тэгами данного элемента. Имеет параметры: size, face, color. Параметром face следует задавать несколько схожих типов шрифта, т.к. на компьютере пользователя может не быть именно того шрифта, который вы указали. В этом случае текст будет отображён шрифтом по умолчанию, что может не отвечать вашим дизайнерским замыслам.
Урок 4
Форматирование HTML-документа. В этом уроке: абзацы, заголовки, разделительные линии, принудительный перевод строки и всё, что имеет отношение к структурной разметке HTML-документа.
P - элемент, с помощью которого текст в HTML-документе разбивается на абзацы. Имеет один параметр - align, возможные значения которого:
left - выравнивает абзац по левому краю
center - текст выравнивается по центру
right - выравнивает абзац по правому краю
justify - выравнивает текст абзаца по ширине
Абзац, заданный с помощью элемента
, отделяется от остального текста пустой строкой.
Пример:
Текст вашего абзаца
В данном примере текст абзаца будет выровнен по левой стороне.
BR - тэг принудительного перевода строки. Может иметь параметр clear, прекращающий обтекание изображения текстом. Возможные значения параметра clear : all, left и right.
Пример:
первая строка
вторая строка
третья строка
Результат:
первая строка
вторая строка
третья строка
HR. Этот тэг вставляет в текст HTML-документа горизонтальную распределительную линию. Имеет параметры:
width - задаёт ширину линии в пикселях или в процентах от ширины окна браузера.
size - задаёт толщину линии в пикселях
align - задаёт горизонтальное выравнивание (left, center, right)
noshade - отменяет объёмность линии. (советую использовать всегда)
Заголовки в HTML-документе задаются элементами: H1, H2, H3, H4, H5, H6. Шесть уровней заголовков различаются между собой величиной шрифта. H1 - самый большой и самый "жирный" заголовок, а H6 - самый "тонкий" и маленький. Заголовки отделяются от остального текста пустой строкой сверху и снизу. Элемент может иметь параметр align, с помощью которого заголовок выравнивается по горизонтали (left, center, right).
Пример:
Самый большой заголовок, выровненный по центру
CENTER - элемент, который выравнивает всё содержимое HTML-документа, расположенное между тегами
и
, посередине окна просмотра браузера. В основном используется для выравнивания таблиц.
Пример:
Первая ячейка Вторая ячейка
PRE - используется для вставки в HTML-документ отформатированного текста, который будет отображён браузером с сохранением всех пробелов моноширинным шрифтом.
Пример:
Отформатированный текст
DIV - элемент, с помощью которого фрагмент HTML-документа выделяется в качестве блока или раздела. Может иметь параметр align, выравнивающий блок по горизонтали (left, center, right).
Пример:
текст блока
ADDRESS - элемент, который задаёт фрагмент текста в качестве почтового адреса. Браузеры такой текст обычно отображают курсивом.
Пример:
Наш адрес
Москва, ул.Строителей, 15
BLOCKQUOTE - элемент задаёт фрагмент текста в качестве цитаты. Текст, размеченный данным элементом на экране отображается с отступом вправо.
Пример:
текст блока
