Узнайте, как создать свою первую веб-страницу с нуля. Простое руководство по основам HTML, работе в редакторе Notepad++ и созданию первого HTML-документа.
1.1. Основные понятия
HTML (HyperText Markup Language) – это язык разметки гипертекста, который используется для создания веб-страниц. Он состоит из тегов, которые определяют структуру страницы. Например, <html> обозначает начало HTML-документа, а <body> содержит основной контент страницы.
Пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Мой первый сайт</title>
</head>
<body>
Привет! Это мой первый сайт!
</body>
</html>
Объяснение:
<!DOCTYPE html>указывает браузеру, что документ является HTML-документом.<html lang="ru">сообщает браузеру, что язык содержимого – русский.<head>содержит метаданные, такие как заголовок страницы (<title>) и информация о кодировке (<meta charset="UTF-8">).<body>включает основную часть контента, которую видит пользователь.
1.2. Редактор Notepad++
Notepad++ – это бесплатный редактор текста с поддержкой синтаксиса различных языков программирования, включая HTML. Для начала работы создайте новый файл и сохраните его с расширением .html.
Пример использования:
- Откройте Notepad++.
- Нажмите Файл → Создать.
- Введите следующий код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя первая страница</title>
</head>
<body>
Добро пожаловать на мою страницу!
</body>
</html>- Сохраните файл как
index.html, выбрав кодировку UTF-8.
Важно: при сохранении файла выберите кодировку UTF-8, чтобы избежать проблем с отображением символов. Для этого в меню Кодировка выберите пункт Преобразовать в UTF-8 без BOM.
1.3. Первый HTML-документ
Создадим простой HTML-документ, содержащий заголовок и параграф.
Пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Привет, мир!</title>
</head>
<body>
<h1>Добро пожаловать на мой сайт!</h1>
<p>Это моя первая веб-страница.</p>
</body>
</html>
Объяснение:
<h1>определяет заголовок первого уровня.<p>создает параграф.
1.4. Просмотр исходного HTML-кода в Web-браузере
Чтобы просмотреть созданный HTML-файл в браузере, просто откройте его двойным щелчком мыши. Браузер автоматически откроет файл и отобразит содержимое.
Пример:
- Найдите файл
index.htmlна вашем компьютере. - Дважды щелкните по нему левой кнопкой мыши.
- Ваш браузер откроется и покажет вам созданную страницу.
Вы также можете посмотреть исходный код страницы прямо в браузере. Для этого нажмите правой кнопкой мыши на странице и выберите Просмотреть исходный код (или аналогичную команду в зависимости от браузера).
1.5. Комментарии в HTML-коде
Комментарии позволяют добавлять пояснения к вашему коду, которые не будут видны пользователям на странице. Они начинаются с <!-- и заканчиваются -->.
Пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Привет, мир!</title>
</head>
<body>
<!-- Этот комментарий не будет виден на странице -->
<h1>Добро пожаловать на мой сайт!</h1>
<p>Это моя первая веб-страница.</p>
</body>
</html>
Объяснение:
- Все, что находится между
<!--и-->, считается комментарием и игнорируется браузером.
