Что такое HTML? HyperText Markup Language (HTML) -
стандартнй язык разметки, предназначенный для создания гипертекстовых
документов в среде WEB. Использование HTML позволяет форматировать
документы, то есть предавать простому тексту спецэффекты (жирный шрифт, подчёркнутый, наклонный
и т.д.) которые будут отображаться на вашей страничке. С помощью него
так же можно вставлять картинки и другие элементы дизайна и навигации
(например таблицы).
HTML язык состоит из тегов, при помощи
которых можно будет менять внешний вид страницы. Все теги HTML
начинаются с "<" (левой угловой скобки) и заканчиваются символом
">" (правой угловой скобки).
Тег можно представить как инструкцию к выполнению, которая имеет начало, объем выполнения и завершение. Выглядит то так: <инструкция> Объем выполняемого действия </инструкция> где: <инструкция> - это тег в котором прописываются все инструкции к нужному фрагменту Объем выполняемого действия - это фрагмент текста или картинка, к которой применяет инструкция </инструкция> - завершающий тег, после которого продолжение текста или картинки идут в заданном по умолчанию виде
Структура документа
Когда WEB-браузер получает
документ, он определяет, как документ должен быть интерпретирован.
Самый первый тег, который встречается в документе, должен быть тегом
<html>. Данный тег сообщает WEB-браузеру, что документ написан с
использованием HTML.
Заголовочная часть документа <head>
Тeг заголовочной части документа должен быть использован сразу после
тeга <html> и более нигде в теле документа. Данный тег
представляет из себя общее описание документа. Избегайте размещать
какой-либо текст внутри тeга <head>.
Тело документа <body>
Тело документа должно находиться между тeгами <body> и
</body>. Это та часть документа, которая отображается как
текстовая и графическая информация вашей странички.
Минимальный HTML-документ будет выглядеть так:
<html> <head> </head> <body> </body> </html>
Это просто пустая белая страница.
HEAD
Рассмотрим заголовок нашего документа HEAD.
в него можно вставить следующие теги:
<title>Название страницы</title> - название страницы
отображается в шапке браузера, либо в наименовании закладки - это
удобно для пользователя в заголовке браузера он видит не адрес где он
находится, а нормальное название страницы, например "Дизайн-студия
Котика"
Meta-теги
<META NAME="Description" CONTENT="описание вашего сайта"> это описание должен выдавать поисковик рядом с ссылкой на ваш сайт;
<META NAME="Keywords" CONTENT="ключевые слова вашего сайта"> ключевые слова, по которым поисковик найдёт вашу страницу
<META NAME="Updated" CONTENT="дата обновления"> дата последнего обновления сайта
<META NAME="URL" CONTENT="http://адрес вашего сайта"> определение главной страницы для индексирования
<META NAME="language" CONTENT="Russian Federation"> указание языка вашего сайта
Body по-русски означает "тело". Как и все теги этот имеет свое начало и конец. <body></body>
Все, что находится между этими тегами будет относиться к самой
странице. В "теле" документа вы можете написать всё что хотите,
разместить графику, таблицы и списки.
Сам тег может иметь
параметры, в нем прописываются значения по умолчанию для всей страницы,
они будут отображаться для всего содержимого в случае, если для
отдельных элементов не прописаны индивидуальные стили отображения.
Вот некоторые примеры изменений, которые вы можете сделать:
<body bgcolor=#код цвета> - цвет фона страницы всегда
прописывайте этот тег, даже если у вас стоит фоновая картинка, ведь у
посетителя может быть отключён показ графики. Очень распространённая
ошибка это белый текст на белом фоне (случается когда тёмная фоновая
картинка не загружается а цвет текста белый).
<body
background="адрес картинки"> - фоновая картинка: картинку которая
будет заполнять всю вашу страничку это и есть фоновая картинка. Советую
всегда использовать картинки в формате .gif или .jpg/.jpeg .
<body text=#код цвета> - цвет текста страницы
<body link=#код цвета> - цвет ссылок страницы
<body alink=#код цвета> - цвет активной ссылки
<body vlink=#код цвета> - цвет посещённой ссылки vlink - visited link; очень помогает посетителю разобраться в посещенных разделах и в не посещенных
Для
форматирования текста так же есть специальные теги. Текст изменяет свой
внешний вид только внутри определенной пары тегов, а в остальном
документе имеет вид, прописанный по умолчанию, это очень удобно, когда
необходимо выделить какие-то отдельные части наполнения нашей страницы.
<i>
Наклонный текст <i>Наклонный текст</i>
<b>
Жирный текст <b>Жирный текст</b>
<u>
Подчеркнутый текст <u>Подчеркнутый текст</u>
<s>
Зачеркнутый текст <s>Зачеркнутый текст</s>
Цветной текст <font color=#Код_цвета>Цветной текст</font>
рассмотрим подробнее тег
<font>
, он может иметь не один, а несколько параметров.
<font color="#xxxxxx> - цвет текста <font size="0"> - размер текста (2-4) <font face="Verdana"> - шрифт текста
Пример: <font color="#xxxxxx font size="0" face="Verdana"> Форматируемая часть текста </font>
Выравнивание текста на странице: <p align=left> Текст слева </p> <p align=right> Текст слева </p> <p align=center> Текст в центре </p> <p align=justify> Текст по ширине страницы (все строки одной ширины) </p>
<p>
<p>Новый абзац</p> - работает как перенос текста с дополнительной пустой строкой. Может иметь параметры: Выравнивание текста на странице: <p align="left"> Текст слева </p> <p align="right"> Текст слева </p> <p align="center"> Текст в центре </p> <p align="justify"> Текст по ширине страницы (все строки одной ширины) </p>
<br>
<br> не требует закрывающего тега. Это просто перенос текста на новую строку.
Таблицы
Одним из
самых важных элементов в HTML, несомненно являются таблица. С помощью
них очень просто располагать текст и картинки в нужных нам местах.
Используя таблицы, можно создавать такие эффекты, как верстка в
несколько колонок, применение эффектов состыковки картинки и фона,
тонкие линии на всю ширину или высоту странички и т.д. Чтобы разобраться в устройстве таблицы, рассмотрим простой пример: Такая таблица реализуется следующим кодом: <TABLE BORDER="2" WIDTH="300" BGCOLOR="#00FF00"> <TR> <TD>1 ячейка 1 строки</TD> <TD>2 ячейка 1 строки</TD> </TR> <TR> <TD>1 ячейка 2 строки</TD> <TD>2 ячейка 2 строки</TD> </TR> </TABLE>
Примечание: В данном примере создана таблица с фиксированой шириной
(WIDTH="300" пикселей), но лучше использовать проценты, т.к. в этом
случае размер таблицы будет изменятся в зависимости от размера окна.
А теперь о каждом элементе таблицы, его атрибутах и их значениях, в подробностях и с примерами. Элемент
Table
Элемент извещающий о начале таблицы. Обязательно должен иметь закрывающий тег </Table>, который закрывает таблицу.
Имеет следующие атрибуты: Атрибут: Width
Этот атрибут задает ширину таблицы в пикселях или в процентах от ширины
объекта, в который помещена таблица. Если не указать этот атрибут, то
браузер автоматически определит этот параметр в зависимости от объема
содержащегося в таблице материала.
Записывается так: <table width="70%">
Атрибут: Height
Этот атрибут задает ширину таблицы в пикселях или в процентах от ширины
объекта, в который помещена таблица. Если не указать этот атрибут, то
браузер автоматически определит этот параметр в зависимости от объема
содержащегося в таблице материала.
Записывается так: <table height="150">
Атрибут: Bgcolor Определяет цвет фона таблицы. Идентичен одноименному атрибуту элемента <Body>.
Записывается так: <table bgcolor="#000000">
Атрибут: Background
Этот атрибут позволяет залить тело таблицы графическим изображением,
также как и одноименный атрибут элемента <Body>. В качестве
значения указывается путь до файла изображения.
Атрибут: Border
Указывает ширину внешней рамки таблицы в пикселях. Если этот атрибут не
указывать или указать значение "0", рамка отображаться не будет.
Записывается так: <table border="2">
Пример таблицы с рамкой равной 5 пикселям:
Атрибут: Bordercolor Устанавливает цвет внешней границы таблицы (шестнадцатиричное значение цвета)
Записывается так: <table bordercolor="#326662">
Атрибут: Align
Атрибут горизонтального выравнивания таблицы. Имеет значения "center"
(по центру), "left" (по левому краю) и "right" (по правому краю).
Записывается так: <table align="center">
Атрибут: Cellspacing Определяет расстояние в пикселях между ячейками таблицы.
Записывается так: <table cellspacing="2">
Пример таблицы со значением атрибута "cellspacing" равным "5":
Атрибут: Cellpadding Этот атрибут определяет расстояние в пикселях между рамкой каждой ячейки таблицы и ее содержимым.
Записывается так: <table cellpadding="10">
Пример таблицы со значением атрибута "cellpadding" равным "10":
Заметьте, что ширина таблицы в первом и во втором примере не менялась и
составляет 300 пикселей. Но во второй таблице мы имеем атрибут
cellpadding равный "10", то есть в каждой ячейке существуют как бы
"мертвые зоны" слева, справа, сверху и снизу, величиной 10 пикселей.
Этим мы как бы отобрали у каждой ячейки часть рабочего простанства в 20
пикселей по горизонтали (10 слева и 10 справа) и 20 пикселей по
вертикали (10 сверху и 10 снизу). В итоге содержимое ячеек уже не
поместилось в оставшееся пространство и чтобы показать все содержимое,
браузер растянул таблицу по вертикали.
Элемент
Tr
Элемент создает новую строку ячеек в таблице.
Имеет следующие атрибуты: Атрибут: Align
Определяет способ горизонтального выравнивания содержимого всех ячеек
данной строки. Возможные значения:"left" (по левому краю), "center" (по
центру), "right" ( по правому краю).
Записывается так: <tr align="center"> Элемент создает новую строку ячеек в таблице.
Атрибут: Valign
Определяет способ вертикального выравнивания содержимого всех ячеек
данного ряда. Возможные значения: "top" (по верхней границе строки),
"bottom" (по нижней границе строки), "middle"(по центру строки).
Записывается так: <tr valign="top">
Посмотрите пример:
Видите содержимое второй ячейки первой строки увеличилось в объеме и
чтобы отобразить это содержимое браузер растянул по вертикали первую
строку. Но в то же время содержимое первой ячейки по центру строки.
Атрибут "valign" для того чтобы выравнять содержимое ячеек, то есть
чтоб содержимое ячеек всегда находилось там где Вы хотите. Вот
пример в котором значение атрибута "valign" равно "top", то есть
выранивание осуществляется по верхней границе строки. И теперь как бы
не раздвигалась таблица содержимое первой ячейки будут как бы привязаны
к верху строки. Вот пример где значение атрибута "valign" равно "bottom": Если не указывать атрибута "align" и "valign", то по умолчанию они принимают значения "left" и "middle" соответственно.
Атрибут: Bgcolor Определяет цвет фона строки таблицы. Идентичен одноименному атрибуту элемента <Table>.
Записывается так: <tr bgcolor="#123456">
Элемент
Td
Создает в текущей строке ячейку с данными (текст, графическое
изображение, всевозможные объекты мультимедия и т.д). Внутрь ячейки
может быть вложена другая таблица.
Имеет атрибуты: Атрибут: Width
Определяет ширину ячейки в пикселях или в процентах от ширины таблицы.
Обычно этот атрибут выставляется один раз для столбца. То есть для всех
ячеек во всех строках с одним и тем же порядковым номером.
Записывается так: <td width="15%">
Пример задания ширины ячейки:
Здесь я задала ширину для 1 ячейки 1 строки таблицы равной 15 % от
ширины таблицы. И как Вы видите 1 ячейка 2 строки приняла ту же ширину.
Ширину можно задавать и в пикселях.
Атрибут: Height
Определяет определяет высоту ячейки в пикселях или в процентах. Обычно
этот атрибут выставляется для какой нибудь одной ячейки строки. То есть
все ячейки текущей строки принимают для себя это же значение.
Записывается так: <td height="150">
Пример задания высоты ячейки:
В этом примере во 2 ячейке первой строки выставлен атрибут "height"
равный "100". И как Вы видите вторая ячейка приняла то же значение
атрибута "height", хотя он и не указан во второй ячейке. Если в одной
строке несколько ячеек (элементов <td>) будут иметь атрибут
"height" с разными значениями, браузер прорисует ячейки выбрав
максимальное значение атрибута "height". Для правильного
отображения таблицы значение атрибута "height" выставляйте в пикселях.
Как ни странно но не IE, ни Opera, ни Netscape не хотят понимать
значение "height" в процентах.
Атрибут: Bgcolor Определяет цвет фона ячейки. Идентичен одноименному атрибуту элемента <Table>.
Записывается так: <td bgcolor="#677667">
Атрибут: Background
Этот атрибут позволяет залить тело ячейки графическим изображением,
также как и одноименный атрибут элемента <Table>. В качестве
значения указывается путь до файла изображения.
Атрибут: Align
Определяет способ горизонтального выравнивания содержимого ячейки.
Возможные значения: "left" (по левому краю), "right" (по правому краю),
"center"(по центру).
Записывается так: <td align="centr">
Атрибут: Valign
Определяет способ вертикального выравнивания содержимого ячейки.
Возможные значения: "top" (по верхней границе ячейки), "bottom" (по
нижней границе ячейки), "middle"(по центру)..
Записывается так: <td valign="top">
То есть для каждой конкретной ячейки можно задать свой способ выравнивания. Пример:
Здесь для первой ячейки первой строки значение атрибута "valign" задано
как "bottom". Для второй ячейки этой же строки valign="middle". Для
первой ячейки второй строки valign="middle". Для второй ячейки второй
строки valign="top".
Изображения
в HTML документе Для вставки изображений в HTML документ используется следующая конструкция (представлена полная):
Используется для вставки в тело документа графического изображения. Под
графическим изображением подразумевают: схемы, рисунки, графические
объекты и карты изображений в форматах JPEG (в том числе progressive
jpeg) и Compuserve GIF (включая прозрачные и анимированные). Последние
версии браузеров позволяют также использовать формат PNG, но до тех пор
пока они не устареют от применения PNG лучше воздержаться. Элемент IMG не имеет конечного тэга.
Имеет атрибуты: Атрибут: Src
Этот атрибут является обязательным параметром. Указывает адрес
(URL-адрес) графического файла с расширением (поддерживаются *.jpg,
*.gif, *.png).
Важно! Обязательно задавайте значения параметров "width" и "heght",
резервируя тем самым место в окне браузера еще до загрузки изображения.
В противном случае документ при загрузке каждой картинки будет заново
перерисовываться. А на медленных машинах или при подключении к сети
посредством модема это просто отвратительно смотрится.
Атрибут: Hspace
Определяет отступ картинки (в пикселах) по горизонтали от других
объектов документа. Просто необходим при обтекании изображения текстом.
Важно! Указывайте значения параметров Hspace и Vspace, даже если вы
хотите оставить поля нулевой ширины. Бывает, что некоторые браузеры по
умолчанию присваивают им какое-то небольшое значение, не равное нулю.
Атрибут: Align Обязательный параметр. Указывает способ выравнивания изображения в документе. Может принимать следующие значения:
left Выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа.
right Выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева.
top и texttop Выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.
middle Выравнивает базовую линию текущей текстовой строки с центром изображения.
absmiddle Выравнивает центр текущей текстовой строки с центром изображения.
bottom и baseline Выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.
absbottom Выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.
Атрибут: Name
Определяет имя изображения, уникальное для данного документа. Вы можете
указать любое имя без пробелов с использованием латинских символов и
цифр. Имя необходимо, если вы планируете осуществлять доступ к
изображению, например, из JavaScript-сценариев. Для обычного изображения, не связанного ни с чем, этот параметр совсем не обязательный.
Атрибут: Alt
Это сообщение, которое выводится вместо картинки, если браузер по какой
либо причине не смог отобразить изображение (не найдена или
пользователь настроил свой Обозреватель так, что тот не показывает
картинки). Кроме того, вы увидите этот текст в виде подсказки, когда
курсор мыши находится на рисунке.
Записывается так: <img src="http://site.ru/images/kartinka.gif" alt="Это сообщение, которое выводится вместо картинки">
Атрибут: Border
Определяет ширину рамки вокруг изображения в пикселах. Если этот
атрибут не указан в теге <Img> рамка возникает, только если
изображение является гипертекстовой ссылкой. В таких случаях значение
Border обычно указывают равным нулю.
Атрибут: Lowsrc
Указывает адрес (URL) графического файла с расширением с альтернативным
изображением более низкого качества (и, соответственно, меньшего
объема), чем изображение, указанное в параметре SRC. Обозреватели,
поддерживающие данный параметр, сначала загрузят картинку из LOWSRC, а
затем заменят ее картинкой из SRC. Не обязательный параметр.
Списки в
HTML бывают двух видов: пронумерованные и непронумерованные. Отличаются
они лишь способом оформления. Перед пунктами непронумерованных списков
обычно ставятся символы-буллеты, например, точки, ромбики и т.п., в то
время как пунктам пронумерованных списков предшествуют их номера. В
данном случае Обозреватель автоматически будет проставлять числа перед
каждым элементом списка.
Элемент
OL
Используется с целью задания нумерованных списков. Элемент <OL>
включает в себя дополнительный элемент <LI>, который задает
элементы списка.
Имеет атрибуты: Атрибут: Type Определяет вид нумерованного списка.
Имеет значения: A - большие латинские буквы a - маленькие латинские буквы I - большие римские цифры i - маленькие римские цифры 1 - обычные цифры
A. Текст списка 1 B. Текст списка 2 C. Текст списка 3 D. Текст списка 4
Эффект: (type="a")
a. Текст списка 1 b. Текст списка 2 c. Текст списка 3 d. Текст списка 4
Эффект: (type="I")
I. Текст списка 1 II. Текст списка 2 III. Текст списка 3 IV. Текст списка 4
Эффект: (type="i")
i. Текст списка 1 ii. Текст списка 2 iii. Текст списка 3 iv. Текст списка 4
Эффект: (type="1")
1. Текст списка 1 2. Текст списка 2 3. Текст списка 3 4. Текст списка 4
Атрибут Start Служит для указания, с какого индекса начинается нумерация списка.
Значение любое целое число. Например если Вы выбрали type="a" и хотите
чтоб Ваш список начался с буквы "d" поставьте в атрибуте "start"
значение "4". В этом случае браузер отсчитает в алфавите четвертую
букву и начнет список с нее.
E. Текст списка 1 F. Текст списка 2 G. Текст списка 3 H. Текст списка 4
Если в элементе <OL> не указывать его атрибуты, то по умолчанию список отобразится по типу "1" и начнется с "1".
Элемент
UL
Этот элемент используется с целью задания непронумерованных списков.
Имеет атрибут "type" для задания вида маркера, со значениями disc,
circle, square. Атрибут Type Определяет вид маркера непронумерованного списка.
Имеет значения: disc - диск circle - круг square - квадрат
disc - определяет вид маркера в виде залитого диска.
○. Текст списка 1 ○. Текст списка 2 ○. Текст списка 3 ○. Текст списка 4
Эффект: (type="circle")
●. Текст списка 1 ●. Текст списка 2 ●. Текст списка 3 ●. Текст списка 4
Эффект: (type="square")
■. Текст списка 1 ■. Текст списка 2 ■. Текст списка 3 ■. Текст списка 4
Элемент
LI
Создает пункт в списке и располагается внутри элементов <OL> и <UL>
Элемент
DL
Используется с целью задания словарей, глоссариев и прочих перечней. Имеет дополнительные элементы <DT> и <DD>
Элемент
DT
Создает термин в списке определений внутри элемента <DL>
Элемент
DD
Cоздает определение термина внутри элемента <DL>
Элементы <DT> и <DD> записываются внутри элемента <DL>
Записывается так: <DL> <DT> Термин <DD> Определение термина <DD> Определение термина <DD> Определение термина <DD> Определение термина </DL>
Эффект:
Термин Определение термина Определение термина Определение термина Определение термина
ССЫЛКИ
расскажу как составляется ссылка. ссылка всегда содержится внутри тега <a href="ссылка">Слово-ссылка</a> тег <а> может иметь различные параметры:
<a href="ссылка" target="_blank"> - ссылка откроется в новом окне <a href="ссылка" title="комментарий"> - текст комментарий будет высвечиваться при наведении на ссылку мышкой
<a href="ссылка" target="_blank" style="color: rgb(255, 255, 255);
text-decoration: none;">Слово-ссылка</a> - ссылка открывается
в новом окне и у нее индивидуальные параметры отображения - цвет в
режиме RGB (белый), без подчеркивания. Применяется в случае, если стиль
всех ссылок задается единый (как на наших форумах), а одну нужно
выделить отдельным цветом.
чтобы ссылкой была картинка нужно просто вместо Слова-ссылки вставить картинку: <a href="ссылка" target="_blank"><img src="адрес картинки" title="комментарий" border="0"></a>
