Един приятел наскоро ме попита дали може да научи 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 може да са следващите, но не бързайте много с тях
– Каквото не ви е ясно търсете в интернет, особено ако знаете английски, може да разучите света за нула време.
Според мен ако спазите стъпките, може да правите първите си сайтове за около месец. А другото е научаване на нови и нови неща…
Помнете, че не е толкова сложно колкото изглежда! Успех!
Много полезна статия, браво! Наистина много хора се интересуват от това. Самообучението е много важно, но, за съжаление, така няма как да знаеш къде правиш грешки. Не знам дали си чувал за Академията на Телерик (http://academy.telerik.com/), но там предлагат безплатни курсове за правене на сайтове – как да пишем HTML, CSS, JavaScript, такива неща. Лекторите се занимават с това и са наясно с новостите и те учат на технлогии и практики буквално от днес. Ето го сайта – http://html5course.telerik.com Безплатно е, а накрая получаваш и сертификат.