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

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

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

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

ИзчистенПрозорец
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Моята първа страница</title>
  6. </head>
  7. <body>
  8. </body>
  9. </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 страница? Точно така. Има един страхотен инструмент, с който можеш да провериш кода на своята страница. Но, за да не те натоварвам повече, това ще го оставим за следващия урок.