Учебник html для новичков:

Данное пособие по постоянно обновляется и совершенствуется, поэтому лучше добавьте эту страницу в избранное , что бы всё время быть в курсе последних изменений и тенденций.

Xenus studioподробнее...

Учебник HTML для Чайников.

Правила создания HTML документов

HTML документы записываются в ASCII формате и поэтому могут быть созданы и отредактированы в любом текстовом редакторе. Язык HTML представляет из себя множество команд- тегов, открывающих <...>, и закрывающих </...> действия соответствующие данным командам, т. е. текст заключенный между ними, при выводе на экран с помощью браузера подчиняется правилам свойственным для данных тегов. Некоторые из тегов не требуют закрытия, и прекращают свое действие с появлением аналогичных открывающих команд. (Например строка в списке прерывается там, где дана команда создания следующей строки списка.) Учтите, что "лишний" закрывающий тег не испортит ваших трудов. Браузеры вообще все непонятные для них команды пропускают мимо ушей, что для нас - Чайников весьма важно. Поэтому я, рекомендую вам закрывать теги явным образом - это облегчит чтение ваших документов.
Теги могут быть вложены друг в друга, для придания тексту сразу нескольких свойств. В этом случае, порядок закрытия тегов должен быть строго противоположен порядку их открывания. Например если вы сначала объявили текст жирным шрифтом, а потом еще и курсивом, то закрывать следует сначала внутренний тег (курсив) и только затем болд, а чтобы сделать последнее слово в примере только в италике (без bold) вам придется снова открывать и закрывать тег <I>:
<B>Текст<I> вышеописанного </I></B> <I> примера.</I>
При просмотре в browsers получим:
Текст вышеописанного примера.

НЕ нашли? Не то? Что вы ищете?

Чтобы написать WEB страницу, создайте при помощи блокнота или Worda текстовый файл, назвав его например NewPages. txt и набирайте две первые команды (которые вообще-то нужны только для старых браузеров... но традиции надо чтить): <html> и </html>. Поменяйте расширение файла. txt на. htm и редактируйте пространство между этими двумя метками до полной готовности, не забывая обновлять браузер всякий раз после изменения:

Лично я, делаю это так:

Щелкаю мышью по значку созданной вышеописанным способом WEB-страницы и жду пока открывается Explorer. Ставлю курсор мыши в любую точку открывшейся в Explorere страницы но только не на картинку и щелкаю правую кнопку. В появившемся меню выбираю "просмотр источника". Редактирую код в открывшемся окне текстового редактора. Закрываю редактор. На вопрос о сохранении отвечаю положительно.(В случае работы с Word'oм сохранять нужно как текстовый файл.) Щелкаю в Explorere "обновить".

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

Пишем первую страницу

(Экспресс метод Илоны Давыдововны)

Вам понадобится графический файл в формате JPG, желательно с собственной фотографией (Чему еще посвящять свою первую страницу, как не себе любимому?) Назовите его "Image. jpg". Теперь создайте в блокноте новый документ, например : "MyPage. txt". Впишите в него текст следующего содержания:

<html><body>
<center> <h1> Да будет вечно жить в памяти народной
создатель этой прекрасной страницы, то есть Я! </h1>
<img src="Image. jpg">
</center></body></html>

(Можете даже скопировать и вставить этот текст мышью)

HTML не различает, какими буквами набраны команды языка: <body> равносильно <BODY> или <bOdY> Исключение составляют Специальные символы.


Теперь нужно сохранить файл и поменять расширение с txt на htm (значек при этом должен поменятся на эксплореровский). Теперь можете открывать созданный документ и любоваться работой. Как видите все не так сложно. Если вместо Вашей фотографии на экране нарисован какой-то квадратик с крестиком, значит ваша рожа не влазит в экран :) В этом случае проверьте, чтоб и страница и фотография лежали в одной папке, а имя файла соответствовало ссылке на него, то есть в нашем случае - Image. jpg. Полюбовавшись собой уничтожте данный файл, и начинайте читать дальше. Это было слишком просто, чтобы ставить на этом точку...

"Голова" документа

Для объявления заголовка страницы служат команды:

<HEAD><TITLE> Сказка про белого бычка </TITLE></HEAD>

