Основы HTML

автор **Alenka** Пн Окт 19, 2009 11:06 pm

Алекс пишет:Тут я выложу своеобразный урок что ли по работе с HTML.

автор **Alenka** Пн Окт 19, 2009 11:06 pm

Алекс пишет:Создание Web-страниц при помощи языка HTML

Итак, мы приступаем к изучению создания собственных Web-страниц при помощи специального языка, называемого HTML. Создать страницу в Internet очень просто: нужно только усвоить немного информации. Для чего нужна Web-страница? Если говорить кратко и по существу, то в настоящее время – это основной способ широкой публикации информации в электронных системах. Чтобы создать страницу в Internet, нужно написать программу на языке HTML (HyperText Markup Language), т.е. языке разметки гипертекстовых документов. Это очень простой язык, доступный пользователям компьютеров, неискушённым в программировании. Программы, описывающие страницы, могут быть небольшими, всего в несколько строк. Поэтому их легко может написать рядовой пользователь. Программа, написанная на HTML, исполняется броузерами (системами просмотра). Броузеры отправляют запросы, когда вы щёлкаете на ссылке, и получают данные, содержащие HTML-файл, графические, звуковые и видеофайлы, которые были упомянуты в HTML-файле. При получении этих данных броузер форматирует текст в соответствии с инструкциями программы, содержащейся в HTML-файле, и размещает его вместе с графикой и другими элементами. HTML-файл – это обычный текстовый файл, поэтому для написания программы потребуется какой-нибудь текстовый редактор. Можно воспользоваться и специальными программами, позволяющими автоматизировать набор инструкций и отладку. Начинать работу рекомендуется с написания программ в простом текстовом редакторе, например Блокноте из операционной системы Windows. Затем вы легко, с удовольствием и знанием дела, можете обратиться к любым средствам автоматизации разработок Web-страниц.
Для работы нам потребуется броузер, в котором будут просматриваться Web-страницы. Мы будем использовать самый распространенный броузер Internet Explorer 5.0.

автор **Alenka** Пн Окт 19, 2009 11:07 pm

Алекс пишет:Описание страницы (сайта) содержится в документе HTML, который представляет собой обычный текстовый файл. Документы HTML содержат программные коды, называемые тэгами. Тэги представляют собой последовательности символов, заключённые в угловые скобки (например, <P>).
Обычно тэги записываются прописными буквами. Все ключевые слова тэгов, являющиеся аббревиатурами слов английского языка, записываются буквами латинского алфавита. Например, слово IMG – это сокращение слова Image (изображение).

Тэг <HTML>
Документ HTML должен начинаться тэгом <HTML> и заканчиваться тэгом </HTML>. Некоторые тэги используются только парами, как, например, тэги <HTML> и </HTML>. При этом первый из них называется открывающим, а второй – закрывающим.
Есть тэги, используемы по одному. Примером такого тэга является тэг абзаца - <P>. Тэги могут содержать параметры, называемые атрибутами, которые, в свою очередь, могут иметь значения – аргументы.
Итак, если мы решили написать HTML-программу, то должны включить в неё два тэга:
<HTML>
…(здесь будут другие тэги программы)
</HTML>

Тэги <HEAD> и <BODY>

Документы HTML состоят из двух основных частей: заголовка и тела. Каждая из этих частей ограничивается соответствующей парой тэгов. Так, заголовок ограничивается парой тэгов <HEAD> и </HEAD>, а тело – тэгами <BODY> и </BODY>. В результате структура документа HTML выглядит следующим образом:
<HTML>
<HEAD>
…(здесь будет заголовок)
</HEAD>
<BODY>
…(здесь будут тэги тела программы)
</BODY>
</HTML>

Тэг <TITLE>

Заметим, что писать каждый тэг с новой строки или делать отступы совсем не обязательно, однако это улучшает читаемость программы.
Между тэгами <HEAD> и </HEAD>, обрамляющими заголовок документа, напишем ещё два тэга: <TITLE> и </TITLE>. С помощью этих тэгов обрамляется текст, который помещается в заголовок окна броузера. Пусть текст заголовка будет, например, таким: «Личная страница Малыша и Карлсона». Тогда программа примет следующий вид:
<HTML>
<HEAD><TITLE>Личная страница Малыша и Карлсона </TITLE></HEAD>
<BODY>
…(здесь будут тэги тела программы)
</BODY>
</HTML>

В теле нашей программы, т.е. между тэгами <BODY> и </BODY> напишем какой-нибудь текст, чтобы программа выглядела следующим образом:
<HTML>
<HEAD> <TITLE> Личная страница Малыша и Карлсона </TITLE></HEAD>
<BODY>
Приветствуем всех у нас на крыше!
</BODY>
</HTML>

