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


 

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

43333. Интеграл Лебега-Стилтьеса, функции с ограниченным изменение 551 KB
  Рассмотрим подробнее заряды на -алгебре, порожденной полуинтервалами на отрезке. Каждому заряду (как и мере) поставим в соответствие функцию g. Опишем класс функций на , которые соответствуют зарядам. Построение заряда аналогично построению меры Лебега-Стилтьеса по неубывающей функции.
43335. Підсилювач низької частоти 5.68 MB
  Розрахуємо максимальну напругу в навантаження по формулі: В 1 Знайдемо максимальний струм що проходить через навантаження: 2 Розрахуємо необхідний коефіцієнт підсилення підсилювача за формулою: 3 Знайдемо орієнтовну кількість каскадів попереднього підсилення за наступною формулою: 4 Отриману за формулою 4 кількість каскадів округляють до найближчого цілого непарного числа в більшу сторону так як схема з СЕ дає зсув фази на 180 n = 3 Вихідний каскад ставиться на виході підсилювача і забезпечує підсилення...
43336. Регіональні проблеми безробіття в Україні 267.5 KB
  Як економічна категорія безробіття відображає економічні відносини щодо вимушеної незайнятості працездатного населення. Актуальність теми полягає в тому що структурні зрушення які відбуваються на сучасному етапі розвитку національної економіки призводять до суттєвих негативних змін на ринку праці зокрема до достатньо значних обсягів і рівня безробіття економічно активного населення і як наслідок до неефективного використання робочої сили. При цьому розвиток підприємництва малого і середнього бізнесу та інші ринкові перетворення не...
43337. Обхід дерев 22.23 MB
  Теоретична частина Обробка даних у вершинах дерева Лівий спадний обхід Лівий висхідний обхід Лівий змішаний обхід Приклад лівого спадного обходу LPreorder 10 Перелік використаної літератури 11 Код програми реалізації обходу дерев мовою С. На сьогоднішній день дерева є найбільш поширеною структурою. Вони популярні серед людей з технічним напрямком занять і не дарма: дерева забезпечують найшвидші і найоптимальніші умови для знаходження елемента серед інших в певній структурі. Звичайно існують...
43339. Проектування фундаментів під 9-поверхову блок секцію на 36 квартир 530.5 KB
  Результати лабораторних визначень фізикомеханічних характеристик цього ґрунту наведені в табл. Результати лабораторних визначень фізикомеханічних характеристик ґрунту № 102 Таблиця 3 № ґрунту Фізикомеханічні характеристики ґрунту ρs г см3 ρ г см3 W WL WP E МПа φ град. Остаточна назва ґрунту: суглинок твердий Визначаємо розрахункові характеристики ґрунту питому вагу {м с2 прискорення вільного падіння} кут внутрішнього тертя питоме зчеплення для розрахунків за Ію і ІІю групами граничних станів. Розрахункове значення...
43340. Розробка веб-сайту електронної бібліотеки 394.5 KB
  Завданням даної курсової роботи є розробка веб-сайту електронної бібліотеки. Веб-сайт повинен надавати можливість користувачам виконувати навігацію по категоріям та завантажувати необхідні їм книги. Також необхідний пошук по імені автора, назві книги та по опису. Для наповнення бібліотеки та редагування її вмісту необхідно реалізувати адміністративну частину сайту
43341. РОЗРОБКА ПРОГРАМНОГО КОМПЛЕКСУ ПО ЗНАХОДЖЕННЮ НАЙКОРОТШИХ МАРШРУТІВ НА ДТМ 871 KB
  Транспортні задачі, у яких вершинами графа є пункти, а ребрами – дороги (автомобільні, залізні й ін.) і/або інші транспортні (наприклад, авіаційні) маршрути. Інший приклад – мережі постачання (енергопостачання, газопостачання, постачання товарами і т.д.), у яких вершинами є пункти виробництва й споживання, а ребрами – можливі маршрути переміщення (лінії електропередач, газопроводи, дороги і т.д.).