|
EURO Ltd 
|
STAR|
|
HTML-СПРАВОЧНИК
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
<дескриптор></дескриптор>
<A></A>
Пример
Внутренние сcылки (внутри документа)
Ссылка на закладку в другом документе
<APPLET></APPLET>
<APPLET CODE="***"> (обязательный атрибут, указывающий Java-class)
<br>
<Blockquote> </Blockquote>
<center></center>
<DEL></DEL>
<DIV></DIV>
Пример:
Результат
<DL></DL>
<EM></EM>
<FONT> </FONT>
<FONT COLOR="FF0000">выбор цвета</FONT>
<FONT FACE="ARIAL NARROW">выбор шрифта</font>
<Hx></Hx> - заголовок
<FORM></FORM>
Определить форму <FORM ACTION="URL" METHOD=GET|POST></FORM>
Эта почтовая форма позволит вашим посетителям отправлять сообщения непосредственно
<FRAME> и <FRAMESET></FRAMESET>
Дескрипторов <FRAME> должно быть ровно столько,
Документ с фреймами <FRAMESET></FRAMESET> (вместо <BODY>)
Простейший ПРИМЕР
<Noframes></Noframes>
<HR>
<i></i>
<img SRC="имя файла">
Указание размеров изображения ускоряет его загрузку
Cоздание альтернативного текста - очень важный момент!
Изображение заключенное в дескриптор <A> будет иметь ссылку на другой ресурс
По умолчанию броузер пользователя окружает рамкой все изображение, которые
Возможно Вам не нравится, что текст расположен слишком близко к изображению.
Используйте атрибуты VSPACE и HSPACE
Используйте атрибуты VSPACE и HSPACE также для сдвига картинки
<INPUT>
ПРИМЕР-1
Дескриптор - элемент разметки, который имеет всегда такой вид <дескриптор>.
Элемент <дескриптор> служит для включения, а </дескриптор> для выключения
одного и тогоже объекта. Пара дескрипторов называется контейнером.
Не все контейнера нуждаются в дескрипторе выключения.
Абсолютная ссылка
<a HREF="URL">Элемент привязки</a>
Атрибут HREF указывает URL на который делается ссылка
В данном примере Изображение заключенное в дескриптор <A> будет иметь ссылку на указанный ресурс
<A HREF="http://www.eurostar.com.ua/notes.htm">
<IMG SRC="image.gif" ALT="Статьи по HTML, раскрутке сайта, и многое другое"></A>
Пример
<a href="#1">ссылка-1 внутри документа</a>
В данном случае атрибут HREF="#1" указывает ссылку на <A NAME="1">ccылка-1</a>
<A NAME="1"> Здесь ссылка-1</A>
Пример ccылки внутри документа
Пример
<A HREF="html-ex.htm#zakladka">Пример ссылки </A>
Java-программы, которые можно встраивать в WEB-страницы, называются
Java-аплетами. Для того чтобы запустить аплет броузер должен поддерживать
Java. Такими броузерами явл-ся Netscape и Internet Explorer(есть и другие)
Язык Java очень похож на язык C++.
Для того, чтобы использовать Java-аплетами не обязательно уметь
програмировать на Java - многие аплеты свободно доступны в WEB
например здесь
<APPLET PARAM NAME="***"> (Параметры например,background_color или sound_name)
<APPLET CODEBASE="URL"> (указывает каталог в котором хранятся классы апплета)
<APPLET NAME="***"> (для ссылок из других частей страницы)
<APPLET ALT="***">(Альтернативный текст для программ не поддерживающих Java-
альтернативный текст)
<APPLET ALIGN="LEFT|RIGHT|CENTER"> (выравнивание апплета на странице)
<APPLET WIDTH=? HEIGHT=?> (обязательный атрибут указывающий ширину
и высоту в точках, отведенного под апплет пространства HTML страницы)
<APPLET HSPACE=? VSPACE=?> (указывает величину свободного пространства
в точках справа и слева, сверху и снизу от апплета)
Cм. ПРИМЕРЫ ЗДЕСЬ
перенос строки (принудительный) на другую строку
Цитата - выделяется отступом
текст
cлужит для выравнивания блока элементов страницы.
Этот дескриптор поддерживает атрибут ALIGN
ALIGN=Left(по левому краю) ALIGN=Center(по центру) ALIGN=right(по правому краю)
C помощью этого дескриптора можно также использовать различные стили.
<DIV Align=center
STYLE ="Width: 100%; Filter: Shadow(Color=#000080, Direction=45)">
<h2><font color="Blue">HTML-СПРАВОЧНИК</font></h2>
</DIV>
HTML-СПРАВОЧНИК
Cписок определения, его формат напоминает формат словаря: определяемый термин и определение.
Особенно удобно использовать при создании списка элементов с описанием.
В контейнере <DL> дескриптор <DT> отмечает термин , а дескриптор <DD> - определение
<DL>
<DT>Термин
<DD>Определение термина
</DL>
Результат:
Выделение - изображается курсивом
Этот дескриптор управляет внешним видом текста HTML
С помощью атрибутов SIZE, COLOR и FACE можно радикально изменить
внешний вид текста в документах:
ПРИМЕРЫ:
<FONT SIZE=+(-)n></FONT>
этот контейнер для изменения размера шрифта. Размер шрифта указывается в
условных единицах от 1 до 7 или от-2 до +4, обычный соотв. значению 3
текст 1 текст -2
текст 2 текст -1
текст 3(обычный)
текст 4 текст +1
текст 5 текст +2
текст 6 текст +3
текст 7 текст +4
<FONT COLOR="green">выбор цвета</FONT>
<FONT FACE="ARIAL">выбор шрифта</font>
<FONT FACE="HELVETICA">выбор шрифта</font>
<FONT FACE="IMPACT">выбор шрифта</font>
Обязательно используйте эти дескрипторы - поисковики фиксируют их.
<H? ALIGN=LEFT|CENTER|RIGHT></H?>
<h1 ALIGN=CENTER>текст </h1>
<h2 ALIGN=RIGHT>текст </h2>
<h3>текст </h3>
<h4>текст </h4>
<h5>текст </h5>
<h6>текст </h6>
Этот Дескриптор должен быть в начале каждой формы См. <TEXTAREA>
или нижеследующий пример-почтовая форма
Посылка файла <FORM ENCTYPE="multipart/form-data"></FORM>
Поле ввода <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO| IMAGE|HIDDEN|SUBMIT|RESET">
Имя поля <INPUT NAME="***">
Значение поля <INPUT VALUE="***">
Отмечен? <INPUT CHECKED>
Размер поля <INPUT SIZE=?>
Максимальная длина <INPUT MAXLENGTH=?>
Список вариантов <SELECT></SELECT>
Имя списка <SELECT NAME="***"></SELECT>
Число вариантов <SELECT SIZE=?></SELECT>
Маножественний выбор <SELECT MULTIPLE>
Опция <OPTION>
с Вашего сайта. С помощью этой формы можно устраивать всевозможные опросы добавляя
любое количество полей. Можно добавлять и скрытые поля, например для определения
IP адреса посетителя. Для отправки почты используется почтовая программа посетителя.
Конечно подобные формы написанные на Perl намного удобнее,
так как используют для отправки программу сервера. К сожалению большинству это пока
недоступно.
<FORM NAME = "mail_form" ACTION = "mailto:eurotran@selena.net.ua?Subject=Send from Mail Form" METHOD = "POST" ENCTYPE =
"text/plain">
<INPUT TYPE = "hidden" SIZE = 0 NAME = "Host" value="<#echo var="REMOTE_HOST"">
<INPUT TYPE = "hidden" SIZE = 0 NAME = "IP" value="<#echo var="REMOTE_ADDR"">
<table>
<tr>
<td>
Имя:
<td>
<INPUT TYPE = "text" NAME = "Name" size="30">
<TR>
<td>
Тема:
<td>
<INPUT TYPE = "text" NAME = "Subject" size="30">
<tr>
<td>
Город:
<td>
<INPUT TYPE = "text" NAME = "City" size="30">
<tR>
<td>
Ваш сайт:
<td>
<INPUT TYPE = "text" NAME = "Site" size="30" value="http://">
<tr>
<td>
Сообщение:
<td>
<TEXTAREA NAME="Comments" COLS=50 ROWS=6>
</TEXTAREA>
</table>
<CENTER>
<INPUT TYPE = "submit" VALUE = "Отправить">
<INPUT TYPE = "button" VALUE = "Вернуться" onClick="history.back();">
</CENTER>
</FORM>
Результат
Дескриптор <FRAME> определяет отдельный фрейм,
не является контейнером он должен распологаться
в контейнере <FRAMESET>, например
<FRAMESET rows="*, 2*">
<FRAME>
<FRAME>
</FRAMESET>
сколько областей определено в структуре FRAMESET.
В данном примере фреймовая структура содержит 2 строки,
поэтому нужны 2 дескриптора <FRAME>
Дескриптор <FRAME> имеет слд атрибуты:
SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING, NORESIZE, FRAMEBORDER, BORDERCOLOR
Документ <FRAME SRC="URL">
Имя фрейма <FRAME NAME="***"|_blank|_self| _parent|_top>
Ширина границы <FRAME MARGINWIDTH=?> (правая и левая границы)
Высота границы <FRAME MARGINHEIGHT=?> (верхняя и нижняя границы)
Скроллинг? <FRAME SCROLLING="YES|NO|AUTO">
Постоянный размер <FRAME NORESIZE>
Окантовка <FRAME FRAMEBORDER="yes|no">
Цвет окантовки <FRAME BORDERCOLOR="#$$$$$$">
Высота строк <FRAMESET ROWS=,,,></FRAMESET> (точки или %)
Высота строк <FRAMESET ROWS=*></FRAMESET> (* = относительный размер)
Ширина колонок <FRAMESET COLS=,,,></FRAMESET> (точки или %)
Ширина колонок <FRAMESET COLS=*></FRAMESET> (* = относительный размер)
Ширина окантовки <FRAMESET BORDER=?>
Окантовка <FRAMESET FRAMEBORDER="yes|no">
Цвет окантовки <FRAMESET BORDERCOLOR="#$$$$$$">
<html>
<head>
</head>
<frameset cols="*, 2*">
<FRAME src="name1.htm>
<FRAME src="name2.htm>>
</FRAMESET>
<html>
Не все броузеры отображают фреймы, о таких пользователях можно
позаботиться - Контейнер <Noframes></Noframes> обеспечит
альтернативную информацию и выглядит это слд образом
<Noframes>
Вся требуемая информация
</Noframes>
Броузеры поддерживающие фреймы игнорируют содержание этого
контейнера, а остальные броузеры покажут его содержимое
служит для разделения текста горизонтальной линией
<Hr align="right"> (выравнивание center или left)
<Hr width="30%"> (ширина линии в процентах)
<Hr size="6"> (толщина линии)
<Hr NoShade> (отмена объемности)
<Hr color="cc0000"> (цвет линии, только в IE)
<hr align="center" width="30%" size="6" color="cc0000">
Этот контейнер для выделения текста (слов, букв) курсивным шрифтом,
типа Italic
Этот дескриптор, с атрибутом SRC, позволяет разместить изображение в документе.
Атрибут ALIGN - выравнивание текста с изображением в строке.
<IMG SRC="IMAGE.GIF" ALIGN=TOP> - по верхнему краю изображения
<IMG SRC="IMAGE.GIF" ALIGN=BOTTOM> - по нижнему краю изображения
<IMG SRC="IMAGE.GIF" ALIGN=MIDDLE> - выравнивание текста по средней части изображения
<IMG SRC="IMAGE.GIF" ALIGN=LEFT> - текст распологается справа от изображения и ниже
<IMG SRC="IMAGE.GIF" ALIGN=RIGHT>- текст распологается слева от изображения и ниже
Для этого используйте атрибуты HEIGHT и WIDTH -(высота и ширина изображения в пикселях)
<IMG SRC="IMAGE.GIF" HEIGHT=220 WIDTH=140>
Во первых не все пользователи могут просматривать изображения, по разным причинам.
Во вторых - пользователь будет видеть альтернативный текст в процессе загрузки
<IMG SRC="IMAGE.GIF" HEIGHT=220 WIDTH=140 ALT="Изображение обложки моей книги">
и альтернативный текст имеет огромное значение - он описывает другой ресурс, который не
вместился в размеры изображения, но полностью виден при наведении мышки на изображение
<A HREF="http://www.eurostar.com.ua/rassylka/notes.htm"><IMG SRC="image.gif"
ALT="Статьи по HTML, раскрутке сайта, и многое другое"></A>
используются в качестве привязки. вы можете управлять этой рамкой и свободным
пространством вокруг изображения.
<A HREF=""> <IMG SRC="IMAGE.GIF"></A>
<A HREF=""> <IMG SRC="IMAGE.GIF" BORDER=0></A>
<A HREF=""> <IMG SRC="IMAGE.GIF" BORDER=5></A>
<IMG SRC="IMAGE.GIF" ALIGN=LEFT>
текст текст текст
текст текст текст
текст текст текст
текст текст текст
<IMG SRC="IMAGE.GIF" VSPACE=20 HSPACE=20 ALIGN=LEFT>
текст текст текст
текст текст текст
текст текст текст
текст текст текст
текст текст текст
<IMG SRC="IMAGE.GIF" HSPACE=120 VSPACE=10>
Это одиночный дескриптор - не требующий закрытия.
С его помощью осуществляется способы получения информации от пользователя,
включая простые текстовые поля ввода, поля паролей, переключатели, флажки,
а также кнопки подачи запроса и отказа от ввода.
Имеет следующие атрибуты:
NAME - указывает имя поля,обязательный для всех типов вводов, кроме SUBMIT и RESET
SIZE - устанавливает размер поля ввода текста или пароля в символах
MAXLENGTH - устанавливает макс. кол-во символов, вводимых в поле ввода текста или пароля.
VALUE - устанавливает текст по умолчанию для поля ввода текста или пароля. Для флажка
или переключателя он указывает значение возвращаемое серверу в случае выбора флажка
или переключателя
CHECKED - включает флажок или переключатель
TYPE - устанавливает нужный тип поля ввода
<table border=0 align=center>
<tr><td><form>
<input type=button value="зеленый" onClick="document.bgColor='008080'">
<input type=button value="желтый" onClick="document.bgColor='ffff00'">
<input type=button value="синий" onClick="document.bgColor='0000ff'">
<input type=button value="голубой" onClick="document.bgColor='87ceeb'">
<input type=button value="коралловый" onClick="document.bgColor='ff7f50'">
</form>
</table>
Результат
ПРИМЕР-2
<form>
<input type="hidden" name="select value" value>
<div align="center"><center><p><select
Name="sel" Size="1" OnChange="top.location.href = this.options[this.selectedIndex].value;">
<option selected value="#">НАВИГАЦИЯ ПО САЙТУ</option>
<option value="">*****Морской бизнес*****</option>
<option value="http://www.eurostar.com.ua/index.htm">Главная страница</option>
<option value="http://www.eurostar.com.ua/contactru.htm">Наши: адрес, тлф, факс...</option>
<option value="rus.htm">Услуги агентства</option>
<option value="vac.htm">Открытые ВАКАНСИИ для моряков</option>
<option value="http://www.e-mail.com.ua/subscribe/catalog/biz/fleet">Подпишись на Рассылку вакансий</option>
<option value="http://www.eurostar.com.ua/form.doc">Анкета моряка</option>
<option value="http://www.eurostar.com.ua/stcw.htm">Необходимые документы для моряка</option>
<option value="http://www.eurostar.com.ua/seaid.htm">Оформление паспорта моряка</option>
<option value="http://www.eurostar.com.ua/mlink.htm">Морские линки (компании, порты, суда...)</option>
<option value="http://www.eurostar.com.ua/a-z/a-z.htm">Более 1400 морских сокращений</option>
<option value="">*****Для WEB-мастера*****</option>
<option value="http://www.ineedhits.com/free/popularity/">Проверьте популярность Вашего сайте</option>
<option value="http://www.eurostar.com.ua/promotion.htm">РАСКРУТКА.Самые эффективные методы увеличения посещаемости WEB-сайта</option>
<option value="http://www.eurostar.com.ua/rassylka/notes.htm">СТАТЬИ по созданию и ракрутке сайтов</option>
<option value="http://www.eurostar.com.ua/ok.htm">Полезные ссылки, проги, советы, халява</option>
<option value="">*****Разное*****</option>
<option value="http://www.eurostar.com.ua/multipoisk.htm">Мощный поисковик(42 в 1)</option>
<option value="http://www.eurostar.com.ua/search.htm">Обзор поисковиков Украины, России и зарубежья</option>
<option value="http://www.eurostar.com.ua/catalog.htm">Обзор Каталогов/рейтингов Украины и России</option>
<option value="http://www.eurostar.com.ua/bbs.htm">Доски бесплатных объявлений Украины, России, США, Израиля...</option>
<option value="http://www.eurostar.com.ua/yp.htm">Желтые страницы</option>
<option value="http://www.eurostar.com.ua/phfaxfree.htm">Бесплатные звонки и факс в Интернет</option>
<option value="http://www.eurostar.com.ua/phcardfree.htm">Бесплатные телефонные карточки в Интернет</option>
<option value="http://top-halyava.ru/index.php?id=823">Вся халява инета здесь!</option>
</select></p>
</center></div>
</form>
Результат
выравнивание по левому полю
<Marquee></Marquee>
<OL> </OL>
<OL START=Х>
Атрибуты дескриптора <OL>:
<P> </P>
<SUB> </SUB>
<STRONG> </STRONG>
(Тег <Marquee> поддерживается только Internet Explorer)
Пример:
<marquee height="10" width="270" bgcolor="#99CCFF">
height="12" width="230" bgcolor="#00b500"
</marquee>
Результат:
Можно задавать -Behavior, Scrollamount, Direction, loop, hspace, vspace и align
Loop задает сколько раз прокрутится строка
hspace, vspace - отступ по горизонтали и вертикали
Direction - задает направление движения бегущей строки -
direction="left" (right, up, down)-движение влево (вправо, вверх, вниз).
Scrollamount - скорость движения строки, может принимать значения
от 1 до 10. 1 - самое медленное движение, 10 - самое быстрое.
Behavior - поведение строки - behavior="scroll" (slide, alternate).
Scroll - обычная прокрутка (можно не прописывать).
Slide - прокрутка с остановкой, строка пробегает до края и останавливается.
Если одновременно с behavor="slide" употребить параметр loop,
то строка прокрутится установленное количество раз и остановится у края.
Alternate - строка будет двигаться от края к краю.
Нумерованные списки начинаются с 1го дескриптора <LI>
<OL>
<LI> текст
<LI> текст
<LI> текст
</OL>>
Результат:
1. текст
2. текст
3. текст
Нумерация списка начнется с Х
<OL START=10>
<LI> текст
<LI> текст
</OL>>
Результат:
<OL TYPE=A> - устанавливает в качестве номеров прописные буквы
<OL TYPE=a> - устанавливает в качестве номеров строчные буквы
<OL TYPE=I> - устанавливает в качестве номеров римские цифры
выделение абзацев. Новый абзац отделяется от предыдущего пустой строкой.
<P ALIGN=LEFT|CENTER|RIGHT></P>
месяц доход расход прибыль
январь 1000 750 250
февраль 1200 880 320
ИТОГО: 2200 1630 570
Нижний индекс 32
Выделяет очень важные фрагменты.
Рекомендую использовать - поисковики фиксируют внимание на этом контейнере.