Сохраним текст нашей программы в файле с расширением htm или html. Например, дадим имя файлу Карлсон.htm.
Такие средства, как FrontPage или Word при создании вставляют в заголовок тэги <META> с различными атрибутами. Эти тэги используются для организации поиска вашей страницы на поисковых серверах.
При написании HTML-документов, особенно если в них содержится много тэгов, возникает необходимость вставки комментариев – поясняющих текстов, которые не должны быть видны при загрузке документа в броузере. Комментарии нужны разработчику документа. Для этой цели служит тэг <!>. Всё, что заключено между символами <! и >, считается комментарием и броузер не отображает эту информацию.

Тэг <CENTER>

Отметим ещё тэг <CENTER>, который позволяет располагать элементы по центру, какой бы ни была ширина окна броузера. Точнее, все элементы, заключённые между тэгами <CENTER> и </CENTER>, будут находиться в центре окна по его ширине, если только для них не указано специальное расположение. Если пользователь изменит размеры окна броузера, произойдёт новое выравнивание.

ТЕКСТЫ

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

Абзац

Тэг <BR> предписывает переход на новую строку. Тэг <P> является тэгом абзаца. Он переводит курсор на новую строку и ещё одну строку пропускает. Если не использовать эти тэги, то разбиение текста на строки будет определяться шириной окна броузера, так что вид текста может оказаться совсем не таким, как мы его себе представляем.

Заголовки текста

Для выбора размера шрифта можно использовать тэги заголовков в тексте. Их всего шесть. При переходе от первого заголовка к шестому постепенно уменьшается размер и толщина букв шрифта. Тэги заголовков записываются как <H1>, <H2>,… <H6>. Каждый из заголовков имеет соответствующий закрывающий тэг. С помощью тэгов заголовков оформляются заголовки различных уровней. Например, запись <H1> Заголовок 1-го уровня </H1> задаёт вывод текста Заголовок 1-го уровня шрифтом, соответствующим первому заголовку.

Управление шрифтом

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

Стиль Тэг
Полужирный <B>…</B>
Курсив <I>…</I>
Подчёркнутый <U>…</U>
Пишущая машинка <TT>…</TT>

Тэги <FONT> и <BASEFONT>

С помощью специального тэга <FONT> можно настроить шрифт для изображения текста: задать гарнитуру, размер и цвет. Прежде всего, вы можете установить размер основного шрифта, который используется в документе по умолчанию. Тэг основного шрифта имеет формат <BASEFONT SIZE=размер_шрифта>. Размер основного шрифта можно установить от 1 до 7. Если на использовать этот тэг, то размер основного шрифта по умолчанию устанавливается равным 3.
Тэг <FONT SIZE=размер_шрифта> используется для установки размера текущего шрифта для отдельных фрагментов текста. На стили этот тэг не влияет. Диапазон возможных значений – от 1 до 7. Данный тэг позволяет также управлять размером текущего шрифта относительно основного. Для этого используется символ «+», чтобы увеличить и символ «-», чтобы уменьшить размер шрифта на заданную величину. Например, если размер основного шрифта установлен равным 3, то тэг <FONT SIZE=+2> устанавливает размер текущего шрифта равным 5.
Для задания гарнитуры шрифта используется тэг <FONT FACE= «имя_шрифта»>. Например, <FONT FACE= «Arial»>.
Если этот тэг не используется в вашем документе, то броузер будет применять шрифт, установленный в своей настройке. Следует также иметь в виду, что если назначенный вами шрифт не установлен на компьютере пользователя, то броузер будет изображать текст шрифтом, установленным по умолчанию. Вы можете в тэге указать через запятую перечень шрифтов. В этом случае броузер будет использовать первый найденный шрифт. Например, можно записать тэг: <FONT FACE= «Arial, Sans Serif, Courier»>. Обычно в перечне задают похожие шрифты.
С помощью атрибута COLOR в тэге <FONT> можно задать цвет шрифта: <FONT COLOR=”цвет”>
Аргумент атрибута COLOR представляет собой шестнадцатеричную запись кода цвета (красной, зелёной и синей составляющей).

Заметим, что в тэге <FONT> можно использовать несколько или все его возможные атрибуты. Например, <FONT FACE="Arial" SIZE=5 COLOR="BLUE">.

ЦВЕТ

