PDA

View Full Version : html език



AnD1i
04-08-2009, 20:26
Преди време видях наколко поста на който пише от каде да си сваля html език и за това написах този урок по html.

HTML, което означава HyperText Markup Language , е език за създаване на web страници. Страниците създадени с HTML могат да съдържат графика, текст, музика, анимация, както и връзки към други страници(хиперлинкове). HTML е лесен за научаване език и вярвам, че в края на този урок Вие ще можете да създадете първата си web страница. От какво се нуждаете за да създадете такава страница? Трябват ви две неща - елементарен текстов редактор и интернет браузър. Ако сте потребители на Windows98 имате и двете. За текстов редактор използвайте вградения в Windows NOTEPAD ( не ви препоръчвам да ползвате Word) а за браузър можете на използвате Internet Explorer или Netscape Navigator. Файлът, който ще създадете с Notepad е текстов файл, който обаче трябва да запишете с разширение .html (или .htm). По нататък ще го наричам HTML документ. Сега нека направим една web страница. За целта стартирайте Notepad и напишете следното:

<HTML>
<HEAD>
<TITLE> My first page </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Сега запазете на твърдия диск написаното от вас във файл с разширение .html . За целта отворете менюто File в Notepad, изберете Save As и в полето име на файл напишете index.html
Можете да отворите току що направената страница и да я разгледате с някой браузър. За целта кликнете два пъти върху файла в папката, където се намира и той ще бъде отворен от браузъра по подразбиране. В горния случай няма да видите нищо, защото страницата не съдържа никаква информация, която да се визуализира на екрана. Нека ви обясня кое какво означава.
Текста между символите < и > се нарича елемент(tag). Елемента показва на браузъра какво действие да извърши. Можем да разделим елементите на 2 вида - отварящи и затварящи. Отварящите задават на браузъра да започне някакво действие а затварящите да го приключи. Затварящия елемент се различава от отварящия само по символа / преди името на елемента. От примера се вижда, че елементите вървят по двойки, отварящ и затварящ.
HTML документа започва винаги с елемента <HTML> и завършва съответно с </HTML>. <HTML> означава начало на HTML документ, а </HTML> край на HTML документ. Следващата задължителна двойка елементи е <HEAD> и </HEAD>, което буквално означава глава. В главата обикновено се съдържа информация за самия HTML документ. В примера там стои заглавието на документа <TITLE>. Между елементите <TITLE> и </TITLE> се съдържа името на HTML документа. Когато срещне тази двойка елементи браузъра визуализира текста между тях на заглавната си лента най-отгоре.
Същинската част на HTML документа се намира между елементите <BODY> и </BODY> . Виждате, че елементите могат да се влагат един в друг, но внимавайте да спазвате последователноста на двойките елементи. Например неправилно е да се напише следното:
неправилно правилно

<HTML> <HTML>
<HEAD> <HEAD>
</HTML> </HEAD>
</HEAD> </HTML>



Затварящия елемент </HEAD> трябва да бъде преди затварящия </HTML>. Трябва да се получи нещо като огледален образ, първия затварящ трябва да отговаря на последния отварящ.

Ето какво научихте до тук.

1. WEB страницата е всъщност текстов файл, но с разширение .html (или .htm), който лесно можете да създадете с помощта на Windows notepad.

2. HTML документа съдържа елементи, които са заградени със символите < и > и показват на браузъра какво действие трябва да извърши на екрана Ви.

3. Елементите условно се разделят на два вида - отварящи и затрварящи, като вървят по двойки, на всеки отваряш следва един затварящ(с малки изключения).

4. Задължителните елементи за всеки HTML документ са <HTML></HTML> за начало и край на документа, <HEAD></HEAD> за информация за самия документ и <BODY></BODY> за съдържанието на документа.

AnD1i
04-08-2009, 20:27
Цветовете в web страниците се представят със шестразредни шестнадесетични числа, започващи със символа "#". Например #000000, #FFFFFF, #COBB56. Първите двойка цифри в числото означават количеството на червения цвят, вторите на зеления, третите на синия. Всеки цвят съдържа 256 нюанса, от 00 до FF, като 00 е липса на цвят, а FF пълен цвят. При смесването на основните цветове, браузъра визуализира на вашия монитор получения цвят. Ще ви дам пример. Когато стойностите за трите цвята са 00, тогава се показва черен цвят. При стойности и за трите цвята FF цветът е бял. Разгледайте следната таблица :
червен зелен син получен цвят
00 00 00
FF FF FF
00 00 FF
00 FF 00
FF 00 00
FF FF 00
FF 00 FF
00 FF FF

