office@webnime.com
СВЪРЖЕТЕ СЕ С НАС: +359 886 888 617

WebniMe

WebniMe

Професионална SEO оптимизация, изработка на сайтове и интернет маркетинг.

+359 886 888 617
Email: office@webnime.com

Уебниме ЕООД
Център, Бул. Витоша, София 1000

Open in Google Maps
  • ЗА НАС
  • SEO УСЛУГИ
    • WEBNIME SEO УСЛУГИ
      • 💡 SEO КОНСУЛТАЦИЯ
      • 🔎 SEO ОДИТ – АНАЛИЗ НА САЙТ
      • 🔝 ОПТИМИЗАЦИЯ НА САЙТ
      • ✅ ON-PAGE ОПТИМИЗАЦИЯ
      • 📝 SEO КОПИРАЙТИНГ УСЛУГИ
      • 🔗 ЛИНК БИЛДИНГ (LINK BUILDING)
      • 📌 ОПТИМИЗАЦИЯ ПО МЕСТОПОЛОЖЕНИЕ
      • 📊 АНАЛИЗ НА КЛЮЧОВИ ДУМИ И ФРАЗИ
    • ИНТЕРНЕТ МАРКЕТИНГ
      • 🎯 GOOGLE ADS РЕКЛАМИ
      • 😃 FACEBOOK РЕКЛАМИ
      • 🇧🇬 РЕКЛАМИ В БЪЛГАРСКИ ПОРТАЛИ
      • 📧 ИМЕЙЛ МАРКЕТИНГ
      • 💎 МАРКЕТИНГ НА СЪДЪРЖАНИЕТО
      • 👁‍🗨 УПРАВЛЕНИЕ НА ОНЛАЙН РЕПУТАЦИЯ (ORM)
      • 📣 МАРКЕТИНГ В СОЦИАЛНИТЕ МРЕЖИ (SMM)
    • ГРАФИЧЕН ДИЗАЙН
      • 🖌 ЛОГО ДИЗАЙН
      • 🖼 РЕКЛАМНИ ВИЗИИ И БАНЕРИ
      • 📈 ИНФОГРАФИКИ
      • ♟ СЪЗДАВАНЕ НА БРАНД
      • 🎦 ВИДЕО СЪДЪРЖАНИЕ
      • ⭐ ДИЗАЙН НА РЕКЛАМНИ МАТЕРИАЛИ
  • ИЗРАБОТКА НА САЙТ
    • СТАНДАРТНИ САЙТОВЕ
      • 🏢 Фирмен уеб сайт
      • 👌 Личен уеб сайт
      • 🖋 Блог
      • 📄 One-Page уеб сайт
    • ОНЛАЙН МАГАЗИНИ
      • 🛒 Онлайн Магазин СТАРТ
      • 🛒 Онлайн Магазин БИЗНЕС
      • 🛒 Онлайн Магазин СУПЕР
    • УЕБ ПОРТАЛИ
      • 📢 Сайт за Обяви
      • 🏠 Сайт за Имоти
      • ⚙ Сайт за Авточасти
      • 🚗 Сайт за Автомобили
      • ⛱ Сайт за Туризъм
      • 🛏 Сайт за Хотел
      • ⏰ Сайт за Оферти
      • 💕 Сайт за Запознанства
      • 🎥 Сайт за Видео споделяне
      • 👥 Изработка на B2B Портал
      • 🌐 Изработка на Социална мрежа
      • 📺 Новинарски сайт
      • 📌 Трудова Борса
      • 🚛 Сайт за Транспортна логистика
      • 💎 Сайт за Козметични салони
  • ПОДДРЪЖКА
  • ПРОЕКТИ
  • БЛОГ
  • КОНТАКТИ
ПОИСКАЙОФЕРТА
  • Home
  • Posts tagged "HTML"
27/03/2023

Tag: HTML

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

понеделник, 27 юни 2016 by Петя Василева
Основни HTML кодове, които е добре да знаете, https://webnime.com/

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

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

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

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

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

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

Основни HTML кодове, които е добре да знаете, https://webnime.com/

Параграф ( 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 код:

Основни HTML кодове, които е добре да знаете, https://webnime.com/

Нов ред ( 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 – списъкът с елементи. В него можете да включвате колкото си искате елемента.

Основни HTML кодове, които е добре да знаете, https://webnime.com/

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

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

Основни HTML кодове, които е добре да знаете, https://webnime.com/

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

За да включите суперскрипт, съдържащ определен текст, е необходимо просто да го вмъкнете между тези <sup> тагове </sup> и ще получите нещо като това.

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

Индекс ( Subscript )

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

Химичната формула за вода се пише H<sub>2</sub>O.
Химичната формула за вода се пише H2O.

Хоризонтална линия ( 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

HTMLHTML codeHTML кодHTML кодовеуеб дизайн
Read more
  • Published in Уеб Дизайн, Уеб Сайт Съвети и Трикове
5 коментара

Последни публикации

  • Какво е SEO копирайтинг и защо е важен, https://webnime.com

    Какво е SEO копирайтинг и защо е важен?

    0 comments
  • SEO специалист

    Избор на добър SEO специалист – какво трябва да знаем

    0 comments
  • Оптимизиране на изображения, SEO image

    Оптимизиране на изображения за търсачките

    1 comments
  • Какво представляват breadcrumbs? Защо са важни за SEO?

    0 comments
  • използваемост на сайт, website usabilityна сайт

    Как да подобрим използваемостта на сайта: насоки и примери

    0 comments

Категории

  • Content Marketing
  • Facebook
  • Google
  • Google+
  • Instagram
  • Link Building
  • Local Search
  • Magento
  • OpenCart
  • Pinterest
  • PPC Реклама
  • SEO
  • SEO Съвети и Трикове
  • Social Media Marketing
  • Twitter
  • Uncategorized
  • WordPress
  • Рекламни материали
  • Уеб Дизайн
  • Уеб Сайт Съвети и Трикове

Харесайте ни във Фейсбук

Свържете се с нас

Телефони:
+359 889 473 168
+359 885 780 750
Email: office@webnime.com

ЗАПИТВАНЕ ЗА ОФЕРТА

Моля, попълнете формата, за да Ви изпратим ценово предложение!

Полезни връзки

  • SEO оптимизация
  • Google Ads реклами
  • Facebook реклами
  • Реклами в български портали
  • On-page оптимизация
  • Имейл маркетинг
  • Лого дизайн
  • Рекламни визии
  • Инфографики
  • Създаване на бранд

Офис София

Център, бул. Витоша, София 1000
За запитвания и консултации:
Телефон: +359 886 888 617
Email: office@webnime.com

Вижте на картата

  • GET SOCIAL
WebniMe

© 2015-2022 All rights reserved.

TOP