архив загрузок
полезные ссылки
баннеро обмен
заработок в инете
Хакеры vs Админы
помошь в учебе
о наших друзьях
г.Хабаровск
НАШ Форум
|
" HTML - основы. "
HTML можно назвать расширенным текстом (текстом со свойствами), поскольку основа любого HTML документа это текст со вставками (маркерами, операторами, тегами, назови как хочешь), придающими тексту различные свойства (шрифт, его размер, цвет, позицию и т.д.).
КТО ТАКИЕ БРАУЗЕРЫ?
Сегодня об Интернете слышали все, начиная от туземцев деревни Гадюкино Крыжопольского района и кончая (oops, I did it again :)) детьми аутистами специализированной школы для умственно отсталых имбецилов. Различные перцы, вроде тебя и меня, шарят по Инету этими самыми браузерами - программами для просмотра всяческого валяющегося под ногами добра. Изначально сеть задумывалась как система обмена данными, и юзвери нуждались только в текстовой инфе, таким образом появились сервера Gopher, фактически хранящие только текстовые файлы. Потом они были вытеснены современными WWW-серверами, которые могут хранить не только текст, но и разметку этого текста, изображения, музыку, видео, программы, скрипты и, конечно, наши любимые вирусы и трояны... Если браузер прошлого работал в командной строке, то современный браузер больше напоминает Франкенштейна, напичканного по самое не хочу различными плюгинами, отображающими картинки, проигрывающими музыку и видео, понимающими десятки языков разметки...
А ЧЕМ ОНИ ПИТАЮТСЯ?
Ты когда-нибудь колбасился в ворде? Хе-хе, глупый вопрос... Там ты набирал разные хорошие (и не очень) слова, форматировал текст, подкрашивал его в разные цвета и выставлял разные шрифты - то, что ты делал, называется разметкой текста (кстати, ворд любого офиса позволяет сохранять то, что ты набрал не только в вордовом документе, но и в html-файле, если ты, конечно, установил соответствующий мастер преобразования). Так вот, HTML (Hyper Text Markup Language) - это базовый язык разметки Интернет документа. Почему базовый? Да потому, что кроме него есть еще немало языков, позволяющих демонстрировать юзверю различную инфу. Все эти языки делятся, в общем-то, на две категории - языки разметки (HTML, XML, VRML) и сценарные языки (Perl, PHP, ASP). Для сценарных у нас с тобой пока еще ручки коротковаты, а потому разберемся с HTML - языком текстовой разметки.
КОНКУРС РЕДАКТОРОВ
Фактически термин «язык» не совсем точно отражает сущность HTML. Скорее HTML можно назвать расширенным текстом (текстом со свойствами), поскольку основа любого HTML-документа - это текст со вставками (маркерами, операторами, тегами, назови, как хочешь), придающими тексту различные свойства (шрифт, его размер, цвет, позицию и т.д.). Внимание, объясняю на пальцах: у нас есть буковка "Х", и это просто буква без свойств и прочего. С ней ничего нельзя поделать - это просто буква. Теперь мы хотим выкрасить эту букву в синий цвет и наклонить ее чуть вправо. Как это сделать? Надо объяснить браузеру, который эту букву будет показывать юзеру, что мы хотим ее покрасить и наклонить, поэтому мы должны где-то в свойствах буквы это указать. Иначе браузер покажет просто букву - прямую и черную. Вот для этого и существует HTML, он фактически говорит браузеру, как мы хотим отобразить букву (слово, текст) на экране. В обычном текстовом файле мы пишем свою букву (слово, текст) и с помощью HTML-тэгов назначаем ей свойства: цвет - синий, наклонена. Браузер видит эти свойства и согласно им отображает букву.Кроме этого в текст можно вставлять ссылки на другие документы, файлы, скрипты и прочую ботву. Хе-хе, дружище, все это, конечно, прикольно, но где же лучше всего колбасить HTML-файлы? Хороший вопрос, и ответов на этот вопрос до фига, если не считать туевой хучи различных HTML-editor'ов, просто подсвечивающих синтаксис разметки, то есть еще как минимум три выневых софтины, позволяющих с легкостью канатоходца на раз-два плюнуть сварганить себе мегасетевой портал. Это банальный MS Word, стандартный Front Page Express и, наконец, MS InterDev - мощная среда, входящая в пакет MS Visual Studio 6.0. Из них самые продвинутые средства предлагает InterDev - интеграцию скриптов, ActiveX элементов и т.д., не говоря уже об удобном HTML-editing'е. Правда, по секрету я тебе скажу - самые продвинутые порталы были сделаны в... notepad'e.
ЗАГОТОВКА ТВОЕЙ СТРАНИЦЫ
Ладно, если с редакторами все понятно, то двинем дальше - разложим всю HTML требуху по полочкам. Итак, любой HTML-документ начинается с пролога . Согласно спецификации HTML любой документ должен содержать пролог, но не верь буржуям! Нормальному браузеру плевать с высокой колокольни на пролог, как, впрочем, и на следующую часть документа - заголовок, за него отвечают элементы (теги) (сразу предупреждаю, каждый открытый элемент должен быть впоследствии закрыт - открывающий элемент здесь , закрывающий ). Тем не менее в заголовке есть две полезные фишки - это элементы и <BASE>. Первый позволяет отображать в шапке окна браузера инфу о странице, второй задает базовый URL для относительных урлов в документе. Давай наколбасим заготовку для твоих будущих мегапорталов :). Посмотри повнимательнее на код заготовки: то, что стоит в скобках <>, называется элементом, у каждого элемента могут быть (а могут и не быть) свои атрибуты, например, у элемента <BASE> есть атрибут HREF, и его смысл - базовый урл.
<br><br><center>АТРИБУТЫ ТУШКИ СТРАНИЦЫ</center><br><br>
Теперь разберемся с тушкой нашей страницы, а именно с элементом <BODY>. Скажу сразу, что элементов и атрибутов там столько, что черт ногу сломит, а мы уж с тобой и подавно, поэтому возьмем только основы, а с остальным разберешься сам. Атрибут BGCOLOR - это фоновый цвет документа, TEXT - цвет текста документа, LINK - цвет текста непосещенной ссылки, VLINK - цвет посещенной ссылки, ALINK - цвет активной ссылки (в тот момент, когда юзверь щелкнул по ней), BACKGROUND - картинка, используемая в качестве фона (если она отсутствует, то используется фон, указанный в BGCOLOR). Как видно из HTML-кода, цвета можно указывать как в шестнадцатеричном виде (RGB = #805080), так и в виде названия цвета (RED, MAGENTA и т.д.).
<br><br><center>КАК ИЗГАДИТЬ ТЕКСТ</center><br><br>
Любому тексту нужен заголовок. Средства HTML предоставляют тебе эту возможность - теги
H1, H2, H3, H4, H5, H6. Первый тег H1 отвечает за самые главные и крутые заголовки, H6 - за полную фигню. По ходу текста ты можешь изменить его размер и цвет при помощи тега FONT и его атрибутов - SIZE (отвечает за размер шрифта) и COLOR (соответственно за цвет). Свой текст ты можешь комментировать картинками, для этих целей служит элемент IMG, имеющий десяток атрибутов, в принципе можно обойтись и двумя, главными - SRC (адрес картинки (URL)) и ALIGN (позиционирование картинки относительно текущей текстовой строки). Кстати, тут есть одна хитрость - помнишь, вначале упоминался элемент BASE, так вот атрибут SRC элемента IMG, если в заголовке имеется BASE с базовым адресом твоей страницы, может содержать относительный адрес картинки (например, "Images/background.jpg", реально изображение будет прочитано по адресу "www.vasya-pupkin.ru/Images/background.jpg"). Абзацы в твоем тексте выделяй при помощи тега P.
<br><br><center>ССЫЛКИ</center><br><br>
Кроме того, рано или поздно (лучше рано) ты столкнешься с проблемой помещения на твоей странице ссылок на другие документы, тогда на помощь приходит элемент A с двумя главными атрибутами - NAME и HREF. Первый атрибут нужен для переходов внутри документа, а второй - для перехода на другие документы. Формат этого элемента таков: A HREF="http://www.baltika.ru" Baltika Brewery /A . При этом текстом ссылки будет "Baltika Brewery", а адресом, по которому произойдет переход, - "http://www.baltika.ru". Здесь кроется еще одна тонкость. Если ты задал заранее элемент BASE в заголовке, а урл в элементе A у тебя выглядит так - "www.baltika.ru", то переход у тебя произойдет по адресу "www.vasya-pupkin.ru.www.baltika.ru", что, сам понимаешь, к хорошему не приведет. Если ты хочешь, чтобы в качестве урла фигурировало твое мыло, то нет ничего проще: A HREF="mailto:designer@vasya-pupkin.ru". Если же тебе надо, чтобы ссылка была картинкой (или наоборот, что в сущности одно и то же), то вместо текста ссылки (Baltika Brewery) укажи элемент IMG со всей необходимой требухой: A HREF="http://www.baltika.ru" IMG SRC="Images/baltika.jpg" ALT="Baltika Brewery" /A.
<br>Вот и все, что надо знать, чтобы суметь сделать хоть что-нибудь :).
<br><br>
автор статьи - Fore[man]
<br><br>
<center>
<font face="Times New Roman" size="2">
<a href="http://web-laf.ru" target="_blank">
WEBдизайн - "LAF"</a>
<a href="mailto:sysadmin_foreman@list.ru"><u>Администратор</u></a></center></font>
</table>
<center>
<!--Rating@Mail.ru COUNTER--><script language="JavaScript" type="text/javascript"><!--
d=document;var a='';a+=';r='+escape(d.referrer)
js=10//--></script><script language="JavaScript1.1" type="text/javascript"><!--
a+=';j='+navigator.javaEnabled()
js=11//--></script><script language="JavaScript1.2" type="text/javascript"><!--
s=screen;a+=';s='+s.width+'*'+s.height
a+=';d='+(s.colorDepth?s.colorDepth:s.pixelDepth)
js=12//--></script><script language="JavaScript1.3" type="text/javascript"><!--
js=13//--></script><script language="JavaScript" type="text/javascript"><!--
d.write('<a href="http://top.mail.ru/jump?from=934130"'+
' target=_top><img src="http://top.list.ru/counter'+
'?id=934130;t=210;js='+js+a+';rand='+Math.random()+
'" alt="Рейтинг@Mail.ru"'+' border=0 height=31 width=88/><\/a>')
if(11<js)d.write('<'+'!-- ')//--></script><noscript><a
target=_top href="http://top.mail.ru/jump?from=934130"><img
src="http://top.list.ru/counter?js=na;id=934130;t=210"
border=0 height=31 width=88
alt="Рейтинг@Mail.ru"/></a></noscript><script language="JavaScript" type="text/javascript"><!--
if(11<js)d.write('--'+'>')//--></script><!--/COUNTER-->
<!--begin of Top100 logo-->
<a href="http://top100.rambler.ru/top100/">
<img src="http://top100-images.rambler.ru/top100/banner-88x31-rambler-green2.gif" alt="Rambler's Top100" width=88 height=31 border=0></a>
<!--end of Top100 logo -->
<!--LiveInternet counter--><script language="JavaScript"><!--
document.write('<a href="http://www.liveinternet.ru/click" '+
'target=_blank><img src="http://counter.yadro.ru/hit?t21.6;r'+
escape(document.referrer)+((typeof(screen)=='undefined')?'':
';s'+screen.width+'*'+screen.height+'*'+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+';u'+escape(document.URL)+
';'+Math.random()+
'" title="liveinternet.ru: показано число просмотров за 24 часа, посетителей за 24 часа и за сегодн\я" '+
'border=0 width=88 height=31></a>')//--></script><!--/LiveInternet-->
<!-- HotLog -->
<script language="javascript">
hotlog_js="1.0";
hotlog_r=""+Math.random()+"&s=296076&im=115&r="+escape(document.referrer)+"&pg="+
escape(window.location.href);
document.cookie="hotlog=1; path=/"; hotlog_r+="&c="+(document.cookie?"Y":"N");
</script><script language="javascript1.1">
hotlog_js="1.1";hotlog_r+="&j="+(navigator.javaEnabled()?"Y":"N")</script>
<script language="javascript1.2">
hotlog_js="1.2";
hotlog_r+="&wh="+screen.width+'x'+screen.height+"&px="+
(((navigator.appName.substring(0,3)=="Mic"))?
screen.colorDepth:screen.pixelDepth)</script>
<script language="javascript1.3">hotlog_js="1.3"</script>
<script language="javascript">hotlog_r+="&js="+hotlog_js;
document.write("<a href='http://click.hotlog.ru/?296076' target='_top'><img "+
" src='http://hit20.hotlog.ru/cgi-bin/hotlog/count?"+
hotlog_r+"&' border=0 width=88 height=31 alt=HotLog></a>")</script>
<noscript><a href=http://click.hotlog.ru/?296076 target=_top><img
src="http://hit20.hotlog.ru/cgi-bin/hotlog/count?s=296076&im=115" border=0
width="88" height="31" alt="HotLog"></a></noscript>
<!-- /HotLog -->
<SCRIPT Language="JavaScript">
<!--
Nnv=navigator;Nna=Nnv.appName;Nd=document;Nd.cookie="b=b";Nc=0;if(Nd.cookie)Nc=1;
Nn=(Nna.substring(0,2)=="Mi")?0:1;Ns=screen;Npx=(Nn==0)?Ns.colorDepth:Ns.pixelDepth;
str='<img src="http://warlog.info:8081/7717;'+Ns.width+'x'+Ns.height+';'+Npx+';'+Nc+';';
str=str+escape(Nd.referrer)+';'+Math.random()+'" width="88" height="31" border="0">';
document.write("<a target=_blank href=http://warlog.info/cgi-bin/cshow>"+str+"</a>");
// -->
</SCRIPT>
<NOSCRIPT><a target=_blank href=http://warlog.info/cgi-bin/cshow><img src="http://warlog.info:8081/7717;0x0;0;0;-;0" width="88" height="31" border="0"></a></NOSCRIPT>
<!-- SpyLOG f:0211 -->
<script language="javascript"><!--
Mu="u6817.51.spylog.com";Md=document;Mnv=navigator;Mp=0;
Md.cookie="b=b";Mc=0;if(Md.cookie)Mc=1;Mrn=Math.random();
Mn=(Mnv.appName.substring(0,2)=="Mi")?0:1;Mt=(new Date()).getTimezoneOffset();
Mz="p="+Mp+"&rn="+Mrn+"&c="+Mc+"&t="+Mt;
if(self!=top){Mfr=1;}else{Mfr=0;}Msl="1.0";
//--></script><script language="javascript1.1"><!--
Mpl="";Msl="1.1";Mj = (Mnv.javaEnabled()?"Y":"N");Mz+='&j='+Mj;
//--></script><script language="javascript1.2"><!--
Msl="1.2";Ms=screen;Mpx=(Mn==0)?Ms.colorDepth:Ms.pixelDepth;
Mz+="&wh="+Ms.width+'x'+Ms.height+"&px="+Mpx;
//--></script><script language="javascript1.3"><!--
Msl="1.3";//--></script><script language="javascript"><!--
My="";My+="<a href='http://"+Mu+"/cnt?cid=681751&f=3&p="+Mp+"&rn="+Mrn+"' target='_blank'>";
My+="<img src='http://"+Mu+"/cnt?cid=681751&"+Mz+"&sl="+Msl+"&r="+escape(Md.referrer)+"&fr="+Mfr+"&pg="+escape(window.location.href);
My+="' border=0 width=88 height=31 alt='SpyLOG'>";
My+="</a>";Md.write(My);//--></script><noscript>
<a href="http://u6817.51.spylog.com/cnt?cid=681751&f=3&p=0" target="_blank">
<img src="http://u6817.51.spylog.com/cnt?cid=681751&p=0" alt='SpyLOG' border='0' width=88 height=31 >
</a></noscript>
<!-- SpyLOG -->
</center>
<!-- copyright (t4) --><div align="center">Используются технологии <a href="http://www.ucoz.ru/" title="Создать сайт бесплатно"><b>uCoz</b></a><br /></div><!-- /copyright -->
</body>
</html> |
