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

Тема: Структура на HTML документ. Мета тагове.

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

1. Структура на HTML документ

HTML документът е текстов файл с разширение .html, който браузърът чете и визуализира като уеб страница. Всяка страница има еднаква основна структура: началната декларация, главният елемент html, който съдържа две части – head и body.

  • <!DOCTYPE html> указва, че документът е HTML5; <html lang="bg"> обхваща цялата страница и задава езика ѝ
  • <head> съдържа информация за страницата и заглавието <title> (показва се в раздела на браузъра); <body> съдържа видимото съдържание
<!DOCTYPE html>
<html lang="bg">
<head>
  <title>Заглавие на страницата</title>
</head>
<body>
  <h1>Видимо съдържание</h1>
</body>
</html>

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

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

  • <meta charset="UTF-8"> задава кодиране, при което кирилицата се показва правилно; <meta name="viewport" content="width=device-width, initial-scale=1.0"> приспособява страницата към ширината на екрана
  • Двойката name и content описава информацията: <meta name="description" content="Кратко описание"> и <meta name="author" content="Име Фамилия">
Мета таговете се поставят в head, а meta charset е най-добре да бъде първият елемент в него.

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

Тема: Структура на HTML документ. Мета тагове.

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

Условие 1: Създайте файл index.html за начална страница на онлайн магазина „ТехноШоп“. Файлът трябва да има пълна и правилна структура на HTML документ.

  • Запишете DOCTYPE, елемент html с lang="bg", head със заглавие „ТехноШоп – начална страница“ и body
  • В body добавете заглавие h1 с текст „Добре дошли в ТехноШоп“ и абзац p с текст „Продаваме лаптопи, телефони и аксесоари с доставка в цялата страна.“

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

  • Добавете мета тагове за кодиране UTF-8, за viewport, за описание със съдържание „Онлайн магазин за лаптопи, телефони и аксесоари.“ и за автор с вашето име
  • Отворете файла в браузър и проверете дали кирилицата се показва правилно и дали заглавието „ТехноШоп – начална страница“ се вижда в раздела на браузъра

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

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

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

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

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

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