дизайн

раскрутка

web-прог.

развлечения

статейки

софт

игры

на главную

гостевая

заказать сайт

сочинения

мои друзья

8:29:38 AM

Hosted by uCoz


1. Web дизайн.

2. Для начинающих.—>>

3. С чего начинать?

4. Как сделать стильный WEB-сайт.

5. Анимация.

6. Коллекция фонов.

7. Анимация-емейлы.


SpyLOG

Рейтинг@Mail.ru

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Веб-дизайн для начинающих.

Создание страничек в Интернет становится все актуальнее. Пытаются их ваять уже кому не лень. Но кроме желания ваять треба еще и каких-то основ и опыта. Кто-то ставит супер-пупер крутую прогу FrontpPage, но потом сам не знает, че она там генерит ему. Кто-то сдирает чужие ваяния, иной раз не сумев толком переделать под себя. Кто-то генерит что-то смежное между первыми и вторыми, одним словом, прикол да и только. Вот и решил я помочь тебе разобраться в этой фене - html.

Что касается программ типа Frontpage - оставь их ламерам! Их делали для тех, кто не может все сделать сам. Если же ты будешь знать html, подобные программы несомненно тебе помогут облегчить жизнь при, например, конвертации прайс-листов в хтмл или быстром подборе нужных цветов и т.п.

Для начала тебе понадобится выучить базовые теги html и принцип построения любой html-страницы.

Любой html документ сроится по принципу Начало-Заголовок-Тело-Конец. Начало показывает тег <html>, а конец тег </html>. Кстати, феня тег это то, что заключено между < и >. Заголовок ограничивают теги <head> и </head>, а тело <body> и </body>. Заголовок обычно несет информацию для поисковых систем, некоторую официальную информацию, заголовок самой страницы и скрипты, которые выполняются до загрузки тела страницы. Тело - это все то, что отображается потом в браузере. А теги начала и конца позволяют однозначно определить страницу как html-страницу. Плюс ко всему файл должен иметь расширение htm или html. Первое пошло от систем, не поддерживающих длинных расширений, а второе от поддерживающих; в результате сейчас можно и с таким, и с таким. Используются еще расширения, к примеру, shtml и asp, но тебе это вряд ли понадобится вообще. Язык html это язык разметки, а не какой-нибудь язык программирования, поэтому он в принципе элементарен и не требует особых навыков, скорее требуется опыт создания страниц и дизайна, нежели опыт в написании кода. Код можно писать в чем угодно, лично я всегда пишу в Notepad. Итак, какие теги используются в html (я перечислю наиболее часто используемые и поддерживаемые всеми браузерами), некоторые даже сделал с картинками - когда не очень ломало, а для всех остальных в самом конце будет пример.

<title></title> - заголовок хтмл-документа

<center></center> - центровка

<а атрибуты></а> - гиперссылка (атрибут ) или якорь (атрибут name)

<br> - перенос каретки, по-нашенски переход на новую строку J

<nobr></nobr> - по возможности разрывы не допускаются

<b></b> - заключенный текст между тегами будет жирным

<form атрибуты></form> - форма

<frame атрибуты></frame>- задается кадр

<frameset атрибуты></frameset> - задается набор кадров

<noframes></noframes> - то, что будет отображаться в браузерах, не поддерживающих кадры

<pre атрибуты></pre> - текст между тегами будет отображаться как есть (с соблюдением строк, переносов и интервалов)

<img атрибуты> - изображение детской неожиданностиJ

<map атрибуты></map> - определяет чувствительную область изображения к перемещению крысы

<sub></sub>- нижний индекс (текст будет смещен вниз)

<sup></sup> - верхний индекс (текст будет смещен вверх)

<basefont атрибуты> - указывает размер шрифта для последующего текста

<font атрибуты></font> - установка размера, цвета или гарнитуры заключенного в теги текста

Пример:

<font face="Arial" size="2" color="#FF0000">
<font face="Courier" size="2" color="#000000">
<font face="Tahoma" size="2" color="#999999">

<hr атрибуты> - горизонтальная линейка

Пример:

<HR ALIGN="LEFT" SIZE="3" WIDTH="100" NOSHADE>


<HR ALIGN="CENTER" SIZE="1" WIDTH="50%">


<HR ALIGN="CENTER" SIZE="5" WIDTH="90%">


<hn атрибуты></hn> - заголовок (n от 1 до 6)

Пример:

Заголовок h1 (align=left)


Заголовок h3 (align=center)


Заголовок h6 (align=right)

<li атрибуты></li> - элемент списка

<ul атрибуты></ul> - неупорядоченный список элементов <li>

Пример:

  • Типа первый элемент списка <ul>
  • Однозначно второй элемент списка <ul>
  • В натуре третий элемент списка <ul>J

<ol атрибуты></ol> - упорядоченный список элементов <li>

Пример:

  1. Первый элемент списка <ol>
  2. Второй элемент списка <ol>
  3. Третий элемент списка <ol>

<р атрибуты></р> - абзац

Пример:

<p> с align=center

<p> с недокументированной функцией align=justify, выравнивает абзац по обоим краям, в вебе очень удобно, типа используй и все такое

<tr атрибуты></tr> - строка в таблице

<td атрибуты></td> - столбец в таблице

<table атрибуты></table> - таблица

Пример:

<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>
это типа ячейка таблицы

<td ALIGN="LEFT" VALIGN="TOP">

При желании ячейки можно закрасить фоном или наложить картинку в качестве фона, к примеру тут фон BGCOLOR="#FF00FF"

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

Замечания:

- картинки мне было лениво ваять, и я просто сослался абсолютными ссылками на картинки с сайта www.xaker.ru

- чтобы твоя картинка грузилась быстрее, всегда пиши width и height в <img…>

Ну и вот, в принципе, сам код:

<html>
<head>
<title>Пример для журнала "Хакер" </title>
</head>
<body>
<center>
<font face="Arial" size="2">Простенький пример хакерской странички, поучающей ламеров хтмл-ю :)</font>
<br><br>
<table border="0" cellspacing="2" cellpadding=0 width="620">
<tr><td><a href="http://www.xakep.ru" target="_top"><img align="left" src="http://www.xakep.ru/x-joke/images/00003.jpg" width="400" height-="287" border="0"alt="Типа мое фото></a><p align="justify"><h4>Если</h4>очень поднатужиться, то... не-а :) то можно сделать текст, обтекающий картинку - для этого просто в теге &lt;img...&gt; добавь феню align="left", тоды текст будет обтекать, :) хых, круто сказано, текст будет обтекать, :))) ну так вот, текст будет обтекать картинку справа... А чтобы он особо не был кривым, отформатируем его абзацем с недокументированным параметром, align="justify". Кстати, неплохо вроде вышло. :) Про трудную жизнь свиней, я думаю, сам сочинишь. А я щас буду плодить таблицу дальше и показывать всякие фени</td></tr>
<tr><td bgcolor="CC99CC">тексь<b>эту ячейку</b><u>мы</u><i>покрасим</i>в #CC99CC цвет</td></tr>
<tr><td bgcolor="CCCCCC">A<sub>тут</sub> <sup>мы</sup> <sab>щас</sub> <sup>бум</sup>испытывать остальные теги типа :)</td></tr>
</table>
<br><br>
<a href="http://www.xakep.ru" target="_top"><img src="http://www.xakep.ru/xakep.gif" border="0" width="88"helght="31" alt="Xakep"></a>
<br><br>
<font face="Arial" size="1">&copy;, Copyright lamer Production 2000 :)</font>
</center>
</body>
</html>

Вот, что у тебя скорее всего получилось:

Писать этот код, как ни странно, минуты 2 от силы. На этом примере я всего лишь показал тебе элементарный хтмл. Со временем это для тебя будет так же элементарно, как выключить компьютер. Другое дело, что потом ты можешь юзать всякие другие фичи, применительные к вебу: скрипты, апплеты, динамический хтмл (DHTML) и т.п. Хотя все по мере надобности. С виду простыми тегами можно будь здоров что наваять, если еще хорошо владеть графикой. Одним словом, ваяй, фигарь и угорай!

Отдельно еще рассмотрю формы и фреймы (кадры). Начнем с фреймов. Если уж прибило использовать тебя фреймы, то эта фича юзается следующим макаром. Сначала грузится файл с фреймовой структурой, в котором ты определяешь параметры каждого фрейма, и то, что изначально в каждый фрейм загружается. А то, что грузится в каждый отдельный фрейм, ни что иное, как обычный хтмл-документ. Для примера создадим 3 фрейма: один вверху и два внизу. В верхний загрузим какую-нить картинку с Хакера, а в двух нижних подпишемся.

Главный хтмл-файл будет выглядеть вот так:

<html>
<head>
<title>Пример</title>
</head>
<frameset rows="60%, 40%">
<frame src="frame1.html" name="frame1">
<frameset cols="65%, 20%">
<frame src="frame2.html" name="frame2">
<frame src="frame3.html" name="frame3">
</frameset>
<noframes>
<font color="#ff0000"><h1>Лопух, уже весь мир перешел на браузеры новых версий! Бросай свою дремучую и качай поновее.</h1></font>
</noframes>
</html>

Ну и плюс коды для хтмл-ек для всех 3-х фреймов:

<HTML>
<HEAD>
<TITLE>Пример</TITLE>
</HEAD>
<BODY>
<center>
<table border="0" cellspacing="2" cellpadding="0" width="620">
<tr><td>
<A HREF="http://www.xakep.ru" target="_top"><img src="http://www.xakep.ru/x-joke/images/00007.jpg" border="0" widht="398" height="325" alt="Типа мое фото :)"></A>
</td></tr>
</table>
<br><br>
<A HREF="http://www.xakep.ru" target="_top"><img src="http://www.xakep.ru/xakep.gif" border="0" widht="88" height="31" alt="Xakep"></A>
<br><br>
<foht face="Arial" size="1">&copy; Copyright Lamer Production 2000 :)</font>
</center>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE>Пример</TITLE>
</HEAD>
<BODY>
<center>
<table bgcolor="#cc99cc" border="0" cellspacing="2" cellpadding="0" width="620">
<tr><td align="center"><p align="center">Чувак, ты крут как никогда, ты постиг фреймы :)</p>
</td></tr>
</table>
<foht face="Arial" size="1">&copy; Copyright Lamer Production 2000 :)</font>
</center>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE>Пример</TITLE>
</HEAD>
<BODY>
<center>
<A HREF="http://www.xakep.ru" target="_top"><img src="http://www.xakep.ru/xakep.gif" border="0" widht="88" height="31" alt="Xakep"></A>
</center>
</BODY>
</HTML>

Вот, что у тебя скорее всего получилось:

Ну и теперь децел о формах. Удобные такие хрени, которые позволяют создавать формочки со списками чего-либо, текстовыми полями, радиокнопками и т.п. Причем потом все введенные данные можно при нажатии кнопки Submit обработать скриптом или же переслать на мыло. Остановимся на втором варианте и наваяем для примера простенькую форму, но содержащую разные элементы:

Код формы:

<head>
<title>Пример для журнала "Хакер"</title>
</head>
<body>
<р align="left">
<form name="xakep_forma" method="post" action="mailto:твое_мыло" enctype="text/plain">
<hr size="1" color="#000080" width="100%">
<font face="Arial" size="2" color="#FF0000">Чудная форма</font>
<br>
<hr size="1" color="#000080" width="100%">
Кто там: <br>
<input type="text" name="who" size="30" value="">
<br><br>
Кликуха: <br>
<input type="text" name="nickname" size="30" value="">
<br><br>
Че нада: &nbsp;&nbsp;
<input type="radio" name="what" value="shokolad" checked >Шоколаду
<input type="radio" name="what" value="money">Денег
<input type="radio" name="what" value="girl">Девочку
<br><br>
И как? &nbsp;&nbsp;
<select name="how">
<option selected >красную
<option>зеленую
<option>B обертке
</select>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Быстро? &nbsp;&nbsp;
<input type="checkbox" name="quickly" value="yes">угу
<br><br>
Пожелания: <br><textarea type="text" name="contact_order" cols=40 rows=5
value="" >Мля</textarea>
<br><br>
<input type="submit" name="submit" value="Послать нa"><input type="reset" name="reset"
value="Очистить на"></form>
</p>
</body>
</html>


Чудная форма

Кто там:


Кликуха:


Че нада:    Шоколаду Денег Девочку

И как?             Быстро?    угу

Пожелания :


Ну что, вник? А это тока самые основы, дальше как в анекдоте - чем дальше в лес, тем жирнее партизанки. Короче, распечатай, повесь на стенку и проверяй зрение. Еще можно другу загнать за четвертной. То есть статья очень ценная, вырежи и не выбрасывай.

 

 

дизайн

раскрутка

web-прог.

развлечения

статейки

софт

игры

на главную

гостевая

заказать сайт

сочинения

мои друзья