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

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

1.Основни понятия

В този урок са представени основните понятия в HTML и структурирането на типичния HTML-документ.

Продуктите на Microsoft изпреварват по популярност всички останали. Повечето обикновени персонални компютри работят с Windows и Internet Explorer. Затова в примерите ползваме браузъра на Microsoft - Internet Explorer.

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

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

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


. Но тъй като XHTML изисква всички атрибути да имат стойност, то в случаи като горния за стойност на атрибута се задава самото название на атрибута: noshade="noshade". Всички тези изключения на езика ще бъдат изяснени в съответните уроци. Нека да повторим: в езика HTML (както и в новата версия XHTML) командите се наричат "тагове". Отсега нататък вместо думата "команда" ще използваме думата "таг". Следователно можем да кажем, че съдържанието на една HTML-страница е затворено между началния таг и крайния таг . Дори само тези две най-основни команди са достатъчни, за да направите най-елементарна HTML-страница.

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

Следващата стъпка е да научите къде точно се пише HTML-кода. За да създадете HTML-страница ви е нужен някакъв текстов редактор. Препоръчително е да започнете с най-простия - Notepad. Notepad e част от пакета на Windows и може да го отворите като отидете на бутон "Start" най-долу, най-вляво на екрана и после изберете "Programs"-->"Accessories"-->"Notepad". След като отворите Notepad напишете в него следното: This is my first HTML-page!. Ако предпочитате вместо "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 documents\index.html Натиснете бутона "View" от горното меню, a от падащото меню изберете бутон "Source". Появява се текстовия редактор Notepad. Изтрийте това, което видите в него, така че да се получи чиста страница. Сега вече върху тази празна страница напишете вашия HTML-код. Съхранете написаното. Дори и да решите веднага да затворите Notepad, без да сте запомнили написаното, ще се появи надпис: Искате ли да съхраните промените в страницата си? Ако желаете да ги запаметите натиснете бутона "Yes". Сега натиснете бутона "Refresh" от менюто в горната част на браузъра и това което току-що написахте ще се появи на страницата ви.

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

Вече знаете, че таговете и оформят началото и края на един HTML-документ. Mежду тези два тага се разполагат двете основни части на един HTML документ. Първата част се нарича HEAD (глава), а втората част - BODY (тяло). Тези две части на HTML-документа също имат начални и крайни тагове. Следователно скелета на един типичен HTML документ изглежда така:

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

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

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

  • Отляво (в началото) - ъглова скоба, удивителен знак и две тирета ()