Введение в создание сайтов #1. Основы HTML

Всем привет! Выпускаю серию статей эксклюзивно для сайта UoFge.ru, по разработке сайтов!

Создание сайта — это процесс разработки веб-страниц, которые отображаются в интернете. Для этого используются три основные технологии: HTML, CSS и JavaScript. В этой статье мы рассмотрим HTML — язык разметки, который отвечает за структуру и содержание веб-страниц.

HTML (HyperText Markup Language) — это язык, который используется для создания структуры веб-страницы. Он описывает элементы страницы, такие как заголовки, параграфы, изображения и ссылки.

Что нужно для начала?

Для начала работы вам потребуется:

Любой текстовый редактор (например, Notepad++ или VSCode).
Браузер (Google Chrome, Firefox, Safari и т.д.).

Для пользователей iPhone рекомендую использовать приложение Koder в app store.

Как использовать Koder:

Скачайте Koder из App Store.
Создайте новый проект или откройте существующий. Вы можете начать новый файл HTML, CSS или JavaScript, либо подключиться к серверу и редактировать файлы прямо с него.
Используйте подсветку синтаксиса и автодополнение, чтобы писать код быстрее и эффективнее.
Просмотрите результаты во встроенном браузере, чтобы убедиться, что ваш сайт отображается корректно.

Для кого подойдет Koder:

Для начинающих разработчиков, которые хотят практиковаться в написании кода на мобильных устройствах.
Для опытных разработчиков, которым нужно редактировать код на ходу, вне офиса.
Для фрилансеров, которые часто работают на удалённых серверах и нуждаются в мобильных решениях для быстрой правки кода.

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

Каждый HTML-документ начинается с определения типа документа и содержит несколько обязательных элементов. Вот пример базовой структуры HTML-документа:

<!DOCTYPE html>

<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Мой первый сайт</title>
</head>
<body>
    <h1>Добро пожаловать на мой сайт!</h1>
    <p>Это мой первый сайт, созданный с помощью HTML.</p>
</body>
</html>

2. Основные теги HTML

<!DOCTYPE html> — сообщает браузеру, что перед ним HTML5-документ.
<html> — корневой элемент HTML-документа.
<head> — содержит метаинформацию (информацию о странице) и ссылки на внешние ресурсы, такие как стили и скрипты.
<meta charset="UTF-8"> — определяет кодировку документа (UTF-8 поддерживает большинство языков мира).
<title> — заголовок страницы, который отображается на вкладке браузера.
<body> — основное содержимое страницы.

3. Как создать свою первую веб-страницу?

Откройте текстовый редактор.
Создайте новый файл и сохраните его с расширением .html, например, index.html.
Вставьте следующий код:

html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Простая страница</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это моя первая веб-страница, созданная на HTML.</p>
</body>
</html>

Сохраните файл и откройте его в браузере. Вы увидите заголовок "Привет, мир!" и параграф с текстом "Это моя первая веб-страница, созданная на HTML."

Заключение

Мы разобрали базовую структуру HTML-документа и создали простую страницу. На следующем этапе мы научимся добавлять больше элементов, таких как изображения, списки и ссылки, и создадим более сложную структуру.

Что будет дальше?

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