10 КЛАС












УРОК 50





УРОК 51

Кросбраузерна оптимізація сторінок сайту

Тестування кросбраузерної сумісності (важлива складова частина розробки сайту) – це перевірка того, як виглядають всі веб-сторінки при перегляді в різних браузерах (наприклад, в таких веб-переглядачах як Chrome, Firefox або Internet Explorer). 
Сучасні користувачі мережі Інтернет мають широкий вибір веб-переглядачів (браузерів). Якщо ви не проведете тестування та/або не проведете зміну верстки і стилів під найпопулярніші браузери, ви просто втратите багатьох потенційних відвідувачів, оскільки для них ваш сайт буде недоступним або важким для перегляду. Це ж стосується і мобільної верстки (оптимізації сайту під мобільні пристрої).
Існує ряд труднощів, які можуть бути у користувачів при відвідуванні вашого сайту. Зважаючи на велику кількість змінних – в тому числі і тих, що не залежать від вас, — кожен відвідувач, можливо, буде бачити ваш сайт трохи інакше, ніж ви того б хотіли. 

Ось основні елементи, які можуть викликати проблеми із відображенням сайту:

апаратне забезпечення користувача, програмне забезпечення, більш ранні версії браузерів, деякі відвідувачі можуть не оновлювати свої браузери протягом дуже довгого часу, і це може викликати конфлікти сумісності при перегляді вашого сайту (особливо, якщо він виконаний з використанням найсучасніших технологій)

Інструменти для тестування кросбраузерної сумісності


Для визначення підтримки елементів HTML5 та CSS3 в різних версіях браузерів скористайтеся сайтом 

Якщо для вашого сайту критично важлива підтримка в старих браузерах, можете скористатися наступними плагінами і JavaScript-бібліотеками: HTML5 Shiv, Modernizr, Respond. 
УРОК 52
Розміщення графічних об'єктів на веб-сторінці


Створіть HTML-документи. (1* скачати фото автомобіля)
Файл avto.html:
<HTML>
<TITLE>Автомобілі</TITLE>
<BODY>
<IMG SRC="1*.jpg" ALIGN=LEFT HSPACE=10 VSPASE=10>
<FONT SIZE=5><B>
Характеристика автомобіля
</B></FONT>
</BODY>
</HTML>

Файл music.html: (2* скачати фото музичного гурту)
<HTML>
<TITLE>Музика</TITLE>
<BODY>
<IMG SRC="2*.jpg" ALIGN=LEFT HSPACE=10 VSPASE=10>
<FONT SIZE=5><B>
Дискографія гурту
</B></FONT>
</BODY>
</HTML>

Файл video.html: (3* скачати кадри з фільму)
<HTML>
<TITLE>Улюблений фільм</TITLE>
<BODY>
<IMG SRC="3*.jpg" ALIGN=LEFT HSPACE=10 VSPASE=10><FONT SIZE=5><B>
Короткий опис фільму
</B></FONT>
</BODY>
</HTML>

Файл sport.html: (4* скачати фото спортивних змагань)
<HTML>
<TITLE>Спорт</TITLE>
<BODY>
<IMG SRC="4*.jpg" ALIGN=LEFT HSPACE=10 VSPASE=10><FONT SIZE=5><B>
Опис улюбленого виду спорту
</B></FONT>
</BODY>
</HTML>

УРОК 53
Створення GIF-анімації.

УРОК 54
Карти посилань.
Формування карти гіперпосилань
Графічну карту посилань створюють за допомогою кількох тегів.

 У тегу <IMG> визначають атрибут SRC, щоб задати зображення, і ат-
рибут USEMAP, значенням якого є ім'я карти (має починатися
символом #). Власне карту створюють за допомогою тегу <МАР>
з атрибутом NAME, який містить ім'я карти (визначене в атрибуті
USEMAP, але без символу #) та тегу </МАР>. Між ними записують
теги <AREA>, які задають параметри гарячих областей. При цьому
використовують такі атрибути:
• HREF — визначає гіперпосилання, пов'язане з областю;
• SHAPE — визначає форму області, його значеннями можуть
бути:
• rec t — прямокутник;
• polygone або poly — багатокутник;
• circl e — коло;
• COORDS — містить координати області у вигляді взятого в лапки
списку чисел, розділених комою. Для прямокутника задають чотири числа — координати верхнього лівого і правого ниж-
нього кутів, для багатокутника — послідовні координати кож-
ного кута, для кола — координати центра і радіус.

 Переваги та недоліки карт гіперпосилань

 Карти-зображення доцільно використовувати в таких випадках.
