Структура на командите в 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-кода. Това се прави по следния начин:
- Отворете Internet Explorer. В прозореца за адресите горе ще пише about:blank.
- Щракнете върху бутона “File” от менюто в горната част на страницата.
- От падащото меню щракнете върху реда с надпис “Save As”
- Ще се появи прозорец в който името на файла по подразбиране е изписано като blank. Изтрийте го и на негово място напишете index.html
- Съхранете новия файл като щракнете върху бутона “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-документа –>
Т.е. коментара трябва да е изписан задължително между следните две форми:
- Отляво (в началото) – ъглова скоба, удивителен знак и две тирета (<!–)
- Отдясно (в края) – две тирета и ъглова скоба (–>)
