Загрузка
UP

Основы HTML и создание веб-страниц

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

2.1 Что такое HTML?

Учитель объясняет, что 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>

На этом этапе учитель показывает, как структура веб-страницы начинается с тега <!DOCTYPE html>, за которым следуют теги <html>, <head>, <title>, <body>, и что каждый тег должен закрываться соответствующим закрывающим тегом (например, <h1></h1>).

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

Учитель должен подробно рассмотреть основные теги HTML, объясняя их назначение и использование:

  1. Теги заголовков (<h1>, <h2>, … <h6>): используются для создания заголовков разного уровня на веб-странице.
    html
    <h1>Заголовок первого уровня</h1>
    <h2>Заголовок второго уровня</h2>
  2. Теги абзацев (<p>): используются для написания текста на странице.
    html
    <p>Это пример текста в абзаце.</p>
  3. Теги изображений (<img>): вставляют изображения на страницу. Объясняется, как использовать атрибуты src (источник изображения) и alt (текст, если изображение не загружается).
    html
    <img src=”example.jpg” alt=”Пример изображения”>
  4. Теги ссылок (<a>): создают гиперссылки на другие страницы или ресурсы.
    html
    <a href=”https://example.com”>Посетите наш сайт</a>
  5. Теги списков (<ul>, <ol>, <li>): для создания ненумерованных и нумерованных списков.
    html
    <ul>
    <li>Элемент списка 1</li>
    <li>Элемент списка 2</li>
    </ul>

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

Учитель объясняет важность правильной структуры HTML-документа. Рассматриваются основные элементы:

  • Тег <head> — содержит метаинформацию о веб-странице (например, кодировка, заголовок страницы).
  • Тег <body> — содержит видимую часть страницы, где размещается контент.

Ученики учатся различать элементы, которые находятся в <head>, такие как <meta> и <title>, от тех, которые находятся в <body>, где происходит основное взаимодействие с пользователем.

2.4 Создание первой веб-страницы

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

Пример задания:

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

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>
<img src=”image.jpg” alt=”Изображение”>
<a href=”https://example.com”>Перейти на другой сайт</a>
</body>
</html>

2.5 Основы стилизации с CSS

Учитель упоминает, что внешний вид веб-страницы можно изменять с помощью CSS (Cascading Style Sheets). Хотя основное внимание уделяется HTML, ученикам дают простейшие примеры, как можно изменить цвет текста или фона.

html
<style>
body {
background-color: lightblue;
}
h1 {
color: darkblue;
}
</style>

2.6 Практическое задание

  1. Создать страницу с несколькими заголовками, абзацами, изображением и списком.
  2. Добавить на страницу ссылки на другие страницы.
  3. Изменить внешний вид страницы с помощью базовых стилей CSS.

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