
- •Лабораторная работа №1. «Основные понятия html»
- •Основные понятия html Что такое Интернет?
- •Зачем нужен язык разметки?
- •Об истории html
- •Браузеры
- •Html-файлы
- •Редакторы html-файлов
- •Коротко о главном
- •Лабораторная работа №2. «Общая структура html-документа»
- •Общая структура html-документа
- •Структурные теги
- •Элементы форматирования на уровне блоков
- •Коротко о главном
- •Лабораторная работа №3. «Оформление текста в html-документе»
- •Формирование абзацев и заголовков, работа со шрифтами Абзацы
- •Заголовки
- •Горизонтальные линии
- •Бегущая строка
- •Работа со шрифтами
- •Создание списков
- •Коротко о главном
- •Лабораторная работа №4. «Структура html-приложения. Гиперссылки»
- •Структура html-приложения. Гиперссылки Структура html-приложения
- •Создание гиперссылок
- •Коротко о главном
- •Лабораторная работа №5. «Графика и мультимедиа в html-документе»
- •Вставка графики и мультимедиа Вставка изображений
- •Вставка звука и видео
- •Коротко о главном
- •Лабораторная работа №6. «Таблицы в html-документе»
- •Создание таблиц
- •Пример создания простой таблицы
- •Пример создания таблицы с названиями столбцов
- •Создание сложных таблиц
- •Пример фрагмента html-документа для создания таблицы с различной шириной строк и столбцов
- •Оформление таблиц
- •Коротко о главном
- •Лабораторная работа №7. «Формы в html-документе»
- •Формы в html-документе Создание форм
- •Коротко о главном
- •Лабораторная работа №8. «Фреймы в html-документе»
- •Фреймы в html-документе Создание фреймов
- •Создание «плавающих» фреймов
- •Создание гиперссылок с учетом фреймов
- •Коротко о главном
- •Практическая работа. «Основы веб-конструирования»
Работа со шрифтами
Шрифты различаются гарнитурой и размером.
Гарнитура – это особенности оформления и начертания шрифта.
Шрифты условно делятся на три группы: «с засечками», «рубленые» и «рукописные». Обычный текст лучше читается, если выбран шрифт «с засечками» (Times, Courier). В одной и той же гарнитуре существует несколько начертаний – обычный шрифт, курсив, полужирный курсив.
Размер шрифта определяется в «пунктах» (1 pt = 0,353 мм). Для отображения основного текста обычно используют шрифт размером 12 pt.
Для определения свойств шрифта используется тег-контейнер <FONT> … </FONT> со следующими атрибутами:
size – размер шрифта;
color – цвет шрифта;
face – гарнитура шрифта или список допустимых шрифтов.
Размер шрифта задается относительно размера, установленного в программе просмотра по умолчанию с помощью парного тега <FONT>, например, <FONT size=”+4”> … </FONT>.
Кроме тега <FONT> для изменения свойств шрифта можно использовать следующие теги:
<B>Текст</B> – полужирный шрифт (Bold);
<U>текст</U> – подчеркивание (Underline);
<I>Текст</I> – курсивный шрифт (Italic);
<S>Текст</S>
– зачеркнутый
текст (Strike
Out);
<STRONG>.. .</STRONG> – усиленное выделение (полужирный шрифт);
<BIG>.. .</BIG> – увеличение размера шрифта по сравнению с обычным;
<SMALL>.. .</SMALL > – уменьшение размера шрифта по сравнению с обычным;
<TT>Текст</TT> – пишущая машинка (моноширинный текст);
<SUP>Текст</SUP> – верхний индекс;
<SUB>Текст</SUB> – нижний индекс.
Цвет шрифта всего документа можно задать с помощью атрибута text = "цвет" тега <BODY>.
Создание списков
Пример
создания маркированного списка: <HTML>
<НЕАD>
<ТIТLЕ>Списки</TITLE>
</HEAD>
<BODY>
<Н1
align="center">
Маркированный список </Н1>
<HR>
<UL
type="disc">
<LI>Физика
<LI>Химия
<LI>Биология
<LI>Информатика
</UL>
</BODY> </HTML>
Маркированный список задает тег <UL>:
<UL>
<LН>Заголовок списка</LН>
<LI>Элемент списка
<LI>Элемент списка
<LI>Элемент списка
</UL>
Вид маркера определяется атрибутом type:
<UL type="circle"> – окружность;
<UL type="disc"> – диск;
<UL type="square" > – квадрат.
Пример
создания нумерованного списка: <
HTML> <HEAD>
<ТIТLЕ>Списки</ТIТLЕ>
</HEAD> <BODY>
<H1
align
= "center">Нумерованный
список</Н1>
<HR>
<OL
type="l">
<LI>Минск
<LI>Брест
<LI>Витебск
<LI>Гродно
</OL>
</BODY>
</HTML>
<OL>
<LI>Элемент списка
…
<LI>Элемент списка
</OL>
Вид маркера списка устанавливается атрибутом
type:
<OL type="1"> – (1,2,3,...);
<OL type="A"> – (А, В, C,...);
<OL type="a" > – (a, b, c,...);

Пример создания списка определений:
< HTML>
<HEAD> <ТIТLЕ>Списки</ТIТLЕ>
</HEAD>
<BODY>
<DL>
<DT>процессор
<DD>Центральное устройство компьютера, производящее обработку информации в двоичном коде. <DT>Оперативная память
<DD>Устройство, в котором хранятся программы и данные.
</DL>
</BODY>
</HTML>
<OL type="I" > – (I, II, III, IV,...);
<OL type="i" > – (i, ii, iii,...).
Список определений задает тег <DL>, имеющий следующую структуру:
<DL>
<DТ>Термин
<DD>Определение
<DТ>Термин
<DD>Определение

Например:
<OL type="I">
<LI>Деревья
<UL> <LI>ДУБ
<LI>КЛЕН
<LI>ГРАБ
</UL>
<LI>Цветы
<UL><LI>ACTPA
<LI>P03A
<LI>ЛИЛИЯ
</UL>
</OL>
…
</DL>
HTML допускает создание в документах вложенных списков, т. е. сочетающих в себе элементы как маркированного, так и нумерованного списков.
Задание 3.2. Запишите определения основных понятий в тетрадь