На уроке у Нины Дмитриевны
Находки Ольги Сергеевны
На этой странице:
При работе с материалом рекомендуется использовать две опорные схемы, на которых скелетно изложены основы HTML-кодирования.
Гипертекстовый документ кодируется на языке HTML и отображается на экране при помощи браузера. Код гипертекстового документа сохраняется в файле с расширением htm (или html).
Объекты документа описываются на языке HTML при помощи элементов. Элемент задаётся одиночным или парным тегом.
Элементы разделяются на блочные и строчные.
Блочный элемент занимает на экране прямоугольную область по всей ширине блока-родителя (пример: горизонтальная линия). Строчный элемент записывает внутри строки и переносится на следующие строки, если в текущей нет места. До и после строчного элемента перевод строки не выполняется (пример: фрагмент текста, написанный курсивом).
Тег — это средство для описания элементов. Элемент может быть описан одиночным тегом (открывающим) или парным (открывающим и закрывающим). Элемент может содержать атрибуты, в которых указываются свойства объекта. Атрибуты записываются в открывающем теге.
Важно добиться понимания терминологических различий в понятиях объект, элемент и тег.
Объект — это часть документа, представленного в окне браузера. Пользователь загружает гипертекстовый документ и видит на экране его объекты: заголовки, абзацы, рисунки…
Элемент — это конструкция языка для описания объекта гипертекстовой страницы.
Тег — средство языка для построения элемента. Элемент может задаваться как одним тегом, так и парой, между которыми располагается текст и (или) другие элементы.
Элемент, описываемый парой тегов, похож на сэндвич — между двумя кусочками хлеба (открывающим и закрывающим тегами) расположена начинка — содержимое элемента. Так, теги <P> и </P> обозначают границы абзаца, текст абзаца располагается между ними.
И теги и элементы — конструкции языка HTML, но тег — более мелкая строительная единица. Теги используются для построения элементов по одному из двух правил.
На этой схеме представлен шаблон, по которому строится код гипертекстовой страницы на языке HTML. Следует обратить внимание учеников на элемент TITLE задающий заголовок окна — правила дизайна рекомендуют обязательно использовать этот элемент в коде страницы и включать в него заголовок страницы (или заголовок сайта на главной странице).
Прямые потомки BODY — блочные элементы. Даже если записать строчный элемент, браузер автоматически вложит его в блочный безымянный элемент, который специально построит. Внутри блоков, расположенных в BODY могут быть строчные, блочные элементы или смесь из блочных и строчных.
Если в блоке разработчик расположил смесь из блочных и строчных элементов, браузер автоматически каждый строчный элемент погружает в специально построенный безымянный блок.
При построении HTML-кода очень важно (как при любом программировании) уделять внимание не только внешнему виду продукта, но и виду кода, то есть необходимо следить за стилем кодирования, правила которого с обоснованиями изложены в Читальном зале.
Очень кратко эти рекомендации можно сформулировать так:
Пример заполненного альбома (заполнена страничка Петра Мячикова)
