# Terrarium Project Part 1: Въведение в HTML ```mermaid journey title Вашето пътуване за изучаване на HTML section Основи Създаване на HTML файл: 3: Student Добавяне на DOCTYPE: 4: Student Структуриране на документа: 5: Student section Съдържание Добавяне на метаданни: 4: Student Включване на изображения: 5: Student Организиране на оформлението: 5: Student section Семантика Използване на правилни тагове: 4: Student Подобряване на достъпността: 5: Student Създаване на терариум: 5: Student ``` ![Introduction to HTML](../../../../translated_images/bg/webdev101-html.4389c2067af68e98.webp) > Скетчноут от [Tomomi Imura](https://twitter.com/girlie_mac) HTML или HyperText Markup Language е основата на всеки уебсайт, който някога сте посещавали. Помислете за HTML като за скелета, който дава структура на уеб страниците – той определя къде да отиде съдържанието, как е организирано и какво представлява всяка част. Докато CSS по-късно „облича“ вашия HTML с цветове и оформления, а JavaScript го оживява с интерактивност, HTML осигурява съществената структура, която прави всичко останало възможно. В този урок ще създадете HTML структура за виртуален интерфейс на терариум. Този практически проект ще ви научи на основни концепции в HTML, докато изграждате нещо визуално ангажиращо. Ще научите как да организирате съдържание с помощта на семантични елементи, да работите с изображения и да създадете основата за интерактивно уеб приложение. Към края на урока ще имате работеща HTML страница, показваща изображения на растения, организирани в колони, готова за стилове в следващия урок. Не се притеснявайте, ако първоначално изглежда основно – това е точно това, което HTML трябва да прави преди CSS да добави визуален блясък. ```mermaid mindmap root((Основи на HTML)) Structure DOCTYPE декларация HTML елемент Главен раздел Съдържание на тялото Elements Тагове и атрибути Самозатварящи се тагове Вложени елементи Блокови срещу вградени Content Текстови елементи Изображения Контейнери (div) Списъци Semantics Смислени тагове Достъпност Четец на екрана SEO предимства Best Practices Правилно вграждане Валиден маркировка Описателен алтернативен текст Организирана структура ``` ## Предварителен тест [Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **Гледайте и учете**: Вижте този полезен видео обзор > > [![HTML Fundamentals Video](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ## Настройване на вашия проект Преди да се потопим в HTML кода, нека настроим подходящо работно пространство за вашия терариум проект. Създаването на организирана файловата структура от самото начало е важен навик, който ще ви служи през цялото ви пътешествие в уеб разработката. ### Задача: Създайте структурата на проекта си Ще създадете отделена папка за вашия терариум и ще добавите първия си HTML файл. Ето два подхода, които можете да използвате: **Опция 1: Използване на Visual Studio Code** 1. Отворете Visual Studio Code 2. Щракнете "File" → "Open Folder" или използвайте `Ctrl+K, Ctrl+O` (Windows/Linux) или `Cmd+K, Cmd+O` (Mac) 3. Създайте нова папка на име `terrarium` и я изберете 4. В панела Explorer кликнете иконата за "New File" 5. Наименувайте файла си `index.html` ![VS Code Explorer showing new file creation](../../../../translated_images/bg/vs-code-index.e2986cf919471eb9.webp) **Опция 2: Използване на команди в терминала** ```bash mkdir terrarium cd terrarium touch index.html code index.html ``` **Това, което тези команди правят:** - **Създават** нова директория с име `terrarium` за вашия проект - **Навигират** до директорията terrarium - **Създават** празен файл `index.html` - **Отварят** файла за редактиране във Visual Studio Code > 💡 **Професионален съвет**: Името на файла `index.html` е специално в уеб разработката. Когато някой посети уебсайт, браузърите автоматично търсят `index.html` като начална страница за показване. Това означава, че URL като `https://mysite.com/projects/` автоматично ще сервира файла `index.html` от папката `projects` без да се налага да указвате името на файла в URL адреса. ## Разбиране на структурата на HTML документ Всеки HTML документ следва специфична структура, която браузърите трябва да разберат и показват правилно. Помислете за тази структура като за формално писмо – тя има задължителни елементи в определен ред, които помагат на получателя (в този случай браузъра) да обработи съдържанието правилно. ```mermaid flowchart TD A[""] --> B[""] B --> C[""] C --> D[""] C --> E["<meta charset>"] C --> F["<meta viewport>"] B --> G["<body>"] G --> H["<h1> Заглавие"] G --> I["<div> Контейнери"] G --> J["<img> Изображения"] style A fill:#e1f5fe style B fill:#f3e5f5 style C fill:#fff3e0 style G fill:#e8f5e8 ``` Нека започнем с добавянето на съществената основа, от която всеки HTML документ се нуждае. ### Декларация DOCTYPE и коренов елемент Първите два реда от всеки HTML файл служат като „въведение“ на документа към браузъра: ```html <!DOCTYPE html> <html></html> ``` **Разбиране какво прави този код:** - **Декларира** типа на документа като HTML5 чрез `<!DOCTYPE html>` - **Създава** кореновия `<html>` елемент, който ще съдържа цялото съдържание на страницата - **Установява** съвременни уеб стандарти за правилно изобразяване от браузъра - **Осигурява** последователно показване в различни браузъри и устройства > 💡 **Съвет за VS Code**: Задръжте курсора над всеки HTML таг във VS Code, за да видите полезна информация от MDN Web Docs, включително примери за употреба и съвместимост с браузъри. > 📚 **Научете повече**: Декларацията DOCTYPE предотвратява браузърите да влизат в „quirks mode“, който се използваше за поддръжка на много стари уебсайтове. Модерната уеб разработка използва опростената декларация `<!DOCTYPE html>`, за да осигури [изобразяване, съобразено със стандартите](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). ### 🔄 **Педагогическа проверка** **Пауза и размисъл**: Уверете се, че разбирате: - ✅ Защо всеки HTML документ се нуждае от DOCTYPE декларация - ✅ Какво съдържа кореновият `<html>` елемент - ✅ Как тази структура помага на браузърите да изобразят страниците правилно **Бърз тест**: Можете ли да обясните със свои думи какво означава „изобразяване, съобразено със стандартите“? ## Добавяне на съществен метаинформация за документа Секцията `<head>` в HTML документа съдържа важна информация, от която браузърите и търсачките се нуждаят, но която посетителите не виждат директно на страницата. Помислете за нея като „задкулисна“ информация, която помага на вашата уеб страница да работи правилно и да се показва коректно на различни устройства и платформи. Тази метаинформация казва на браузърите как да показват страницата ви, каква кодировка на символите да използват и как да се справят с различни размери на екрана – всички тези неща са важни за създаването на професионални и достъпни уеб страници. ### Задача: Добавете секцията head Поставете този `<head>` раздел между отварящия и затварящия `<html>` тагове: ```html <head> <title>Welcome to my Virtual Terrarium ``` **Разбор какво прави всеки елемент:** - **Настройва** заглавието на страницата, което се появява в табовете на браузъра и в резултатите от търсене - **Определя** UTF-8 кодиране за правилно изобразяване на текста по света - **Гарантира** съвместимост с модерни версии на Internet Explorer - **Конфигурира** отзивчив дизайн, като задава viewport със ширина, съответстваща на устройството - **Контролира** началното ниво на мащабиране за показване на съдържанието в естествен размер > 🤔 **Помислете за това**: Какво би се случило, ако зададете viewport мета таг като този: ``? Това ще принуди страницата да бъде винаги широка 600 пиксела, като ще развали отзивчивия дизайн! Научете повече за [правилната конфигурация на viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). ## Изграждане на тялото на документа Елементът `` съдържа цялото видимо съдържание на вашата уеб страница – всичко, което потребителите ще видят и с което ще взаимодействат. Докато секцията `` дава инструкции на браузъра, секцията `` съдържа самото съдържание: текст, изображения, бутони и други елементи, които създават потребителския интерфейс. Нека добавим структурата на тялото и разберем как HTML таговете работят заедно, за да създадат смислено съдържание. ### Разбиране на структурата на HTML таговете HTML използва тагове в двойки, за да дефинира елементи. Повечето тагове имат отварящ таг като `