По умолчанию броузеры заполняют фон сплошным цветом, определённым настройкой броузера. Пользователи по-разному настраивают цвета, поэтому полезно принудительно зафиксировать цвет фона или создать фоновое изображение. Фоновый цвет задаётся в тэге <BODY> в начале HTML-файла.
Цвет фона определяется атрибутом BGCOLOR тэга <BODY>. Например, тэг, задающий жёлтый цвет фона, имеет вид:

<BODY BGCOLOR=”YELLOW”>
Можно задать и цвет текста. Этой цели служит атрибут TEXT тэга <BODY>. Тэг, приведённый ниже, задаёт зелёный цвет для фона и синий – для текста:

<BODY BGCOLOR=”GREEN” TEXT=”BLUE”>

Ниже приводится таблица соответствий имён цветов:

автор **Alenka** Пн Окт 19, 2009 11:07 pm

Алекс пишет:Чёрный - BLACK, NAVY , SILVER

Синий - BLUE, MAROON

Пурпурный -PURPLE, FUCHSIA
Красный - RED

Зелёный - GREEN, TEAL, LIME, AQUA, OLIVE

Серый - GRAY

Жёлтый - YELLOW

Белый WHITE

автор **Alenka** Пн Окт 19, 2009 11:08 pm

Алекс пишет:Списки

Иногда требуется разместить списки на странице. Списки бывают нумерованные и маркированные. При отображении списков броузер выделяет их отступом от края страницы. Кроме того, списки могут быть вложенными.
Нумерованные списки задаются тэгом <OL>, а маркированные – тэгом <UL>. Оба эти тэга парные.
Для нумерованных списков можно выбрать способ индексации. Это делается с помощью атрибута TYPE с аргументами: 1 (арабские цифры), А (прописные буквы), а (строчные буквы), i (римские цифры). Можно задать номер, с которого начинается список. Для этого служит атрибут START внутри тэга <OL>.
Перед элементами списков следует поставить тэг <LI>, чтобы индексация происходила автоматически. В этом тэге можно использовать и вышеописанный атрибут TYPE.

Алекс пишет:Разделительные полосы

При оформлении текста, чтобы отделить один раздел от другого, нередко используют разделительные полосы. Можно задать ширину, толщину и способ выравнивания разделительной полосы.
Разделительная полоса задаётся тэгом <HR>, внутри которого могут содержаться следующие атрибуты:
SIZE – толщина в пикселах;
WIDHT – ширина в пикселах;
ALIGN – способ выравнивания принимает значения CENTER, LEFT или RIGHT; кроме того, можно использовать атрибут NOSHADE для создания сплошной чёрной полосы без тени).

Алекс пишет:Бегущая строка

Тэг <MARRQUEE>

Internet Explorer поддерживает тэг <MARRQUEE>, который позволяет создать «бегущую» строку, т.е. эффект прокручивания текста в заданном поле. Характеристики бегущей строки задаются следующими атрибутами:
WIDTH – ширина поля бегущей строки в пикселах или процентах от ширины окна.
HEIGHT – высота поля бегущей строки (в пикселах).
HSPACE, VSPACE – интервал по горизонтали и вертикали между текстом строки и краями её поля (в пикселах).
ALIGN – определяет положение текста бегущей строки в её поле. Возможные аргументы:
TOP – вверху;
BOTTOM – внизу;
MIDDLE – посередине.
DIRECTION – определяет направление движения. Возможные аргументы:
LEFT – справа налево;
RIGHT – слева направо.
BEHAVIOR – определяет характер движения строки. Возможные аргументы:
SCROLL – текст появляется от одного края и скрывается за другим;
SLIDE – строка вытягивается из одного края поля и останавливается у другого края;
ALTERNATE – задаёт переменное направление движения, от одного края к другому, а затем обратно.
LOOP – определяет количество повторений текста в бегущей строке, задаваемое числом, если необходимо «бесконечное» количество повторений, то следует задать аргумент в виде ключевого слова INFINITY.
SCROLLAMOUNT – устанавливает длину в пикселах «прыжка» текста за один такт, при большом значении этого параметра текст движется рывками, а при малом – замедленно.
SCROLLDELAY – определяет величину паузы между тактами перемещения текста (в миллисекундах).
BGCOLOR – устанавливает цвет поля бегущей строки.

автор **Alenka** Пн Окт 19, 2009 11:10 pm

Алекс пишет:ГРАФИКА

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

Вставка графических изображений

