29 KiB

Raw Blame History Unescape Escape

Пројекат Тераријум, део 1: Увод у HTML

Илустрација од Томоми Имура

HTML, или језик за означавање хипертекста, представља основу сваког веб сајта који сте икада посетили. Замислите 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-а
Конфигурише одзивни дизајн постављањем viewport-а да одговара ширини уређаја
Контролише почетни ниво зумирања за приказ садржаја у природној величини

🤔 Размислите о овоме: Шта би се десило ако поставите мета ознаку viewport овако: <meta name="viewport" content="width=600">? Ово би приморало страницу да увек буде широка 600 пиксела, што би нарушило одзивни дизајн! Сазнајте више о правилној конфигурацији viewport-а.

Изградња тела документа

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

Хајде да додамо структуру тела и разумемо како HTML ознаке раде заједно да би креирале смислен садржај.

Разумевање структуре HTML ознака

HTML користи парове ознака за дефинисање елемената. Већина ознака има отварајућу ознаку као што је <p> и затварајућу ознаку као што је </p>, са садржајем између: <p>Здраво, свет!</p>. Ово креира елемент параграфа који садржи текст "Здраво, свет!".

Задатак: Додајте елемент тела

Ажурирајте ваш 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.sr.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/plant2.8daa1606c9c1ad896bb171212c7d1d882e504b76b8ec3a2d1c337d775cf50dc3.sr.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/plant3.8b0d484381a2a2a77c5c06ad97ab6ae5b7023da8c6c7678b0183bc0e46ea17a7.sr.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/plant4.656e16ae1df37be2af5f4e7b5ab6c5decc432c3d3ec2eb98b904ddbecad49db0.sr.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/plant5.2b41b9355f11ebccd62d327f5f14e56531ecda9c6f970bc89e386ee9f0273bb0.sr.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/plant6.3d1827d03b6569946be13ae5da1f32947ae56732638a43757a7c616a6adccc5d.sr.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/plant7.8152c302ac97f621a6c595bdf3939103568f9efc7d3b06a0f02a1ea66f479de0.sr.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.sr.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/plant9.f0e38d3327c37fc29cd2734d48d20c2cf69300898ece6d46708829e02ce540e3.sr.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/plant10.b159d6d6e985595f56d86b4b38061b8e7b4c9969c210c199fe967269cf935e7f.sr.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/plant11.2a03a1c2ec8ea84ef3a80c06cc6883f3960fbb669f2c0b0bd824ba33d7eb7d32.sr.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/plant12.60e9b53e538fbaf3e5797ebf800acb483baf5639e6cf378292ac2321ab8a5ea9.sr.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/plant13.07a51543c820bcf57f67a9a6c0acbd6211ff795e2e67a42a9718224534e95fab.sr.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/plant14.6e486371ba7d36ba3520d9828887993cb4c3edad8bdd8ff9b1b315717ff8cb63.sr.png" />
		</div>
	</div>
</div>

Корак по корак, ево шта се дешава у овом коду:

Креира главни контејнер странице са id="page" за држање целокупног садржаја
Утврђује два контејнера за колоне: left-container и right-container
Организује 7 биљака у леву колону и 7 биљака у десну колону
Обухвата сваку слику биљке у plant-holder div за индивидуално позиционирање
Примењује конзистентне називе класа за стилизовање CSS-ом у наредној лекцији
Додељује јединствене ID-еве свакој слици биљке за каснију интеракцију са JavaScript-ом
Укључује исправне путање до фолдера са сликама

🤔 Размислите о овоме: Приметите да све слике тренутно имају исти alt текст "биљка". Ово није идеално за приступачност. Корисници читача екрана би чули "биљка" 14 пута без могућности да знају која конкретна биљка је приказана на свакој слици. Можете ли смислити бољи, описнији alt текст за сваку слику?

📝 Типови HTML елемената: <div> елементи су "блоковни" и заузимају целу ширину, док су <span> елементи "инлајн" и заузимају само потребну ширину. Шта мислите да би се десило ако бисте заменили све ове <div> ознаке са <span> ознакама?

Са овим додатим ознакама, биљке ће се појавити на екрану, иако још увек неће изгледати углађено – за то је намењен CSS у наредној лекцији! За сада, имате солидну HTML основу која правилно организује ваш садржај и прати најбоље праксе приступачности.

Коришћење семантичког HTML-а за приступачност

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

Овај приступ чини ваше веб странице приступачнијим за кориснике са инвалидитетом и помаже претраживачима да боље разумеју ваш садржај. То је основни принцип савременог веб развоја који ствара боља искуства за све.

Додавање семантичког наслова странице

Хајде да додамо одговарајући наслов вашој страници тераријума. Уметните ову линију одмах након ваше отварајуће <body> ознаке:

<h1>My Terrarium</h1>

Зашто је семантичко означавање важно:

Помажe читачима екрана да навигирају и разумеју структуру странице
Побољшава оптимизацију за претраживаче (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 Подстицај: Направите семантички 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: Направите макету блога

Одрицање од одговорности:
Овај документ је преведен помоћу услуге за превођење уз помоћ вештачке интелигенције Co-op Translator. Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.

29 KiB Raw Blame History Unescape Escape

Пројекат Тераријум, део 1: Увод у HTML

Квиз пре предавања

Постављање вашег пројекта

Задатак: Креирајте структуру пројекта

Разумевање структуре HTML документа

Декларација DOCTYPE и коренски елемент

Додавање основних метаподатака документа

Задатак: Додајте секцију <head> документа

Изградња тела документа

Разумевање структуре HTML ознака

Задатак: Додајте елемент тела

Рад са сликама и контејнерима за распоред

Задатак: Креирајте распоред за приказ биљака

Коришћење семантичког HTML-а за приступачност

Додавање семантичког наслова странице

Креирање контејнера за тераријум

Истражите изазов историје HTML-а

Квиз након предавања

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

Задатак

29 KiB

Raw Blame History Unescape Escape

Задатак: Додајте секцију `<head>` документа