Уеб уроци и ресурси по HTML,
CSS, CSS3, JavaScript и други

Моята първа уеб страница 11

Сподели урока

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

Сега нека си изясним и едно друго нещо. Допускането на грешки е също толкова лесно! Понякога нещата няма да се получат от първия път. Понякога дори няма да се получат и от петия път, но е много важно да не се отказваш, а да продължаваш да опитваш и да обичаш това, което правиш.

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

Всъщност, ние почти създадохме работеща уеб страница в предишните уроци. Разликата в този урок е, че ще се фокусираме върху нейното изграждане докато в предишните уроци служеше само като пример.

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

Нека накратко опишем стъпките, през които ще преминем, за да създадем нашата първа уеб страница:

  1. Избор на подходяща DOCTYPE декларация;
  2. Отварящ html таг;
  3. Поставяне на xmlns атрибут;
  4. Отварящ head таг;
  5. Отварящ title таг;
  6. Добавяне на съдържание;
  7. Затварящ title таг;
  8. Затварящ head таг;
  9. Отварящ body таг;
  10. Затварящ body таг;
  11. Затварящ html таг;
  12. Проверка на резултата в браузъра.

Отвори текстовия редактор, с който ще работиш и нека започнем с писането. В случай, че не знаеш какво е текстов редактор и къде да го намериш прочети урока “Въведение в HTML”, в който съм описал няколко добри съвета.

В този урок ще използвам редактора Notepad++ и ще описвам стъпките, през които преминавам, съответно използвайки тази програма. В случай, че използваш друга процеса би трябвало да бъде подобен.

Стъпка 1

Реших да започнем упражнението със Strict DOCTYPE декларация. Повече информация за DOCTYPE декларацията и нейната цел можеш да откриеш в урока “Задължителни xHTML елементи”. На този етап вида на DOCTYPE не е толкова важен, но е важно да бъде изписан правилно и да е първото нещо, с което започва документа.

Нека видим как стъпките описани по-горе изглеждат в xHTML код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Моята първа страница</title>
</head>
<body>
</body>
</html>
Стъпка 2

Отвори Notepad++ и препиши кода по-горе. Препоръчам ти да не го копираш, а да отделиш няколко минути, за да го напишеш ръчно. Така ще свикнеш с начина на изписване на различните елементи, техните атрибути и стойности.

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

HTML кода написан в Notepad++

След като въведеш кода е добре набързо да го провериш за грешки. В следващата стъпка ще запазим файла на компютъра.

Стъпка 3

В горния ляв ъгъл натисни менюто File (1) и от падащия списък избери Save As… (2).

Запазване на HTML кода, който сме написали

Стъпка 4

В прозореца, който ще се появи, трябва да избереш мястото, където искаш да запазиш този документ (1). В полето File name: (2) въведи неговото име, а от падащия списък на Save as type: (3) избери Hyper Text Markup Language file.. и след това натисни бутона Save (4).

Избери мястото, името и разширението на файла, който искаш да запазиш

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

В горния пример за име на файла съм използвал stranica. Един важен съвет от мен: “Винаги използвай латиница при именуването на такъв тип документи”. Колкото по-бързо свикнеш с това, толкова по-малка е вероятността да имаш проблеми в бъдеще.

Стъпка 5

След като запазиш файла, който току що написа, минимизарай текстовия редактор и отвори папката, където се намира.

Полето Type показва типа на файла.

Така изглежда файла на моя компютър. Както виждаш полето Type показва, че файла е HTML file. Точно както трябва да бъде. Проблема сега е, че ако кликнеш 2 пъти върху файла той ще се отвори с програма по подразбиране. В моя случай, файла ще се отвори отново с Notepad++.

Ако при теб стойността в полето Type е различна, например Firefox document или Chrome HTML Document, това означава, че при двойно кликане върху файла, той ще се отвори съответно с Firefox или Chorme.

А в случай, че полето Type не е видимо, не се притеснявай. Следващата стъпка ще ти покаже как да отвориш файла успешно.

Стъпка 6

За да отвориш файла с браузър трябва да се върнеш обратно в Notepad++ и от менюто Run (1) да избереш подменюто Launch in Firefox (2) (ако имаш Firefox инсталиран на твоя компютър).

Избери браузър, с който да отвориш страницата

Ако нямаш инсталиран Firefox, можеш да избереш друг браузър от списъка. Резултата във всеки трябва да бъде абсолютно същия.

Стъпка 7

След като отвориш файла с желания браузър трябва да видиш празна страница. В горния ляв ъгъл трябва да видиш текста, който е поставен между отварящия и затварящия таг на елемента title – Моята първа страница. За справка виж следващата снимка.

Моята първа страница отворена във Firefox

Честито! Ти създаде своята първа уеб страница!

Стъпка 8

За да сме напълно сигурни, че кода е точно този, който написахме е възможно да го видим чрез браузъра.

Натисни с десният бутон на мишката някъде в страницата и от менюто, което ще се покаже, избери View Page Source.

Виж кода на страницата чрез браузъра, в която е отворена

В новия прозорец, който ще се отвори, можеш да видиш кода на твоята страница.

