Партнерка на США и Канаду по недвижимости, выплаты в крипто
- 30% recurring commission
- Выплаты в USDT
- Вывод каждую неделю
- Комиссия до 5 лет за каждого referral
Файл Right2.htm
<HTML>
<HEAD>
<TITLE>Правый фрейм</title>
</head>
<BODY text="black" bgcolor="pink" link="green" vlink=" purple" alink="red">
<H2>Правый фрейм № 2</h2>
<a href="right1.htm">Предыдущая страница</a>
<hr>
</body>
</html>
Теперь давайте разберем организацию ссылок. Первый файл: Frame1.htm не содержит информации для отображения на странице, но он задает разбиение на фреймы страницы(размеры областей, документы содержания). Здесь важно, чтобы каждый фрейм содержал атрибут name
name=" info01"
Страницы, показываемые внутри фрейма могут быть разными, а имя не меняется и остается постоянным и используется в гиперссылках.
Левый фрейм (файл M1.htm) содержит страницу - меню, с помощью которой можно легко совершать серфинг по странице. Этот фрейм содержит две ссылки, но их может быть гораздо больше. Он более узкий, нежели правый.
Заметьте, что заголовок взят из файла Frame1.htm. Это единственная информация из этого файла, которую мы увидим в окне браузера. А теги TITLE из других страниц скрыты.
В принципе файлы Right1.htm и Right2.htm служат для размещения какой-либо информации. Также в них можно разместить разные ссылки возвращения назад и дальше(для удобства).
В примере вы можете видеть два вида ссылок: в меню и на странице.
Атрибут target нужен для определения окна, в котором откроется объект. Атрибут target имеет несколько значений:
· _parent -заставляет браузер открыть ссылку, заменив содержимое текущего окна, но не фрейма!
· _self - как будто атрибута и нет, то есть страница открывается внутри текущего фрейма;
· _top - то же, что и parent;
· _blank -браузер открывает ссылку в новом окне.
Употребляется атрибут по следующей схеме:
<a target_blank href="ссылка">Текст ссылки</a>
<IFRAME></iframe>
Шаблон для создания такого файла выглядит следующим образом:
<IFRAME src="имя_файла. htm" width="nnn" height="mmm">
<P>Для просмотра этой страницы нужен броузер, поддерживающий фреймы!</p>
<P>Вы можете посмотреть страницу <a href="без_фремов. htm"> без фреймов</a></p>
</iframe>
Этот элемент имеет ряд атрибутов, например height и width, frame, scrolling, target и др. атрибуты фреймов
Допускается использование стандартных атрибутов: id, class, title, longdesc, style, align.
Наверх
Таблицы Стилей
Таблицы стилей(style sheets) являются одной из самых интересных и красивых нововведений HTML 4. Они позволяют изменять свойства разных элементов в соответствии с желаниями разработчика.
Таблицы стилей применяют по принципу:
Элемент. имя_стиля {
свойство1: значение; свойство2: значение; ...
}
В конечном счете мы имеем набор свойств для выбранного элемента. Так мы значительно расширяем возможности HTML. Спецификой применения стилей является то, что при присвоении стиля элементу, выделяется все содержимое начального и конечного тегов! Например, присвоив стиль элементу BODY, он будет распространяться на всю Web - страницу. В соответствии с синтаксисом HTML, автор должен включить в заголовок соответствующее определение:
<META http-equiv="Content-Style-Type" content="text/css">
Таким образом браузер получит информацию о применении стилей
Нужно отметить, что есть другие способы определения свойств элементов, например, JavaScript, VBScript и т. д.
Стили можно применять, как атрибуты, подробнее здесь.
Наверх
<STYLE></style>
Элемент STYLE позволяет задать(изменить) свойства одноименных элементов, например:
<STYLE type="text/css">
H1 {border-width: 1; border: groove; text-aligh: center; color: green}
H2 {color: maroon; font-style: italic}
</style>
Как мы видим, здесь немного расширены возможности элемента заголовков. Для строки H1 {border-width: 1; border: groove; text-align: center; color: green} Ширина рамки, сама рамка, выравнивание текста и цвет текста, соответственно.
Для строки H2 {color: maroon; font-style: italic} выбран цвет заголовка и курсив, соответственно.
Внимание! Если вы решили задать одинаковые значения нескольким элементам сразу, то не надо писать много строк, указывая каждому элементу общие значения, а просто сделайте пробел между элементами; браузер должен понять, что элементы имеют одинаковые атрибуты.
Наверх
КЛАССЫ (CLASS)
Этот элемент позволяет расширить возможности стилей, путем создания собственных имен стилей и последующего присвоения имени какому-либо элементу. Например,
<STYLE type="text/css">
H1.red {color: RGB(215,40,40); text-align: center}
</style>
Здесь мы видим, что буквам придан красивый красный цвет, а текст выровнен по центру.
Применять классы предельно просто:
<H1 class="red">текст абзаца</h1>
Прелестью классов является то, что можно создавать на одной странице несколько различных стилей(форматирований) для одного элемента.
Наверх
Универсальные классы(атрибут ID)
Универсальные классы можно применять тогда, когда требуется создание класса, подходящего многим элементам сразу. Например,
#red {color: RGB(215,40,40); font-weight:bold}
Здесь написан стиль для полужирного начертания букв красивого красного цвета. Кстати, функция RGB незаменима при потребности в очень точном подборе цвета. Применяется этот метод при помощи атрибута ID:
<h2 id="red">Заголовок</h2>
Результатом является заголовок красного цвета полужирного начертания.
Всего должно быть в меру! Обилие стилей ухудшает восприятие, а страница выглядит новогодней ёлкой!
Наверх
<LINK>
Этот элемент используется для подключения отдельных файлов, в которых хранятся стили. Все дело в том, что автор может применять несколько файлов со стилями, которые будут называться каскадными(CSS). Для этого создается файл, в котором прописываются стили в формате универсальных классов
Элемент LINK применяется по типу:
<LINK href="имя_файла. css" rel="stylesheet" type="text/css"> Атрибут REL указывает на то, что это ссылка на каскадные таблицы стилей; про атрибут type вы можете узнать здесь.
Наверх
<DIV></div>
Этот элемент специально предназначен для применения стилей. Специфика этого элемента состоит в указании ячейки, то есть его собственный стиль должен влиять на стили элементов, находящихся внутри DIV. Элемент DIV применяют по принципу:
<HEAD>
<STYLE type="text/css">
DIV. имя {Свойство: значение;...}
</style>
<BODY>
<DIV class="имя">
<H1>Заголовок</h1>
<p>Первый абзац</p>
<p>Второй абзац</p>
</div>
</body>
Наверх
<SPAN></span>
Элемент SPAN, наоборот включают в в состав других элементов.
<HEAD>
<STYLE type="text/css">
SPAN. имя {Свойство: значение;...}
</style>
</HEAD>
<BODY>
<H1>Заголовок</h1>
<p>Первый абзац</p>
<p><span class="имя">Второй абзац</p>
</body>
Наверх
Списки
Списки (list) появились в HTML из-за большой популярности в текстовых редакторах. Главное отличие списка от текста состоит в том, что браузер автоматически нумерует пункты списка. Если список ненумерованный, то программа автоматически ставит маркеры перед пунктами(кружки, прямоугольники и т. д.) результатом является легко читаемый список. Теги в списках можно разделить на две группы: внешние и внутренние. Первые информируют браузер о том, что это список, второй, о конструкции списка. Есть несколько разновидностей списков: ненумерованные и нумерованные, вложенные и т. д..
В принципе использование списков можно легко заменить таблицей, как впрочем и делают большинство Web мастеров.
Наверх
<UL><LI></ul>
Это самый простой вид списка. Его легко представить:
<UL>
<LI>1-й пункт списка
<LI>2-й пункт списка
<LI>3-й пункт списка
</ul>
Элементы UL: начало и конец списка, а LI: обозначение каждого нового пункта. Внешне наш список выглядит так:
- 1-й пункт списка 2-й пункт списка 3-й пункт списка
Наверх
<OL><LI></ol>
Это более сложный вид списка. Его представляют:
<ОL>
<LI>1-й пункт списка
<LI>2-й пункт списка
<LI>3-й пункт списка
</оl>
Элементы ОL: начало и конец списка, а LI: обозначение каждого нового пункта. Внешне наш список выглядит так:
1-й пункт списка 2-й пункт списка 3-й пункт спискаЭтот элемент имеет свои собственные атрибуты:
Значение обязательного атрибута type: | |
Значение | Вывод |
Type 1 | 1,2,3,4,... |
Type i | i, ii, ii, iv,... |
Type I | I, II, III, IV,... |
Type a | a, b,c, d,... |
Type A | A, B,C, D,... |
Для обращения к карте можно использовать элемент OBJECT
<OBJECT data="Имя. gif" type="image/gif" usemap="#Имя карты"></object>
Для составления карт удобней всего пользоваться графическими редакторами для установления координат карты. Координаты должны соответствовать положению курсора на картинке.
Наверх
<APPLET></applet>
Элемент предназначен для вставки программы на Java-языке в броузеры, имеющие java плагины.
<APPLET code="Имя. class" width="число" height="число">Комментарий</applet>
Атрибут code задает имя файла - программы и путь к ней.
Атрибут codebase задает базовое имя файла - программы и путь к ней.
Также этот элемент поддерживает атрибуты alt, name, vspace, hspace и стандартные атрибуты: id, class, title, style.
Наверх
<OBJECT></object>
Простейшее применение этого объекта - размещение рисунка:
<OBJECT data="Имя. gif" type="image/gif"></object>
Также можно использовать этот элемент вместо IFRAME или APPLET:
<OBJECT codetype="application/java" classid="java:идентификатор" width="число" height="число"> Комментарий</object>
Атрибуты, характерные для OBLECT:
· classid="имя объекта" - идентификатор или адрес объекта;
· codebase="URL" - ссылка на базовый URL с объектом;
· data="URL" - URL с местонахождением объекта;
· archive="список адресов" - аналог date, но позволяющий указывать список адресов;
· codetype="тип" - используется только вместе с classid;
· type="тип объекта" - тип объекта;
· declare - объект, обозначенный таким типом загружается, но не выводится на дисплей;
· standby="текст сообщения" - текст, который выводится на экран при загрузке объекта.
Наверх
<PARAM>
Элемент используется внутри APPLET или OBJECT:
<OBJECT classid="Адрес объекта" standby="значение">
<PARAM name="имя параметра" value="Значение параметра" valuetype="Тип параметра">
<PARAM name="имя параметра" value="Значение параметра">
</object>
Или:
<APPLET code="Имя. class" width="число" height="число">
<PARAM name=" имя параметра" value=" Значение параметра">
Комментарий
</applet>
Этот элемент должен обязательно содержать атрибуты name и value="значение"
Атрибут valuetype имеет следующие значения:
· data - параметр передается в качестве строки;
· object - параметр является идентификатором объекта;
· ref - значение параметра является ссылкой(Обязательно надо указать type - тип параметра).
Наверх
Общие атрибуты форм
Формы могут иметь ряд составляющих: поля ввода, кнопки, переключатели и т. д. Для тегов указывают атрибуты, влияющие на их работу.
Большинство элементов принимают определенные значения. Для доступа программ к значениям используют атрибут name. Для задания подписей в поле ввода текста, определение вида переключателей используется атрибут value.
tabindex=номер
Атрибут tabindex определяет последовательность перехода курсора (при нажатии клавиши TAB) от одного поля формы к другой. Соответственно, если атрибут будет tabindex=1, то курсор при открытии броузера установится на элемент, содержащий атрибут с таким значением.
Можно назначить сочетание клавиш быстрого доступа при помощи атрибута accesskey.
accesskey="Клавиша"
При нажатии ALT+клавиша курсор автоматически переместится к полю формы, обозначенному соответствующим атрибутом.
Атрибут disabled делает форму недоступной, то есть элемент нельзя выбрать и изменить. Причем форма не может измениться.
Есть ряд специфических атрибутов-событий:
· onfocus - элемент фокусируется (изменяется);
· onchange - информация элемента изменена;
· onblur - элемент теряет фокус.
Наверх
<ISINDEX>
Этот элемент самый простой среди всех. Он предназначен для ввода текста и генерирования запроса на сервер.
Для подсказки можно добавить аргумент prompt:
<ISINDEX prompt="Строка для ввода текста поиска">
Вот результат:
Строка для ввода текста поиска
Работа этого элемента напрямую связана с элементом BASE. К примеру задан базовый URL:
<BASE href="http://www. название. домен/путь">
Значение атрибута href - это адрес некоторой поисковой системы Интернета. Если пользователь ввел запрос из 3-х слов, то броузер автоматически сгенерирует запрос типа:
http://www. название. домен/?слово1+слово2+слово3
Строка будет отправлена на сервер для активизации поисковой машины. Теоретически метод очень удобен, но на практике не все поисковые машины поддерживают знаки: {?} и {+}. Следовательно, этот способ поиска годится для некоторых поисковых машин.
Стандартные атрибуты: id, class, lang, dir, title, style.
Наверх
<FORM></form>
Этот элемент предназначен для построения сложных форм. После заполнения формы она обрабатывается при помощи CGI программ.
Атрибут action указывает на имя программы:
<FORM action="http://www. название. домен/имя программы" method="post">
Форма
</form>
Можно переслать форму по электронной почте:
<FORM action="mailto:адрес@сервер. домен" method="post">
Форма
</form>
Атрибут method предназначен для назначения протокола пересылки данных на сервер. Протокол GET назначен по умолчанию. Он может не удовлетворять требований разработчика, поэтому применяют протокол POST, который используется чаще.
Атрибут enctype указывает на способ кодирования содержимого формы.
Атрибут accept-charset предназначен для задания списка допустимых кодировок.
accept-charset="список кодировок"
Этот атрибут предназначен для определения типа данных:
accept="список типа данных"
Большинство форм снабжается кнопками, которые очищают (reset) или подтверждают форму(submit) и отправляют на сервер.
Есть 2 атрибута событий, применяемые вместе с программами-сценариями: onsubmit, onreset.
Стандартные атрибуты: id, class, lang, dir, title, style, title и атрибуты событий.
Наверх
<INPUT>
Элемент позволяет создать различные части формы: флажки, переключатели, поля ввода и др.
Этот элемент не имеет конечного тега.
Вид элемента определяет атрибут type:
· type="text" name="inputtext" - поле формы для ввода текста (атрибут value определяет текст по умолчанию внутри поля);
<INPUT type="text" value="введите текст">
· type="password" - создает поле ввода для пароля, информация отображается в виде звездочек;
<INPUT type="text" value="Пароль" name="passwrd">
- введите пароль
· type="checkbox" - создает флажок;
<INPUT type="checkbox" value="1" name="checkbox">
<INPUT type="checkbox" value="2" name="checkbox" checked>
<INPUT type="checkbox" value="3" name="checkbox"> - флажки
· type="radio" - создает один переключатель. Для создания группы переключателей создают несколько элементов INPUT (Имена, помеченные красным цветом должны совпадать!).
<INPUT type="radio" name="switch" value="1">
<INPUT type="radio" name="switch" value="2" checked>
<INPUT type="radio" name="switch" value="3">
- переключатели
· type="button" - создает произвольную кнопку;
<INPUT type="button" value="Кнопка" name="but">
· type="submit" - создает кнопку, которая подтверждает и передает форму на сервер;
<INPUT type="submit" value="Послать">
· type="reset" - создает кнопку, которая очищает форму;
<INPUT type="reset" value="Очистить">
· type="image" - создает кнопку - рисунок. Применяется с атрибутами src, align, которым лучше не пользоваться, так как не все броузеры его поддерживают в такой комбинации;
<INPUT type="image" src="button. gif" name="image">
· type="file" - создает кнопку - выбора файла и его присоединение к форме. Пользователь может вручную ввести имя файла и путь к нему.
<INPUT type="file"name="browser">
· type="hidden" - элемент скрыт от пользователя. Это используют для включения некой информации в форму. По сути это просто имя переменной и ее значение.
<INPUT type="hidden" name="info">
- здесь находится элемент, скрытый от пользователя.
Существует ряд атрибутов, употребление которых просто необходимо для правильной работы и обработки сервером формы.
Атрибут name должен присутствовать во всех элементах INPUT, кроме кнопок подтверждения сброса. Значение этого атрибута - имя поля формы. Благодаря этому атрибуту происходит обработка формы CGI программой на сервере.
Атрибут value задает значение кнопки по умолчанию или надпись на кнопке.
Наличие атрибута checked показывает броузеру, что флажок должен стоять по умолчанию. В флажка может быть выделено произвольное количество, в отличие от переключателей, где должен быть выбран только один элемент.
Aтрибут size задает длину поля ввода текста. Длина задается в символах.
Атрибут maxlength задает: во-первых, максимальное количество символов, которое может быть записано в строке ввода, а во-вторых, может ограничить размер файла, присоединяемого к форме.
Атрибут readonly позволяет создать нередактируемый элемент.
Атрибут usemap используется в картах.
Атрибут accept выше.
Применяются атрибуты accesskey, tabindex, disabled.
Стандартные атрибуты: id, class, lang, dir, title, style, title и атрибуты событий.
При помощи элемента FORM можно заменить ISINDEX:
<FORM action="действие" method="POST">
<P>Строка поиска:<BR>
<INPUT type="text">
</form>
Строка поиска:
Наверх
<LABEL></label>
Этот элемент - контейнер для других элементов:
<LABEL> Адрес: <INPUT type="text" id="adress"></label>
Адрес:
Если элемент LABEL и другой элемент находятся отдельно, то используют атрибут for, значение которого соответствует id другого элемента:
<LABEL for="adress"> Адрес: </label>
<INPUT type="text" id="adress">
Адрес:
Для каждого элемента формы создается свой элемент LABEL. Как правило, удобно использовать таблицы для выравнивания формы.
Стандартные атрибуты: accesskey, id, class, lang, dir, title, style, title и атрибуты событий.
Наверх
Пример формы
<TABLE border="3">
<FORM action="mailto:Имя@сервер. домен" method="POST">
<TR>
<TD><LABEL for="imja">Имя:</label>
<TD><INPUT type="text" id="imja">
<TR>
<TD><LABEL for="familija">Фамилия:</label>
<TD><INPUT type="text" id="familija">
<TR>
<TD><LABEL for="ICQ">ICQ:</label>
<TD><INPUT type="text" id="telephon">
<TR>
<TD>Пол:
<INPUT type="radio" name="gender" value="Male"> М
<INPUT type="radio" name="gender" value="FeMale"> Ж
<TD align="bottom">
<INPUT type="submit" value="Послать" align="bottom">
<INPUT type="reset">
</form>
</table>
Имя: | |
Фамилия: | |
ICQ: | |
Пол: М Ж |
Наверх
<SELECT><OPTION></select>
Эти элементы предназначены для создания списка (SELECT) и пунктов списка (OPTION)
<SELECT>
<OPTION value="1">Первый
<OPTION value="2">Второй
<OPTION value="3">Третий
<OPTION value="4">Четвертый
</select>
|
Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 |
