Готовите безплатни 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
12 коментара:
Честно казано за да изградиш един стандартен сайт ти трябва да знаеш следните тагове:
img , br , p , div
и това е... естествено за сеото е хубаво да използваш и тагове като
strong, i и подобни
h1 h2 h3 (след h3 не влияят много за сео оптимизацията)
title
Нататък ти трябва основни познания по CSS и свободно време ( разбира се познания по photoshop, php и java script са добре дошли :d )
Здравей Митко,не мога да се справя с поставянето на рекламен код в Blogger.Нямам опит с HTML,но прочетох и придобих представа.В AdSense успях да получа код за 160х600 и не мога да разбера практически как да го поставя в ляво на публикацията.Нужен ли е специален HTML редактор,за да може кодът на блога да стане достъпен за редактиране?То е ясно,че като отворя сорса не мога директно да правя промени.Работя с хром браузер и там има инструменти за програмиране,могат ли да свършат работа?Ти ме нави да си правя сайт с цел да стана като Бербатов:),сега помагай,моля те!Ще те "подкрепя" с някое цъкване тук-там :)))http://nekagovorim.blogspot.com/ това съм забъркал.Не мога да се издърпам за косата. Благодаря! stiffart@gmail.com
stiff, добавянето на код в публикации или страници на блогър е много лесно - отваряш съответната публикация/страница в режим "Редактиране на кода", поставяш скрипта, който искаш и запазваш. Това важи и при поставянето на код в джаджа в страничната лента. Вече за подравняването на този код наляво или надясно спрямо текста около него, е възможно да се наложи добавяне на атрибут в стиловете на секцията с код от типа style="float:left".
Митко,Поставяне в публикацията е ясно.Не схващам какво разбираш под джаджа?Искам да вмъкна код за небостаргача в ляво,в кой прозорец да го пействам?Може би е много просто,за да го разбера:).И още нещо:в небостъргача се показват реклами без да съм поставял код.Плащат ли за тях?
Благодаря за отделеното време,което е повече от пари!!!Ще те подкрепя,за сега с чужда пита-цък,цък,цък :).
stiff, секциите вляво и вдясно на блога ти са секции, чието съдържание се създава чрез джаджи (притурки). Съответно, за да го промениш, следва да редактираш съответната притурка. Това става през меню "Дизайн", а повече за джаджите можеш да прочетеш в материала Какво е джаджа (уиджет, притурка).
Много благодаря за помощта!Бях убеден,че не е трудно,но два дена ровене из нета за този код ме умопомрачи.Веднага след като прочетох твоя съвет по друга тема,отворих списъка с притурки и видях "HTML/Java script" и там поставих кода на рекламата.После от "дизайн" нагласих рекламата в центъра(малко първобитно) на полето и ОК.
Отново ти благодаря!Ако желаеш ще сложа връзка към теб в моя блог,само ми я изпрати.Stiffart@gmail.com
Когато редактирате код от Wordpress или Blogspot е хубаво да си го копирате целия и да го редактирате в някой редактор. Аз например ползвам Notepad++. Ползите му са много, а най-вече, че ви съобщава за грешка, когато някой таг не е написан добре или не е затворен например.
Това е кода на рекламата която трябва да се показва:
<script type="text/javascript" src="http://adhitzads.com/471009"></script>
Промених я както ти пишеш, но лошото е, че пак го дава като текст, а не като реклама???
Затова помогни ми Митко.
stiff, и аз благодаря за отзива ти. Пожелавам ти успех в начинанието.
Иване, благодаря ти за полезния коментар. Такива практически съвети са от най-голяма ценност за начинаещите.
Анонимен, трябва да се има предвид, че някои сайтове (като wordpress.com, ovo.bg и т.н.) не позволяват добавяне на подобен код, а само на статични хипервръзки и изображения. А за да можех да ти помогна с повече, трябваше поне да споменеш адреса на сайта си.
Здравейте.
Странно защо, като поставя html или xhtml код във вид - заглавие, описание, ключови думи в някоя публикация или страница и този код след 2 3 дена изчезва и остава само кода title и нищо друго.
Кога да правилен и не виждам причина да изчезва.
Дали знаете защо е така и може ли да се оправи този проблем.
И още нещо. Може ли да се оправи и това, в търсенето в Google да не се показва винаги заглавието на блога и след него името на публикацията. Много е дразнещо и в повечето случаи името на публикацията не се вижда ако е по дълго заради заглавието.
Благодаря.
Здравейте моля за малко по подробно обяснение- как да добавя Html код в сайта си ? Къде да влезна и да го поставя? Ще съм благодарна ако някой може да ми помогне!
Здравейте! Въвеждам рекламен код на adnow в wordpress платформа на сайт, но рекламата не се визуализира. Къде може да е проблема? Благодаря и хубав ден!
Ели
Публикуване на коментар
Моля, имайте предвид, че коментарът ви ще бъде одобрен само ако пишете на кирилица. Можете да използвате някои HTML оператори, например <b>, <i>, <a>.
Благодаря ви!