Меню

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

Влез Излез

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

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

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

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

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

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

Първото нещо, което трябва да направите, когато започвате да се занимавате с подобна работа е да си изтеглите удобна програма. Въпреки, че на теория можете да пишете нужния код дори просто на Notepad, на практика нещата са доста по-сложни и когато напишете дори само десетина реда вече започвате да изгубвате края. Аз лично използвам Sublime Text 2. Програмата по принцип не е безплатна, а струва 60$, но може да бъде изтеглена безплатно за пробен период, който всъщност не е ограничен и можете да я ползвате колкото дълго си искате, като просто от време на време ще ви излиза по едно прозорче, което да ви подканва да си я купите. Има много други безплатни програми, които можете да използвате – Notepad++ (тествана лично от мене – не е зле), Aptana Studio (чувал съм много добри отзиви), Eclipse (имайте предвид, че освен за HTML се използва и за много други работи и затова е доста тежка), NetBeans (същия коментар като за Eclipse) и ако потърсите в Google ще откриете още множество резултати.

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

Вече стигаме и до самия 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> тагът включват, че той може да съдържа в себе си само <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-а на страницата се задава чрез <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 браузърът сам знае форматът на документа, а и без това за да получи информацията от въпросния мета таг, той трябва да знае, че се отнася за него, което е възможно само ако браузърът знае предварително, че това е HTML (парадоксално е, нали?). По тази причина е достатъчно да използваме просто charset атрибут, чиято стойност да зададем като кодировката, която използваме в страницата.

<title> тагът го добавяме след кодировката, за да нямаме проблеми при символите в него. Ако този ред е обърнат, страницата пак ще се вижда правилно, но браузърът ще се забави. Това се получава защото той започва с някаква стандартна кодировка, показва заглание и евентуално още нещо, което сме включили преди нашата декларация да кодировка, след което стига до мета таг за друга кодировка, а не тази, която той използва. Браузърът е умен и се връща назад, за да оправи съдържанието, което вече е показал, но това връщане го забавя. Тук става въпрос просто за 5-10 милисекунди, което само по себе си дори не може да се види на екрана, къй като честотата му на обновяване е около 16, но ако имаме много забавяния те се натрупват и после посетителите на сайта са недоволни, че сайтът ни е бавен. Всяка милисекунда е от значение, така че ги пестете.

  • Plambaka каза:

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

  • Plambaka каза:

    Това в кавичките са таговете „meta“

  • magadanski_uchen каза:

    Здравей!

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

    Първо – кой тип мета таг използваш за 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 в моя сайт 😛 – съображения за сигурност).

  • Александър каза:

    Чудесно обяснено. Благодаря за труда!

  • Как да направя eдин div в средата, след което до него още два – един отляво и един отдясно?

  • magadanski_uchen каза:

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

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

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

  • Ivan Zamfirov каза:

    Ot kude da si drupna html 5 ?? durpa li se startirali se kak stava 😕

    • magadanski_uchen каза:

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

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

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

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

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax