Въведение в HTML за блогъри: лесно ръководство за основните тагове (и PDF за изтегляне)

Ако създаваш публикации в WordPress или други CMS системи за управление на съдържанието, сигурно понякога не си доволен от дадено форматиране. Проблеми от този вид могат да бъдат разрешени, ако си запознат поне малко с HTML5 кода и можеш да го редактираш. Съдържанието и кодът са неразделни, така че едно въведение в HTML за блогъри може да бъде изключително полезно.

Имай предвид, че изучаването на HTML5 не е толкова трудно, колкото си представяш. Като блогър или маркетинг специалист не е задължително да знаеш как да създадеш цял уебсайт от нулата. Обещавам ти, че тук ще ти представя само необходимите да научиш на първо време неща за HTML5.

Какво представлява HTML

HTML (HyperText Markup Language) – преведено език за маркиране на хипертекст, е език за кодиране, който казва на уеб браузъра как да показва съдържанието и структурата на уеб страницата. Както подсказва името, той се използва за форматиране или маркиране на обикновен текст с прекъсване на абзаци, получер шрифт или курсив, цветни шрифтове, списъци, таблици и много друго. В дефиницията на HTML „хипертекст“ означава, че текстът може да включва връзки към други ресурси в мрежата.

HTML е стандарт в Интернет, а правилата се определят от международния консорциум W3C. Текущата версия на стандарта е HTML 5.0.

Ще покажа пример за абзац със и без HTML код, за да се разбере какво прави HTML:

Вторият параграф с HTML съдържа в себе си абзаци, получер текст, курсив, подчертан текст и различен цвят текст. По-изразителен е и по-лесен за четене.

Защо трябва да имаш познания за HTML

Познаването на основните тагове и използването им дава свобода на блогъра в работата му със съдържанието. В света на WordPress CMS настъпиха много промени с въвеждането на блоковия редактор Gutenberg. Преди него, при работа в Класическия редактор при форматиране на съдържанието трябваше да си помагаме с плъгини или да се дописва код.

Например:

• за създаване на списъци,
• за размера на шрифта,
• за маркирането на текст с различен цвят,
• за подчертаване и т.н.

Тези неща вече могат да се променят в самия редактор на WordPress. Но това не премахва необходимостта от едно въведение в HTML за блогъри. Понякога визуалният редактор не е достатъчен, за да се дооправят някои неща.

Ето един пример: Изтриваш текст с линк в него, но после отново виждаш този линк към някоя буква или дори към интервал. Тази грешка се дължи на факта, че си изтрил текста с линка, но не и двата HTML тага, които са маркирали връзката. В този случаѝ не става само с визуалния редактор. Трябва да се премине в HTML редактора и да се изтрият таговете.

Ето защо ти трябват познания по HTML:

Pro tip: Ако се интересуваш да се запознаеш със структурата на HTML кода на една уеб страница, можеш да разгледаш изходния ѝ код в браузъра. В повечето уеб браузъри ще го видиш, като кликнеш с десен бутон на мишката и избераш View Source.

Сега идва моментът да покажа как всъщност можеш да работиш с HTML и по този начин да редактиратш кода и да персонализираш блога си.

Въведение в HTML за блогъри – основни уроци за начинаещи

(adsbygoogle = window.adsbygoogle || []).push({});

Структура на един HTML елемент

HTML елементите са ограничени от тагове, които могат да имат атрибути – например цвят, размер и т.н.

Таговете са заградени в ъглови скоби < и >. В повечето случаи е необходимо да се използват по двойки, за да определят един елемент:

• таг за начало – определя началото на един HTML елемент – заграден в < и >;
• таг за край – определя края на HTML елемента. За разлика от началния таг, крайният има наклонена надясно черта пред името си – заграден в </ и >.

В случая, когато е необходимо да се постави таг за край, не трябва да се забравя, за да се спре продължаването на определеното форматиране.

