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


 

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

52871. СТВОРЕННЯ ТА ВИКОРИСТАННЯ ЕЛЕКТРОННОГО СУПРОВОДУ УРОКІВ АНГЛІЙСЬКОЇ МОВИ 319.5 KB
  Важливого значення з огляду на це набуває питання використання у педагогічному процесі мультимедійних засобів навчання МЗН. Іноземна мова це навчальний предмет який в силу своєї специфічності створення для учнів штучного мовного середовища передбачає найбільш гнучке і широке використання різних технічних засобів навчання. Головною метою навчання іноземних мов у загальноосвітніх навчальних закладах є надбання учнями вмінь та навичок грамотного використання іноземної мови у реальних життєвих ситуаціях не тільки повсякденного але й...
52872. ШЛЯХИ ЕФЕКТИВНОГО ВИКОРИСТАННЯ ПІСЕННОГО МАТЕРІАЛУ НА УРОКАХ АНГЛІЙСЬКОЇ МОВИ 123 KB
  Музика, а саме пісня іноземною мовою, має великі можливості для реалізації навчально-виховних завдань на уроках англійської мови. Важлива роль полягає саме в методично правильному доборі пісенного матеріалу та методики його використання.
52874. ШЛЯХИ ЕФЕКТИВНОГО ВИКОРИСТАННЯ ПІСЕННОГО МАТЕРІАЛУ НА УРОКАХ АНГЛІЙСЬКОЇ МОВИ 164.5 KB
  У структуру гри як процесу входять: а ролі узяті на собі граючи; б ігрові дії як засіб реалізації цих ролей; в ігрове вживання предметів тобто заміщення реальних речей ігровими умовними; г реальні відносини між граючи; д сюжет зміст область дійсності умовно відтворена в грі. Рольові ігри Ідея використання рольової поведінки на уроці одержала підкріплення з боку теорії ролей розробленої соціологами і соціопсіхологамі. Ігри позитивно впливають на формування пізнавальних інтересів школярів сприяють усвідомленому освоєнню іноземної...
52875. Особливості навчання англійської мови молодших школярів 216 KB
  У сучасних умовах іноземна мова розглядається як засіб спілкування і залучення до культури іншого народу. Це поступово стає домінуючою стратегією викладання іноземної мови в початковій школі. Особлива увага приділяється навчанню іноземної мови школярів в початкових класах, бо в дитинстві схильність до вивчення мов набагато більша.
52876. «В чарівній країні англійської мови» «In the Magic Land of English» Сценарій позакласного заходу з англійської мови (7 клас) 138 KB
  Every season is beautiful in its own way but Autumn is a wonderful season. It's like an old woman who is still beautiful and comes to breakfast in her diamonds. Who lights a million candles over the gabled roof and never looks back to see them black, The trees are beautiful in their fantastic yellow, red, golden and brown dresses. The ground is like a carpet of many colours.And everybody feels happy.
52877. The Week of English 1.46 MB
  Аfter World War II Pablo Picasso, was responsible for the decisive use of the dove of peace: his lithograph designed for the international peace congress in Paris, 1949, features the white ancestor of a new family of doves. Since then, graphic artists have produced an endless series of doves of peace in different shapes.
52878. Будемо святкувати. Let’s celebrate 228.5 KB
  Today's topic is «Let’s celebrate». Сьогодні нас запросили на вечірку до ведмедика. You are invited to the teddy bear birthday party. Але шлях до нього далекий і важкий. But this way is long and difficult. Він зачарований. It is magic. Тут ви можете побачити багато метеликів. Here you can see a lot of butterflies. Вони теж непрості, кожен має якесь завдання, яке нам треба виконати, щоб потрапити на свято. They are not simple, everyone has the task for you, which you should do to come to the party. Та вам треба бути дуже уважними. But you should be very attentive.