Практическое занятие №5
Тема:Создание Wеb-страницы.
Цель работы: научиться разрабатывать свой сайт
Время работы: 2 часа.
Оборудование: Компьютер с установленным программным обеспечением и подключенный к Internet
Ход работы
Структура Web-страницы. Большая часть тэгов образует контейнер, состоящий из открывающего и закрывающего тэгов. Тэги можно набирать как заглавными, так и строчными буквами. Web-страница помещается в контейнер и.состоит из двух частей: заголовка и отображаемого в браузере содержания. Заголовок страницы помещается в контейнер . Заголовок содержит название страницы, которое помещается в контейнер и при просмотре отображается в верхней строке окна браузера. Также в заголовок помещаются не отображаемые при просмотре мета-тэги, задающие кодировку страницы для ее правильного отображения в браузере, а также содержащие описание и ключевые слова страницы, которые в первую очередь просматривают роботы поисковых систем. Отображаемое в браузере содержание страницы помещается в контейнер
.
Работа 1. Основные тэги HTML СоздатьWeb-страницу, знакомящую с основными тэгами HTML. 1. Запустить текстовый редактор Блокнот командой [Пуск - Программы - Стандартные - Блокнот]. 2. Ввести HTML-код, задающий структуру Web-страницы:
3. Ввести команду [Файл - Сохранить]. Файлу Web-страницы присвоить имя ваша_фамилия.htm
4. Запустить браузер и открыть созданный файл командой [Файл - Открыть]. В заголовке окна браузера высвечивается название Web-страницы Первое знакомство с тэгами HTML.
5. Заголовки. Внести в текст страницы после в пустую строку тэги заголовков различных уровней (размеров). Заголовки различных уровней:
Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня
Заголовок четвертого уровня
Заголовок пятого уровня
Заголовок шестого уровня
6. Внесение изменений и дополнений в Web-страницу. В процессе создания Web-страницы приходится добавлять новые тэги и просматривать получаемый результат.
7. Активизировать Блокнот с открытой в нем редактируемой Web-страницей. Внести в содержимое страницы необходимые изменения и сохранить новый вариант страницы, выполнив команду меню [Файл - Сохранить].
8. Активизировать браузер с открытым в нем предыдущим вариантом страницы. Щелкнуть по кнопке Обновить. В окне браузера отобразится обновленная Web-страница
Работа 2. Форматирование шрифта. Внести в текст страницы тэги, определяющие начертание шрифта и горизонтальных разделительных линий. Отделить этот фрагмент от остального текста с помощью горизонтальных разделительных линий. Разделительная линия:
1. Запустить текстовый редактор Блокнот командой [Пуск - Программы - Стандартные - Блокнот].
2. Открыть файл ваша_фамилия.htm
3. Внести в текст страницы тэги, определяющие начертание шрифта и горизонтальных разделительных линий. Отделить этот фрагмент от остального текста с помощью горизонтальных разделительных линий. Разделительная линия:
Форматирование шрифта: ЖирныйКурсивПодчеркнутыйЖирный подчеркнутый курсивРавноширинный Выделение: ВыделениеУсиленное выделение
4. Списки. Внести в текст страницы тэги, задающие списки нумерованные и ненумерованные, а также списки определений. Нумерованный список:
Первый элемент списка
Второй элемент списка
Третий элемент списка
Ненумерованный список:
Первый элемент списка
Второй элемент списка
Третий элемент списка
Список определений:
ТЕРМИН 1
Пояснение к термину 1
ТЕРМИН 2
Пояснение к термину 2
ТЕРМИН 3
Пояснение к термину 3
5. Внесение изменений и дополнений в Web-страницу. В процессе создания Web-страницы приходится добавлять новые тэги и просматривать получаемый результат. 6. Активизировать Блокнот с открытой в нем редактируемой Web-страницей. Внести в содержимое страницы необходимые изменения и сохранить новый вариант страницы, выполнив команду меню [Файл - Сохранить]. 7. Активизировать браузер с открытым в нем предыдущим вариантом страницы. Щелкнуть по кнопке Обновить. В окне браузера отобразится обновленная Web-страница В итоге в файле имя.htm у вас должно получиться
Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня
Заголовок четвертого уровня
Заголовок пятого уровня
Заголовок шестого уровня
ЖирныйКурсивПодчеркнутыйЖирный подчеркнутый курсивРавноширинныйВыделениеУсиленное выделение
Первый элемент списка
Второй элемент списка
Третий элемент списка
Первый элемент списка
Второй элемент списка
Третий элемент списка
ТЕРМИН 1
Пояснение к термину 1
ТЕРМИН 2
Пояснение к термину 2
ТЕРМИН 3
Пояснение к термину 3
Работа 3. Цветовые схемы. Шрифты. 1. Запустить текстовый редактор Блокнот командой [Пуск - Программы - Стандартные - Блокнот].
2. Сздать файл index.htm
…
(Запусти файл в браузере)
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-страницы можно задать в тэге
с помощью атрибутов: Цвет фона BGCOLOR="#RRGGBB" Текстура фона BACKGROUND="file_name" Цвет текста TEXT="#RRGGBB" Цвет текста ссылки LINK="#RRGGBB" Цвет текста активной ссылки ALINK="#RRGGBB" Цвет текста просмотренной ссылки VLINK="#RRGGBB" При использовании текстуры, закрывающей собой всю площадь страницы, применение однотонного фона кажется излишним. Однако рисунки загружаются несколько медленнее, чем текст. Все это время посетители страницы будут видеть цвет фона, заданный атрибутом BGCOLOR. Поэтому для фона указывают цвет, совпадающий с основным тоном фонового рисунка. Чтобы текст хорошо читался, цвета на странице подбирают контрастирующие по яркости: пастельный фон - темный текст, или темный фон - светлый текст. Нежелательны буквы белого цвета - они могут оказаться невидимыми при печати страницы на принтере. Для оформления страницы можно использовать следующую цветовую схему: (после
(Сохранить файл и Обновить страничку)
Контрольные вопросы:
Какие языки программирования вы знаете?
Какие способы создания сайтов вы знаете?
11 745
2 672 
