msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'softchris-patch-7'
${ noResults }
Web-Dev-For-Beginners/translations/bg/3-terrarium/1-intro-to-html
History
leestott c0ca49b2cc
🌐 Update translations via Co-op Translator 		3 weeks ago
..
README.md 🌐 Update translations via Co-op Translator 3 weeks ago
assignment.md 🌐 Update translations via Co-op Translator 3 weeks ago

README.md
Escape

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

Въведение в HTML

Скица от Tomomi Imura

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

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

Вижте видеото

Видео за основите на Git и GitHub

Въведение

HTML, или HyperText Markup Language, е "скелетът" на уеба. Ако CSS "облича" вашия HTML, а JavaScript го "оживява", то HTML е тялото на вашето уеб приложение. Синтаксисът на HTML дори отразява тази идея, като включва тагове като "head", "body" и "footer".

В този урок ще използваме HTML, за да създадем "скелета" на интерфейса на нашия виртуален терариум. Той ще има заглавие и три колони: дясна и лява колона, където ще се намират плъзгащите се растения, и централна зона, която ще представлява самия стъклен терариум. До края на този урок ще можете да видите растенията в колоните, но интерфейсът ще изглежда малко странно; не се притеснявайте, в следващата секция ще добавим CSS стилове, за да го направим по-привлекателен.

Задача

На вашия компютър създайте папка с име 'terrarium' и в нея файл с име 'index.html'. Можете да направите това във Visual Studio Code, като отворите нов прозорец на VS Code, кликнете върху 'open folder' и навигирате до новата си папка. Кликнете върху малкия бутон 'file' в панела Explorer и създайте новия файл:

explorer във VS Code

Или

Използвайте тези команди в git bash:

  • mkdir terrarium
  • cd terrarium
  • touch index.html
  • code 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 Reference guides.

Вторият ред трябва да бъде отварящият таг <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>

✅ Какво би се случило, ако зададете meta таг за viewport като този: <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>

Забележка: Spans срещу Divs. Divs се считат за 'блокови' елементи, а Spans са 'вградени'. Какво би се случило, ако трансформирате тези divs в spans?

С този код растенията вече се показват на екрана. Изглежда доста зле, защото все още не са стилизирани с 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: Създайте макет на блог

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