58159

Создание web-страниц. Работа с фоном страницы. Формат изображения

Конспект урока

Педагогика и дидактика

И осторожно BR Там где вожможно BR Тёмного облака BR Край отогнуть BR font font color= 008000 P lign=right Стёртые лица BR Забытые профили BR И многоточий упрямая нить. BR font DDRESS Ирина Леонардова DDRESS body html Теперь поговорим...

Русский

2014-04-22

68.5 KB

0 чел.

Урок 3. Создание web-страниц

Работа с фоном страницы. Формат изображения.

Таблица цветов.(записать в тетрадь!!!!!)

Аква

Aqua

#00FFFF

Темно-бардовый

Maroon

#800000

Черный

black

#000000

Темно-синий

Navy

#000080

Синий

Blue

#0000FF

Оливковый

Olive

#808000

Фуксия

Fuchsia

#FF00FF

Фиолетовый

Purple

#800080

Серый

Gray

#808080

Красный

Red

#FF0000

Зеленый

Green

#008000

Серебряный

Silver

#C0C0C0

Известь

Lime

#00FF00

Чирок

Teal

#009090

Желтый

Yellow

#FFFF00

Белый

White

#FFFFFF

1. Изменим формат текста на странице со стихотворением  И.Леонардовой, внеся изменение в листинг.

<html>    <head>        <title>моя первая страница</title>     </head>

  <body>

  <H4 align=center>Я схожу с ума</H4>

  <P align=right><B>какая досада</B>

 <P>    <IMG src="6.jpg">

<P align=center><I><B>урааааааааааааа</B></I><BR>

<FONT color=#FFFF00>Стихотворение</FONT> <BR>

<FONT size=6 face="Arial black">Стихотворение</FONT> <BR>

<BR>

<Font color=red size=5><b>

<P align=left>

Это не сложно <BR>

Это не важно <BR>

Просто отважно <BR>

В небо шагнуть <BR>

</font> </b>

<Font color=olive size=3>

<P align=center>

И осторожно, <BR>

Там, где вожможно <BR>

Тёмного облака <BR>

Край отогнуть <BR>

</font>

<font color="#008000">

<P align=right>

Стёртые лица, <BR>

Забытые профили <BR>

И многоточий упрямая нить. <BR>

Свет разливается <BR>

И проявляется <BR>

То, что уже никогда не забыть. <BR>

</font>

<ADDRESS> Ирина Леонардова </ADDRESS>

       </body>

</html>

   

Теперь поговорим о фоне страницы. по умолчанию он всегда белый. Для настройки фона используется атрибуты  тега <BODY></BODY>. Первый – background, второй – bgcolor. Bgcolor – отвечает за цвет фона. Цвет задается аналогично цвету текста. Background – указывает на картинку, которую устанавливают фоном странички

.

 

2. Создадим новую страницу с именем INDEX.html.

<html>

  <head>

     <title>моя домашняя страница   </title></head>

  <body bgcolor=gray>

<H4><center><Font size=5 color=red><I>ОБО МНЕ</I></font></center></h4>  

<center><IMG src="6.jpg"></center>

</html>

 3.   Для следующего изменения странички, продумайте фоновую картинку

и обработайте её в PhotoShop. Например: установите прозрачность

картинки 50% (панель layers, параметр Opacity) , задайте размер 100*100px.

(меню IMAGEimage size)

Измените серый фон страницы на фон – картинку.

<html>

  <head>

     <title>моя домашняя страница   </title></head>

  <body background="5.jpg">

<H4><center><Font size=5 color=red><I>ОБО МНЕ</I></font></center></h4>  

<center><IMG src="6.jpg"></center>

</html>

 

Кстати о картинках, которые Вы размещаете на странице. 

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

Для этого указываются реальные параметры картинки:  

<IMG src="6.jpg"  width=380 heigth=340 >

Параметр ALT задает альтернативную подпись, которая появляется при наведении курсора на картинку.

<IMG src="6.jpg"  width=380 heigth=340 alt=”я дома” >

Атрибут выравнивания  align определяет метод выравнивания изображения.

Align=top - вверху

Align=left - слева

Align=right - справа

Align=bottom - снизу

Align=middle –посредине 

<IMG src="6.jpg"  width=380 heigth=340 alt=”я дома” align=right>

Чтобы картинка не подпиралась текстом, устанавливаются отступы изображения от текста

Hspase=20 – отступ по горизонтали на 20 пунктов

Vspase=20 – отступ по вертикали на 20 пунктов

5. Измените листинг странички:

<html>

  <head>

     <title>моя домашняя страница   </title></head>

  <body bgcolor=gray background="5.jpg">

<H4><center><Font size=5 color=red><I>ОБО МНЕ</I></font></center></h4>  

<IMG src="6.jpg"  width=138 heigth=134 alt="я дома" align=right hspase=120 wspase=120>

<p>авоправолправоплрваполаврполавправоправолправолправоплравлоправлпора