• Для побудови просторових зв'язків, зокрема географічних, які
непросто задати окремими кнопками або текстом. Як приклад
можна навести карту країни, поділену на області, кожна з яких
пов'язана гіперпосиланням із відповідною веб-сторінкою.

 • Як навігаційне меню, розміщене на кожній сторінці. Наприк-
лад, замість того щоб на кожній сторінці настроювати зв'язки
з різними частинами сайту, достатньо помістити карту гіперпо-
силань. Таке меню полегшує навігацію для відвідувача сайту.

 Хоча карти-зображення є популярними, їх не вважають обов'яз-
ковими атрибутами веб-сторінок, оскільки вони мають певні
недоліки.

 • Якщо не передбачене альтернативне текстове меню, то для
користувачів, які не можуть завантажити графіку або відклю-
чили її, не залишається ніяких засобів навігації.

 • Веб-сторінки з картами гіперпосилань потребують більше часу
для завантаження порівняно з текстовими сторінками.

 • У зображенні не завжди можна визначити області, які є га-

рячими.

 Створити у редакторі "блокнот":
(замість крапок підставляємо свої значення)

 <HTML>
<TITLE>Дистанційне навчання</TITLE>
<BODY BGCOLOR=cyan>
<H1>Предмети</Н1>
<Н2>..........</Н2>
<Н2>..........</Н2>
<Н2>..........</Н2>
</BODY>
</HTML>

 <HTML>
<TITLE>Теми</TITLE>
<BODY BGCOLOR=cyan>
<Н1>..........</Н1>
<Н2>..........</Н2>
<Н2>..........</Н2>
<Н2>..........</Н2>
</BODY>
</HTML>

 <HTML>
<TITLE>Перспективи дистанційного навчання</TITLE>
<BODY BGCOLOR=cyan>
<Н1>.........</Н1>
<Н2>.........</Н2>
<Н2>..........</Н2>
<Н2>..........</Н2>
</BODY>
</HTML>


УРОК 55 (06.04)

УРОК 56 (08.04)
Теоретичний матеріал "Авторське право"
                                      УРОК 57 (13.04)

Анімаційні ефекти

Ввести :

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>.....</title>

<style type = "text/css">

div {

border: 4px double black;

background: yellow;

padding: 10px;

width: 200px;

height: 30px;

}

div:hover {

width: 300px;

transition: 2s;

font-size:xx-large;

}

</style>

</head>

<body> 

<div>...</div>

</body>

</html>

Основний синтаксис додавання зображень на сторінку:
<img src="шлях/до/зображення.jpg" атрибути>

<img> - непарний тег, і "src" - обов'язковий атрибут з адресою

 зображення
.
Також часто використовують атрибути: "alt", "title", "width", 

"height", і т.д.

"alt" - альтернативний текст для зображення, тобто текст, 

який буде показуватись, якщо картинка не може бути 

завантажена.

"title" - текст, який буде показано, при наведенні вказівника

 миші на картинку.

"width" - довжина зображення.

"height" - висота зображення.

Атрибути

Визначити відповідні атрибути:

Визначає як малюнок буде вирівнюватися по краю і спосіб обтікання текстом

Альтернативний текст для зображення.

Товщина рамки навколо зображення.

Висота зображення.

Горизонтальний відступ від зображення до навколишнього контенту.

Каже браузеру, що картинка є серверної картою-зображенням.

Вказує адресу документа, де міститься анотація до картинки.

Адреса зображення низької якості.

Ширина зображення.

Шлях до графічного файлу.

Вертикальний відступ від зображення до навколишнього контенту.

Посилання на тег <map> , що містить координати для клієнтської карти-зображення.


                  УРОК 58, 59 (15.04, 22.04)











Кнопки


Для відправки введених даних на формі використовуються кнопки. 
Для створення кнопки використовується або елемент button:

<button name="send">Відправити</button>
або елемент input: 
<input type="submit" name="send" value="Відправити" />

Елементи форми


Форма може містити поля для введення текстової інформації,
списки для вибору заздалегідь визначених відповідей, прапорці, 
перемикачі, кнопки та інші елементи керування. 
Розглянемо докладніше деякі з них.


Текстові поля


Для введення текстових даних у спеціальні поля використовують тег <INPUT>, в якого атрибут TYPE має значення t e x t :

<INPUT TYPE="text">
Інші атрибути тегу <INPUT>:
• NAME — ім'я змінної, в якій зберігається введене значення;
• VALUE — початкове значення;
• SIZE — довжина текстового поля;
• MAXLENGTH — максимальна кількість символів для введення.





УРОК 60 (24.04)




