32 KiB

Raw Blame History Unescape Escape

Проект Терариум Част 1: Въведение в HTML

Скица от Tomomi Imura

HTML, или HyperText Markup Language, е основата на всеки уебсайт, който някога сте посещавали. Можете да си представите HTML като скелета, който дава структура на уеб страниците – той определя къде се намира съдържанието, как е организирано и какво представлява всяка част. Докато CSS по-късно ще "облече" вашия HTML с цветове и оформления, а JavaScript ще го оживи с интерактивност, HTML предоставя основната структура, която прави всичко останало възможно.

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

До края на този урок ще имате работеща HTML страница, която показва изображения на растения, организирани в колони, готова за стилизиране в следващия урок. Не се притеснявайте, ако изглежда основно в началото – точно това трябва да прави HTML, преди CSS да добави визуалния блясък.

Предварителен тест

📺 Гледайте и научете: Вижте този полезен видео преглед

Настройка на вашия проект

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

Задача: Създайте структурата на проекта

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

Опция 1: Използване на Visual Studio Code

Отворете Visual Studio Code
Кликнете на "File" → "Open Folder" или използвайте Ctrl+K, Ctrl+O (Windows/Linux) или Cmd+K, Cmd+O (Mac)
Създайте нова папка, наречена terrarium и я изберете
В панела Explorer кликнете върху иконата "New File"
Назовете файла index.html

Опция 2: Използване на команди в терминала

mkdir terrarium
cd terrarium
touch index.html
code index.html

Ето какво постигат тези команди:

Създават нова директория, наречена terrarium за вашия проект
Навигират в директорията на терариума
Създават празен файл index.html
Отварят файла във Visual Studio Code за редактиране

💡 Полезен съвет: Името на файла index.html е специално в уеб разработката. Когато някой посети уебсайт, браузърите автоматично търсят index.html като основна страница за показване. Това означава, че URL като https://mysite.com/projects/ автоматично ще зареди файла index.html от папката projects, без да е необходимо да се посочва името на файла в URL.

Разбиране на структурата на HTML документ

Всеки HTML документ следва специфична структура, която браузърите трябва да разбират и правилно да показват. Можете да си представите тази структура като официално писмо – то има задължителни елементи в определен ред, които помагат на получателя (в случая браузъра) да обработи съдържанието правилно.

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

Декларация DOCTYPE и коренов елемент

Първите два реда на всеки HTML файл служат като "въведение" на документа за браузъра:

<!DOCTYPE html>
<html></html>

Разбиране на това, което прави този код:

Декларира типа на документа като HTML5, използвайки <!DOCTYPE html>
Създава кореновия елемент <html>, който ще съдържа цялото съдържание на страницата
Установява съвременни уеб стандарти за правилно рендиране от браузъра
Осигурява последователно показване на различни браузъри и устройства

💡 Съвет за VS Code: Задръжте курсора върху всеки HTML таг във VS Code, за да видите полезна информация от MDN Web Docs, включително примери за употреба и подробности за съвместимостта с браузъри.

📚 Научете повече: Декларацията DOCTYPE предотвратява влизането на браузърите в "quirks mode", който се използваше за поддръжка на много стари уебсайтове. Съвременната уеб разработка използва простата декларация <!DOCTYPE html>, за да осигури рендиране, съвместимо със стандартите.

Добавяне на основни метаданни за документа

Секцията <head> на HTML документа съдържа важна информация, която браузърите и търсачките се нуждаят, но която посетителите не виждат директно на страницата. Можете да я разглеждате като "задкулисна" информация, която помага на вашата уеб страница да работи правилно и да се показва коректно на различни устройства и платформи.

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

Задача: Добавете секцията Head на документа

Вмъкнете тази секция <head> между вашите отварящи и затварящи тагове <html>:

<head>
	<title>Welcome to my Virtual Terrarium</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

Разбивка на това, което постига всеки елемент:

Задава заглавието на страницата, което се появява в разделите на браузъра и резултатите от търсенето
Определя UTF-8 кодиране на символи за правилно показване на текст по целия свят
Осигурява съвместимост с модерните версии на Internet Explorer
Конфигурира адаптивен дизайн, като задава изгледа да съответства на ширината на устройството
Контролира началното ниво на мащабиране, за да показва съдържанието в естествен размер