Както се вижда цвета #0000FF е син, #FFFF00 жълт и т.н.

Сега вече можем да направим една web страница с цветен фон. За целта трябва да се добави към елемента <BODY> параметъра BGCOLOR= и съотверния цвят заграден с кавички. Сега напишете в notepad следното :

<HTML>
<HEAD>
<TITLE> blue background </TITLE>
</HEAD>
<BODY BGCOLOR="#0000FF">
Тази страница е на син фон
</BODY>
</HTML>

Запазете файла като color.html в някоя папка на твърдия си диск и го стартирайте с браузъра (кликнете два пъти върху иконката на файла). Браузъра показва вашата страница на син фон и текста "Тази страница е на син фон". Експериментирайте със стойностите след BGCOLOR= като внимавате стойностите за всеки цвят да са в границите между 00 и FF.
Нека направим текста в горния случай да се изписва с жълти букви. За целта добавяме още един параметър след <BODY>.

<HTML>
<HEAD>
<TITLE> blue background </TITLE>
</HEAD>
<BODY BGCOLOR="#0000FF" TEXT="#FFFF00">
Тази страница е на син фон със жълти букви
</BODY>
</HTML>

Параметъра TEXT= задава цвета на текста на цялата страница. Обърнете внимание, че затварящата скоба ">" на елемента <BODY> се поставя след параметрите.

Ето няколко примера със стойностите на различни цветове:
#003366 #CCFFCC #FF66FF #FFFF66
#99FF66 #663300 #CCCCCC #0066CC
#FF0066 #003300 #66FFFF #999966
#CC9900 #666666 #FFFFCC #98E9B8
#B632FC #B31115 #68E6CC #E6EDDE

Ето какво научихте за цветовете :

1. Цветовете в HTML се представят със шестразредни шестнадесетични числа, като първата двойка числа означава количеството на червения цвят, втората на зеления, третата на синия цвят. Цветът, който се показва на екрана се образува от смесването на тези три основни цвята.

2. Можете да направите Вашата страница с цветен фон, като добавите параметъра BGCOLOR= след елемента <BODY>. С параметъра TEXT= се задава цвят на текста на страницата.

AnD1i
04-08-2009, 20:28
Езика HTML ви позволява да разполагате текст на страницата, да го подравнявате, оцветявате, да задавате големината на шрифта и самия шрифт. Нека да направим една страница и да разположим някакъв текст :

<HTML>
<HEAD>
<TITLE>Text</TITLE>
<HEAD>
<BODY BGCOLOR="#0000FF" TEXT="#FF0000">
Това е web страница с червен текст на син фон
</BODY>
</HTML>

Запишете файла на диска с името text.html и го стартирайте с браузъра. Трябва да видите нещо подобно :
Това е web страница с червен текст на син фон

Текста, който се намира между елементите <BODY> и </BODY> се визуализира на екрана с червен цвят. Това става с атрибута TEXT="#FF0000" на елемента <BODY>. Ако промените параметрите на атрибута TEXT на #00FF00 например, текста ще е със зелен цвят (виж ЦВЕТОВЕ).

Ако искате да удебелите, наклоните или подчертаете текста, трябва да използвате двойките елементи и за удебеляване(Bold), и за наклон (Italic) и <U> и </U> за подчертаване (Underline). Вижте горния пример, само че с удебелен, наклонен и подчертан текст.

<HTML>
<HEAD>
<TITLE>Text</TITLE>
<HEAD>
<BODY BGCOLOR="#0000FF" TEXT="#FF0000">
<U>Това е web страница с червен текст на син фон</U>
</BODY>
</HTML>
Това е web страница с червен текст на син фон

Можете да използвате тези елемента за да форматирате различни части от текста по различен начин. Например да изпишете "Това е web" с наклонен шрифт, "страница с червен текст с наклонен и удебелен шрифт, "на син фон" с удебелен и подчертан шрифт. Ето как става :

