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

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

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

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

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

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

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

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

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

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

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

11

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

13

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

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

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

17

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

19

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

21

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

23

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

25

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

27

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

29

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

31

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

33