29.11.2021 - 05.12.2021 Зображення на веб-сторінці

 

29.11.2021 - 05.12.2021

Тема: Шрифтове оформлення текстових блоків веб-сайту.

Створення текстових блоків на веб-сторінці.

 

Теоретична частина

 "Тестування учасника  ІКТ-олімпіади"

Запитання 1. Як можна виділяти окремі частини тексту на веб-сторінці?

Відповідь:  Для виділення окремих частин тексту можна скористатися наступними стилями:

Y - жирний (Bold);

I - курсив (Italic);

U - з підкресленням (Underline);

S - з перекресленням (STRIKE);

Нижче наведена таблиця команд виділення тексту.

Текст, що відображається

Зразок запису в форматі HTML

Виділення тексту жирним шрифтом

Виділення <b> тексту </b> жирним шрифтом

Виділення тексту курсивом

Виділення <i> тексту </i> курсивом

Виділення тексту підкресленням

Виділення <u> тексту </u> підкресленням

Виділення тексту перекресленням

Виділення <strike> тексту </strike> перекресленням

Для зміни розміру текстових символів скористайтеся командами:

<FONT SIZE = +-i > </FONT>, де i в межах від 1 до 7 відносно початкового розміру букв.

Крім того, можна збільшити або зменшити висоту шрифту за допомогою команд <BIG> і <SMALL>. Ці команди використовуються в парі з командами </BIG> і </SMALL>.

Ще дві пари команд:

<SUB> і </SUB> - підрядковий індекс, наприклад, H₂SO₄.

<SUP> і </SUP> - надрядковий індекс, наприклад, (a² - b²) = (а - b)(а + b).

Всі вищенаведені команди визначають фізичне форматування символів. Ви задаєте конкретну зміну характеристик символів.

Крім того, є логічне форматування символів - Ви даєте опис, а броузер вирішує як змінювати характеристики. Загалом, хто довіряє броузеру - користуйтеся цими командами. Вони виглядають таким чином:

<CITE>Цитата</CITE>

<EM>Особливо важливий текст</EM>

<STRONG>Сильне виділення тексту</STRONG>

<KBD>Текст, введений користувачем</KBD>

<CODE>Лістинг програми</CODE>

<SAMP>Послідовність літералів</SAMP>

<VAR>Ім’я змінної</VAR>

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

Шрифт задається за допомогою команди: FONT FACE

 

Запитання 2. Як опрацьовувати межі таблиці?

Відповідь:      Таблиця з нестандартними відстанями між осередками і кордоном.

Отримавши певні навички роботи з кордоном таблиці, ви можете приступати до управління її відображенням. За допомогою атрибута frame будемо керувати відображенням зовнішнього кордону, а за допомогою атрибуту rules – внутрішніми кордонами таблиці.

Атрибут frame може приймати такі значення:

above – відображається тільки верхня лінія кордону;
below – видно тільки нижня лінія кордону;
box – відображається зовнішній кордон таблиці;
border – видно зовнішня межа таблиці (аналогічно box);
hsides – відображаються тільки горизонтальні лінії кордону;
lhs – видно тільки ліва лінія кордону;
rhs – відображається тільки права лінія кордону;
void – зовнішня межа таблиці не відображається;
vsides – видно лише вертикальні лінії кордону.

Frame і rules – це нові атрибути в HTML, вони підтримуються тільки останьними версіями браузерів.

Атрибут rules може приймати такі значення:

all – кордон відображається навколо кожної клітинки;
cols – видно лише вертикальні кордону між стовпцями;
groups – відображаються тільки вертикальні межі між групами стовпців або горизонтальні межі між групами рядків;
none – межі між осередками не відображаються;
rows – видно тільки горизонтальні межі між групами рядків.

 

Запитання 3. Як вбудовуються зображення на веб-сторінку?

Відповідь. Для вбудовування зображень в HTML-документ застосовується елемент IMG. Він має обов’язковий атрибут src, значенням якого має бути адреса вбудованого зображення.
Найпростіший варіант запису для включення картинки: <IMG src=”image.jpg”>. При такому запису розмір картинки на екрані буде відповідати її реальному розміру.

У лістингу продемонстрований найпростіший варіант вбудовування картинки.
<html>

<head>

<title>Вбудовування зображення</title>

</head>

<body>

<img src=”image.jpg”/>

</body>

</html>

