Ако сте като мен, преди да започна работа в WebniMe, най-вероятно не знаете много за HTML, CSS, кодове или въобще за изработката на уеб сайтове.

Или пък знаете малко от това, малко от онова…

За моя радост, последните няколко години ме направиха нещо като „специалист-аматьор“ по кодовете 🙂 Всекидневното писане на статии и тяхното публикуване по сайтове и блогове, неизбежно ме направиха част от този онлайн свят на кодове, тагове, линкове и т.н.

Ако и Вие сте като мен – обичате да публикувате, поствате, коментирате… но сте още в началото, то се надявам, че тази статия ще Ви улесни максимално.

H-Заглавия ( Headings )

H-Заглавията са може би едни от най-лесно запомнящи се HTML кодове, които са важни при оптимизирането на дадено съдържание (разбира се, само ако се използват правилно). Съществуват шест различни вида, както е показано по-долу. За да създадете Заглавие, само го вмъкнете в желания <h_–> таг:

Параграф ( Paragraph )

Параграфът в онлайн текстовете означава нов ред. В някои полета по разни сайтове нямаме възможност да натиснем просто Enter, за да минем на нов параграф. В тези случаи, можем да използваме HTML кода <p>, като не забравяме, че след като приключим с написаното, трябва да го затворим с </p>. Ето пример:

<p>Здрасти, аз съм Параграф!</p>

Здрасти, аз съм Параграф!

Линкове ( Links )

Създаването на връзки е много важно за популяризирането на дадена информация. Насочването към друго онлайн съдържание е полезно както за оптимизацията на сайта, така и за потребителите. Можете да линкнете дума или фраза в параграфа Ви чрез използването на <a> код:

<a href=“https://webnime.com/seo-копирайтинг-услуги/“>SEO копирайтинг услуги</a>

Сайтът Ви се нуждае от оптимизиран текст >>> SEO копирайтинг услуги

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

Изображения ( Images )

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

<img src=“https://webnime.com/wp-content/uploads/2016/06/HTML-codes.jpg“ alt=“HTML кодове“ style=“width:300px;height:254px;“>

Кодът за изображенията е празен, тъй като съдържа само атрибути, така че няма нужда да се затваря. Списъкът с атрибути, описани по-горе включва src, което е адресът (URL-то) на изображението. Също така съм включила alt таг на изображението, което е важно за неговото оптимизиране (така Google разбира за какво се отнася) и някои стилистични свойства, като ширина (width) и височина (height). Вие можете да зададете каквито размери желаете, но гледайте да бъдат правилно пропорционални с оригиналните, иначе може да се загуби резолюцията или да се разтегне… А ето как изглежда изображението в посочения по-горе HTML код:

Нов ред ( Line Break )

Кодът за Нов ред също е празен, така че не е необходимо да се затваря. Когато използвате Параграф (<p>), между новия и предходния ред остава малко празно пространство. С Новия ред (<br>), това пространство го няма и редовете следват едно след друго последователно. Ето за какво говоря:

<p>Аз съм Параграф 1.</p>
<p>Аз съм Параграф 2.</p>

Аз съм Параграф 1.

Аз съм Параграф 2.

<p>Аз съм Параграф.
<br>Аз съм Нов ред.</p>

Аз съм Параграф.
Аз съм Нов ред.

Удебелен текст ( Bold & Strong )

Когато искате да удебелите определен текст, за целта можете да използвате два кодови елемента, въпреки че в програмирането <strong> се използва повече от <b>. Не забравяйте да затворите <strong> кода! </strong>

<strong>Удебели цялото изречение!</strong>
Или <strong>удебели</strong> само една дума!

Удебели цялото изречение!
Или удебели само една дума!

Наклонен текст ( Italic & Emphasized )

По аналогов начин с удебеления текст и тук могат да се използват два варианта – <i> и <em>, които придават на текста наклонен вид. От посочените примери, <еm> се употребява по-често. Накрая кода трябва да се затвори:

<em>Това изречение е страхотно.</em>
Това изречение е страхотно.

Подчертан текст ( Underline )

Удебелен, наклонен, а сега и подчертан текст – всичките се съдържат в Word и тези от Вас, които работят с програмата, знаят точно за какво говоря. Един от най-лесните HTML кодове е <u>. Използва се ето така:

<u>Виж как подчертах това изречение!</u>
Виж как подчертах това изречение!

Подреден списък ( Ordered Lists )

Съществуват подредени и неподредени списъци. Разликата между двата се състои в това, че подредения списък е номериран, а неподредения съдържа точки, вместо числа. И двата кода следват една структура, но различни символи. В показания пример е използван HTML кода <ol>, произлизащ от ordered lists, следван от <li> или list item – списъкът с елементи. В него можете да включвате колкото си искате елемента.