Вставка на страницу графического изображения из файла графического формата (GIF, JPG, BMP и др.) производится с помощью тэга <IMG> с указанием адреса файла в качестве аргумента атрибута SRC:
<IMG SRC=”адрес_графического_файла”>
Адрес графического файла – это либо URL-адрес, либо имя файла, возможно с указанием пути.
Для предварительного формирования структуры страницы следует указать размеры изображения с помощью атрибутов WIDTH (ширина) и HEIGHT (высота), измеряемых в пикселах. Если указать эти атрибуты, то броузер сначала выделит место под графику, подготовит макет документа, отобразит текст и только потом загрузит графику. Заметим, что броузер сжимает или растягивает изображение, встраивая его в рамки указанного размера. Например, <IMG SRC=”logotip.gif” WIDTH=40 HEIGHT=20>
Графика обычно используется вместе с текстом, поэтому возникает задача выравнивания текста и графического изображения. Эта задача решается с помощью атрибута ALIGN тэга <IMG> с применением различных аргументов. Например, мы можем пожелать, чтобы текст обтекал картинку справа или слева. Обычно картинка встраивается вплотную с текстом, что может быть некрасиво. Во избежании этого, можно задать пустые поля вокруг иллюстрации. Поля создаются с помощью атрибутов VSPACE для верхнего и нижнего полей и HSPACE для боковых полей в тэге <IMG>. Аргументы этих атрибутов указываются в виде чисел, определяющих размеры полей в пикселах. Для отмены обтекания графики текстом служит тэг <BG CLEAR=…>.
Следующий тэг задаёт обтекание графики из файла LOGOTIP.JPG справа (картинка будет находиться слева от текста):
<IMG SRC=”logotip.gif” ALIGN=LEFT>
Если требуется расположить картинку справа от текста, то нужно атрибуту ALIGN присвоить аргумент RIGHT:
<IMG SRC=”logotip.gif” ALIGN=RIGHT >
Чтобы задать поля вокруг картинки, надо написать тэг вида:
<IMG SRC=”logotip.gif” ALIGN=LEFT HSPACE =20 VSPACE =10>
Широкие возможности точного позиционирования изображения (как и других элементов) на странице предоставляют таблицы и стили. Например, вы можете определить таблицу без видимых рамок, а в ячейках этой таблицы разместить картинки, тексты и другие элементы.

Алекс пишет:Фоновая графика

Чтобы украсить страницу, можно заполнить фон картинкой из графического файла. Фоновое изображение – это графический файл, содержащий картинку (желательно небольшого размера), который многократно выводится на экран, заполняя всё окно. Изображение для фона должно напоминать фрагмент обоев, т.е. быть небольшим и незамысловатым, чтобы, во-первых, не замедлять загрузку, а во-вторых, текст на выбранном фоне должен легко читаться. Это совет, а не обязательное ограничение.
Фоновая графика задаётся в тэге <BODY> в начале документа HTML, подобно тому, как задаётся цвет фона. При этом используется атрибут BACKGROUND, значением которого является имя графического файла. Например,
<BODY BACKGROUND=”fon.gif” BGPROPERTIES=FIXED>

Для использования графического файла в качестве фона его желательно предварительно обработать в любом графическом редакторе (Adobe Photoshop, CorelDraw, Photo Editor).

Алекс пишет:ССЫЛКИ

Ссылки (или гиперссылки) позволяют щелчком кнопки мыши на выделенном тексте или изображении перейти к другому файлу или фрагменту страницы. Ссылки применяются в большинстве существующих страниц. Они могут быть текстовыми и графическими. Текстовые ссылки представляют собой выделенное слово или целую фразу. Текстовые ссылки выделяются цветом или подчёркиванием, в зависимости от настройки броузера. Графическая ссылка – это изображение, выделенное рамкой, цвет которой также определяется настройкой броузера.
В языке HTML структуры текстовых и графических ссылок подобны друг другу. Все они задаются тэгом <A HREF>, которому соответствует закрывающий тэг </A>. В ссылке сначала указывается имя файла, на который она ссылается, а затем текст или имя графического файла, содержащего изображение ссылки. Кроме простых графических ссылок, можно создать так называемую графическую карту ссылок – картинку с горячими областями, щелчок на которых приводит к срабатыванию соответствующих ссылок.
Текстовые ссылки

Структура текстовой ссылки имеет следующий вид:
<A HREF=”адрес_ссылки”> текст_ссылки </A>

Обратите внимание, что тэг ссылки имеет закрывающую часть </A>.

Алекс пишет:Графические ссылки

Структура графической ссылки имеет вид:
<A HREF=”адрес_ссылки”>
<IMG SRC=”имя_графического_файла” ></A>

автор **Alenka** Пн Окт 19, 2009 11:10 pm

Алекс пишет:ТАБЛИЦЫ

