Назад

Материал был взят с сайта http://zfree.narod.ru/html_school_x2.html

Эта страничка обьясняет многое, что нужно для тех кто хочет создать свою веб страничку. Ниже этого параграфа таблица содержимого. Нажмите на любую тему содержимого и вы попадёте на это подразделение моего руководства по HTML. Я надеюсь что это руководство вам поможет.
(Извените, школа будет ещё достраиваться. Будут добавлены линки "Добавление" которые будут обьяснять как сделать много разных Java добавок на странице. Эта самая Java поможет вам сделать цветные анкеты, открывать окна каких угодно размеров, или даже указывать место для текста, чтобы текст мог заходить на другой текст!)

  • Текст
  • Линки
  • Графика
  • Заполняемые анкеты/формы
  • Фреймы
  • Java

    Title

    Первое что нужно сделать - это дать странички Заголовок. Заголовок будет показан на самом верху "окна". Дапустим что ваш Заголовок будет "Главная Страница", тогда вы напечатаете:

    <title>Главная Страница</title>

    В HTML, каждая команда заключается в <, и >. И почти во всех командах, вы должны указать веб броузеру когда закончить данную команду. Это делается рутём печатания (/) перед окончанием команды, как видно выше. Так ка HTML не "чувствительное" , <title> такое же как <TITLE>, которое такое же как <TiTLe>. Следущее, вы должны решить что вы хотите поместить на свою страницу. Текст, линки, графику, и текстовое пространство, просто несколько идей. Следуйте таблице на самом верху чтобы решить как, и что расположить на своей странице.

     

    Текст

     

    Заголовки

    HTML включает шесть уровней заголовка, номированых от 1 по 6, с 1 самым большим. Заголовки обычно показаны в большом, или маленьком фонтах, и обычно жирнее. Если вы захотели написать "Привет", вот что вы должны написать для каждого заголовка, и вот что получится:

    <h1>Привет</h1>

    Привет


    <h2>Привет</h2>

    Привет


    <h3>Привет</h3>

    Привет


    <h4>Привет</h4>

    Привет


    <h5>Привет</h5>

    Привет


    <h6>Привет</h6>

    Привет


    Параграфы

    Когда либо у вас есть больше чем одно написанное предложение, вам лучше использовать параграфы. Сам я не вижу ни какой разницы, но я всёравно это делаю, потому что тогда легче разобраться в своём программировании. Чтобы сделать параграф "Это веб страница. Как вам нравится что я сделал? Пожалуйста пишити мне идеи на почту a@a.com", тогда:

    <P>Это веб страница. Как вам нравится что я сделал? Пожалуйста пишити мне идеи на почту a@a.com"</P>

    На странице будет:

    Это веб страница. Как вам нравится что я сделал? Пожалуйста пишити мне идеи на почту a@a.com"

     

    Списки

    Есть два типа списков в HTML, с точками, и с номирами. Чтобы сделать с точками: red, orange, green, blue, purple, black, и brown, напечатайте:

    <UL>
    <LI> red
    <LI> orange
    <LI> green
    <LI> blue
    <LI> purple
    <LI> black
    <LI> brown
    </UL>

    Результат:

    • red
    • orange
    • green
    • blue
    • purple
    • black
    • brown

    Чтобы сделать с номирами: red, orange, green, blue, purple, black, and brown, напечатайте:

    <OL>
    <LI> red
    <LI> orange
    <LI> green
    <LI> blue
    <LI> purple
    <LI> black
    <LI> brown
    </OL>

    Результат:

    1. red
    2. orange
    3. green
    4. blue
    5. purple
    6. black
    7. brown

     

    Прерыв в тексте

    Если вы неожидано вы захотели завершить строку иначать другую то используйте команду "прерыв в линии". Например вы захотели написать "Приветик, как дела?", Но с каждым словом на следующей странице. Всё что вам нужно напечатать:

    Приветик,<BR>как<BR>дела?

    Получается:

    Приветик,
    как
    дела?

    Горизонтальные линии

    Если вы захотели сделать горизонтальную линию на своей странице то четайте дальше. Горизонтальные линии могут быть разной длины и велечины. И ещё онимогут быть разных цветов, путём печатания NOSHADE. Вот несколько примеров:

    <HR SIZE=1 WIDTH=100%>

    <HR SIZE=5 WIDTH=50%>
    <HR SIZE=25 WIDTH=75%>
    <HR SIZE=3 WIDTH=100%>
    <HR NOSHADE SIZE=1 WIDTH=100%>
    <HR NOSHADE SIZE=3 WIDTH=100%>
    <HR NOSHADE SIZE=10 WIDTH=20%>

    Текстовой формат

    Вы можете захотеть чтобы один текст отличался от другово текста, тоесть быть другим форматом. Есть несколько стилей вы можете использовать: bold, italic, underline, strikeout, superscript, subscript, teletype, and blinking text are examples. Чтобы это сделать, вклюючите слова в следующие скобки:

    <b>, </b> для bold

    <i>, </i> для italic

    <u>, </u> для underlined

    <strike>, <strike> для strikeout

    <sup>, </sup> для superscript

    <sub>, </sub> для subscript

    <tt>, </tt> для teletype

    <blink>, </blink> для blinking (не знаю зачем :) ))

    Ещё можно смешивать стили вот так!

     

    Линки

     

    URLs

    Когда вы делаете линк, вы делаете цветной текст или даже картинку(об этом попозже). Когда ктонибуть нажимает на этот текст, он попадает на другую веб страницу, или даже на какой нибуть раздел этойже страницы. Скажем вы захотели сделат линк с какой нибуть страницы, на это страницу. URL (Uniform Resourse Location) этой страницы:
    http://zfree.narod.ru/html_school_x2.html
    Чтобы это сделать, вы напишите:

    <A HREF="http://zfree.narod.ru/html_school_x2.html">Какой либо текст вы хотите чтобы был цветным, идёт сюда</A>

    Результат будет:

    Какой либо текст вы хотите чтобы был цветным, идёт сюда

    Можете попробовать, если хотите.

     

    Линки к особым подразделениям

    Иногда, вы можете захотеть линк который бы взял вас ниже на тойже странице, или на определённый сегмент на другой странице. Пример этого индекс этой страницы. Нажмите на цветной текст, и вы попадаете на этот раздел. Чтобы этого добиться, вам нужно делать две вещи. Первая, взять линк, вторая, указать куда приведёт этот линк. ВНИМАНИЕ: Вы не можете сделать линк к особому сегменту в пределах другого документа пока любой из двух, у вас есть разрешение к кодировоному источнику этого документа или в этом документе уже есть этот код с именем линка.
    1) Чтобы сделать линк, придумайте название. Например вы назвали линк "spot"(место). Если это "место" на тойже стканице что и линк, вы напишите:

    <A HREF="#spot">Цветной текст</A>

    Иначе, вы добавите "#spot" к концу URL.
    2) Сейчас, вам нужно указать куда вас должен взять линк. Идите к тому месту куда вы хотите чтобы вас взял линк, и напишите:

    <A NAME = "spot"></A>

    И-майл Линки

    Многие люди хотят чтобы у них был линк который автоматически отпровляет e-mail на нужный адрес. Если вы хотите это, и вас зовут Некто, и ваш e-mail адрес vbor@omen.ru, напишите:

    <A HREF="mailto:vbor@omen.ru">Некто</a>

    Вот результат (нажмите чтобы отослать мне e-mail).

    Владимир

    Графика

     

    Ставим картинки на страницы

    Почти на каждой веб странице в инете, есть хоть какая нибуть картинка:

    1)
    Чтобы сделать картинку с чужой страницы, вам нужно найти URL этого ресунка. Выберите View Source когда нажмёте на страницу правой кнопкой мышки. Потом разберитесь в коде странички и найдите и скапируйте URL этого рисунка. Допустим URL было: http://zfree.narod.ru/flame.gif. Вы напишите:

    <IMG SRC="http://zfree.narod.ru/flame.gif">

    Результат:

    Вот...

    2)
    А чтобы показать картинку которая уже у вас загружена в корневую директорию, вам только нужно написать название фаила.(например <IMG SRC="flame.gif">

     

    Запасной текст для картинок

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

    <IMG SRC="flame.gif" ALT="Просто огонёк">


    Просто огонёк

     

    Фон, текст, и цвет линка

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

    • <body bgcolor="#код">для цвета фона
    • <body text="#код">для цвета текста
    • <body link="#код">для цвета не посещённых линков
    • <body vlink="#код">для цвета посещённых линков
    • <body alink="#код">для цвета активных линков

    Можно все команды вместе:

    <body bgcolor="#000015" text="#000020" link="#000050" vlink="#7a7777" alink="#8f8e8d">

    Графика Фона

    Вместо того чтобы делать просто сплошной цвет фона, вы можете сделать какую нибуть картинку как ваш фон. Эту картинку можно будет сделать повторяемой. Если у вас есть уже картинка, скажем под названием;bk.gif", то вам нужно написать следующее:

    <body background="bk.gif">

    Линки с графикой

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

    Просто огонёк

    Вы можете сделать текст рядом с картинкой, который доставит вас на ту же страницу.

    Просто огонёкzfree.narod.ru

    Вот что вы напишите чтобы этого добиться:

    <A href="http://zfree.narod.ru;><IMG SRC="http://zfree.narod.ru/flame.gif"></A>

    <A href="http://zfree.narod.ru"><IMG SRC="http://zfree.narod.ru/flame.gif">zfree.narod.ru</A>

     

    Заполняемые анкеты

     

    Начнём

    Заполняемые анкеты дают читателю возращать информацию на Веб сервер для какой либо деятельности. Например, скажем вы набрали имена и имайл адреса, чтобы вы могли послать какую нибудь информациу людям которые попросили этого. Этот процесс обычно делается скриптом или программой написаной на Perl или каким нибудь другим языком который манипулирует текст, файлы, и информацию. Если вы хотите, вы можете сами написать такую программу, но только если можете. Тут я буду использовать точно такой же код как на form.html.

     

    Form Method/Action

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

    <FORM METHOD="POST" ACTION="mailto:vbor@omen.ru;>
    <TEXTAREA name="form" ROWS=10 COLS=55> Ваш текст. </TEXTAREA> <br>
    Впишите свой адресс: <INPUT TYPE="text" NAME="address" VALUE=@ SIZE=20><br> <INPUT TYPE=submit VALUE=Отправить><br> <INPUT TYPE=reset VALUE=Отправить><br> </form>

    Вот как это будет выглядеть:

    Впишите свой адресс:

    Большие анкеты

    Вы можете делать вольшие анкеты, как видно ниже. Это место предназначино для того, чтобы люди могли вписывать коментарии. Вам только нужно решить какую длину и ширину вы хотите дать анкете. Например вы хотите 7 рядов и 45 колонок. Вот что нужно напечатать:

    Пишите комментарии:
    <TEXTAREA Rows=7 Cols=45 NAME="suggestions"></TEXTAREA><P>

    Вот как это будет выглядеть:

    Пишите комментарии:

     

    Checkboxes

    Например вы захотели задать вопрос: "Что вы любите делать?". У вас будет список вещей с checkboxes. Если вы хотите список: Смотреть телек, игать в игры, заниматься спортом, читать журналы, и ничего, вы напишите:

    Что вы любите делать?

    <INPUT TYPE="checkbox" NAME="like" VALUE="TV">Смотреть телек<P>
    <INPUT TYPE="checkbox" NAME="like" VALUE="internet">игать в игры<P>
    <INPUT TYPE="checkbox" NAME="like" VALUE="read">заниматься спортом<P>
    <INPUT TYPE="checkbox" NAME="like" VALUE="sports">читать журналы<P>
    <INPUT TYPE="checkbox" NAME="like" VALUE="study">ничего<P>

    Вот что получается:

    Что вы любите делать?

    Смотреть телек

    игать в игры

    заниматься спортом

    читать журналы

    ничего

     

    Radio Кнопки

    Если вы хотите задать вопрос с одним ответом, вы можете использоватьyou radio кнопки. Если вы захотели спросить "Какой броузер вы используете?", и вы хотите поместить на список Netscape Navigator 4.x, Netscape Navigator 3.x, Netscape Communicator, Mosaic, and Microsoft Explorer, вы напишите:

    Какой броузер вы используете?

    <INPUT TYPE="radio" NAME="browser" VALUE="Navigator 4.x">Netscape Navigator 4.x<P>
    <INPUT TYPE="radio" NAME="browser" VALUE="Navigator 3.x">Netscape Navigator 3.x<P>
    <INPUT TYPE="radio" NAME="browser" VALUE="Communicator">Netscape Communicator<P>
    <INPUT TYPE="radio" NAME="browser" VALUE="Mosaic">Mosaic<P>
    <INPUT TYPE="radio" NAME="browser" VALUE="Internetex">Internet Explorer<P>

    Вот что получается:

    Какой броузер вы используете?

    Netscape Navigator 4.x


    Netscape Navigator 3.x


    Netscape Communicator


    Mosaic


    Internet Explorer


    Pull-Down Списки

    Ещё можно задавать вопросы с одним ответом использовав pull-down меню. Вы можете использовать SELECTED команду ,чтобы был выделен любой вариант на списке в самом наччале, как будет видно ниже. Если вы захотели спросить "Какой ваш любимый цвет?", и вы хотите список следующих цветов: красный, жёлтый, оранжевый, зелёный, синий, феолетовый, чёрный, и коричневый, с зарание выбраным чёрным цветом, вы напишите:

    Какой ваш любимый цвет?
    <SELECT NAME="color">
    <OPTION>красный
    <OPTION>жёлтый
    <OPTION>оранжевый
    <OPTION>зелёный
    <OPTION>синий
    <OPTION>феолетовый
    <OPTION SELECTED>чёрный
    <OPTION>коричневый
    </SELECT><P>

    The outcome is:

    Какой ваш любимый цвет?

     

    Scroll-Down Списки

    Ниже приведён пример этого списка.Иногда вы хотите чтобы человек мог выбрать несколько или одну вещь на scroll-down списке. Для этого человеку только нужно нажать и держать command или shift кнопку. Ниже два примера. В первом, можно только выбрать одну вещь. Во втором, можно выбрать сколько хочеш вещей путём нажатия command или shift. Вопрос: "Какая ваша самая любимая игра ?" Ответы: Nintendo 64, Sony Playstation, Sega Dreamcast, или arcade игры. Вот что нужно писать:

    Какая ваша самая любимая игра ?
    <SELECT NAME="video game" SIZE=3>
    <OPTION VALUE="nintendo64">Nintendo 64
    <OPTION VALUE="playstation">Sony Playstation
    <OPTION VALUE="dreamcast">Sega Dreamcast
    <OPTION VALUE="arcade">Arcade Games
    </SELECT><P>

    Получается:

    Какая ваша самая любимая игра ?

    Какая ваша самая любимая игра ? (Hold shift to select more that one)
    <SELECT NAME="video game" MULTIPLE SIZE=4>
    <OPTION VALUE="nintendo64">Nintendo 64
    <OPTION VALUE="playstation">Sony Playstation
    <OPTION VALUE="dreamcast">Sega Dreamcast
    <OPTION VALUE="arcade">Arcade Games
    </SELECT><P>

    Получается:

    Какая ваша самая любимая игра ? (Жмите shift чтобы выделить больше чем одну категорию)

     

    Фреймы

     

    Что такое фреймы?

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

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

    <iframe src="ваш_URL" frameborder=0 height=340 width=220 scrolling=yes> </iframe>

    Это будет выглядеть так:

    Java Scripts

     

    Что такое Java?

    JavaScript - встроенный язык программирования. На нем НЕЛЬЗЯ писать апплетов. Он НЕ взаимодействует с сервером, а исполняется на клиентовской машине.

    Java - язык для написания небольших программ, встраевымых в браузер на исполнение. На нем делаются меню, например, из картинок. Это ОЧЕНЬ сложный язык, по-моему, сложнее, чем С++. Его знает очень мало народу, даже "крутых" мастеров. Он уже не популярен из-за своей сложности и чрезвычайной глючности. Он, как и остальные языки, требует компиляции программ. Файлы Java имеют расширение .class. Сейчас правда уже это же расширение использует и Perl (в некоторых случаях), и сервер Apache.

     

    Программирование в Java

    Я могу совсем немного программировать на java. Есть очень много хороших сайтов на русском, которые могут вас научить как программировать на этом языке. Я могу только научить как использовать java в тегах и немного скриптов.

    Ниже вы найдёте некоторые сайты которые помогут вам сделать Java скрипты! Правда у меня уже есть свой раздел "Скрипты" , но он ещё маленький и будет только пополняться!

    Вот Сайт где много всяких классных скриптов!

    Назад