Как да правя промени в HTML кода на сайта

Готовите безплатни 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 код:
  1. всички оператори (тагове) с малки букви
    <title> вместо <Title> или <TITLE>
    С навлизането на новия стандарт за писане и интерпретация на страници XHTML регистъра на операторите има значение.

  2. стойностите на атрибутите трябва да са в кавички
    В HTML кода на шаблона на сайта в blogger, например, това лесно може да се види - след всяко "=" следва низ, ограден с единични или двойни кавички:
    <div id='header-wrapper'>
    <a href="http://napravisisait.com">Текст</a>
    <img src="snimka.jpg"/>
  3. всеки оператор има начален (отварящ) маркер и съответен краен (затварящ) маркер

    <оператор> - отварящ
    </оператор> - затварящ

    <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/>

    Принципът е, че даден отварящ оператор важи за всичко намиращо се след него, докато не бъде затворен.

  4. йерархичност на операторите
    Затварянето на операторите става в обратна на отварянето им последователност
    Ако сме отворили два оператора в следната последователност:
    <form><table> ...
    то затварянето им било:
    грешно така - </form></table>
    правилно така - </table></form>

  5. недублиране на структуроопределящите страницата оператори
    Основните оператори, които не трябва да се дублират в страницата са:
    <html>
    <head> ... </head>
    <body> ... </body>
    </html>
Това са основните принципи, които e нужнo да знаете, когато говорим за редактиране на HTML/XHTML код. Повече знания, разбира се, никога не са излишни, и ако желаете да научите и използвате всички възможности, които HTML предоставя за създаването и форматирането на Интернет страници, можете да си поръчате моето кратко ръководство за Създаване на HTML сайтове.

И накрая, чаканият от някои трик - как да поставите код в сайта си и той да се появи точно във вида си на код, т.е. да накарате браузъра да го приеме за текст, а не за код, който да интепретира: нужно е да подмените символите "<" и ">", указващи наличието на код, с техния текстов еквивалент. Ето ги в таблицата по-долу, заедно с други два символа, които също може да се наложи да подмените:

>&gt;
<&lt;
&&amp;
"&quot;

Уточнение: Преднамерено не съм направил разграничаване между HTML и XHTML като понятия, защото на вас - начинаещите, от практическа гледна точка, такава информация ще ви е излишна. В краткото си ръководство за Създаване на HTML сайтове съм я включил, разбира се.

Ако информацията ви е била полезна, подкрепете ме!

Направи си сайт - въпроси и трикове
Споделете тази статия от "Направи си сайт!" в още мрежи и/или гласувайте за нея!

12 коментара:

парфюми каза...

Честно казано за да изградиш един стандартен сайт ти трябва да знаеш следните тагове:

img , br , p , div

и това е... естествено за сеото е хубаво да използваш и тагове като
strong, i и подобни
h1 h2 h3 (след h3 не влияят много за сео оптимизацията)
title

Нататък ти трябва основни познания по CSS и свободно време ( разбира се познания по photoshop, php и java script са добре дошли :d )

stiff каза...

Здравей Митко,не мога да се справя с поставянето на рекламен код в Blogger.Нямам опит с HTML,но прочетох и придобих представа.В AdSense успях да получа код за 160х600 и не мога да разбера практически как да го поставя в ляво на публикацията.Нужен ли е специален HTML редактор,за да може кодът на блога да стане достъпен за редактиране?То е ясно,че като отворя сорса не мога директно да правя промени.Работя с хром браузер и там има инструменти за програмиране,могат ли да свършат работа?Ти ме нави да си правя сайт с цел да стана като Бербатов:),сега помагай,моля те!Ще те "подкрепя" с някое цъкване тук-там :)))http://nekagovorim.blogspot.com/ това съм забъркал.Не мога да се издърпам за косата. Благодаря! stiffart@gmail.com

xSEOn каза...

