Практическое
задание «Основные тэги HTML»
Cозданиe Web-страницы
«Основные тэги HTML»
1)
Запустить текстовый редактор Блокнот командой [Пуск - Программы - Стандартные -
Блокнот].
2) Ввести HTML-код, задающий структуру Web-страницы:
<HTML>
<HEAD>
<TITLE>Первая страница</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
3)
Ввести команду [Файл - Сохранить]. Файлу Web-страницы
присвоить имя 1.html.
4)
Запустить браузер и открыть созданный файл командой [Файл - Открыть]. В
заголовке окна браузера высвечивается название Web-страницы Первое
знакомство с тэгами HTML.
Заголовки.
Внести в текст страницы
тэги заголовков различных уровней (размеров).
5)
Заголовки различных уровней:
<H1>Первый
уровень</H1>
<H2>Второй уровень</H2>
<H3>Третий уровень</H3>
<H4>Четвертый уровень</H4>
<H5>Пятый уровень</H5>
<H6>Шестой уровень</H6>
Форматирование шрифта. Внести в текст страницы тэги, определяющие начертание шрифта и
горизонтальных разделительных линий. Отделить этот фрагмент от остального
текста с помощью горизонтальных разделительных линий.
6)
Разделительная линия:
<HR>
Форматирование шрифта:
<B>Полужирный</B>
<I>Курсив</I>
<U>Подчеркнутый</U>
<B><I><U>Комбинация</B></I></U>
<TT>Особый шрифт</TT>
<HR>
Выделение:
<EM>Простое выделение</EM>
<STRONG>Сильное
выделение</STRONG>
<HR>
Списки. Внести в текст
страницы тэги, задающие списки нумерованные и
ненумерованные, а также списки определений.
7)
Нумерованный список:
<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-страницы приходится добавлять
новые тэги и просматривать получаемый результат.
8) Активизировать Блокнот с
открытой в нем редактируемой Web-страницей. Внести в содержимое страницы
необходимые изменения и сохранить новый вариант страницы, выполнив команду меню
[Файл - Сохранить].
9) Активизировать браузер с
открытым в нем предыдущим вариантом страницы. Щелкнуть по кнопке Обновить. В окне браузера отобразится
обновленная Web-страница.
Изменение фона страницы. Для этого используется атрибут тега BODY – BGCOLOR.
10) Откройте исходный код
страницы и добавьте
<BODY BGCOLOR="#FF0080">для получения ярко розового фона страницы.
Попробуйте самостоятельно
изменить цвет на зеленый.
Вставка
изображения. Используется уже известный тег <IMG SRC="Имя файла"> в нужном месте страницы.
11) Добавьте изображение
любого скриншота на свою страницу.
Добавление
гиперссылок. Прежде чем создавать гиперссылку, нужно создать страницу,
куда мы будем осуществлять переход. Создайте самостоятельно файл 2.html, в котором будет только любая картинка.
12)
Используя парный тег <A HREF="file_name">Указатель ссылки</A> создайте переход из файла 1.html на файл 2.html.