Какво е уебсайт? Основи и значимост в съвременния свят

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

Какво е уебсайт?#

Уебсайтът е колекция от свързани уеб страници, които са достъпни чрез интернет. Всяка страница е съставена от HTML (HyperText Markup Language) код, който определя структурата на съдържанието. Уебсайтовете се съхраняват на сървъри и могат да бъдат достъпвани чрез уникален адрес, наречен URL (Uniform Resource Locator).

Проста структура на статичен уебсайт, който предлага 2 услуги

Основни компоненти на уебсайт#

Домейн: Домейнът е уникалният адрес (например ozzydev.eu), чрез който потребителите достъпват вашия уебсайт. Той представлява името на вашия сайт в интернет и често е първото впечатление, което потребителите получават.
Хостинг: Хостингът е услугата, която предоставя място на сървър за съхранение на файловете на уебсайта. Това е домът на вашия сайт в интернет, който осигурява неговата достъпност 24/7. Има много доставчици на хостинг услуги, но аз използвам СуперХостинг.БГ ↗, не защото работя там, а защото поддръжката е ТОП!
HTML, CSS и JavaScript: Това са основните технологии, които създават и оформят уебсайта:
- HTML: Определя структурата и съдържанието на уеб страниците чрез тагове и атрибути.
- CSS: Контролира визуалния стил и оформление на уебсайта, като позволява разделяне на съдържанието от неговото визуално представяне в браузъра. Обикновено css-а се отделя в отделен файл, за по-лесна поддръжка.
- JavaScript: Добавя интерактивност и динамични елементи към уебсайта, като анимации, формуляри за проверка и други интерактивни функции. Тук също е прието JavaScript да се отделя в отделен файл за по-лесна поддръжка
Бекенд технологии: Това са сървърните технологии, които обработват данни и заявки. Те включват програмни езици като PHP, Python, Ruby и Node.js. Бекендът е отговорен за логиката на приложението, управление на базата данни и комуникация с фронтенда.
База данни: Място, където се съхраняват данни, използвани от уебсайта, като потребителска информация, продукти, статии и други. Най-често използваните бази данни са MySQL, PostgreSQL и MongoDB.

В следващи публикации ще разгледаме всеки компонент подробно.

Примерна страница#

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

В index.html файл описваме структурата на уеб страницата. Тук е и мястото да укажем на браузъра къде се намират допълнителните ни файлове за css - 10 ред и JavaScript - 22 ред.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>OzzyDev Примерна страница</title>
    <!-- 
    В следващия ред зареждаме css файла, 
    който променя визията на страницата 
    -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="content">
        <h1>Добре дошли в OzzyDev</h1>
        <button id="myButton">Кликни ме</button>
        <p id="message"></p>
    </div>
    <!-- 
    В следващия ред зареждаме JavaScript файла, 
    който добавя динамичност на бутона "Кликни ме" 
    -->
    <script src="script.js"></script>
</body>
</html>

html

Следва style.css. В този файл описваме визията на уеб страницата. Отделяме го на отделен файл, за да може да използваме този код на различни страници.

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

#content {
    text-align: center;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

button {
    padding: 10px 20px;
    background: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background: #0056b3;
}

css

В следващия файл script.js добавяме динамичност на страницата. При кликване на бутона в страницата, динамично показваме допълнителен текст, за това че бутонът е кликнат.

document.getElementById('myButton').addEventListener('click', function() {
    document.getElementById('message').innerText = 'Бутонът е кликнат!';
});

Ако в една директория създадете index.html, style.css и script.js и копирате горните кодове в тези файлове, ще можете да създадете страницата на вашия компютър. За да отворите страницата трябва да отворите index.html файла в браузъра.
Като упражнение можете да смените текста на бутона, да смените текста, който се появява след кликване на бутона или да смените цвета на бутона.
В следващите статии ще разгледаме детайлно всяка технология и ще разберете всеки ред какво прави в горните примери.

Как работи уебсайтът?#

Запитване към сървъра: Когато потребител въведе URL в браузъра, той изпраща запитване към сървъра, където е хостван уебсайтът. Това запитване е наречено HTTP заявка.
Обработка на заявката: Сървърът обработва заявката, използвайки бекенд технологии и евентуално достъпва данни от базата данни. Тук се изпълнява логиката на приложението, за да се подготви отговор.
Генериране на HTML: Сървърът генерира HTML документ, който браузърът може да разбере и изобрази. Този документ може да включва CSS и JavaScript за по-добра функционалност и визуален ефект.
Отговор от сървъра: Сървърът връща HTML, CSS и JavaScript, и браузърът ги използва за да изобрази страницата на потребителя. Този процес включва разчитане и интерпретиране на кода, за да се покаже съдържанието правилно.

Нагледно как работи един уебсайт. На графиката е изобразен прост HTTP цикъл.

Основни видове уебсайтове#

Информационни уебсайтове: Предоставят информация по различни теми, като новини, енциклопедии и образователни ресурси.
Корпоративни уебсайтове: Представят компании и техните продукти или услуги. Те включват информация за фирмата, контактна информация и често секции с новини и блогове.
Онлайн магазини: Позволяват на потребителите да пазаруват стоки и услуги онлайн. Те включват функции за търсене на продукти, количка за пазаруване и методи за плащане.
Блогове: Лични или професионални уебсайтове, където авторите споделят мнения, новини и статии по различни теми. Блоговете често използват системи за управление на съдържанието (CMS) като WordPress.
Социални мрежи: Платформи, където потребителите могат да комуникират и споделят съдържание помежду си. Те включват профили, приятелски мрежи и функционалности за споделяне на мултимедия.

Защо е важен уебсайтът?#

Достъп до информация: Уебсайтът предоставя бърз и лесен достъп до огромно количество информация на потребителите по целия свят.
Бизнес възможности: За бизнеса уебсайтът е виртуален офис или магазин, който работи 24/7 и достига до глобална аудитория. Уебсайтът може значително да разшири обхвата на вашите продукти и услуги.
Комуникация и взаимодействие: Уебсайтовете позволяват на потребителите да комуникират помежду си и с бизнеса чрез форми за контакт, форуми и социални мрежи. Това увеличава ангажираността и доверието на потребителите.
Личностно и професионално развитие: Личните блогове и професионалните портфолиа могат да помогнат на хората да изградят своята онлайн репутация и да намерят нови възможности. Те са отличен начин за споделяне на знания и опит, както и за демонстриране на умения и постижения.

Какво е уебсайт? Основи и значимост в съвременния свят