Забележи: HTML таговете са контейнерите за различните видове HTML елементи. Те ограждат всяко съдържание на уеб страницата, в противен случай браузърът няма да знае как да го представи.

Комбиниране на HTML елементи

Възможно е да се използват повече от един елемент наведнъж върху дадено съдържание. Това става чрез влагането на една двойка тагове в друга. Например, за да бъде форматиран един отрязък от текст като получер и курсив, ще се използва такова представяне:

<strong><em>Това е получер и курсив текст.</em></strong>

или

<em><strong>Това е получер и курсив текст.</strong></em>

И резултатът ще бъде:

Това е получер и курсив текст.

Както се вижда, таговете се влагат един в друг. В случая няма значение коя двойка отварящ и затварящ таг е външна и коя вътрешна, но в други случаи зависи от вида на представяне на съдържанието.

Основни HTML елементи, които трябва да знаеш

Meta тагове

<meta> таговете дефинират метаданни за HTML документ. Метаданните са данни (информация) за данни. Те се намират винаги в елемента <head> и обикновено се използват за задаване на набор от символи, описание на страница, ключови думи, автор на документа и настройки на прозореца на визуализиране.

Особено важен за представянето в търсачката е атрибутът name със стойност description, който определя кратко описание на съдържанието на твоята уеб страница. Точно това описание най-често се използва от търсачките, за да запознае потребителя за какво се отнася статията.

<meta name="description" content="Най-необходимите HTML тагове за начинаещи блогъри">

Ето как изглежда такъв мета таг, представен в търсачката:

Обикновено в използваните SEO плъгини има специално поле, където да запишеш своето мета описание и няма нужда да използваш HTML кода в случая.

Таг title

Таг <title> определя заглавието на документа. Заглавието се показва в заглавната лента на браузъра или в раздела на страницата. Този таг е задължителен. Освен това е много важнен за оптимизацията за търсачките (SEO). Съдържанието на елемента title се показва в търсачката и участва в класирането на уеб страниците при зададено търсене по ключова дума или фраза.

Да не се бърка с атрибута title, който се вмъква в тага на връзки или този на изображения.

Заглавия

Сред HTML елементите, които трябва да знаеш на всяка цена, е списъкът със заглавия, чрез които се организира структурата на уеб страницата.

Основното заглавие се отбелязава с тага <h1>…</h1>.

Прочети за разликата между <title> таг и <h1> таг: 10 правила за оптимизиране на таг title, дефинция. Разлика между title таг, h1 таг и мета description

Заглавията на раздели в публикацията са в йерархия. Те се определят с таговете <h2>…</h2>,…,<h6>…</h6>, като тези тагове не са задължителни да присъстват всичките и <h6> дефинира най-маловажното заглавие.

<h1>Title</h1>
<h2>Subtitle</h2>
<h3>Sub-subtitle</h3>

Поставянето на няколко елемента <h1> на страница може да попречи на работата ти по SEO и да повлияе неблагоприятно на класирането в търсачката.

Няколко най-използвани форматирания на текст:

• За да добавиш курсив, го вмести между таговете <em> и </em>.

• За да добавиш удебелен текст (текст, който считаш за важен) в HTML документ, го обгради с таговете <strong> и </strong>.

• За да добавиш маркиран текст, го обгради с таговете <mark> и </mark>.

• За дефиниране на _{текст под черта} се използва _и таг.

• За дефиниране на ^{текст над черта} се използва ^и таг.

Параграфи

Таговете <p> и </p> означават начало и край на абзац. Браузърите автоматично добавят един празен ред преди и след всеки елемент <p>. Този HTML елемент е ключов за структурата на една уеб страница.

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

Сигурно ще се запиташ, защо ти трябва да знаеш този HTML елемент, щом като платформите сами го организират. Рано или късно нещо няма да ти хареса в оформянето на абзаците, в подравняването им. Тогава ще се наложи да действаш на ниво HTML.

Пример: Ако искаш да подравниш текст в дясно, използвай този атрибут на тага:

