4.3. Основы сайтостроения

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

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

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

`) и закрывающий (`

`).

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

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

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

Теги служат строительными блоками HTML. Каждый тег выполняет определенную функцию. Например, тег `

` обозначает абзац текста, тег `

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

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

Тег `

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

Тег `

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

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

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

Разбор задач

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

1. Начните с создания структуры HTML-документа: `<!DOCTYPE html><html><head><title>Моя страница</title></head><body>...</body></html>`.
2. Добавьте заголовок первого уровня, используя тег ``: `<h1>Привет, мир!</h1>`.
3. Добавьте абзац текста, используя тег `

   `: `<p>Это мой первый веб-документ.</p>`.

4. Закройте все теги: `</body>`, `</html>`.

Ответ:

<!DOCTYPE html><html><head><title>Моя страница</title></head><body><h1>Привет, мир!</h1><p>Это мой первый веб-документ.</p></body></html>

Задача 2: Создать гиперссылку на веб-сайт example.com.

1. Используйте тег `` для создания гиперссылки.
2. Укажите URL-адрес веб-сайта в атрибуте `href`: `href="https://example.com"`.
3. Текст ссылки будет отображаться как гиперссылка.

Ответ:

<a href="https://example.com">Перейти на example.com</a>

Задача 3: Изменить цвет текста абзаца на красный.

1. Добавьте атрибут `style` к тегу `

   `.

2. Внутри атрибута `style` укажите свойство `color: red;`.

Ответ:

<p style="color: red;">Это абзац красного цвета.</p>

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

Неправильное вложение тегов: Это одна из самых распространенных ошибок. Например, нельзя закрыть тег `

` раньше, чем закроете тег `

`. Неправильное вложение приводит к непредсказуемому отображению страницы.

Отсутствие закрывающих тегов: Браузеры могут пытаться «угадать», где должен быть закрывающий тег, но это может привести к ошибкам. Всегда закрывайте теги, особенно парные.

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

Опечатки в тегах и атрибутах: Малейшая опечатка может привести к тому, что браузер не сможет правильно интерпретировать код. Внимательно проверяйте код на наличие опечаток.

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

Основы программирования: Понимание концепций переменных, операторов и логических конструкций может помочь вам лучше понять, как работают веб-страницы и как их можно модифицировать.

Веб-технологии: CSS и JavaScript: HTML отвечает за структуру, CSS – за внешний вид, а JavaScript – за поведение веб-страницы. Изучение CSS и JavaScript позволит вам создавать более сложные и интерактивные веб-страницы.

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

• HTML - это язык разметки, а не язык программирования.
• Каждый HTML-элемент должен быть правильно открыт и закрыт.
• Атрибуты используются для уточнения свойств HTML-элементов.
• Тег <html> является корневым элементом HTML-документа.
• Тег <head> содержит метаинформацию о странице.
• Содержимое страницы должно располагаться внутри тега <body>.
• Правильная структура HTML-документа необходима для корректной работы веб-страниц.