Создаём первую web-страницу.

Определения и обозначения

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

Тег – это команда языка HTML, которая указывает браузеру, как отобразить определенный элемент веб-страницы. Теги обычно парные: есть открывающий тег (например, `

`) и закрывающий тег (например, `

`). Браузер использует теги, чтобы понять, что является заголовком, абзацем, изображением и т.д.

Атрибут – это дополнительная информация, предоставляемая в открывающем теге, для уточнения характеристик элемента. Например, в теге `` атрибут `src` указывает путь к файлу изображения. Атрибут помогает браузеру лучше понять, как отображать элемент.

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

Как это устроено

Web-страницы не отображаются сразу в том виде, в котором вы их видите. Сначала вы работаете с текстовым кодом, написанным на HTML. Этот код отправляется на сервер, а затем браузер получает этот код и преобразует его в визуальное представление. Этот процесс называется рендерингом.

Чтобы понять, как работают веб-страницы, важно создать простой HTML-документ. Это позволит вам увидеть, как теги и атрибуты влияют на отображение страницы. Начните с базовой структуры, постепенно добавляя новые элементы и экспериментируя с разными тегами.

Основными элементами HTML-документа являются открывающий тег ``, теги `

` и ``. Тег `` указывает браузеру, что это HTML-документ. Тег `` содержит метаинформацию о странице, такую как заголовок, кодировка и стили. Эта информация не отображается на самой странице.

Тег `

` играет важную роль в хранении метаинформации. Самым важным элементом внутри `` является тег ``, который определяет заголовок веб-страницы, отображаемый во вкладке браузера. Он помогает пользователям идентифицировать страницу и улучшает SEO (оптимизацию для поисковых систем).

Тег `

` содержит все видимое содержимое веб-страницы. Внутри `` находятся текст, изображения, ссылки, таблицы и другие элементы, которые видит пользователь. Все, что вы хотите отобразить на странице, должно быть помещено внутрь тега ``.

Основные HTML-теги

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

Разбор задач

Задача 1: Создайте HTML-документ, отображающий заголовок 'Добро пожаловать!' и абзац текста 'Это моя первая веб-страница'.

1. Начните с базовой структуры HTML: <html><head><title>Заголовок</title></head><body></body></html>
2. Внутри тега `` добавьте тег `` с текстом 'Добро пожаловать!': <title>Добро пожаловать!</title>
3. Внутри тега `` добавьте заголовок первого уровня `` с текстом 'Добро пожаловать!' и абзац `

   ` с текстом 'Это моя первая веб-страница': <h1>Добро пожаловать!</h1><p>Это моя первая веб-страница.</p>

4. Сохраните файл с расширением .html (например, index.html) и откройте его в браузере.

Ответ:

<html><head><title>Добро пожаловать!</title></head><body><h1>Добро пожаловать!</h1><p>Это моя первая веб-страница.</p></body></html>

Задача 2: Добавьте заголовок второго уровня (h2) с текстом 'О программе'.

1. Внутри тега `` добавьте тег `

   ` с текстом 'О программе': <h2>О программе</h2>. Разместите его, например, после абзаца с текстом 'Это моя первая веб-страница'.

Ответ:

<html><head><title>Добро пожаловать!</title></head><body><h1>Добро пожаловать!</h1><p>Это моя первая веб-страница.</p><h2>О программе</h2></body></html>

Задача 3: Измените заголовок страницы (в `

`) так, чтобы он отображал 'Моя первая страница'.

1. Внутри тега `` измените текст внутри тега `` с 'Добро пожаловать!' на 'Моя первая страница': <title>Моя первая страница</title>

Ответ:

<html><head><title>Моя первая страница</title></head><body><h1>Добро пожаловать!</h1><p>Это моя первая веб-страница.</p><h2>О программе</h2></body></html>

Типичные ошибки

Забывание закрывающих тегов: Если вы забыли закрывающий тег, браузер может неправильно интерпретировать HTML-код и отобразить страницу некорректно. Проверяйте каждый открывающий тег на наличие соответствующего закрывающего.

Неправильное вложение тегов: Теги должны быть правильно вложены друг в друга. Например, нельзя писать <p></p></p>, правильно будет <p>Текст</p>. Неправильное вложение может привести к неожиданным результатам.

Ошибки в атрибутах: Неправильное написание атрибутов или их значений может привести к непредсказуемому поведению. Например, <img scr='image.jpg'> (ошибка в `src`). Убедитесь, что атрибуты написаны правильно и значения заключены в кавычки.

Использование устаревших тегов: Некоторые теги уже не рекомендуется использовать, так как существуют более современные альтернативы. Постарайтесь использовать актуальные теги, чтобы ваш код был совместим с современными браузерами.

Связь с другими темами

Для полноценной работы с веб-страницами необходимо понимать основы работы с текстовыми редакторами. Вам нужно уметь создавать, редактировать и сохранять файлы с расширением .html.

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

Что запомнить

• HTML – это язык разметки, а не язык программирования.
• Основная структура HTML-документа: <html><head><title>Заголовок</title></head><body>Содержимое</body></html>.
• Теги обычно парные: открывающий и закрывающий.
• Атрибуты добавляют дополнительную информацию к тегам.
• Веб-браузер интерпретирует HTML-код и отображает веб-страницу.
• Отступы в HTML-коде не влияют на отображение, но делают его более читаемым.