<p align=right>Този текст е подравнен вдясно.</p>

Резултатът е този:

Този текст е подравнен вдясно.

Но тази задача се възлага на CSS каскадни таблици със стилове, за да не се налага всеки път да дефинираш това условие за стил:

<p style="text-align:right">Този текст е подравнен вдясно.</p>

Може да бъде форматирано по различни начини, но е задача на CSS.

Тагът <p> поддържа глобалните атрибути.

Прекъсване на ред, празен ред, празен абзац

Тагът <br> се използва за прекъсване на ред (не на абзац). Той е празен елемент и няма затварящ таг. В Класическия и в Gutenberg визуален редактор можеш да използваш Shift+Enter, за да създадеш това прекъсване на ред в същия абзац, т.е. да отидеш на нов ред, без да започваш нов абзац.

Синтаксисът за този HTML таг е <br> или <br/> и трябва да бъде включен в параграф.

Този таг разрешава проблема на изписване на поезия. Виж как ще изглежда един стих (автор Иван Пейчев), ако не използваш <br/>:

Остава ти белия плаж. Остава ти само морето, мандаринени сгърчени сухи кори ти остават.

<p>Остава ти белия плаж. Остава ти само морето, мандаринени сгърчени сухи кори ти остават.</p>

И ето как изглежда същият стих с използване на <br/>:

Остава ти белия плаж.
Остава ти
само морето,
мандаринени
сгърчени
сухи кори ти остават.

<p>Остава ти белия плаж.<br>Остава ти<br>само морето,<br>мандаринени<br>сгърчени<br>сухи кори ти остават.</p>

Празен ред в един параграф може да се получи с повторно използване на <br>, но не е добра практика. В тези случаи е необходимо да се използват CSS стиловете или да се затвори абзаца с </p> и да се отвори нов с <p>.

Не е и добра практика вместо празен ред да се вмъква празен параграф с  .

Таг <pre> – за предварително форматиран текст

Има и друга възможност за изписване на текст с вмъкнати празни редове – да се използва HTML елемента <pre>…</pre>:

<pre>Остава ти белия плаж.

Остава ти 

само морето,

мандаринени

сгърчени

сухи кори ти остават.</pre>

Тагът <pre> дефинира предварително форматиран текст (pre-formatted). Той ще се покаже точно, както е написан в изходния HTML код – с фиксирана големина на шрифта и запазвайки интервалите и прекъсванията на редове. Можеш да го използваш, за да покажеш примери за код, поезия или друг текст, в който са важни точното разстояние и прекъсванията на редовете.

Основният недостатък на форматирания текст с помощта на <pre> е ширината. За разлика от нормалния HTML, той няма да се преоразмери, за да съответства на размера на прозореца на потребителя. Ще създаде хоризонтална лента за превъртане. Виж по-горе как представих код с хоризонтална линия на превъртане.

Маркерът <pre> поддържа HTML Event Attributes.

Тематично прекъсване в HTML страница – таг <hr>

Тагът <hr> oпределя тематична промяна в съдържанието. Той също е празен таг и няма затварящ. Може да се запише и <hr/>. Най-често се показва като хоризонтално правило, което се използва за отделяне на съдържание. Използва глобални и атрибути за събития в HTML. За промяна на вида може да се приложи CSS.

Пример („Пътуване към себе си“ – Блага Димитрова):

Цитати

За означаване на текст, който е цитат, се използва елемента <blockquote>…</blockquote>. Той може да бъде форматиран по различен начин, използвайки CSS стил.

Пример:

Самотата ме пресрещна още на прага. Няма по-мъчителна форма на самота от общежитие. Когато си имаш свой собствен кът, затворен със стени, ти го населяваш със себе си и не си сам. Но когато две тесни пътечки от двете страни на леглото те делят от две други легла, от две други дихания, ти губиш мислите си, навиците, спомените. А щом не общуваш със себе си, ти се отдръпваш и от другите. 

