Програмиране в среда Интернет

Минно-геложки университет
"Св.Иван Рилски"

кат._Информатика

Меню

Начало
Увод
Съдържание
Въведение в Интернет
HTML
CSS
JavaScript
Perl
Полезни връзки
Речник на термините

HTML - ПЪРВА ЧАСТ

Концепция на езика. Основни тагове. Форматиране на шрифт и подравняване.
Създаване на хипервръзки. Коментари

   Езикът за форматиране на WEB страници HTML е универсалния език във WEB. Той се използва за създаване на статични страници ( в последните версии на езика, той е допълнен с т.нар. DHTML - Dynamic HyperText Language, който добавя известна интерктивност на страниците ) и представлява обикновенни ASCII файлове т.е. това са обикновенни текстови файлове, които може свободно да се променят с помощта на Notepad (връзки към програми за писане на код можете да намерите в секцията "Полезни връзки", но особенно подходящ е продукта на Evrsoft - First Page 2000). Тези файлове се състоят от текст, който бива визуализиран и команди (тагове,tags), които служат за указване на това как да бъде визуализиран текста. HTML има няколко версии като актуалната за момента е 4.01, и съдържа над 110 тага.
   Употребата на тагове за дефиниране на елементите във WEB документа са нарича форматиране (markup). Има тагове за поставяне на заглавие на документа, за създаване на таблици и хипервръзки, за поставяне на изображения, формуляри, мултимедийни обекти и др.
  Структурата на един HTML документ е следната :

<HTML>
<HEAD>
<TITLE>Програмиране в Интернет</TITLE>
</HEAD>
<BODY>HELLO WORLD!
</BODY>
</HTML>

Това е резултата от този код.
Както виждате всеки HTML документ трябва да започва с тага <HTML> (по принцип таговете се пишат с големи букви, но всеки един браузър ще визуализира и документ написнан с малки букви, както този който четете) и да завършва с тага </HTML>. Първият таг се нарича отварящ, а втория затварящ. Трябва да се отбележи, че не всеки таг има затварящ такъв (например , който служи за преминаване на нов ред). Следващият таг, който трябва да присъства във всеки един HTML документ е <HEAD>. Той служи за поставяне на различна служебна информация, скриптове на JavaScript и какскадни стилове (CSS). Единствения таг, който е задължително да сложим е <TITLE>. Той променя заглавието на страницата, което се визуализира в заглавната лента на браузъра. Последният задължителен таг в <BODY></BODY>.Тук се намира същинската информация на документа. Този таг има няколко важни атрибута :

bgcolor="..."	Установява цвета на фона на страницата.
background="..."	Дефинира изображение, което да служи като фон.
text="..."	Установява цвета на текста на страницата.
link="..."	Цвят на хипервръзката.
vlink="..."	Цвят на посетената хипервръзка.
alink="..."	Цвят на активната хипервръзка.

Добавянето на цветове в един HTML документ става чрез шест цифрен код. Този код е шестнайсетично число съставено от три двуцифрени шестнайсетични числа. Всяка една от групите отговаря на един от трите основни цвята (червено, зелено, синьо - в този ред) и е в интервал от 00 (за липса на цвета) до FF (за пълна наситеност на цвета). Например кода #FF0000 - червено,#00FF00 - зелено и #0000FF - синьо. Чрез подходящо комбиниране се получават останалите цветове (таблица с 140 цвята можете да видите тук).

<HTML>
<HEAD>
<TITLE>Програмиране в Интернет - цветове</TITLE>
</HEAD>
<BODY BGCOLOR="#99FFFF" TEXT="FFFFFF" LINK="FF0000">
Това е червено 
Това е зелено 
Това е синьо 
</BODY>
</HTML>

Това е резултата от този код.
Форматирането на текст в чист HTML код става с тага . Благодарение на него може да се променя цвета (както в примера) на шрифта, самия шрифт и неговата големина. По-важните атрибути са:

color="..."	Установява цвета шрифта.
face="..."	Установява самия шрифт.Възможно е дефинирането на повече от един шрифт, разделени със запетаи.
size="..."	Големина на шрифта. Като параметри са възможни както цели числа определящи еднозначно шрифта, така и числа със знак определящи големината на шрифта относително спрямо шрифта по подразбиране( например size="+1").
style="..."	Дефинира каскаден стил на шрифта .

Важно : Използвайте този таг само за съвместимост, във всички останали случаи използвайте каскадни стилове.

Друг важен таг е , който служи за създаване на абзаци в текста на документа. Той служи за отделяне на дадена част от текста в ясно обособени параграфи. Има само един атрибут align="..." , който служи за подравняване на текста вътре в абзаца. Възможните параметри на атрибута са left (подравняване отляво),right(подравняване отдясно) и center(центриране). Друг начин за подравняване е използването на контейнера <DIV ALIGN="..."></DIV>, а за центриране може да се използва <CENTER></CENTER>. Разликата при използването им може да се види от следния пример :

<HTML>
<HEAD>
<TITLE>Програмиране в Интернет</TITLE>
</HEAD>
<BODY>
Подравняване чрез абзац.
<DIV ALIGN="center">Подравняване чрез контейнер.</DIV>
<CENTER>Подравняване с тага CENTER.</CENTER>
</BODY>
</HTML>

Това е резултата от този код.
 Удебеляването на шрифта в документа може да стане по два начина. Първият е използването на тага <В>Удебелен шрифт</В>, а втория е чрез тага Удебелен шрифт. Използването на който е да е от двата тага води до един и същ резултат и използването им е чисто субективно. Слагането на шрифта в курсив става с помощта на Курсив. Чрез комбинирането на и може да се постигне удебелен шрифт в курсив. При това трябва да се спазва правилото първият отворен таг се затваря последен. Например следният ред е правилен Правилно, а този е неправилен Неправилно. Това правило важи за всеки един таг и трябва да се спазва, за да може браузъра да визуализира правилно страницата. Друг подобен таг е тага за подчертаване на текст Почертан текст.
 Когато се налага обособяването на два блока от текст с различно съдържание може да се използва разделянето им с хоризонтална линия. Тага с помощта, на който става това е <HR>. Той няма затварящ таг и има следните параметри :

align="..."	Подравняване на линията.
noshade	Този параметър изключва 3-D визуализацията на линията.
size="..."	Указва дебелината на линията в пиксели. Използването й в HTML 4.0 е остаряло и трябва да се замества с каскадни стилове.
width="..."	Указва дължината на линията в пиксели (width="100") или в проценти относително спрямо елемента, който съдържа линията (width="50%").
color="..."	Дефинира цвят на линията. При използването на този атрибут, автоматично се включва и атрибута noshade. Ако трябва да се използва 3-D изглед се налага използването на каскадни стилове. Този атрибут се поддържа само от Internet Explorer.

Друг начин за форматиране на текст е използването на таговете за заглавия (headings) - <Hx></Hx>, като х е число от 1 до 6. Единствения атрибут, който този таг има е ALIGN="...". Разгледайте пример за резултата от използването му (както и резултата от другите разгледани тагове):

<HTML>
<HEAD>
<TITLE>Програмиране в Интернет</TITLE>
</HEAD>
<BODY>
Удебелен текст с тага В. 
Подчертан текст 
Удебелен текст с тага STRONG 
Текст в курсив. 
Удебелен текст в курсив. 
<H1>Това е H1.</H1>
<H2 ALIGN="right">Това е H2 подравнен вдясно.</H2>
<H3 ALIGN="center">Това е центриран H3.</H3>
<H4 ALIGN="left">Това е H4 подравнен вляво.</H4>
<H5>Това е H5.</H5>
<H6>Това е H6.</H6>
Линия с дължина 150 пиксела и размер 10 пиксела, подравнена вдясно.
<HR SIZE="10" WIDTH="150" ALIGN="right"> 
Линия с дължина 50 процента от размера на страницата и размер 1 пиксел и изключен 3-D изглед.
<HR SIZE="1" WIDTH="50%" NOSHADE> 
Линия в червен цвят (само в Internet Explorer).
<HR COLOR="red"> 
</BODY>
</HTML>

Това е резултата от този код.
Един от най-важните тагове в един WEB документ е тага за създаване на хипервръзка <A></A>. Между таговете се намира текста на самата хипервръзка. Този таг има множество атрибути, по-важните от които са:

href="URI"	Това е най-важния атрибут.Посочва мястото към, което трябва на води връзката. Например href="www.google.com" ще посочи на вашия браузър, че трябва да зареди адреса www.google.com.
name="..."	Атрибута създава т.нар. котва в страницата. Например ако има страница с име page1.html и място в нея обозначено с <A NAME="sect1">Секция 1</A> и друга страница с връзка <A HREF="page1.html#sect1">Секция 1</A>, то при тази връзка води към page1.html и точно там където е дефинирана sect1.Това ще бъде демонстрирано в примера.
target="..."	Указва къде да бъде отворена страницата. Възможните параметри са : _blank (отваря връзката в нов прозорец), _parent (отваря връзката в същия прозорец, като ако е той е frameset го замества), _self (отваря връзката в същия прозорец, като ако е той е frameset не замества целия фреймсет, а само неговия фрейм), _top (замества всеки и всички фреймсетове, които могат да бъдат заредени, ако няма фреймсет действието е подобно на _self).
type="..."	Указва на браузъра какъв тип документ на очаква. Параметъра трябва да е валиден MIME тип. Например ако връзката сочи към видео файл, то този атрибут ще укаже на браузъра да зареди подходящия плъгин <A TYPE="video/mpeg" HREF="mycat.mpeg">Моята котка</А>.

Параметъра на атрибута HREF="...", може да се дефинира по два начина: като абсолютен път към документа и като относителен път спрямо документа, който е връзката. Това може да се изясни със следния пример : да предположим, че съществува page1.html в директория c:\mydocs (т.е. c:\mydocs\page1.html) и втори документ page2.html в директория c:\mydocs\site2 (c:\mydocs\site2\page2.html). Искаме да направим връзка от page1.html към page2.html. Връзките ще изглеждат така:

Абсолютен път
<A HREF="c:\mydocs\site2\page2.html">Страница втора</A>
Относителен път
<A HREF="site/page2.html>Страница втора</A>

Сега да предположим, че искаме да направим връзка от page2.html към page1.html. Връзките ще изглеждат така:

Абсолютен път
<A HREF="c:\mydocs\page1.html">Страница първа</А>
Относителен път
<A HREF="../page1.html">Страница първа</А>

Тук ../ указва на браузъра на излезе една директория над текущата, аналогично ../../ ще укаже, че документа се намира на две директории над текущата. Така ако разширим нашия пример и предположим, че съществува файл c:\mydocs\site3\page3.html . Ако трябва да направим относителна връзка към него от page2.html, то тя ще има следния вид :

<A HREF="../site3/page3.thml">Страница трета</A>

Както бе обяснено във WWW за указване на връзки се използва URL, затова в атрибута се препоръчва изпозването на пълния URL адрес, например http://www.google.com или ftp://ftp.ttm.bg . Освен това в HREF="..." могат да се поставят и връзки към e-mail едреси :

<A HREF="mailto:yourmail@mail.bg">Моят e-mail</A>

Следващият пример ще демонстрира казаното по-горе:

<HTML>
<HEAD>
<TITLE>Програмиране в Интернет - пример 5</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<A NAME="top">Начало на документа</A> 
<A HREF="ex5.html#bottom">Това е връзка, която сочи към края на документа.</A> 
<A HREF="../../index.html" TARGET="_blank">Това е връзка с относителен път отваряща нов прозорец.</A> 
<A HREF="../../index.html" TARGET="_self">Това е връзка с относителен път отваряща се в същия прозорец.</A> 
 
 
 
 
 
 
 
<A HREF="ex5.html#top">Това е връзка, която сочи към началото на документа.</A> 
<A NAME="bottom">Край на документа</A>
</BODY>
</HTML>

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

ВАЖНО

<< Въведение в Интернет

HTML(втора част) >>

Термини

ASCII
Таг (tag)
MIME
Плъгин (plugin)

Програмиране в среда Интернет

HTML - ПЪРВА ЧАСТ

Концепция на езика. Основни тагове. Форматиране на шрифт и подравняване. Създаване на хипервръзки. Коментари

Концепция на езика. Основни тагове. Форматиране на шрифт и подравняване.
Създаване на хипервръзки. Коментари