HTML теги | Notion

Кожен HTML тег має свою унікальну назву з визначеним синтаксисом, яка записується латинськими літерами і не чутлива до регістру. Теги це такі собі цеглинки, якими ми будуємо міцний каркас нашої веб сторінки. Всього їх існує близько сотні. Але розбирати ми будемо основні. Для старту цього більше, ніж достатньо.

Будівельні теги: <div></div>, <header></header>, <footer></footer>, <nav></nav>

Будівельні теги призначені для створення структури / каркасу нашої сторінки. Вони всі без вийнятку є парними (контейнери, в які ми поміщаємо контент)

<html lang="en">
	<head>
	   <title>My firs project</title>
	   <meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=edge">
	   <meta name="viewport" content="width=device-width, initial-scale=1.0">
		 <link rel="stylesheet" href="./css/style.css">
	</head>
	<body class="body">
		<header>
			<nav>
				Вміст тега nav
			</nav>
		</header>

		<div>
			Вміст тега div
		</div>
		<div>
			Вміст тега div
		</div>
		<div>
			Вміст тега div
		</div>

	<footer>
		Вміст тега footer
	</footer>
	</body>
</html>

Розберемо синтаксис.
- Вже знаємо, що парні теги складаються з двох частин - закриваючого та відкриваючого. <назва тега> контент </назва тега>
- Найчастіше використовується тег <div><div>.
- <header></header>, <footer></footer>, <nav></nav> використовуються для створення конкретних блоків: header - верхня частина, footer - нижня частина, nav - навігація, меню. Вони використовуються лише раз на сторінці
- Всі вищеописані теги є блочними, тобто завжди починатимуться з нового рядка

Теги для контенту

<html lang="en">
	<head>
	   <title>My firs project</title>
	   <meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=edge">
	   <meta name="viewport" content="width=device-width, initial-scale=1.0">
		 <link rel="stylesheet" href="./css/style.css">
	</head>
	<body class="body">
		<h1>Вміст тега h1</h1>
		<h2>Вміст тега h2</h2>
		<h3>Вміст тега h3</h3>
		<h4>Вміст тега h4</h4>
		<h5>Вміст тега h5</h5>
		<h6>Вміст тега h6</h6>
	</body>
</html>

Заголовки <h1> …<h6>

Це блочні парні теги. Тобто вони починаються з нового рядка та мають закриваючий елемент.
- <h1> - Записується лише раз на сторінці

Screenshot 2022-08-17 at 13.33.03.png

<html lang="en">
	<head>
	   <title>My firs project</title>
	   <meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=edge">
	   <meta name="viewport" content="width=device-width, initial-scale=1.0">
		 <link rel="stylesheet" href="./css/style.css">
	</head>
	<body class="body">
		<p>Абзац1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elementum rhoncus massa, accumsan hendrerit urna blandit a. Pellentesque tellus libero, imperdiet commodo rhoncus in, ultrices a mi.</p>
		<p>Абзац2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elementum rhoncus massa, accumsan hendrerit urna blandit a. Pellentesque tellus libero, imperdiet commodo rhoncus in, ultrices a mi.</p>
		<p>Абзац3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elementum rhoncus massa, accumsan hendrerit urna blandit a. Pellentesque tellus libero, imperdiet commodo rhoncus in, ultrices a mi.</p>
	</body>
	</body>
	</body>
</html>

Параграф <p><p>

Тег <p> - це текстовий абзац. Також являється блочним, і відповідно через це теж починатиметься з нового рядка.

Screenshot 2022-08-17 at 13.45.27.png

<html lang="en">
	<head>
	   <title>My firs project</title>
	   <meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=edge">
	   <meta name="viewport" content="width=device-width, initial-scale=1.0">
		 <link rel="stylesheet" href="./css/style.css">
	</head>
	<body class="body">
		<span>Вміст тега span 1</span>
		<span>Вміст тега span 2</span>
		<span>Вміст тега span 3</span>
	</body>
</html>

Спан <span><span>
- Тег <span> - це наш перший inline-тег, тобто лінійний. Він не буде починатися з нового рядка. Він призначений для виділення певної частини текст
- Відмінність блочного тега від лінійного втому, що блочний не дивлячись на свою ширину, завжди за змовчуванням займає всю ширину вікна і кожен наступний починається з нового рядка. Лінійні ж теги мають ширину рівну ширині свого контенту та розміщатимуться лінією, один за одним
- Варто сказати, що ****всередині лінійних тегів не можуть буту блочні теги. Але може бути навпаки

Screenshot 2022-08-17 at 13.52.52.png

<html lang="en">
	<head>
	   <title>My firs project</title>
	   <meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=edge">
	   <meta name="viewport" content="width=device-width, initial-scale=1.0">
		 <link rel="stylesheet" href="./css/style.css">
	</head>
	<body class="body">
			<a href="<https://www.youtube.com/>" target="_bank">Посилання на ютуб</a>
	</body>
</html>

Посилання <a></a>
- Призначений для створення посилань та певний документ, файл або сайт
- Цей тег є лінійним, та використовується з атрибутами:
  - href - в значення вказується шлях до ресурсу.
  - target - в значення зазвичай вказують “_blank”, що казатиме браузеру, щоб посилання відкривалося у новому вікні

<html lang="en">
	<head>
	   <title>My firs project</title>
	   <meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=edge">
	   <meta name="viewport" content="width=device-width, initial-scale=1.0">
		 <link rel="stylesheet" href="./css/style.css">
	</head>
	<body class="body">
			<img src="./img/test_image.png" alt="testImage"/>
	</body>
</html>

Зображення <img>
- Призначений для вставки зображень в нашу веб-сторінку.
- Це лінійний тег, але з певною особливістю - він пишеться без закриваючого елемента
- Має два атрибути:
  - src - шлях до зображення
  - alt - назва зображення (відображатиметься, якщо зображення з певних причин не заватнажиться

<html lang="en">
	<head>
	   <title>My firs project</title>
	   <meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=edge">
	   <meta name="viewport" content="width=device-width, initial-scale=1.0">
		 <link rel="stylesheet" href="./css/style.css">
	</head>
	<body class="body">
			<ul>
				<li>Item 1</li>
				<li>item 2</li>
				<li>Item 3</li>
			</ul>
			<ol>
				<li>Firs</li>
				<li>Second</li>
				<li>Third</li>
			</ol>
	</body>
</html>

Списки <ul></ul>, <ol></ol>, <li></li>
- <ul> - це маркований список
- <ol> - це нумерований список
- <li> - це елемент списку

Всі три тега є блочними, тому починатимуться з нового рядка

Screenshot 2022-08-17 at 15.24.13.png

<html lang="en">
	<head>
	   <title>My firs project</title>
	   <meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=edge">
	   <meta name="viewport" content="width=device-width, initial-scale=1.0">
		 <link rel="stylesheet" href="./css/style.css">
	</head>
	<body class="body">
			<span>Вміст <br/> тега span 1</span>
	</body>
</html>

Розривання радка, перенесення рядка <br/>

Все після цього тега почнеться з нового рядка

Теги форм

<html lang="en">
	<head>
	   <title>My firs project</title>
	   <meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=edge">
	   <meta name="viewport" content="width=device-width, initial-scale=1.0">
		 <link rel="stylesheet" href="./css/style.css">
	</head>
	<body class="body">
		<form action="submit">
				<div>
					<input type="text" name="userName" value="user name"/>
				</div>
				<div>
					<input type="tel" name="phone" value="12345"/>
				</div>
				<div>
					<input type="password" name="user_password" value=""/>
				</div>
				<div>
					<p><input type="radio" name="dev" value="frontend" />frontend</p>
					<p><input type="radio" name="dev" value="backend" />backend</p>
				</div>
				<div>
					<p><input type="checkbox" name="saveme"/>Save me</p>
					<p><input type="checkbox" name="car"/>Car</p>
					<p><input type="checkbox" name="House"/>House</p>
				</div>
				<div>
					<input type="file" name="photo" />
				</div>
				<div>
					<textarea name="text"/></textarea>
				</div>
				<select name="color">
						<option value="red">red</option>
						<option selected value="white">white</option>
						<option value="black">black</option>
				</select>
				<div>
						<button type="submit">Submit</button>
				</div>
		</form>
	</body>
</html>

Тег <form></form>
- Це блочний тег, який має закриваючцй елемент.Виконує ролю контейнера для всієї форми, наче ящик для інструментів.
Тег <input/>
- використовується з необов’язковим атрибутом placeholder - підказка, що саме ввести в інпут
- Це інтерактивний елемент форми (лінійний тег) за допомогою якого відбувається прийом даних від користувачів. Має декілька атрибутів:
  - name - задає і’я інпута
  - value - задає значення інпута
  - type - визначає тип нашого інпута:
    - text - поле вводу для тексту (стоїть за змовчуванням)
    - password - поле вводу для пароля
    - tell - поле вводу для номера. На мобільному пристрої перемкне клавіатуру на номерну
    - radio - перемикач (Дозволяє робити вибір або/або) Також можна додати атрибут checked - що зробить інпут натиснутим
    - checkbox - чеклист, можна вибирати декільна, на відміну від попереднього. Також можна додати атрибут checked - що зробить інпут натиснутим
    - File - дозволяє додати певний файл у форму
Teг <textarea>
- По суті - інпут з типом text, aле для великого об’єму тексту
- використовується з необов’язковим атрибутом placeholder - підказка, що саме ввести в поле
Teги <select> та <option>
- Ці два тега являють собою випадаючий список. Тег <select> є контейнером, а тег <option> є елементом списку.
- До <option> можна додати атрибут selected - що зробить його вибраним за змовчуванням
Тег <button>
- Кнопка
- Використовуєтьсяз атрибутом type
  - submit - при натисканні відправиться вся форма
  - reset - при натисканні вся форма очиститься
Загальні властивості тегів форми:
- До всіх елементів можна додати атрибут disabled, який зробить його неактивним, неклікабельним.
- До всіх елементів форми можна додати атрибут tabindex - відповідає за послідовність переходу між табами при натисканні клавіші tab