Заголовок HTML-документа тоже необязательная часть в документе, но кроме отображения в заголовке браузера названия страницы, может включать неограниченное количество очень полезных META-инструкций. Они должны располагаться между метками <head> и <title>. META-инструкция это краткое описание темы документа или-же прямое указание для броузера. Пример:

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"> ( или charset=koi8-r"> ) - инструкция дает указание броузеру интерпретировать документ как HTML-текст в кодировке Windows ( или кои-8).

<META HTTP-EQUIV="Refresh" CONTENT="17; URL=http://www. abcd. ru"> ( или URL=music. mid"> ) - Такая инструкция через 17 секунд начнет загрузку узла с указанным URL ( или начнет воспроизведение файла в звуковом формате, если тот поддерживается броузером.)
Пространство между метками </title> и </head> часто используется для хранения операторов JavaScript и VBScript использующих глобальные переменные и функции.

"Тело" документа

Основной текст страницы находится после необязательного заголовка, между так-же необязательными метками:<BODY>...</BODY>.(Современные браузеры сами распознают где кончается заглавие и начинается тело документа... но мы, будем соблюдать традиции построения web страниц)

К тому-же открывающую метку можно использовать для задания цвета или обоев для страницы : <BODY BGCOLOR="GREEN"> - зеленый цвет страницы; или <body background="Image. gif"> для использования в качестве обоев, фонового рисунка, например с именем Image. gif Кстати двойные кавычки, так-же необязательны для современных браузеров, но их использование в задании значений и адресов, почему-то рекомендуется всеми издателями подобных учебников.

Пример WEB-страницы.

Исходя из вышесказанного, приведу пример минимально допустимого кода для страницы правильно работающей в сети. Скопированный мышью он может служить в качестве стандартной заготовки при создании ваших собственных документов.
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Пример</title> </head><body>
Место для основного кода страницы
</body></html>
Так-же вы можете увидеть пример страницы с включенными в нее часами в виде JavaScript.

Абзацы

В отличие от текстовых документов прерывания строк в HTML-файлах не существенны. При просмотре HTML-источника в текстовом редакторе обрыв строки может происходить в любом месте, но при просмотре в браузере это прерывание будет проигнорировано. Вместо 68 пробелов броузер покажет в тексте только один, так что в этом плане особо можете не напрягаться, если только вы не используете Авторский стиль. Разбиение документа на составные задается при помощи таблиц, меток форматирования: <p> и </p> а также <br> . Обычный текст рекомендуется располагать в абзацах:
<p> текст</p>
В этом случае он будет выделен новой строкой. (Закрывающий тег необязателен. В случае если он пропущен, следующий обзац начнется со следующей открывающей метки <P> )

Огромное значение в HTML имеет возможность выравнивания. Например следующая строка: <P ALIGN="CENTER"> Выравнивание по центру</P> выдаст на экране :

Выравнивание по центру

Для align допустимы значения: "left","center","right". По умолчанию, браузер ровняет все елементы по левому краю. Выравнивание может применятся к тегам: <p>,<table>, а также к картинкам, заглавиям в тексте и отдельным ячейкам таблиц. Так-же в HTML существует специальный тег выравнивания: <center>...</center> . Все что расположенно между этими метками будет выравненно так-же как и по команде <p align="center">
Редактирование текста внутри абзаца может производится с применением Логических и Физических стилей форматирования, причем Физические стили для Чайника как бальзам на душу... Логические же требуют немалого опыта в обращении с различными браузерами, и для данного контингента рекомендованы быть не могут. (Разница-же заключается в том, что при логическом форматировании, Вы сообщаете browsers что желаете выделить участок текста. При этом браузеры разных производителей будут выделять этот текст по своему усмотрению. При физическом форматировании Вы сами задаете стилевое решение шрифта - жирный, наклонный, зачеркнутый и т. д. в этом случае все browsers будут подчиняться Вашим приказаниям.)

Размер шрифта

Для выделения заголовков в тексте существует метка <H1>...</H1>. Где число - размер шрифта от 1 до 6 в порядке убывания.(1- самый крупный) Например заголовок этого параграфа в HTML выглядит так:

<h4>Размер шрифта</h4>

Приведенный тег заголовков выделяет свой текст отступлением строки. Размер шрифта в остальном тексте можно задавать с помощью команд <font size="n"> Значения для n могут лежать в пределах от 1 до 7 по возрастанию размера шрифта (противоположно размерам заголовков) например:

<p align="center"> <font size="5">Размер шрифта = 5</font></p> дает на экране:

Размер шрифта = 5

Размещение текста возможно и вовсе без меток, в этом случае становится невозможным его выравнивание (что в принципе бывает и ненужно), а шрифт принимает размер соответствующий <font size="3">.
Цвет шрифта задается параметром color="цвет" например: <font color="green" size="5">Размер шрифта = 5 </font> выдаст ту же строку что и в предыдущем примере, только зеленую. (Очередность в задании параметров любого тега неважна.)

Цвета элементов

Цвет шрифта задается параметром:
<font color="color">...</font>
Фон страницы введением параметра bgcolor в тег body:
<body bgcolor="color">...</body>
Цвет фона таблицы:
<table bgcolor="color">...</table>
Другим способом является задание цвета в цифровом выражении, то есть в виде: <BODY BGCOLOR="#0127EF"> или <font color="#FF34C6">
Цветность шифруется интенсивностью трех основных цветов: красного, зеленого и синего(RGB)в шестнадцатеричной системе. 00- нулевая интенсивность, FF - максимальная насышенность. Соответственно: #000000- черный цвет,#FF0000- красный, #00FF00 - зеленый, #0000FF - синий, #FFFFFF - белый максимальной интенсивности.

Могу порекомендовать очень маленькую бесплатную программку "Pixie" возвращающую цвет пиксела, на котором находится курсор мыши. Удобно при подборе фона под фотографии, например. Последнюю версию в интернете вы можете найти здесь. Для наглядности, я насобирал для вас небольшую коллекцию цветов (Верхняя часть из них, колонками по три, была выставленна в качестве примера правильного подбора цветов, в RU/ководстве Артемия Лебедева.)

d9d9d9

a3bf00

ffc200

3562

69a3

9eb03

a6a6a6

8992

ff0000

6d93

0

c4a100

9b8f9b

d3c2ad

0

e8aa00

ffffff

fad69f

Примеры цветов в RGB

f39e77

a8d59d

9595c6

9999ff

9933

990066

f6b580

99cc99

968187

cc0033

7299

9999

fad295

99cccc

ae88b8

960018

e96b9e

ff6633

fff99d

99ccff

c699bd

999966

a9834f

99ff

c7e19e

99add5

ff99cc

33cc66

6699cc

660066

При цифровом выражении цвета не забывайте знак: #
Например: font color="#2547ff"

Соединение с другими документами

Browser выделяет цветом и/или подчеркиванием ключевые слова, являющиеся гиперссылками. Гиперссылка - обращение к документу, или к части документа обозначенной закладкой.

<A HREF="Main. htm ">Ссылка на Main. htm</A>.

Здесь ключевые слова `Ссылка на Main. htm' являются гиперссылкой на файл Main. htm, который лежит в той же директории, что и текущий документ. Ссылку на файл NJStats. html, лежащий в поддиректории AtlanticStates можно описать как: <A HREF="AtlanticStates/NJStats. html">New Jersey</A>

Это так называемые относительные ссылки. Вы также можете использовать абсолютное имя файла (полный путь вроде: http://www. /AtlanticStates/NJStats. html ). В общем случае, использование ссылки по абсолютному имени файла более предпочтительно.

Гиперссылки можно давать не только на изображения и текст, а обсолютно на любые фаилы. Например если вы хотите разместить у себя ссылку на архив с игрой Doom2 то пишите примерно так: <a href="doom2.zip"> В этом случае броузер открывает окно с вопросом о сохранении данного файла на Вашем диске.

Гиперссылка на определенный участок другого документа

Чтобы создать ссылку на определенную часть документа, необходимо сделать закладку к которой будет происходить обращение. Например закладка в документе Main. htm: <a name = "А001">Глава1</a> Таким образом слово Глава1 в документе превращается в закладку с именем А001.Теперь создадим ссылку из другого документа на закладку А001, находящуюся в Main. htm: <a href="Main. htm#A001">Ссылка на Главу1</a>

Гипертекстовая ссылка внутри документа

Техника соединения аналогична предыдущей но опускается имя файла. Например, связь с Главой 1 внутри того же самого файла Main. htm

<a href="#A001">Ссылка на Главу1</a>

Значек # -обязателен!

Фреймы

Подобно таблицам фреймы делят экран браузера на части. Отличие заключается в том, что страница содержащая фреймы, вообще не имеет тела т. е. вместо тега BODY в ней должны располагаться теги FRAMESET которые создают разметку для загрузки на экран одновременно нескольких документов. Левая часть этого учебника содержащая оглавление является фреймом в который постоянно загруженна самостоятельная страница - contents. htm Правый фрейм загружается различными документами в зависимости от вызванной гиперссылки. Рассмотрим пример фреймового документа:

<html><head><title>

Main_document </title></head>

<FRAMESET COLS="300,*">

<FRAME SRC="aaa. htm" name="frame_a">

<FRAMESET ROWS="50%,50%">

<FRAME SRC="bbb. htm" name="frame_b">

<FRAME SRC="ccc. htm" name="frame_c">

</FRAMESET>

</FRAMESET>

</html>

Схема фреймового документа

1фрейм

2фрейм

3фрейм

Первый тег frameset cols="300,*" делит окно браузера на две колонки размер первой из них 300 пикселов, размер второй (*)- все оставшееся место. Тег frame src="aaa. htm" name="frame_a" содержит ссылку на документ который будет загружаться в первый фрейм и одновременно присваивает ему имя, по которому в дальнейшем можно будет загружать в этот фрейм другие страницы, давая на них гиперссылки с параметром target="frame_a"  Например чтобы дать ссылку из frame_a на документы которые должны менятся в frame_b нужно расположить в frame_a страницу содержащую примерно следующее:
<a href="EEE. htm" target="frame_b">Документ ЕЕЕ</a>
<a href="uuu. htm" target="frame_b">Документ UUU</a>
Тег frameset rows="50%,50%" делит вторую колонку на две продольные полосы по 50% каждая. Если при сложении обоих значений результат неравен 100%, то браузер сам рассчитает размеры фреймов пропорционально заданным значениям. Следующие два тега задают имена и URL для каждой из полученных полос поочередно. frameset требует закрывающего тега в отличие от frame. Если в теге frameset одновременно используются оба параметра cols и rows то создается простая фреймовая сетка :

<frameset cols="33%,33%,33%"

rows="50%,50%">

<frame name="fr_1" src="a. htm">

<frame name="fr_2" src="b. htm">

<frame name="fr_3" src="c. htm">

<frame name="fr_4" src="d. htm">

<frame name="fr_5" src="e. htm">

<frame name="fr_6" src="f. htm">

</frameset>

Схема фреймовой сетки:

1фрейм

2фрейм

3фрейм

4фрейм

5фрейм

6фрейм

Таблицы

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

<TABLE BORDER>

<TR> <TH> Это <TD> пример

<TR> <TH> обычной <TD> таблицы

</TABLE>

Это

пример

обычной

таблицы

<TR> - Новая строка.<TH> - Строковая ячейка для заголовков.<TD> - Строковая ячейка для обычного текста. ROWSPAN - задает количество ячеек объединенных в колонке, COLSPAN - тоже, в строчке. (С объединением прийдется потренироваться: при объединении оставшиеся ячейки должны быть пропущенны т. е. если Вы соединяете 6 ячеек в строке, следуюший тег ячейки будет вносить данные сразу в седьмую строку таблицы. Тоже и с колонками.) Более сложный пример:
<CENTER> <TABLE BORDER="15" BGCOLOR="YELLOW" width="75%">
<TR> <TH rowspan="2">В первой строке в колонку объединены 2 ячейки заголовков. Во второй строке тег первой ячейки должен быть пропущен.
<TD bgcolor="lime"> <img src="lego. gif">
<TD>3 ячейка первой строки
<TR> <TD colspan="2">Вторая строка таблицы состоит из трех ячеек, но так как тег первой ячейки пропущен из-за объявления в первой строке, а 2 последние ячейки тоже объединены в одну, то во второй строке используется только одна метка ячейки.
</TABLE></CENTER>
Дает на экране:

В первой строке в колонку объединены 2 ячейки заголовков. Во второй строке тег первой ячейки должен быть пропущен.

3 ячейка первой строки

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

Своиство "BORDER" определяет ширину рамки вокруг таблицы (если размер не указан то по умолчанию). "BGCOLOR" -цвет фона - можно использовать как для таблицы в целом, так и для каждой ячейки в отдельности. Это относится и к возможности использования в качестве фона графического файла. Например: <tr BACKGROUND="Image. jpg">
WIDTH - ширина таблицы можно в процентах, можно в пикселах.

Также таблицей могут управлять атрибуты CELLPADDING="n" - определяет отступ от содержимого внутри ячеек, и CELLSPACING="n" - ширина границ между ячейками - все в пикселах. (Значение BORDER тем не менее определяет, будут-ли границы присутствовать вообще.)

Маркированные списки

<UL> <LI> яблоки <LI> бананы </UL>

Дает на экране:

    яблоки бананы

(закрывающие теги в строках необязательны)

Нумерованные списки:

<OL> <LI> апельсины <LI> персики <LI> виноград </OL>

Дает на экране:

апельсины персики виноград

Browser автоматически нумерует элементы такого списка.(закрывающие теги в строках необязательны)

Вложенные списки

Списки могут быть произвольно вложены друг в друга : <UL> <LI> Крупные города России: <UL> <LI> Москва <LI> Санкт-Петербург </UL> <LI> Крупные города Украины: <UL> <LI> Киев </UL> </UL>
что дает на экране:

    Крупные города России:
      Москва Санкт-Петербург
    Крупные города Украины:
      Киев

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

Данный тег не работает в Нетскэйпе. Вместо чудных бегущих буковок, на экране Вы увидите лишь уродливый обрывок текста, неизвестно отчего торчащий в одной половине окна. Для создания бегущей строки в IE напишите в исходняке следующее: <marquee>Текст </marquee> Оформить строку можно следующим образом:

<marquee dehavior="alternate" bgcolor="yellow" scrolldelay="145" width="50%">< font size="5" color="red">Текст бегущей строки. </font></marquee>

Dehavior="alternate" - команда заставляющая строку болтаться туда-сюда. По умолчанию данной команды, строка ползет справа налево. BGCOLOR - цвет фона. Все что касается цвета см. здесь Scrolldelay - скорость перемещения. Width - длина бегущей строки (необязательно в процентах).

Авторский стиль редактирования

Текст документа формируется browser, игнорируя повторение пробелов и перенос строк. Если использовать <pre>...</pre> все ваши пробелы будут сохранены, а строки будут прерываться там же, что и в исходном HTML-файле.

При этом на экране текст пишется

шрифтом фиксированной ширины.

В пределах <PRE> могут использоваться гиперссылки. Однако, в пределах <PRE> , необходимо избегать использовние других методов форматирования.

Физические стили форматирования

<b>Жирный шрифт </b> Жирный шрифт
<i>Наклонный шрифт </i> Наклонный шрифт
<s>Зачеркнутый шрифт </s> Зачеркнутый шрифт
<u>Подчеркнутый шрифт </u> Подчеркнутый шрифт
<tt>шрифт фиксированной ширины </tt> fixed шрифт
<sup>Верхний математ. шрифт </sup> Верхний шрифт
<sub>Нижний математ. шрифт</sub> Нижний шрифт
<big>Увеличенный шрифт </big> Увеличенный шрифт
<small>Уменьшенный шрифт </small> Уменьшенный шрифт

Теги физического форматирования могут быть вложены друг в друга в любом количестве. Помните про их своевременное закрытие:
<i><u><b><s> Пример </s> показывающий </b> своиства </u> вложенных </i> тегов

Пример показывающий своиства вложенных тегов

Логические стили форматирования

Логические стили могут иметь различные отображения в браузерах разных производителей поэтому более предпочтительным было бы использование Физического форматирования.

*<ins> Тег шрифта вставки</ins> Тег шрифта вставки
*<del> Тег удаленного шрифта</del>
*<acronym title="Подсказка"> Подсказка</acronym> Подсказка
<em> Тег выделенного шрифта</em> Тег выделенного шрифта
<samp> Тег шрифта образцов</samp> Тег шрифта образцов
<strong> Тег важных фрагментов</strong> Тег важных фрагментов

* Поддерживаются только IE
Тег подсказки используется в левом фрейме учебника для описания гиперссылок (подсказка всплывает при удержании на нем курсора мыши)

Отступ от края

Абзацы могут быть выполнены с отступом от края при помощи тегов: <dd> и </dd> Эти теги хорошо подходят для выделения важных абзацев из однообразного текста.

Специальные символы

Символы <, >, & и " имеют в HTML особое значение, как символы форматирования. Но иногда нам необходимо использовать их в тексте по своему прямому назначению. Для их введения в текст, Вы должны использовать:
&lt; - левая скобка <
&gt; - правая скобка >
&amp; - амперсанд &
&quot; - кавычки "
Также можно можно вводить принудительные пробелы в любом колличестве с помощью комманды: &nbsp;

ЗАМЕЧАНИЕ :Специальные символы чувствительны к регистру: НЕЛЬЗЯ использовать &LT; вместо &lt;   Знак ; обязателен!

Прерывание строки

Используя <BR> Вы можете перейти на новую строку внутри абзаца:
<p>Институт Ядерной Физики<BR>Московского Государственного Университета</p> даст на экране:
Институт Ядерной Физики
Московского Государственного Университета

Горизонтальная линия

Используя <HR> Вы можете разделить текст горизонтальной чертой, такой-же, как разделены все параграфы этой страницы. Закрывающего тега нет. Используя своиства size и width, можно указывать высоту в пикселах и длину в пикселах или процентах. Например <hr size="8" width="40%" color="red"> нарисует такую линию:


(Если цвет не указан, то по умолчанию устанавливается обычно серый)

Графические файлы

На WEB странице можно использовать графические файлы форматов JPG и GIF. GIF -специальный сетевой формат: имеет малый размер файла, возможность плавного проявления и анимации, но т. к. содержит 256 цветную палитру, неэффективен для храненные фотографий. JPG напротив не имеет ограничений по глубине цвета, но также и возможности анимации. Чтобы включить в страницу рисунок, надо описать ссылку на него:
<IMG SRC="Image">
где Image - графический файл в формате gif или jpg, содержащий рисунок.
Вы можете задавать взаимное расположение рисунка и текста:

- это выравнивание по нижнему краю (делается browser по умолчанию)

- это выравнивание по верхнему краю.

Положение рисунка задается включением атрибута align = " ":

<img src="Image. gif" align="top">

Также возможны типы выравнивания:
align = "middle" - центр
align = "left" - текст обтекает картинку справа
align = "right"- то же слева

Графические гиперссылки

Любая картинка, как и любой другой видимый элемент страницы, может стать гипертекстовой ссылкой.

<a href="#start"><img src="instruct. jpg"></a>

Это

Чтобы убрать рамку вокруг картинки-ссылки необходимо использовать в теге img параметр border="0". Вы можете собрать несколько графических файлов в мозаику таким образом, что при нажатии на каждый из ее элементов будет происходить обращение к различным документам. Для этого необходимо использовать таблицу. А в каждую ячейку с размещенным там изображением, необходимо добавить соответствующую ссылку. При этом свойства cellspacing и cellpadding таблицы сделайте равными нулю, и все изображения сольются.

Альтернативный текст в картинках

Некоторые WWW-browsers, не могут показывать рисунки. Кроме того некоторые пользователи специально отключают загрузку картинок для ускорения работы с текстами. Так-же рисунок может быть потерян или испорчен, в этом случае пользователь увидит только текст заданный в свойстве alt="..." Сопроводительный текст должен быть включен в кавычки. Например :

<img src="Netu. gif" alt="Это крутая картинка!"> покажет на экране: Это крутая картинка!

Этот же текст можно увидеть через некоторое время после наведения и удержания курсора мыши на самой картинке. Удобно для коментариев.

Скрипты

В любой поисковой системе в сети вы сможете найти огромное количество информации по созданию апплетов. Я же просто дам вам несколько адресов в internet с большим количеством примеров скриптов для самостоятельного изучения:
http://www.
http://www.
http:///java/
http://www.
http://
В качестве наиболее полезного приведу вам пример часов, написанный на JavaScript (Текст данного примера скопированный мышью может послужить основой для создания вашего html документа)

Начало формы

Текущее время:

Конец формы

<html><head><meta http-equiv="Content-Type"

content="text/html; charset=windows-1251">

<title>Clock</title>

<script language="JavaScript"><!--

function JSClock() {var time = new Date()

var hour = time. getHours()

var minute = time. getMinutes()

var second = time. getSeconds()

var temp = "" + hour

temp += ((minute < 10) ? ":0" : ":") + minute

temp += ((second < 10) ? ":0" : ":") + second

document. clockForm. digits. value = temp

id = setTimeout("JSClock()",1000) }

--></script>

</head><body onLoad="JSClock()">

<form name="clockForm">

<center>Текущее время: <input type="text" name="digits"

size="8" value=""></center>

</form>

Место для остального кода страницы

</body></html>

Дополнительная информация

За дополнительной информацией Вы можете обратиться в:

    RU. Ководство Артемия Лебедева Советы на Zhurnal. ru Коллекции картинок Библиотека фоновых рисунков

Публикация страницы в WEB

Итак... WWW-страница готова и надо скорее провозгласить миру о ее существовании. Для этого необходимо перекачать ее с Вашего винта на WEB сервер. Не сочтите за рекламу, но действительно полезный совет по размещению я могу дать только там, где расположена моя собственная страничка - www. chat. ru Я выбрал именно сhat. ru потому, что не надо платить. Дают 10 мегабайт свободного места. Есть правда и недостаток: если вы заметили в моем учебнике нет ни одной буквы [йо]. После перекодировщика на месте этой буквы с сервера возвращается непонятный знак. Так что пользоваться ей нельзя. Принимая во внимание, что это единственный баг в системе, на него можно закрыть глаза...

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

После регистрации, получив свой пароль для доступа, вы набираете в Explorere : http://www. chat. ru/user и вводите туда имя вашей страницы и пароль доступа. Перед вами откроется страница под названием File manager. Там будет снизу четыре кнопки. Первой "Upload+UnZip", я вам пользоваться настоятельно не рекомендую, потому как используя ее потерял кучу времени, и все равно пришлось переделывать все сначала без ее использования.

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

"Upload" - закачка - наиболее используемая клавиша. Жмете на нее. Открывается экран с тремя окошками. В верхней части абсолютно неудобное окно для выбора файла (очень короткое), в котором вы должны подставлять имена ваших файлов для закачки их на сервер. Если рядом с этим окном(справа) нет клавиши типа "Открыть", то медицина здесь безсильна - у Вас старый броузер и придется устанавливать Explorer 4.0 или выше. Возможно вы пользуетесь Netscape Navigator'ом (говорят они лучше), тут я вам не советчик, потому, что пользоваться им я неумею :( и нехочу :)

Следующее окошко "Target" - для закачки файла в нужную дерикторию, которую я Вам нерекомендовал создавать при помощи кнопки "MkDir". Если вы не создавали никаких дерикторий, то окошко это вам не пригодится.

В низу находится окошко перекодировщика. Если вы пользуетесь Explorer'ом то выбираете "WIN cp-1251" для всех файлов с расширением htm, и "Binare data" для всех остальных файлов (рисунки, звук и т. д.).

После нажатия на клавишу "Upload" броузер передает ваш файл на сервер chat. ru и открывает вам окно в котором появится имя файла с его размером при удачном завершении передачи, или сообщении об ошибке. Жмите "file list" и грузите дальше. Первая страница, дающая ссылки на все остальные документы должна называться index. htm и никак более. "Delete"- удаление файла или дериктории. Обьяснять тут нечего, все и так понятно. Кстати если вы заменяете страрый файл новым с тем-же именем, то удаления не требуется, однако если вы отправите файл с измененным регистром в имени, он запишется рядом и будет мешать правильной работе вашей страницы.