HTML Урок - Структура
Страница 1 от 1
HTML Урок - Структура
Структура на командите в 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-кода. Това се
прави по следния начин:
Сега вече имате файл 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-документа -->
Т.е. коментара трябва да е
изписан задължително между следните две форми:
Отворете 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-документа -->
Т.е. коментара трябва да е
изписан задължително между следните две форми:
- Отляво (в началото) - ъглова скоба, удивителен знак и две тирета
(<!--) - Отдясно (в края) - две тирета и ъглова скоба (-->)
Shenko- Admin
- Age : 30
Брой мнения : 31
Points : 105
Reputation : 7
Join date : 17.02.2011
Similar topics
» HTML Урок-Цветове
» HTML Урок Движещ се текст на вашия сайт
» [урок] www.No-IP.com - Инструкции за ползване на услугата!
» HTML Урок Движещ се текст на вашия сайт
» [урок] www.No-IP.com - Инструкции за ползване на услугата!
Страница 1 от 1
Права за този форум:
Не Можете да отговаряте на темите
|
|
Пон 19 Ное 2018, 00:01 by paynerr
» LockMU Season 6 Episode 3
Пон 12 Ное 2018, 20:02 by kaleikata
» DawnMu старата школа за старите играчи
Съб 26 Ное 2016, 01:13 by besnia3
» [AD] OPEN MU SEASON 3 EPISODE 1
Съб 09 Апр 2016, 06:29 by xtasy
» [AD] OPEN MU SEASON 3 EPISODE 1
Чет 07 Яну 2016, 10:11 by xtasy
» WarWorldMu 97d99i Exp: 200x Drop: 80%
Нед 16 Авг 2015, 20:20 by StrongHold
» LinkosMU Season 3 episode 1
Чет 14 Май 2015, 23:51 by StrongHold
» HARD MU (99b+)
Чет 16 Апр 2015, 16:23 by roly92
» [AD] OpenMu S3 , EP 1 max xp , fun server
Чет 26 Мар 2015, 16:14 by rogue93