Помогни ни да направим Uroci.net по - богат! Добави урок

Урок по HTML №2: Структура

taffch0   трудност:    видян: 20873


Структура на командите в HTML и основни понятия на езика

Отворете Explorer и влезте в някой сайт, например www.yahoo.com. Сега натиснете върху бутон "View" от най-горното меню на браузъра. От падащото меню изберете бутон "Source". Отваря се текстовия редактор Notepad, където виждате сорса на началната страница на Yahoo - "суровия" код на HTML-документа.

Обърнете внимание - най-отгоре, най-вляво е изписано

<html>.

Това е командата, с която започват почти всички HTML-документи. За изключенията от това правило ще стане дума по-късно.

Като разглеждате сорса на HTML-страницата ще видите, че командите на езика лесно се различават от обикновения текст - разликата се състои в това, че всички команди на HTML са затворени в ъглови скоби: < и >. Обиковения текст не е затворен в скоби, а е разположен в пространството между командите.

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

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

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

Друга отличителна черта на командите на езика е, че, както беше споменато в Урок №1, почти във всички случаи те са обединени по двойки - една начална и една крайна команди, като началната команда задава началото на някакъв ефект и е затворена между скобите < и >, а крайната команда задава край на ефекта, предизвикан от началната команда и представлява същата дума, изписана също между скобите < и >, но с наклонена надясно черта отпред: /.

Например, след като началото на един HTML-документ е командата

<html>,

то края на един HTML-документ е командата

</html>.

В Урок №1 беше подчертано, че в XHTML има изискване всички команди да имат завършващ таг (завършваща команда). За някои от командите обаче не е възможно да бъде зададен завършващ таг нито в HTML, нито в XHTML. Такава е например командата за започване на нов ред <br>. В такива случаи изискването на XHTML е наклонената надясно завършваща черта да се поставя в края на единствения таг (тъй като няма завършващ), с един интервал разстояние между командата и наклонената черта - <br />
Накратко - в HTML правилното изписване на командата за започване на нов ред е <br>
В XHTML правилното изписване на командата за започване на нов ред е <br /> Необходимо е да използвате именно този вариант, макар че браузърите ще продължат да разпознават като правилен и първия вариант.

В първия урок споменахме, че повечето атрибути притежават някаква стойност, която, според изискванията на XHTML, трябва да бъде затворена в двойни кавички.
Някои атрибути не притежават стойност - такъв например е атрибута noshade на командата за изграждане на хоризонтална линия <hr>. Но тъй като XHTML изисква всички атрибути да имат стойност, то в случаи като горния за стойност на атрибута се задава самото название на атрибута: noshade="noshade".
Всички тези изключения на езика ще бъдат изяснени в съответните уроци.

Нека да повторим: в езика HTML (както и в новата версия XHTML) командите се наричат "тагове". Отсега нататък вместо думата "команда" ще използваме думата "таг". Следователно можем да кажем, че съдържанието на една HTML-страница е затворено между началния таг <html> и крайния таг </html>.

Дори само тези две най-основни команди са достатъчни, за да направите най-елементарна HTML-страница.



Работна среда за писане на HTML-кода и създаване на прост HTML-документ

Следващата стъпка е да научите къде точно се пише HTML-кода.

За да създадете HTML-страница ви е нужен някакъв текстов редактор. Препоръчително е да започнете с най-простия - Notepad. Notepad e част от пакета на Windows и може да го отворите като отидете на бутон "Start" най-долу, най-вляво на екрана и после изберете
"Programs"-->"Accessories"-->"Notepad".

След като отворите Notepad напишете в него следното:

<html>This is my first HTML-page!</html>

Ако предпочитате вместо "This is my first HTML-page!" може да напишете "Tova e moqta parva HTML-stranica!" или каквото и да е друго, но задължително с латински букви.

Сега отидете на бутон "File" от менюто на Notepad и изберете "Save As". Ще се отвори прозорец, в който да напишете името на своята първа HTML-страница. По подразбиране нейното име е Untitled. Изтрийте го, напишете index.html (или index.htm - тези названия са равностойни) и натиснете бутон "Save". Преди това изберете къде точно върху твърдия диск да съхраните страницата. Може да направите това например в папката "My Documents".

Ето че създадохте първата си HTML-страница. Отворете я, за да видите как изглежда.

Името на вашата страница би могло да бъде каквото и да е, например mypage.html (mypage.htm). Но в случая беше важно да я съхраните под името index.html, за да запомните по-лесно следващото основно правило от езика HTML: началната страница на почти всеки сайт в интернет носи названието index.html или index.htm Само ако носи това име браузъра ще я разпознае като първа и ще отвори сайта, чиито адрес сте написали. Например началната страница на Yahoo се нарича index.html, но няма нужда да изписвате www.yahoo.com/index.html - достатъчно е да напишете www.yahoo.com

