- •Введение в web-дизайн
- •Введение
- •1. Структура web-страницы
- •2. Основные теги html
- •3. Цветовая схема, вставка
- •Создадим начальную Web – страницу, в процессе работы над которой познакомимся с применением атрибутов тегов для вставки изображений, гиперссылок, таблиц.
- •Желательно скопировать изображение в папку, где располагается файл Визитка.Htm.
- •Готовая Web – страница представлена на рис. 2.
- •4. Варианты заданий
- •Список ЛитературЫ
- •Введение в web-дизайн
2. Основные теги html
Задание 1. Создайте Web – страницу, знакомящую с основными тегами HTML.
Запустите текстовый редактор Блокнот командой [ Пуск-Программы-Стандартные-Блокнот].
Введите HTML – код страницы:
-
<HTML>
<HEAD>
<TITLE> Первое знакомство с тегами HTML </TITLE>
</HEAD>
<BODY>
Содержание документа
</BODY>
</HTML>
Введите команду [Файл-Сохранить как…]. Файлу Web – страницы присвойте имя index.htm, тип файла задайте – Все файлы.
Запустите браузер и откройте созданный файл командой [Файл-Открыть]. В заголовке окна браузера высвечивается название Web – страницы Первое знакомство с тегами HTML, в браузере - Содержание документа.
Введите в текст страницы теги заголовков различных уровней (размеров):
-
<H1> Заголовок первого уровня </H1>
<H2> Заголовок второго уровня </H2>
<H3> Заголовок третьего уровня </H3>
<H4> Заголовок четвёртого уровня </H4>
<H5> Заголовок пятого уровня </H5>
<H6> Заголовок шестого уровня </H6>
Внесите в текст страницы теги, определяющие начертание шрифта. Отделите этот фрагмент от остального текста с помощью горизонтальных разделительных линий.
-
<HR>
Обычный текст
<B> Жирный </B>
<I> Курсив </I>
<U> Подчёркнутый </U>
<B><I><U> Жирный подчёркнутый курсив </B></I></U>
<EM> Выделение </EM>
<STRONG> Усиленное выделение </STRONG>
<HR>
Введите в текст страницы теги, задающие списки нумерованные и ненумерованные, а также списки определений:
-
<OL>
<LI> Первый элемент списка </LI>
<LI> Второй элемент списка </LI>
<LI> Третий элемент списка </LI>
</OL>
<UL>
<LI> Первый элемент списка </LI>
<LI> Второй элемент списка </LI>
<LI> Третий элемент списка </LI>
</UL>
-
<DL>
<DT> ТЕРМИН 1</DT>
<DD> Пояснение к термину 1 </DD>
<DT> ТЕРМИН 2</DT>
<DD> Пояснение к термину 2 </DD>
<DT> ТЕРМИН 3</DT>
<DD> Пояснение к термину 3 </DD>
</DL>
В процессе создания Web – страницы приходится добавлять новые теги и просматривать получаемый результат. Активизируйте блокнот с открытой в нём Web – страницей. Внесите в содержание страницы необходимые изменения и сохраните новый вариант страницы. Затем активизируйте браузер, щёлкнув на кнопку Обновить. В браузере отобразится обновлённая Web – страница.