Введення в HTML

Організація системи папок та файлів

Створюємо окрему папку для всіх навчальних проектів
Створюємо папку з першим проектом (My_first_project)
Всередині папки проекту створюємо стандартну структуру
- папку CSS
- папку JS
- папку fonts
- папку img
- файл index.html (index означає головну сторінку, відкривається сервером за змовчуванням)
Вікриваємо папку з проектом в редакторі коду

Пишемо перші теги

<!DOCTYPE html>

Прописавши тег <!DOCTYPE html>, ми вказуємо браузеру, як саме потрібно опрацьовувати дану сторінку

<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>My title</h1>
	</body>
</html>

Теги існують парні та непарні. Різниця проста - парні складаються з двох частин (відкриваючого та закриваючого тегів) Це такі собі контейнери, в які ми можемо поміщяти інші теги або простий текст. В даному прикладі парними будуть теги html, head, title, body.
Тепер по структурі.
- Відкрили оболонку документа тегом <html lang="en"> </html> (Також ми можемо всередені тегів вказувати атрибути - додаткові параметри тегів)
- Всередині заголовка прописали тег <title>My firs project</title>. Він відображатиметься у вкладці браузера
  
  <title>My firs project</title>. Він відображатиметься у вкладці браузера
- Далі ми прописали метатег з кодуванням нашої сторінки та метатег з налаштуваннями вікна нашої сторінки
- в тег <link/> ми завжди прописуємо посилання на інші файли або ресурти (наприклад шрифти)
- в тег <body></body> завжди прописується весь вміст сторінки, саме його і бачить користувач відкривши сайт. В даному випадку ми в боді вставили тег <h1></h1> - що означає заголовок.