Това е web страница с червен текст<U> на син фон</U>

Внимавайте с вложените елементи. Трябва първия затварящ да отговаря на последния отварящ от същия вид .Понеже така изглежда малко нечетливо, можете да го напишете така :

Това е web
страница с червен текст
<U> на син фон</U>

.....ефекта ще е същия. Въпреки че пренасяте различни части от текста на нов ред, браузъра не го разбира и слепва думите една зад друга. За да минете на нов ред трябва да използвате елемента
на края на текста. Този елемент е единичен и на него не отговаря затварящ елемент. Вижте следващия пример :

<HTML>
<HEAD>
<TITLE> Font </TITLE>
</HEAD>
<BODY>
<FONT COLOR="#FF0000">Червен текст.</FONT>

<FONT COLOR="#00FF00">Зелен текст на нов ред.</FONT>

<FONT COLOR="#0000FF">Син текст на нов ред.</FONT>

</BODY>
</HTML>

На екрана трябва да видите ето това :

Червен текст.
Зелен текст на нов ред.
Син текст на нов ред.

Параметъра TEXT на елемента <BODY> задава цвета на текста на цялата страница. Ако искате да зададете различен цвят за различни части от текста, трябва да използвате елемента <FONT> заедно с параметъра COLOR. Този елемент показва как да се форматира текста между <FONT> и </FONT>. В случая на първия текст му е зададен червен цвят с атрибута COLOR , на втория зелен а на третия син. Елемента
ви прехвърля на нов ред.
Елемента <FONT> има и други атрибути. Нека разгледаме атрибута SIZE. Той задава размера на шрифта, като стойностите му са от 1 до 7. 1 е най-малкия шрифт а 7 най-големия. Вижте горния пример, където за първия ред ще зададем шрифт с големина 4, за втория 1 а за третия 7.

<HTML>
<HEAD>
<TITLE> Font </TITLE>
</HEAD>
<BODY>
<FONT COLOR="#FF0000" SIZE=4>Червен текст.</FONT>

<FONT COLOR="#00FF00" SIZE=1>Зелен текст на нов ред.</FONT>

<FONT COLOR="#0000FF" SIZE=7>Син текст на нов ред.</FONT>

</BODY>
</HTML>

Червен текст.
Зелен текст на нов ред.
Син текст на нов ред.

Можете на един ред или в една дума да използвате различни по големина и цвят символи.

<HTML>
<HEAD>
<TITLE> Font </TITLE>
</HEAD>
<BODY>
<FONT COLOR="#FF0000" SIZE=2>Текст</FONT>
<FONT COLOR="#00FF00" SIZE=3>с различна</FONT>
<FONT COLOR="#0000FF" SIZE=7>г</FONT>
<FONT COLOR="#00FFFF" SIZE=6>о</FONT>
<FONT COLOR="#FF00FF" SIZE=5>л</FONT>
<FONT COLOR="#AA0066" SIZE=4>е</FONT>
<FONT COLOR="#0033CC" SIZE=3>м</FONT>
<FONT COLOR="#2200FF" SIZE=2>и</FONT>
<FONT COLOR="#FF7700" SIZE=1>н</FONT>
<FONT COLOR="#555555" SIZE=2>а</FONT>
<FONT COLOR="#DD1188" SIZE=3> и цвят.</FONT>
</BODY>
</HTML>

Текс с различна големина и цвят.

Буквите в този случай се прилепват една зад друга, защото липсва елемента
за пренос на нов ред.
Друг атрибут на <FONT> e FACE. С FACE можете да указвате на браузъра с какъв точно шрифт да се показва текста. Ако на FACE не е зададена стойност, браузъра показва щрифт по подразбиране. Ако държите обаче текса да се показва с някакъв определен шриф, трябва да го зададете:

<FONT FACE="Arial" > Това е текст със шрифт Arial.</FONT>
<FONT FACE="Times New Roman" > Това е текст със шрифт Times New Roman.</FONT>

В първия случай текста ще бъде със шрифт "Arial" , а във втория с "Times New Roman". Не задавайте много екзотични шрифтове, защото има опасност този който разглежда страницата ви нищо да не види. Придържайте се към оригиналните шрифтове, инсталирани с Windows. Моя съвет е, ако можете да избягвате да включвате атрибута FACE, така оставяте на браузъра сам да намери подходящия шрифт.
Друг начин да уголемите символите е чрез елементите <H1> до <H6>. Тези елементи се употребяват за изписване на заглавия. <H1> е най-големия използван шрифт, а <H6> най-малкия. Вижте следващия пример :