stiff, добавянето на код в публикации или страници на блогър е много лесно - отваряш съответната публикация/страница в режим "Редактиране на кода", поставяш скрипта, който искаш и запазваш. Това важи и при поставянето на код в джаджа в страничната лента. Вече за подравняването на този код наляво или надясно спрямо текста около него, е възможно да се наложи добавяне на атрибут в стиловете на секцията с код от типа style="float:left".

stiff каза...

Митко,Поставяне в публикацията е ясно.Не схващам какво разбираш под джаджа?Искам да вмъкна код за небостаргача в ляво,в кой прозорец да го пействам?Може би е много просто,за да го разбера:).И още нещо:в небостъргача се показват реклами без да съм поставял код.Плащат ли за тях?
Благодаря за отделеното време,което е повече от пари!!!Ще те подкрепя,за сега с чужда пита-цък,цък,цък :).

xSEOn каза...

stiff, секциите вляво и вдясно на блога ти са секции, чието съдържание се създава чрез джаджи (притурки). Съответно, за да го промениш, следва да редактираш съответната притурка. Това става през меню "Дизайн", а повече за джаджите можеш да прочетеш в материала Какво е джаджа (уиджет, притурка).

stiff каза...

Много благодаря за помощта!Бях убеден,че не е трудно,но два дена ровене из нета за този код ме умопомрачи.Веднага след като прочетох твоя съвет по друга тема,отворих списъка с притурки и видях "HTML/Java script" и там поставих кода на рекламата.После от "дизайн" нагласих рекламата в центъра(малко първобитно) на полето и ОК.
Отново ти благодаря!Ако желаеш ще сложа връзка към теб в моя блог,само ми я изпрати.Stiffart@gmail.com

Иван каза...

Когато редактирате код от Wordpress или Blogspot е хубаво да си го копирате целия и да го редактирате в някой редактор. Аз например ползвам Notepad++. Ползите му са много, а най-вече, че ви съобщава за грешка, когато някой таг не е написан добре или не е затворен например.

Анонимен каза...

Това е кода на рекламата която трябва да се показва:
<script type="text/javascript" src="http://adhitzads.com/471009"></script>
Промених я както ти пишеш, но лошото е, че пак го дава като текст, а не като реклама???
Затова помогни ми Митко.

xSEOn каза...

stiff, и аз благодаря за отзива ти. Пожелавам ти успех в начинанието.

Иване, благодаря ти за полезния коментар. Такива практически съвети са от най-голяма ценност за начинаещите.

Анонимен, трябва да се има предвид, че някои сайтове (като wordpress.com, ovo.bg и т.н.) не позволяват добавяне на подобен код, а само на статични хипервръзки и изображения. А за да можех да ти помогна с повече, трябваше поне да споменеш адреса на сайта си.

Анонимен каза...

Здравейте.

Странно защо, като поставя html или xhtml код във вид - заглавие, описание, ключови думи в някоя публикация или страница и този код след 2 3 дена изчезва и остава само кода title и нищо друго.
Кога да правилен и не виждам причина да изчезва.
Дали знаете защо е така и може ли да се оправи този проблем.

И още нещо. Може ли да се оправи и това, в търсенето в Google да не се показва винаги заглавието на блога и след него името на публикацията. Много е дразнещо и в повечето случаи името на публикацията не се вижда ако е по дълго заради заглавието.

Благодаря.

Анонимен каза...

Здравейте моля за малко по подробно обяснение- как да добавя Html код в сайта си ? Къде да влезна и да го поставя? Ще съм благодарна ако някой може да ми помогне!

Анонимен каза...

Здравейте! Въвеждам рекламен код на adnow в wordpress платформа на сайт, но рекламата не се визуализира. Къде може да е проблема? Благодаря и хубав ден!
Ели

Публикуване на коментар

Моля, имайте предвид, че коментарът ви ще бъде одобрен само ако пишете на кирилица. Можете да използвате някои HTML оператори, например <b>, <i>, <a>.
Благодаря ви!