Web-Дизайн
На этой страничке Я попытаюсь Вам помочь в написании Web страничек.
В инете много инфы, но мне не всегда она помогает. Иногда уходит много времени
для ее осмысления. Я же попробую ее Вам показать в виде "Кубика-Рубика", чтобы
Вы могли Web странички писать как каменщик ложит стену из кирпичиков,то-есть не
надо будет думать, для чего это, а для чего то. Вам надо будет просто брать
нужные Вам кирпичики и из них складывать ваш САЙТ
1 ) Открываем текстовый документ.
В нем начинаем писать нашу Web страничку. После того как Мы ее напишем, Мы
текстовый документ сохроняем под удобным нам именем и с расширением "htm".
Например:
Moя стрaничка.htm
Фотогалерея.htm
2 ) Для написания Web странички
используем "TEG":
Это программы на языке HTML-содержат инструкции
(коды),ТЕГипредставляют собой последовательности символов,
заключенные в угловые скобки.
Например:
<
P><TITLE><CENTER>
3 ) Начнем с простого-с текста.
Для этого в текстовом документе напишем ТЕГ<ВОDY>, после чего начинаем
писать нужный нам текст. По окончанию текста закрываем его
ТЕГом</ВОDY>.
Например:
<ВОDY>Dj-ponchic.narod.ru</ВОDY>
4 ) Если есть необходимость
оцентровать текст, используем ТЕГ<CENTER> и закрывающий
ТЕГ</CENTER>. При написании почти всех ТЕГовиспользуется
2ой ТЕГ, который закрывает действие 1го.
Например:
<CENTER>Dj-ponchic.narod.ru</CENTER>
Должно получиться:
Dj-ponchic.narod.ru
5 ) Для того, чтобы выделить
нужный нам участок текста, используем ТЕГ<FONT COLOR =RED>, где RED-это
цвет, который Вы хотите придать тексту.
Например:
<FONT COLOR=RED>Dj-ponchic.narod.ru</FONT>
Должно получиться:
Dj-ponchic.narod.ru
6 ) Приведу таблицу цветов. При
смене Атрибута REDна другой Вы получите другой цвет.
Например:
<FONT COLOR=RED>Dj-ponchic.narod.ru</FONT>
YELLOW , GRAY , GREEN , PURPLE , BLUE , BLACK , #000089 , AQUA , LIME , FUCHSIA , NAVY , WHITE , #8A2BE2 , #A52A2A , #DE8887 , #5F9EA0 , #6495ED , #DC143C , #008B8B , #B8860B , #006400 , #BDB76D , #FF8C00 , #00CED1 , #FF1493 , #00BFFF , #1E90FF , #FFD700 , #ADFF2F , #FF69B4 , #B0C4DE , #800000 , #00FA9A , #808000 , #FFA500 , #FF4500 , #DDA0DD , #9ACD32 , #B0E0E6
Если Вам известны еще какие-нибуть цвета,
сообщите их Мне. Я их с удовольствием добавлю к списку.Только не надо присылать
полутона. Цвета должны быть яркими.
7 ) Ну что-ж, из выше
перечисленного Мы уже можем написать текст.Зделать его по центру и покрасить в
любой цвет .
<ВОDY>Dj-ponchic.narod.ru</ВОDY>
<CENTER>Dj-ponchic.narod.ru</CENTER>
<FOMT
COLOR=RED>Dj-ponchic.narod.ru</FOMT>
Например:
<ВОDY><CENTER><FOMT
COLOR=RED>Dj-ponchic.narod. ru</FOMT></CENTER></ВОDY>
Должно получиться:
Dj-ponchic.narod.ru
8 ) Для того, чтобы менять
размер шрифта, используем ТЕГ<H1> для уменьшения меняем цыфру 1 на 2 и так
до 6.
Например:
<H2> <H3> <H4>
<H5> <H6>
Например:
<H1>Dj-ponchic.narod.ru</H1>
<H6>Dj-ponchic.narod.ru</H6>
Должно
получится:
Dj-ponchic.narod.ru
Dj-ponchic.narod.ru
9 ) Для смены шрифта используем
ТЕГ<U>, текст будет подчеркнутым,<I> текст будет
наклонным,<S>текст будет зачерктнут,<TT> текст будет как на печатной
машинке,<B>текст будет полужирный,
Например:
Dj-ponchic.narod.ru<U>
Dj-ponchic.narod.ru<I>
Dj-ponchic.narod.ru<S>
Dj-ponchic.narod.ru<TT>
Dj-ponchic.narod.ru<B>
Есть
возможность менять и шрифт сам , но Ваш шрифт может быть не установлен на
сервере или компьютере пользователя, и тогда его пользователь увидит стандартным
и все Ваши труды пойдт на смарку.
Но все-же можно попробовать. Для этого
используют ТЕГ<FACE>.
Например:
<FONT
FACE=Verdana> где "Verdana" название шрифта.
<FONT FACE=Verdana>
Dj-ponchic.narod.ru </FONT FACE=Verdana>
Должно
получиться:
Dj-ponchic.narod.ru
Или:
Dj-ponchic.narod.ru
10 ) В ходе создания Web
страниц приходится писать бальшой обьем информации. Это, конечно, очень муторно,
но в то-же время очень увлекательно. В результате Вы уже забываете что писали в
начале. Или Вы сделали ошибку, а где ее искать? Или Вы хотите внести изменения в
нужном Вам месте. Что делать?Для облегчения жизни существует ТЕГ<!>.Он не
выводит на экран ни какую информацию. Он служит для того, чтобы внутри документа
Вы могли делать пометки о ходе работы.
Например:
<!Я в этом месте пишу адрес моего сайта.>
11 ) Кроме текста мы на сайте
размещаем еще и картинки. Все картинки для INETа надо сохранять в
формате"gif" или "jpg". И желательно с малым числом цветов.
12 ) Для создания "Бегущей
строки"используем ТЕГ<MARQVEE>, но ОН не используется один. Он идет в
комплекте с другими ТЕГами
Например:
"HEIGHT" -Ширина бегущей строки.
"WIDTH" -Длина бегущей
строки.
"HSPACE" -Смещение от левого края страницы.
"VSPACE" -Отступление
от текста.
"SCROLLAMOUNT" -Скорость прокрутки.
"SCROLLDELAY" -Частота
кадров букв.
"ALIGH""ТОP" -Надпись бежит вверху цветовой
полосы.
"ALIGH""BOTTOM" -Надпись бежит внизу цветовой
полосы.
"ALIGH""MIDDLE" -Надпись бежит в середине цветовой
полосы.
"DIRECTION""LEFT"- Прокрутка справа на
лево.
"DIRECTION""RIGHT"-Прокрутка слева на
право.
"BEHAVIOR""SCROLL"-Прокручивается
бесконечно.
"BEHAVIOR""SLIDE"-Останавливается.
"BEHAVIOR""ALTERNATE"-Возвращается.
Должно получиться:
Например:
<BODY>
<MARQUEE HEIGHT=40 WIDTH=99% HSPACE=5 VSPACE=5
ALIGH=MIDDLE BGCOLOR=YELLOW DIRECTION=LEFT LOOP=INFINITE BENAVIOR=SCROLL
SCROLLAMOUNT=5 SCROLLDELAY=20>
<H1>
ЭТА СТРАНИЦА В СТАДИИ
РАЗРАБОТКИ. ОНА В ДАЛЬНЕЙШЕМ БУДЕТ ПОЛОЖЕНА ЗА ОСНОВУ ОБНОВЛЕННОГО
САЙТА.
</H1>
</MARQUEE>
</BODY>
Не ищите в Моих записях системы. Я
писал их больше как пометки для себя. И они написаны как мне удобно. По мере
того как, Я сам буду набираться опыта и мои записи будут усложняться .
13 ) Для того чтобы придать
красоту "Offisa" документам, которые мы пишем на Web страничках, Мы должны
использовать ТЕГи<BR>"новая строка", и<Р>"новый абзац".
Например:
<BR>Dj-ponchic.narod.ru
<Р>Dj-ponchic.narod.ru
Должно получиться:
Dj-ponchic.narod.ru
Dj-ponchic.narod.ru Dj-ponchic.narod.ru
Dj-ponchic.narod.ru Dj-ponchic.narod.ru
Dj-ponchic.narod.ru Dj-ponchic.narod.ru
TEГ<BR>используется для того, что бы Мы сами переносили новую строку, а
не чтобы сервер по умолчанию делал перенос.
14 ) Иногда Нам есть
необходимость какой-нибуть символ написать чуть выше или ниже текста, например,
дроби или просто букву или даже целый текст. Для этого используют
ТЕГи<SUP>с закрывающим ТЕГом</SUP>(символ
будет сверху)а ТЕГ<SUB>и</SUB>cнизу соответственно.
Например:
Dj-<SUP>ponchic</SUP>.narod.ru
(5+ Х<SUP>
2</SUP>)<SUP>х+ 3 </SUP>
Должно
получиться:
Dj-Ponchic.narod.ru
(5+х2)х+ 3
Конечно, они не
будут красного цвета-это я их перекрасил, чтобы было нагляднее .
15 ) Далее.......Теперь
попробуем отделить один текст от другово линией. С помощью ТЕГ
ов
<BR>и<Р> Мы сможем перенести текст на новую "страчку" и
"абзац", но ведь красивее один текст от другово отделить линией, как это сделано
у меня на этой странице в ходе всего пояснения.Для этого используются
ТЕГ<HR> c дополнительними атребутами SIZE=5 "ширина" WIDTH=200 "длина"
NOSHADE "линия бутет темной".
Например:
<HR>
<HR SIZE=5>
<HR SIZE=5 WIDTH=200>
<HR
SIZE=5 WIDTH=200 NOSHADE>
Должно получиться:
16 ) При формировании документа
HTML может потребоваться ввести символы , которые воспринимаются браузером как
служебные. Например, нельзя использовать символы <> для обозначения
знаков <<меньше>> и << больше>> , т.к. они
интерпретируются как символы ТЕГов .
Например:
&,
",<,>, ,¢,£,§,©,
®,±,µ,¶,¼,½,¾,
Æ,Ø,æ,÷,,	,!,
#,$,%,',(,),*,+,
/,:,;,=,@,[,\,],
^,_,`,{,|,},~,€,
ƒ,„,…,†,‡,ˆ,‰,Š,
Œ#38,Ž,˜,™,š,¥,¤,
ª,«,¬,°,²,Ç,×,ø,
←,↑,→,↓,↔,
♠,♣,♥,♦,
Должно
получиться:
&,
",<,>, пробел,¢,£,§,©,®,±,
µ,¶,¼,½,¾,Æ,Ø,æ,÷,, пробел, !,#,$,%,',(,),*,+,/,:,;, =,@,[,\,],^,_,`,{,|,},~,
€,ƒ,„,…,†,‡,ˆ,‰,Š,Œ, ,Ž,˜,™,š,¥,¤,ª,«,¬,°,², Ç,×,ø,←,↑,→,↓,↔,♠,♣,♥, ♦,
17 ) Для того чтобы вставить
какой-нибуть рисунок, воспользуемся следующим ТЕГом <IMG
SRC=название.gif>. Где "gif"-это формат, в котором сохранен рисунок.
18 ) Иногда в текст надо
вставить картинку и чтобы эта картинка стояла слева , а текст ее обтикал справа,
используют ТЕГ<ALIGN=LEFT>
Например:
<IMG SRC=название.gif ALIGN=LEFT>
19 ) В ходе создания Сайта
приходиться делать много кнопок, при нажатии на которые пользователь переходит
на следующий документ. Вариантов кнопок много. Постепенно Мы их все рассмотрим.
Сейчас самый простой вариант, где в качестве кнопки используется ключевое
слово.
Для создания кнопки используется ТЕГ<A HREF=>
Например:
<A HREF=Dj-ponchic.narod.ru>
1.Название</A>
Должно получиться:
1.Название
Кнопка стала активной. При нажатии на нее Вы
перейдете к следующему документу.
20 ) Например, Вы создаете
отдельный листок с кнопками.
Например:
<TITLE> Создаю установочный Фрем, на котором
будут распологаться кнопки </TITLE>
<BODY BGCOLOR=AQUA TEXT=BLACK
VLINK=RED LINK=BLACK>
<H5>
<A HREF=FotoAlbom.htm
TERGET=RIGHT> 1.FOTO </A> <BR>
Cоздали первую
кнопку
<A HREF=Bloknit.htm TERGET=RIGHT> 2.Гостевая</A>
<BR>
Создали вторую кнопку и так далее
<A HREF=Games.htm
TERGET=RIGHT> 3.Игры </A> <BR>
<A
HREF=Bloknot 2.htm TERGET=RIGHT> 4.Мая ст </A >
<BR>
<A HREF=Bloknot 3.htm TERGET=RIGHT> 5.Проги.
</A> <BR>
mailto:
</H>
Должно
получиться:
1.FOTO
2.Гостевая
3.Игра
4.Мая ст.
5.Проги
mailto:
"mailto:"означает конец списка, но Вы можете не добавлять.
LINK=BLUE означает цвет кнопки после использования. VLINK=BLUE означает цвет
кнопки. BGCOLOR=RED означает цвет страницы.
21 ) В качестве кнопки также
можно использовать картинку. Для того чтобы кнопки были из рисунка, добавляем
еще атребут. Это будет адрес картинки <IMG SRC=Radar.gif WIDTH=70
HEIGHT=50> полная строка будет выглядеть так:
Например:
<A HREF=Knopka.htm> <IMG SRC=Radar.gif
WIDTH=70 HEIGHT=50> </A> Knopka 6 <BR>
WIDTH=70-это длина
кнопки , HEIGHT=50-это высота кнопки
Должно
получиться:
22 ) Для того чтобы вставить в
страницу музыку, прописываем следующий ТЕГ <BGSOUND SRC=>
Sound.wav-
название музыкального файла.Не забудьте написать, в каком расширении он написан.
LOOP=1 количество повторов. LOOP=TRUE бесконечное число повторений. LOOP=FALSE
воспроизведение звука 1 раз.
Например:
<BGSOUND SRC=Sound.wav LOOP=1>
Также можно звуковой файил
установить с видимой полосой прокрутки
<EMBED SRC=Sound2.rmi HEIGHT=50
WIDTH=280>
HEIGHT=50-высота полосы прокрутки, WIDTH=280-длина полосы
прокрутки.
Должно получиться:
