Создание Web-страницы средствами Блокнота

Практическая работа

Создание Web-страницы средствами Блокнота

Задание: Создайте Web-страницу, посвященную деятельности парикмахерской, при помощи языка разметки гипертекста HTML, используя Блокнот.

Web-страница должна содержать:

Структуру HTML-документа;

1.Заголовки разных уровней;

2.Текст разного стиля форматирования и выделения;

3.Абзацы и прерывания строк;

4.Таблицу;

5.Графическое изображение с использованием альтернативного текста;

6.Гиперссылки;

7.Дополнительные визуальные эффекты;

8.Список.

Порядок выполнения

1. Создание структуры HTML-документа:

Запустите программу Блокнот, выполнив команду Пуск > Программы > Стандартные > Блокнот. Откроется файл с именем Безымянный;

Сохраните пустой файл как Web-страницу, выполнив команду Файл > Сохранить как. В поле Тип файла установите значение Все файлы(*.*). В пол Имя файла напишите index.htm. С помощью поля Папка перейдите в свою личную папкуи нажмите кнопку «Сохранить»

Создайте структуру, определяющую HTML-документ.

<HTML>

Парикмахерская «Лилиан»

</HTML>

Сохраните внесенные изменения командой Файл > Сохранить.

Просмотрите результат с помощью броузера Internet Explorer. Для этого закройте программу Блокнот командой Файл > Выход или щелкнув по кнопке Закрыть в правом верхнем углу окна программы. Запустите броузер Пуск > Программы > InternetExplorer. Загрузите созданную вами Web-страницу, выполнив команду Файл > Открыть. В диалоговом окне Открыть нажмите кнопку Обзор, перейдите в свою личную папку, выделите щелчком левой клавиши мыши файл Indexи нажмите кнопку Открыть. Подтвердите выбор файла, нажав кнопку ОК. Броузер отобразит созданный в Блокноте файл.

Для продолжения редактирования этой Web-страницы выполните команду Вид > В виде HTML. Откроется окно программы Блокнот в режиме редактирования.

Добавьте в структуру документа разделы HEAD (заголовок) и BODY (тело), модифицировав текст:

<HTML>

<HEAD>

</HEAD>

<BODY>

Парикмахерская «Лилиан»

</BODY>

</HTML

Сохраните изменения командой «Файл > Сохранить». Обратите внимание, что на «Панели задач» находится в свернутом состоянии окно броузера, в котором вы просматривали Web-страницу. Активизируйте его нажатием левой кнопки мыши, не закрывая программу «Блокнот». Обновите Web-страницу, нажав кнопку «Обновить», либо выполнив команду «Вид > Обновить». Сейчас видимых изменений не произошло, потому что вы не добавляли содержательную информацию, а лишь форматировали теги документа. Тем не менее, броузер уже отображает модифицированный HTML-документ, сохраненный в «Блокноте». Для продолжения редактирования кода HTML нужно перейти в «Блокнот» с помощью «Панели задач». При последующих изменениях содержания Web-страницы для просмотра нужно повторить описанную последовательность действий.

Добавим заголовок к Web-странице. В разделе HEAD документа допишем

<TITLE>Web-страница парикмахерской «Лилиан» </TITLE>

Сохраните внесенные изменения и просмотрите, как изменится окно браузера, обратив внимание на строку заголовка.

Общая структура HTML-документа готова.

Создание заголовков разного уровня, абзацев, прерываний и форматирования текста:

Создадим новый абзац, а для имеющегося текста установим заголовок первого уровня и расположим его по центру, напечатав:

<H1 ALIGN=”CENTER”> Парикмахерская «Лилиан» </H1>

<P> Вы сделали правильный выбор

Просмотрим внесенные изменения, сохранив их.

Изменим стиль, размер и цвет шрифта для созданного абзаца

<FONT SIZE=”3” COLOR=”RED”><B>Вы сделали правильный выбор</B></FONT>

Перечислим некоторые преимущества, расположив их на разных строках, для этого используем теги абзаца и прерывания строк:

<P> Индивидуальный подход к каждому клиенту

<BR> Только профессиональные материалы для оказания услуг

<BR> Современный подход в обслуживании клиента

<BR> Подготовка рекомендаций по уходу за волосами до следующего посещения

Просмотрим внесенные изменения, сохранив их.

Добавим еще один заголовок третьего уровня зеленого цвета и отцентрируем его по правой стороне страницы:

