Народ.Ру: Новая страница

Создайте страничку сами, без всяких шаблонов

Словарь по HTML для тех, кто собирается сделать свою первую страничку.

Создание странички:14.02.2004г.

HTML-документ (страничка) - документ, написанный на языке разметки гипертекста (HTML). Заключается между флагами <HTML> и </HTML>.

Web-сайт, Web-сервер - цепочка логически связанных документов, написанных на языке HTML.

Значения флагов разметки документа

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

Основные флаги разметки

<HEAD> и </HEAD>. Между этими флагами располагается информация о документе.
Немного ума, и фантазии и Ваш первый сайт будет неотразим.
<html>
<head>
<meta name="keywords" content="ключевые слова, через запятую.">
<meta name="description" content="Моя первая страничка">
<meta name="robots" content="ALL">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Ваша личная страничка</title>
</head>
<style fprolloverstyle>A:hover {color: #FF0000; text-decoration: overline; font-weight: bold}
</style>
<body>
<h1 align=center><font color="#FF6699">Добро пожаловать!!!</font></h1>
<hr>
<center><font color="#006699">Основное содержание Вашей страницы.</font></center>
<hr>
<font color="#CC6600">
<address>
Последнее обновление выполнено 14 февраля 2004 г.
</address>
</font>
<a href="mailto:zdvika@narod.ru">Присылайте Ваши отзывы и предложения.</a>
</body>
</html>
<TITLE> и </TITLE>. В эих флагах заключается название странички, которое будет выведено в рамке окна программы просмотра.
<BODY> и </BODY>. "Тело" документа (текст, графика и т.д.) располагается между этими двумя флагами.

Параметры флага <BODY>:
<body topmargin="0" leftmargin="0" rightmargin="0" >Здесь можно задать параметры
отступа на экране: сверху-topmargin="0", слева- leftmargin="0", справа-rightmargin="0"
BGCOLOR - цвет фона (<BODY BGCOLOR ="#FFFFFF">)
BACKGROUND - "обои" или бэкграунд
TEXT - цвет текста
LINK - цвет гипертекстовой связи (ссылки)
VLINK - цвет ссылки, уже посещенной в прошлом
ALINK - цвет активной сылки Флаги, служащие для форматирования текста

<SPAN></SPAN> пример>>
<p><span style="position: absolute; left: 415; top: 112">
<img border="0" src="file.jpg" width="48" height="78"></span></p>
<DIV></DIV>пример>>
<p><div style="width: 53; height: 19; position: absolute; left: 495; top:146">Вика</div></p>
НАГЛЯДНЫЙ ПРИМЕР,ПОПРОБУЙТЕ И У ВАС ПОЛУЧИТСЯ Между этими двумя флагами можно поместить текст, или графику а потом
переташить в любое место на экране, или моленькое фото поставить на большое.
<<ПРИМЕР:
<P> и </P> Флаги, служащие для выделения абзацев. Новый абзац всегда отделяется от предыдущего пустой строкой.
<BR> Флаг, служащий для переноса текста на другую строку. Может также служить для отделения графики от текста на интервал.
<HR> Флаг, служащий для логического разделения текста горизонтальной линией.
<PRE> и </PRE> Между этими флагами располагается предварительно отформатированный текст. На экран он выводится шрифтом типа "курьер".

Параметры выравнивания

Используются в <P> и <H*>
ALIGN=LEFT - выравнивание по левому полю
ALIGN=RIGHT - выравнивание по правому полю
ALIGN=CENTER - выравнивание по центру

Флаги выравнивания

<LEFT> и </LEFT> - выравнивание по левому полю
<RIGHT> и </RIGHT> - выравнивание по правому полю
<CENTER> и </CENTER> - выравнивание по центру

Заголовки, служащие для выделения логических частей текста

<H1> и </H1> Заголовок первого уровня.
<H2> и </H2> Заголовок второго уровня.
<H3> и </H3> Заголовок третьего уровня.
<H4> и </H4> Заголовок четвертого уровня.
<H5> и </H5> Заголовок пятого уровня.
<H6> и </H6> Заголовок шестого уровня.

Флаги для выделения текста и шрифта

<B> и </B> Флаги для выделения текста (слов, букв) жирным шрифтом.
<I> и </I> Флаги для выделения текста (слов, букв) курсивным шрифтом, типа Italic.
<U> и </U> Текст, расположенный между двумя этими флагами, будет подчеркнут.
<BLINK> и </BLINK> Текст, расположенный между двумя этими флагами, будет мигать.
<FONT SIZE=+n> и </FONT>
<FONT SIZE=-n> и </FONT> Флаги для изменения размера шрифта.
<FONT COLOR="#0000FF> и </FONT> Флаги для изменения цвета шрифта.

Флаги для формирования списков

<OL> и </OL> Флаги, показывающие начало и конец нумерованного списка
<UL> и </UL> Флаги, показывающие начало и конец маркированного списка.
<LI> Элемент списка

<DL> и </DL> Флаги, показывающие начало и конец глоссария.
<DT> Термин глоссария, располагается без отступа от левого поля страницы.
<DD> Описание термина, располагается с отступом от левого поля страницы.

Флаги-команды для вставки в текст объектов нетекстовой информации

<IMG SRC ="file.gif"> или <IMG SRC =" file.jpg"> - команда для вставки графического изображения
<IMG SRC =" file.wav"> - команда для вставки звукового фрагмента
<IMG SRC =" file.avi"> - команда для вставки видео фрагмента

Параметры графического изображения

WIDHT - ширина картинки в пикселях
HEIGHT- высота картинки в пикселях
ALIGN - выравнивание (ALIGN=LEFT - выравнивание по левому полю, ALIGN=RIGHT - по правому полю, ALIGN=TOP - по верхней границе,
ALIGN=BOTTOM - по нижней границе, ALIGN=MIDDLE или CENTER - по центру)
HSPACE - горизонтальный отступ от графического изображения
VSPACE - вертикальный отступ
ALT - альтернативный текст, служит для обозначения изображения title="текст"> Пример>>- Создадим страничку без шаблонов, наведите курсор на этот текст.

Команды, служащие для гиперсвязи с другими HTML-документами и рессурсами Интернет

<A HREF="fail.htm"> и </A> или <A HREF="http://www.ru"> и </A> - гиперсвязи
<ADDRESS><A HREF=mailto:person@firm.ru> person@firm.ru</ADDRESS> - гиперсвязь с адресом электронной почты

Таблицы

Таблица - сетка для показа данных в строках и столбцах, а также средство для форматирования текста

<TABLE> и </TABLE> Флаги для вставки таблицы в HTML документ
Параметры флага <TABLE>
BGCOLOR - цвет фона
BORDER - ширина бордюра
WIDHT - ширина таблицы

Флаги разметки таблицы

<CAPTION> и </CAPTION> - название таблицы, имеет параметр ALIGN=TOP - выравнивание над таблицей и ALIGN=BOTTOM - под таблицей.
<TR> и </TR> Строчка таблицы. Может иметь параметры BGCOLOR - цвет фона внутри строки; ALIGN=LEFT, RIGHT, CENTER - выравнивание внутри строки; VALIGN=TOP, BOTTOM, MIDDLE - вертикальное выравнивание внутри строки таблицы.
<TD> и </TD> Столбец таблицы. Может иметь параметры BGCOLOR - цвет фона под столбцом; ALIGN=LEFT, RIGHT, CENTER - выравнивание внутри столбца; VALIGN=TOP, BOTTOM, MIDDLE - вертикальное выравнивание; COLSPAN растягивание клетки на несколько столбцов, ROWSPAN - растягивание клетки на несколько строк.
<TH> и </TH> Заголовок столбца. Может иметь параметры BGCOLOR - цвет фона под названием;
ALIGN=LEFT, RIGHT, CENTER - выравнивание; VALIGN=TOP, BOTTOM, MIDDLE - вертикальное выравнивание;
COLSPAN, ROWSPAN - растягивание клетки на несколько столбцов или строк; WIDHT - ширина названия.

Рамки-фреймы

Рамки-фреймы - средство для разделения экрана на несколько областей, в каждой из которых отображается содержимое отдельной Web-странички или даже целого Web-сайта.
<FRAMESET> и </FRAMESET> Флаги для создания рамки

Параметры флага <FRAMESET>

COLS - подразделяют экран на опредленное количество колонок (вертикальных)
ROWS - подразделяют экран на опредленное количество колонок (горизонтальных)
BORDCOLOR - цвет рамки
BORDER - ширина бордюра
FRAMEBORDER - граница рамки (FRAMEBORDER=YES - есть граница, FRAMEBORDER=NO - нет границы,
FRAMESPACING=n - ширина границы)

<FRAME> Флаг для описания рамки (<FRAME SRC="file.htm">).

Параметры флага <FRAME>

SCROLING - параметр для регулировки полосы прокрутки:
SCROLING=YES - полоса прокрутки будет всегда
SCROLING=NO - полосы прокрутки не будет
SCROLING=AUTO - полоса прокрутки появляется только в случае необходимости
MARGINWIDHT и MARGINHEIGHT - параметры, которые управляют отступом внутри рамок, служат для выравнивания графического изображения внутри рамки
NORESIZE - параметр, указвающий на то, что размер рамки-фрейма никогда не будет меняться.

A link to <A HREF="file.htm" TARGET="frame2"> file.htm</A> - Связь между фреймами
TARGET - атрибут связи между фреймами. Имеет несколько значений:
_BLANK загружает содержимое страницы, заданной ссылкой, в новое пустое окно.
_SELF содержимое страницы, заданной ссылкой, в окно, которое содержит ссылку.
_PARENT загружает содержимое страницы, заданной ссылкой, в окно, являющееся непосредственным владельцем набора фреймов.
_TOP содержимое страницы, заданной ссылкой, в окно, игнорируя используемые фреймы. Пример- <base target="_blank">Новое окно

Обработка браузеров, не поддерживающих фреймы:
<FRAMESET>
...Здесь располагаются фреймы
</FRAMESET>
<NOFRAMES>
<BODY>
...Здесь располагается текст без фреймов
<BODY>
</NOFRAMES>

В секции, предназначенной для тех пользователей, которые "не видят" рамки, можно расположить какой-нибудь пояснительный текст.

Бегущая строка

<MARQUEE>ТЕКСТ</MARQUEE> - Флаг, создающий бегущую строку
<MARQUEE DIRECTION=left>TEKCT</MARQUEE> - Если бегущую строку нужно направить справа налево
<MARQUEE DIRECTION=right>TEKCT</MARQUEE> - движение слева направо.
scroll - стандартное движение от правого края к левому
slide - надпись один раз пробегает от правого края к левому, где и остается.
alternate - движение от правого края страницы к левому и обратно. Бесконечный цикл.
<MARQUEE LOOP=n BEHAVIOR=scroll>TEKCT</MARQUEE> - Ограничение числа циклов. Значение n оператора LOOP указывает число повторений цикла.
<MARQUEE WIDHT=n>TEKCT</MARQUEE> - указать ширину участка, занимаемого бегущей строкой, где n - ширина той части страницы, на которой расположена бегущая строка. Значение n указывается как в пикселях, так и в процентах от общей ширины видимой части страницы.
<MARQUEE scrollamount=n>TEKCT</MARQUEE> - Регулировка движения надписи по экрану. Здесь n - число пикселей.
<MARQUEE scrolldelay=t>TEKCT</MARQUEE> В данном случае переменная величина - время t - измеряется в миллисекундах. Метод задания скорости состоит в указании времени, спустя которое текст будет перерисован на экране заново.
<FONTSIZE=n><MARQUEE> ТЕКСТ</MARQUEE></FONT> - возможность указывать величину шрифта текста в строке.
<MARQUEE BGCOLOR=n>ВАШ ТЕКСТ </MARQUEE> - окрасить поверхность бегущей строки в какой-либо цвет, где n, как это бывало и раньше, можно указать в вид шестнадцатеричного числа либо написав его название
<MARQUEE><img border="0" src="file.gif" width="15" height="15">Здесь будет Ваш текст <img src="file.GIF" width="68" height="50"></MARQUEE> ПРИМЕР БЕГУЩЕЙ СТРОКИ

Бегущая строка написанная на "JavaScript". Пример:>>

<script language="JavaScript">
var line="Ваш текст ";
var speed=150;
var i=0;
function m_line() {
if(i++<line.length) {
document.cit.forum.value=line.substring(0,i);
}
else{
document.cit.forum.value=" ";
i=0;
}
setTimeout('m_line()',speed);
}
</script>
<form name=cit>
<input type=text size=35 name=forum>
</form>
<script language="JavaScript">
m_line();
</script>

Музон <<Пример
<<В этот Script можно вставить несколько музыкальных композиций. При новой загрузки странички будет играть новая мелодия

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

Viktoria\Moscow-2004