Класс HTML/CSS. Разбивка урока 1

Урок 1: Обзор базового HTML и введение в расширенные элементы HTML

Цель:

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

1. Введение в структуру HTML

Начните с краткого объяснения того, как HTML организует содержимое веб-страницы с помощью тегов. Подчеркните, что HTML (язык гипертекстовой разметки) используется для структурирования веб-страниц, а CSS — для стилизации.

Ключевые концепции для рассмотрения:

• , , : объясните, что каждый HTML-документ имеет определенную структуру:
  • : корневой элемент, охватывающий всю веб-страницу.
  • : содержит метаинформацию, такую ​​как заголовок, ссылки на CSS, скрипты и т. д.
  • : содержит весь видимый контент, такой как текст, изображения и элементы, с которыми взаимодействуют пользователи.

2. Краткое описание основных тегов HTML

• Заголовки (от

  до

  ):

  Объясните, что заголовки структурируют контент иерархически, от самого большого (

  ) до самого маленького (

  ).

Пример:

    
Main Heading
    
Sub Heading

• Абзацы (

  ):

  Используется для определения блоков текста или абзацев.

Пример:

    
This is a paragraph.

• Якоря (Click here
  • Изображения (): Используется для отображения изображений. Объясните атрибут src для ссылки на файл изображения и alt для доступности.

  Пример:
  

  3. Введение в промежуточные элементы HTML

  3.1. Формы (, , )

  • Формы используются для сбора данных, введенных пользователем.

  • Базовая структура формы:

    • :
      Контейнер для элементов формы. Может включать такие атрибуты, как действие (куда отправляются данные формы) и метод (GET/POST).
    • : Определяет метку для элементов ввода и улучшает доступность.
    • : Определяет различные типы полей ввода, такие как текст, пароль, флажок, радио и т. д.

  Пример простой формы с вводом текста:
  

  Name: Email:

  3.2. Списки (

  ,
  ,
  1. )
  • Неупорядоченные списки (
    )
    и Упорядоченные списки (
    )
    помогают организовать данные в виде маркированных или нумерованных списков.
  • Элементы списка (
  • )
  определяют каждый элемент в списке.

  Пример неупорядоченного и упорядоченного списка:
  

  • Item 1
  • Item 2
  1. Step 1
  2. Step 2

  3.3. Таблицы (

  , ,

  ,

  ) Таблицы позволяют отображать структурированные данные в строках и столбцах. : контейнер для таблицы. : определяет строку в таблице. : определяет ячейку в таблице. : определяет ячейку заголовка в таблице (необязательно). Пример простой таблицы: Name Age John 25 4. Занятия в классе 4.1. Резюме активности: Поручите учащимся создать базовую веб-страницу, которая включает в себя: Заголовок ( ) Абзац ( ) Изображение () Пример: Welcome to My Website This is my first webpage. 4.2. Упражнение с инструкциями: Создайте простую форму. Познакомьте учащихся с созданием простой формы для сбора вводимых пользователем данных (имени и адреса электронной почты). Включите , и . 4.3. Списки и таблицы: Поручите учащимся создать неупорядоченный список ( ) их любимых вещей и простую таблицу с несколькими строками данных (имя, возраст, любимый цвет). Пример: Reading Coding Traveling Name Age Alice 30 5. Домашнее задание Студентам следует расширить свою веб-страницу следующим образом: Добавление элементов формы, таких как флажки, переключатели и кнопка отправки. Настройка формы для сбора дополнительной информации о пользователе (например, пол, хобби). Пример: Gender: Male Female 6. Дополнительные советы Предлагайте учащимся проверять свой HTML-код с помощью таких инструментов, как служба проверки разметки W3C. Объясните важность семантического HTML и почему использование правильных тегов важно для доступности и SEO. Краткое содержание Студенты рассмотрят основные теги HTML, такие как заголовки, абзацы, изображения и ссылки. Они познакомятся с элементами HTML среднего уровня: формами, списками и таблицами. Практические упражнения и домашние задания дадут им практический опыт создания более структурированной веб-страницы.