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


 

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

54905. MY PLANS FOR FUTURE 73 KB
  Objectives: to revise and enrich students vocabulary on the topic; to practise reading for gist and then for more intensive understanding; to improve learners skills of listening and comprehension; to provide opportunities for developing learnersspeaking and writing skills ( group work, free discussion); to present students projects; to broaden students knowledge of the topic.
54906. Попеременный двухшажный ход, одновременные классические ходы 48.5 KB
  Создать представление о предстоящей деятельности на уроке Выполнить переход на учебную лыжню Подготовить все системы организма к дальнейшей работе Увеличить эластичность мышц и подвижность суставов Увеличить подвижность плечевого сустава Увеличить подвижность коленного сустава Увеличить эластичность задней поверхности бедра Увеличить подвижность позвоночника и эластичность прямых мышц спины Способствовать развитию равновесия Отработать детали техники классических лыжных ходов Учить переносу массы тела на скользящую лыжу...
54907. План анализа стихотворения для урока литературы 30 KB
  Итак Восприятие: Какое впечатление произвело на вас стихотворение Чем привлекло среди других произведений поэта его современников авторов обращавшихся к этой теме Какие картины возникают в вашем воображении когда вы читаете стихотворение Как лучше его читать вслух или про себя Почему Каким настроением проникнуто произведение Меняется ли оно Почему Истолкование: Тема стихотворения ситуация воплощенная в произведении которая иногда может быть обозначена уже в названии: Весенняя гроза К морю Незнакомка ; иногда название...
54909. Виды пиломатериалов, технология их производства и область применения 110 KB
  Задачи урока: познакомить учащихся с технологией получения и обработки древесины; применением пиломатериалов. Учебник для учащихся 6 класса общеобразовательных учреждений вариант для мальчиков. Организация учащихся запись присутствующих в журнале ознакомление с темой данного занятия назначение дежурных.
54910. Житло. Домашні обовязки 99.5 KB
  Today we’ll continue speaking about your home duties. We’re going to lay the table, cook some dishes, do some grammar exercises, listen to the text about different household machines and of cause to have a little rest after hard work.
54911. РОССИЯ ПРИ ПАВЛЕ I 109.5 KB
  Тип урока: комбинированный Цели урока: Образовательные: определить цели задачи осветить основные направления внутренней и внешней политики Павла I и подвести ее итоги; Воспитательные: указать на возможность негативных последствий изоляции ребенка Павла I от родителей постепенно формирующаяся враждебность по отношению к родителям неконтролируемая самостоятельность ожидание подходящего случая все изменить; вызвать сочувствие к судьбе простых людей крестьян и указать на то что облегчение жизни людей зачастую зависит от...
54912. Техники бесшажного хода. Техника одновременного одношажного хода 40.5 KB
  Проверить наличие спортивной одежды соответствие её погодным условиям и видам занятия Проверка исправности и комплектации. В2 одновременным бесшажным ходом 27 минут. 5минут 7минут 10минут 5минут Следим за правильным выполнением техники. Очистка и сдача лыж 5 минут 1 минута 2 минуты 1 минута 1 минута В одну шеренгу.