УРОК 61 (27.04)
Створення та налагодження веб-сторінки.
Створити презентацію за планом:
  1. Створення веб-сторінки.
  2. Налагодження веб-сторінки.
  3. Налагодження інтерактивної веб-сторінки.
  4. Використання форм.
  5. Веб-програмування.
  6. Висновок.

УРОК 62 (29.04)
Створити опорний конспект з теми: "Хостинг сайту".


УРОК 63 (04.05)
  1. Назвіть основні етапи створення сайту?
  2. Назвіть найбільш поширені структури сайтів.
  3. Які особливості створення сайтів на Google платформі?
  4. Що розуміють під поняттям «хостинг»?


Практична робота
  1. Створіть сайт на платформі Google Site/
  2. Створити веб-сторінки (з теми, що вас цікавить), використовуючи відповідний веб-інтерфейс.
  3. Зв’язати гіперпосиланнями кілька сторінок (на одну із веб-сторінок додати гіперпосилання інших).
  4. Додайте інформацію про автора проекту.
  5. Перевірте роботу сайту через браузер, використовуючи домене ім’я власного сайту.


УРОК 64 (06.05)
На основі статті "Інтерфейс користувача ", створити правила ергономічного розміщення відомостей на веб-сторінці.
                          КОНТРОЛЬНА РОБОТА (25.05)
1. Мова розмітки гіпертексту — це:
а) сукупність команд для настроювання Інтернету;
б) спеціальні команди для створення зв'язку між певними веб-сторінками;
в) сукупність та правила розташування спеціальних кодів, які керують форматуванням, вставленням ілюстрацій, таблиць і зв'язком з іншими документами;
г) спеціальні команди та правила, призначені для створення веб-сторінок;
д) засіб для відтворення веб-сторінок.

2. Атрибут — це:
а) характеристика тегу, що впливає на створюваний ним ефект;
б) характеристика кольорів тексту та тла веб-сторінки;
в) характеристика тегу, що визначає місце його розташування
в HTML-документі;
г) властивість тегу;
д) параметри відтворення веб-сторінки на екрані.

3. Зробити малюнок тлом веб-сторінки можна за допомогою тегу:
а) <BODY BACKGROUND="URL-aflpeca графічного файлу">;
б) <IMG SRC="URL-адреса графічного файлу">;
в) <BODY IMG SRC="URL-адреса графічного файлу">;
г) <IMG BACKGROUND="URL-адреса графічного файлу">;
д) <BODY BGCOLOR="URL-адреса графічного файлу">.

4. Малюнок 1.jpg можна перетворити на гіперпосилання на веб-сторінку 1.html за допомогою коду:
а) <А HREF="l.html"><IMG SRC="1.jpg"></A>;
б) <А HREF="1.jpg"><IMG SRC="1.html"></A>;
в) <A HREF="l.jpg"><IMG SRC="l.html" NAME="1.jpg"></A>;
r) <A HREF="l.jpg"><IMG SRC="l.jpg"
NAME="l.html"></A>;

5. Тег — це:
а) код для визначення структури веб-сторінки;
б) програма керування виглядом текстових повідомлень та малюнків на веб-сторінці;
в) настроювання вигляду частини веб-сторінки за допомогою спеціального коду;
г) розміщення фото на сторінці.



6. Розмістити на веб-сторінці малюнок можна за допомогою тегу:
а) <BODY BACKGROUND="URL-адреса графічного файлу">;
б) <IMG SRC="URL-адреса графічного файлу">;
в) <BODY IMG SRC="URL-адреса графічного файлу">;
г) <IMG BACKGROUND="URL-адреса графічного файлу">.

7. Висоту та ширину графічного об'єкта, розміщеного на веб-сторінці,
можна задати:
а) у дужках після URL-адреси файлу зображення;
б) за допомогою атрибутів WIDTH та HEIGHT у тегу IMG;
в) за допомогою атрибута ALT;
г) за допомогою атрибута SRC;
д) за допомогою атрибутів WIDTH та HEIGHT у тегу BODY.
8. Що дозволить зробити даний тег <table border=”3”>?
9. Що дозволить код (розпишіть)
<TR><TD><A HREF=”foto1.html”><IMG SRC=”foto1.jpg”  WIDTH=200 HEIGHT=150 ALT=”Моя родина”></TD>                                                                                                 
10. Що дозволить код (розпишіть)
  <HTML> <TITLE>Папужка</TITLE><BODY BACKGROUND=" 11. gi f " >

<IMG SRC="richi.jpg" ALIGN=LEFT HSPACE=10 VSPASE=10><FONT SIZE=5><B>       

Комментариев нет:

Отправить комментарий

Подписаться на: Сообщения (Atom)