Запитання 4. Як вбудовується гіперпосилання на веб-сторінку?

Відповідь: Між тегами <A> і </ A> розташовується саме текст посилання.
Адреса документа для переходу записується в елементі A як значення атрибута href. Таким чином, переміщення по сайту стає зручним, легким і прозорим для користувача. Йому абсолютно все одно, де знаходиться документ, на який вказує посилання, він бачить тільки текст опису. У лістингу представлений приклад створення посилання на HTML-сторінку і малюнок.

<html>
<head>
<title> Посилання </title>
<body>
<a href=”aboutme.html”> Про мене </ a> <br />
<a href=”myfoto.jpg”> Моє фото </ a>
</body>
</html>

 

 

Практична частина

 

Практична робота. 

 

Мова розмітки HTML для кодування таблиці.

Приклад кодування властивостей  таблиці

на веб-сторінці

 мовою розмітки HTML

 

Завдання 1. Набрати в текстовому редакторі Блокнот наступний текст html-кодів і зберегти його у файл з розширенням html.

 

 Скопіювати HTML-кодування веб-сторінки у цьому завданні 1.

4) Відкрити текстовий редактор Блокнот. І вставити на сторінку коди.

5)Зберегти даний документ під Іменем index1.html на Робочий стіл.

6) Відкрити даний документ у веб-браузері. Протестувати активні слова на веб-сторінці

7) надіслати скріншот утвореної веб-сторінки на e-mail:  vinnser@gmail.com

 

 

Кодування простої HTML-таблиці розміром 3х3,

яка складається з трьох стовпців і трьох рядків

<html>

<head>

<title> Проста HTML-таблиця </title>

</head>

<BODY bgcolr=”#00bb99” text=”#00000g” link=”#222222” vlink=”#444444” alink=”#111111” background=”bg.jpg”>

<p><Font size="50" color=”#gggggg” face=”Arial, Times New Roman, Serif”> Зразок таблиці</font>.

<P><Font size=40" color=”#000000” face=”Arial, Times New Roman, Serif”>Заповніть таблицю малюнками і гіперпосиланями, змініть колір тла комірок в таблиці</font>

<P><Font size="15" color=”#000000” face=”Arial, Times New Roman, Serif”>

<table border="3" align=”left” cellspacing=”2”  cellpading=”1” widht=”500”>

<caption  align=”midlle”>   Це заголовок таблиці <img src=”image.jpg”/></caption>

<tr> 

 <td  align=”midlle”  valign=”top” ” widht=”150"  bgcolor="60ff00" height="97"> Заголовок 1 <img src=”image.jpg”/> </td>

 <td align=”left”  valign=”bottom” ” widht=”125"  bgcolor="11ff00" height="87">Заголовок 2 <img src=”image.jpg”/></td>

 <td align=”right”  valign=””midlle” ” widht=”105" bgcolor="ddff00" height="77">Заголовок 3<img src=”image.jpg”/></td>

 </tr>

<tr>

<td bgcolor="55ff00" height="57">  <a href=”myfoto1.jpg”> Зображення 1 в осередку 2×2 </ a><img src=”image.jpg”/></td>

<td bgcolor="eeee00" height="87">  <a href=”myfoto2.jpg”> Зображення 2 в осередку 2×2</ a><img src=”image.jpg”/></td>

<td bgcolor="bbbb00" height="97"> <a href=”myfoto3.jpg”> Зображення 3 в осередку 2×3 </ a><img src=”image.jpg”/></td>

 </ tr>

<tr>

<td  bgcolor="55fab0" height="77">  <a href=”myfoto4.jpg”> Зображення 4 в осередку 3×1</ a><img src=”image.jpg”/></td>

 <td  bgcolor="00ff99" height="67"> <a href=”myfoto5.jpg”> Зображення 5 в осередку 3×2 </ a><img src=”image.jpg”/></td>

<td  bgcolor="ggff00" height="57"> <a href=”myfoto6.jpg”> Зображення 6 в осередку 3×3 </ a><img src=”image.jpg”/></td>

 </tr>

 </table>

 </body>

</html>

 

Завдання 2. Завантажте програму-браузер файл з текстом завдання 1. Створена веб-сторінка повинна мати напрочуд файний вигляд. Якщо наявні помилки, то виправте їх в кодуванні. Перевірте виправлення. Закодуйте в кожну комірку таблиці гіперпосилання на навчальні та освітні сайти.

 