🤔 Замислете се: Какво би се случило, ако зададете мета таг за изглед като този: <meta name="viewport" content="width=600">? Това би принудило страницата винаги да бъде широка 600 пиксела, което би нарушило адаптивния дизайн! Научете повече за правилната конфигурация на изгледа.

Създаване на структурата на документа

Елементът <body> съдържа цялото видимо съдържание на вашата уеб страница – всичко, което потребителите ще видят и с което ще взаимодействат. Докато секцията <head> предоставя инструкции на браузъра, секцията <body> съдържа действителното съдържание: текст, изображения, бутони и други елементи, които създават вашия потребителски интерфейс.

Нека добавим структурата на тялото и да разберем как HTML таговете работят заедно, за да създадат смислено съдържание.

Разбиране на структурата на HTML таговете

HTML използва двойки тагове за дефиниране на елементи. Повечето тагове имат отварящ таг като <p> и затварящ таг като </p>, със съдържание между тях: <p>Hello, world!</p>. Това създава елемент параграф, съдържащ текста "Hello, world!".

Задача: Добавете елемента Body

Актуализирайте вашия HTML файл, за да включите елемента <body>:

<!DOCTYPE html>
<html>
	<head>
		<title>Welcome to my Virtual Terrarium</title>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
	</head>
	<body></body>
</html>

Ето какво предоставя тази пълна структура:

Установява основната рамка на HTML5 документа
Включва основни метаданни за правилно рендиране от браузъра
Създава празно тяло, готово за вашето видимо съдържание
Следва най-добрите практики за съвременна уеб разработка

Сега сте готови да добавите видимите елементи на вашия терариум. Ще използваме елементи <div> като контейнери за организиране на различни секции от съдържанието и елементи <img> за показване на изображенията на растенията.

Работа с изображения и контейнери за оформление

Изображенията са специални в HTML, защото използват "самозатварящи се" тагове. За разлика от елементи като <p></p>, които обгръщат съдържание, тагът <img> съдържа цялата необходима информация в самия таг, използвайки атрибути като src за пътя на файла с изображението и alt за достъпност.

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

Първо, настройте вашите изображения:

Създайте папка, наречена images вътре в папката на вашия проект за терариум
Изтеглете изображенията на растенията от папката с решения (общо 14 изображения на растения)
Копирайте всички изображения на растения в новата си папка images

Задача: Създайте оформление за показване на растенията

Сега добавете изображенията на растенията, организирани в две колони между вашите тагове <body></body>:

<div id="page">
	<div id="left-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/plant1.d87946a2ca70cc4316bda6e6c3af7210fbe9ada5539a7885141a9ce0efaf7be3.bg.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/plant2.8daa1606c9c1ad896bb171212c7d1d882e504b76b8ec3a2d1c337d775cf50dc3.bg.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/plant3.8b0d484381a2a2a77c5c06ad97ab6ae5b7023da8c6c7678b0183bc0e46ea17a7.bg.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/plant4.656e16ae1df37be2af5f4e7b5ab6c5decc432c3d3ec2eb98b904ddbecad49db0.bg.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/plant5.2b41b9355f11ebccd62d327f5f14e56531ecda9c6f970bc89e386ee9f0273bb0.bg.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/plant6.3d1827d03b6569946be13ae5da1f32947ae56732638a43757a7c616a6adccc5d.bg.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/plant7.8152c302ac97f621a6c595bdf3939103568f9efc7d3b06a0f02a1ea66f479de0.bg.png" />
		</div>
	</div>
	<div id="right-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant8" src="../../../../translated_images/plant8.38d6428174ffa850a47cd1b81d528fa528adda7d23f3ae0bb42f4a27356ca5e6.bg.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/plant9.f0e38d3327c37fc29cd2734d48d20c2cf69300898ece6d46708829e02ce540e3.bg.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/plant10.b159d6d6e985595f56d86b4b38061b8e7b4c9969c210c199fe967269cf935e7f.bg.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/plant11.2a03a1c2ec8ea84ef3a80c06cc6883f3960fbb669f2c0b0bd824ba33d7eb7d32.bg.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/plant12.60e9b53e538fbaf3e5797ebf800acb483baf5639e6cf378292ac2321ab8a5ea9.bg.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/plant13.07a51543c820bcf57f67a9a6c0acbd6211ff795e2e67a42a9718224534e95fab.bg.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/plant14.6e486371ba7d36ba3520d9828887993cb4c3edad8bdd8ff9b1b315717ff8cb63.bg.png" />
		</div>
	</div>
