Първи стъпки в правенето на сайтове

Преди известно време единият от съквартирантите ми ме помоли да го науча да прави сайтове. Отначало мислех просто да му дам да прочете нещо в мрежата за първи стъпки. Ако след това още имаше желание да го науча и на някои други тънкости, които знам. По тази причина потърсих в интернет някакви уроци за първи стъпки в HTML. За мое огромно учудване и съжаление не намерих нищо, което да му даде някаква правилна основа. Всички уроци, които намерих бяха под всякаква критика. Така се наложи да му обяснявам всичко още от самото начало.

Само преди седмица вуйчо ми се похвали, че му е възложена задача да довърши започнат сайт. За целта му беше нужно да научи отнякъде HTML. Пита ме дали мога да му препоръчам място, от където да започне. С огорчение го насочих към местата в мрежата с възможно най-малко глупости. Тогава взех решението, че по въпроса трябва да се направи нещо. И това нещо, ако не го направя аз — няма кой друг.

От днес започвам една поредица от уроци за първи стъпки в HTML, CSS и JavaScript, които да дадат на хора като съквартиранта ми и вуйчо ми някаква основа. След това вече има от къде да се надгражда. Предните уроци, които публикувах тук изискват именно тази основа.

Урок Първи в правене на сайтове

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

Първото нещо, което трябва да направите е да си изтеглите удобна програма. На теория можете да пишете нужния код дори просто на Notepad. На практика обаче нещата са доста по-сложни. Когато напишете дори само десетина реда вече започвате да изгубвате края при Notepad. Аз лично използвам Sublime Text.

Официално програмата струва $80. Но има пробен период, който всъщност не е ограничен във времето. Просто от време на време ще ви излиза по едно прозорче, което да ви подканва да си я купите.

Има много други безплатни програми, които можете да използвате:

1. Visual Studio Code
2. Atom
3. Brackets
4. Notepad++
5. Aptana Studio

Най-добре да си създайте и една папка на компютъра, където ще бъде вашият сайт.

Създайте нов файл в нея и го кръстете index.html.

Името е важно, тъй като index има специално значение. Това е файлът, който се зарежда, ако URL адресът, който сме отворили не упоменава изрично друг. Това име оказва, че това е началото на сайта.

HTML

Вече стигаме и до самия HTML. Ако не знаете нищо за HTML трябва да се започне от там, че това НЕ Е език за програмиране.

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

Подобна инструкция би била да ни се даде информация за текущото време. Това си се мени постоянно.

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

Самото съкращение HTML означава HyperText Markup Language — ХиперТекстов Език за Маркиране.

Думата “маркиране” означава, че езикът единствено дава информация на браузърите за съдържанието на сайта. Това маркиране се извършва посредством тагове. Таговете са ключови думи в HTML. Пишат се в ъглови скоби, за да бъдат отделени от същинското текстово съдържание на сайта.

Тагове

Примерен таг е <p> (идва от paragraph), който описва един абзац на сайта ни.

Таговете биват отварящи и затварящи. Между двойка отварящ и затварящ поставяме съдържанието на дадения таг.

<p>Това е един абзац</p>

Един таг може да съдържа не просто текст, но и други тагове вътре в себе си.

Някои тагове съдържат допълнителна информация, която се въвежда под формата на атрибути. Пример за такъв таг е <a> (anchor — котва), който се използва за вмъкване на връзки (линкове).

<a href="http://www.google.com/">Google</a>

Атрибутът href оказва адреса, към който ще бъде пренасочен посетителя на сайта, ако кликне въпросната връзка.

Съществуват тагове, които не поддържат съдържание вътре в себе си, а имат единствено атрибути. Такъв таг е <img> (image — изображение).

<img src="image.jpg">

Атрибутът src оказва пътя, от който браузърът да зареди картинката.

Такива тагове по принцип нямат затварящи — не пишем </img> след като въведем такъв таг.

Някои HTML стандарти обаче (като xHTML — eXtensible HTML или иначе казано разширяем HTML) изискват всички тагове да бъдат затваряни. Тогава тези единични тагове се затварят като просто добавим наклонена черта преди затварящата ъглова скоба.

<img src="image.jpg" />

Тези тагове се наричат още self contained (самосъдържащи се).

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

