Готовите безплатни CMS платформи, даващи възможности за създаване на блогове и сайтове с разнообразни дизайн и функции, са чудесно решение за всеки начинаещ, който не разбира от програмиране, от HTML кодове, Java приложения и прочие, лесно да създаде и поддържа свое място в глобалната мрежа. С течение на времето, обаче, той може да се сблъска с някои задачи или проблеми, свързани с неговия сайт, които изискват редакция или писане на ниво HTML (Hyper Text Markup language). Това се отнася както до писане на съдържание за дадена публикация в сайта, така и до писане в HTML кода на самия сайт. Например, няколко души вече ме питат защо, когато искат да цитират част от някакъв HTML код в сайта си, той не се появява, други - защо при опит да добавят нещо в структурата на сайта си, той се размества, излизат им съобщения за грешки и т.н. Ето защо, искам да обърна внимание на основните принципи на писане и редактиране на XHTML (Extensible Hyper Text Markup Language) код, които да ви помогнат да откриете проблема и да се справите успешно в подобни случаи.
Дали в blogger или в wordpress, когато пишете публикация, можете да го правите във визуален режим или в режим за Редактиране на HTML кода. В първия режим платформите генерират вместо вас нужните за правилното възпроизвеждане на екрана на написаното от вас маркери и оператори, които вие ще видите, ако преминете в другия режим. Например, някъде сте удебелили дума, другаде сте подчертали текст, поставили сте връзка към страница или сте добавили изображение - в HTML режим вашата публикация изглежда по много по-различен начин, нали! Около удебелената дума, подчертания текст и т.н. са се появили някакви символи (<b> и </b> или <img> и </img>, или други), а и самата структура на написаното от вас е придобила друг вид. Поставянето на HTML код, се прави във втория режим. Написаното тук се итерпретира и визуализира като страница от четящата го програма (браузър) - Интернет експлорер, Мозила, Опера и др. и съответно придобива вида, който виждате в режим Визуализация.
В случай, че желаете да редактирате така създадения код или да добавите друг, било готов или написан от вас, следва да се придържате към следните принципи за писане на XHTML код:
И накрая, чаканият от някои трик - как да поставите код в сайта си и той да се появи точно във вида си на код, т.е. да накарате браузъра да го приеме за текст, а не за код, който да интепретира: нужно е да подмените символите "<" и ">", указващи наличието на код, с техния текстов еквивалент. Ето ги в таблицата по-долу, заедно с други два символа, които също може да се наложи да подмените:
Дали в blogger или в wordpress, когато пишете публикация, можете да го правите във визуален режим или в режим за Редактиране на HTML кода. В първия режим платформите генерират вместо вас нужните за правилното възпроизвеждане на екрана на написаното от вас маркери и оператори, които вие ще видите, ако преминете в другия режим. Например, някъде сте удебелили дума, другаде сте подчертали текст, поставили сте връзка към страница или сте добавили изображение - в HTML режим вашата публикация изглежда по много по-различен начин, нали! Около удебелената дума, подчертания текст и т.н. са се появили някакви символи (<b> и </b> или <img> и </img>, или други), а и самата структура на написаното от вас е придобила друг вид. Поставянето на HTML код, се прави във втория режим. Написаното тук се итерпретира и визуализира като страница от четящата го програма (браузър) - Интернет експлорер, Мозила, Опера и др. и съответно придобива вида, който виждате в режим Визуализация.
В случай, че желаете да редактирате така създадения код или да добавите друг, било готов или написан от вас, следва да се придържате към следните принципи за писане на XHTML код:
- всички оператори (тагове) с малки букви
<title> вместо <Title> или <TITLE>
С навлизането на новия стандарт за писане и интерпретация на страници XHTML регистъра на операторите има значение. - стойностите на атрибутите трябва да са в кавички
В HTML кода на шаблона на сайта в blogger, например, това лесно може да се види - след всяко "=" следва низ, ограден с единични или двойни кавички:<div id='header-wrapper'>
<a href="http://napravisisait.com">Текст</a>
<img src="snimka.jpg"/> - всеки оператор има начален (отварящ) маркер и съответен краен (затварящ) маркер<оператор> - отварящ
</оператор> - затварящ
<p>Параграф</p>
<ul> ... </ul>
<li> ... </li>
<table> ... </table>
<h2> ... </h2>
<div> ... </div>
<span> ... </span>
<dt> ... </dt>
<dd> ... </dd>
<a href> ... </a>
Някои оператори могат да съдържат едновременно отварящ и затварящ маркер:<br/>
<img/>
<input/>
<frame/>
<hr/>
<meta/>
<link/>
Принципът е, че даден отварящ оператор важи за всичко намиращо се след него, докато не бъде затворен. - йерархичност на операторитеЗатварянето на операторите става в обратна на отварянето им последователностАко сме отворили два оператора в следната последователност:<form><table> ...
то затварянето им било:
грешно така - </form></table>
правилно така - </table></form> - недублиране на структуроопределящите страницата оператори
Основните оператори, които не трябва да се дублират в страницата са:
<html>
<head> ... </head>
<body> ... </body>
</html>
И накрая, чаканият от някои трик - как да поставите код в сайта си и той да се появи точно във вида си на код, т.е. да накарате браузъра да го приеме за текст, а не за код, който да интепретира: нужно е да подмените символите "<" и ">", указващи наличието на код, с техния текстов еквивалент. Ето ги в таблицата по-долу, заедно с други два символа, които също може да се наложи да подмените:
| > | > |
| < | < |
| & | & |
| " | " |
Уточнение: Преднамерено не съм направил разграничаване между HTML и XHTML като понятия, защото на вас - начинаещите, от практическа гледна точка, такава информация ще ви е излишна. В краткото си ръководство за Създаване на HTML сайтове съм я включил, разбира се.
Ако информацията ви е била полезна, подкрепете ме!
Направи си сайт - въпроси и трикове
Ако информацията ви е била полезна, подкрепете ме!
Направи си сайт - въпроси и трикове
RSS, XML, e-mail абонамент 
Направи си сайт! по e-mail
1 коментара:
Честно казано за да изградиш един стандартен сайт ти трябва да знаеш следните тагове:
img , br , p , div
и това е... естествено за сеото е хубаво да използваш и тагове като
strong, i и подобни
h1 h2 h3 (след h3 не влияят много за сео оптимизацията)
title
Нататък ти трябва основни познания по CSS и свободно време ( разбира се познания по photoshop, php и java script са добре дошли :d )
Публикуване на коментар
Моля, имайте предвид, че коментарът ви ще бъде одобрен само ако пишете на кирилица и не сте анонимни! Можете да използвате някои HTML оператори, например <b>, <i>, <a>, ако сте добросъвестни, разбира се.
Благодаря ви!