ТОР 5 статей:

Методические подходы к анализу финансового состояния предприятия

Проблема периодизации русской литературы ХХ века. Краткая характеристика второй половины ХХ века

Ценовые и неценовые факторы

Характеристика шлифовальных кругов и ее маркировка

Служебные части речи. Предлог. Союз. Частицы

КАТЕГОРИИ:

Практическая часть. Практическое задание 1. «Московский Кремль»

⇐ Предыдущая 58 59 60 61 62 636465 66 67 Следующая ⇒

Практическое задание 1. « Московский Кремль». Создать Web-сайт, рассказывающий о башнях Московского Кремля.

Сайт рекомендуется хранить в отдельной, специально созданной папке Kremlin. Здесь будут находиться как Web-страницы, так и графические файлы. Файл начальной страницы сайта обычно имеет имя index.htm, в этом случае для начала просмотра сайта в адресе достаточно указать путь к папке, где он хранится.

Начальная страница «Башни Московского Кремля» будет содержать информацию о башнях Московского Кремля: история создания, описания отдельных башен, иллюстрации и т. д. Вторая страница «Кремлевские Куранты» рассказывает о Кремлевских Курантах. Страницы связаны между собой гиперссылками.

Создадим начальную Web-страницу, в процессе работы над которой познакомимся с применением атрибутов тэгов для вставки изображений, гиперссылок, таблиц и карт.

Создание Web-сайта «Московский Кремль»

1. Запустить текстовый редактор Блокнот командой [Пуск - Программы - Стандартные - Блокнот].

2. Дать странице название «Башни Московского Кремля», между тэгами <BОDY> и </BОDY> набрать текст о Московском Кремле.

3. Отформатировать текст (разметить абзацы и расставить заголовки) и сохранить в файле index.htm в папкеKremlin.

4. Просмотреть полученную черно-белую страницу в браузере:

Башни Московского Кремля.

Современный Кремль построен в конце XV - начале XVI в. Непреступная крепость со всех сторон была окружена водой с юга – Москва-река, с севера и запада – река Неглинная, с востока – ров глубиной 10м и шириной 32м выложенный белым камнем.

Протяженность укреплений более 2-х километров, высота от 5 до 19 м, толщина от 3,5 до 6,5 м. Из стен выступают вперед 18 боевых башен. Расстояние между ними позволяло простреливать весь защищаемый периметр. Первоначально башни сверху были плоскими, только навесы прикрывали воинов от дождя и снега.

Атрибуты задания цветовой схемы (цвета фона, текста и гиперссылок). Цвет на 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	коричневый	#A82 82 8	brown

Основную цветовую схему Web-страницы можно задать в тэге <BОDY> с помощью атрибутов:

Цвет фона BGC0L0R="#RRGGBB"

Текстура фона BACKGROUND="f i1e_name"

Цвет текста TEXT="#RRGGBB"

Цвет текста ссылки LINK="#RRGGBB"

Цвет текста активной ссылки ALINK="#RRGGBB"

Цвет текста просмотренной ссылки VLINK="#RRGGBB"

При использовании текстуры, закрывающей собой всю площадь страницы, применение однотонного фона кажется излишним. Однако рисунки загружаются несколько медленнее, чем текст. Все это время посетители страницы будут видеть цвет фона, заданный атрибутом BGCOLOR. Поэтому для фона указывают цвет, совпадающий с основным тоном фонового рисунка.

Чтобы текст хорошо читался, цвета на странице подбирают контрастирующие по яркости: пастельный фон — темный текст, или темный фон — светлый текст. Нежелательны буквы белого цвета — они могут оказаться невидимыми при печати страницы на принтере.

Для оформления страницы о Московском Кремле использовать следующую цветовую схему:

<BODY BGCOLOR="#FFFFCC" BACKGROUND="fon.png" TEXT="#993300" LINK="#00FF00" ALINK="#FF0000"

VLINK="#00FF00">

Спасская башня.

Самая величественная и красивая башня Кремля, она по праву считается главной. Через ее ворота проходят торжественные процессии. Первоначально называлась Фроловской, а Спасской - с 1653 г., когда над проездными воротами была установлена икона Спаса. Башня десятиэтажная, три из которых, занимают Куранты - часы с боем.

Вставка изображений. Для размещения на Web-страницах используются графические файлы форматов GIF, JPEG и PNG.

