Введение
HTML (Hypertext Markup Language — Язык Разметки Гипертекста) является основой для создания веб-страниц. Он определяет структуру и содержимое веб-страницы, а также позволяет добавлять различные элементы, такие как текст, изображения, таблицы, ссылки и др. В этой статье мы рассмотрим основные аспекты HTML и создадим простую веб-страницу.
Структура HTML документа
Любой HTML-документ состоит из трех основных частей: заголовка, тела и подвала.
Заголовок (head) используется для определения метаданных страницы, таких как название, описание и ключевые слова. Посетитель видит не все данные заголовка. Некоторые данные технические и нужны браузеру для работы.
Тело (body) содержит содержимое страницы, которое отображается в браузере.
Подвал (footer) обычно содержит информацию об авторских правах и контактную информацию.
Основные теги HTML
Тег — это элемент языка HTML, который представляет собой конструкцию, используемую для разметки веб-страницы. Рассмотрим основные теги HTML:
– <html> - тег, который открывает и закрывает HTML-документ.
– <head> - тег заголовка документа.
– <title> - тег для указания заголовка страницы.
– <body> - тег тела документа.
– <h1> - тег заголовка первого уровня.
– <p> - тег параграфа.
– <a> - тег ссылки.
– </html> - закрывающий тег HTML-документа.Создание простой веб-страницы
Теперь, когда вы знаете основные теги HTML, давайте создадим простую веб-страницу, используя их. Ниже приведен пример HTML-кода для создания простой страницы с заголовком, параграфом, ссылкой и подвалом.
Чтобы создать данную страничку необходимо:
— открыть текстовый документ
— написать в нем приведенный ниже текст
— сохранить с расширением .html
— открыть сохраненный файл в браузере
<!DOCTYPE html>
<html>
<head>
<title>Моя первая веб-страница</title>
</head>
<body>
<h1>Заголовок параграфа</h1>
<p>Текст параграфа</p>
<a href="https://oleg-cherednikov.ru">Ссылка</a>
</body>
<footer>
<p>Все права защищены</p>
</footer>
</html>В этом примере мы создали веб-страницу с заголовком страницы Моя первая веб-страница, заголовком параграфа Заголовок параграфа, текстом параграфа Текст параграфа и ссылкой на сайт https://oleg-cherednikov.ru. В подвал мы поместили текст Все права защищены.
В браузере данная страничка будет выглядеть вот так:
Как видите это совсем простая страничка и ее создать может каждый. Но она выглядит совсем не так, как многие странички в интернете. Не хватает оформления. А если сказать более точно — не хватает CSS. Именно с помощью CSS создается оформление HTML-страницы. Но об этом мы поговорим уже в другой раз 🙂