1. HTML и XHTML
HTML е съкращение от HyperText Markup Language (буквално "Хипертекстов език за маркиране"). Създаден е в края на 80-те години от англичанина Тим Бърнърс-Лий, който се опитва да изнамери нов метод за обмяна на информация с колегите си учени от Европейската Лаборатория по Физика на Елементарните Частици в Женева. Същността на неговия метод е създаване на текстови документи, обвързани помежду си с хипервръзки, които да могат да се прехвърлят чрез мрежата до отдалечен потребител. Така се появява необходимостта от специален език за създаване на този вид документи.
Скоро се появява и първия браузър - програма, която позволява на потребителя да види HTML-документа на своя монитор. Създателя му е Марк Ендрисън, който по-късно основава компанията NetScape Communications и пуска на пазара известния браузър NetScape Navigator. Другия широко използван браузър в момента е Internet Explorer на компанията Microsoft.
Скоро се появява и първия браузър - програма, която позволява на потребителя да види HTML-документа на своя монитор. Създателя му е Марк Ендрисън, който по-късно основава компанията NetScape Communications и пуска на пазара известния браузър NetScape Navigator. Другия широко използван браузър в момента е Internet Explorer на компанията Microsoft.
Организацията за стандартизиране на HTML се нарича World Wide Web Consortium (официален сайт www.w3.org). Към нея се отправят всички предложения за допълване и изменение на HTML.
Последната версия на езика е HTML 4.01. World Wide Web Consortium подготвиха и следващото поколение на HTML, което се нарича XHTML (Extensible HiperText Markup Language).
Между HTML и XHTML съществуват няколко различия:
1. В HTML няма значение дали таговете (командите на езика) се изписват с големи или малки букви. В XHTML има изискване таговете да се изписват с малки букви. Например командата за нов ред e BR, като буквите са затворени в ъглови скоби (както всички команди на езика). В HTML командата може да се изпише така: <BR>. В XHTML е задължително буквите да са малки: <br>.
2. HTML не изисква затварянето на стойностите на таговете- атрибути в кавички. В XHTML съществува изискване за поставяне на двойни кавички. Например атрибута за ширина на таблица, който е width, ако предположим, че трябва да е със стойност 150 пиксела, може да се изпише в HTML така: width=150. В XHTML стойността на атрибута задължително трябва да е в кавички, т.е. да изглежда така: width="150".
3. Почти всички тагове в HTML се въвеждат по двойки - начален и краен таг. Съществуват и няколко команди, които нямат краен (затварящ) таг. В XHTML е задължително всички команди да имат затварящи тагове. Ако командата е без затварящ таг, тогава в отварящия таг се изписва и наклонената на дясно черта за затваряне на тага, като тази черта трябва да е на една стъпка разстояние от края на текста на командата. Например командата за нов ред <br> няма затварящ таг, затова в XHTML нейния вид трябва да е такъв: <br />.
4. На почти всички атрибути в HTML се задава някаква стойност. Съществуват и атрибути които нямат стойност. В XHTML е задължително на всички атрибути да се задава стойност. Щом един атрибут няма стойност в HTML, тогава в XHTML като стойност се задава самото име на атрибута. Например атрибута за премахване сянката на линия е noshade и той няма стойност, затова в XHTML трябва да се изпише така: noshade="noshade".
2. Структура на HTML документ
HTML документите са съставени от две основни части -
1. Заглавна част (head)
2. Тяло (body)
Началния и крайния тагове на заглавната част са <head> и </head>
Началния и крайния тагове на тялото са <body> и </body>
Типичната структура на един html документ е
<html>
<head> </head>
<body> </body>
</html>
Текста, графиките, снимките и изобщо всичко което се вижда на монитора при отваряне на една html страница, се намира в "тялото" (body) на страницата, т.е. между таговете <body> и </body>.
1. Заглавна част (head)
2. Тяло (body)
Началния и крайния тагове на заглавната част са <head> и </head>
Началния и крайния тагове на тялото са <body> и </body>
Типичната структура на един html документ е
<html>
<head> </head>
<body> </body>
</html>
Текста, графиките, снимките и изобщо всичко което се вижда на монитора при отваряне на една html страница, се намира в "тялото" (body) на страницата, т.е. между таговете <body> и </body>.
Таговете на езика и всичките им атрибути и стойности, заключени между ъгловите скоби, както и самите ъглови скоби трябва да се изписват винаги с латинска азбука
Между текста на таговете и ъгловите скоби не трябва да се оставя празен интервал. Такъв се оставя между атрибутите на командите.
3. Тагове преди началния таг html (!DOCTYPE)
Преди началния таг (<html>) на html документа се разполага тагът
<!DOCTYPE>.
Чрез тага <!DOCTYPE> и атрибутите му се указва на браузера каква версия на HTML или XHTML е използвана при написване на html документа и какъв е типът на документа.
1. При HTML 4.01 се използват 3 типа DTD (Document Type Declaration)
а. Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Ползва се когато при изграждане на страницата е използван CSS (Cascading Style Sheets).
б. Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Ползва се когато при изграждане на страницата не са спазвани стриктно изискванията на HTML 4.01.
в. Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Ползва се когато страницата е изградена с фреймове (frames).
2. При XHTML 1.0 съществуват същите 3 DTD:
a. Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Ползва се когато при изграждане на страницата е използван CSS (Cascading Style Sheets).
б. Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ползва се когато при изграждане на страницата не са спазвани стриктно изискванията на XHTML 1.0.
в. Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Ползва се когато страницата е изградена с фреймове (frames).
ПРИМЕР:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head> </head>
<body> </body>
</html>
<!DOCTYPE>.
Чрез тага <!DOCTYPE> и атрибутите му се указва на браузера каква версия на HTML или XHTML е използвана при написване на html документа и какъв е типът на документа.
1. При HTML 4.01 се използват 3 типа DTD (Document Type Declaration)
а. Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Ползва се когато при изграждане на страницата е използван CSS (Cascading Style Sheets).
б. Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Ползва се когато при изграждане на страницата не са спазвани стриктно изискванията на HTML 4.01.
в. Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Ползва се когато страницата е изградена с фреймове (frames).
2. При XHTML 1.0 съществуват същите 3 DTD:
a. Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Ползва се когато при изграждане на страницата е използван CSS (Cascading Style Sheets).
б. Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ползва се когато при изграждане на страницата не са спазвани стриктно изискванията на XHTML 1.0.
в. Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Ползва се когато страницата е изградена с фреймове (frames).
ПРИМЕР:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head> </head>
<body> </body>
</html>
4. Заглавие на html документ
В главата (<head> </head>) на html документа се разполага заглавието на страницата (title).
Заглавието на html документа се изписва между таговете
<title> и </title>
Важно е една html страница да има зададено заглавие, тъй като търсачките (като Гугъл например) възприемат написаното между таговете <title> и </title> като най-важната информация за страницата. Заглавието трябва да съдържа до 40-50 знака и да описва най-точно съдържанието на страницата.
Заглавието на html страницата се показва в синята лента в най-горната част на браузера.
ПРИМЕР:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Моята първа HTML страница</title>
</head>
<body>
Текст и графики.
</body>
</html>
Заглавието на html документа се изписва между таговете
<title> и </title>
Важно е една html страница да има зададено заглавие, тъй като търсачките (като Гугъл например) възприемат написаното между таговете <title> и </title> като най-важната информация за страницата. Заглавието трябва да съдържа до 40-50 знака и да описва най-точно съдържанието на страницата.
Заглавието на html страницата се показва в синята лента в най-горната част на браузера.
ПРИМЕР:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Моята първа HTML страница</title>
</head>
<body>
Текст и графики.
</body>
</html>
5. Коментар
Тагът за коментар по никакъв начин не влияе на html страниците и не се показва в браузъра.
Този таг е полезен когато на съответните места в една html страница трябва да се запишат различни текстове за обяснение и подсещане.
Например преди началото на някаква таблица в секцията body може да се постави коментар: "Начало на таблица" или нещо подобно.
Ако този текст се изпише директно в секцията body той ще се появи на екрана. За да остане текста скрит (да не се появи в прозореца на браузъра) трябва да се използва тага за коментар в следния формат:
<!--Коментар, който няма да повлияе на HTML-документа-->
Т.е. коментара трябва да е изписан задължително между следните две форми:
Отляво (в началото) - ъглова скоба, удивителен знак и две тирета (<!--)
Отдясно (в края) - две тирета и ъглова скоба (-->)
ПРИМЕР:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Моята първа html страница</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
</head>
<body>
<!--Начало на текста-->
Текст
Текст
Текст
<!--Край на текста-->
</body>
</html>
Този таг е полезен когато на съответните места в една html страница трябва да се запишат различни текстове за обяснение и подсещане.
Например преди началото на някаква таблица в секцията body може да се постави коментар: "Начало на таблица" или нещо подобно.
Ако този текст се изпише директно в секцията body той ще се появи на екрана. За да остане текста скрит (да не се появи в прозореца на браузъра) трябва да се използва тага за коментар в следния формат:
<!--Коментар, който няма да повлияе на HTML-документа-->
Т.е. коментара трябва да е изписан задължително между следните две форми:
Отляво (в началото) - ъглова скоба, удивителен знак и две тирета (<!--)
Отдясно (в края) - две тирета и ъглова скоба (-->)
ПРИМЕР:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Моята първа html страница</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
</head>
<body>
<!--Начало на текста-->
Текст
Текст
Текст
<!--Край на текста-->
</body>
</html>
6. Тяло на HTML документ (body). Атрибути на тага body.
Тагът body може да съдържа следните атрибути:
bgcolor="цвят" - задава цвят на фона на страницата
background="image.gif" - задава графичен файл във вид на фон
text="цвят" - задава цвета на текста в страницата
link="цвят" - задава цвета на връзките в страницата
vlink="цвят" - задава цвета на вече посетените връзки
alink="цвят" - задава цвета на връзките в момента на кликане в/у тях
topmargin="цифрова стойност" - задава разстоянието между съдържанието на страницата и горната част на браузъра в пиксели
leftmargin="цифрова стойност" - задава разстоянието между съдържанието на страницата и лявата част на браузъра в пиксели
rightmargin="цифрова стойност" - задава разстоянието между съдържанието на страницата и дясната част на браузъра в пиксели
bottommargin="цифрова стойност" - задава разстоянието между съдържанието на страницата и долната част на браузъра в пиксели
Забележки:
1. Цветовете могат да се задават с някои английски думи - например black за черен цвят, red за червен цвят и др. или като 16-ични стойности - например #000000 за черен цвят, #ff0000 за червен цвят и т.н. Списък с английските названия на цветовете и техните 16-ични стойности може да видите в страницата за цветове с названия. http://info.host.bg/HL703353
2. Ако графиката която се задава за фон с атрибута background не се намира в същата папка /директория/ в която се намира и html документа, тогава трябва да се укаже пътя до графиката. Ако например снимката pic.gif се намира в папка folder1, на атрибута background трябва да се присвои следната стойност: background="folder1/pic.gif"
3. Ако на атрибутите за разстояние се зададе стойност 0, тогава няма да има никакво разстояние между съдържанието на страницата и рамката на браузъра. Например при topmargin="0" съдържанието на html документа ще "залепне" за горната част на браузъра.
Ако съдържанието на страницата е вмъкнато в таблица, за да има ефект от задаването на атрибутите за разстояние leftmargin и rightmargin на атрибута на таблицата align трябва да е присвоена аналогична стойност, например при leftmargin="0" в тага за таблица <table> на атрибута align трябва да е зададенa стойност left (<table align="left">).
За да има ефект от атрибута bottommargin страницата трябва да е достатъчно дълга. Той обаче няма да накара страницата да "залепне" за долната част на браузера, ако му се зададе стойност 0 и страницата е къса.
4. Ако не се зададат атрибути на body остават стойностите по подразбиране - бял фон на страницата, черен цвят на текста, син цвят на връзките и т.н.
ПРИМЕР:
<body bgcolor="#000000" text="#ff0000" link="#00ff00" alink="#0000ff" vlink="#ffff00" topmargin="0" leftmargin="0">
Зададен е черен цвят на фона (#000000), червен цвят на текста (#ff0000), зелен цвят на непосетените връзки (#00ff00), син цвят при кликане върху връзка (#0000ff), жълт цвят на вече посетените връзки (#ffff00), без разстояние между съдържанието на страницата и горната част на браузъра и между съдържанието на страницата и лявата част на браузъра.
!ВНИМАНИЕ: Атрибутите на тага <body> са извадени от стандартите на езика и не се поддържат от XHTML 1.0 Strict DTD, макар че браузърите ще продължат да ги поддържат. За дефинирането на цвета на фона, връзките и пр. трябва да се използва CSS (Cascading Style Sheets).
Атрибутите на тага body и техните стойности могат да бъдат зададени в CSS-файл. След това чрез тага
<link rel=stylesheet type="text/css" href="file.css" />
който се помества в head-секцията на html документа тези стойности се задават на всяка една страница от уеб сайта. По този начин, ако един сайт съдържа например 20 страници и се наложи да се променя цвета на връзките, цвета на фона на страниците и т.н., ще се направи само една корекция - в CSS-файла, вместо да се коригира кода във всичките 20 страници. За повече информация относно работата със CSS (Cascading Style Sheets) прегледайте раздела CSS Справочник.
bgcolor="цвят" - задава цвят на фона на страницата
background="image.gif" - задава графичен файл във вид на фон
text="цвят" - задава цвета на текста в страницата
link="цвят" - задава цвета на връзките в страницата
vlink="цвят" - задава цвета на вече посетените връзки
alink="цвят" - задава цвета на връзките в момента на кликане в/у тях
topmargin="цифрова стойност" - задава разстоянието между съдържанието на страницата и горната част на браузъра в пиксели
leftmargin="цифрова стойност" - задава разстоянието между съдържанието на страницата и лявата част на браузъра в пиксели
rightmargin="цифрова стойност" - задава разстоянието между съдържанието на страницата и дясната част на браузъра в пиксели
bottommargin="цифрова стойност" - задава разстоянието между съдържанието на страницата и долната част на браузъра в пиксели
Забележки:
1. Цветовете могат да се задават с някои английски думи - например black за черен цвят, red за червен цвят и др. или като 16-ични стойности - например #000000 за черен цвят, #ff0000 за червен цвят и т.н. Списък с английските названия на цветовете и техните 16-ични стойности може да видите в страницата за цветове с названия. http://info.host.bg/HL703353
2. Ако графиката която се задава за фон с атрибута background не се намира в същата папка /директория/ в която се намира и html документа, тогава трябва да се укаже пътя до графиката. Ако например снимката pic.gif се намира в папка folder1, на атрибута background трябва да се присвои следната стойност: background="folder1/pic.gif"
3. Ако на атрибутите за разстояние се зададе стойност 0, тогава няма да има никакво разстояние между съдържанието на страницата и рамката на браузъра. Например при topmargin="0" съдържанието на html документа ще "залепне" за горната част на браузъра.
Ако съдържанието на страницата е вмъкнато в таблица, за да има ефект от задаването на атрибутите за разстояние leftmargin и rightmargin на атрибута на таблицата align трябва да е присвоена аналогична стойност, например при leftmargin="0" в тага за таблица <table> на атрибута align трябва да е зададенa стойност left (<table align="left">).
За да има ефект от атрибута bottommargin страницата трябва да е достатъчно дълга. Той обаче няма да накара страницата да "залепне" за долната част на браузера, ако му се зададе стойност 0 и страницата е къса.
4. Ако не се зададат атрибути на body остават стойностите по подразбиране - бял фон на страницата, черен цвят на текста, син цвят на връзките и т.н.
ПРИМЕР:
<body bgcolor="#000000" text="#ff0000" link="#00ff00" alink="#0000ff" vlink="#ffff00" topmargin="0" leftmargin="0">
Зададен е черен цвят на фона (#000000), червен цвят на текста (#ff0000), зелен цвят на непосетените връзки (#00ff00), син цвят при кликане върху връзка (#0000ff), жълт цвят на вече посетените връзки (#ffff00), без разстояние между съдържанието на страницата и горната част на браузъра и между съдържанието на страницата и лявата част на браузъра.
!ВНИМАНИЕ: Атрибутите на тага <body> са извадени от стандартите на езика и не се поддържат от XHTML 1.0 Strict DTD, макар че браузърите ще продължат да ги поддържат. За дефинирането на цвета на фона, връзките и пр. трябва да се използва CSS (Cascading Style Sheets).
Атрибутите на тага body и техните стойности могат да бъдат зададени в CSS-файл. След това чрез тага
<link rel=stylesheet type="text/css" href="file.css" />
който се помества в head-секцията на html документа тези стойности се задават на всяка една страница от уеб сайта. По този начин, ако един сайт съдържа например 20 страници и се наложи да се променя цвета на връзките, цвета на фона на страниците и т.н., ще се направи само една корекция - в CSS-файла, вместо да се коригира кода във всичките 20 страници. За повече информация относно работата със CSS (Cascading Style Sheets) прегледайте раздела CSS Справочник.
