На уроке у Нины Дмитриевны
Находки Ольги Сергеевны

На этой странице:

- Методические комментарии
  - Опорные схемы
  - Стиль записи кода
- Ответы на вопросы
- Решения зачётных классов
- Ответы на задания практикумов
- Проект

## Методические комментарии

### Опорные схемы

При работе с материалом рекомендуется использовать две опорные схемы, на которых скелетно изложены основы HTML-кодирования.

#### Схема 1 “Гипертекстовый документ”

Гипертекстовый документ кодируется на языке HTML и отображается на экране при помощи браузера. Код гипертекстового документа сохраняется в файле с расширением htm (или html).

Объекты документа описываются на языке HTML при помощи элементов. Элемент задаётся одиночным или парным тегом.

Элементы разделяются на блочные и строчные.

Блочный элемент занимает на экране прямоугольную область по всей ширине блока-родителя (пример: горизонтальная линия). Строчный элемент записывает внутри строки и переносится на следующие строки, если в текущей нет места. До и после строчного элемента перевод строки не выполняется (пример: фрагмент текста, написанный курсивом).

Тег — это средство для описания элементов. Элемент может быть описан одиночным тегом (открывающим) или парным (открывающим и закрывающим). Элемент может содержать атрибуты, в которых указываются свойства объекта. Атрибуты записываются в открывающем теге.

Важно добиться понимания терминологических различий в понятиях объект, элемент и тег.

Объект — это часть документа, представленного в окне браузера. Пользователь загружает гипертекстовый документ и видит на экране его объекты: заголовки, абзацы, рисунки…

Элемент — это конструкция языка для описания объекта гипертекстовой страницы.

Тег — средство языка для построения элемента. Элемент может задаваться как одним тегом, так и парой, между которыми располагается текст и (или) другие элементы.

Элемент, описываемый парой тегов, похож на сэндвич — между двумя кусочками хлеба (открывающим и закрывающим тегами) расположена начинка — содержимое элемента. Так, теги `<P>` и `</P>` обозначают границы абзаца, текст абзаца располагается между ними.

И теги и элементы — конструкции языка HTML, но тег — более мелкая строительная единица. Теги используются для построения элементов по одному из двух правил.

1. Элемент совпадает с тегом `<ИМЯ>` (пример: `<HR>`).
2. Элемент строится по формуле `<ИМЯ>`тело`</ИМЯ>`, где тело содержит текст и (или) другие элементы (пример: `<H1>`Первый HTML-документ`</H1>`).

#### Схема 2 “HTML-программа”

На этой схеме представлен шаблон, по которому строится код гипертекстовой страницы на языке HTML. Следует обратить внимание учеников на элемент `TITLE` задающий заголовок окна — правила дизайна рекомендуют обязательно использовать этот элемент в коде страницы и включать в него заголовок страницы (или заголовок сайта на главной странице).

Прямые потомки `BODY` — блочные элементы. Даже если записать строчный элемент, браузер автоматически вложит его в блочный безымянный элемент, который специально построит. Внутри блоков, расположенных в `BODY` могут быть строчные, блочные элементы или смесь из блочных и строчных.

Если в блоке разработчик расположил смесь из блочных и строчных элементов, браузер автоматически каждый строчный элемент погружает в специально построенный безымянный блок.

### Стиль записи кода

При построении HTML-кода очень важно (как при любом программировании) уделять внимание не только внешнему виду продукта, но и виду кода, то есть необходимо следить за стилем кодирования, правила которого с обоснованиями изложены в Читальном зале.

Очень кратко эти рекомендации можно сформулировать так:

- Лесенка (только на блочных элементах)
- Теги большие, атрибуты маленькие
- Строчные элементы с первой позиции
- Короткие строки

## Ответы на вопросы

- 01. Простейшая HTML-страничка
- 02. Структура HTML-кода
- 03. Как работает браузер
- 04. Улучшенная HTML-страничка
- 05. Структура и вид документа
- 06. Атрибуты тегов
- 07. Цвет фона и цвет шрифта
- 08. Оформление текста
- 09. Кодирование списков
- 10. Стиль записи кода

## Решения зачётных классов

- 02. Структура HTML-кода
- 04. Улучшенная HTML-страничка
- 08. Оформление текста
- 09. Кодирование списков

## Ответы на задания практикумов

- 02. Структура HTML-кода (решения в каталоге `./work/unit09/0902/`)
  - Задание 1. Первый документ
  - Задание 2. Понедельник начинается в субботу
- 04. Улучшенная HTML-страничка (решения в каталоге `./work/unit09/0904/`)
  - Задание 1. Малая песня
  - Задание 2. Мастер и Маргарита
- 08. Оформление текста (решения в каталоге `./work/unit09/0908/`)
  - Задание 1. Выделения в тексте
  - Задание 2. Выделения в тексте
  - Задание 3. Выделения в тексте
  - Задание 4. Выравнивание
  - Задание 5. Выравнивание
  - Задание 6. Специальные символы
  - Задание 7. Специальные символы
- 09. Кодирование списков (решения в каталоге `./work/unit09/0909/`)
  - Задание 1. Маркированный список
  - Задание 2. Нумерованный список
  - Задание 3. Вложенный список
- 10. Стиль записи кода (решения в каталоге `./work/unit09/0910/`)
  - Задание 1. Незнайка в Солнечном городе
  - Задание 2. Герцогиня собирается на вечерний крокет
  - Задание 3. День рождение Иа-Иа
  - Задание 4. Боязнь простоты
- 11. Тестирование и отладка (решения в каталоге `./work/unit09/0911/`)
  - Задание 1. Телеграммы О. Бендера
  - Задание 2. Таблички на пароходе “Скрябин”
  - Задание 3. Петька прыгает вниз
  - Задание 4. Заголовок окна

Пример заполненного альбома (заполнена страничка Петра Мячикова)

вверх