<HTML>
<HEAD>
<TITLE>H елемент</TITLE>
<HEAD>
<BODY>
<CENTER>
<H1>Голямо заглавиe</H1>
<H3>Средно заглавие</H3>
<H6>Малко заглавие</H6>
</CENTER>
</BODY>
</HTML>


Голямо заглавиe
Средно заглавие
Малко заглавие

Забележете, че текста между тези два елемента излиза винаги удебелен. Друга особеност на елемента <H> е това, че не се налага да ползвате
за да минете на нов ред. Браузъра атоматично прескача един ред щом срещне </H>.
В горния пример има нов елемент - <CENTER>. Всичко което се намира между <CENTER> и </CENTER> се показва в средата на страницата, независимо дали е текст или графика.
Друг елемент за прескачане на ред е

. За разлика от
той не минава на следващия ред, а прескача един ред. Друго различие е, че елемента

се поставя преди текста, а не след него както при
. Елемента

може да се употребява като единичен елемент или като двойка елементи

</P>.



единичен елемент


двойка елементи </P>

И в двата случая ефекта е един и същ. За разлика от
елемента

притежава някои атрибути. Когато тези атрибути се употребяват трябва да използвате двойката елементи

</P>. Един от атрибутите на

е ALIGN. Той може да има стойности left, right или center и подравнява текста съответно вляво, вдясно и в средата. Вижте как става това :

<HTML>
<HEAD>
<TITLE> P елемент </TITLE>
<HEAD>
<BODY>
<P ALIGN="left">текст, подравнен вляво</P>
<P ALIGN="center">текст, подравнен в средата</P>
<P ALIGN="right">текст, подравнен вдясно</P>
</BODY>
</HTML>

Визуализирането на тази страница ще изглежда така :

текст, подравнен вляво

текст, подравнен в средата

текст, подравнен вдясно

Забележете, че текстовете вече са през един ред, поради това, че използвахме елемента

.

Какво научихте дотук :

1. В езика HTML можете да разполагате текст, да му задавате цвят, големина, шрифт. Можете също така да удебелявате, накланяте и подчертавате текст.

2. С елемента <H> можете да задавате големина на заглавния шрифт, както и да подравнявате текста с параметрите на елемента

.

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

1. Иван
2. Георги
3. Захари

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

* Иван
* Георги
* Захари

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

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

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

<HTML>
<HEAD>
<TITLE> ordered list</TITLE>
</HEAD>
<BODY>
да не забравя да купя:

<LI>захар
<LI>яйца
<LI>сода каустик за тъщата

</BODY>
<HTML>

Вижте как ще изглежда :
да не забравя да купя:

1. захар
2. яйца
3. сода каустик за тъщата

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

Така че ако искате вместо

1. захар
2. яйца
3. сода каустик за тъщата

на екрана да се вижда

1. захар
2. яйца
3. сода каустик за тъщата

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

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

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

</BODY>
<HTML>

Тогава на екрана ще се вижда следното:
да не забравя да купя:

* захар
* яйца
* сода каустик за тъщата

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

* захар
* яйца
* сода каустик за тъщата



* захар
* яйца
* сода каустик за тъщата



* захар
* яйца
* сода каустик за тъщата

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

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

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

1. Да купя за вкъщи:
* сладолед
* торта
2. Да купя за офиса:
* дискети
* химикалки
* нова мишка

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

<HTML>
<HEAD>
<TITLE>вложени списъци</TITLE>
</HEAD>
<BODY>

<LI>Да купя за вкъщи:
<UL TYPE=circle>
<LI>сладолед
<LI>торта

<LI>Да купя за офиса:
<UL TYPE=circle>
<LI>дискети
<LI>химикалки
<LI>нова мишка

[/list]
</BODY>
</HTML>

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

Така списъка стана доста по хубав.

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

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

Ето какво научихте за списъците:

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

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

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

4. Списъците могат да се влагат един в друг.

AnD1i
04-08-2009, 20:30
Езика 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>

