Едно добро начало с HTML

Езика HTML ви дава възможност да използвате три вида списъци - подредени, неподредени и списъци с обяснения. Подредените списъци са номерирани и изглеждат така :

Неподредените списъци използват вместо номерация, някакъв символ. Например точка:

Списъците с обяснения не използват символ или цифра пред текста. Вместо това поставят обяснителен текст след всеки елемент от списъка:

Иван        счетоводител
Георги     касиер
Захари     шофьор

Подреден списък можете да създадете с елемента <OL> и съответно затварящия </OL>. Елементите на списъка се задават с елемента <LI>, който може да се използва като двойка елементи или като единичен елемент. Нека направим един такъв списък :

<HTML>
<HEAD>
<TITLE> ordered list</TITLE>
</HEAD>
<BODY>
да не забравя да купя:
<OL>
<LI>захар
<LI>яйца
<LI>сода каустик за тъщата
</OL>
</BODY>
<HTML>

Въпреки, че не сме задали да се показват номера 1. 2. 3. , те се добавят автоматично в списъка. Ако изкате списъка да се показва с римски вместо с арабски цифри, трябва да добавите атрибут TYPE на елемента <OL>. Атрибута TYPE показва какви символи да се визуализират преди елементите на списъка. Стойностите на атрибута TYPE за подредените списъци са :

трябва да добавите към елемента <OL> TYPE=I . С други думи трябва да напишете <OL TYPE=I>. Ако пропуснете атрибута TYPE, по подразбиране ще се показва списък от типа 1. 2. 3.

Неподреден списък се създава с двойката елементи <UL></UL>. Този списък за разлика от подредения не е номериран, а използва някакъв символ за всеки елемент от списъка, например точка.
Да направим горния пример да се показва като неподреден списък:

<HTML>
<HEAD>
<TITLE> unordered list</TITLE>
</HEAD>
<BODY>
да не забравя да купя:
<UL>
<LI>захар
<LI>яйца
<LI>сода каустик за тъщата
</UL>
</BODY>
<HTML>

При неподредените списъци също можете да използвате атрибута TYPE. Валидните стойности за него са disk, square и circle. Вижте как ще изглежда същия списък, само че с различни стойности на TYPE :

· захар

· яйца

· сода

§ захар

§ яйца

§ сода

o захар

o яйца

o сода

Списъците с обяснения се създават с двойката елементи <DL></DL>. Елементите на списъка се задават с <DT>, а обяснението към него с <DD>. Примера в началото на страницата с имената и професиите ще изглежда по следния начин:

<HTML>
<HEAD>
    <TITLE>definition list</TITLE>
<HEAD>
<BODY>
<DL>
    <DT>Иван
   <DD>счетоводител
   <DT>Георги
    <DD>касиер
   <DT>Захари
    <DD>данъчен инспектор
</DL>
</BODY>
</HTML>

Ако желаете, можете да влагате един в друг списъци от един вид или от различни видове. Ще ви дам пример с вложени един в друг подреден и неподреден списък, като този например :

HTML документа на горния пример изглежда ето така :

<HTML>
<HEAD>
    <TITLE>вложени списъци</TITLE>
</HEAD>
<BODY>
<OL>
   <LI>Да купя за вкъщи:
        <UL TYPE=circle>
            <LI>сладолед
            <LI>торта
        </UL>
   <LI>Да купя за офиса:
        <UL TYPE=circle>
           <LI>дискети
           <LI>химикалки
           <LI>нова мишка
       </UL>
</OL>
</BODY>
</HTML>

Можете да използвате и собствени картинки при неподредените списъци. За да ви покажа, направих една картинка -червена точка с размер 9х9 пиксела.

<HTML>
<HEAD>
    <TITLE>списък с картинка</TITLE>
</HEAD>
<BODY>
<UL imagesrc="redpoint.gif">
   <LI>дискети</LI>
   <LI>химикалки</LI>
   <LI>нова мишка</LI>
</UL>
</BODY>
</HTML>

Изполвайки атрибута imagesrc на елемента <UL> зададох на списъка името на файла, който да се показва пред елементите. Картинката е файл с име redpoint.gif и трябва да се намира в основната папка, където разполагате HTML документите си. Можете да я сложите и в подпапка, но тогава трябва да зададете и пътя до нея, например: <UL imagesrc="images/redpoint.gif"> ако подпапката се казва images. Ако сте забелязали, в края на тази страница използвам също списък, само че със сини точки и включени хиперлинкове към други страници :-)

1. Списъците са три вида, подредени, неподредени и списъци с обяснения.

2. Подредените списъци са номерирани с арабски или римски числа, както и с малки или големи букви от A до Z.

3. Неподредените списъци вместо нимерация използват някакъв символ, обикновенно диск, квадрат или окръжност, но можете да ползвате и собствени картинки.

ХОРИЗОНТАЛНИ ЛИНИИ

