ОбразованиеУчи по-лесно.
Моят профил Моят напредък Настройки
Изход
Назад към темите

Тема: Същност на езика. Структура на HTML документ. Мета тагове

1. Теоретична част

ПРОФЕСИОНАЛНА ДЪРЖАВСКА ТЪРГОВСКА ГИМНАЗИЯ „ДИМИТЪР ХАДЖИВАСИЛЕВ“ – СВИЩОВ
УЧЕБНА ПРАКТИКА

1. Същност на HTML и структура на HTML документ

HTML (HyperText Markup Language) е език за маркиране, който описва структурата и съдържанието на уеб страница чрез тагове. Браузърът чете HTML файла и показва страницата според тези тагове. Всеки HTML документ има ясно определена структура.

  • Основни части: <!DOCTYPE html> (версия на документа), <html lang="bg"> (корен на документа), <head> (информация за страницата) и <body> (видимото съдържание).
  • Таговете обикновено са двойки (<p>…</p>) и могат да имат атрибути, например lang="bg". Заглавието в раздела на браузъра се задава с <title> в <head>.

2. Мета тагове

Мета таговете са в раздела <head> и не се виждат на страницата. Те дават на браузъра и на търсачките информация за самия документ. Тагът <meta> е единичен и няма затварящ таг.

  • <meta charset="UTF-8"> задава кодирането на знаците и е нужен, за да се показва правилно кирилицата.
  • <meta name="description" content="…"> задава кратко описание на страницата. По същия начин се записват name="author" и name="viewport" със стойност width=device-width, initial-scale=1.0, която настройва страницата за мобилни устройства.

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

Време за работа: 35 минути

Условие 1: Създайте основата на уеб страница за кафене „Роза“. Използвайте текстов редактор (Notepad++ или Visual Studio Code) и запишете файла като index.html.

  • Напишете пълната структура на HTML документ: <!DOCTYPE html>, <html lang="bg">, <head> и <body>. В <head> добавете заглавие <title>Кафене Роза – Начало</title>.
  • В <body> добавете заглавие <h1>Добре дошли в кафене „Роза“</h1> и два абзаца <p>: единият с адреса „Свищов, ул. Цар Освободител 10“, другият с работното време „Всеки ден от 08:00 до 20:00 ч.“.

Условие 2: Допълнете раздела <head> на страницата с мета тагове и проверете резултата в браузър.

  • Добавете мета тагове за кодиране UTF-8, за описание („Кафене Роза – напитки, десерти и закуски в центъра на Свищов“), за автор (вашето име) и за viewport със стойност width=device-width, initial-scale=1.0.
  • Запишете файла в кодиране UTF-8 и го отворете в браузър. Проверете дали кирилицата се показва правилно и дали заглавието се вижда в раздела на браузъра.

Цел: Учениците упражняват писането на правилна структура на HTML документ и използването на мета тагове в <head>. След задачата те трябва да могат да създадат и проверят в браузър проста страница с кирилица.

3. Критерии за оценяване

Критерий Точки
1. Спазване на правилата за здравословни и безопасни условия на труд и опазване на околната среда 10 т.
2. Ефективна организация на работното място 10 т.
3. Спазване на технологичната последователност на операциите според индивидуалното задание  
3.1 Изградена е пълна структура на HTML документ (DOCTYPE, html с lang, head, title, body) 20 т.
3.2 Съдържанието на body е правилно: заглавие h1 и два абзаца с посочените данни 20 т.
3.3 Добавени са четирите мета тага (charset, description, author, viewport) в раздела head 20 т.
3.4 Файлът е записан като index.html в UTF-8, отваря се в браузър, кирилицата се показва правилно и няма синтактични грешки 20 т.
Общо: 100 т.

4. Оценъчна скала

Оценка Точков диапазон
Отличен (6) 90–100 т.
Много добър (5) 80–89 т.
Добър (4) 70–79 т.
Среден (3) 60–69 т.
Слаб (2) под 60 т.

Изготвил: Цветелин Борисов