Инструментальные средства создания электронных образовательных ресурсов План лекции 1 Общее представление о языке HTML. Подготовка к созданию HTML-документа. Основные теги языка HTML: оформление текста, вставка рисунков.

Общее представление о языке гипертекстовой разметки HTML Основным форматом представления документов в сети Интернет является язык гипертекстовой разметки HTML. Некорректно называть HTML языком программирования, поскольку по своим возможностям HTML далек от реализации основных команд программирования. HTML – это определенная совокупность правил (тегов), по которым оформляется документ. Теги показывают Интернет-браузеру, как следует отображать текст на Web-страничке. Теги всегда используются в паре: открывающий и закрывающий. Структура тега (пары тегов) всегда такова: … Теги могут содержать атрибуты, характеризующие отображение информации внутри тега.

Текстовый файл обязательно должен иметь расширение.html

Структура HTML-документа Начало – конец HTML-документа Начало – конец заголовка документа Начало – конец тела документа Название документа

Структура документа Основным тегом языка HTML является тег (пара тэгов) … Они обозначают, что находящиеся между ними строки представляют единый HTML-документ. Это важно, так как сам по себе документ является обыкновенным текстовым файлом в формате ASCII. Без этих тегов ни один Интернет- браузер не в состоянии идентифицировать формат документа и правильное его интерпретировать. Примечание: обязательно указывать не только открывающий, но и закрывающий теги.

Следующим тегом, который относится к разметке структуры документа, является тег заголовка документа … Задача заголовка документа – предоставление необходимой информации для программы, интерпретирующей документ. Элементы находящиеся внутри заголовка (кроме ) не отображаются на экране во время просмотра документа.

Раздел … является единственным обязательным элементом заголовка и служит для того,чтобы дать документу название, которое будет отображаться в заголовке окна браузера. Название документа представляет собой обычную текстовую строку, которая характеризует содержание документа в целом. Примечание: не стоит путать между собой название документа и название файла документа, эти элементы не зависят друг от друга.

Тег … содержит тело документа, которое отображается браузером на экране. Этот тег имеет несколько параметров. Некоторые из них: bgcolor – цвет фона документа background – указывает путь к графическому файлу, который будет использован в качестве фона документа. Например, Примечание: если параметры цвета фона у данного тега не указаны, то фон документа будет белым.

В HTML цвета можно задавать непосредственно названиями, а можно в шестнадцатеричной форме. Цветовая схема базируется на трех основных цветах RGB. Для каждого направления задается шестнадцатеричное значение от 00 до FF. Затем эти числа объединяются в одно число, перед которым ставится символ #. Например, число # обозначает фиолетовый цвет. Изменяя значения шестнадцатеричного числа, можно подобрать требуемый цвет.

Форматирование текста Установка абзаца HTML предполагает, что автор документа ничего не знает о компьютере пользователя. Пользователь вправе установить любой размер окна и пользоваться любым из имеющихся у него шрифтов. Это означает, что место переноса в строке определяется только программой просмотра и установками конечного пользователя. Для разбиения текста на абзацы используется тег … Для начала абзаца следует разместить тег в начало строки абзаца. Данный тег имеет большое значение при стилевом оформлении документа.

Тег абзаца имеет важный параметр align Данный параметр может иметь три значения: left – выравнивание текста по левой границе окна браузера; right –выравнивание текста по правой границе окна браузера; center -выравнивание текста по центру окна браузера. По умолчанию действует параметр left.

Шрифты Одной из важных возможностей HTML является полный контроль облика создаваемого документа, в том числе управление шрифтами. На практике тип выводимых шрифтов сильно зависит от программно-аппаратного обеспечения компьютера пользователя. Однако для HTML-документов проблема значительно облегчается тем, что на всех машинах сети должен быть установлен стандартный набор шрифтов. Обычно это Verdana, Arial, Times New Roman. Для работы со шрифтами используется тег …

Тег font имеет следующие параметры size Служит для указания размера шрифта в условных единицах от 1 до 7. Принято считать, что размер «нормального» шрифта соответствует числу 3. Например, Размер шрифта равен 4

Параметр color Устанавливает цвет шрифта, который может быть указан как в формате RGB, так и стандартным именем. Например, Цвет шрифта - желтый

Заголовки Заголовки имеют важное значение в структурировании HTML-документа и являются одними из самых употребляемых в языке разметки текста. Их назначение – показать структуру документа. HTML располагает шестью уровнями заголовков. … Самый верхний уровень, нижний -. Все эти теги также имеют параметр align.

Дополнительные теги по оформлению текста … - начало-конец оформления фрагмента текста курсивом; … - начало-конец оформления фрагмента текста более жирным начертанием; … - начало-конец оформления фрагмента текста подчеркиванием.

Перевод строки Для того, чтобы перейти на новую строку в любом месте текущей строки, в HTML существует тэг разрыва строки Этот тег заставляет программу просмотра выводить стоящие после него символы с новой строки. В отличие от тэга абзаца, тэг не добавляет пустую строку и не имеет закрывающего тэга.

Разделительные линии Еще одним методом разделения документа является использование разделительных линий. Для проведения такой линии в теле документа используется тег Тег обладает следующими параметрами: align – выравнивание линии; width –длина линии (может устанавливаться в %); size –ширина линии (в пикселах); color - цвет линии.

Перевод текста в верхний / нижний регистр Для перевода фрагмента текста в верхний регистр используется тег … … Для перевода фрагмента текста в нижний регистр используется тег … …

Вставка изображений в документ Существует достаточно много форматов графических документов: GIF, BMP, JPEG (JPG), PCX, WMF и др. Однако при оформлении HTML-документа лучше ограничиться двумя: GIF, JPEG, поскольку их понимает большинство современных программ просмотра (Internet Explorer, Netscape Navigator, Opera и др.). Для вставки изображения в тело документа используется тег Этот тег одинарный, он не имеет закрывающего тега. Его основной параметр: src – путь к файлу с изображением.

Обтекание текстом изображения По умолчанию после вставки изображения следующая строка оказывается после рисунка. Если есть необходимость, чтобы текст обтекал рисунок, можно воспользоваться параметром align для тега.

Принудительное выравнивание по центру В некоторых случаях возникает необходимость выровнять объект по центру документа, но либо объект не обладает свойством align, либо значение align=center отображается некорректно. В этих случаях используют тег принудительного выравнивания по центру … …