Как да се науча бързо да правя сайтове на html

Един приятел наскоро ме попита дали може да научи html, css и javascript и дали въобще си струва да се хваща да го прави. Казах му, че няма да стане за ден, но винаги си струва, стига да му се занимава.

Реших в този урок да структурирам какво трябва да се научи и каква е основата и въобще как най-бързо да се научим да правим сайтове. Мисля, че ще е полезно.

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

Всеки един интернет сайт е съвкупност от файлове, които браузъра чете и показва в зависимост от това какво пише в тях.
Какво става като напишете www.uni-muni.com примерно?
Самото име (uni-muni.com) на сайта се казва домейн. Обикновено се купува и може да бъде с различни окончания .com, .net., .bg

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

Друго важно нещо е хостингът. Това е мястото, където са качени файловете с вашия код (било то html, php, javascript, css и т.н.).

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

Файловете! Html файловете са с разширение .html и принципно се прави сайта ви да започва с основен код в index.html, ако не е оказано друго, като напишете името на домейна си се зарежда този файл. Ако го нямате, може да не ви се зареди сайта.

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

index.html
menu.html
kontakti.html
galeriq.html

Примерно така. В тези файлове с помощта на линкове може да е указано кой файл да се зарежда като цъкате и това пък казва каква да се вижда на страницата в момента.

Толкова по основата, която ви трябва преди да почнете. Може да звучи сложно, ама хич не е.

Сега за html. Oсновното, което трябва да схванете е как се подреждат нещата и как да накараме нещо да изглежда по даден начин.

Html кодът се пише в текстове редактор, примерно notepad, но препоръчвам да си сложите notepad++. Като запазвате файловете ги запазвайте като ime.html.

Основното на хтмл е, че всичко се прави с тагове. Таг е определен код, който е затворен между тези скоби < >. Таговете са отварящи и затварящи. Отварящите са < >, а затварящите </ >, т.е. за да направите определена команда трябва да отворите да напишете ключовата дума, да сложите това, което искате и задължително в повечето случаи да затворите.

Пример:
Искам да направя текста кликни тук да е линк.
Трябва да напиша следното:
<a href=””>кликни тук</а>
–    Имаме отварящ таг < в него кодът a href=””, което казва на браъзтра, че това е линк и накрая >
–    След това слагаме текста който искаме
–    И затваряме
–    А за да кажем къде ще води линка, слагаме урл-то между кавичките и ще стане

<a href=”https://www.uni-muni.com”>кликни тук</а>
Друго важно нещо е самата задължителна структура на хтмл.

Ето я и нея:
<html>
<head></head>
<body></body>
</html>

Имаме отварящ и затварящ таг, указващ че пишем html код, след това таговете за хедър или това е мястото където слагате неща, които декларирате за сайта си, както и заглавия, описания и ключови думи (не пречи и празно да е в началото) и след това в body е самото съдържание на сайта ви.

Ето все пак и таговете, които задължително трябва да знаете (пиша тези които аз ползвам и ви препоръчвам да ги научите и да съберете повече инфо за тях) – няма да пиша как се затварят, защото вече обясних:

<html> – казва, че почвате да пишете хтмл
<head> – глава на сайта
<title> – заглавие на сайта (слага се в главата)
<meta> – мета тагове (потърсете за тях в инет и научите за тях)
<body> – тук е всичко, което искате да се вижда от сайта ви
<p> -нов абзац
<br> – нов ред
<a href=””></a> – линк
<img src=””> снимка (може да няма затварящ таг)
<div> – кутийка (научете се да позиционирате елементите си с дивове и избягвайте таблици и рамки)
<table> – започване на таблица
<tr> – редици от таблица
<th> – кутийки
<frame> – рамки

Това май ви стига като начало за тагове.

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

Ето и няколко съвета от мен как може да научите бързо html:

–    Научете основните тагове и си изяснете структурата. За целта купете не много дебела книжка или потърсете подробни самоучители в интернет направо. Може и да гледате клипчета в youtube за основите на хтмл. Аз така съм научил много.

–    Правете примерите и си обяснявайте някакви неща

–    Друго важно нещо, което ми е помогнало на мен – тегля готови хтмл шаблони на сайтове и ги разцъквам и си ги правя на мои си сайтчета прости такива примерни колкото да се науча. Такива шаблони може да изтеглите от www.templatemonster.com или други подобни сайтове. Няма да повярвате колко ще дръпнете с моята част от урока горе и с разцъкване на тези шаблони, както и с точко едно с четенето.

–    Ако имате кой да ви обясни за час – два (не повече) кое как е за това, което написах горе ще е още по-лесно: какво е домейн, какво е хостинг, как се качват файлове на хостинга, каква ми е структурата и линковете на хтмл сайта. Тези неща ви  трябват. Ако не си ги научете от инет. Има уроци и видеота.

–    Друго полезно нещо е firebug. Това е аддон за мозила. Инсталирайте го, гледайте клипчета как се ползва или прочетете някой хелп и разглеждайте сайтове, които са ви интересни как са направени за да хванете структурата.

Препоръчвам ви ученето на хтмл да прочете по следната схема, въпреки, че е доста субективно от това колко бързо схващате и на какво ниво сте:

–    Изучете всичко от този постинг – отделете поне час на него

–    Намерете книга за хтмл или пдф онлайн ръководство – има в интернет

–    Прочете и правете примери – отделете седмица – две за това по няколко часа на ден. Правте прости хтмл неща и не се изхвърляйте. Може и по-малко.

–    Изтеглете хтмл шаблони на сайтове и поченете да ги разучавате – вижте структурата, кое как е, променяйте и тествайте. Работете локално.

–    След като минете това може да се поинтересувате от css. Започнете с дребни примери как да изкарвате някой стилове в цсс. Как да викате css файла в хтмл и т.н.

–    Опитайте се да правите малки и лесни сайтчета, но така че да изглеждат добре и наистина да могат да се ползват.

–    Не бързайте с други езици: javascript, php може да са следващите, но не бързайте много с тях

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

Помнете, че не е толкова сложно колкото изглежда! Успех!

Written by

Таня

Таня е човекът, който винаги започва „само да проверя нещо набързо“ и по някакъв магически начин след два часа знае всичко за средновековни ключалки, живот на Марс и каква е разликата между ламантин и морска крава. Пише, защото е несправедливо само тя да се изненадва от странните неща, които открива. Обича кафе, котки и технологиите, които уж трябва да улесняват живота, но понякога изискват три факултета, за да ги включиш. Мисията ѝ: да обяснява сложното по човешки, да намира абсурдното в нормалното и да доказва, че знанието не е скучно — ако е сервирано с усмивка. Авторът работи над 15 години в сферата на дигиталните услуги и IT решенията, с практически опит във внедряване на софтуери, анализ на данни. Има повече от 10 години опит в различни маркетингови и дигитални агенции.

View all posts