Image default
Front-end HTML

Початок роботи з HTML. Структура веб-документа

HTML – це абревіатура, що розшифровується, як «Hyper Text Markup Language» (мова розмітки гіпертексту).

HTML-документ – це звичайний документ, який можна створити чи в “Блокноті“, чи в спеціалізованих програмах “Notepad++” (тільки для Windows), “Visual Studio Code”, “Sublime Text” і т.д. Фрагменти коду, які будуть присутні в статтях, були написані саме на “Sublime Text“.

Структура HTMLдокумента

Щоб зрозуміти структуру, можна уявити html-документ, як скелет, де за його межі відповідає елемент <html>, </html>. Між <head, </head> знаходиться заголовочні теги, а <body>, </body> відповідає за тіло документа.

У 1 рядку підключається DOCTYPE, який вказує, що ми використовуємо найновішу версію HTML.

<html>,</html> кореневий елемент html-документа <head>,</head> – містить мета-інформацію про документ.

<title>,</title> – визначає заголовок документа.

<body>,</body> – містить видиму частину документа.

<h1>,</h1> – визначає заголовки (h1, …, h6).

<p>,</p> – визначає параграф.

HTMLтеги

Кожен елемент в документі складається з початкового (відкриваючого) і кінцевого (закриваючого) тегу, наприклад:

<span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><h1> Це заголовок </ h1>

Тег надає певні властивості контенту, який знаходиться між його початковим і кінцевим тегами. Кінцевий тег визначається /. Також теги можуть вкладатися один в одного, наприклад:

<span style="vertical-align: inherit;"><span style="vertical-align: inherit;"><h1> <i> Це заголовок </ i> </ h1>

Метатеги

Метатеги використовують для зберігання інформації, яку використає браузер чи пошукова система і отримає опис сайту. Ці теги розміщуються в <head>,</head>.

Це теги:

<base> – дозволяє вказати основну URL-адресу, яка використовується для всіх елементів в HTML.

<link> – визначає зв’язок між документом і зовнішнім елементом.

<meta> – містить мета-дані HTML-документа В метатегах застосовують атрибути кодування, ключових слів та інші.

<noscript> – дозволяє визначити альтернативний контент для користувачів, браузер яких не підтримує клієнтські сценарії.

<script> – містить клієнтський сценарій.

<style> – підключає таблиці стилів.

<title> – визначає заголовок документа.

Отож, реалізуємо структуру веб-документа та покажемо його відображення в браузері:

Результат відображення в браузері

Related posts

HTML-атрибути

Just_Programmer

Початок роботи з Bootstrap

Just_Programmer

645 коментарів

ntc33 download 01.12.2018 at 02:57

Oh my goodness! Impressive article dude! Thank you, However I am having problems with your
RSS. I don’t understand why I am unable to join it.
Is there anybody having the same RSS issues? Anyone who knows the solution can you kindly respond?
Thanks!! https://918.network/downloads/82-ntc33

Reply
Jim 06.12.2018 at 07:26

I’ll right away clutch your rss as I can’t to find your
email subscription link or newsletter service.
Do you’ve any? Kindly allow me recognise so that I may just subscribe.
Thanks. I’ll right away snatch your rss as I can’t in finding your e-mail subscription hyperlink or newsletter service.
Do you’ve any? Kindly let me know in order that I may just subscribe.
Thanks. Ahaa, its pleasant dialogue about this post here at
this webpage, I have read all that, so at this time me
also commenting at this place. http://foxnews.org

Reply
Kill 08.12.2018 at 15:32

I really like it when individuals come together and share opinions.
Great blog, continue the good work! It’s perfect time to make some plans for
the long run and it is time to be happy. I have learn this submit and if I could I want to recommend
you few interesting things or advice. Perhaps you could write subsequent articles
referring to this article. I want to read more things approximately it!
I am sure this post has touched all the internet visitors, its
really really nice paragraph on building up new web site. http://www.cspan.net

Reply

Leave a Comment