Нередко на страницах встречаются таблицы. Можно использовать таблицы просто в качестве способа форматирования текста, поскольку таблица в HTML-документе может не содержать всех или некоторых разграничительных линий. Заметим, что в большинстве случаев элементы текста позиционируются как табличные.
Таблица представляет собой особую часть документа HTML. Данные в ней организованы в виде прямоугольной сетки, которая состоит из вертикальных столбцов и горизонтальных рядов (строк). Каждая клетка таблицы называется ячейкой. Ячейки могут содержать текст, графику и даже другую таблицу.
Таблица состоят из трёх основных частей: названия таблицы, заголовков столбцов и ячеек. Таблица заполняется слева направо, ячейка за ячейкой, начиная с левого верхнего угла и заканчивая правым нижним углом. Каждая ячейка должна быть заполнена (для создания пустых ячеек используются пробелы).
Описание таблицы в документе HTML начинается с тэга <TABLE> и заканчивается тэгом </TABLE>. Если вы хотите, чтобы таблица имела видимую рамку (границы), используйте атрибут BORDER.
Атрибут BORDER может принимать аргумент (число), определяющий ширину рамки, например: <TABLE BORDER=10 >
Для задания названия таблицы используется тэг <CAPTION> с атрибутом выравнивания ALIGN, который может принимать значение TOP или BOTTOM (расположение названия вверху или внизу таблицы соответственно), например:
<CAPTION ALIGN=TOP>Моя таблица</ CAPTION>
Каждый ряд ячеек начинается с тэга <TR> и заканчивается тэгом </TR>.
Если ряд должен содержать заголовки столбцов таблицы, то используются тэги <TH> и </TH>. Если в ячейках должны размещаться данные, то используются тэги <TD> и </TD>.
Тэги заголовков и данные должны располагаться между тэгами рядов <TR> и </TR>. Проще говоря, вы сначала определяете таблицу (тэг <TABLE>), а затем внутри этого определения задаёте строки (тэг <TR>) и содержимое ячеек (тэг <TD> – для данных, тэг <TH> – для названий заголовков столбцов).
Несколько ячеек могут быть объединены в одну как по горизонтали, так и по вертикали. Объединение по столбцу применяют тогда, когда надо, чтобы соседние столбцы имели общий заголовок. Объединение по рядам делается в том случае, когда содержимое нескольких ячеек подряд одинаково. Для объединения ячеек используются атрибуты COLSPAN и ROWSPAN (по столбцам и по рядам соответственно). Аргументами этих атрибутов являются количества объединяемых столбцов или рядов.
Как шириной все таблицы, так и шириной каждой отдельной ячейки можно управлять. Ширину всей таблицы можно задать как в пикселах, так и в процентах от ширины окна. Ширину ячеек можно задать также двумя способами: в пикселах и в процентах от ширины таблицы. Следует иметь в виду, что ячейки в одном столбце имеют одинаковую ширину, а ячейки одной строки – разную ширину. Ширина таблицы задаётся атрибутом WIDTH в тэге <TABLE>, а ширина ячейки указывается тем же атрибутом в тэге <TH> или <TD>.

Текст и графику внутри ячеек таблицы можно выравнивать. Горизонтальное и вертикальное выравнивание содержимого строк задаётся с помощью атрибута ALIGN в тэге <TR>. Выравнивание в отдельных ячейках выполняет атрибут ALIGN в тэгах <TH> и <TD>. Атрибут ALIGN может принимать аргументы LEFT (по левому краю), RIGHT (по правому краю) и CENTER (по центру). Пример:
<TR ALIGN=LEFT>
<TH WIDTH=25% ALIGN=CENTER>текст</TH>
В следующем примере используем таблицу без рамок как способ размещения различных элементов на странице. Для задания нужного расстояния между элементами следует использовать атрибуты выравнивания.
Цветовое оформление таблицы производится с помощью атрибута BGCOLOR, который принимает в качестве аргумента цвет в виде имени или шестнадцатеричного числа.
Если нужно установить цвет для всей таблицы, то атрибут BGCOLOR вставляется в тэг Для изменения цвета только одного ряда этот атрибут вставляется в тэг <TR>. Задание цвета отдельной ячейки обеспечивается атрибутом BGCOLOR внутри тэга <TD>.
Если в таблице имеются рамки, то можно указать и их цвет с помощью атрибутов:
BORDERCOLOR – цвет всей рамки;
BORDERCOLORLIGHT – цвет светлой части рамки;
BORDERCOLORDARK – цвет тёмной части рамки.
Эти атрибуты вставляются в тэг<TABLE>. Чтобы они действительно работали, необходимо присутствие ещё и атрибута BORDER, задающего ширину рамки.
Если требуется задать шрифт для текстов внутри ячеек таблицы, то это можно сделать с помощью тэгов заголовков и физических стилей внутри тэгов <TD>.