<H3>ALIGN=”RIGHT”><FONT COLOR=”GREEN”> Почему клиенты выбирают именно нас? </FONT></H3>

Просмотрим внесенные изменения, сохранив их.

Создание и форматирования таблиц:

Добавим таблицу на нашу Web-страницу:

<TABLE FRAME=”BOX” RULES=”ALL” BORDER=”3”>

<TR><TH>Удобное местоположение</TH><TH>Профессиональные мастера</TH>

<TH>Профессиональные материалы</TH> <TH>Уютный интерьер</TH> <TH>Прочее</TH></TR>

<TR><TD>50%</TD> <TD>21%</TD> <TD>11%</TD> <TD>11%</TD> <TD>7%</TD></TR></TABLE>

Просмотрим внесенные изменения, сохранив их. Обратите внимание, что первая строка выделена жирным (это действие тега <TH>), сама таблица имеет обрамление, а данные расположены по левому краю.

Отформатируем расположение таблицы и укажем ее размер относительно страницы. Для этого изменим тег создания таблицы следующим образом:

<TABLE FRAME=”BOX” RULES=”ALL” BORDER=”3” ALIGN=”CENTER” WIDTH=”100%”>

Просмотрим внесенные изменения, сохранив их.

Установим текст второй строки по центру, добавив в тег, определяющий вторую строку дополнительный атрибут выравнивания:

<TR ALIGN=”CENTER”><TD>50%</TD> …

Просмотрим внесенные изменения, сохранив их.

Размещение изображения на Web-странице:

Придумать фирменный знак парикмахерской, нарисовать его в графическом редакторе;

Вставить на Web-страницу фирменный знак организации:

<P><IMG SRC=”[имя файла с изображением фирменного знака]”>

Просмотрим внесенные изменения, сохранив их.

Зададим альтернативный текст, отображаемый, если загрузка графики отключена и установим рисунок по центру страницы. Для этого добавим в теги <P> и <IMG> дополнительные атрибуты:

<P ALIGN=”CENTER”><IMG SRC=”[имя файла с изображением]” ALT=”Логотип парикмахерской”>

Просмотрим внесенные изменения, сохранив их.

Установим в качестве фона нашей страницы изображение. Для этого изменим атрибуты тега <BODY>:

<BODY BACKGROUND=”произвольный файл-изображение”>

Просмотрим внесенные изменения, сохранив их.

Создание гиперссылок на Web-странице:

Создадим гиперссылку на вставленном изображении, чтобы щелкнув по нему можно было перейти на сайт колледжа. Для этого добавим тег гиперссылки к тегу изображения:

<A HREF=”http://www. bsu. *****”><IMG SRC=”[имя файла с изображением г]” ALT=”Логотип парикмахерской”></A>

Просмотрим внесенные изменения, сохранив их.

Создание дополнительных эффектов на Web-странице:

Добавим горизонтальную разделительную линию после перечислений преимуществ выбора нашей парикмахерской:

<BR> Подготовка рекомендаций по уходу за волосами до следующего посещения

<P><HR ALIGN="CENTER" SIZE="5" COLOR="firebrick"> …

Просмотрим внесенные изменения, сохранив их.

Сделаем так, чтобы наш заголовок (Дистанционное обучение) передвигался по экрану, т. е. стал бегущей строкой:

<MARQUEE> Дистанционное обучение </MARQUEE>

Просмотрим внесенные изменения, сохранив их.

Создание списка:

Оформим перечисление преимуществ дистанционного обучения как маркированный список:

Существующий HTML-код:

<P> Индивидуальный подход к каждому клиенту

<BR> Только профессиональные материалы для оказания услуг

<BR> Современный подход в обслуживании клиента

<BR> Подготовка рекомендаций по уходу за волосами до следующего посещения

Изменим его, убрав теги абзацев и прерывания строк, вместо которых вставим теги маркированного списка:

<UL><LI> Индивидуальный подход к каждому клиенту

<LI> Только профессиональные материалы для оказания услуг

<LI> Современный подход в обслуживании клиента

<LI> Подготовка рекомендаций по уходу за волосами до следующего посещения</UL>

Просмотрим внесенные изменения, сохранив их.

ИТОГ: проанализируйте Вашу работу.

Познавательные статьи:

Алгоритмические операторы Matlab

Конструирование и порядок расчёта дорожной одежды

Исследования учёных: почему помогают молитвы?

Почему терпят неудачу многие предприниматели?

Последнее изменение этой страницы: 2024-07-06; просмотров: 49; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 216.73.216.196 (0.009 с.)