авпрвалопрваолправполрвалпорвапловарплаовпрлавопрвалоправлопрвалопр

<p>авлопрвалоправлопрвалопралопрвалоправлопрвалопрвапловарпловапрваолпрвало

ваптвадпрвалдпрвалпрвадлпрвадлпрвадлпрвадлпрвадлпрвадлпрвадлпр

</html>

5.  Заполните текстом полученную страничку. Задайте формат текста. (самостоятельно) 

 

Задание 3. Добавьте фоновый рисунок на собственную страницу.

   


5.
jpg


 

А также другие работы, которые могут Вас заинтересовать

41671. Снятие ВАХ полупроводникового диода 100.29 KB
  Обратный ток диода значительно меньше прямого тока обратите внимание на различный масштаб измерения для прямого и обратного тока. Снимите последовательно зависимость Inp=fUnp а затем Iобр=fUo6p для диода. Полученные данные округлённые до сотых значений ампера при прямом включении и до десятых мкА при обратном включении диода занесите в таблицу 1.
41672. Определение электротехнических характеристик автомобильных кислотных аккумуляторных батарей 94.94 KB
  Характеристики АБ: 1 Марка АБ 2 Год выпуска 3 Материал моноблока 4 Материал сепараторов 5 Объем электролита л 6 Количество положительных пластин шт 7 Количество отрицательных пластин шт 8 Масса кг 9 Устанавливается на автомобиле 10 Емкость АБ Ач 11 Номинальное напряжение В 12 Максимальный разрядный ток А 13 Фирма изготовитель Характеристики АБ дать по справочной литературе для АБ. Комплект приборов и инструмента Э401 для ТО АБ обеспечивает проведение следующих операций: измерение уровня электролита в аккумуляторах ...
41673. Ознакомление со средой Autocad 2010 3.14 MB
  Интерфейс начальной настройки utoCD 2010 Ранние версии начиная с utoCD 2002 по utoCD 2008 включительно представляло интерфейс рабочего пространства в классическом виде которое представлено на рис. Рисунок 2 Классический вид рабочего окна utoCD 2010 Предлагается рассмотреть вид классического интерфейса окна программы. 3 приведена верхняя часть окна Рисунок 3 Строка заголовка строка меню панель быстрого вызова Рисунок 4 Окно работы с файлом Данное окно вызывается нажатием на после чего выпадает окно представленное на...
41674. Исследование типовых звеньев 193.53 KB
  3 Контрольные вопросы: Что такое передаточная функция Что такое переходная характеристика Что такое импульсная разгонная характеристика Как параметры каждого типового звена влияют на переходные характеристики системы Назовите основные типовые динамические звенья их передаточные и переходные функции. Что такое характеристическое уравнение Что такое нули и полюса передаточной функции Как их найти Какие показатели качества САР можно определить по переходной характеристике Таблица 1.3 Контрольные вопросы: Что такое передаточная...
41675. ФАКТОРНОЕ ИССЛЕДОВАНИЕ ПРОИЗВОДИТЕЛЬНОСТИ ГРУЗОВОГО АВТОМОБИЛЬНОГО ТРАНСПОРТНОГО СРЕДСТВА 60.28 KB
  Исходные данные: Грузоподъемность автомобиля q т Время в наряде Т ч Коэффициент использования грузоподъемсти γ Коэффициент использования пробега β Время постоя под загрузкойразгрузкой t зрч Техническая скорость Vт км ч 10 8 08 09 02 45 Расчетные формулы: Расчет суточной производительности автомобиля Q в тоннах и P в тоннокилометрах производится по следующим формулам: где: Tн время работы автомобиля в наряде; vт средняя техническая cкорость движения автомобиля км ч; qн номинальная...
41676. Исследование однофазного трансформатора 228.47 KB
  Методическое указание Самара Самарский государственный технический университет 2008 Печатается по решению Редакционноиздательского совета СамГТУ УДК621 313 Исследование однофазного трансформатора: метод. Содержат практические рекомендации по экспериментальным методам определения основных характеристик однофазного трансформатора по обработке опытных данных и оформлению отчетов а также контрольные вопросы. Такое изменение или трансформация переменного тока...
41677. Основы работы в MS Excel 192.46 KB
  Знакомство с приложением MS Excel. Приобретение элементарных навыков работы в среде пакета. Ввод и редактирования данных. Основные принципы ввода и редактирования данных изложены во многих книгах по основам работы в MS Excel [3]. Рассмотрим работу в среде пакета на конкретном примере.
41678. Исследование источника дискретной информации 165.5 KB
  А при изпользлвании кода Хаффмена избыточность уменьшилась до 0,51%, из этого следует что избыточность при кодировании этим методом уменьшилась в 16 раз. А при использовании кода Шеннона – Фано избыточность уменьшилась всего в 5,5 раз. Исходя из полученных значений, в нашем случае эффективнее использовать методику кодирования Хаффмена.