HTML за начинаещи

В "HTML за начинаещи" ще се запознаем с езика HTML, ще видим някои основни термини и често употребявани тагове. Ще завършим урока с направата на нашата първа уеб страница.

Какво е HTML и защо ни трябва?

Преди години, когато за първи път компютрите са се свързвали в мрежи не е имало HMTL. Информацията се е разпространявала на файлово ниво. Ако човек на компютър Х е искал да сподели дадена информация той е споделял набор от файлове. По това време компютрите са имали още повече различия от сегашните. Това довело до проблем, когато става дума за визуализация на информацията. Информацията, споделена от един компютър изглеждала съвсем различно на друг компютър, който ползва друга архитектура или софтуер. Това довело до нуждата от създаване на универсален начин за описване на информацията, така че да може да се интерпретира по един и същ начин от различните системи.

След редица предложения, опити, успехи и неуспехи се родил HTML. Името на езика идва от Hyper Text Markup Language. Това е език (набор от правила), който то указва по какъв начин да се показва дадена информация. Информацията, която трябва да се покаже се записва в уеб страници. Те представляват текстови файлове, които съдържат информация, описана с HMTL. Когато дадена страница се отвори с уеб браузър, той прочита информацията от файла и я интерпретира според правилата на езика. Така в днешно време е възможно различни компютри, с различни архитектури и софтуер да виждат по един и същ начин дадена информация в интернет.

Какво е таг?

Както вече казахме HTML е език за уеб програмиране. Както всеки език, той е съставен от набор от думи и правила за тяхното значение. Тук ключовите думи се наричат тагове. Те винаги се записват ъглови скоби < >.
За пример ще дадем отварящия таг, който показва, че съдържанието на файла е html страница:
<html>

Когато нашият браузър отвори дадена страница и види този таг, той знае, че след него се съдържа информация, която трябва да се интерпретира и покаже според правилата на езика HMTL. Този таг, показващ начало се нарича "отварящ таг".

На всеки отварящ таг съответства и затварящ таг. Затварящит таг винаги се изписва по същия начин като отварящия, като преди името на тага се добави наклонена черта /. Съответно тагът, който казва, че приключва информацията, форматирана с html e: </html>

Моята първа HTML страница

Ако следвате урока ни отначало би трябвало вече да разполагате с някой обикновен текстов редактор. В предишния урок препоръчахме безплатната програма Notepad++. Ако ползвате Windows можете да работите и с обикновения Notepad, но той няма да ви оцветява кода. Имайте предвид, че редактор като Word или някой WYSIWYG редактор няма да ви свършат работа за тази задача, тъй като те добавят служебна информация, която няма да позволи правилната работа на нашата страница.

И така, след като сте избрали своя редактор можем да започваме.

Отворете вашият редактор и на първият ред въведете отварящият таг <html>
На втория ред напишете някакъв текст, например "Това е първото ми упражнение от урокът HTML за начинаещи"
На третия ред добавете затварящият таг </html>
Запазете файлът като 001HelloWorld.html на удобно за вас място

Честа грешка при начинаещи: много е важно да запазите файла с правилното разширение. Ако го запазите с разширение .txt, операционната ви система няма да разпознае, че трябва да го отвори с интернет браузър.
Сега отидете там, където сте запазили файла и просто го стартирайте. Той ще се отвори във вашият браузър по подразбиране и ще покаже на екрана текста, който сте въвели между таговете.

Редактиране на страница

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

За целта отидете във вашия редактор и отворете страницата. Това може да го направите и ако кликнете с десен бутон върху файла на страницата и изберете "Edit", "Edit with Notepad++", или "Редактиране".
Сега въведете един празен ред между отварящия таг на страницата (<html>) и текста, който въведохме в първото упражнение. На новия празен ред напишете друг отварящ таг <h1>.
На същия ред след него добавете текст като "Това е заглавие".
Затворете тага за заглавие с "</h1>".
Запазете страницата и я отворете в браузър.

Сега над текста се появи заглавието, което добавихме.

В html има различни видове заглавия. H1 е главното, най-голямо като размер. Нормално една страница има едно заглавие H1. Обикновено то стои най-горе и описва за какво става дума в тази страница. В този урок H1 е "HTML за начинаещи" (горе в синята лента).

Другите тагове за заглавие са всъщност подзаглавия – от </h2> до </h5>. Те се използват за визуално отделяне на съдържанието на страницата на подкатегории.

Атрибути

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

име_на_атрибута="стойност на атрибута"

Упражнение:

Отворете за редактиране вашата страница.
Добавете празен ред между текста под заглавието и затварящият таг </html>
На празния ред добавете два нови тага: <br> и <a></a>. Тагът "<br>" означава "премини на нов ред". При него не е необходимо използване на затварящ таг.
В отварящия таг <a> добавете атрибута href="", така че тагът да изглежда: <a href=""></a>

Този таг служи за показване на линк към друга уеб страница. Атрибутът href в таг "a", служи за указване на адреса, към който сочи тагът.

Всички атрибути получават стойност, чрез знака за равенство. Самата стойност се записва винаги в кавички.

За да работи линкът е необходимо да направим още две неща:

Да добавим страница, към която води линка. За целта в кавичките добавете "http://ontarget.bg";
Да добавим видим текст, който ще се показва като линк в нашата страница. Между отварящия и затварящия таг добавете текст "ОнТаргет".

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

<br> <a href="http://ontarget.bg"a>ОнТаргет</a>

Сега запазете страницата си и я стартирайте. При правилна работа, под текста се появява първият ви работещ линк. Кликнете на него, за да проверите дали работи правилно. Ако да – би трябвало да видите заглавната страница на ОнТаргет.

Следващ урок: HTML таблици

Предишен урок: Как да си разработя сайт.

Разгледайте и други уроци за начинаещи.