HTML - основи на програмирането

Преди да преминем към HTML, нека първо се запознаем с основните термини, засягащи, пряко или косвено, HTML и програмирането като цяло. Тук правя и уточнението, че HTML не е език за програмиране, но той е (буквално) основата на всички програмни езици за web.

Интернет

може да се дефинира по 3 начина:

1. Колекция от различни по топология и вид компютърни мрежи, използващи TCP/IP протоколния стек.
2. Система от взаимосвързани мрежи и компютри, обхващаща целия свят - "информационната супермагистрала".
3. Две или повече LAN локални мрежи, свързани чрез рутер / маршрутизатор.

Интранет:

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

Платформа:

Съвкупността от хардуер и операционна система (ОС).

Web страница (web page):

Един HTML документ, заедно с включените в него графични изображения, мултимедийни файлове, Flash анимации, Java аплети, ActiveX контроли и др.

Web сайт (website):

Съвкупност от смислово свързани уеб страници, на които са поместени различни мултимедиини приложения- текст, видео, графика, обединени под общо домейн име или IP адрес, достъпни най-често посредством HTTP (Hypertext Transfer Protocol).

Браузер (browser):

Програма за извличане, интерпретиране и изобразяване на мултимедийни документи на екрана на локалната машина. Програма за разглеждане на страници в WWW;

URL

URL (съкращение от Uniform Resource Locator) е стандартизиран адрес на даден ресурс, например документ или страница, в Интернет или друго пространство.

Пример:

http://www.google.com/

HTML - Hypertext Markup Language

Общи положения:

• HTML e eзик за представяне на хипертекст (Hypertext Markup Language);
• Тривиална истина е, че всички страници в WWW са написани на HTML;
• HTML не е език за програмиране;
• Разработен e от Tim Berners Lee;
• Подмножество e на SGML (Standard Generalized Markup Language);
• Хипертекстът съществува много отдавна и в частност преди бума на WWW.

Фактори за развитието на WWW и HTML:

• първият графичен browser - Mosaic на NCSA;
• включването на TCP/IP стека в Windows 95;
• "войната на browser-ите", както популярно се нарича съперничеството между разработчиците на browser-и, най-вече Netscape Communicаtions и Microsoft.

XHTML - eXtensible HyperText Markup Language

Основни разлики HTML – XHTML

• XHTML е много по-стриктен по отношение на синтаксиса;
• Много команди и атрибути от HTML са обявени за deprecated (остарели, непрепоръчителни; няма да се поддържат от следващи версии) в XHTML. Това са основно касаещите външния вид - шрифтове, цветове и др.;
• XHTML има по-добри средства за достъпност и за многоезикова поддръжка.

Забележки:

• Доста такива промени има и между отделните версии в рамките на развитието на HTML;
• Оформлението на документа (външния вид) трябва да се прави с други средства, като CSS (Cascaded Style Sheets - вложени стилови шаблони).

Възможности на HTML:

• Описание на структурата на документа: заглавия, абзаци и др.;
• Разделяне на документа на части, представени в отделни части на прозореца - рамки (Вече не се използва);
• Включване на хипервръзки към други Web страници, Интернет услуги, мултимедийни файлове и др.;
• Създаване на списъци и таблици;
• Вграждане на графични изображения в документа, включително и такива, представляващи хипервръзки към други документи;
• Създаване на изображения с активни зони (image maps);
• Формуляри (forms) - страници, съдържащи елементи на потребителски интерфейс;
• Оформление на документи с помощта на различни шрифтове, цветове и др.;
• Разделяне на съдържанието на документа от оформлението му – вложени шаблони (Cascaded Style Sheets - CSS).

Ограничения на HTML:

• Не е пълноценен език за оформяне на документи – няма например средства за представяне на математически формули;
• Няма никаква гаранция как точно ще изглежда документа на компютъра на даден потребител.

Основни елементи на HTML:

Форматирането в HTML се задава с команди, наречени тагове (англ. - tags). Структурата на всеки таг е следната:

• Започва се със знак за "по-малко" - <;
• Вътре в него се изписва името на тага;
• Краят на елемента се затваря с знак за "по-голямо" - >;
• Всички символи в HTML таг се изписват с малки букви.

Пример:

Например тагът с който се слага начало на HTML документ има следния вид:

<html>

Всеки таг, с малки изключения има отварящ и затварящ елемент. Когато тагът има отварящ и затварящ елемент, затварящият елемент е същият като отварящия с разликата, че след символа "<" се поставя наклонена на дясно черта – "/". Така например, за да окажем началото на HTML документ трябва да използваме

<html>

, за да окажем край на документа използваме

</html>

Вътре в пространството заградено от отварящ таг и затварящ таг може да поставяме текс или други тагове.
Всеки таг изпълнява различно предназначение в HTML.
Има и тагове, вътре в които е недопустимо да се поставя текст, има и такива тагове, вътре в които е недопустимо да се поставят други, точно определени, тагове.

Нека да разгледаме някои от основните тагове в HTML:

<!--	-->	Създава коментар в HTML. Текстът между тези два символа не е видим при визуализацията на HTML документа и служи само за ваше удобство. Препоръчително е да се изтриват коментарите след завършване на HTML документа. Не се причислява към таговете в HTML, затова и структурата на отваряне и затваряне е различна.
<html>	</html>	Указва, че типът на документа е HTML. Използването му е задължително, като отварящият таг почти винаги, с малки изключения, се поставя в началото на HTML документа, а без исключеня, затварящият таг трябва да се намира в самия край на документа.
<head>	</head>	Дефинира заглавната част на документ. Използването му е задължително. Използва се непосредствено след <html> тага.
<title>	</title>	Дефинира заглавие на страница. Използването му е задължително. Задължително се използва вътре в пространството, заградено от <head> </head> таговете. Използването му извън <head> </head> тага е недопустимо.
<body>	</body>	Задава тялото на HTML документа. Указва къде започва съдържанието на сайта. Използването му е задължително. Поставя се непосредствено след затварящия таг </head>. Непосредствено след затвярящият таг </body> се затвяря и тагът </html>
<h1>	</h1>	Показва текста като заглавие с много големи букви. Препоръчително е да се използва само веднъж в най-горната част на сайта. Най-често се използва за да се окаже тематиката на сайта. Освен h1, съществуват и тагове h2, h3, h4, h5, h6, като колкото по-голямо е числото, толкова по-малък е шрифта. Използват се за дефиниране на заглавия в различни секции от сайта, като не съществуват писани правила за мястото на тяхното използване.
<a>	</a>	Създава линк в HTML. Линкът може да води към друга страница на друг web сайт или към друга страница на същия сайт; може също така да води и към същата страница на която е поставен.
<b>	</b>	Удебелява шрифта на текста.
<i>	</i>	Показва текста в курсив (наклонен надясно)
<br>	Няма	Прекъсва текущия ред и задава нов ред. Аналогичен на натискането на "Enter" в MS Word. Няма затварящ таг.
<p>	</p>	Създава параграф в HTML.
<hr>	Няма	Създава хоризонтална линия. Този таг е блоков елемент, с функция подобна на <br> тага, с разликата, че създава хоризонтална линия. Няма затварящ таг.
<ul>	</ul>	Указва начало на списък
<li>	</li>	Използва се за изброяване на елементите на списък. Действието му е същото като в MS Word – остава отстояние от ляво и поставя уголемена точка пред абзаца. Използва се непосредствено след като е указано начало на списък.

След като се запознахме с най-основните команди (съществуват още много тагове в HTML, които може да намерите сами), нека да направим и нашия първи уеб сайт на HTML.

Примерна структура на уеб страница

<html>
<head>
<title>Моят Уеб Сайт</title>
</head>
<body>
</body>
</html>

Пример1

Какво направихме?

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

<html>
<head>
<title>Моят Уеб Сайт</title>
</head>
<body>
<h1>Моят първи web сайт</h1>
<p>Параграф с информация и <a href="http://google.bg/">линк към Google </a></p>
<p>Параграф в който ще използвам и другите тагове, които научихме.<br>
Ще поставя на нов ред това и ще удебеля шрифта на <b>това</b>, а <i>това ще сложа в курсив</i>
</p>
<p>
Ще направя списък
<ul>
<li>HTML не е толкова труден;</li>
<li>HTML се учи лесно.</li>
</ul>
</p>
</body>
</html>

Пример2

Какво направихме?

Може би вече сте забелязали, че от Пример1 не сме променили нищо. Единствените допълнения, които направихме, са вътре в <body> </body> тага.

С <h1> указахме заглавието на нашата web страница.

С <p> </p> въведохме параграфи

С <a href=""> </a> поставихме на нашата страница линк към Google. Като вътре в атрибута* поставихме URL на сайта на Google:

<a href="http://google.bg/">

С <ul> и <li> създадохме списък.

*Mоже би вече сте забелязали, че тагът <а> </а> се отличава от дугите тагове. Вътре в себе си, той съдържа интервал, допълнителни символи и URL адрес. Тези символи вътре в таг отделени от него с интервал се наричат атрибути.

Атрибути

Атрибутите (англ. Attributes) са важна част от всеки таг в HTML. Вътре във всеки таг може да се поставят атрибути, като те са различни за всеки таг. Чрез тях се указва допълнително значение на тага. Всеки атрибут се състои от име на атрибута, символът за равенство и кавички. Вътре в кавичките се поставя параметър на атрибута. Подобно на таговете, и атрибутите се изписват с малки букви.

Така например, един от атрибутите на тага <a> е

href=""

тои се отделя с интервал от тага:

<a href="">

Вътре в кавичките трябва да поставим URL адрес, към който ще води линка

<a href="http://yahoo.com/">

Завършен линк ще изглежда така:

<a href="http://yahoo.com/">линк към Yahoo</a>

Нито един атрибут не е задължителен за даден таг, но на някои места (например в тага <а>), тяхното използване е от съществено значение.

В един таг може да има повече от един атрибут, като се отделят с интервал от предходните. Тагът <a> освен href="" поддържа и други атрибути, например title=""

Атрибутът title="" дава допълнителна информация за за съответния таг. Например

<a href="http://yahoo.com/" title="натиснете тук за да отидете на сайта на Yahoo">линк към Yahoo</a>

Визуализиране на HTML

След като вече се запознахме с основните тагове и атрибути идва и въпросът как се визуализира HTML.

За да пишем на HTML трябва да имаме текстов редактор. Такъв в MS Windows е Notepad. След като сме написали нашият HTML в Notepad за да може да визуализираме HTML документа, трябва да го запишем с подходящо разширение. Такова разширение е

.html

За име на нашия сайт може да използваме

index.html

За да визуализираме документа в браузър, се натиска десен бутон върху вече запаметения с разширение .html документ и се избира Open With, за да се зададе желаният браузър, който да покаже нашата страница.

Коментари: