HTML от нулата: Пълно ръководство

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

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

HTML е съкращение от HyperText Markup Language, което в превод означава “език за маркиране на хипертекст”. Нека разгледаме всяка част от това име:

HyperText: Това се отнася до способността на HTML да създава връзки между различни документи, позволявайки на потребителите да навигират между уеб страници чрез кликване върху хипервръзки.
Markup: HTML използва специални тагове за “маркиране” на текст, за да укаже на браузъра как да го структурира и представи.
Language: Въпреки че не е програмен език в традиционния смисъл (няма логика или изчисления), HTML е език със свой собствен синтаксис и правила.

HTML не е програмен език, а по-скоро декларативен език за маркиране. Това означава, че с HTML описваме структурата и съдържанието на уеб страницата, но не и нейното поведение или стил (за това се използват JavaScript и CSS съответно).

Защо HTML е важен?#

Универсалност: Всеки уеб браузър разбира HTML, което го прави универсален език за създаване на уеб съдържание.
Достъпност: Добре структурираният HTML код прави уебсайтовете по-достъпни за хора с увреждания, които използват екранни четци.
SEO: Търсачките използват HTML структурата, за да разберат и индексират съдържанието на уебсайтовете.
Основа за уеб разработка: HTML е отправната точка за изучаване на уеб технологии, върху която се надграждат CSS и JavaScript.

Основна структура на HTML документ#

Нека започнем с базовата структура на HTML документ и обясним всеки елемент подробно:

<!DOCTYPE html>
<html lang="bg">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>InoMedia - Вашият партньор в дигиталния свят</title>
</head>
<body>
    <h1>Добре дошли в InoMedia</h1>
    <p>Това е съдържанието на нашата уеб страница.</p>
</body>
</html>

html

Нека разгледаме всеки ред:

<!DOCTYPE html>: Това е декларация, която казва на браузъра, че документът е HTML5. Тя трябва да бъде първият ред на всеки HTML документ.
<html lang="bg">: Това е коренният елемент на HTML документа. Всичко друго се съдържа в него. Атрибутът lang="bg" указва, че езикът на страницата е български, което е важно за достъпността и SEO.
<head>: Този раздел съдържа мета информация за документа, която не се показва директно на страницата.
<meta charset="UTF-8">: Този таг определя кодирането на знаците в документа като UTF-8, което поддържа широк набор от символи, включително кирилица.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Този таг е важен за отзивчив дизайн. Той казва на браузъра да зададе ширината на изгледа равна на ширината на устройството и да зададе първоначалното ниво на мащабиране на 1.0.
<title>: Определя заглавието на страницата, което се показва в лентата на браузъра и в резултатите от търсенето.
<body>: Този раздел съдържа цялото видимо съдържание на уеб страницата.

HTML елементи и тагове#

HTML използва “тагове” за създаване на елементи. Повечето елементи имат отварящ и затварящ таг:

<tagname>Съдържание<tagname>

html

Някои елементи са самозатварящи се и нямат отделен затварящ таг:

<img src="image.jpg" alt="Описание на изображението" />

html

Атрибути#

Атрибутите предоставят допълнителна информация за елементите:

<a href="https://www.inomedia.bg" target="_blank">Посетете нашия сайт</a>

html

Тук href и target са атрибути на елемента <a> (anchor/връзка).

Основни HTML елементи за нашата ландинг страница#

Заглавия#

HTML предоставя шест нива на заглавия, от <h1> до <h6>:

<h1>Това е най-важното заглавие</h1>
<h2>Подзаглавие</h2>
<h3>По-малко подзаглавие</h3>
<h4>Още по-малко подзаглавие</h4>
<h5>Малко подзаглавие</h5>
<h6>Най-малкото подзаглавие</h6>

html

Важно е да се спазва йерархията на заглавията за добра структура и SEO. Обикновено <h1> се използва само веднъж на страница за основното заглавие.

Параграфи#

За основния текст използваме параграфи:

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

html

Форматиране на текст#

HTML предоставя няколко елемента за форматиране на текст:

<strong>Този текст е удебелен и семантично важен.</strong>
<em>Този текст е наклонен и подчертава емфазис.</em>
<u>Този текст е подчертан.</u>
<mark>Този текст е маркиран.</mark>

html

Важно е да се отбележи разликата между семантично форматиране (<strong>, <em>) и чисто визуално форматиране (<b>, <i>). Семантичното форматиране носи значение, докато визуалното е само за външен вид.

Връзки#

Връзките са ключов елемент в HTML, позволяващ навигация между страници:

<a href="https://www.inomedia.bg">Това е външна връзка</a>
<a href="/about.html">Това е вътрешна връзка</a>
<a href="#contact">Това е връзка към секция в същата страница</a>

html

Атрибутът target="_blank" може да се използва, за да отвори връзката в нов таб:

<a href="https://www.inomedia.bg" target="_blank">Отваря се в нов таб</a>

html

Изображения#

Изображенията се вмъкват с тага <img>:

<img src="path/to/image.jpg" alt="Описателен текст за изображението"/>

html

Атрибутът alt е изключително важен за достъпност и SEO. Той предоставя текстово описание на изображението, което се използва от екранни четци и се показва, ако изображението не може да се зареди.

Списъци#

HTML поддържа два основни типа списъци:

Неподреден списък (с точки):

<ul>
    <li>Първи елемент</li>
    <li>Втори елемент</li>
    <li>Трети елемент</li>
</ul>

html

Подреден списък (с номера):

<ol>
    <li>Първа стъпка</li>
    <li>Втора стъпка</li>
    <li>Трета стъпка</li>
</ol>

html

Таблици#

Въпреки че таблиците не се препоръчват за оформление на страницата, те са полезни за представяне на табличнаи данни:

<table>
    <thead>
        <tr>
            <th>Заглавие на колона 1</th>
            <th>Заглавие на колона 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ред 1, Колона 1</td>
            <td>Ред 1, Колона 2</td>
        </tr>
        <tr>
            <td>Ред 2, Колона 1</td>
            <td>Ред 2, Колона 2</td>
        </tr>
    </tbody>
</table>

html

Форми#

Формите са ключов елемент за интерактивност в уеб страниците:

<form action="/submit-form" method="post">
    <label for="name">Име:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Имейл:</label>
    <input type="email" id="email" name="email" required>

    <label for="message">Съобщение:</label>
    <textarea id="message" name="message"></textarea>

    <button type="submit">Изпрати</button>
</form>

html

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

Семантичен HTML#

Семантичният HTML използва тагове, които носят смисъл за структурата на съдържанието. Това е важно за достъпността, SEO и поддръжката на кода. Ето някои ключови семантични елементи:

<header>
    <em><!-- Съдържание за горната част на страницата --></em>
</header>

<nav>
    <em><!-- Навигационни елементи --></em>
</nav>

<main>
    <em><!-- Основното съдържание на страницата --></em>
    <article>
        <em><!-- Самостоятелно съдържание, например блог пост --></em>
    </article>
    
    <section>
        <em><!-- Секция от съдържание --></em>
    </section>
    
    <aside>
        <em><!-- Странично съдържание, свързано с основното --></em>
    </aside>
</main>

<footer>
    <em><!-- Съдържание за долната част на страницата --></em>
</footer>

html

Използването на тези елементи вместо обикновени <div> тагове помага на браузърите и търсачките да разберат по-добре структурата на вашата страница.

Вмъкване на видео и аудио#

HTML5 позволява лесно вмъкване на мултимедийно съдържание:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4" />
  Вашият браузър не поддържа видео тага.
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg" />
  Вашият браузър не поддържа аудио тага.
</audio>

html

Iframes#

Iframes позволяват вмъкване на съдържание от други уебсайтове:

<iframe src="https://www.inobags.com" width="500" height="300"></iframe>

html

Бъдете внимателни с използването на iframes поради съображения за сигурност.

Метаданни#

Метатаговете в <head> секцията предоставят важна информация за страницата:

<meta name="description" content="Описание на вашата страница за търсачките" />
<meta name="keywords" content="ключови думи, разделени, със запетаи" />
<meta name="author" content="Име на автора" />

html

Responsive изображения#

За по-добра производителност на различни устройства:

<picture>
  <source media="(min-width: 650px)" srcset="img_large.jpg" />
  <source media="(min-width: 465px)" srcset="img_medium.jpg" />
  <img src="img_small.jpg" alt="Описание на изображението" style="width:auto;" />
</picture>

html

Атрибути за достъпност#

ARIA (Accessible Rich Internet Applications) атрибути подобряват достъпността:

<button aria-label="Затвори" onclick="closeModal()">X</button>

html

Коментари в HTML#

HTML позволява добавяне на коментари, които не се показват в браузъра:

<!-- Това е HTML коментар -->

html

Коментарите са полезни за обяснение на кода или временно изключване на части от HTML.

Специални символи#

Някои символи имат специално значение в HTML и трябва да се кодират:

< за <
> за >
& за &
" за ”
© за ©

Практическо упражнение: Структура на нашата ландинг страница#

Нека обединим всичко научено в начална структура за нашата ландинг страница:

<!DOCTYPE html>
<html lang="bg">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>InoMedia - Вашият партньор в дигиталния свят</title>
</head>
<body>
    <header>
        <img src="images/logo.png" alt="InoMedia лого">
        <nav>
            <ul>
                <li><a href="#about">За нас</a></li>
                <li><a href="#services">Услуги</a></li>
                <li><a href="#contact">Контакти</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="hero">
            <h1>Добре дошли в InoMedia</h1>
            <p>Вашият надежден партньор за иновативни технологични решения</p>
            <a href="#contact" class="cta-button">Свържете се с нас</a>
        </section>

        <section id="about">
            <h2>За нас</h2>
            <p>InoMedia е водеща компания в областта на уеб разработката и дигиталния маркетинг. С над 10 години опит, ние предоставяме висококачествени решения за нашите клиенти.</p>
        </section>

        <section id="services">
            <h2>Нашите услуги</h2>
            <ul>
                <li>
                    <h3>Уеб дизайн</h3>
                    <p>Създаваме атрактивни и функционални уебсайтове, които отговарят на нуждите на вашия бизнес.</p>
                </li>
                <li>
                    <h3>Разработка на мобилни приложения</h3>
                    <p>Проектираме и разработваме мобилни приложения за iOS и Android, които ангажират вашите потребители.</p>
                </li>
                <li>
                    <h3>Дигитален маркетинг</h3>
                    <p>Помагаме ви да достигнете до вашата целева аудитория чрез ефективни онлайн маркетингови стратегии.</p>
                </li>
            </ul>
        </section>

        <section id="contact">
            <h2>Свържете се с нас</h2>
            <form action="/submit-form" method="post">
                <label for="name">Име:</label>
                <input type="text" id="name" name="name" required>

                <label for="email">Имейл:</label>
                <input type="email" id="email" name="email" required>

                <label for="message">Съобщение:</label>
                <textarea id="message" name="message" required></textarea>

                <button type="submit">Изпрати</button>
            </form>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 InoMedia. Всички права запазени.</p>
        <nav>
            <ul>
                <li><a href="#privacy">Политика за поверителност</a></li>
                <li><a href="#terms">Условия за ползване</a></li>
            </ul>
        </nav>
    </footer>
</body>
</html>

html

Обяснение на структурата:#

Допълнителна навигация с връзки към важни страници.

Секция “Услуги”:
- Използваме <section> таг с id="services" за лесно навигиране и стилизиране.
- Вътре имаме <h2> за основното заглавие на секцията.
- Използваме неподреден списък <ul> за изброяване на услугите.
- Всяка услуга е отделен е отделен <li> елемент с подзаглавие <h3> и описание в <p> таг.
Секция “Контакти”:
- Отново използваме <section> с уникално id.
- Формата за контакт е създадена с <form> елемент.
- Атрибутите action и method определят къде и как ще се изпращат данните от формата.
- Използваме <label> за достъпност и свързваме ги с полетата чрез for атрибут.
- Различни видове <input> елементи за различните видове данни.
- <textarea> за по-дълги съобщения.
- Бутон за изпращане с <button type="submit">.
Footer:
- Съдържа информация за авторски права.
- Допълнителна навигация с връзки към важни страници.

Резултат#

Ако сте създали index.html файл и сте написали примера от горе, след отваряне на файла трябва да получите следната визия в браузъра:

HTML от нулата: Пълно ръководство - Практическа задача

В момента не изглежда красиво, но в следващата статия ще се запознаем подробно със CSS и ще направим тази страница по-привлекателна:

HTML от нулата: Пълно ръководство - Практическа задача - резултат

Валидация на HTML#

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

Използвайте онлайн валидатор като W3C Markup Validation Service ↗.
Вградени инструменти за разработчици в браузърите често имат функции за проверка на HTML.

Добри практики в HTML#

Използвайте семантични елементи: Те подобряват достъпността и SEO.
Поддържайте чиста структура: Използвайте правилно отстъпи за по-добра четимост.
Бъдете последователни: Използвайте един и същ стил на именуване на класове и ID.
Оптимизирайте изображенията: Използвайте подходящи формати и размери.
Тествайте на различни устройства: Уверете се, че вашият HTML работи добре на различни екрани.

Заключение#

HTML е основата на всеки уебсайт и разбирането му е ключово за всеки уеб разработчик. С тази структура на ландинг страница, вие имате солидна основа, върху която да надграждате. В следващите статии ще разгледаме как да стилизираме тази страница с CSS и как да добавим интерактивност с JavaScript.

Не забравяйте, че практиката е ключът към усъвършенстването в HTML. Експериментирайте с различни елементи, структури и изпробвайте нови техники. С времето ще развиете интуиция за създаване на ефективни и достъпни уеб страници.

HTML от нулата: Пълно ръководство

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

Защо HTML е важен?#

Основна структура на HTML документ#

HTML елементи и тагове#

Атрибути#

Основни HTML елементи за нашата ландинг страница#

Заглавия#

Параграфи#

Форматиране на текст#

Връзки#

Изображения#

Списъци#

Таблици#

Форми#

Семантичен HTML#

Вмъкване на видео и аудио#

Iframes#

Метаданни#

Responsive изображения#

Атрибути за достъпност#

Коментари в HTML#

Специални символи#

Практическо упражнение: Структура на нашата ландинг страница#

Обяснение на структурата:#

Резултат#

Валидация на HTML#

Добри практики в HTML#

Заключение#

Допълнителни ресурси#