Алекс пишет:ФРЕЙМЫ

Часто возникает необходимость разместить в окне броузера несколько разделов или окон, называемых фреймами. В каждом фрейме отображается свой документ HTML. Фреймы могут работать независимо, а также содержать ссылки друг на друга.
При использовании фреймов потребуется несколько HTML-файлов. Один из них называется установочным. В нём описывается расположение (раскладка) фреймов в окне броузера и назначаются исходные HTML-файлы для каждого из фреймов, но нет собственного текста и графики. Исходные HTML-файлы выводятся во фреймы и могут содержать тексты, графику, ссылки и пр.
Установочный HTML-файл, как и любой другой, начинается с тэга <HTML> и заканчивается тэгом </HTML>. Для разделения окна на несколько фреймов используются тэги <FRAMESET> и </FRAMESET>. Тэг <FRAMESET> должен быть размещён после тэга </HEAD>, но перед тэгом <BODY>.
Два фрейма можно расположить рядом друг с другом или друг над другом. Для задания способа расположения используется атрибут COLS (если рядом) или ROWS (если друг над другом). Чтобы разделить окно на два фрейма, указывают через запятые два числа. Эти числа определяют размеры фреймов. Для трёх фреймов задаются три числа. Если нужно указать, что фрейм занимает все оставшееся место, используется символ звёздочка (*). Размеры фреймов измеряются в пикселах или процентах. В последнем случае около числа пишется символ процента (%).
Например, тэг <FRAMESET COLS=”50,*”> задаёт деление окна на два вертикальных фрейма, первый из которых имеет ширину 50 пикселов, а второй занимает всё оставшееся место. Тэг <FRAMESET ROWS=”20%,30%,*”> задаёт разбиение на три горизонтальных фрейма высотой 20%, 30% и 50%.
Можно использовать одновременно и горизонтальное, и вертикальное разбиение окна на фреймы. Это делается вложением тэгов <FRAMESET> друг в друга, т.е. размещением фреймов внутри фреймов.
После задания расположения фреймов следует указать для каждого из них исходный HTML-файл. Напомним, что исходные файлы выводятся во фреймах. Для этой цели служит тэг <FRAME>, имеющий множество атрибутов, которые управляют свойствами фреймов. Ниже перечислены эти атрибуты.
SRC= «имя_файла»NAME= «имя_фрейма» - каждый фрем должен иметь имя, упомянутое в атрибуте NAME, и к нему должен быть привязан HTML-файл, указанный в атрибуте SRC.
SCROLLING – определяет, будут ли присутствовать в окне фрейма полосы прокрутки, если требуется прокрутка, то задаётся аргумент YES, иначе – NO.
NORESIZE – запрещает пользователю изменять размеры фреймов, если этот атрибут не применяется, то пользователь не может изменять размеры.
BORDER= «ширина_полосы» - определяет ширину разделительной полосы между фреймами в пикселах.
MARGINHEIGHT= «высота_верхнего_отступа» - добавляет пустое поле между верхней границей фрейма и началом текста или графики, измеряется в пикселах.
MARGWIDTH= «ширина_боковых_отступов» - добавляет пустое поле между боковыми границами фреймов и началом текста или графики, измеряется в пикселах.

автор **Alenka** Пн Окт 19, 2009 11:11 pm