Кода, който браузъра ни показва е същия, който написахме сами в Notepad++

Както виждаш, кода който написа чрез Notepad++ и този, който браузъра ти показва, е един и същ.

По същия начин можеш да видиш кода на всяка страница, която искаш. Влез в някой твой любим сайт, сложи мишката на някое празно пространство от страницата и натисни с десния бутон. Избери View Page Source. Кода на страницата, в която се намираш ще се покаже в отделен прозорец.

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

Заключение

Както можеш да предположиш това съвсем не е края в създаването на уеб страници, но определено това е процеса. Винаги, когато създаваме страница, пишем елементите, които са ни нужни, запазваме файла и го отваряме с браузър. Виждаме резултата и при нужда променяме кода.

Препоръчвам ти да отделиш 5-10 минути, за да преминеш още 1-2 пъти през стъпките описани в урока. Препиши кода и го изтрий. Препиши го отново и пак го изтрий. Препиши го за трети път, ако е нужно, докато напълно го усвоиш и свикнеш с писането.

Кода, който написа е минималното количество код, който ще ти бъде нужен, за да създадеш валидна xHTML страница.

Валидна xHTML страница? Точно така. Има един страхотен инструмент, с който можеш да провериш кода на своята страница. Но, за да не те натоварвам повече, това ще го оставим за следващия урок.

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

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

Използвани снимки

Снимка към урока: Peter Mooibroek

Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.

Награда за това, че успя да достигнеш до края на урока.

Хареса ли ти урока? Сподели го със света :)

Начало

11 страхотни коментара

  1. 1

    Иван
    30 януари 2012 13:14

    Защо не започнеш да ги кодираш в HTML5. Много по-лесно и изчистено :P Пък и е най-напред откъм технология :)

  2. 2

    Джават Ушев (автор)
    05 февруари 2012 20:33

    Да, прав си. Наистина HTML5 е вълнуваща технология с много по-разширени възможности от xHTML. Намерението ми е постепенно да стигна до уроците свързани с HTML5.

    През това време посетителите ще научат също за CSS, jQuery и други, и стъпка по стъпка ще развиват знанията си :)

  3. 3

    Карамихова
    07 февруари 2012 05:51

    Браво Джават, като се върна в София ще се запиша в твоя клас :)

  4. 4

    Ivailo
    13 октомври 2012 19:33

    Ще има ли скоро нови уроци по HTML, защото не вярвам това да е всичко и след като съм го научил да съм специалист по HTML :D
    Поздрави.

  5. 5

    Джават Ушев (автор)
    15 октомври 2012 00:02

    Прав си, това не е всичко, което можеш да научиш за HTML, но определено поставя добри основи.

    Все още не съм се отказал от сайта, така че очаквай в скоро време нови уроци не само по HTML, но и по CSS и jQuery. Междувременно, ако все още не си, разгледай уроците в категории HTML и CSS. А защо не и CSS3. Обхващат доста интересни неща.
    Успех и до скоро :)

  6. 6

    Ориз
    11 май 2014 01:38

    Имам въпрос: Защо когато напиша заглавието “Моята първа страница” в Notepad++ и го прегледам в браузъра излизат йероглифи? Опитах няколко пъти, защото си помислих, че може да съм сгрешил някъде. Накрая копирах написаното в урока и пак не се получи. Реших да опитам в стария Notepad и за моя изненада се оказа, че там всичко е наред. “Моята първа страница” си се виждаше и нямаше такива проблеми.

    П.С.: Прегледах с Chrome и Firefox.

  7. 7

    Entropy
    21 август 2014 11:34

    Ориз, липсва ти мета-тага, за разпознаване на кирилицата. Сложи си това в head секцията, и ще видиш че ще стане :)

    <meta http-equiv="content-type" content="text/html; charset=windows-1251" />

  8. 8

    Яни
    15 септември 2014 18:20

    Ориз, зададе ли в html файла преди head?

    <meta charset="utf-8">
    

  9. 9

    Джават Ушев (автор)
    22 септември 2014 08:34

    @Ориз: Това се получава, защото енкодинга на файла и този на съдържанието в него са различни. Имам специален урок, в който съм описал как да се избере правилен енкодинг.

    Предложението на @Entropy не е на 100% правилно, защото се използва windows-1251. В урока, към който дадох линк по-горе, можеш да разбереш повече подробности.

    Един от правилните начини е да поставиш

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

    в head на документа (в сличай, че страницата ти е xHTML). Алтернативно можеш да използваш предложението на @Яни, ако страницата ти е HTML5.

    Надявам се това да реши проблема ти. Успех!

  10. 10

    Момчил
    09 март 2016 10:07

    Здравейте,
    Опитах няколко пъти чрез урока за създаване на първа страница, проверявах и проверявах кода, но така и не се получи. Каква може да е причината?

  11. 11

    Марин Радев
    22 март 2016 21:00

    Здравей, Момчил. Можеш ли да ми пратиш кода ти и с кой редактор си го писал, за да се опитам да ти помогна? Можеш да ми пишеш и във Facebook: Marin Radev. E-mail: mario_kz@abv.bg

Твоят коментар

* - задължителни полета