-->
Источник нашей мудрости – наш опыт. Источник нашего опыта – наша глупость.

понедельник, 17 февраля 2025 г.

 

🔹 Вступ до HTML: Основи структури веб-сторінки

📢 HTML (HyperText Markup Language) – це основа будь-якого веб-сайту. Це мова, яка визначає структуру сторінки, допомагаючи браузерам відображати текст, зображення, кнопки та інші елементи.

📌 Що таке структура HTML?
HTML складається з тегів (наприклад, <html>, <head>, <body>), які повідомляють браузеру, як відображати контент.

🖼 Плакат 1: Основна структура HTML-документа

🔹 Ось базова схема HTML-сторінки:


<!DOCTYPE html>  
<html lang="uk">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Моя перша сторінка</title>  
</head>  
<body>  
    <h1>Привіт, світ!</h1>  
    <p>Це моя перша HTML-сторінка.</p>  
</body>  
</html>

📝 Що тут відбувається?

  • <!DOCTYPE html> – каже браузеру, що це HTML5
  • <html> – основний контейнер
  • <head> – містить технічну інформацію (мета-теги, заголовок сторінки)
  • <title> – заголовок вкладки
  • <body> – видима частина сторінки
  • <h1> – заголовок
  • <p> – параграф

📌 Візуальне пояснення (плакат 🖼)
✅ Головна структура
📦 HTML-документ → 🎩 Head → 🏠 Body → 📄 Текст



🖼 Плакат 2: Основні теги HTML

🔹 Теги для тексту


<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<p>Це абзац тексту.</p>
<strong>Жирний текст</strong> або <em>курсив</em>.

🔹 Теги для зображень та посилань

<img src="image.jpg" alt="Опис зображення">
<a href="https://example.com">Перейти за посиланням</a>

🔹 Списки

<ul>
    <li>Елемент списку</li>
    <li>Ще один елемент</li>
</ul>

📌 Візуальне пояснення (плакат 🖼)
📄 Текст → 🖼 Зображення → 🔗 Посилання → 📋 Списки

🖼 Плакат 3: Як працює браузер?

🖥 HTML → 🎨 CSS (стилі) → ⚙ JavaScript (логіка)
📌 HTML – це кістяк сайту
🎨 CSS – додає кольори, відступи, дизайн
⚙ JavaScript – робить сайт інтерактивним

📢 🔗 Висновок
✅ HTML – це основа веб-сторінки
✅ Використовуй теги правильно
✅ Починай з простого

🔹 Якщо хочеш створити свій сайт – почни з HTML! 🚀


Автор: на

Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)