„Пътуване към себе си“ – Блага Димитрова

За отбелязване на източника на цитата се използва атрибута cite.

Например: <blockquote cite="https://ivytechnoweb.net">...</blockquote>. В случая за тази цел аз използвах в края на цитата не атрибута, а тага <cite>...</cite>, който вложих в <blockquote> така: <blockquote>...<cite>...</cite></blockquote>.

Връзки в текста – таг <a>

Връзките в текста са изключително необходими за външни и вътрешни препратки, към различни части от същата страница, в целеви страници и др. Трябва да познаваш добре таг <a>…</a>, за да вмъкваш нужните линкове.

Този елемент е от особено значение за оптимизацията на публикациите за търсачката и за доброто потребителско изживяване, осигурявайки чрез връзките необходимата допълнителна информация за обяснение на части от съдържанието.

(adsbygoogle = window.adsbygoogle || []).push({});

Елементът за връзка съдържа anchor текст (котва), състоящ се от една или повече думи, чрез който създаваш хипертекстовата връзка в документа. С този таг можеш да направиш възможно кликването върху изображение, в което да има връзка.

Пример:

<a href="https://bg.wikipedia.org/wiki/Хипервръзка" target="_blank" rel="noreferrer noopener nofollow">Виж за хипервръзки</a>

Както виждаш, тагът може да има редица атрибути:

href – атрибут, който указва дестинацията на връзката;

rel – атрибут, който указва връзката между текущия документ и документа, към който е връзката. Използва се само ако присъства атрибут href. Може да има различни стойности, по-важните от които са:

Ключова дума – стойност	Действие
nofollow	показва, че наличието на връзка не е потвърждение на важността на целевия сайт
noreferrer, noopener	инструктира браузъра, когато се придвижва до целевия ресурс, да пропусне заглавката Referer (абсолютен или частичен адрес на страницата, отправяща заявката) – и освен това да се държи, като че ключовата дума noopener също е посочена. Двете ключови думи на атрибута rel защитават от гледна точка на сигурност и поверителност
sponsored	използва се за връзки към спонсорирано и платено съдържание.
ugc	използва се за връзки към генерирано от потребителите съдържание: коментари, рецензии, публикации и т.н.

target – атрибут, който указва къде да се отвори свързаният документ. Когато му се даде стойност target="_blank", ще отвори свързания документ в нов прозорец или раздел.

Връзка към друга част на същата страница

С използване на # могат да се вмъкнат прескачания вътре в самата уеб страница. Виж как става:

<a href="#label5">jump to chapter 5</a>

<H2 id="label5">Chapter 5</H2>

Тагът <a> с атрибут href е същия като основната връзка, с изключение, че е връзка към кодова дума (след id=), а не към URL адрес. Пред кодовата дума (в случая label5)се поставя знак #, за да се обозначи, че е вътрешна връзка. Без знака # браузърът ще търси извън страницата тази кодова дума.

Дефиниране на изображение – таг <img>

В списъка с важните за един блогър HTML тагове, трябва да бъде поставен и таг <img>, който дефинира изображение в HTML страницата. <img> няма затварящ таг. Използва се винаги с поне два (задължителни) атрибута: src и alt.

src – атрибутът служи за локализиране и извикване на permalink на медията – адреса на изображението;

alt – указва алтернативен текст на картинката, в случай че не се покаже визуалното изображение;

hight и width – указват съответно височината и ширината на изображението в пиксели.

Изображение с връзка

За да направиш изображението връзка, върху която можеш да кликнеш, обвий кода на изображението с връзка, ето така:

<a href="link to open"> <img src = "image link" alt = "text" width = "100%" height = "...px" /> </a>

Списъци

Списъците в HTML са основно два вида – неподредени, с bullet point, и подредени – с номерация с цифри, букви.

Неподредените се задават с комбинация от тагове. Започват с тага <ul> и завършват с </ul>. Всеки елемент от списъка се обгражда с тага <li>…</li>. Пример:

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