HTML-страница може да създадете и като действате в обратен на описания ред, а именно - като първо запомните един файл с разширение html или htm и след това напишете в него HTML-кода. Това се прави по следния начин:
  1. Отворете Internet Explorer. В прозореца за адресите горе ще пише about:blank.
  2. Щракнете върху бутона "File" от менюто в горната част на страницата.
  3. От падащото меню щракнете върху реда с надпис "Save As"
  4. Ще се появи прозорец в който името на файла по подразбиране е изписано като blank. Изтрийте го и на негово място напишете index.html
  5. Съхранете новия файл като щракнете върху бутона "Save".

Сега вече имате файл index.html, но в него няма нищо. За да започнете да пишете HTML-кода първо трябва да отворите файла. След като направите това, пред вас отново ще има празна страница, но в прозореца горе, където се изписват уеб адресите, вече няма да пише about:blank, a ще е изписан адреса на вашия файл: C:My documentsindex.html Натиснете бутона "View" от горното меню, a от падащото меню изберете бутон "Source". Появява се текстовия редактор Notepad. Изтрийте това, което видите в него, така че да се получи чиста страница. Сега вече върху тази празна страница напишете вашия HTML-код. Съхранете написаното. Дори и да решите веднага да затворите Notepad, без да сте запомнили написаното, ще се появи надпис: Искате ли да съхраните промените в страницата си? Ако желаете да ги запаметите натиснете бутона "Yes". Сега натиснете бутона "Refresh" от менюто в горната част на браузъра и това което току-що написахте ще се появи на страницата ви.



Структура на типичен HTML-документ и правила при влагане на тагове

Вече знаете, че таговете <html> и </html> оформят началото и края на един HTML-документ. Mежду тези два тага се разполагат двете основни части на един HTML документ. Първата част се нарича HEAD (глава), а втората част - BODY (тяло).

Тези две части на HTML-документа също имат начални и крайни тагове. Следователно скелета на един типичен HTML документ изглежда така:

<html>
<head> </head>
<body> </body>
</html>


От горния пример ще научите за още една характерна особеност на HTML и XHTML - таговете (командите) се влагат един в друг и това става по точно определено правило, а именно: таговете се затварят последователно, като винаги първия отворен таг, в който има вложени други тагове, се затваря последен.
В случая първия отворен таг е <html>, в който са вложени таговете за глава и тяло на HTML-документа - <head> и <body>, затова последен е неговия затварящ таг </html>. Затварящия таг на главата - </head> - е разположен преди началния таг на тялото <body>, защото секцията HEAD свършва непосредствено преди началото на секцията BODY.



Таг за коментар

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

Полезно е, особено за начинаещи уеб-разработчици, да оставят на съответните места в една HTML-страница различни текстове за обяснение и подсещане. Например преди началото на текста в секцията BODY може да се постави коментар: "Оттук започва текста" или нещо подобно.
Ако обаче този текст се изпише директно в секцията BODY той ще се появи на екрана. За да остане текста скрит (да не се появи в прозореца на браузъра) трябва да се използва тага за коментар в следния формат:

<!-- Тук може да се напише коментар, който няма да повлияе на HTML-документа -->

Т.е. коментара трябва да е изписан задължително между следните две форми:
  • Отляво (в началото) - ъглова скоба, удивителен знак и две тирета (<!--)
  • Отдясно (в края) - две тирета и ъглова скоба (-->)

    Преписването е забранено.



Коментари (4)

amnesia на 21.08 2010 в 00:56ч.
Браво taffch0 до тук разбрах всичко, дано и за напред да е тъка!
Обяснено е подробно, само дето улових някои заблуждавания, като например това че не на всеки браузъра е настроен по подразбиране в полето about:blank, и не на секи ОС-а му е на EN.
uroci.net го намерих в гугъла, прочетох някоя секция и започнах тук!
LxD на 13.01 2011 в 21:31ч.
Полезен урок за начинаещи!
absolutely на 01.03 2011 в 17:40ч.
Благодаря !
Gotmog на 23.06 2012 в 22:45ч.
Браво! Постарал си се да обясниш достъпно като за начинаещи нещата. Аз лично бих препоръчал редактора с който да се пише HTML- а да е Notepad++. Изключително удобен е , след като посвикнеш с него, и се използва масово от много уеб разработчици - позволява цветово отделяне на таговете, запаметяване на сесиите, директна проверка на написаното през няколко браузъра и много други екстри. И е безплатен.
Уроците тук са чудесни, но са предимно за начинаещи и малко разпокъсани.
За тези които искат да напреднат и да правят професионални сайтове бих препоръчал и друг ресурс за безплатно обучение провеждан от Академията на Телерик. Курса е цялостен и професионално воден от практикуващи уеб програмисти. Може да научите как се правят уеб сайтовете: От рязане на Photoshop проекти (slice and dice), програмирането на HTML, CSS и JavaScript до използването на готовия сайт в CMS системи...
http://frontendcourse.telerik.com/

Регистрирайте се, за да добавите коментар


Калдейта ЕООД - © 2003-2010. Всички права запазени.
Препоръчваме: Национален Бизнес | Bomba.bg | IT Новини | Диплома.бг | TRAVEL туризъм | Реферати | AmAm.bg | Иде.ли | Курсови работи | Фото Форум | Spodeli.net | Фото-Култ | Atol.bg | Elmaz.com | MobileBulgaria.com | Казанлък.Com