Найти тему
Программирование

Структрура веб-страницы HTML, "Hello World"

Здравствуйте, дорогие читатели моей статьи!
Сегодня я расскажу вам о структуре веб-страницы и ее основных тегах, а также о том, как вывести фразу "Hello World!" на страницу!

Для вёрстки веб-страницы я буду пользоваться приложением Visual Studio Code. На рабочем столе я создал файл с расширением ".html" и открыл его с помощью этой программы.

Внешний вид среды разработки Visual Studio Code
Внешний вид среды разработки Visual Studio Code

Введя восклицательный знак("!") и нажав "TAB", я получил готовую структуру HTML документа.

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

Теперь разберёмся о том какие теги существуют:

В HTML существуют два вида тегов: парные и одиночные.
Парные теги - теги, которые имеют открывающую часть и закрывающую.
Например,
<title></title>, в закрывающем теге ставится слэш "/".
Одиночные теги - теги, у которых нет закрывающего тега.
Например,
<img>, позволяет добавить изображение на страницу.

Теперь разберём каждую строчку этого кода:

1. <!DOCTYPE html> - объявляет тип документа и объясняет браузеру, в какой версии языка разметки он сверстан, если указано "html", это означает, что документ свёрстан с использованием HTML5-тегов.

2. <html>...</html> - главный тег, включает в себя всё содержимое страницы.

3. <head>...</head> - тег, который служит хранилищем для других head-элементов и помогают браузеру при работе с данными. Содержимое тега <head> не отображается на странице.

4. <meta> - это один из тегов, который размещается внутри <head>. Он определяет метатеги, предназначенные для хранения информации для браузера и поисковой системы.

5. <title>...</title> - тег, определяющий заголовок страницы на вкладке браузера.

6. <body>...<body> - тег, определяющий всё тело документа(от англ. body - тело), хранит весь его контент и отображает на странице.

Это основные теги веб-страницы, об остальных тегах расскажу позже.

Теперь разберёмся с тем, как вывести фразу "Hello World!" на страницу.
Сделать это можно простым способом: просто написать
"Hello World!"
внутри тега
<body>.

Hello World!
Hello World!

Нажав на кнопку в форме треугольника, у нас откроется страница, на которой будет виден результат.

"Hello World!" на странице
"Hello World!" на странице

На этом закончим, в этой статье вы узнали об основных тегах HTML и их функциях, а также узнали о том, как вывести текст на страницу.

Желаю вам хорошего настроения! Можете подписаться на мой канал и поставить лайк, чтобы не пропустить дальнейшие уроки! Спасибо!