Съдържание на HEAD
Структурата на един HTML-документ е следната:
<html>
<head> </head>
<body> </body>
</html>
Да разгледаме съдържанието на първата част на HTML-документа - секцията HEAD.
<html>
<head> </head>
<body> </body>
</html>
Да разгледаме съдържанието на първата част на HTML-документа - секцията HEAD.
Съдържание на секцията HEAD: заглавие на страницата
Секцията HEAD - "главата" на HTML-страницата - започва непосредствено след началния таг <html>.
Запомнете, че съдържанието на секцията HEAD остава невидимо за посетителите на страницата, т.е. това, което се пише в HEAD, не се появява на екрана.
"Главата" на страницата може да съдържа много елементи, някои от които не са абсолютно задължителни за една уеб-страница. Все пак ако не сложите нищо в HEAD, то поне трябва да напишете там заглавието на страницата си.
Заглавието на една уеб-страница се пише между таговете
<title> и </title>
Ще забележите, че каквото напишете между тези два тага, се появява в тънката лента на браузъра най-отгоре.
Mоже да напишете например: <title> My first page </title>
Указването на заглавие е много важно от гледна точка на популяризирането на вашата страница - повечето търсещи машини "разбират" записаното между таговете <title> и </title> като най-важните ключови думи, по които вашата страница може да бъде намерена. Затова отделете време, за да измислите заглавие, което много точно и стегнато да изразява същността и съдържанието на страницата ви. Заглавието трябва да съдържа 2-8 думи.
Цялата секция HEAD заедно със заглавието на страницата ще изглежда така:
<head>
<title> My first page </title>
</head>
Съдържание на секцията HEAD: МЕТА тагове
Другия елемент на HEAD са META таговете.
МЕТА таговете са изключително важен и полезен инструмент, защото чрез тях ще направите реклама на страницата си, така, че търсещите машини да могат да я намират сред огромното количество информация в интернет. Те се делят на две групи:
- МЕТА тагове,съдържащи атрибута
HTTP-EQUIV и атрибута CONTENT. Тези МЕТА тагове имат следния формат:
<meta http-equiv="име" content="съдържание" />
МЕТА таговете с атрибута HTTP-EQUIV се използват за да управляват определени действия на браузъра. - МЕТА тагове, съдържащи атрибута
NAME и атрибута CONTENT. Te имат следния формат:
<meta name="име" content="съдържание" />
МЕТА таговете с атрибута NAME се използват за да подават определена информация на търсещите машини (търсачките).
Запомнете нещо общо за
всички МЕТА тагове - те имат начален таг <META>, но нямат краен таг
</META>. Тъй като обаче в XHTML съществува изискването всички
тагове да се затварят, затова в края на МЕТА таговете се изписва затваряща
наклонена черта - както е показано в примерите.
Списък на МЕТА таговете
1. <meta
http-equiv="content-type" content="text/html;
charset=windows-1251"
/>
Този МЕТА таг указва на браузъра азбуката, на която е написана страницата. В конкретния случай това е указание, че страницата е написана на кирилица. Ако искате да създадете страница на български или на руски език задължително трябва да включите този МЕТА таг в секцията HEAD на страницата си. В същата страница може да пишете и с латински букви, тъй като стандартната латинска азбука се ползва по подразбиране. Следователно, включвайки този МЕТА таг, може да създадете страница написана на български и английски.
Имайте предвид, че съществуват множество стандарти за кодиране на използваната азбука. Един от най-ползваните е стандарта iso-8859 със следните основни кодове:
Този МЕТА таг указва на браузъра азбуката, на която е написана страницата. В конкретния случай това е указание, че страницата е написана на кирилица. Ако искате да създадете страница на български или на руски език задължително трябва да включите този МЕТА таг в секцията HEAD на страницата си. В същата страница може да пишете и с латински букви, тъй като стандартната латинска азбука се ползва по подразбиране. Следователно, включвайки този МЕТА таг, може да създадете страница написана на български и английски.
Имайте предвид, че съществуват множество стандарти за кодиране на използваната азбука. Един от най-ползваните е стандарта iso-8859 със следните основни кодове:
o <meta
http-equiv="content-type" content="text/html;
charset=iso-8859-1"
/>
Кода iso-8859-1 "покрива" следните западни езици: английски, френски, немски, испански, португалски, италиански, шведски, датски, норвежки, финландски, ирландски, шотландски, каталунски, а също и албански.
Кода iso-8859-1 "покрива" следните западни езици: английски, френски, немски, испански, португалски, италиански, шведски, датски, норвежки, финландски, ирландски, шотландски, каталунски, а също и албански.
o iso-8859-2
"Покрива" някои централноевропейски и източноевропейски езици: чешки,
полски, унгарски, румънски, хърватски, словашки, словенски.
o iso-8859-3
"Покрива" есперанто.
o iso-8859-4
"Покрива" балтийските езици - естонски, латвийски, литовски.
o iso-8859-5
"Покрива" езиците на кирилица - български, руски, белоруски,
македонски, сръбски.
o iso-8859-6
"Покрива" арабските езици.
o iso-8859-7
"Покрива" гръцки.
o iso-8859-8
"Покрива" еврейски.
o iso-8859-9
"Покрива" турски.
o iso-8859-10
"Покрива" няколко езика от нордическата зона - гренландски ескимоски,
лапландски.
Какво
е екодинг (encoding) ?
Енкодинг (на английски encoding) е начина, по който всички букви, цифри и всякакъв
друг вид символи се запазват, за да бъдат разбираеми за компютъра / браузъра /
мобилното устройство и др.
Това беше кратката версия. Ето я дългата.
Текстовия редактор, който използваме за създаването на нашите уеб страници
запазва файловете с определена кодировка. Проблема най-често се забелязва,
когато текста на нашата страница е написан на кирилица (или съдържа други
специални символи). Ако запазим страницата с неподходящ енкодинг, който не
поддържа кирилица например, при отварянето на страницата в браузър виждаме, че
текста написан на “неразбираемия” език се показва по странен начин (например ��?�?? или само ??????).
Затова освен запазването на файла с подходяща кодировка е важно и някъде в
този файл изрично да зададем енкодинга, който искаме да се използва при
отварянето на файла чрез браузър.
За сега оставяме теориите на страна. Нека видим как изглежда на практика.
Запазване
на файла с UTF-8 (without BOM енкодинг)
Пример:
От менюто Encoding (1) избери Encode in UTF-8 without BOM (2).
Запази файла и го отвори с браузър. Резултата е малко неочакван.
Текста, който е на латиница (3) е абсолютно същия. При него промяна не се
забелязва, но текста на кирилицата (1 и 2) се превърна в напълно
неразпознаваеми символи. Защо стана така?
Обяснение
Въпреки, че запазихме файла под UTF-8 (without BOM) енкодинг браузъра реши
да използва друг енкодинг при отварянето на страницата.
Това е така, защото никъде в нашия документ не сме задали вида енкодинг,
който искаме браузъра да използва при отварянето на нашата страница.
Запазването на файла с UTF-8 (without BOM) енкодинг в случая не е достатъчно.
Трябва някъде в страницата изрично да зададем енкодинга, който искаме да се
използва.
Когато отворим нашата страница в браузър той проверява вида енкоинг, който
сме задали, и прави всичко по силите си да покаже страницата с избрания от нас
енкодинг. Обаче, когато пропуснем да споменем с какъв вид енкодинг искаме да се
отваря нашата страница, браузъра все пак трябва да използва някакъв енкодинг
затова той отваря страницата с енкодинга зададен по подразбиране
Забележка:Термина “по подразбиране” е много важен. Това означава, че когато
няма зададена никаква друга стойност, браузъра ще избере тази, която е зададена
от хората, които са го създали.
По подразбиране голяма част от браузърите използват ISO-8859-1 екодинг.
Този вид енкодинг поддържа числата от 0 до 9, всички малки и колеми букви
от английската азбука и някои специални символи (като ©, £ и други). Също така
този вид енкодинг поддържа буквите специфични за някои Западноевропейски страни
(например Å). Точно затова текста Hello world. остана без промяна.
Както става ясно кирилица не се поддържа и това е причината текста да
изглежда толкова странно.
За да видиш енкодинга, който браузъра използва, отвори менюто View (1), след което
избери Character Encoding (2) и в подменюто, което ще се отвори ще видиш
енкодинга, който браузъра е избрал. В случая виждаме, че браузъра разчита на Western (ISO-8859-1) енкодинг, за да
“прочете” нашата страница.
Един от начините да решим този проблем е като ръчно изберем енкодинга,
който браузъра да използва. Отново, отвори менюто View, след което избери Character Encoding (2) и от подменюто
избери Unicode (UTF-8) (3).
Страницата ще се презареди и текста ще бъде отново ясен и четлив. За
съжаление промените, които направихме са временно решение. В момента, в който
затворим страницата и я отворим отново, текста написан на кирилица ще изглежда
както преди.
Все пак сме на прав път. Видяхме, че UTF-8 енкодинга реши проблема (макар и
за кратко).
Надявам се, че всичко казано до тук има някакъв смисъл и е лесно за
разбиране. Не се притеснявай да зададеш своите въпроси или да споделиш своя
коментар след урока.
Може би все пак се интересуваш как ще отстраним проблема, след като
най-вероятно искаш да използваш кирилица на твоя уеб сайт. Целта ни е да
открием начин, който ни позволява да зададем енкодинга на страницата. Така ще
накараме браузъра да използва енкодинга, който ние искаме. Следващия метод ще
ти покаже как става това.
Запазване
на файла с UTF-8 (without BOM енкодинг) + meta елемент
След промяната кода трябва да изглежда така:
Запази страницата под UTF-8 енкодинг и я отвори в браузъра. Резултата
трябва да е нещо такова:
Съдържанието на елемента <title> е видимо в горния ляв
ъгъл (1), а съдържанието на елемента <p> (2) е текста на
страницата.
Уау. Всичко работи точно както трябва. Текста написан на кирилица е ясно
четлив. Файла е запазен с UFT-8 енкодинг, а meta елемента казва на браузъра да
използва UTF-8 енкодинг, за да покаже текста на страницата. Точно това, от
което се нуждаехме.
Обяснение
Както виждаш, избора на енкодинг е изключително важен фактор за един сайт.
Това е още по-важно, когато текста на страницата е написан на кирилица.
Преди няколко години бе широко разпространено използването на windows-1251
за енкодинг на страницата. Този тип енкодинг е специално създаден да поддържа
езици, които използват кирилица (като български, руски и др.), но с течение на
времето windows-1251 се измести от Уникода.
Уникода (на английски Unicode) е универсална кодировка, която е разработена, за да
реши проблема при писане на текст на различни езици.
UTF-8 е част от Unicode като UTF-8 една от често най-използваните кодировки
при създаването на уеб страници. Уникода съдържа повече от 110 000 символа,
което ни дава сигурност, че текста на нашата страница ще бъде правилно прочетен
от браузъра и нашите посетители.
Обобщение
Има 3 важни неща, които трябва да запомниш от този урок:
1. Винаги запазвай файловете
под UTF-8 without BOM кодировка;
2. Ако текстовия
редактор, който използваш няма опция да запазва файловете под UTF-8 without
BOM, тогава поне бъду сигурен/на, че запазваш файловете с UTF-8 енкодинг.
3. Винаги използвай meta
елемента с UTF-8 енкодинг във всяка страница (<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />). Дори, когато
страницата ти е на английски;
