- •Лабораторная работа №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-документе Создание фреймов
- •Создание «плавающих» фреймов
- •Создание гиперссылок с учетом фреймов
- •Коротко о главном
- •Практическая работа. «Основы веб-конструирования»
Коротко о главном
Гарнитура – это особенности оформления и начертания шрифта.
Шрифты условно делятся на три группы: «с засечками», «рубленые» и «рукописные». Размер шрифта определяется в «пунктах» (1 pt = 0,353 мм).
В одной и той же гарнитуре существует несколько начертаний – обычный шрифт, курсив, полужирный курсив.
Списки – это абзацы помеченные маркерами или номерами. HTML допускает создание в документах списков трех типов: маркированные, нумерованные и списки определений.
<Р>Текст</Р> – абзац
<DIV>Текст</DIV> – выделенный фрагмент документа
<Нn>Текст заголовка</Нn> – заголовки
<CENTER>Текст</CENTER> – выравнивание текста по центру
<PRE>Текст</PRE> – блок форматированного текста
<BLOCKQUOTE>Текст</BLOCKQUOTE> – выровненный блок с отступами слева и справа, а также с отбивкой сверху и снизу
<СIТЕ>Текст</СIТЕ> – цитата (курсив)
<HR> – горизонтальная линия
<BR> – переход на новую строку
<MARQUEE>Текст</MARQUEE> – бегущая строка
<FONT color=”…” face=”…” size=”…” > … </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> – нижний индекс.
<UL> </UL> – маркированный список
<OL> </OL> – нумерованный список
<DL> - </DL> – список определений
<LI> – элемент маркированного или нумерованного списка
<LH> – заголовок списка (необязательный элемент)
<DT> – термин списка определений
<DD> – определение из списка определений
Атрибут type тегов <UL> и <OL> позволяет изменять тип нумерации или маркер.
Задание 3.3.
Откройте файл FAMILIJA1.HTML, который находится в вашей папке («FAMILIJA» – это ваша фамилия, записанная латинскими буквами) с помощью программы Блокнот.
Доработайте страничку, используя теги для оформления текста, таким образом, чтобы листинг страницы принял вид:
<HTML>
<HEAD>
<ТIТLЕ>Моя страничка 1</ТIТLЕ>
</HEAD>
<BODY>
<Н1>Привет! Это моя личная домашняя страничка!</Н1>
<HR size="5" width="50%">
<Н2 align="center"> Мой город </H2>
Я живу в
<FONT color="red" face="Comic Sans MS" size="+5"> Дрогичине
</FONT>
<H4 align="center"> Мои увлечения: </H4>
<FONT color="blue" face="Arial" size="+2">
<В>Музыка – гитара</В>,
<U>Спорт – футбол</U>,
<I>Люблю рисовать</I>.
</FONT>
<Н5>Мои друзья</Н5>
<U>Мои друзья</U> учатся со мной в <I>одном классе</I>
</BODY>
</HTML>
Добавьте несколько новых строчек самостоятельно. Например. «Моя семья», «Мои домашние животные». Для оформления можете использовать бегущую строку. Сохраните созданную страничку в своей папке под тем же именем.
С помощью браузера посмотрите, что у вас получилось.
Задание 3.4.
Откройте с помощью программы Блокнот созданный вами HTML-документ. Дополните его заголовками различного уровня, для чего перед закрывающим тегом </body> вставьте следующую последовательность тегов:
<Н1>Заголовок первого уровня</Н1>
<Н2> Заголовок второго уровня</Н2>
<НЗ> Заголовок третьего уровня</НЗ>
<Н4> Заголовок четвертого уровня</Н4>
<Н5> Заголовок пятого уровня</Н5>
<Н6> Заголовок шестого уровня</Н6>
Сохраните изменённый файл и просмотрите, что у вас получилось, открыв полученную страницу в браузере.
Задание 3.5.
Дополните документ тегами, которые позволяют в браузере увидеть горизонтальные линии. Для этого перед закрывающим тегом </body> допишите следующие теги:
<HR>
<HR size=10>
<HR size=10 width="50%" align="left">
<HR size=5 noshade>
<HR size=5 widch="300" noshade>
<HR color="blue">
Сохраните файл и просмотрите, что у вас получилось, обновив страницу в браузере.
Задание 3.6.
Дополните страницу списками самостоятельно.