` и затварящ таг като `

`, като съдържанието се поставя между тях: `

Hello, world!

`. Това създава параграфен елемент, съдържащ текста "Hello, world!". ### Задача: Добавете body елемента Обновете HTML файла си, за да включва елемента ``: ```html Welcome to my Virtual Terrarium ``` **Ето какво осигурява цялата тази структура:** - **Установява** основната рамка на HTML5 документа - **Включва** съществена метаинформация за правилно изобразяване от браузъра - **Създава** празно тяло, готово за видимото ви съдържание - **Следва** най-добрите практики в модерната уеб разработка Сега сте готови да добавите видимите елементи на вашия терариум. Ще използваме `
` елементи като контейнери за организиране на различни секции с съдържание и `` елементи за показване на изображенията на растения. ### Работа с изображения и контейнери за оформление Изображенията са специални в HTML, защото използват „самозатварящи“ тагове. За разлика от елементи като `

`, които заобикалят съдържание, тагът `` съдържа цялата необходима информация в себе си чрез атрибути като `src` за пътя към изображението и `alt` за достъпност. Преди да добавите изображения в HTML, ще трябва да организирате файловете на проекта си правилно, като създадете папка за изображения и добавите графиките на растенията. **Първо, настройте вашите изображения:** 1. Създайте папка на име `images` в папката на вашия терариум проект 2. Изтеглете изображенията на растенията от [папката с решение](../../../../3-terrarium/solution/images) (общо 14 изображения на растения) 3. Копирайте всички изображения на растения в новата си папка `images` ### Задача: Създайте оформление за показване на растенията Сега добавете изображенията на растения, организирани в две колони между вашите тагове ``: ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **Стъпка по стъпка, това се случва в този код:** - **Създава** главен контейнер на страницата с `id="page"`, който държи цялото съдържание - **Установява** два контейнера за колони: `left-container` и `right-container` - **Организира** 7 растения в лявата колона и 7 растения в дясната колона - **Обгражда** всяко изображение на растение в `plant-holder` div за индивидуално позициониране - **Прилага** последователни имена на класове за стилове в следващия урок - **Задава** уникални ID-та на всяко изображение за по-късна интеракция с JavaScript - **Включва** правилни пътища към папката с изображения > 🤔 **Помислете за това**: Обърнете внимание, че всички изображения в момента имат еднакъв alt текст „plant“. Това не е идеално за достъпност. Потребителите на екранни четци биха чули „plant“ повторено 14 пъти, без да знаят кое точно растение е всяко изображение. Можете ли да измислите по-добри, по-описателни alt текстове за всяко изображение? > 📝 **Типове HTML елементи**: Елементите `
` са „блокови“ и заемат цялата ширина, докато елементите `` са „инлайн“ и заемат само необходимата ширина. Какво мислите какво би станало, ако замените всички тези `
` тагове с `` тагове? ### 🔄 **Педагогическа проверка** **Разбиране на структурата**: Отделете момент, за да прегледате структурите в HTML: - ✅ Можете ли да откриете главните контейнери в оформлението си? - ✅ Разбирате ли защо всяко изображение има уникално ID? - ✅ Как бихте описали предназначението на `plant-holder` div-овете? **Визуална проверка**: Отворете своя HTML файл в браузър. Трябва да видите: - Основен списък с изображения на растения - Изображенията организирани в две колони - Просто, нестилизирано оформление **Запомнете**: Този обикновен вид е точно това, което HTML трябва да изглежда преди стилизиране с CSS! С добавения този маркъп растенията ще се покажат на екрана, макар и все още да не изглеждат полиран – за това е CSS в следващия урок! За момента имате солидна HTML основа, която правилно организира съдържанието и следва най-добрите практики за достъпност. ## Използване на семантичен HTML за достъпност Семантичният HTML означава да избирате HTML елементи според тяхното значение и цел, а не само според въздействието им върху визията. Когато използвате семантичен маркъп, вие комуникирате структурата и значението на съдържанието си към браузъри, търсачки и помощни технологии като екранни четци. ```mermaid flowchart TD A[Трябва ли да добавите съдържание?] --> B{Какъв тип?} B -->|Главен заглавен ред| C["

"] B -->|Подзаглавие| D["

,

, и т.н."] B -->|Параграф| E["

"] B -->|Списък| F["

    ,
      "] B -->|Навигация| G["