10 клас. Інформатика. Дистанційне навчання.: Дистанційна освіта з інформатики 26.04.2021

Дистанційна освіта з інформатики в період квітень 2021 року

26.04.2021 - 30.04.2021

Конспект уроку для учнів

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 , де i в межах від 1 до 7 відносно початкового розміру букв.

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

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

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

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

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

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

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

Особливо важливий текст

Сильне виділення тексту

<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> 
<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”>

 Зразок таблиці.

Заповніть таблицю числами і змініть колір тла комірок в таблиці

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

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

****