Текущее время: 20 апр 2018, 15:38

Город ХОББИ

Занятие любимым хобби - это путь к счастливой жизни!

Вэб дизайн . WEB design

WEB технологии, дизайн, сайтостроение, SEO
Аватар пользователя
 
Сообщений: 52
Зарегистрирован: 01 апр 2013, 10:31

Вэб дизайн . WEB design

Сообщение Еремин » 22 фев 2014, 20:41

Для начала Вам нужно выбрать редактор. Cyщecтвyeт двa типa peдaктopoв: WYSIWYG (What-You- See-Is What-You-Get Что-ты-видишь-то-и-получаешь) и peдaктopы, paбoтaющиe нaпpямyю c HTML-кoдoм. Ecли Вы нe имeeтe ни мaлeйшeгo пpeдcтaвлeния o HTML, тo для начала Вaм пoдoйдyт peдaктopы пepвoй гpyппы, нaпpимep:


Front Page, Word
В это случае читайте файлы справок этих программ. Ecли хотите научиться работать с HTML-кoдoм напрямую, а речь в данном учебнике пойдет как раз об этом, воспользуйтесь -


HTMLPad, Блокнот, Bred
Лично я выбрал Bred, которым заменил стандартный Блокнот Windows. Bred в отличие от Блокнота обладает множеством разных настроек - панель инструментов и статуса, неограниченная отмена действий, есть подсветка HTML тегов, автозамена, автоматическая регистрация расширений (*.txt, *.ini, ...), а лимит текста - не менее 1Mb. И это далеко не все его возможности.

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

Код: выделить все
<!--Пример HTML документа.-->
<html>
<head>
<!--Следующая строчка - кодировка.-->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Ваш заголовок</title>
</head>
<body>
<!--Теперь указываем название шрифта (лучше два, можна и больше, через запятую), его размер и цвет.-->
<font face="Verdana,Sans-serif" size="2" color="#000000">
<b>Название Вашего раздела</b><p>
Здесь Ваш текст.
<p>
<!--Далее встраиваем графический файл в документ. И будет он у нас по центру.-->
<center>
<img border=0 src="Имя графического файла с расширением" Width="Его размер по горизонтали" Height="Его размер по вертикали" alt="Здесь Вы указываете выпадающую подсказку">
</center>
</font>
</body>
</html>



Сохраните документ как htm файл (например, 001.htm) и запустите. Вы создали первую свою страницу. Поздравляю!

Теперь немного о тэгах - знаках, распологающихся в скобках. Большинство тэгов имеют открывающийся элемент <> и закрывающийся </>. Между ними и находяться коды, которые распознает Обозреватель. HTML-документ всегда начинаться отрывающимся тэгом <HTML> и заканчиваться закрывающим </HTML>. Далее идет заголовок <HEAD></HEAD>. Между этими тэгами всегда должна находиться информация о кодировки страницы, в нашем случае -

Код: выделить все
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">


и тэги опредиляющие название страницы <TITLE></TITLE>. Только теперь между тэгами содержимого документа <BODY></BODY> можно распологать свою информацию, рисунки, видеофайлы, аудиофайлы...

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



Аватар пользователя
 
Сообщений: 52
Зарегистрирован: 01 апр 2013, 10:31

Текст в вэб дизайне

Сообщение Еремин » 22 фев 2014, 20:45

Большинство HTML документов имеют заголовок. Для его создания используют тэги <Hn></Hn>, где n – число от 1 до 6. Заключив текст между этими тэгами, вы получите заголовок определенного размера.

Код: выделить все
<H1>Заголовок</H1>
<H2>Заголовок</H2>
<H3>Заголовок</H3>
<H4>Заголовок</H4>
<H5>Заголовок</H5>
<H6>Заголовок</H6>

Для создания нового абзаца используется тэг <P>, а для перехода на новую строчку без создания абзаца - тэг <BR>. Эти тэги закрывать не обязательно. Конечно, если Вы не используете в тэге <P> элемент ALIGN, которым может задаватся выравнивание абзаца:
Код: выделить все
<P ALIGN=LEFT>По левому краю</P>

<P ALIGN=CENTER>По центру</P>

<P ALIGN=RIGHT>По правому краю</P>

<P ALIGN=JUSTIFY>Текст, находящийся между этими элементами выравнивается по ширине</P>


Для придания тексту определенного начертания - жирный, курсив, подчеркнутый и т.д., поместите его между соответствующими тэгами:
Код: выделить все
<B>Жирный текст</B>
<I>Курсив</I>
<U>Подчеркнутый</U>
<STRIKE>Перечеркнутый</STRIKE>
<SUP>Верхний индекс</SUP>
<SUB>Нижний индекс</SUB>



Некоторые тэги могут или должны применяться с определенными параметрами, которые указываются в открывающемся элементе тэга (можно сразу указывать несколько параметров в одном тэге). Например, открывающийся тэг <FONT> (закрывающийся тэг </FONT> обязателен) может иметь несколько атрибутов:

SIZE - задает размер текста (по умолчанию размер текста равен 3). Поместив текст между тэгами <FONT SIZE=n></FONT>, где n - цифровое значение, Вы придадите ему нужный вам размер:

Код: выделить все
<font size="1">Пример 1</font>
<font size="2">Пример 2</font>
<font size="3">Пример 3</font>
<font size="4">Пример 4</font>
<font size="5">Пример 5</font>
<font size="6">Пример 6</font>


FACE - задает стандартное имя шрифта. Используйте шрифты, которые установлены на компьютере пользователя, в противном случае Обозреватель будет использовать шрифт, определенный по умолчанию (обычно Times New Roman). К стандартным шрифтам можно отнести шрифты, поставляемые с Windows 98, Ms Plus, Ms Office. В самой нижней строке данной таблицы представлено использование семества шрифта - имя каждого шрифта пишется через запятую. Если у пользователя на компьютере нет шрифта Comic Sans MS, Обозреватель подставит следующий в этом списке - Tahoma.