И това дава следния резултат:

• HTML
• CSS
• JavaScript

Подредените списъци започват с тага <ol> и завършват с </ol>. Вътрешните тагове са същите. Пример:

1. HTML
2. CSS
3. JavaScript

Към тага за списък могат да бъдат добавени атрибути и CSS стил.

Виж още: Персонализирани списъци в WordPress публикации

Таблица

Тагът HTML за определяне на таблица e <table>. Всеки ред на таблицата се дефинира с <tr> таг. Всяка заглавка на таблица се дефинира с <th> таг. Всяка клетка с данни се дефинира с <td> таг. По подразбиране текстът в th елементи е получер и центриран. По подразбиране текстът в td елементите е нормален и подравнен вляво.

Пример:

<table border="1"; style="width:100%">
  <tr>
    <th>Работеюи в кухнята</th>
    <th>Работещи на етажите</th>
    <th>Работещи на рецепцията</th>
  </tr>
  <tr>
    <td>Иван Георгиев</td>
    <td>Никола Петров</td>
    <td>Славка Петрова</td>
  </tr>
  <tr>
    <td>Ева Дамянова</td>
    <td>Снежана Георгиева</td>
    <td>Николета Иванова</td>
  </tr>
</table>

Този HTML код се представя така на уеб страницата:

Работещи в кухнята	Работещи на етажите	Работещи на рецепцията
Иван Георгиев	Никола Петров	Славка Петрова
Ева Дамянова	Снежана Георгиева	Николета Иванова

Естествено <table> може да има атрибути, както е в случая с border и да се направи в различен стил с CSS.

Таг <code>

Ако ти е необходимо да вмъкнеш код в текста си, това става с <code>… </code> таг, който форматира текста с подходящ шрифт, например

Като алтернатива можеш да използваш таг <pre>…</pre>, който ще покаже кода по различен начин от останалия текст (виж по-горе).

Неразбиващо се пространство в HTML

Понякога в HTML на уеб страницата си можеш да срещнеш групата символи &nbsp; – non-breaking space. Обектът &nbsp; създава неразбиващо се пространство, което се използва, когато не искаш автоматично прекъсване на линията в тази позиция. Това е удобно, когато разбиването на думите e неприемливо.

Примери: 1 000 000, 10 км / ч.

Използва се и да попречи на браузърите да съкратят пространствата в HTML страниците.

Как да пишеш HTML код в Класическия редактор и в Gutenberg

Вече се запозна с най-необходимите елементи на HTML за блогър и сигурно ще се запиташ къде можеш да добавяш HTML код. Това не е трудно. Виж как става в Класическия редактор и в блоковия редактор Guteneberg:

HTML код в Класическия редактор на WordPress

Иди вдясно горе на редактора и кликни на Текстов редактор:

В този екран се вижда HTML кода и можеш дописваш или променяш.

HTML код в Блоковия редактор Gutenberg на WordPress

Когато искаш да вмъкнеш блок с HTML код, избери с + следващия блок и в лявата лента за блокове потърси блок HTML.

След това в новия блок запиши HTML кода си. Можеш да проверяваш как изглежда чрез това меню:

Ако искаш да правиш по-големи промени в HTML на Gutenberg, иди горе вдясно на трите точки и после избери Code editor:

Ако искаш да изкопираш цялото съдържание на страницата в HTML, можеш да преминеш от Блоков към Класически редактор и там от Текстовия редактор да изкопираш съдържанието в HTML.

Заключение

Надявам се че след моето въведение в HTML за блогъри си по-уверен в използването на HTML елементи и можеш вече сам да правиш някои малки персонализации на твоя блог. Най-добре е да си изработиш практика в различните HTML тагове и техните атрибути, помагайки си и с ръководствата на w3schools и developer.mozilla.

За въпроси, забележки и допълнения можеш да използваш формата за коментари отдолу.