Результат виконаної практичної роботи це файли( із результатами виконання програм) надіслати вашому учителю на електронну скриньку: 
vinnser@gmail.com (Сергій Петрович)

22.11.2021 - 28.11.2021 Створення веб-сторінки на фреймах

 

22.11.2021 - 28.11.2021

Тема:Створення веб-сторінки на фреймах з різними типами даних. Реалізація HTML-кодування.

Теоретична частина

 

Понятття фреймів в мові розмітнки HTML

 

Незважаючи на те, що сайти з фреймами зустрічаються все рідше, вивчення HTML було б неповним без розгляду теми про фрейми. До того ж фрейми в якомусь сенсі зайняли свою нішу і застосовуються для систем адміністрування та довідки. Там, де недоліки фреймів не мають особливого значення, а переваги навпаки, активно затребувані.

Для створення фрейма використовується тег <frameset> , який замінює тег <body> в документі і застосовується для поділу екрана на області. Усередині даного тега знаходяться теги <frame> , які вказують на HTML-документ, призначений для завантаження в область 

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

Фрейм у перекладі з англійської означає кадр, рамка, прямокутна область.

Фрейми поділяють вікно браузера на частини, в яких відображають зміст сторінок сайту. Кожній сторінці має відповідати свій html-файл.

Кожна сторінка повинна мати логічний заголовок.

Наприклад, типовим є сайт, де вікно браузера поділене на дві вертикальні області.

 У вужчій (до 25% від ширини вікна браузера) лівій області відображають зміст сайту у вигляді гіперпосилань на конкретні сторінки, а в іншій — вибрану користувачем сторінку.

Такий підхід до конструювання сайту дає змогу постійно бачити зміст сайту і переглядати його сторінки у будь-якій послідовності.

Зміст чи у цьому випадку увесь лівий фрейм називають навігаційною панеллю. Навігаційну панель можна створити у верхній частині вікна браузера, справа чи де завгодно.

 Часто у верхній частині створюють третій вузький фрейм, де розташовують заголовок сайту, логотип фірми, рекламу, елементи WordArt, ActiveX чи Flash тощо.

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

 

Файлова структура сайту з фреймами

Для створення сайту із застосуванням фреймів потрібно скласти як мінімум три html-файли: один основний і два чи більше допоміжні. Один допоміжний файл потрібний для заповнення стартовою інформацією лівого фрейму, інший — правого.

Основний файл призначений для опису розташування фреймів у вікні браузера. Тут описується структура фреймів, зазначаються адреси html-файлів для кожного фрейму, а також пояснюється, що має відображатися на екрані, якщо якийсь давній Браузер не підтримує фреймів.

Приклад використання тегу <FRAME>

HTML

<frameset rows="80,*" cols="*">

  <frame src="top.html" name="topFrame" scrolling="no" noresize>

  <frameset cols="80,*">

    <frame src="left.html" name="leftFrame" scrolling="no" noresize>

    <frame src="main.html" name="mainFrame">

  </frameset>

</frameset>

У разі використання фреймів в першому рядку коду пишеться наступний тип документа.

<!DOCTYPE  HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Даний <! DOCTYPE> вказує браузеру, що він має справу з фреймами, цей рядок коду є обов'язковою. Контейнер <head> містить типову інформацію на зразок кодування сторінки і заголовка документа. Ось тільки врахуйте, що заголовок залишається незмінним, поки HTML-файли відкриваються всередині фреймів.

В даному прикладі вікно браузера розбивається на дві колонки за допомогою атрибута cols , ліва колонка займає 100 пікселів, а права - простір, що залишився, заданий символом зірочки. Ширину або висоту фреймів можна також задавати в процентному відношенні, на зразок таблиць.

У тезі <frame> задається ім'я HTML-файла, що завантажується в зазначену область за допомогою атрибута src . У праве вікно буде завантажений файл, названий mаіn.html (див. приклад ), а в ліворуч- left.html ( див. приклад). Кожному фрейму бажано поставити його унікальне ім'я, щоб документи можна було завантажувати в вказане вікно за допомогою атрибута name .

 

Практична частина

 

Завдання 1. Набрати в текстовому редакторі Блокнот наступний текст html-кодів і зберегти його у файл з розширенням html.

 

 Скопіювати HTML-кодування веб-сторінки у цьому завданні 1.

1.       Відкрити текстовий редактор Блокнот. І вставити на сторінку коди.

