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

Преди известно време единият от съквартирантите ми ме помоли да го науча да прави сайтове. Отначало мислех просто да му дам да прочете нещо в мрежата за първи стъпки. Ако след това още имаше желание да го науча и на някои други тънкости, които знам. По тази причина потърсих в интернет някакви уроци за първи стъпки в 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 милисекунди, което дори не може да се види на екрана. Но ако имаме много забавяния те се натрупват и после посетителите на сайта са недоволни, че сайтът ни е бавен. Всяка милисекунда е от значение, така че ги пестете.

8 Отговори на “Първи стъпки в правенето на сайтове”

  1. Много благодаря пич. Сайтът е направен страхотно и много добре обясняваш (като на малумници като мен :р). Много ми помогна, но само не разбрах това с Encoding-а на страницата, и по точно защо не ми става. Когато махна “ “ или “ „, защото пробвах и 2-та ми се получи, но когато ги използвам, просто кодира всичко написано от мен.

  2. Здравей!

    Много се радвам, че сайтът ти допада и ти върши работа, но не разбирам съвсем добре въпроса ти.

    Първо – кой тип мета таг използваш за encoding-а – този по HTML5 стардарта или по HTML4 (<meta charset=“utf-8″ /> или <meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8″ /> ) ?
    Ако използваш дългия (по HTML4 стандарта) не трябва да имаш проблеми в никой случай. Ако използваш по-краткия (HTML5) – не съм наблюдавал да е оказвало порблеми при мене, но допускам че може да е свързано с DOCTYPE декларацията (предполагам, че HTML4 DOCTYPE декларация няма да се разбира много добре с HTML5 charset meta).

    Също така не ми е ясно какво точно имаш предвид под „кодира всичко написано от мен“.

    Какво точно се получава когато отвориш страницата? Йероглифи ли се виждат? В зависимост от това какъв браузър използваш потърси в менютата какъв encoding използва браузърът за да ти покаже страницата. На Chrome се намира като кликнеш на гаечения ключ и след това избереш Tools -> Encoding (поне на аглийски е така). Ако от това меню ти излиза UTF-8 (или каквото друго си задал в charset meta-та) – значи пролбемът е другаде. Но ако там излиза друго, значи нещо кара браузъра да използва друга кодировка.

    P.S. ако пишеш тагове в коментарите трябва да заменяш < с &lt;, а > с &gt; – така показваш, че ъгловите скоби са специални символи, а не че използваш таг, който да се вижда в сайта (тъй като не може всеки да пише HTML в моя сайт 😛 – съображения за сигурност).

  3. В този урок въпросът не е засегнат, тъй като изисква CSS, а тук обясненията са само за HTML.

    И все пак в отговор – зависи точно какво ти се налага да направиш, но може да опиташ и на трите div-а да зададеш float: left. Не забравяй само след тях да добавиш и някакъв clear: both таг, който да изчисти float-а.

    Може да погледнеш видеото от този урок: https://magadanski.com/uroci/suzdavane-na-nova-html-stranica-s-header-i-navigacia-chast-2/ (след 10-та минута)

    • HTML5 не се тегли, а е просто език, на който се пише. В голяма степен е като HTML4, просто има някои нови тагове (и нови функции в JavaScript свързани с тях и с други елементи).

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

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

Този сайт използва Akismet за намаляване на спама. Научете как се обработват данните ви за коментари.