Езика HTML позволява да се изчертават хоризонтални линии с елемента <HR>. Този елемент няма съответен затварящ елемент, но има някои атрибути. Дължината на линията се задава с атрибута WIDTH на елемента <HR>. Дължината можете да зададете в пиксели или в проценти от вирината на екрана. Нека начертаем 2 линии, едната е дължина 100 пиксела, а другата 100% от ширината на екрана :

<BODY>
<HEAD>
<TITLE>Хоризонтални линии</TITLE>
<HEAD>
<BODY>
<HR WIDTH=100>
<HR WIDTH=100%>
</BODY>
</HTML>

Когато променяте размера на прозореца на браузъра втората линия ще се променя с него, докато първата ще си остане 100 пиксела. Обърнете внимание, че линиите се подравняват в средата по подразбиране. Ако искате да промените това положение трябва да използвате атрибута ALIGN, и неговите параметри left, center и right, съответно за подравняване вляво, в средата и вдясно на страницата. Параметъра center спокойно можете да го пропуснете, защото линията така или иначе се подравнява в средата при липсата на атрибута ALIGN. Сега да начертаеме две линии с дължина по 300 пиксела и да ги подравним съответно вляво и вдясно:

<BODY>
<HEAD>
<TITLE>Хоризонтални линии</TITLE>
<HEAD>
<BODY>
<HR WIDTH=300 ALIGN="left">
<HR WIDTH=300 ALIGN="right">
</BODY>
</HTML>

Дебелината на линията се променя с атрибута SIZE. Параметрите на SIZE се задават в пиксели. Например SIZE=5 означава, че линията е с дебелина 5 пиксела. Ето какво представлява такава линия с дължина 80%, подравнена в средата:

<BODY>
<HEAD>
<TITLE>Хоризонтални линии</TITLE>
<HEAD>
<BODY>
<HR WIDTH=80% SIZE=5>
</BODY>
</HTML>

Ако зададем и атрибута NOSHADE линията ще се покаже плътна, без сянка.

<BODY>
<HEAD>
<TITLE>Хоризонтални линии</TITLE>
<HEAD>
<BODY>
<HR WIDTH=80% SIZE=5>
</BODY>
</HTML>

Цвят на линията можете да зададете с COLOR, но се опасявам, че почитателите на Netscape няма да го видят. Ето една синя линия с дебелина 8 пиксела и ширина 90% :

<BODY>
<HEAD>
<TITLE>Хоризонтални линии</TITLE>
<HEAD>
<BODY>
<HR WIDTH=90% SIZE=8 COLOR="#0000FF">
</BODY>
</HTML>

Езика HTML ви позволява да правите препратки към други страници, към части от същата страница, към файлове, картинки, електронна поща. Тези препратки се наричат ХИПЕРЛИНКОВЕ (или хипервръзки). Без хиперлинковете един web сайт не би имал никакъв смисъл. Хиперлинк се създава с двойката елементи <A> и </A>. Когато правите препратка към някакъв интернет адрес, трябва да използвате атрибута HREF на елемента <A>. Ето един пример, който препраща към адрес www.search.bg :

<HTML>
<HEAD>
<TITLE>hyperlink</TITLE>
</HEAD>
<BODY>
<A HREF="http://www.search.bg">SEARCH.BG</A>
</BODY>
</HTML>

Нека да анализираме този пример. С <A HREF= се задава адреса, към който води препратката. В случая това е адреса на search.bg, предхождан от http://. Този адрес се нарича още URL. След това изписвате текста, който ще води до съответния адрес, в случая текста е SEARCH.BG. На екрана ви този сайт трябва да изглежда така :

Когато посочите с мишката този надпис, курсора се сменя от стрелка на сочеща ръка. Ако кликнете върху него отивате директно на адреса на search.bg. Забележете, че цвета на текста е син, а самия текст е подчертан без вие да сте задавали такива параметри. Това е така, защото браузъра по подразбиране показва хиперлинка подчертан и със син цвят. Ако кликнете върху него, отидете на search.bg и после пак се върнете на тази страница, цвета вече няма да бъде син, а лилав. Причината за това е, че браузъра визуализира посетените от вас линкове с лилав цвят. Можете да промените цвета на линка по ваше желание. Това става с атрибутите на елемента <BODY> LINK, ALINK и VLINK. LINK задава какъв да бъде цвета на линка, ALINK (active link) задава цвета на активния линк (този, на който се намирате в момента), а VLINK (visited link) задава цвета на посетените вече от вас линкове. Ето един такъв пример:

<HTML>
<HEAD>
<TITLE>hyperlink</TITLE>
</HEAD>
<BODY LINK="#00FF00" ALINK="#00FFFF" VLINK="#FF0000">
Посетете нашия
<A HREF="http://forum.search.bg"><B>FORUM</B></A>
</BODY>
</HTML>

Натиснете ТУК за да видите как изглежда този пример на нова страница. Линка ще бъде със зелен цвят, активния линк със светлосин, а посетения със червен. Забележете, че в този случай се отвори нов прозорец на браузъра. Това стана, защото използвах атрибута TARGET на елемента <A>. Атрибута TARGET има няколко параметъра. За да се отвори линка в нов прозорец се ползва параметъра "_blank". Ако пропуснете TARGET линка по подразбиране се отваря в същия прозорец. Вижте примера с линка към SEARCH.BG, но отварящ се в нов прозорец :

