Информационные системы ускорителей

Л/р № 2 Форматирование текста. Графика в HTML.

Начиная лабораторную работу № 2, не забудьде создать для нее отдельный каталог.

Обычный HTML-документ обычно состоит написанных мелким шрифтом текстовых абзацев, предшествующих им более крупных заголовков графических изображений (картинок). В этом можно убедиться просматривая находящийся перед вами HTML-документ.

Заголовки в HTML документах

В HTML документах предусмотрено 6 типов заголовков. Самый крупный определяется дескрипторами <H1>...</H1>, а самый мелкий дескрипторами <H6>...</H6>. Для каждого из дескриптора заголовка допускается атрибут выравнивания текста ALIGN, который может принимать следующие значения:

  • ALIGN=LEFT вырвнивает заголовок по левому краю;
  • ALIGN=RIGHT вырвнивает заголовок по правому краю;
  • ALIGN=CENTER располагает заголовок по центру;
  • ALIGN=JUSTIFY выравнивает заголовок по ширине текста, выравнивая его по левому и правому краю, если длина заголовка более одной строки. Если длина заголвка менее одной строки, то выравнивание аналогично ALIGN=LEFT.
Если атрибут ALIGN не указывается, это равнозначно ALIGN=LEFT.

Текстовые абзацы

Для выделения абзацев в HTML документах служат дескрипторы <P>...</P>. В абзаце текст автоматически распределяется по строкам, поэтому заботиться о переносе строк не требуется. Для дескриптора <P> (так же, как и для заголовков) предусмотрен атрибут ALIGN:

  • ALIGN=LEFT вырвнивает текст абзаца по левому краю;
  • ALIGN=RIGHT вырвнивает текст абзаца по правому краю;
  • ALIGN=CENTER центрирует текст абзаца;
  • ALIGN=JUSTIFY выравнивает текст абзаца по ширине (по левому и правому краю). Если длина текста менее одной строки, то выравнивание аналогично ALIGN=LEFT.

Для того чтобы избежать набора с клавиатуры повторяющихся фрагментов текста, используйте копирование.

Дескрипторы форматирования

  1. При помощи дескрипторов <B>...</B> можно выделять текст полужирным шрифтом;
  2. Дескрипторы <I>...</I> определяют написание курсивом;
  3. Посредством дескрипторов <U>...</U> можно подчеркнуть текст;
  4. Использование дескрипторов <S>...</S> позволяет перечеркнуть написанное;

Задание

  1. Отредактируйте файл с абзацами, выделив названия (Windows, FAR Manager, Notepad) полужирным шрифтом, а термины (браузер, редактор) - курсивом.
  2. Зайдите на Генератрор текста- Online-Generators.ru или найдите любой генератор текста через поисковик. Скопируйте текст к себе в файл referat.html (предварительно его создав) и сделайте из него HTML страничку с центрированием заголовка и выравниванием текста по ширине. Цвет фона и текста определите самостоятельно.

Копирование изображений с Web-страничек

В качестве упражнения скопируем картинку с этой странички в каталог лабораторной работы № 2.

  1. Кликните по картинке правой кнопкой мыши и выберите пункт меню "Сохранить изображение"

  2. Сохраните изображение в каталог лабораторной работы № 2, убедитесь с помощью FAR Manager, что файл picture.jpg появился в этом каталоге.

Добавление изображений в HTML документ

Изображения (графика) добавляются в HTML документы посредством дескриптора <IMG> (закрывающий дескриптор для него не предусмотрен). Дескриптор <IMG> имеет множество атрибутов для "тонкой настройки" расположения рисунка на страничке, мы огораничимся рассмотрением только атрибута SRC, спомощью котрого указывается графический файл, который нужно отобразить в документе. Для вставки в HTML документ могут использоваться графические форматы "gif", "jpeg" или "png".

Задание

В поисковиках google или yandex по запросу "картинки" найдите сайты с картинками приличного содержания. Скопируйте несколько картинок в каталог лабораторной работы № 2 и создайте HTML страничку с этими картинками.