2.       Зберегти даний документ під Іменем index1.html на Робочий стіл.

3.       Відкрити даний документ у веб-браузері. Протестувати активні слова на веб-сторінці

4.       надіслати скріншот утвореної веб-сторінки на e-mail:  vinnser@gmail.com

 

 

Кодування простої HTML-таблиці розміром 3х3,

яка складається з трьох стовпців і трьох рядків

При використанні фреймів необхідно як мінімум три HTML-файлу: перший визначає фреймової структуру і ділить вікно браузера на дві частини, а що залишилися два документа завантажуються в задані вікна. Кількість фреймів не обов'язково дорівнює двом, може бути і більше, але ніяк не менше двох, інакше взагалі втрачається сенс застосування фреймів.

Розглянемо етапи створення фреймів на основі сторінки, продемонстрованої нижче. Нам знадобиться три файли: index.html  - визначає структуру документа, main.html  - завантажується в правий фрейм і  left.html  - завантажується в лівий фрейм. З них тільки index.html відрізняється за структурою свого коду від інших файлів 

 

Реалізація  кодування веб-сторінки на фреймах.

Три файли зберегти в одній папці з назвою “Frameset”

Кодування 1-ого файлу index.html

<!DOCTYPE  HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<html>

<head>

<title> Приклад 6. Фрейми, проста HTML-frameset -</title>

<BASE target="right"> </BASE>

</head>

  <frame src="top.html" name="topFrame" scrolling="auto">

  <frameset cols="800,900">

    <frame src="left.html" name="leftFrame" scrolling="auto">

    <frame src="main.html" name="mainFrame" >

  </frameset>

</frameset>

</html>

 

Кодування 2-ого файлу  left.html

<html>

<head>

<title> Проста HTML-форма </title>

<BASE target="right"> </BASE>

</head>

<BODY bgcolr=”#00bb99” text=”#00000g” link=”#222222” vlink=”#444444” alink=”#111111” background=”bg.jpg”>

<p><Font size="50" color=”#gggggg” face=”Arial, Times New Roman, Serif”> Зразок кодування форми</font>.

<P><Font size=40" color=”#000000” face=”Arial, Times New Roman, Serif”>Заповніть просту форму</font>

<P><Font size="15" color=”#000000” face=”Arial, Times New Roman, Serif”>

<forma method="post" action=”/cgi-bin/feedback.pl” name=”FORMA2”> Прізвище:

<input type="text"  name=”secondname” size=”45” maxlength="150">  

<br>

 Iм'я:<input type="text"  name=”firstname” size=”25” maxlength="150">

<br>

E-mail:<input type="text"  name=”email” size=”25” maxlength="150">

<p> Вік:

14-18:<input type="checkbox"  name=”14-18” size=”25”>

19--25:<input type="checkbox"  name=”19--25:” size=”25”>

26-36:<input type="checkbox"  name=”26-36” size=”25”>

36-50:<input type="checkbox"  name=”36-50” size=”25”>

50-100:<input type="checkbox"  name=”50-100:” size=”25”>

<p> Стать:

<br>

<input type="radio"  name=”button” value=”male”>

Чоловік

<br>

<input type="radio"  name=”button” value=”female”>

Жінка

<br>

<input type="radio"  name=”button” value=”prefer not say”>

Не скажу

<p>Місто:

<select>

<OPTION name=”vinniza”  >Вінниця

<OPTION name=”bar” >Бар

<OPTION name=”zhytomyr”  >:Житомир

<OPTION name=”kiev”  >Київ

</select>

<p> Додаткові відомості про себе:

<p>

<TEXTAREA rows="25" cols="78">

</TEXTAREA>

<input type="submit"  name=”button” value=”OK”>

<input type="reset"  name=”button” value=”Ні”>

</form>

 </body>

</html>

 

Кодування 3-ого  файлу  main.html

<html>

<head>

<title> Проста HTML-таблиця </title>

<BASE target="right"> </BASE>

</head>

<BODY bgcolr=”#00bb99” text=”#00000g” link=”#222222” vlink=”#444444” alink=”#111111” background=”bg.jpg”>

<p><Font size="50" color=”#gggggg” face=”Arial, Times New Roman, Serif”> Зразок таблиці</font>.

<P><Font size=40" color=”#000000” face=”Arial, Times New Roman, Serif”>Заповніть таблицю числами і змініть колір тла комірок в таблиці</font>