<HTML>
<HEAD>
<TITLE>hyperlink</TITLE>
</HEAD>
<BODY>
<A HREF="http://www.search.bg" TARGET="_blank">SEARCH.BG</A>
</BODY>
</HTML>

Кликнете върху SEARCH.BG и ще видите сами. Другите параметри на TARGET ще ги разгледаме в урока "РАМКИ".

Освен препратки към други сайтове, можете да правите препратка и към собствения си сайт. За целта трябва да слагате всички web документи, създадени от вас в една папка или в нейните подпапки. Нека да направим един сайт ( не страница, а именно сайт, съвкупност от страници с препратки една към друга). Ще направим сайта от 3 страници, като ще ги именуваме "начална страница", "лични данни" и "свържете се с мен". Направете си нова папка на твърдия диск и и дайте името "website". Сега нека направим първата страница:

<HTML>
<HEAD>
<TITLE>начална страница</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>ЛИЧНАТА МИ СТРАНИЦА</H1>
</CENTER>
<HR WIDTH=90% SIZE=6>
<BR>
<A HREF="forme.html">Нещо повече за мен.</A><BR>
<A HREF="contact.html">Пишете ми</A>
</BODY>
</HTML>

Запазете този документ във същата папка под името index.html. Сега да направим другите две страници от сайта:

<HTML>
<HEAD>
<TITLE>лични данни</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>ЗА МЕН</H1>
</CENTER>
<HR WIDTH=90% SIZE=6>
<BR>
Тук напишете нещо за себе си
<BR>
<A HREF="index.html">Към началната страница</A><BR>
<A HREF="contact.html">Пишете ми</A>
</BODY>
</HTML>

Този документ го запазете в същата папка по името forme.html и направете последната страница с името contact.html.

<HTML>
<HEAD>
<TITLE>свържете се с мен</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>ПИШЕТЕ МИ</H1>
</CENTER>
<HR WIDTH=90% SIZE=6>
<BR>
Тук напишете адреса си, e-mail и т.н.
<BR>
<A HREF="index.html">Към началната страница</A><BR>
<A HREF="forme.html">За мен</А><BR>
<A HREF="mailto:pencho@abv.bg">Моя e-mail</A>
</BODY>
</HTML>

Ето как ще изглежда този сайт. Натиснете ТУК, или го стартирайте от папка website на твърдия си диск. Виждате, че вече отделните страници са свързани а препратки помежду им. Когато задавате линкове към файлове, които са във същата папка, изписвате само името им и разширението (forme.html). Ако HTML документа е в някаква подпапка на вашата папка, например подпапка main, трябва да зададете и пътя до там <A HREF="main/forme.html">За мен</А>.
Новото в горния пример е <A HREF="mailto:pencho@abv.bg">Моя e-mail</A>. Когато срещне mailto:име_на_мейла и посетителят на страницата кликне върху текста след него браузъра стартира програмата му за електронна поща, която вписва в полето за изпращане адреса на мейла, който е зададен след mailto:
По този начин спестявате на посетителят на страницата, който иска да ви пише, ръчното стартиране и настройка на програмата си за електронна поща. Ако посетителят няма такава програма (Eudora или Outlook Expres например) или използва webmail в hotmail или yahoo например, параметърът mailto: няма да върши работа. Затова винаги пишете вашия e-mail между <A> и </A>. Ето така:

Освен към други страници и e-mail можете да правите препратки в рамките на същата страница. Това става по следния начин. Изполвайки елемента <A> давате някакво име на определена част от HTML документа, нещо като маркировка. Например, в началото на страницата която разглеждате в момента съм дал име "begin":

Ако си спомняте така започваше тази страница. На първите две думи съм им дал име за препратка "begin". Сега ако напиша <A HREF="#begin">върнете се в началото на страницата</A> и кликнете върху текста, ще се върнете в началото на страницата. Ето, убедете се сами:

Можете да слагате навсякъде в документа такива маркировки и да правите препратки към тях. Също така, можете да препращате към друг HTML документ, в който има маркировка. Това става като първо напишете името на документа, после # и после името на маркировката.

<A HREF="index.html#begin">Отивате на index.html с препратка към част begin</A>

<A HREF="http://www.search.bg/index.html#begin">Отивате на index.html с препратка към част begin</A>

1. Хиперлинковете (или хипервръзките) са препратки към други страници от същия сайт или към други сайтове, към електронна поща или към части от същата страница или от сруги страници.

2. Хиперлинк се реализира с елемента <A> и атрибута HREF. Име на част от страницата се дава с атрибута NAME.

TYPE=1	за списъци 1. 2. 3.
TYPE=a	за списъци a. b. c.
TYPE=A	за списъци A. B. C.
TYPE=i	за списъци i. ii. iii.
TYPE=I	за списъци I. II. III.

	дискети
	химикалки
	нова мишка