Изображения помещаются на Web-страницу тэгом <IMG> с атрибутом SRC, сообщающим браузеру имя и местоположение графического файла.

Выравнивание рисунка по горизонтали в этом случае задается в тэге <Р>. К изображению с помощью атрибута <ALT>, можно добавить название, которое появляется вместо иллюстрации (если по какой-либо причине графика не выводится в окне браузера), или в форме всплывающий строки, при указании на рисунок мышью.

Вставить в начале страницы картину М. Н. Воробьева «Вид Московского Кремля. 1818»:

<Р ALIGN="center"> <IMG SRC="kremlin.gif"

WIDTH="515" HEIGHT="240" ALT="M.H.Воробьев. Вид

Московского Кремля. 1818"></Р>

В тэге IMG с помощью атрибутов WIDTH (ширина) и HEIGHT (высота) можно указать размер выводимой картинки (в пикселях).

Атрибут ALIGN выравнивает текст по верхнему краю, середине или нижнему краю изображения, справа или слева от него с помощью значений: top, bottom, middle, left или right.

Разместить изображение Царской башни определенного размера слева от текста:

<IMG SRC="carsk. gif" WIDTH="30" HEIGHT="75"

ALIGH="left" >

Царская башня

Изящная башенка построена взамен обветшавшей деревянной вышки, с которой, по преданию, Иван Грозный любил наблюдать за событиями на Красной площади. На втором ярусе висел колокол- Спасский набат.

Форматирование текста. Для выделения фрагментов текста используется тэг <FONT>. Атрибут FACE определяет гарнитуру шрифта, атрибут COLOR — цвет и атрибут SIZE — размер символов.

Выделим часть текста более крупным шрифтом и цветом:

Несколько раз Московскому Кремлю грозило уничтожение... </FONT></P>

Несколько раз Московскому Кремлю грозило уничтожение, В конце XVIII века по приказу Екатерины II архитектор В.И. Баженов проектировал снос древних стен и строительство на их месте нового дворца. В 1812 г Наполеон хотел взорвать святыню России. В 1917 г. красногвардейцы обстреливали крепость из трехдюймовых орудий, чтобы выбить, из нее юнкеров, В 1945 г. немцы бомбили город. Однако судьба сохранит Кремль и в наше время он стал символом Российской государственности.

Выравнивание текста по горизонтали задает атрибут ALING. Его возможные значения left-выравнивание по левому краю, center- выравнивание по центру right – по правому краю.

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

<Н1 ALIGN="center"><FONT COLOR="#FF6600">

Башни Московского Кремля</ FONT></Н1>

Таблицы.Таблицу формируют несколько различных тэгов. Таблица задается контейнером <TABLE></TABLE>, внутри которого содержится описание структуры таблицы и ее содержания.

Любая таблица состоит из строк, которые задаются контейнером <TR></TR> (Table Row), в который помещается описание ячеек.

Формат ячеек и их содержание помещается в контейнер <TD></TD> (Table Data), а заголовки ячеек в контейнер <ТН></ТН> (Table Header).

Толщина разделительных линий в таблице задается с помощью атрибута BORDER, а для выравнивания информации внутри ячейки по горизонтали применяют атрибут ALIGN.

21 Создать таблицу и внести в нее данные о башнях Кремля:

<TR>

<ТН>Башня</ТН

<ТН>Год сооружения</ТН>

<ТН>Архитектор</ТН>

<ТН>Высота</ТН>

</TR>

<TR>

<TD>Спaccкaя</TD>

<TD align="center">П.Соларио</ТD >

</TR>

…

<ТD>Беклемишевская</ТD>

<TD align="center">M.Руффо</ТD>

</TR>

</TABLE>

Практическое задание 2. Разработать Web-сайт «Виртуальный зоопарк», содержащий интересные факты из жизни «братьев наших меньших», а также шутки про животных. Для создания сайта воспользоваться текстовыми материалами, фотографиями и рисунками животных.

Контрольные вопросы:

• Что такое сайт?

• Что включает в себя сопровождение сайта?

• Что такое тег (атрибуты тега)?

• Этапы создания web-страницы?

• Какие теги используются для создания таблицы?

⇐ Предыдущая 58 59 60 61 62 636465 66 67 Следующая ⇒

Не нашли, что искали? Воспользуйтесь поиском:

vikidalka.ru - 2015-2024 год. Все права принадлежат их авторам! Нарушение авторских прав | Нарушение персональных данных