</div>

Стъпка по стъпка, ето какво се случва в този код:

Създава основен контейнер на страницата с id="page", който да държи цялото съдържание
Установява два контейнера за колони: left-container и right-container
Организира 7 растения в лявата колона и 7 растения в дясната колона
Обгръща всяко изображение на растение в plant-holder div за индивидуално позициониране
Прилага последователни имена на класове за стилизиране с CSS в следващия урок
Присвоява уникални ID-та на всяко изображение на растение за бъдеща интерактивност с JavaScript
Включва правилни пътища към папката с изображения

🤔 Замислете се: Забележете, че всички изображения в момента имат еднакъв alt текст "plant". Това не е идеално за достъпност. Потребителите на екранни четци ще чуят "plant" повторено 14 пъти, без да знаят кое конкретно растение показва всяко изображение. Можете ли да измислите по-добър, по-описателен alt текст за всяко изображение?

📝 Типове HTML елементи: Елементите <div> са "блокови" и заемат цялата ширина, докато елементите <span> са "вградени" и заемат само необходимата ширина. Какво мислите, че би се случило, ако замените всички тези тагове <div> с тагове <span>?

С добавянето на този маркъп, растенията ще се появят на екрана, въпреки че все още няма да изглеждат добре – за това ще се погрижи CSS в следващия урок! Засега имате солидна HTML основа, която правилно организира вашето съдържание и следва най-добрите практики за достъпност.

Използване на семантичен HTML за достъпност

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

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

Добавяне на семантично заглавие на страницата

Нека добавим подходящо заглавие към вашата страница за терариум. Вмъкнете този ред точно след вашия отварящ <body> таг:

<h1>My Terrarium</h1>

Защо семантичният маркъп е важен:

Помага на екранните четци да навигират и разбират структурата на страницата
Подобрява оптимизацията за търсачки (SEO), като изяснява йерархията на съдържанието
Подобрява достъпността за потребители с зрителни увреждания или когнитивни различия
Създава по-добри потребителски преживявания на всички устройства и платформи
Следва уеб стандартите и най-добрите практики за професионална разработка

Примери за семантични срещу несемантични избори:

Цел	✅ Семантичен избор	❌ Несемантичен избор
Основно заглавие	`<h1>Заглавие</h1>`	`<div class="big-text">Заглавие</div>`
Навигация	`<nav><ul><li></li></ul></nav>`	`<div class="menu"><div></div></div>`
Бутон	`<button>Кликни ме</button>`	`<span onclick="...">Кликни ме</span>`
Съдържание на статия	`<article><p></p></article>`	`<div class="content"><div></div></div>`

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

Създаване на контейнера за терариума

Сега нека добавим HTML структурата за самия терариум – стъкления контейнер, в който растенията ще бъдат поставени. Тази секция демонстрира важна концепция: HTML предоставя структура, но без стилизиране с CSS, тези елементи все още няма да бъдат видими.

Маркупът за терариума използва описателни имена на класове, които ще направят стилизирането с CSS интуитивно и лесно за поддръжка в следващия урок.

Задача: Добавете структурата на терариума

Вмъкнете този маркуп над последния </div> таг (преди затварящия таг на контейнера на страницата):

<div id="terrarium">
	<div class="jar-top"></div>
	<div class="jar-walls">
		<div class="jar-glossy-long"></div>
		<div class="jar-glossy-short"></div>
	</div>
	<div class="dirt"></div>
	<div class="jar-bottom"></div>
</div>

Разбиране на тази структура на терариума:

Създава основен контейнер за терариума с уникален ID за стилизиране
Определя отделни елементи за всеки визуален компонент (горна част, стени, пръст, Подканва: Създайте семантичен HTML раздел, който включва основно заглавие "Ръководство за грижа за растенията", три подраздела със заглавия "Поливане", "Изисквания за светлина" и "Грижа за почвата", като всеки съдържа параграф с информация за грижата за растенията. Използвайте подходящи семантични HTML тагове като <section>, <h2>, <h3> и <p>, за да структурирате съдържанието правилно.

Научете повече за режим агент тук.

Предизвикателство: История на HTML

Научете за еволюцията на уеб

HTML се е развил значително, откакто Тим Бърнърс-Лий създаде първия уеб браузър в CERN през 1990 г. Някои по-стари тагове като <marquee> вече са остарели, защото не работят добре с модерните стандарти за достъпност и принципите на адаптивния дизайн.

Опитайте този експеримент:

Временно обгърнете заглавието си <h1> в таг <marquee>: <marquee><h1>Моят терариум</h1></marquee>
Отворете страницата си в браузър и наблюдавайте ефекта на скролиране
Помислете защо този таг е остарял (подсказка: помислете за потребителското изживяване и достъпността)
Премахнете тага <marquee> и се върнете към семантичната маркировка

Въпроси за размисъл:

Как скролиращото заглавие може да повлияе на потребители с зрителни увреждания или чувствителност към движение?
Какви съвременни CSS техники могат да постигнат подобни визуални ефекти по-достъпно?
Защо е важно да се използват актуални уеб стандарти вместо остарели елементи?

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

Тест след лекцията

Преглед и самостоятелно обучение

Задълбочете знанията си за HTML

HTML е основата на уеб вече повече от 30 години, развивайки се от прост език за маркиране на документи до сложна платформа за създаване на интерактивни приложения. Разбирането на тази еволюция ви помага да оцените съвременните уеб стандарти и да вземате по-добри решения за разработка.

Препоръчителни пътища за обучение:

История и еволюция на HTML
- Проучете хронологията от HTML 1.0 до HTML5
- Разгледайте защо определени тагове са премахнати (достъпност, удобство за мобилни устройства, поддръжка)
- Изследвайте нововъзникващи HTML функции и предложения
Дълбоко разбиране на семантичния HTML
- Изучете пълния списък на семантични елементи в HTML5
- Практикувайте идентифицирането кога да използвате <article>, <section>, <aside> и <main>
- Научете за ARIA атрибути за подобрена достъпност
Съвременно уеб разработване
- Разгледайте създаване на адаптивни уебсайтове на Microsoft Learn
- Разберете как HTML се интегрира с CSS и JavaScript
- Научете за най-добрите практики за уеб производителност и SEO

Въпроси за размисъл:

Кои остарели HTML тагове открихте и защо са премахнати?
Какви нови HTML функции се предлагат за бъдещи версии?
Как семантичният HTML допринася за уеб достъпността и SEO?

Задача

Практикувайте HTML: Създайте макет на блог

Отказ от отговорност:
Този документ е преведен с помощта на AI услуга за превод Co-op Translator. Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да е недоразумения или погрешни интерпретации, произтичащи от използването на този превод.

32 KiB Raw Blame History Unescape Escape

Проект Терариум Част 1: Въведение в HTML

Предварителен тест

Настройка на вашия проект

Задача: Създайте структурата на проекта

Разбиране на структурата на HTML документ

Декларация DOCTYPE и коренов елемент

Добавяне на основни метаданни за документа

Задача: Добавете секцията Head на документа

Създаване на структурата на документа

Разбиране на структурата на HTML таговете

Задача: Добавете елемента Body

Работа с изображения и контейнери за оформление

Задача: Създайте оформление за показване на растенията

Използване на семантичен HTML за достъпност

Добавяне на семантично заглавие на страницата

Създаване на контейнера за терариума

Задача: Добавете структурата на терариума

Предизвикателство: История на HTML

Тест след лекцията

Преглед и самостоятелно обучение

Задача

32 KiB

Raw Blame History Unescape Escape