По тази причина е удобно такива тагове винаги да се затварят, дори и да не е в изискванията на стандартите, а и по този начин кодът става по-лесно четим.

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

Различни видове стандарти

По принцип няма значение кой стандарт използваме, стига кодът който пишем да отговаря на изискванията му. Така че можете да използвате xHTML, HTML4 и HTML5 и да постигнете един и същи краен резултат. Само използвайте стандартите правилно. Разликите помежду им са много малки, така че нека това не ви притеснява.

Когато започваме нов HTML документ трябва да започнем с DOCTYPE декларация. Тази DOCTYPE декларация показва кой стандарт използваме и по какъв начин браузърите трябва да обработват кода ни.

Примери за DOCTYPE декларации можете да видите на www.w3schools.com.

Най-новият HTML стандарт — HTML5 — има най-опростена DOCTYPE декларация:

<!DOCTYPE html>

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

След като сме задали какъв стандарт ще използваме, трябва да въведем и нашия <html> таг.

Цялото съдържание на сайта трябва да се съдържа в този таг. Това е изискване, което идва още от XML (eXtensible Markup Language — Разширяем Език за Маркиране). В него има изискване за един единствен основен (root) таг. Той трябва да съдържа всичко останало вътре в себе си.

В XML няма изискване какъв да бъде този таг, тъй като там изобщо няма предварително дефинирани тагове. Там могат да се използват всякакви думи. Но тъй като HTML има строго определени тагове, неговият root таг е <html>.

Изисквания към <html>

Характеристиките на <html> тага включват, че той може да съдържа в себе си само <head> и <body> тагове.

Други изисквания пък към HTML докемунтите са, че на една страница трябва да имаме точно по един от тези тагове — <head> и <body>.

Така оставаме със следната начална структура на една празна HTML страница:

<!DOCTYPE html>
<html>
    <head></head>
    <body></body>
</html>

<head> тагът съдържа информация за представянето на съдържанието на сайта, както и елементи, които не се виждат на самата страница.

В <body> тага пък влиза това, което накрая се показва в прозореца на браузъра.

Това, което трябва да добавим в <head> тага е заглавие на страницата, използвайки <title> както и трябва да зададем каква текстова кодировка (encoding) използва сайта, за да излизат правилно буквите от съдържанието.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Първи стъпки</title>
    </head>
    
    <body></body>
</html>

Кодировка (encoding) на страницата

Encoding-ът на страницата се задава чрез <meta> таг. Имайте предвид, че синтаксисът, който съм използвал в случая е валиден само за HTML5. Ако използвате xHTML или HTML4 този таг трябва да изглежда така:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Атрибутът http-equiv оказва на браузъра, че тази мета информация е еквивалентна на дадена стойност на HTTP заявка. HTTP заявките не са предмет на урока ни. Просто приемете на готово, че този meta таг трябва да е такъв.

Атрибутът content показва и самото съдържание на въпросния HTTP еквивалент.

От този мета таг получаваме информация, че към HTTP заявката, с която браузърът е заредил страницата трябва да добавим Content-Type: text/html; charset=utf-8.

Това оказва, че самият документ, който браузърът е изтеглил трябва да се обработва като text/html (текстов файл от тип HTML), а кодировката, която използва е UTF-8.

Използваме тази кодировка заради факта, че имаме кирилица в сайта.

Съществуват и други кодировки, които да включват кирилица, но UTF-8 е голям encoding, който съдържа и други специални знаци. Затова е препоръчително винаги да се използва тази кодировка.

В HTML5 мета тагът за кодировка е опростен поради факта, че приемайки файл с разширение .html браузърът сам знае формата на документа. И без това за да прочете мета информацията, браузърът трябва да знае, че търси <meta> таг. Значи трябва да знае, че това е HTML документ. Парадоксално е, нали?

Long live charset

По тази причина е достатъчно да използваме просто charset атрибут. Стойността му трябва да зададем като кодировката, която използваме в страницата.

<title> тагът го добавяме след кодировката, за да нямаме проблеми при символите в него.

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

Браузърът е умен и се връща назад, за да оправи съдържанието, което вече е показал, но това връщане го забавя. Става въпрос просто за около 5 милисекунди, което дори не може да се види на екрана. Но ако имаме много забавяния те се натрупват и после посетителите на сайта са недоволни, че сайтът ни е бавен. Всяка милисекунда е от значение, така че ги пестете.