<P><Font size="15" color=”#000000” face=”Arial, Times New Roman, Serif”>

<table border="3" align=”left” cellspacing=”2”  cellpading=”1” widht=”500”>

<caption  align=”midlle”>   Це заголовок таблиці </caption>

<tr>

 <td  align=”midlle”  valign=”top” ” widht=”150"  bgcolor="60ff00" height="97"> Заголовок 1 </td>

 <td align=”left”  valign=”bottom” ” widht=”125"  bgcolor="11ff00" height="87">Заголовок 2 </td>

 <td align=”right”  valign=””midlle” ” widht=”105" bgcolor="ddff00" height="77">Заголовок 3</td>

 </tr>

<tr>

<td bgcolor="55ff00" height="57"> Осередок 2×1 </td>

<td bgcolor="eeee00" height="87"> Осередок 2×2 </td>

<td bgcolor="bbbb00" height="97"> Осередок 2×3 </td>

 </ tr>

<tr>

<td  bgcolor="55fab0" height="77"> Осередок 3×1 </td>

 <td  bgcolor="00ff99" height="67"> Осередок 3×2 </td>

<td  bgcolor="ggff00" height="57"> Осередок 3×3 </td>

 </tr>

 </table>

 </body>

</html>

 

 

Завдання 2. Завантажте програму-браузер файл  index.html з текстом завдання 1. Створена веб-сторінка повинна мати напрочуд файний вигляд. Якщо наявні помилки, то виправте їх в кодуванні. Перевірте виправлення.

 

 

Завдання 3. Як створити на веб-сторінці по бокам 2 вертинкальних фрейма і 4 горизонтальних фрейми в центрі?

Реалізація. У файл index.html треба внести зміни:

 <frameset cols="33%,33%,34%">
  <frame src="top.html" name="topFrame" scrolling="auto">
<frameset rows="33%,33%,34%">
<frame src="example11.html" name="Фрейм 2">
<frame src="left.html" name="leftFrame" scrolling="auto">
<frame src="main.html" name="mainFrame" >
<frame src="left.html" name="leftFrame" scrolling="auto">
</frameset>
<frame src="main.html" name="mainFrame" scrolling="auto"> >
</frameset>

 

Завдання 4.  Як створити на веб-сторінці 2 вертикальних фрейми вгорі та 1 горизонтальний фрейм внизу?

Реалізація. У файл index.html треба внести зміни:

<frameset rows="75%, 25%">

<frameset cols="100, *">
<frame src="left.html" name="leftFrame" scrolling="auto">
<frame src="main.html" name="mainFrame" >
</frameset>

<frame src="top.html" name="TOP" scrolling="no" noresize="">

</frameset>

 

Завдання 5.  Як створити на веб-сторінці всередині сторінки віконце?

Реалізація. У файл index.html треба внести зміни:

 

Фрейм в середині сторінки реалізується кодом:
<iframe src="top.html  " width="100" height="100" frameborder=0 scrolling="no" noresize=""></iframe>
src - адрес веб-сторінки, яка показується у віконці
width и height - розміри віконця
Аби вимкнути  рамку віконця, додали  frameborder=0
Не забувайте - закриваючий тег </iframe>

Завдання 6. Як створити на веб-сторінці   три фрейми: вгорі меню, під меню ліворуч зміст, під меню праворуч со?

Реалізація.

1-ий файл index1.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Приклад 6. Фрейми</title>
</head>
<frameset rows="25%, 75% ">
<frame src="top.html" name="TOP" scrolling="no" noresize="">
<frameset cols="100, * ">
<frame src="menu.html" name="MENU">
<frame src="content.html" name="CONTENT">
</frameset>
</frameset>
</html>

 

2-ий файл menu.html

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Навігація по сайту</title>
</head>
<body style="background: #f0f0f0">

МЕНЮ

</body>
</html>

 

3-ий файл  content.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Зміст сайту</title>
</head>
<body style="background: white">

Зміст

</body>
</html>

 

4-ий файл  top.html

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ТОП-чік</title>
</head>
<body style="backgroung: white">

ТОП-чік

</body>
</html>

 

 

 

 

 

Результат виконаної практичної роботи це файли( із результатами виконання програм) надіслати вашому учителю на електронну скриньку: 
vinnser@gmail.com (Сергій Петрович)
ktdfz@i.ua (Юрій Васильович)