2018-03-09
940
Разработка сайтов (Основы НTML)
Практические работы по теме «Создание Web-страницы в языке HTML»
Структура Web-страницы. Большая часть тэгов образует контейнер, состоящий из открывающего и закрывающего тэгов. Тэги можно набирать как заглавными, так и строчными буквами.
Web-страница помещается в контейнер <HTML></HTML>и.состоит из двух частей: заголовка и отображаемого в браузере содержания.
Заголовок страницы помещается в контейнер <HEAD></HEAD>. Заголовок содержит название страницы, которое помещается в контейнер <TITLE></TITLE> и при просмотре отображается в верхней строке окна браузера.
Также в заголовок помещаются не отображаемые при просмотре мета-тэги, задающие кодировку страницы для ее правильного отображения в браузере, а также содержащие описание и ключевые слова страницы, которые в первую очередь просматривают роботы поисковых систем.
Отображаемое в браузере содержание страницы помещается в контейнер <BODY></BODY>.
Работа 1. Основные тэги HTML
|
|
|
Создать Web-страницу, знакомящую с основными тэгами HTML.
- Запустить текстовый редактор Блокнот командой [Пуск - Программы - Стандартные - Блокнот].
- Ввести HTML-код, задающий структуру Web-страницы:
<HTML>
<HEAD>
<TITLE>Первое знакомство с тэгами HTML</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
- Ввести команду [Файл - Сохранить]. Файлу Web-страницы присвоить имя ваша_фамилия.htm
- Запустить браузер и открыть созданный файл командой [Файл - Открыть]. В заголовке окна браузера высвечивается название Web-страницы Первое знакомство с тэгами HTML.
- Заголовки. Внести в текст страницы после <BODY> в пустую строку тэги заголовков различных уровней (размеров).
Заголовки различных уровней:
<H1>Заголовок первого уровня</H1>
<H2>Заголовок второго уровня</H2>
<H3>Заголовок третьего уровня</H3>
<H4>Заголовок четвертого уровня</H4>
<H5>Заголовок пятого уровня</H5>
<H6>Заголовок шестого уровня</H6>
6. Внесение изменений и дополнений в Web-страницу. В процессе создания Web-страницы приходится добавлять новые тэги и просматривать получаемый результат.
7. Активизировать Блокнот с открытой в нем редактируемой Web-страницей. Внести в содержимое страницы необходимые изменения и сохранить новый вариант страницы, выполнив команду меню [Файл - Сохранить].
8. Активизировать браузер с открытым в нем предыдущим вариантом страницы. Щелкнуть по кнопке Обновить. В окне браузера отобразится обновленная Web-страница
Работа 2. Форматирование шрифта.
Внести в текст страницы тэги, определяющие начертание шрифта и горизонтальных разделительных линий. Отделить этот фрагмент от остального текста с помощью горизонтальных разделительных линий. Разделительная линия:
|
|
|
- Запустить текстовый редактор Блокнот командой [Пуск - Программы - Стандартные - Блокнот].
- Открыть файл ваша_фамилия.htm
- Внести в текст страницы тэги, определяющие начертание шрифта и горизонтальных разделительных линий. Отделить этот фрагмент от остального текста с помощью горизонтальных разделительных линий. Разделительная линия:
<HR>
Форматирование шрифта:
<B>Жирный</B>
<I>Курсив</I>
<U>Подчеркнутый</U>
<B><I><U>Жирный подчеркнутый курсив</B></I></U>
<TT>Равноширинный</TT>
Выделение:
<EM>Выделение</EM>
<STRONG>Усиленное выделение</STRONG>
<HR>
4. Списки. Внести в текст страницы тэги, задающие списки нумерованные и ненумерованные, а также списки определений.
Нумерованный список:
<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>
5. Внесение изменений и дополнений в Web-страницу. В процессе создания Web-страницы приходится добавлять новые тэги и просматривать получаемый результат.
6. Активизировать Блокнот с открытой в нем редактируемой Web-страницей. Внести в содержимое страницы необходимые изменения и сохранить новый вариант страницы, выполнив команду меню [Файл - Сохранить].
7. Активизировать браузер с открытым в нем предыдущим вариантом страницы. Щелкнуть по кнопке Обновить. В окне браузера отобразится обновленная Web-страница
В итоге в файле имя.htm у вас должно получиться
<HTML>
<HEAD>
<TITLE>Первое знакомство с тэгами HTML</TITLE>
</HEAD>
<BODY>
<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>
<TT>Равноширинный</TT>
<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>
</BODY>
</HTML>
Работа 3. Цветовые схемы. Шрифты.
1. Запустить текстовый редактор Блокнот командой [Пуск - Программы - Стандартные - Блокнот].
2. Сздать файл index.htm
< HTML>
<HEAD>
<TITLE>Моя перваЯ страница</TITLE>
</HEAD>
<BODY>…
</BODY>
</HEAD>
</ HTML> (Запусти файл в браузере)
3. Атрибуты задания цветовой схемы (цвета фона, текста и гиперссылок). Цвет на Web-странице задают либо его названием, либо числовым шести разрядным шестнадцатеричным кодом #RRGGBB (первые два разряда задают интенсивность красного цвета, вторые – зеленого и третьи – синего).
Значение яркости цвета может меняться от минимальной 00 до максимальной FF. В таблице приведены примеры некоторых цветов:
| Цвет | Код | Название | Цвет | Код | Название | |||
| черный | #000000 | black | ч | фиолетовый | #FF00FF | magenta | ф | |
| белый | #FFFFFF | white | б | бирюзовый | #00FFFF | cyan | б | |
| красный | #FF0000 | red | к | желтый | #FFFF00 | yellow | ж | |
| зеленый | #00FF00 | lime | з | золотой | #FFD800 | gold | з | |
| синий | #0000FF | blue | с | оранжевый | #FFA500 | orange | о | |
| серый | #808080 | gray | с | коричневый | #A82828 | brown | к |
Основную цветовую схему Web-страницы можно задать в тэге <BODY> с помощью атрибутов:
|
|
|
| Цвет фона | BGCOLOR="#RRGGBB" |
| Текстура фона | BACKGROUND="file_name" |
| Цвет текста | TEXT="#RRGGBB" |
| Цвет текста ссылки | LINK="#RRGGBB" |
| Цвет текста активной ссылки | ALINK="#RRGGBB" |
| Цвет текста просмотренной ссылки | VLINK="#RRGGBB" |
При использовании текстуры, закрывающей собой всю площадь страницы, применение однотонного фона кажется излишним. Однако рисунки загружаются несколько медленнее, чем текст. Все это время посетители страницы будут видеть цвет фона, заданный атрибутом BGCOLOR. Поэтому для фона указывают цвет, совпадающий с основным тоном фонового рисунка.
Чтобы текст хорошо читался, цвета на странице подбирают контрастирующие по яркости: пастельный фон - темный текст, или темный фон - светлый текст. Нежелательны буквы белого цвета - они могут оказаться невидимыми при печати страницы на принтере.
Для оформления страницы можно использовать следующую цветовую схему: (после <BODY>
<BODY BGCOLOR="#FFFFCC" BACKGROUND="fon.png" TEXT="#993300" LINK="#00FF00" ALINK="#FF0000" VLINK="#00FF00"> (Сохранить файл и Обновить страничку)
