Моята първа уеб страница 11
Сподели урока
Нека си изясним нещо още от самото начало. Създаването на уеб страници е страшно лесно! Но пък това съвсем не означава, че след време всичко ще изглежда еднакво и безинтересно. Напротив, точно обратното. Удовлетворението от резултата, независимо от сложността на страницата, е винаги огромно.
Сега нека си изясним и едно друго нещо. Допускането на грешки е също толкова лесно! Понякога нещата няма да се получат от първия път. Понякога дори няма да се получат и от петия път, но е много важно да не се отказваш, а да продължаваш да опитваш и да обичаш това, което правиш.
Време е да създадеш своята първа уеб страница. Не се отчайвай, само защото не изглежда като сайта на бтв или Facebook. По-скоро бъди горд/а със себе си, защото опитваш всички тези нови и вълнуващи неща.
Всъщност, ние почти създадохме работеща уеб страница в предишните уроци. Разликата в този урок е, че ще се фокусираме върху нейното изграждане докато в предишните уроци служеше само като пример.
Това, което ще направим е да комбинираме знанията придобити в първите няколко урока.
Нека накратко опишем стъпките, през които ще преминем, за да създадем нашата първа уеб страница:
- Избор на подходяща DOCTYPE декларация;
- Отварящ html таг;
- Поставяне на xmlns атрибут;
- Отварящ head таг;
- Отварящ title таг;
- Добавяне на съдържание;
- Затварящ title таг;
- Затварящ head таг;
- Отварящ body таг;
- Затварящ body таг;
- Затварящ html таг;
- Проверка на резултата в браузъра.
Отвори текстовия редактор, с който ще работиш и нека започнем с писането. В случай, че не знаеш какво е текстов редактор и къде да го намериш прочети урока “Въведение в 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++ и препиши кода по-горе. Препоръчам ти да не го копираш, а да отделиш няколко минути, за да го напишеш ръчно. Така ще свикнеш с начина на изписване на различните елементи, техните атрибути и стойности.
Така изглежда резултата, до който достигнах аз. Ако твоя не е подреден по същия начин не се притеснявай. Важното в случая е кода да бъде правилно написан и последователен.
След като въведеш кода е добре набързо да го провериш за грешки. В следващата стъпка ще запазим файла на компютъра.
Стъпка 3
В горния ляв ъгъл натисни менюто File (1) и от падащия списък избери Save As… (2).
Стъпка 4
В прозореца, който ще се появи, трябва да избереш мястото, където искаш да запазиш този документ (1). В полето File name: (2) въведи неговото име, а от падащия списък на Save as type: (3) избери Hyper Text Markup Language file.. и след това натисни бутона Save (4).
Препоръчвам ти да създадеш лесна за откриване папка, в която да запазваш всички необходими файлове. Така ще си спестиш доста чудене и неприятности.
В горния пример за име на файла съм използвал stranica. Един важен съвет от мен: “Винаги използвай латиница при именуването на такъв тип документи”. Колкото по-бързо свикнеш с това, толкова по-малка е вероятността да имаш проблеми в бъдеще.
Стъпка 5
След като запазиш файла, който току що написа, минимизарай текстовия редактор и отвори папката, където се намира.
Така изглежда файла на моя компютър. Както виждаш полето 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 – Моята първа страница. За справка виж следващата снимка.
Честито! Ти създаде своята първа уеб страница!
Стъпка 8
За да сме напълно сигурни, че кода е точно този, който написахме е възможно да го видим чрез браузъра.
Натисни с десният бутон на мишката някъде в страницата и от менюто, което ще се покаже, избери View Page Source.
В новия прозорец, който ще се отвори, можеш да видиш кода на твоята страница.
Както виждаш, кода който написа чрез Notepad++ и този, който браузъра ти показва, е един и същ.
По същия начин можеш да видиш кода на всяка страница, която искаш. Влез в някой твой любим сайт, сложи мишката на някое празно пространство от страницата и натисни с десния бутон. Избери View Page Source. Кода на страницата, в която се намираш ще се покаже в отделен прозорец.
Ако използваш тази опция по правилен начин, тя може да ти помогне при отстраняването на грешки, усвояването на нови техники на работа и правилното им приложение. За това ще говорим в следващите уроци.
Заключение
Както можеш да предположиш това съвсем не е края в създаването на уеб страници, но определено това е процеса. Винаги, когато създаваме страница, пишем елементите, които са ни нужни, запазваме файла и го отваряме с браузър. Виждаме резултата и при нужда променяме кода.
Препоръчвам ти да отделиш 5-10 минути, за да преминеш още 1-2 пъти през стъпките описани в урока. Препиши кода и го изтрий. Препиши го отново и пак го изтрий. Препиши го за трети път, ако е нужно, докато напълно го усвоиш и свикнеш с писането.
Кода, който написа е минималното количество код, който ще ти бъде нужен, за да създадеш валидна xHTML страница.
Валидна xHTML страница? Точно така. Има един страхотен инструмент, с който можеш да провериш кода на своята страница. Но, за да не те натоварвам повече, това ще го оставим за следващия урок.
В случай, че някъде има грешка, която те тревожи и изглежда сякаш има нещо нередно, ти предоставям моя работен файл. А дори и да нямаш грешка, но искаш да свериш резултатите, нямам нищо против. Можеш да го свалиш като натиснеш големия оранжев бутон в началото или края на урока.
Надявам се, че всичко до тук ти е ясно, и че стъпките бяха лесни за следване и достатъчно добре обяснени. Ако имаш трудности в някоя от точките или нещата при теб се различават от тези описани в урока, не се притеснявай да споделиш своя коментар след урока.
Използвани снимки
Снимка към урока: Peter Mooibroek
Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.
Хареса ли ти урока? Сподели го със света :)
1
Защо не започнеш да ги кодираш в HTML5. Много по-лесно и изчистено :P Пък и е най-напред откъм технология :)
2
Да, прав си. Наистина HTML5 е вълнуваща технология с много по-разширени възможности от xHTML. Намерението ми е постепенно да стигна до уроците свързани с HTML5.
През това време посетителите ще научат също за CSS, jQuery и други, и стъпка по стъпка ще развиват знанията си :)
3
Браво Джават, като се върна в София ще се запиша в твоя клас :)
4
Ще има ли скоро нови уроци по HTML, защото не вярвам това да е всичко и след като съм го научил да съм специалист по HTML :D
Поздрави.
5
Прав си, това не е всичко, което можеш да научиш за HTML, но определено поставя добри основи.
Все още не съм се отказал от сайта, така че очаквай в скоро време нови уроци не само по HTML, но и по CSS и jQuery. Междувременно, ако все още не си, разгледай уроците в категории HTML и CSS. А защо не и CSS3. Обхващат доста интересни неща.
Успех и до скоро :)
6
Имам въпрос: Защо когато напиша заглавието “Моята първа страница” в Notepad++ и го прегледам в браузъра излизат йероглифи? Опитах няколко пъти, защото си помислих, че може да съм сгрешил някъде. Накрая копирах написаното в урока и пак не се получи. Реших да опитам в стария Notepad и за моя изненада се оказа, че там всичко е наред. “Моята първа страница” си се виждаше и нямаше такива проблеми.
П.С.: Прегледах с Chrome и Firefox.
7
Ориз, липсва ти мета-тага, за разпознаване на кирилицата. Сложи си това в
headсекцията, и ще видиш че ще стане :)8
Ориз, зададе ли в html файла преди
head?9
@Ориз: Това се получава, защото енкодинга на файла и този на съдържанието в него са различни. Имам специален урок, в който съм описал как да се избере правилен енкодинг.
Предложението на @Entropy не е на 100% правилно, защото се използва windows-1251. В урока, към който дадох линк по-горе, можеш да разбереш повече подробности.
Един от правилните начини е да поставиш
в
headна документа (в сличай, че страницата ти е xHTML). Алтернативно можеш да използваш предложението на @Яни, ако страницата ти е HTML5.Надявам се това да реши проблема ти. Успех!
10
Здравейте,
Опитах няколко пъти чрез урока за създаване на първа страница, проверявах и проверявах кода, но така и не се получи. Каква може да е причината?
11
Здравей, Момчил. Можеш ли да ми пратиш кода ти и с кой редактор си го писал, за да се опитам да ти помогна? Можеш да ми пишеш и във Facebook: Marin Radev. E-mail: mario_kz@abv.bg