Приветствую всех, кто готов отправиться в увлекательное путешествие по миру веб-разработки! Сегодня мы начнем с самого основного – HTML, который является буквально скелетом каждой веб-страницы.
HTML (HyperText Markup Language) – это что-то вроде архитектурного чертежа для вашего сайта. Допустим, ваша веб-страница – это здание. HTML определяет, где будут стены, окна, двери и даже таинственные туннели (это ссылки!).
Давайте начнем с создания самого простого чертежа для каждой страницы. Этот чертеж всегда выглядит одинаково и помогает браузеру понять, что это за страница.
Стандартная структура HTML:
<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>
<!-- Здесь будет содержимое страницы -->
</body>
</html>
Эта структура состоит из тегов. Каждый тег – это как команда, которую вы говорите браузеру, чтобы он знал, как показать вашу страницу.
Тег <body> используется для определения основного содержимого вашей веб-страницы. Все, что находится внутри тега <body>, отображается на самой странице в браузере.
Чуть позже мы разберем больше тегов.
Теперь, когда у нас есть базовый чертеж, мы готовы перейти к созданию нашей первой веб-страницы!
Создание первой веб-страницы:
Первое, что мы должны сделать, это создать файл с разрешением HTML.
Как это сделать я писал тут.
В созданный документ вставим ранее указанный каркас. Основное содержимое страницы находится в теге <body>.
В него предлагаю засунуть две фразы: "Привет, мир!" и "Это моя первая веб-страница с использованием HTML."
<body>
<h1>Привет, мир!</h1>
<p>Это моя первая веб-страница с использованием HTML.</p>
</body>
Итоговый код будет выглядеть вот так:
<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это моя первая веб-страница с использованием HTML.</p>
</body>
</html>
Выглядеть получившейся страница будет вот так:
Как вы можете заметить "Привет, мир!" больше, чем "Это моя первая веб-страница с использованием HTML.". Это связано с тегами.
Разберем самые основные теги в HTML.
- <body>: Содержит основное содержимое документа, такое как текст, изображения, ссылки и другие элементы.
- <h1> - <h6>: Заголовки разных уровней, где <h1> - самый крупный, а <h6> - самый мелкий.
- <p>: Определяет абзац текста.
- <a>: Создает ссылку на другую страницу или ресурс.
- <img>: Вставляет изображение на страницу.
- <ul>: Создает маркированный список.
- <ol>: Создает нумерованный список.
- <li>: Элемент списка внутри <ul> или <ol>.
- <table>: Создает таблицу.
- <tr>: Определяет строку в таблице.
- <td>: Определяет ячейку данных в таблице.
- <th>: Определяет заголовок ячейки в таблице.
- <form>: Определяет форму для ввода данных.
- <input>: Определяет элемент ввода, такой как текстовое поле или кнопка.
- <button>: Создает кнопку.
Это разумеется только малая часть всех тегов.
Так что держите этот набор тегов в руках, как набор инструментов для создания своих веб-ресурсов! Помните, что веб-разработка – это увлекательное путешествие, и каждый из этих тегов открывает перед вами новые возможности для творчества и самовыражения.
Теперь, когда вы освоили базовые понятия HTML и создали свою первую веб-страницу, предстоит многое еще узнать и изучить.