leestott
c0ca49b2cc
|
3 weeks ago | |
|---|---|---|
| .. | ||
| README.md | 3 weeks ago | |
| assignment.md | 3 weeks ago | |
README.md
Пројекат Тераријум, 1. део: Увод у HTML
Скетч од Томоми Имура
Квиз пре предавања
Погледајте видео
Увод
HTML, или ХиперТекст Маркуп Језик, је 'скелет' веба. Ако CSS 'облачи' ваш HTML, а JavaScript га оживљава, онда је HTML тело ваше веб апликације. Чак и синтакса HTML-а одражава ту идеју, јер укључује ознаке као што су "head", "body" и "footer".
У овој лекцији ћемо користити HTML да направимо 'скелет' интерфејса нашег виртуелног тераријума. Имаће наслов и три колоне: десну и леву колону где ће се налазити биљке које се могу превлачити, и централни део који ће представљати стаклени тераријум. До краја ове лекције, моћи ћете да видите биљке у колонама, али интерфејс ће изгледати мало чудно; не брините, у следећем делу ћете додати CSS стилове како би интерфејс изгледао боље.
Задатак
На вашем рачунару, направите фасциклу под називом 'terrarium' и унутар ње датотеку под називом 'index.html'. Ово можете урадити у Visual Studio Code-у након што направите фасциклу тераријума тако што ћете отворити нови прозор VS Code-а, кликнути на 'open folder' и пронаћи вашу нову фасциклу. Кликните на мало дугме 'file' у панелу Explorer и направите нову датотеку:
Или
Користите ове команде у вашем git bash-у:
mkdir terrariumcd terrariumtouch index.htmlcode index.htmlилиnano index.html
index.html датотеке указују прегледачу да је то подразумевана датотека у фасцикли; URL-ови као што је
https://anysite.com/testмогу бити изграђени користећи структуру фасцикли која укључује фасциклу под називомtestсаindex.htmlунутар ње;index.htmlне мора да се приказује у URL-у.
DocType и html ознаке
Први ред HTML датотеке је њен doctype. Мало је изненађујуће што овај ред мора бити на самом врху датотеке, али он говори старијим прегледачима да треба да приказују страницу у стандардном режиму, пратећи тренутну спецификацију HTML-а.
Савет: у VS Code-у, можете прећи мишем преко ознаке и добити информације о њеној употреби из MDN референтних водича.
Други ред треба да буде отварајућа ознака <html>, одмах праћена затварајућом ознаком </html>. Ове ознаке су коренски елементи вашег интерфејса.
Задатак
Додајте ове редове на врх ваше index.html датотеке:
<!DOCTYPE html>
<html></html>
✅ Постоји неколико различитих режима који се могу одредити постављањем DocType-а са упитним низом: Quirks Mode и Standards Mode. Ови режими су некада подржавали веома старе прегледаче који се данас ретко користе (Netscape Navigator 4 и Internet Explorer 5). Можете се држати стандардне декларације doctype-а.
'Head' документа
'Head' део HTML документа укључује кључне информације о вашој веб страници, познате као метаподаци. У нашем случају, серверу на који ће ова страница бити послата за приказивање, пружамо ове четири ствари:
- наслов странице
- метаподатке странице, укључујући:
- 'character set', који указује на то која се кодна страна користи на страници
- информације о прегледачу, укључујући
x-ua-compatibleкоји указује да је IE=edge прегледач подржан - информације о томе како би viewport требало да се понаша када се учита. Постављање viewport-а да има почетни скал од 1 контролише ниво зумирања када се страница први пут учита.
Задатак
Додајте '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>
✅ Шта би се догодило ако поставите viewport meta ознаку овако: <meta name="viewport" content="width=600">? Прочитајте више о viewport-у.
'Body' документа
HTML ознаке
У HTML-у, додајете ознаке у вашу .html датотеку како бисте креирали елементе веб странице. Свака ознака обично има отварајућу и затварајућу ознаку, попут ове: <p>hello</p> за означавање параграфа. Направите тело вашег интерфејса додавањем скупа <body> ознака унутар <html> пара ознака; ваш код сада изгледа овако:
Задатак
<!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>
Сада можете почети да градите вашу страницу. Обично користите <div> ознаке за креирање одвојених елемената на страници. Направићемо серију <div> елемената који ће садржати слике.
Слике
Једна HTML ознака која не захтева затварајућу ознаку је <img> ознака, јер има src елемент који садржи све информације потребне страници да прикаже ставку.
Направите фасциклу у вашој апликацији под називом images и у њој додајте све слике из изворног кода; (постоји 14 слика биљака).
Задатак
Додајте те слике биљака у две колоне између <body></body> ознака:
<div id="page">
<div id="left-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
</div>
</div>
<div id="right-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
</div>
</div>
</div>
Напомена: Спанови против Дивова. Дивови се сматрају 'блок' елементима, а Спанови 'инлајн'. Шта би се догодило ако ове дивове претворите у спанове?
Са овим кодом, биљке се сада приказују на екрану. Изгледа прилично лоше, јер још увек нису стилизоване помоћу CSS-а, што ћемо урадити у следећој лекцији.
Свака слика има alt текст који ће се појавити чак и ако не можете да видите или прикажете слику. Ово је важан атрибут за укључивање ради приступачности. Сазнајте више о приступачности у будућим лекцијама; за сада, запамтите да alt атрибут пружа алтернативне информације за слику ако корисник из неког разлога не може да је види (због споре везе, грешке у src атрибуту или ако корисник користи читач екрана).
✅ Да ли сте приметили да свака слика има исти alt текст? Да ли је ово добра пракса? Зашто или зашто не? Можете ли побољшати овај код?
Семантички маркуп
Уопштено, пожељно је користити значајан 'семантички' маркуп када пишете HTML. Шта то значи? То значи да користите HTML ознаке које представљају тип података или интеракције за које су дизајниране. На пример, главни наслов текста на страници треба да користи <h1> ознаку.
Додајте следећи ред одмах испод ваше отварајуће <body> ознаке:
<h1>My Terrarium</h1>
Коришћење семантичког маркупа, као што је коришћење <h1> за наслове и <ul> за неуређене листе, помаже читачима екрана да се крећу кроз страницу. Уопштено, дугмад треба да буду написана као <button>, а листе као <li>. Иако је могуће користити посебно стилизоване <span> елементе са обрађивачима кликова да би се имитирала дугмад, боље је за кориснике са инвалидитетом да користе технологије које одређују где се дугме налази на страници и да интерагују са њим ако се елемент појављује као дугме. Из тог разлога, покушајте да користите семантички маркуп што је више могуће.
✅ Погледајте читач екрана и како он интерагује са веб страницом. Можете ли видети зашто би несемантички маркуп могао да фрустрира корисника?
Тераријум
Последњи део овог интерфејса укључује креирање маркупа који ће бити стилизован да направи тераријум.
Задатак:
Додајте овај маркуп изнад последње </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>
✅ Иако сте додали овај маркуп на екран, апсолутно ништа се не приказује. Зашто?
🚀Изазов
Постоје неке занимљиве 'старије' ознаке у HTML-у које је и даље забавно испробати, иако не би требало да користите застареле ознаке као што су ове ознаке у вашем маркупу. Ипак, можете ли користити стару <marquee> ознаку да натерате наслов <h1> да се хоризонтално помера? (ако то урадите, не заборавите да је уклоните након тога)
Квиз после предавања
Преглед и самостално учење
HTML је 'проверен и поуздан' систем градивних блокова који је помогао да се веб изгради у оно што је данас. Сазнајте мало о његовој историји проучавајући старе и нове ознаке. Можете ли схватити зашто су неке ознаке застареле, а неке додате? Које ознаке би могле бити уведене у будућности?
Сазнајте више о изградњи сајтова за веб и мобилне уређаје на Microsoft Learn.
Задатак
Вежбајте ваш HTML: Направите макету блога
Одрицање од одговорности:
Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције Co-op Translator. Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не сносимо одговорност за било каква неспоразумевања или погрешна тумачења која могу произаћи из коришћења овог превода.