МОДУЛ 01 / ОСНОВИ НА УЕБ

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

Какво се случва между въвеждането на един адрес и появата на готовата уебстраница? Проследи пътя на заявката и разбери как работят основните уеб технологии.

Web FundamentalsИнтерактивен урок12. клас

01 / НАУЧИ

От адреса до уебстраницата

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

DNS помага за преобразуването на името на хоста в IP адрес. HTTPS защитава комуникацията, а браузърът обработва получените ресурси.

КЛЮЧОВИ ТЕХНОЛОГИИ

HTML · CSS · JavaScript

HTML описва структурата и съдържанието.

CSS определя визуалното оформление.

JavaScript добавя програмна логика и интерактивност.

02 / РАЗГЛЕДАЙ

Пътят на една уеб заявка

Премини през шестте стъпки на симулацията. Наблюдавай ролята на браузъра, DNS и сървъра.

ИНТЕРАКТИВЕН ЕКСПЕРИМЕНТ

Web Request Simulator

01 / 06

▣БраузърКлиент

DNS

◎DNSИме → IP

HTTPS

▤СървърHTTP

ТЕКУЩА ОПЕРАЦИЯhttps://www.exupery.net/

1. Въвеждане на адрес

Потребителят въвежда адреса на уебсайт в браузъра.

03 / ПРОМЕНИ

Моята първа интерактивна страница

Използвай HTML за съдържанието, CSS за оформлението и JavaScript за поведението. Промени заглавието, цвета на бутона и съобщението, което се появява при натискане.

EDITOR READY

LIVE PREVIEW

HTML + CSS

<main class="page">
  <h1>Здравей, WebLAB!</h1>
  <p>Това е моята първа интерактивна страница.</p>
  <button id="hello-button">Натисни ме</button>
  <p id="message" aria-live="polite"></p>
</main>

body {
  margin: 0;
  padding: 32px;
  font-family: Arial, sans-serif;
  background: #f3f6fc;
  color: #101827;
}

.page {
  max-width: 600px;
  margin: auto;
  padding: 32px;
  background: white;
  border-radius: 16px;
}

button {
  background: #d52f38;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  cursor: pointer;
}

const button = document.querySelector('#hello-button');
const message = document.querySelector('#message');

button?.addEventListener('click', () => {
  if (message) {
    message.textContent = 'Готов съм да създавам сайтове!';
  }
});

Експериментирай свободно. Промените се запазват локално в браузъра. Използвай Reset to Starter, ако искаш да започнеш отначало.

04 / СЪЗДАЙ

Моята уеб визитка

Създай собствена интерактивна уебстраница. Представи себе си, свое хоби или интересен проект. Използвай HTML, CSS и JavaScript.

Изисквания към задачата

Добави основно заглавие и кратко представяне.
Използвай CSS за оформление и собствен цвят.
Създай бутон с подходящ текст.
Добави JavaScript събитие при натискане.
Провери резултата в мобилен изглед.

EDITOR READY

LIVE PREVIEW

HTML + CSS

<main class="profile">
  <h1>Моята уеб визитка</h1>
  <p>Представи себе си или свой интересен проект.</p>

  <button id="action-button">Научи повече</button>
  <p id="result" aria-live="polite"></p>
</main>

body {
  margin: 0;
  padding: 24px;
  font-family: Arial, sans-serif;
  background: #eef2f8;
  color: #182235;
}

.profile {
  max-width: 640px;
  margin: 0 auto;
  padding: 28px;
  background: white;
  border-radius: 16px;
}

button {
  padding: 12px 20px;
  background: #d52f38;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

const button = document.querySelector('#action-button');
const result = document.querySelector('#result');

// Добави собствено съобщение при натискане на бутона.
button?.addEventListener('click', () => {
  if (result) {
    result.textContent = 'Това е моята първа уеб визитка!';
  }
});

Това е твоето работно пространство. Промените се запазват локално и не засягат демонстрационния пример.

05 / ПРОВЕРИ

Провери своята уеб визитка и разбери какво можеш да подобриш.

Резултатите ще се появят тук след проверката.