Код: выделить все
<font face="Times New Roman">Times New Roman</font>
<font face="System">System</font>
<font face="Arial">Arial</font>
<font face="Courier">Courier</font>
<font face="Verdana">Verdana</font>
<font face="Comic Sans MS, Tahoma">Comic Sans MS</font>



COLOR - задает цвет текста (по умолчанию черный - #000000). Цвет текста может определятся как самим названием, например, red, blue и т.д, так и представлен в шестнадцатиричном виде - #FF0000 (красный) #0000FF (синий).

Код: выделить все
<font COLOR="red">Красный</font>
<font COLOR="#FF0000">Красный</font>


С помощью элемента STYLE тэга <SPAN> (закрывающийся тэг </SPAN> обязателен) можно задавать выделение текста любым цветом:
Код: выделить все
<SPAN STYLE="BACKGROUND-COLOR: lightgreen">Светло-зеленый</SPAN>

<SPAN STYLE="BACKGROUND-COLOR: yellow">Желтый</SPAN>

<SPAN STYLE="BACKGROUND-COLOR: lightblue">Светло-синий</SPAN>



Аватар пользователя
 
Сообщений: 52
Зарегистрирован: 01 апр 2013, 10:31

Цвет и фон в вэб дизайне.

Сообщение Еремин » 22 фев 2014, 20:49

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

Итак сначала про цвет. Для его вставки в строку с тэгом <BODY> Вашего документа нужно добавить параметр BGCOLOR и указать его значение - название цвета или его шестнадцатеричный вид. Данные два примера заполняют страницу документа красным цветом.

<BODY BGCOLOR="RED"> (использовано название цвета)
<BODY BGCOLOR="#FF0000"> (использован шестнадцатеричный вид цвета)

Тепер о фоновой картинке. Фоном может быть как большой графический файл (учтите - в этом случае страничка будет грузиться дольше) так и его фрагмент, что более разумно. При использовании последнего он будет автоматически размножен Вашим Обозревателем, поэтому подбирайте фрагмент хорошо стыкующимся. Вставить в страницу фоновую картинку можно так:

<BODY BACKGROUND="images.gif">

Параметру BACKGROUND присвоено значение images.gif - это имя графического файла с расширением (поддерживаются *.jpg, *.gif, *.png). Естественно оно может быть другим. Предпологаеться, что графический файл рассположен в одной папке с Вашим документом, иначе нужно указать к нему путь. Разберемся с путями на примере файла images.gif.

На два уровня вниз.
Параметр="Folder_1/Folder_2/images.gif"

На два уровня вверх.
Параметр="../../images.gif"



Подобное указание путей применяется для разных элементов, например, ссылок, рисунков, файлов.
Чуть ниже представлен Screen Shot документа, где в качестве фоновой картинки использован этот фрагмент -




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

Тэг <BODY> может также иметь параметры отступов в документе (определяются числовым значение).

leftmargin - отступ слева
rightmargin - отступ справа
topmargin - отступ сверху
bottom margin - отступ снизу

<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

В данном тэге могут присутствовать и другие параметры, например, какие-то функции JavaScript, задание цветов текста и ссылок. Но об этом немного позже…



Аватар пользователя
 
Сообщений: 52
Зарегистрирован: 01 апр 2013, 10:31

картинки и изображения в вэб

Сообщение Еремин » 22 фев 2014, 20:55

Для вставки изображений в HTML документ используется следующая конструкция (представлена полная):

Код: выделить все
<IMG SRC="Рисунок" BORDER="0" ALIGN="Выравнивание" WIDTH="Ширина" HEIGHT="Высота" HSPACE="Отступ_1" VSPACE="Отступ_2" ALT="Подсказка" NAME="Имя" LOWSRC="Рисунок_2">


В таблице находится описание каждого параметра данной конструкции:

SRC Имя графического файла с расширением (поддерживаются *.jpg, *.gif, *.png). Если файл находится в другом каталоге, укажите к нему путь. Вы можете перейти на закладку, в которой идет речь о путях.

    ALIGN Выравнивание изображения в документе:
    left - по левому краю.

    right - по правому краю.

    top или texttop - выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.

    middle - выравнивает базовую линию текущей текстовой строки с центром изображения.

    absmiddle - выравнивает центр текущей текстовой строки с центром изображения.

    bottom или baseline - выравнивают нижнюю кромку изображения с базовой линией текущей текстовой строки.

    absbottom - выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.


    BORDER Рамка вокруг рисунка. Значение по умолчанию - 0 (без рамки).

    WIDTH Ширина изображения в пикселях.

    HEIGHT Высота изображения в пикселях.

    HSPACE Горизонтальный отступ графического изображения в пикселях. Не обязательный параметр.

    VSPACE Вертикальный отступ в пикселях. Не обязательный параметр.

ALT Это сообщение, которое выводится вместо картинки, если она не показывается (не найдена или пользователь настроил свой Обозреватель так, что тот не показывает картинки). Кроме того, вы увидите этот текст в виде подсказки, когда курсор мыши находится на рисунке.

NAME Определяет имя изображения. Для обычного изображения, не связанного ни с чем, этот параметр совсем не обязательный.

LOWSRC Имя графического файла с расширением с альтернативным изображением более низкого качества (и, соответственно, меньшего объема), чем изображение, указанное в параметре SRC. Обозреватели, поддерживающие данный параметр, сначала загрузят картинку из LOWSRC, а затем заменят ее картинкой из SRC. Не обязательный параметр.



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

Код: выделить все
<IMG SRC="  " BORDER="0" ALT="Папка" WIDTH="17" HEIGHT="16">




Всегда задавайте размеры картинки в параметрах height и width, резервируя тем самым место в окне Обозревателя еще до загрузки изображения. Параметр alt можно не указывать, но вдруг у человека не загрузилась картинка, он хоть будет знать, что она собой представляет.



Аватар пользователя
 
Сообщений: 52
Зарегистрирован: 01 апр 2013, 10:31

Изображения-карты

Сообщение Еремин » 22 фев 2014, 21:01

Карты - это способ сделать различные части одного графического изображения гиперссылками. Они позволяют выделить отдельные области изображений и определить для каждой из них свое действие.

В данном примере изображения-карты Вы можете безобоязненно щелкать по ссылкам, они никуда не ведут, а выводят сообщения о том, какие ссылки были нажаты. Кнопки на этом изображении нарисованы только для того, чтобы можно было видеть ссылки, а не искать их наугад по всему рисунку.


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

Код: выделить все
<IMG SRC="Map_example.jpg" BORDER="0" WIDTH="200" HEIGHT="160" ALT="Пример изображения-карты" USEMAP="#Map_example">
<MAP NAME="Map_example">
<AREA SHAPE="rect" COORDS="11,11,70,24" TITLE="Ссылка 1" HREF="URL">
<AREA SHAPE="rect" COORDS="70,72,128,83" TITLE="Ссылка 2" HREF="URL">
<AREA SHAPE="rect" COORDS="190,136,128,149" TITLE="Ссылка 3" HREF="URL">



Как видите, чтобы создать карту нужно вставить в тэг <IMG> атрибут USEMAP="#name", где name - имя карты (значок # обязателен). В примере использовалось название Map_example. Я пропускаю остальные атрибуты в этом тэге, Вы их должны знать, т.к. о них уже рассказывалось в предыдущей главе.

Далее описываем активные области карты. Начинаем с открывающегося тэга <MAP NAME="name"> (здесь повторяется имя, но уже без значка #), а заканчиваем закрывающимся тэгом </MAP>.

Между этими тэгами помещаем описание каждой активной области изображения: <AREA SHAPE="форма" COORDS="координаты" HREF="адрес" TITLE="альтернативный текст">. Элемент <AREA> имеет следующие аттрибуты и их значения:

    SHAPE Описывает форму выделяемой области, возможные значения:
    RECT - прямоугольник
    CIRCLE - круг
    POLY - многоугольник
    DEFAULT - определяет всю область, т.е весь рисунок может стать ссылкой.

    COORDS Координаты, определяющие размеры и положение области на изображении. Все координаты отсчитываются в пикселях от левого верхнего угла изображения. Количество и порядок значений зависит от значения аттрибута SHAPE:
    RECT: - левый-X, верхний-Y, правый-X, нижний-Y (т.е. сначала координаты левого верхнего угла, затем правого нижнего)
    CIRCLE: - центр-X, центр-Y, радиус (т.е. горизонтальная и вертикальная координаты центра круга и радиус)
    POLY: - X1, Y1, X2, Y2, ..., Xn, Yn (просто перечисляются координаты всех вершин многоугольника).
NOHREF Определяет, что данной области не соответствует никакая ссылка. Где это может пригодиться? Ну, например, если вы хотите сделать ссылку не в виде круга, а в виде кольца

ALT Альтернативный текст для выделенной области, используется невизуальными браузерами.

TITLE Название выделенной области, выводится в виде подсказки, всплывающей при наведении курсора на область рисунка.

TARGET Значение этого аттрибута ("_top", "_blank", "_self" или "_parent") определяет, в каком окне будет открыт документ



Для того, чтобы рассчитать точно координаты нужной части изображения существуют специальные программы. Одна из них называется MapEdit.



Аватар пользователя
 
Сообщений: 52
Зарегистрирован: 01 апр 2013, 10:31

ссылки в HTML

Сообщение Еремин » 22 фев 2014, 21:05

Ссылки HTML позволяют связать текст или картинку с другими гипертекстовыми документами. Текст, как правило, выделяется цветом или оформляется подчеркиванием. Вот обычная конструкция ссылки:

Код: выделить все
<A HREF="URL" TARGET="Окно" TITLE="Подсказка">Название ссылки</A>


Параметры элемента <A> представлены в таблице:

HREF URL (унифицированный локатор ресурсов) - адрес любого файла в Интернете. Может быть абсолютными, то есть указывается полный адрес странички (например, http://lenininc.narod.ru/index.html) и относительным, как видно из названия указывается файл относительно текущего (например, index.html).

TARGET Oпределяет, в каком окне (фрейме) загрузить гиперссылку. Может иметь значения:
    _top - загружает гиперссылку на всем пространстве окна Обозревателя (если до этого существовало разбиение на фреймы, то оно исчезнет).

    _blank - загружает гиперссылку в новом окне Обозревателя.

    _self – загружает содержимое страницы, в окно, которое содержит эту ссылку (и так используется по умолчанию, так что если вам надо именно так загрузить ссылку, то параметр target вообще можно не использовать).

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


TITLE Текст подсказки, который будет появляться при наведении мышки на гиперссылку. Параметр не обязательный.



Для примера была создана ссылка на документ 002.htm под рисунком (смотрите ниже). Предпологаеться, что оба документа находяться в одной папке.

Код: выделить все
<p align=center>
<img border=0 src="015.jpg" Width="520" Height="390" alt="Мой рисунок"><br>
<a href="002.htm" target="self" title="Пример ссылки">LINK</a> 
</p>



Щелкнув на ссылку откроеться другой документ, в данном случае 002.htm.


Графический файл в роли ссылки. Вверх


Гиперссылкой можно сделать и любой графический файл, поддерживающийся Обозревателем. Для этого вместо названия ссылки нужно прописать графический элемент (Параметр TITLE должен быть только у рисунка):

Код: выделить все
<a href="URL" target="Окно">
<img border="0" src="Рисунок" width="Ширина" height="Высота" TITLE="Подсказка>
</a>



Ссылка на e-mail. Вверх


Вы можете также создать ссылку на e-mail, в это случае нужно в качестве URL’a прописать следующее:

mailto:адрес электронной почты

Например:

Код: выделить все
<a href="mailto:lenin@zeos.net">Мое мыло</a>


Почтовая гиперссылка имеет несколько параметров (не обязательных):
    ?subject - Тема пиcьма
    &Body - Текст вашего сообщения
    &cc - Копии письма через запятую
    &bcc - Скрытые копии письма через запятую
    title="Выпадающая подсказка" Ставиться по желанию и распологаеться отдельно от параметров почтовой ссылки (смотрите расположение кавычек на примере ниже).

Код: выделить все
<a href="mailto:lenin@zeos.net ?subject=Поздравление &Body=text &cc=copy@mail.ua.net &bcc=hidden_copy@mail.ua.net" title="Пример почтовой гиперссылки">Мое мыло</a>




Щелкнув на такую ссылку, откроется окно почтовой программы пользователя с уже заполнеными полями. Останется только написать письмо и отправить.


Закладки. Вверх


Иногда возникает вопрос: как сделать ссылку на определенное место в том же или в другом документе? Чтобы нажав по какой-нибудь ссылке можно было попасть в определенное место данного документа. Вот в этом нам и помогут закладки.

Ссылка на закладку в том же документе имеет следующий вид:
Код: выделить все
<a href="#Имя закладки">Название раздела</a>


А так выглядит ссылка на закладку в другом документе:
Код: выделить все
<a href="Имя документа#Имя закладки">Название раздела</a>


Сама закладка будет такой:
Код: выделить все
<A NAME="Имя закладки"></a>


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


Ссылки и цвет. Вверх


Для того, чтобы при наведении на ссылку курсором и при клике она меняла свой цвет в тэг <BODY> нужно добавить еще несколько параметров.

    text - цвет текста.
    link - цвет ссылки.
    vlink - цвет пройденой ссылки.
    alink - цвет активной ссылки, когда подводиться к ней курсор.

<BODY text="black" link="blue" vlink="purple" alink="red">

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



Аватар пользователя
 
Сообщений: 52
Зарегистрирован: 01 апр 2013, 10:31

стили CSS

Сообщение Еремин » 22 фев 2014, 21:10

CSS Cascading Style Sheets (Таблицы каскадных стилей) – это набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходиться каждый раз описывать эти свойства. Применяя CSS, Вы можете один раз описать свойства элементов и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами.

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

Описания стилей находятся в тэгах <STYLE></STYLE> и размешаются между тэгами <HEAD></HEAD>. Приведем пример использования стилей, где слово "Пример" отображается шрифтом Comic Sans MS, если такого нет на машине пользователя, используется шрифт Tahoma, жирным шрифтом, размером 25 процентов и темно-зеленым цветом :

Описываем стили под именем Example :
Код: выделить все
<STYLE><!--
.Example{font-family: Comic Sans MS, Tahoma; font-weight: bolder; font-size: 25pt; color: darkgreen;}
--></STYLE>

Здесь вызываем описания стилей :
Код: выделить все
<div class="Example"> Пример </div>




Если Вы распологаете стили в отдельном файле, тогда между тэгами <HEAD></HEAD> каждого HTML документа нужно добавить ссылку на CSS файл:

Код: выделить все
<LINK REL=STYLESHEET TYPE="text/css" HREF="Example.css">


Example.css - это Ваш CSS файл, содержащий описание применяемых стилей. Если он находиться в другом каталоге, нужно указать к нему путь. Создается CSS файл в любом текстовом редакторе, например, в Блокноте, нужно будет только изменить расширение текстового файла на CSS. В CSS файле не должны указыватся тэги <STYLE></STYLE>. Например:

У нас есть файл Example.css, содержажий такие параметры (подчеркиваем ссылки только при наведении на них курсором):
Код: выделить все
<!--
   A { text-decoration: none; }
   A:hover { color: #FF0000; text-decoration: underline; }
-->


Ссылка на него в HTML документе будет выглядить так:
Код: выделить все
<LINK REL=STYLESHEET TYPE="text/css" HREF="Example.css">



Вы можете определить стиль для любого тэга отдельно. Для этого нужно в тэг добавить элемент STYLE и описать его стиль в кавычках. Следующий пример отображает слово "Пример" шрифтом Verdana, размером 150 процентов и красным цветом.

Код: выделить все
<H3 STYLE="font-family:Verdana; font-size:150%; color:red"> Пример </H3>


В таблице приведены некоторые свойства элементов, управляемых с помощью CSS.

Свойства шрифта:
font-family Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент.
Пример:
P {font-family: Verdana, sans-serif;}
font-weight Определяет степень жирности шрифта с помощью трех параметров: lighter (обычный), bold (жирный), bolder (очень жирный)
Пример:
B {font-weight: bolder;}
font-size Устанавливает размер шрифта. Параметр может указываться в процентах, пикселях или сантиметрах.
Примеры использования для тэгов H1, H2, H3:
    H1 {font-size: 200%;}
    H2 {font-size: 150px;}
    H3 {font-size: 400pt;}
Свойства текста:

text-decoration Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркивание текста
Пример использования для тэга Н4:
    H4 {text-decoration: underline;} (подчеркивание)
    H4 {text-decoration: line-through;} (зачеркивание)
text-align Определяет выравнивание элемента.
Пример:
Код: выделить все
P {text-align: left} (выравнивание по левому краю)
P {text-align: right} (выравнивание по правому краю)
P {text-align: justify} (выравнивание по ширине)
P {text-align: center} (выравнивание по центру)

text-indent Устанавливает отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой.
Пример использования для тэга H1:
Код: выделить все
H1 {text-indent: 60pt;} 

line-height Управляет интервалами между строками текста.
Пример:
Код: выделить все
P {line-height: 50 %}

Цвет элемента и фона:

color Определяет цвет элемента I {color: yellow;}
Пример использования для тэга H3:
Код: выделить все
H3 {color: #0000FF;}

background-color Устанавливает цвет фона для элемента.
Пример использования для тэга H3:
Код: выделить все
<H3 style=”background-color:gold; color:brown;”> Пример </H3>



Пример
Свойства границ:
    margin-left (слево)
    margin-right (справо)
    margin-top (сверху)
margin-bottom (снизу) Устанавливают значения отступов вокруг элемента.
Пример использования для рисунка:
    IMG { margin-left: 20pt}
    IMG { margin-right: 20pt}
    IMG { margin-top: 20pt}
    IMG { margin-bottom: 20pt}
Единицы измерения:
[list=]px Пиксели
cm Сантиметры
mm Миллиметры
pt или % проценты [/list]



Аватар пользователя
 
Сообщений: 52
Зарегистрирован: 01 апр 2013, 10:31

META теги в HTML

Сообщение Еремин » 22 фев 2014, 21:14

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

Кодировка. (обязательный мета тэг) Указав его, Обозреватель будет правильно отображать текст страницы.

Код: выделить все
<meta http-equiv="content-type" content="text/html; charset=Кодировка">


Пример использования:

Код: выделить все
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">


Показ дополнительного файла перед основным. Вы можете использовать этот мета-тэг для переадресации, не прибегая к навороченным скриптам.

Код: выделить все
<Meta name="Refresh" Content="число (в секундах); Url=имя файла с расширением">


Пример использования:

Код: выделить все
<Meta name="Refresh" Content="10; Url=INDEX.HTM">


Данный пример загружает документ INDEX.HTM через 10 секунд.

Указание имени автора. Впишите свое имя или Nickname.

Код: выделить все
<Meta name="Author" Content="имя автора">


Пример использования:

Код: выделить все
<Meta name="Author" Content="Владимир Дригалкин">


Описание документа. Текст, который Вы укажите в этом тэге, будет отображаться поисковиками. Длинна описания не должна превышать 200 символов.

Код: выделить все
<Meta name="Description" Content="описание">


Пример использования:

Код: выделить все
<Meta name="Description" Content="Все про взлом программного обеспечения. Инструменты, вирусы, исходники.">


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

Код: выделить все
<Meta name="Keywords" Content="слова через запятую или пробел">


Пример использования:

Код: выделить все
<Meta name="Keywords" Content="crack cracking взлом">


Указание E-Mail. Содержит адрес автора сайта.

Код: выделить все
<Meta name="Reply-to" Content="адрес E-Mail">


Пример использования:

Код: выделить все
<Meta name="Reply-to" Content="Lenin@INC.net">


Дата создания сайта. Содержит информацию о дате и времени создания сайта (на английском языке).

Код: выделить все
<Meta Name="Date" Content="месяц, число, год и время через пробел">


Пример использования:

Код: выделить все
<Meta Name="Data" Content="May 28 1999 15:34 Am">



Аватар пользователя
 
Сообщений: 52
Зарегистрирован: 01 апр 2013, 10:31

Таблицы в HTML

Сообщение Еремин » 22 фев 2014, 21:19

Используя таблицы, можно создавать такие эффекты, как верстка в несколько колонок, применение эффектов состыковки картинки и фона, тонкие линии на всю ширину или высоту странички и т.д.

Примечание: В данном примере создана таблица с фиксированой шириной (WIDTH="200" пикселей), но лучше использовать проценты, т.к. в этом случае размер таблицы будет изменятся в зависимости от размера окна.
Такая таблица реализуется следующим кодом:
Код: выделить все
<TABLE BORDER="2" WIDTH="200"
BGCOLOR="#00FF00">
<TR>
<TD>Ячейка 1</TD>
<TD>Ячейка 2</TD>
</TR>
<TR>
<TD>Ячейка 3</TD>
<TD>Ячейка 4</TD>
</TR>
</TABLE>
 



Таблица начинается открывающимся тэгом <TABLE> и завершается закрывающимся </TABLE>.
тэг <TABLE> может включать следующие аттрибуты:

    WIDTH="n" Определяет ширину таблицы в пикселях или процентах, по умолчанию ширина таблицы определяется содержимым ячеек.

    BORDER="n" Устанавливает толщину рамки. По умолчанию n=0 - таблица рисуется без рамки.

    BORDERCOLOR="#FFFFFF" Устанавливает цвет окантовки, где #FFFFFF (белый) - шестнадцатиричное значение цвета.

    BGCOLOR="#FFFFFF" Устанавливает цвет фона для всей таблицы, где #FFFFFF - шестнадцатиричное число.

    BACKGROUND="image.gif" Заполняет фон таблицы изображением.

    CELLSPACING="n" Определяет расстояние между рамками ячеек таблицы в пикселях.

    CELLPADDING="n" Определяет расстояние в пикселях между рамкой ячейки и текстом.

    ALIGN=LEFT Определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения аттрибута: LEFT (слева), CENTER (по центру страницы) и RIGHT (справа).

    FRAME="значение" Управляет внешней окантовкой таблицы, может принимать следующие значения:
    VOID - окантовки нет (значение по умолчанию).
    ABOVE - только граница сверху.
    BELOW - только граница снизу.
    HSIDES - границы сверху и снизу.
    VSIDES - только границы слева и справа.
    LHS - только левая граница.
    RHS - только правая граница.
    BOX - рисуются все четыре стороны.
    BORDER - также все четыре стороны.

    RULES="n" Управляет линиями, разделяющими ячейки таблицы. Возможные значения (n):
    NONE - нет линий (значение по умолчанию).
    GROUPS - линии будут только между группами рядов.
    ROWS - только между рядами.
    COLS - только между колонками.
    ALL - между всеми рядами и колонками.


Таблица может включать заголовок, который распологается между тэгами <CAPTION></CAPTION>. Он должен быть непосредственно после тэга <TITLE>. К заголовку возможно применение аттрибута ALIGN, определяющего его положение относительно таблицы:

    TOP - значение по умолчанию, заголовок над таблицей по центру.
    LEFT - заголовок над таблицей слева.
    RIGHT - заголовок над таблицей справа.
    BOTTOM - заголовок под таблицей по центру.

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

Следующие атрибуты могут применятся для строк и ячейек.

    ALIGN=LEFT Устанавливает горизонтальное выравнивание текста в ячейках строки. Может принимать значение LEFT (выравнивание влево), CENTER (выравнивание по центру) и RIGHT (вправо).

    VALIGN=CENTER Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: TOP (выравнивание по верхнему краю), CENTER (выравнивание по центру - это значение принимается по умолчанию), BOTTOM (по нижнему краю).

    BGCOLOR="#FFFFFF" Устанавливает цвет фона строки или ячейки.

    BACKGROUND="image.gif" Заполняет фон строки или ячейки изображением.

Следующие атрибуты могут применятся только для ячейек.

    WIDTH="n" Определяет ширину ячейки в n пикселях.

    HEIGHT="n" Определяет высоту ячейки в n пикселях.

    COLSPAN="n" Растягивание ячейки по горизонтали. Например, <TD COLSPAN="2"> означает, что ячейка будет растянута на 2 колонки.

    ROWSPAN="n" Растягивание ячейки по строке. Например, <TD ROWSPAN="2" означает, что ячейка будет растянута на две строки таблицы.

    NOWRAP Присутствие этого аттрибута показывает, что текст должен размещаться в одну строку

    BACKGROUND="image.gif" Заполняет фон ячейки изображением.




Кроме этого, любая ячейка таблицы может быть определена не тэгами <TD></TD>, а тэгами <TH></TH> - Table Header (заголовок таблицы). В принципе, это обычная ячейка, но текст внутри этих тэгов будет выделен полужирным шрифтом и отцентрирован.

Если ячейка пустая, то вокруг нее рамка не рисуется. Если рамка все же нужна вокруг пустой ячейки, то в нее надо ввести символьный объект &nbsp; (non-breaking space - неразрывающий пробел). Ячейка по-прежнему будет пуста, а рамка вокруг нее будет (&nbsp; - обязательно должен набираться строчными буквами и закрыватся точкой с запятой).

И еще - имейте ввиду, что тэги, устанавливающие шрифт (<B>, <I>, <FONT SIZE="n", FONT COLOR="#FFFFFF"), необходимо повторять для каждой ячейки.



Аватар пользователя
 
Сообщений: 52
Зарегистрирован: 01 апр 2013, 10:31

Списки и нумерованные списки в HTML

Сообщение Еремин » 22 фев 2014, 21:24

Пронумерованные списки:
В данном случае Обозреватель автоматически будет проставлять числа перед каждым элементом списка. Начинается пронумерованный список с тэга <OL> и завершается тэгом </OL>. Например:

Код: выделить все
<OL>
<LI> Один
<LI> Два
<LI> Три
<LI> Четыре
<LI> Пять
</OL> Один


Тэг <OL> может иметь следующие параметры:

    TYPE - вид счетчика:
    A - большие латинские буквы
    a - маленькие латинские буквы
    I - большие римские цифры
    i - маленькие римские цифры
    1 - обычные цифры

START - устанавливает число, с которого будет начинатся отсчет.

Следующий пример отображает список, пронумерованный большими латинскими буквами и начинающийся с восьмой цифры:

Код: выделить все
<OL TYPE="I" START="8">
<LI> Восемь
<LI> Девять
<LI> Десять
<LI> Одиннадцать
<LI> Двенадцать
</OL> Восемь





Непронумерованные списки:
Для непронумерованных списков Обозреватель обычно использует маркеры для пометки элемента списка. Вид маркера, как правило, настраивает пользователь Обозревателя.

Непронумерованный список начинается открывающимся тэгом <UL> и завершается тэгом </UL>. Каждый элемент списка начинается с тэга <LI>. Например:

Код: выделить все
<UL>
<LI> Один
<LI> Два
<LI> Три
<LI> Четыре
<LI> Пять
</UL> Один



Тэг <UL> может включать параметр TYPE со значениями disc, circle, square.

Код: выделить все
<UL TYPE=disc><LI> disc </UL> disc
 
<UL TYPE=circle><LI> circle </UL> circle
 
<UL TYPE=square><LI> square </UL> square


Данные значения - это внешний вид маркера, который по умолчанию ставится в виде диска, т.е. disc.

Списки определений:
Списки определений имеют следующий вид:

Код: выделить все
<DL>
<DT> Термин
<DD> Определение термина
<DD> Определение термина
<DD> Определение термина
<DD> Определение термина
</DL> Термин



С элементом DL можно использовать атрибут COMPACT для установки более компактного размещения пунктов списка.

Код: выделить все
<DL COMPACT>


Именно так используется данный атрибут - никакие числовые значения ему не присваиваются.



Аватар пользователя
 
Сообщений: 52
Зарегистрирован: 01 апр 2013, 10:31

Формы в HTML

Сообщение Еремин » 22 фев 2014, 21:28

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

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

Формы размещаются между тэгами <FORM></FORM>. HTML-документ может содержать в себе несколько форм, но они не должны находиться одна внутри другой. тэг <FORM> может содержать следующие атрибуты:

    ACTION Обязательный атрибут. Определяет, где находится обработчик формы.

    METHOD Определяет, каким образом данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET. Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET.

    ENCTYPE Определяет, каким образом данные из формы будут закодированы для передачи обработчику.
Для внесения информации пользователем в форму используется элемент <INPUT> Это и есть поля, в которые пользователь вводит информацию. Каждый элемент <INPUT> включает атрибут NAME=имя, определяющий имя данного поля (идентификатор поля). В таблице представлены основные типы, применяемых элементов <INPUT>:

TYPE=text Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE=число (ширина окна ввода в символах) и MAXLENGTH=число (максимально допустимая длина вводимой строки в символах):
Код: выделить все
<INPUT TYPE=text SIZE=20 NAME=User VALUE="LENIN INC">


Определяет окно шириной 20 символов для ввода текста. По умолчанию в окне находится текст LENIN INC, который пользователь может изменить.

TYPE=password Определяет окно для ввода пароля. Абсолютно аналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*):
Код: выделить все
<INPUT TYPE=password NAME=PW SIZE=20 MAXLENGTH=10>


Определяет окно шириной 20 символов для ввода пароля. Максимально допустимая длина пароля — 10 символов.

TYPE=radio Определяет радиокнопку. Может содержать дополнительный атрибут CHECKED (показывает, что кнопка отмечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка:
Код: выделить все
<INPUT TYPE=radio NAME=Question VALUE="Yes" CHECKED> Да
<INPUT TYPE=radio NAME=Question VALUE="No"> Нет
<INPUT TYPE=radio NAME=Question VALUE="Possible"> Возможно


    Да
    Нет
    Возможно

Определяет группу из трех радиокнопок, подписанных Yes, No и Possible. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная Question со значением Yes. Если пользователь отметит другую кнопку, обработчику будет передана переменная Question со значением No или Possible.

TYPE=checkbox Определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут CHECKED (показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов:

Код: выделить все
<INPUT TYPE=checkbox NAME=Comp VALUE="CPU"> Процессоры
<INPUT TYPE=checkbox NAME=Comp VALUE="Video" CHECKED> Видеоадаптеры
<INPUT TYPE=checkbox NAME=Comp VALUE="Scan"> Сканеры
<INPUT TYPE=checkbox NAME=Comp VALUE="Modem" CHECKED> Модемы


    Процессоры
    Видеоадаптеры
    Сканеры
    Модемы

Определяет группу из четырех квадратов. Первоначально помечены второй и четвертый квадраты. Если пользователь не произведет изменений, обработчику будут переданы две переменные: Comp=Video и Comp=Modem.

TYPE=hidden Определяет скрытый элемент данных, который не виден пользователю при заполнении формы и передается обработчику без изменений. Такой элемент иногда полезно иметь в форме, которая время от времени подвергается переработке, чтобы обработчик мог знать, с какой версией формы он имеет дело.
Код: выделить все
<INPUT TYPE=hidden NAME=version VALUE="1.1">


Определяет скрытую переменную version, которая передается обработчику со значением 1.1.


TYPE=submit Определяет кнопку, при нажатии на которую запускается процесс передачи данных из формы обработчику:
Код: выделить все
<INPUT TYPE=submit VALUE="Отправить">


TYPE=reset Определяет кнопку, при нажатии на которую очищаються поля формы. Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа reset может и не иметь атрибута name:
Код: выделить все
<INPUT TYPE=reset VALUE=" Сброс ">


Формы могут содержать поля для ввода большого текста <TEXTAREA>:

Код: выделить все
<TEXTAREA NAME=address ROWS=5 COLS=50> Наберите здесь сообщение</TEXTAREA>


Наберите здесь сообщение

Атрибут NAME определяет имя, под которым содержимое окна будет передано обработчику. Атрибут ROWS устанавливает высоту окна в строках. Атрибут COLS устанавливает ширину окна в символах. Текст, размещенный между тэгами <TEXTAREA></TEXTAREA>, представляет собой содержимое окна по умолчанию. Пользователь может его отредактировать или просто стереть.

Кроме всего этого формы могут содержать меню выбора, которое начинается открывающимся тэгом <SELECT> (содержит обязательный атрибут NAME, определяющий имя меню) и завершается закрывающимся </SELECT>. Между ними находятся тэги <OPTION>, определяющие элемент меню. Обязательный атрибут VALUE устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. тэг <OPTION> может включать атрибут selected, показывающий, что данный элемент выбран/отмечен по умолчанию.

Код: выделить все
<SELECT NAME="имя">
<OPTION VALUE="option_1" selected>текст 1
<OPTION VALUE="option_2">текст 2
<OPTION VALUE="option_n">текст n
</SELECT>  текст 1текст 2текст n


Тэг <SELECT> может также содержать атрибут MULTIPLE, присутствие которого показывает, что из меню можно выбрать несколько элементов. Большинство Обозревателей показывают меню <SELECT MULTIPLE> в виде окна, в котором находятся элементы меню. Высоту окна в строках можно задать атрибутом SIZE=число.

Код: выделить все
<SELECT MULTIPLE SIZE=3 NAME="имя">
<OPTION VALUE="option_1" selected>текст 1
<OPTION VALUE="option_2">текст 2
<OPTION VALUE="option_n">текст n
</SELECT>



Аватар пользователя
 
Сообщений: 52
Зарегистрирован: 01 апр 2013, 10:31

Фреймы в HTML

Сообщение Еремин » 22 фев 2014, 21:32

Фреймы в HTML

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

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

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

Создадим, для лучшего понимания, пару простых страничек с фреймами, чтобы стало понятно, каково строение НТМL-страницы с фреймами и для чего нужны основные тэги и атрибуты:

Код: выделить все
<!--Файл Index.htm-->
<HTML>
<HEAD>
<TITLE>Фреймы</TITLE>
</HEAD>
<FRAMESET COLS="20%, 75%">
<FRAME SRC="menu.htm" NAME="main">
<FRAME SRC="base.htm" NAME="bases">
</FRAMESET>


Код: выделить все
<NOFRAMES>
Установите себе браузер, который поддерживает фреймы!
</NOFRAMES>
</HTML>


В результате мы получим экран, разделенный на два окна. Левое окно занимает 20 процентов экрана и содержит страницу с названием menu.htm. Окно справа займет 75 процентов и отобразит файл base.htm. Пока у нас их нет, то при запуске index.htm Вы увидите только страницу с двумя пустыми фреймами. Заметьте, что правую страницу мы назвали bases (это важно). К тому же, как Вы успели заметить, наш файл index.htm не имеет тела <BODY>. Фреймовая структура находится между открывающим тэгом <FRAMESET> и закрывающим </FRAMESET>. Между тэгами <NOFRAMES></NOFRAMES> находится текст, который будет отображен пользователю, если его браузер не поддерживает фреймы. Имейте в виду, что поддерживающий фреймы броузер проигнорирует все, что находится между тэгами <NOFRAMES> и </NOFRAMES>. И наоборот, не поддерживающий фреймы Обозреватель проигнорирует все, что находится между тэгами <FRAMESET> и </FRAMESET>. Код без фреймов можно поместить и в начало, и в конец страницы.

Теперь приступим к созданию меню - menu.htm:

Код: выделить все
<!--Файл menu.htm-->
<HTML>
<HEAD>
<!-Здесь мы определяем базовый элемент: присваиваем методу target значение bases. А это означает, что ссылки, находящиеся в этом документе должны открываться в окне, которое имеет имя bases. Данное окно расположено у нас в правой части фрейма.-->
<base target="bases">
<TITLE>Меню</TITLE>
</HEAD>
<BODY>
<H5 ALIGN="left">Наше меню:</H5>
<a href="base.htm">Главная</a><p>
<a href="http://lenininc.narod.ru/">LENIN INC</a><br>
<a href="http://www.listsoft.ru/">ListSoft</a><br>
<a href="http://www.msdn.microsoft.com/">Microsoft MSDN</a>

</BODY>
</HTML>




Нам осталось создать файл base.htm, который может содержать любой текст, например:

Код: выделить все
<!--Файл base.htm-->
<HTML>
<HEAD>
<TITLE>Главная страница</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">Новости сайта:</H1>
Ничего нового...

</BODY>
</HTML>



Теперь давайте подробно рассмотрим тэги <FRAMESET> и <FRAME>.
В тэге <FRAMESET> задается количество рядов или столбцов ROWS и COLS соответственно, а также их размеры и расположение. Существует три способа задания их размера:

по пикселям - просто напишите высоту или ширину в пикселах.

процентами - пишите сколько процентов от окна браузера вы хотите отдать фрейму и после цифр ставите знак % Также позаботьтесь чтобы все ваши проценты в суме составляли 100%.

звездочка - все оставшееся место в окне равняется значку *. Например вы можете написать 20%,20%,60% или 20%,20%,* и никакой разницы не будет.

В этом же тэге можно задать толщину разграничительной линии и окаймляющей рамки командами FRAMEBORDER="X" и BORDER="Y" где X и Y толщина в пикселях.

Синтаксис:

Код: выделить все
<FRAMESET COLS="величины" ROWS="величины">


В тэге <FRAME> задаются атрибуты для каждого фрейма персонально. Команда SRC задает имя файла который загрузится в этом фрейме. Команда NAME задает имя данного фрейма. Имя необходимо для того чтобы в последствии указать к какому фрейму использовать ссылку. Также в этом тэге можно задать величину граници фрейма за которую ничего кроме фона не может заходить. Это делается командами MARGINWIDTH="X" и MARGINHEIGHT="Y", где X и Y величина в пикселях. Существует иногда очень нужный атрибут SCROLLING, который позволяет задавать наличие полос прокрутки у фрэйма. Может иметь значения: YES, NO или AUTO. И конечно же следует упомянуть о атрибуте NORESIZE. Он позволяет создавать фрэймы без возможности изменения размеров. По умолчанию, размер фрэйма можно изменить при помощи мыши так же просто, как и размер окна Windows. NORESIZE отменяет данную возможность.

Синтаксис:

Код: выделить все
<FRAME SRC="URL" NAME="имя фрейма" MARGINWIDTH="величина" MARGINHEIGHT="величина" SCROLLING="yes|no|auto" NORESIZE>


Вот несколько примеров создания фреймов:

Код: выделить все
 <FRAMESET cols="*,140">
<FRAME SRC="homepage.htm" NAME="frame1">
<FRAME SRC="menu.htm" NAME="frame2">
</FRAMESET>



Код: выделить все
 <FRAMESET cols="100,*">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>



Код: выделить все
 <FRAMESET rows="100,*">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>



Код: выделить все
 <FRAMESET rows="*,60">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>



Код: выделить все
 <FRAMESET rows="*,60">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET cols="45%,55%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
</FRAMESET>
</FRAMESET>



Код: выделить все
 <FRAMESET cols="*,55%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET rows="15%,15%,70%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
<FRAME SRC="menu3.htm" NAME="Frame4">
</FRAMESET>
</FRAMESET>



Код: выделить все
 <FRAMESET cols="50%,50%">
<FRAMESET rows="50%,50%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="homepage2.htm" NAME="Frame2">
</FRAMESET>
<FRAMESET rows="50%,50%">
<FRAME SRC="menu.htm" NAME="Frame3">
<FRAME SRC="menu2.htm" NAME="Frame4">
</FRAMESET>
</FRAMESET>




Вернуться в WEB технологии, дизайн, сайтостроение, SEO

Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1