AnD1i
04-08-2009, 20:30
ХИПЕРЛИНКОВЕ


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

<HTML>
<HEAD>
<TITLE>hyperlink</TITLE>
</HEAD>
<BODY>
SEARCH.BG (http://www.search.bg)
</BODY>
</HTML>

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

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">
Посетете нашия
FORUM (http://forum.search.bg)
</BODY>
</HTML>
Натиснете ТУК за да видите как изглежда този пример на нова страница. Линка ще бъде със зелен цвят, активния линк със светлосин, а посетения със червен. Забележете, че в този случай се отвори нов прозорец на браузъра. Това стана, защото използвах атрибута TARGET на елемента <A>. Атрибута TARGET има няколко параметъра. За да се отвори линка в нов прозорец се ползва параметъра "_blank". Ако пропуснете TARGET линка по подразбиране се отваря в същия прозорец. Вижте примера с линка към SEARCH.BG, но отварящ се в нов прозорец :

<HTML>
<HEAD>
<TITLE>hyperlink</TITLE>
</HEAD>
<BODY>
SEARCH.BG (http://www.search.bg)
</BODY>
</HTML>

SEARCH.BG

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

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

<HTML>
<HEAD>
<TITLE>начална страница</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>ЛИЧНАТА МИ СТРАНИЦА</H1>
</CENTER>
<HR WIDTH=90% SIZE=6>


Нещо повече за мен. (forme.html)

Пишете ми (contact.html)
</BODY>
</HTML>

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

<HTML>
<HEAD>
<TITLE>лични данни</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>ЗА МЕН</H1>
</CENTER>
<HR WIDTH=90% SIZE=6>


Тук напишете нещо за себе си


Към началната страница (index.html)

Пишете ми (contact.html)
</BODY>
</HTML>

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

<HTML>
<HEAD>
<TITLE>свържете се с мен</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>ПИШЕТЕ МИ</H1>
</CENTER>
<HR WIDTH=90% SIZE=6>


Тук напишете адреса си, e-mail и т.н.


Към началната страница (index.html)

<A HREF="forme.html">За мен</А>

Моя e-mail (www4u@search.bg)
</BODY>
</HTML>

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

Моя e-mail www4u@search.bg (www4u@search.bg)

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

<A NAME="begin">Езика HTML</A>

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

върнете се в началото на страницата

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

Отивате на index.html с препратка към част begin (index.html#begin)

или

Отивате на index.html с препратка към част begin (http://www.search.bg/index.html#begin)

Какво научихте за хиперлинковете :

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

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

AnD1i
04-08-2009, 20:33
МЕЛОДИИ

Езика HTML ви позволява да слагате музикален фон на страницата си. За целта трябва да използвате някои широко използвани музикални формати, като .mid и .wav. Тук за първи път ще се сблъскате с разликата в поддръжката на HTML от страна на Netscape Navigator и Internet Explorer.

За да демонстрирам музикалните възможности избрах един midi файл, който се намира ма адрес www4u.search.bg/music.mid
Нека започнем с поддръжката от страна на Internet Explorer. За да включите този файл като музикален фон в Internet Explorer трябва да използвате елемента <BGSOUND> в главата <HEAD>. Като атрибут на <BGSOUND> за указване на пътя до музикалния файл се използва SRC .

<HTML>
<HEAD>
<TITLE>music</TITLE>
<BGSOUND SRC="http://www4u.search.bg/music.mid" LOOP="-1">
</HEAD>
<BODY>
</BODY>
</HTML>

<EMBED> е елемент за визуализация на мултимедия. С негова помощ можете освен музика да сложите и видео на страницата си, например някой .avi файл. Разбира се трябва да се съобразите с големината на файла, защото никой няма да чака 5-6 минути например да се отвори вашата страница, ако сте прикачили голям .avi файл. Ето как се ползва елемента <EMBED> за закачане на midi файла като музикален фон :

<HTML>
<HEAD>
<TITLE>embed</TITLE>
</HEAD>
<BODY>
<EMBED SRC="music.mid" WIDTH="128" HEIGHT="128" LOOP="true">
</BODY>
</HTML>

Както виждате, пътя до файла и тук се указва с атрибута SRC . Атрибутите WIDTH и HEIGHT задават ширината и височината на панела за контрол на звука в пиксели. Ако искате панела да се вижда е добре задължително да задавате стойности на атрибутите WIDTH и HEIGHT. Ако пропуснете да ги зададете браузъра може да покаже нещо, което няма да ви хареса. Атрибута LOOP може да има две стойности - true и false. Когато стойността е true, мелодията започва отново веднага след като свърши, докато при false се просвирва само веднаж и спира. Ако зададете числова стойност на LOOP, мелодията се просвирва толкова пъти, колкото е числото, например LOOP="3" ще изсвири мелодията три пъти и ще спре.
Менюто за управление на звука може да не се визуализира. Това става с атрибута HIDDEN. Той има 2 стойности - true и false. При true панела остава скрит а при false се визуализира. Когато създавате музикален фон, разбира се трябва да използвате стойност true.
Елемента <EMBED> се разпознава и от Internet Explorer и от Netscape Navigator, но двата браузъра работят с различни атрибути. Например Internet Explorer вместо LOOP използва атрибута PLAYCOUNT за повторение на изпълнението. Netscape Navigator от своя страна позволява да контролирате силата на звука с атрибута VOLUME. Internet Explorer не разпознава атрибута VOLUME. Така че стигнахме до извода, че за да добавите музикален фон към своята страница трябва да използвате и двата метода, и <EMBED>, и <BGSOUND>. Ето как би изглеждала една готова страница с музикален фон :

<HTML>
<HEAD>
<TITLE>music</TITLE>
<BGSOUND SRC="http://www4u.search.bg/music.mid" LOOP="-1">
</HEAD>
<BODY>
<EMBED SRC="http://www4u.search.bg/music.mid" HIDDEN="true" LOOP="true">
</BODY>
</HTML>

AnD1i
04-08-2009, 20:35
ТАБЛИЦИ



Таблицата служи за по-нагледно представяне на Вашата информация. Например по-добре изглежда следния ред :

www.dir.bg


www.search.bg


www.gyuvetch.bg

..отколкото :

www.dir.bg www.search.bg www.gyuvetch.bg

Таблицата се състои от редове и колони. В горния пример имаме таблица с 3 колони и 1 ред. Всяка клетка от таблицата може да съдържа някакви данни, в примера URL-ите на български портали. За да направите таблица трябва да използвате елемента <TABLE> и съответно </TABLE> за да я завършите. За изграждане на ред в таблицата се използва <TR> и </TR> за края на реда (съкращение от TABLE ROW - ред в таблица) . Колоните във всяки ред се изписват с <TD> и </TD> (TABLE DATA - данни в таблицата), като между тях се вписва съдържанието на клетката. Всъщност, когато използвате <TD> вие създавате една клетка в реда, които сте започнали с <TR>. Колкото елемента <TD> има между два елемента <TR></TR>, толкова колони ще има в таблицата. Когато приключите реда с </TR> автоматично минавате на следващия. Сега ще направя една таблица с 2 колони и 3 реда, като клетките в нея ще оставя празни :

<table align="center" border="1" width="90%">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td ></td>
<td></td>
</tr>
</table>




Новото тук е допълнението border="1" към елемента <TABLE>, както и width="90%". Числото в кавичките след border указва дебелината на рамката в пиксели, а това след width широчината на таблицата в проценти от екрана на браузъра. Подравняването на таблицата става с align, като са възможни 3 варианта, "left" (ляво), "center" (в средата) и "right" (вдясно). Особеното при задаването на широчината на таблицата е това, че тя може да се зададе в процент от ширината на екрана, но може да се зададе и в брой пиксели. В първия случай след числото се поставя знака %, а във втория не се поставя. Така че width="50%" задава широчина на таблицата половината от екрана, а width="50" ширина само 50 пиксела. Ето и два примера. Първия е таблица със широчина 80 % и рамка с дебелина 2 пиксела, подравнена вдясно, а втория таблица със ширина 200 пиксела с рамка 5 пиксела, подравнена вляво:
<table align="right" border="2" width="80%">


<table align="left" border="5" width="200">

Във втория пример се вижда, че когато съдържанието на клетката е по голямо от размера и, тя автоматично се разширява във височина за да го побере. Вижте как изглежда по-дълъг текст в таблица с една колона и 1 ред със синя рамка с дебелина 3 пиксела и ширина 50% от екрана, подравнена в средата:

<table align="center" border="3" width="50%" bordercolor="#0000FF">
<tr>
<td>
<p align="center">Текста в тази клетка е по-дълъг
от широчината на клетката и за това
таблицата се разширява автоматично във
височина за да побере целия текст.
</td>
</tr>
</table>



Текста в тази клетка е по-дълъг от широчината на клетката и за това таблицата се разширява автоматично във височина за да побере целия текст.

Цвета на рамката се задава след bordercolor и представлява познатото ви вече шестнадесетично число, с което се определя съотношението на трите цвята, червено, зелено и синьо.
В горния пример вече имаме съдържание на клетка. То се поставя между елементите <TD> и </TD> и може да представлява текст, графика, хиперлинк или каквото ви хрумне!

Сега ще ви покажа как изглежда таблицата в началото на тази страница с препратките до дир.бг, сърч.бг и гювеч.бг, само че без рамка :

<table align="center" border="0" width="90%">
<tr>
<td width="33%">
<p align="center">www.dir.bg (http://www.dir.bg) </td>
<td width="33%">
<p align="center">www.search.bg (http://www.search.bg) </td>
<td width="34%">
<p align="center">www.gyuvetch.bg (http://www.gyuvetch.bg) </td>
</tr>
</table>



www.dir.bg


www.search.bg


www.gyuvetch.bg

За първи път тук правиме таблица без рамка (border="0"). Другото ново нещо е, че задаваме ширината на всяка колона поотделно с <td width="33%">. Това се прави за да се разпредели поравно ширината на трите колони в таблицата. Опитайте се да направите горната таблица, като махнете width="33%" след <TD . ,ефекта ще е по-различен.

Можете да променяте цвета на фона на таблицата или да отделните клетки, както и цвета на шрифта ето така:

<table align="center" border="1" width="50%">
<tr>
<td width="50%" align="center" bgcolor="#00FF00"><font color="#0000FF">зелен фон</font></td>
<td width="50%" align="center" bgcolor="#FF0000"><font color="#FFFF00">червен фон</font></td>
</tr>
</table>


зелен фон

червен фон

align="center" след <TD> указва, че съдържанието на клетката трябва да се подравни в средата. bgcolor дава цвета на фона на клетката. <font color задава цвета на шрифта. Ако bgcolor е след <TABLE> тогава указва цвета на фона на цялата таблица.

Сега да сложим в таблицата някаква картинка.

<table align="center" border="0" width="200">
<tr>
<td valign="middle" align="center">back.jpg</td>
<td valign="middle" align="center">forward.jpg</td>
</tr>
</table>




За тази цел направих 2 картинки във вид на бутончета с размер 80Х40 пиксела. Тук виждате, че с командата valign може да се задава и вертикално подравняване в клетката, в случая middle (в средата).
Самата картинка се поставя с forward.jpg. Хубаво е сложите border="0" след името на файла и да завършите с </a> накрая.

Има още 2 параметъра, които указват как да се подравни клетката в таблицата. Първият е cellpadding а втория cellspacing. Първият задава разстоянието от съдържанието на клетката до ръба на клетката, а втория разстоянието между клетките. Пример:

<table align="center" border="1" cellpadding="10" cellspacing="10" width="250">
<tr>
<td valign="middle" align="center">back.jpg</td>
<td valign="middle" align="center">forward.jpg</td>
</tr>
</table>


cellpadding="10" задава разстояние от ръба на клетката до картинката 10 пиксела, а cellspacing="10" задава разстоянието между клетките да бъде 10 пиксела. Експериментирайте с други параметри. ВНИМАНИЕ! Ако не зададете параметрите cellpadding и cellspacing, техните стойности по подразбиране са "1", а не "0", така че ако не искате да имате разстояние между клетките и ограничаване на разстоянието между съдържанието на клетката и ръба на клетката трябва винаги да пишете cellpadding="0" cellspacing="0".

Можете да обединявате редове и колони в таблицата с colspan=.. и rowspan=.. например :

<table align="center" .border="1" cellspacing="0" cellpadding="0" width="250">
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>





<table align="center" border="1" cellpadding="0" cellspacing="0" width="250">
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>





Хитро, нали ? colspan="2" задава да се обединят съседните 2 клетки хоризонтално, а rowspan="2" вертикално. Числото в кавички показва броя на клетките, които искате да се обединят. Ето един по-сложен пример :

<table align="center" border="1" cellpadding="0" cellspacing="0" width="350">
<tr>
<td rowspan="3"></td>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>;</td>
<td></td>
</tr>
</table>






Освен width за широчина на таблицата можете да използвате и параметъра height за да задетете и нейната височина. Стойностите също може да са в проценти от екрана на браузъра или в брой пиксели. Също така може освен цвета на рамката да зададете и цвета на светлата и тъмната част от рамката. Това става с bordercolorlight и bordercolordark. Вижте таблица с ширина 200 пиксела, височина 20% от екрана, дебелина на рамката 7 пиксела и два цвята на рамката, съответно тъмносин и светлосин, както и червен фон за клетката:

<table align="center" border="7" cellpadding="0" cellspacing="0" width="200" height="20%" bordercolorlight="#00FFFF" bordercolordark="#000080" bgcolor="#FF0000">
<tr>
<td ></td>
</tr>
</table>




Забележка! Netscape Navigator не разпознава bordercolorlight и bordercolordark и показва цветове по подразбиране.

Замалко да забравя, вместо <TD> можете да използвате <TH> (Table Heading -заглавие в таблицата). В такъв случай текста в клетката автоматично се центрира в средата и се показва удебелен.

Ето какво научихте за таблиците :

1. Таблица се създава с двойката елементи <TABLE> и </TABLE>.

2. Редовете в таблицата се създават с <TR> и </TR> (table row). Клетките във всеки ред (колоните) се създават с <TD></TD>

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

4. Таблицата може да се изчертава със или без рамка. Може да се определи цвета на рамката, както и на светлата и тъмната и част.

5. В клетките на таблицата могат да се съдържат картинки, текст, хиперлинкове, цвят за фон.

6. Клетките в таблицата могат да се обединяват.

AnD1i
04-08-2009, 20:36
СПЕЦИАЛНИ СИМВОЛИ



Има символи, които не бихте могли да визуализирате в HTML документа просто като ги напишете. Представете си, че искате да покажете на екрана символа <. Ако решите да напишете следното:

<HTML>
<HEAD>
<TITLE>специални символи</TITLE>
</HEAD>
<BODY>
<
</BODY>
</HTML>

..вие просто ще объркате браузъра, защото когато срещне символа <, той решава че това е началото на елемент. За тази цел вие трябва да използвате така наречените специални символи. Това са символи, които могат да объркат браузъра, като <,>,#,&,$ и т.н., или пък не можете да наберете директно от клавиатурата, като №,®, и др.

Специалните символи започват със знака & и завършват с ;, например символа за < е &lt; така че горния HTML документ е правилно да се напише така :

<HTML>
<HEAD>
<TITLE>специални символи</TITLE>
</HEAD>
<BODY>
&lt;
</BODY>
</HTML>

Ето и някои от най-често използваните специални символи :
! ! " &quot; # #
$ $ % % & &amp;
: : ; ; < &lt;
> &gt; ? ? @ @
™ ™ (интервал) © &copy;
® &reg; ± &plusmn;

m3talmania
04-08-2009, 20:49
Когато прохождах с тоя език съм научила много неща от този урок. :razz: Нямаше нужда да казваш, че ти си го писал. :)
Едит: Ето го - http://www4u.search.bg/HTML/html_how_to.phtml
ПП. Нямам нищо против теб, но във важната тема за езиците е написано, че html е програмен език и мислех, че всички знаят това, но след предишната тема и аз започнах да се учудвам... 8-)
Тъй де браво. Някои хора нямат време да ровят. Аз предлагам в някоя тема да се обединят всички такива урочета и да се дадат като линкове. :P

n0x
04-08-2009, 21:17
da e ti si go pisal.. a, az sym miliarder..

Xanibal
04-09-2009, 08:33
da e ti si go pisal.. a, az sym miliarder..
Ти си БИЛ ГЕЙ бате :shock: :shock:

Joro951
04-09-2009, 09:17
Баси тъпака..
тоя урок в 1000 сайтове съм го срещал.ТИ си го писал, дрънци...