Алекс пишет:<html></html> Указывает программе просмотра страниц что это HTML документ.
<head></head> Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин.
<body></body> Определяет видимую часть документа
Теги оглавления
<base href="[Вы должны быть зарегистрированы и подключены, чтобы видеть эту ссылку] Указание браузеру от какого базового адреса все ссылки (кроме ссылок явно прописанных полностью)
<base target="?"> Указание браузеру от какого базового окна в котором открываются все ссылки (кроме ссылок с отдельным указанием данного параметра)
<meta name="allow-search" content="?"> Указание для поисковых роботов как следует сканировать данную страницу
<meta http-equiv="distribution" content="?"> Указание для поисковых роботов относится ли данная страница к мировым
<meta name="robots" content="?"> Указание для поисковых роботов как следует сканировать данную страницу
<meta name="author" content="?"> Указание автора странички
<meta name="keywords" content="?"> Описание содержащийся информации (для поисковых машин)
<meta http-eguive="content-type" content="text/plain;churset="?"> Указание браузеру в какой кодировке следует подгружать страницу (Window-1251, KOI8-R, KOI8-U, ISO-8859-5, UTF-8, UTF-16 и д.р.)
Некоторые хостинги (восновном иностранные) автоматически перекодируют страници получаемые сервером в определенную кодировку. Поэтому уточняйте передпостановкой этого тега у поставщиков хостинга этот вопрос.
<meta name="description" content="?"> Ключевые слова странички (для поисковых машин)
<title></title> Помещает название документа в оглавление программы просмотра страниц
Атрибуты тела документа
<body bgcolor="?"> Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет.
<body text="?"> Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет.
<body link="?"> Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет.
<body vlink="?"> Устанавливает цвет гиперссылок, на которых вы уже побывали, используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет.
<body alink="?"> Устанавливает цвет гиперссылок при нажатии.
Теги форматирования текста
<pre></pre> Обрамляет предварительно отформатированный текст.
<h1></h1> Создает самый большой заголовок
<h2></h2>, <h3>, </h3><h4></h4>, <h5>, </h5> Создает заголовоки промежуточных размеров
<h6></h6> Создает самый маленький заголовок
<b></b> Создает жирый текст (нерекомендованный)
<i></i> Создает наклонный текст (нерекомендованный)
<tt></tt> Создает текст - имитирующий стиль печатной машинки. (нерекомендованный)
<kbd></kbd> Создает текст - имитирующий стиль печатной машинки. (рекомендованный)
<var></var> Название переменных отображается курсивом
<cite></cite> Выделение цитат курсивом
<address></address> Отображается курсивом в виде отдельного абзаца
<em></em> Наклонный текст (воспринимается посковыми роботами как выделение)
<strong></strong> Жирный текст (воспринимается посковыми роботами, как особо сильное выделение)
<font size="?"></font> Устанавливает размер текста в пределах от 1 до 7.
<font color="?"></font> Устанавливает цвет текста, используя значение цвета в виде RRGGBB.
Гиперссылки
<a href="URL"></a> Создает гиперссылку на другие сайты.
<atarget="?"></a> Указывает в каком окне открывать гиперссылку. параметры Значение
_Blank Загрузка содержимого страницы, заданной ссылкой, в новое пустое окно
_Parent Загрузка содержимого страницы, заданной ссылкой, в окно, которое содержит ссылку
_Self Загрузка содержимого страницы, заданной ссылкой, в окно, игнорируя используемые фреймы
_Top Загрузка содержимого страницы, заданной ссылкой, в окно, игнорируя использованные фреймы

При использовании фреймов и вложенных фреймов значением может выступать имя фрейма или вложенной сетки фреймов, приэтом страница откроется в указаной части окна.

<a href="NAME"></a> Создает гиперссылку на другую страницу.
<a href="mailto:EMAIL"></a> Создает гиперссылку вызова почтовой программы для написания письма по указанному адресу.
<a href="#name"></a> Создает гиперссылку на метку текущей страници.
<a name="name"></a> Отмечает часть текста, как метку для гипперссылок на странице.
<a href="NAME#name"></a> Создает гиперссылку на метку другой страници.
Форматирование
<p></p> Создает новый параграф
<p align="?"></p> Выравнивает параграф относительно одной из сторон документа, значения: left, right, justify или center
<nobr> Запрещает перевод строки.
<wbr> Указывает где разбивать строку для переноса при необходимости.
<br> Вставляет перевод строки.
<blockquote></blockquote> Создает отступы с обеих сторон текста.
<dl></dl> Создает список определений.
<dt> Определяет каждый из терминов списка
<dd> Описывает каждое определение
<ol></ol> Создает нумерованный список
<li> Определяет каждый элемент списка и присваивает номер
<ul></ul> Создает ненумерованный список
<li> Предваряет каждый элемент списка и добавляет кружок или квадратик.
<div align="?"></div> Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей
Графические элементы
<img src="name"> Добавляет изображение в HTML документ
<img src="name" align="?"> Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle
<img src="name" border="?"> Устанавливает толщину рамки вокруг изображения
<img src="name" vspase="?"> Устанавливает поля сверху и снизу
<img src="name" hspase="?"> Устанавливает поля сбоков
<img src="name" alt="?"> Всплывающая подсказка при наведении на имедж
<hr> Добавляет в HTML документ горизонтальную линию.
<hr size="?"> Устанавливает высоту (толщину) линии
<hr width="?"> Устанавливает ширину линии, можно указать ширину в пикселах или процентах.
<hr noshade> Создает линию без тени.
<hr color="?"> Задает линии определенный цвет. Значение RRGGBB.
Таблицы
<table></table> Создает таблицу.
<tr></tr> Определяет строку в таблице.
<td></td> Определяет отдельную ячейку в таблице.
<th></th> Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом)
<caption></caption> Определяет подпись таблицы
Атрибуты таблицы