Неподреден списък ( Unordered Lists )

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

Суперскрипт ( Superscript )

За да включите суперскрипт, съдържащ определен текст, е необходимо просто да го вмъкнете между тези ^тагове и ще получите ^{нещо като това}.

Търговските марки (Trademarks) се пишат със суперскрипт ^TM.
Търговските марки (Trademarks) се пишат със суперскрипт ^TM.

Индекс ( Subscript )

Тези, които са чували за суперскрипт, то без съмнение знаят и за индекс (субскрипт). Използвайте следните HTML _кодове, за да получите _{текст като този}.

Химичната формула за вода се пише H₂O.
Химичната формула за вода се пише H₂O.

Хоризонтална линия ( Horizontal Line )

Изключително креативен начин да разделите две съдържания в страница или статия е използването на хоризонтална линия. Използва се код, който няма нужда да се затваря <hr>

Вмъкни хоризонтална линия между мен и Изречение 2.
<hr> Здравей, аз съм Изречение 2.

Вмъкни хоризонтална линия между мен и Изречение 2.

---

Здравей, аз съм Изречение 2.

Маркиран текст ( Marked Text )

Готова съм да се хвана на бас, че много малко от Вас знаят, как да маркират текст с HTML код. Колкото е готино, толкова е и лесно. Нужно е само да вкарате желания текст в ето тези <mark> тагове </mark> и ще получите наистина видимо наблягащ текст.

Ето как можете да маркирате <mark>най-важните текстове</mark>.
Ето как можете да маркирате най-важните текстове.

Изтрит текст ( Deleted Text )

Ако искате да наблегнете на даден текст, който е изтрит (от някакъв списък например), то можете да използвате HTML код за това. Дали ще бъде цяло изречение или само една единствена дума – няма никакво значение. За целта използвайте следните <del> тагове </del>

<del>Нахрани кучето.</del>
<del>Напиши статия за HTML кодове.</del>
Измий прозорците.

Нахрани кучето.
Напиши статия за HTML кодове.
Измий прозорците.

Използване на определен фонт ( Setting a Specific Font )

Това е малко по-сложно, защото се използват няколко определени елемента, без които не може – знак за равенство, точка със запетая и кавички. Тъй като вече обясних как се използват Параграфи, Заглавия и оформяне на текстове, надявам се, че ще Ви бъде от полза да научите и как може да сменяте фонта с помощта на “font-family”. Вижте примера показан по-долу:

<h4 style=“font-family:Georgia;“>За това Заглавие използвам „Georgia“ фонт.</h4>

<p style=“font-family:Verdana;“>За този Параграф използвам „Verdana“ фонт.</p>

За това Заглавие използвам „Georgia“ фонт.

За този Параграф използвам „Verdana“ фонт.

Използване на определен цвят за текста ( Setting a Specific Text Color )

За да оцветите текста си в определен цвят, използвате абсолютно същия HTML код като горния, но “font-family” заменяте с “color”. Можете да експериментирате с различни цветове чрез английските им названия– red (червен), blue (син), green (зелен), pink (розов)… или да използвате 16-тичната им стойност (HTML Color Picker).

<p style=“color:blue;“>Небето е изключително синьо днес.</p>
<p style=“color:#ff471a;“>Какъв е цветът на огъня?</p>

Небето е изключително синьо днес.

Какъв е цветът на огъня?

Използване на определен шрифт на текста ( Setting a Specific Font Size )

Аналогово на горните два кода и този следва същия принцип, като тук се използва “font-size”. Размерът се избира в пиксели (px):

<p style=“font-size:36px;“>Шрифтът на този Параграф е 36.</p>
<p style=“font-size:12px;“>Шрифтът на този Параграф е 12.</p>

Шрифтът на този Параграф е 36.

Шрифтът на този Параграф е 12.

Позициониране на текст в страница (Setting a Specific Text Alignment )

Възможните вариантa са 4 – left (вляво), right (вдясно), center (центриран) или justify (подравнен от двете страни). Изберете някой от примерите като използвате “text-align”

<p style=“text=align:left;“>Този Параграф е позициониран вляво.</p>
<p style=“text-align:right;“>Този Параграф е позициониран вдясно.</p>

Този Параграф е позициониран вляво.

Този Параграф е позициониран вдясно.

Надявам се статията да е полезна за тези от Вас, които тепърва навлизат в света на кодирането. Разбира се, списъкът с HTML кодове е доста обширен, но изброените по-горе са добро начало 🙂 А тези от Вас, които искат да научат още няколко, ето и мястото, където могат да направят това >>> HTML Tutorial