HTML Урок - Структура

by **Shenko** Нед 06 Мар 2011, 02:16

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

Отворете Explorer и влезте в някой сайт, например [You must be registered and logged in to see this link.]. Сега
натиснете върху бутон "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-страница.

[You must be registered and logged in to see this link.]

Работна среда за писане на 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, но няма нужда да
изписвате [You must be registered and logged in to see this link.] - достатъчно е да напишете
[You must be registered and logged in to see this link.]

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" от
менюто в горната част на браузъра и това което току-що написахте ще се
появи на страницата ви.

[You must be registered and logged in to see this link.]

Структура на типичен 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.

[You must be registered and logged in to see this link.]

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

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

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



Т.е. коментара трябва да е
изписан задължително между следните две форми:

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

Отдясно (в края) - две тирета и ъглова скоба (-->)

За Да олесните HTML Изтеглете: [You must be registered and logged in to see this link.]