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


 

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

80505. Управління інноваційними інвестиціями підприємства 181 KB
  Управління інноваційними інвестиціями підприємства План лекції: Економічна сутність інновацій та інноваційного процесу Інструменти державної підтримки інноваційної діяльності в Україні. Економічна сутність інновацій та інноваційного процесу Основною формою реальних інвестицій є інноваційні інвестиції які реалізуються в процесі інноваційної діяльності підприємства.
80506. СУТНІСТЬ, МЕТА ТА ФУНКЦІЇ ІНВЕСТИЦІЙНОГО МЕНЕДЖМЕНТУ В УМОВАХ РИНКУ 249 KB
  Економічна сутність інвестицій та інвестиційної діяльності підприємств Поняття інвестиція виступає первинною категорією яка є базою побудови ієрархії решти категорій що відображають відтворення основного та оборотного капіталів. В різних розділах науки і різних галузях практичної діяльності зміст поняття інвестиції має свої особливості а саме: в макроекономіці інвестиції є частиною сукупних витрат що складаються з витрат на нові засоби виробництва інвестицій в житло і приросту товарних запасів. Категорія інвестиції входить...
80507. УПРАВЛІННЯ РЕАЛЬНИМИ ІНВЕСТИЦІЯМИ ПІДПРИЄМСТВА 99 KB
  На більшості підприємств реальне інвестування є основною формою інвестиційної діяльності. Реальне інвестування має ряд особливостей які обумовлені економічною потребою їх здійснення а саме: Процес стратегічного розвитку підприємства є сукупністю реалізованих інвестиційних проектів які повязані з успішним проникненням на товарні і регіональні ринки збільшенням операційних активів і зростання ефективності їх використання підвищенням ринкової вартості підприємств; Тісний звязок з операційною діяльністю через необхідність забезпечення...
80508. Політика управління портфелем фінансових інвестицій підприємства 106 KB
  Оцінка ефективності інвестування в окремі фінансові інструменти. Оцінка ефективності інвестування в облігації. Оцінка ефективності інвестування в акції. Оцінка ризиків окремих фінансових інструментів інвестування.
80509. Стратегія управління формуванням інвестиційного капіталу підприємства 99.5 KB
  Поняття інвестиційних ресурсів підприємства принципи передумови та порядок розроблення стратегії їх формування. Політика формування інвестиційних ресурсів підприємства. Поняття інвестиційних ресурсів підприємства принципи передумови та порядок розроблення стратегії їх формування. Політика формування інвестиційних ресурсів підприємства.
80510. Автоматизація процесів оцінювання транспортних засобів 483.43 KB
  Шаблони і створені акти можуть редагуватися в Word rtf формат так само можуть створюватися власні і змінюватися наявні в програмі друковані форми: калькуляція страхове відшкодування і т. Програма дозволяє в автоматичному режимі здійснювати: пошук двигуна за маркою транспортного засобу та отримати вичерпну інформацію про модель транспортного засобу на яку він був встановлений його обєм тип потужність характеристики та період випуску моделі транспортного засобу;  пошук моделі транспортного засобу за кодом...
80511. Автоматизація процесів оцінювання нематеріальних активів 52.73 KB
  Автоматизація процесу оцінки гудвіла. Автоматизація процесу оцінки товарних знаків. Автоматизація процесу оцінки гудвіла До теперішнього часу склалися дві паралельно існуючі традиції перекладу англійського терміну goodwill. В даному випадку тобто в контексті вартісної оцінки нематеріальних активів переважно другий спосіб переведення хоча він і виглядає декілька незграбним.
80512. Автоматизація процесів оцінювання вартості підприємства 157.79 KB
  Для побудови зазначених типів моделей використовуються як власні методи моделювання RIS так і різні відомі методи та мови моделювання зокрема UML. Автори методу EricssonPenker створили свій профіль UML для моделювання бізнеспроцесів EricssonPenker Business Extensions ввівши набір стереотипів які описують основні категорії бізнесмоделі: процеси ресурси правила і цілі діяльності підприємства. Мова UML використовується також в методі який є частиною технології Rtionl Unified Process фірми IBM.
80513. Інформаційні системи і технології, їх роль в управлінні економікою 26.08 KB
  Наприклад під технологією матеріального виробництва розуміють процес який визначається як комплекс засобів і методів обробки виготовлення зміни стану властивостей форми сировини чи матеріалу. Тоді справедливим буде таке означення: Інформаційна технологія це процес або сукупність процесів обробки інформації. Оскільки на вході та виході ІТ є не матерія і не енергія а інформація то: інформаційна технологія це сукупність процесів що використовує засоби та методи накопичення обробки і передачі первинної інформації для отримання...