<table border="#"> Задает толщину рамки таблицы.
<table cellspacing="#"> Задает расстояние между ячейками таблицы.
<table cellpadding="#"> Задает расстояние между содержимым ячейки и ее рамкой.
<table width="#"> Устанавливает ширину таблицы в пикселах или процентах от ширины документа.
<table height="#"> Устанавливает высоту таблицы в пикселах или процентах от высоты документа.
<tr align="?"> или <td align="?"> Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right.
<tr valign="?"> или <td valign="?"> Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom.
<td colspan="#"> Указывает кол-во столбцев, которое объединено в одной ячейке. (по умолчанию=1)
<td rowspan="#"> Указывает кол-во строк, которое объединено в одной ячейке. (по умолчанию=1)
<td nowrap> Не позволяет программе просмотра делать перевод строки в ячейке таблицы.
<td width="#"> Устанавливает ширину ячейки в пикселах или процентах от ширины таблицы (ячейки одного столбца не могут иметь разную ширину).
<td height="#"> Устанавливает высоту ячейки в пикселах или процентах от высоты таблици (ячейки одной строки не могут иметь разную высоту).
Фреймы
<frameset></frameset> Предваряет тег <body> в документе, содержащем фреймы;
<frameset rows="value,value"> Определяет строки в таблице фреймов, высота которых определена кол-вом пикселов или в процентном соотношении к высоте таблицы фреймов.
<frameset cols="value,value"> Определяет столбцы в таблице фреймов, ширина которых определена кол-вом пикселов или в процентном соотношении к ширине таблицы фреймов.
<frame> Определяет единичный фрейм или область в таблице фреймов.
<noframes></noframes> Определяет, что будет показано в окне браузера, если он не поддерживает фреймы.
Атрибуты фреймов
<frame src="URL"> Определяет какой из HTML документов будет показан во фрейме.
<frame name="name"> Указывает Имя фрейма или области, что позволяет перенаправлять информацию в этот фрейм или область из других фреймов.
<frame marginwidth="#"> Определяет величину отступов по левому и правому краям в нутрь фрейма; должно быть равно или больше 1.
<frame marginheight="#"> Определяет величину отступов по верхнему и нижнему краям в нутрь фрейма; должно быть равно или больше 1.
<frame scrolling=VALUE> Указывает будет-ли выводится линейка прокрутки во фрейме; значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - auto.
<frame noresize> Препятствует изменению размеров фрейма пользователем.
Ифрейм и его атрибуты
<iframe></iframe> Создает контейнер, который может содержать любые элементы. Остальные элементы обтекают этот контейнер.
<iframe src="URL"> Определяет какой из HTML документов будет показан в ифрейме.
<iframe name="name"> Указывает Имя ифрейма, что позволяет перенаправлять информацию в этот ифрейм .
<iframe vspase="?"> Устанавливает поля сверху и снизу с наружи от ифрейма
<iframe hspase="?"> Устанавливает поля сбоков с наружи от ифрейма
<iframe marginwidth="#"> Определяет величину отступов по левому и правому краям в нутрь ифрейма; должно быть равно или больше 1.
<iframe marginheight="#"> Определяет величину отступов по верхнему и нижнему краям в нутрь ифрейма; должно быть равно или больше 1.
<iframe scrolling=VALUE> Указывает будет-ли выводится линейка прокрутки в ифрейме; значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - auto.
<iframe width="#"> Определяет ширину ифрейма
<iframe height="#"> Определяет высоту ифрейма;
<iframe title="?"> Текст всплывающей подсказки
Формы
<form></form> Создает формы
<select multiple name="NAME" size="?"></select> Создает скролируемое меню. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки.
<option> Указывает каждый отдельный элемент меню
<select name="NAME"></select> Создает ниспадающее меню

<option> Указывает каждый отдельный элемент меню
<textarea name="NAME" cols=40 rows=8></textarea> Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту.
<input type="checkbox" name="NAME"> Создает checkbox.
<input type="radio" name="NAME" value="x"> Создает radio кнопку.
<input type=text name="foo" size=20> Создает строку для ввода текста. Параметром Size указывается длина в символах.
<input type="submit" value="NAME"> Создает кнопку "Отправить"
<input type="image" border="0" name="NAME" src="name.gif"> Создает кнопку "Отправить" - для этого используется изображение
<input type="reset"> Создает кнопку "Очистить"

Пн	Вт	Ср	Чт	Пт	Сб	Вс
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Основы HTML

Основы HTML

Re: Основы HTML

Re: Основы HTML

Re: Основы HTML

Re: Основы HTML

Re: Основы HTML

Re: Основы HTML

Re: Основы HTML