Разработка Web-сайтов. Тема - Основные тэги HTML.
Задание № 1: Создать Web-страницу, знакомящую с основными тэгами HTML.
1. В своей папке создайте новую папку, имеющую имя: Создание Web-сайта.
2. Запустите текстовый редактор Блокнот (Пуск – Программы – Стандартные - Блокнот).
3. Ввести HTML-код, задающий структуру Web-страницы:
<HTML>
<HEAD>
<TITLE>Первое знакомство с тэгами HTML</TITLE>
</HEAD>
4. Внести в текст страницы тэги заголовков различных уровней (размеров):
<BODY>
<H1>Заголовок первого уровня</H1>
<H2>Заголовок второго уровня</H2>
<H3>Заголовок третьего уровня</H3>
5. Отделить этот фрагмент от остального текста с помощью горизонтальной
разделительной линии:
<HR>
6. Внести в текст страницы тэги, задающие списки нумерованные и ненумерованные:
<OL>
<LI>Первый элемент списка</LI>
<LI>Второй элемент списка</LI>
<LI>Третий элемент списка</LI>
</OL>
<HR>
<UL>
<LI>Первый элемент списка</LI>
<LI>Второй элемент списка</LI>
<LI>Третий элемент списка</LI>
</UL>
7.Внести в текст страницы тэги, определяющие начертание шрифта. Отделить
этот фрагмент от текста с помощью горизонтальных разделительных линий:
<HR>
Обычный текст
<B>Жирный</B>
<I>Курсив</I>
<U>Подчеркнутый</U>
<B><I><U>Жирный подчеркнутый курсив</B></I></U>
<HR>
</BODY>
</HTML>
8. Ввести команду Файл - Сохранить, файлу Web-страницы присвоить имя
proba.htm и сохранить в своей папке Создание Web-сайта, закрыть Блокнот.
9. Откройте созданный документ из своей папки, в заголовке окна браузера
высвечивается название Web-страницы – Первое знакомство с тэгами HTML.
10. Замените общие фразы следующими (подумайте какие заменить):
Моя личная страница.
Давайте познакомимся.
Немного о себе:
1. Моё имя…
2. Мой адрес…
3. Контактные координаты…
До встречи.
Спасибо за внимание.
Продолжение следует!
11. Сохраните изменения в файле proba.htm.
Основные тэги HTML
Назначение |
Формат |
Структура Web-страницы |
|
Начало и конец страницы |
<HTML> </HTML> |
Описание страницы, в том числе ее имя |
<HEAD> </HEAD> |
Имя страницы |
<TITLE> </TITLE> |
Содержание страницы |
<BODY> </BODY> |
Форматирование текста |
|
Заголовок (уровни от 1 до 6) |
<H?> </H?> |
Абзац |
<P> </P> |
Абзац с выравниванием |
<H? ALIGN=”left”> </H?> <H? ALIGN=”center”> </H?> <H? ALIGN=”right”> </H?> |
Перевод строки |
<BR> |
Горизонтальный разделитель |
<HR> |
Выравнивание по центру |
<CENTER> </CENTER> |
Нумерованный список |
<OL> <LI></LI> </OL> |
Ненумерованный список |
<UL> <LI></LI> </UL> |
Форматирование шрифта |
|
Жирный |
<B> </B> |
Курсив |
<I> </I> |
Подчеркнутый |
<U> </U> |
Верхний индекс |
<SUB> </SUB> |
Нижний индекс |
<SUP> </SUP> |
Размер шрифта (от 1 до 7) |
<FONT SIZE=?> </FONT> |
Цвет шрифта (задается названием цвета или его 16-ричным кодом) |
<FONT COLOR=”#RRGGBB”> </FONT> |
Гарнитура шрифта |
<FONT FACE=”Arial”> </FONT> |
Атрибуты задания цветовой схемы(цвета фона, текста и гиперссылок)
цвет |
код |
название |
цвет |
код |
название |
черный |
# 000000 |
black |
фиолетовый |
# FF00FF |
magenta |
белый |
# FFFFFF |
white |
бирюзовый |
# 00FFFF |
cyan |
красный |
# FF0000 |
red |
желтый |
# FFFF00 |
yellow |
зеленый |
# 00FF00 |
lime |
золотой |
# FFD800 |
gold |
синий |
# 0000FF |
blue |
оранжевый |
# FFA500 |
orange |
серый |
# 808080 |
gray |
коричневый |
# A82828 |
brown |
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.