Дистанційна освіта з інформатики в період квітень 2021
року
05.04.2021 - 11.04.2021
Конспект уроку для
учнів
Тема: Шрифтове
оформлення текстових блоків веб-сайту.
Створення текстових
блоків на веб-сторінці.
Теоретична
частина
Стандарт мови
розмітки W3C HTML включає підтримку
сценаріїв(скриптів) на стороні клієнта. Він визначає, яким чином локально
виконувані сценарії можуть бути використані на веб-сторінці. Конкретні застосунки на стороні клієнта, такі
як веб-браузер, можуть підтримувати
кілька мов сценаріїв, хоча всі популярні браузери
підтримують сценарії на JavaScript. Код сценарію може виконуватися під час
завантаження документа, або пізніше.
У HTML5 JavaScript сценарії (скрипти) відіграють значну роль
при відтворенні аудіо, відео та графічного вмісту (див. нові можливості HTML5).
JavaScript разом із HTML, CSS та DOM були основою для створення концепції DHTML.
У
концепції AJAX клієнтські сценарії мають визначне місце.
Сценарії
можуть існувати як окремі файли (js-файли), або бути включеними всередину HTML документу.
Безпосередньо в HTML-документі код сценарію можна записати:
·
до
елементу <script>;
·
всередину
інших елементів до відповідних атрибутів внутрішніх подій.
DHTML, Dynamic HTML —
концепція створення веб-сайту, що розглядає HTML-документ як об'єктну
структуру, використовує поєднання статичної мови розмітки HTML, вбудованої
скриптової мови JavaScript (сценарії виконуються на
стороні клієнта), CSS (каскадних таблиць стилів) і DOM (об'єктної моделі
документа). Ця концепція може бути використана для створення застосунку в
браузері: наприклад для навігації або для додання інтерактивності формам. Також
DHTML може бути використана для динамічного перетягування елементів по екрану і
як інструмент для створення заснованих на браузері відео-ігор.
Конкуруючі
технології: Macromedia Flash, Microsoft Silverlight, Adobe AIR для анімації і аплети (applets).
Шаблон
кодування сценаріїв веб-сторінки зі скриптами
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Заголовок сторінки</title>
</head>
<body>
<div id="navigation"></div>
<script>
window.onload = function () {
myObj = document.getElementById("navigation");
// ...
manipulate myObj
};
</script>
</body>
</html>
Часто
програма на JavaScript зберігається у зовнішньому файлі, а веб-сторінка просто
зв'язується з ним. Це дуже зручно, коли декілька сторінок використовують один і
той самий програмний код:
<script src="myjavascript.js"></script>
Приклад.
Наведений
код ілюструє часто використовувану функцію. Додаткова частина сторінки
(тестовий блок) відображатиметься на екрані, тільки коли користувач робить
запит. У електронному навчанні така функція може використовуватися для
виведення підказки або правильної відповіді для студента. Але спочатку цієї
інформації не видно.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using a DOM function</title>
<style>
a {background-color:#eee;}
a:hover {background:#ff0;}
#toggleMe {background:#cfc; display:none; margin:30px 0; padding:1em;}
</style>
</head>
<body>
<h1>Using a DOM function</h1>
<h2><a id="showhide" href="#">Show paragraph</a></h2>
<p id="toggleMe">This is the paragraph that is only displayed
on request.</p>
<p>The general flow of the document
continues.</p>
<script>
changeDisplayState = function (id) {
var d = document.getElementById('showhide'),
e = document.getElementById(id);
if (e.style.display === 'none' ||
e.style.display === '') {
e.style.display = 'block';
d.innerHTML = 'Hide
paragraph';
}
else {
e.style.display = 'none';
d.innerHTML = 'Show
paragraph';
}
};
document.getElementById('showhide').onclick = function () {
changeDisplayState('toggleMe');
return false;
};
</script>
</body>
</html>
КОДУВАННЯ КОЛЬОРІВ ШРИФТІВ, ТЛА ШРИФТІВ, І ЗМІНИ
КОЛЬОРІВ
Приклад кодування кольорів шрифтів, тла шрифтів, і зміни
кольорів використаних та активних гіперпосилань в текстових блоках за допомогою тегу <BODY>… </BODY>..
Приклад:
<BODY bgcolr=”#99aabb”
text=”#ddffaa” link=”#222222” vlink=”#444444” alink=”#111111” background=”bg.jpg”>…
</BODY>.
Тег <Font> використовується HTML-кодуванні великих
текстових блоків веб-сторінки для дизайну шрифтів.
Приклад:
<Font>
<P>Текстовий блок веб-сторінки
</Font>
Тег <Font> має такі атрибути: висоти символів: size(12), кольору
символів: color=”9999dd”, назви шрифту: face=” Times New
Roman, Serif”
Приклад:
<Font size(16) color=”0099dd” face=”Arial, Times New Roman, Serif”>
<P>Текстовий блок веб-сторінки
</Font>
Приклад зміни або вживлення нового дизайну тексту в текстовому
блоці
<P style=”font-family: arial,
calibri; font-size: 16pt; font-style: oblique;
font-weight: bold; color:#22ffdd; line-height:14pt; ”> Текстовий блок веб-сторінки</P>
Форматування заголовків текстових блоків
Для форматування заголовків і підзаголоків для текстових блоків можна використати ряд
тегів-дескрипторів:
<H1>…заголовок 1 рівня…</H1>
<H2>……заголовок 2 рівня…</H2>
<H3>……заголовок 3 рівня…</H3>
<H4>…заголовок 4 рівня…</H4>
<H5>……заголовок 5 рівня…</H5>
<H6>……заголовок 6 рівня…</H6>
Кодування спеціального форматування фрагментів в
текстовому блоці
Тег початку нового
рядка без абзацу: <BR> (для катренів та віршів)
Тег початку нового
рядка з абзацом: <P>…</P> (для прози)
Тег початку попередньо відформатовaного рядка з абзацом: <PRE>…</PRE> (для авторської графіки)
Тег початку
рядка без природніх розривів: <NOBR>…</NOBR>
Тег початку напівжирного
тексту в абзаці: <B>…</B> (для заголовків)
Тег початку курсивного
тексту в абзаці: <I>…</I> (для прописних ліітер)
Тег початку підкресленого
тексту в абзаці: <U>…</U> (для виділення фрагментів тексту)
Тег початку зменшеного тексту в абзаці: <SMALL>…</SMALL> (для приміток)
Тег початку збільшеного тексту в абзаці: <BIG>…</BIG> ( для означень термінів)
Тег початку надрядкового текстового символу в абзаці: <SUP>…</SUP> (для степенів числа)
Тег початку
підрядкового текстового символу в абзаці: <SUB>…</SUB> (для індексів у буквах)
Тег початку закресленого текстового символу в абзаці: <STRIKE>…</STRIKE>
Тег початку внутрішнього гіперпосилання текстового символу в абзаці: <A name=”top”>…</A>
Тег початку зовнішнього гіперпосилання на іншу веб-сторінку текстового
символу в абзаці: <A href=” http://inf11klas.blogspot.com/”>…</A>
Тег початку зовнішнього гіперпосилання на файл у папці текстового символу
в абзаці: <A href=” informatuka/inf11klas.html”>…</A>
Тег початку зовнішнього гіперпосилання на файл у папці у вигляді
зображення в абзаці: <A href=” informatuka/inf11klas.html”><IMG scr=”image/grafic1.png”>…</A>
Тег початку зовнішнього гіперпосилання на поштову електронну
скриньку в абзаці: <A href=” mailto:vinnser@gmail.com”><IMG scr=”image/grafic1.png”>…</A>
Тег початку впорядкованого нумерованого списку в абзаці: <OL>…<LI>… </LI> … </OL> (для чисел)
Тег початку невпорядкованого маркованого списку в абзаці: <UL>…<LI>… </LI> … </UL> (для маркерів)
Тег початку списку означень в абзаці: <DL>…<LI>… </LI> … </DL> (для списку означень…)
Тег початку списку означень в абзаці: <DT>…<LI>… </LI> … </DT> (для визначаємого терміну у списку…)
Тег початку списку означень в абзаці: <DD>…<LI>… </LI> … </DD> (для визначення терміну…)
Атрибути чисел та маркерів
для тегу початку списку
<OL>…<LI value=”30”>…
</LI value=”33”> … </OL> (зміна номеру у списку)
<UL>…<LI type=”disc”>… </LI type=”disc”>… </UL>(зміна маркеру у списку)
Приклад форматування тексту в HTML-документі
<FONT> елемент є найпростішим способом , щоб змінити текст в розмір, колір і
накреслення шрифту. Однак це не найкращий спосіб.
font
Font - Тег був доставлений на початку життя в HTML
- форматі, щоб дозволити розробникам змінити розмір, шрифт і колір їх
текст. Це продовжувало приносити більше шкоди, ніж користі - з різних
причин - але головним чином тому, що це надзвичайно неефективний спосіб
форматування тексту. Форматування тексту CSS набагато перевершує, але знання цих прийомів
старого стилю все ще є корисним.
Розмір шрифту
У
вас є два варіанти встановлення розміру тексту: розмір його абсолютно або відносно . Абсолютні
розміри знаходяться між діапазоном 1і 7, і
встановлюються так:
<font size="2">text</font>
Для
більшості браузерів розмір шрифту за замовчуванням встановлений як3 . Для
більшості сайтів текст буде встановлений приблизно за розміром 2або 3.
Відносний
розмір означає, що розмір
тексту зменшиться відносно розміру користувача за замовчуванням . Це
краще, оскільки воно адаптується до уподобань ваших користувачів - якщо вони
спеціально налаштували свої браузери для відображення тексту більшого розміру,
ніж зазвичай, ваш текст буде пропорційно зростати. У вас є діапазон
від +6до +1і -1до -6. Плюс
1 і мінус 1 будуть тими, якими ти будеш користуватися найбільше. Як ярлики
для цих двох розмірів є теги <big></big>та <small></small>,
що допомагає.
<font
size="+1">Text one size greater than the browser’s
default.</font>
Тримайтеся
подалі від справді дрібного тексту, оскільки його завжди важко
читати. Великий текст може заполонити сторінку та спричинити занадто багато
прокрутки. Зрештою, ваш вибір розміру шрифту матиме багато спільного з
тим, скільки тексту буде на сторінці за раз. Це також пов’язано з вашим
вибором шрифту, до якого ми переходимо далі.
Шрифт Face
По-перше,
якщо ви не внесете жодних змін, ваш текст, мабуть, буде виглядати так:
12pt Black
Times New Roman
Не
найкрасивіший або найпридатніший шрифт у світі, оскільки він справді був
розроблений для читання з паперу, а не для екранів комп’ютерів. Отже, ви
захочете змінити його на щось більш читабельне та приємніше на вигляд.
Подивіться
у папку шрифтів (на
ПК це C: \ windows
\ fonts ). У вас повинно бути кілька десятків різних
шрифтів. Деякі з них будуть придатні для використання в Інтернеті, а інші
ви будете використовувати знову і знову. Одним з найпоширеніших шрифтів,
що використовуються в мережі, є Arial (варіант
Helvetica для Mac). Щоб змінити текст на Arial або будь-який інший шрифт,
тегами є
<font face="Arial">Your
text here.</font>
faceАтрибут
був так названий тому , що шрифт конструкція більш точно відома як шрифти .
Обмеження шрифтів
Окремий
шрифт відображатиметься на екрані комп’ютера зчитувача лише в тому випадку,
якщо на ньому встановлено цей шрифт. Отже, якщо у вас ціла сторінка
визначена цифровим шрифтом
( »завантажити )
або щось інше, навантажувачі ваших глядачів просто отримають сторінку з нудним
старим Times New Roman. Щоб обійти це, найкращою ідеєю, звичайно, є використання загальних шрифтів . Існує
набір загальних шрифтів, у яких ви можете бути більш-менш впевнені, що вони
з’являться на всіх системах ваших читачів. faceАтрибут
дозволяє вказати список шрифтів в той час. Це хороша практика - визначати резервні шрифти на
випадок, якщо щось піде не так. Дивитися:
<font
face="Digital, Arial, Helvetica, sans-serif">text</font>
Бачите
- ви отримаєте пару шансів знайти гарний шрифт, відокремлений комами. Якщо
перший недоступний, буде використаний ваш другий вибір тощо. Ви можете
продовжувати довгий список, але насправді, вам слід зупинитися приблизно після
3, тому що ви витрачаєте свій час інакше. Постарайтеся, щоб шрифти
були схожими по
дорозі, і спробуйте закінчити
його на загальному шрифті, щоб триматися подалі від Times.
Усі
шрифти входять до певного сімейства шрифтів. Наприклад, Arial має тип
'sans-serif'. Якщо всі ваші альтернативи вичерпані, не знайшовши збігу,
останньою інстанцією є вказати сімейство шрифтів. Якщо справа доходить до
цього, буде використано типове значення для цієї родини. Ви можете дізнатися
все про сімейства шрифтів та відмінності між ними у веб-типографіці .
Навіть
тоді більшість людей не бачитимуть вашого супер крутого шрифту, тому, якщо ви
хочете, щоб цей шрифт використовувався, зробіть його графічним у
своєму редакторі
зображень і розмістіть графіку на своїй сторінці там, де ви
хочете. Це ненавидять у правильному веб-дизайні, але якщо ви тільки
починаєте, це прийнятно, поки не дізнаєтесь, як це правильно
обійти. Згадайте, звичайно, що якщо хтось вимкнув зображення, він взагалі
не зможе прочитати цей текст. Переконайтесь, що це не надто важливо, і
завжди використовуйте атрибут
alt .
sourcetip: якщо
у вас є текстовий процесор, як Word, спробуйте кілька шрифтів. Знайти
того, кого ти хочеш, набагато швидше.
Поширені шрифти
Для вашої зручності, ось група найпопулярніших та найпоширеніших
списків шрифтів:
- Arial,
Helvetica,
- Требуше MS,
Arial, Helvetica,
- Вердана,
Женева,
- Times New
Roman, Times,
- Джорджія,
Гарамонд, Палатіно, засічка
- Кур'єр
Новий, Кур'єр, монопростір
Колір шрифту
Щоб
змінити кольори тексту на сторінці для цілої сторінки , ви можете
визначити його в <body>тезі. У
мене тут є повний посібник з основ .
Щоб
змінити кольори лише невеликого блоку тексту або окремого слова, вам доведеться
знову використати старий fontтег. Формат:
<font color="#ff0000">text</font>
Кольори
в HTML повинні бути визначені як шістнадцяткові коди , які представляють
собою 6-значні коди, що представляють кількість червоного, зеленого та синього
(RGB) у кольорі. Щоб побачити повну діаграму цих кодів, щоб ви могли
вибрати ті, які вам подобаються, див. Таблицю
кольорів HEX .
<font
color="green">text</font>
Нові
браузери дозволяють додати колір ім'я замість
цього, як зазначено вище, але ваш вибір більш обмежений. Щоб побачити
діаграму цих кольорів, подивіться на цю діаграму .
Веб-типографіка
Привабливий текст в Інтернеті досягти непросто. Дізнайтеся про сімейства
шрифтів, про те, які шрифти найкраще працюють в Інтернеті, та як створити гарні
розділові знаки.
Спеціальні символи
"Спеціальні", як, наприклад, не на клавіатурі Для їх отримання
потрібно використовувати магічний код, тому перегляньте нашу діаграму.
Внутрішні посилання
Внутрішні посилання означають, що ви можете переходити між розділами вашої
сторінки та іншими сторінками. Їх теж дуже легко зробити.
Назви розділів
В
основному, стрибки сторінок - це лише посилання (вони використовують
той самий <a>елемент, що і всі посилання), але
посилання, які вказують на певну частину документа. Це робиться
шляхом присвоєння
імен частинам вашої сторінки , а потім посилання за
посиланням на цей розділ.
Сторінка
переходи робиться за допомогою name атрибута цього aелемента. Отже,
скажімо, ви хочете отримати посилання на верх сторінки, ви додасте такий
прив’язок у верхній частині документа ( <body>звичайно, всередині елемента):
<a name="top"></a>
Списки
Дізнайтеся, як розкласти текст у крапці, нумеровані та списки визначень.
Список форматування тексту
Існує більше 40 тегів, які можна використовувати для форматування тексту - і я
отримав тут список.
Шаблони
За допомогою спеціальних вікон Internet Explorer ви можете прокручувати текст
по екрану.
В
іншому місці
Інші статті HTML-джерела, які були б у цьому розділі,
якби вони не були десь ще ...
- Таблиці стилів> CSS та
текст
- Таблиці стилів> CSS та
посилання
- Таблиці стилів> Не
підкреслені посилання
Коди основних елементів мови HTML
|
Тег |
Опис тега |
Приклад |
|
|
<html> </html> |
Позначення початку і кінця веб-документа |
<html> </html> |
|
|
<head> <title> </title> </head> |
Позначення назви і заголовка веб-документа |
<head> <title></title> </head> |
|
|
<body> </body> |
Позначення розпочата і кінця тексту
(тіла) веб-документа |
<body> </body> |
|
|
<P> </p> |
Позначення меж абзацу |
<р> </р> <р> Це моє
рідне місто. </р> |
|
|
<br> |
Позначення переходу на новий рядок тексту |
<р> Я дуже люблю поеми Шевченка,
особливо: </р> <р>СОН, <br> Гайдамаки </р> |
|
|
<p align = "center">
</p> |
Позначення абзацу, в якому текст
вирівняний по центру |
<р align = "center"> Київ
- столиця нашої Батьківщини. </р> <р> Це моє рідне місто. Він
дуже гарний. </р> |
|
|
<p align = "right"> </p> |
Позначення абзацу, в якому текст
вирівняний по правому краю |
<р> Каменяр України, <br> Іван
Франко </р> <р align = "right"> Відомий поет</р> |
|
|
<p align = "1eft"> </p> |
Позначення абзацу, в якому текст
вирівняний по лівому краю |
<р align = "left">
</р> <р align = "center"> Довбай цю скалу <br>
Коли маєш силу ... </p> |
|
|
<h1> </h1> або <h2> </h2> |
Позначення абзацу, в якому знаходиться
заголовок тексту (можливо до шести видів заголовків залежно від рівня
заголовка, тобто щодо зменшення ступеня важливості) |
<h1>Київ - столиця нашої Батьківщини
</h1> <p> Це історичне місто. </р> <h2> Головні
пам'ятки Києва <h2> <p> Це місто патріотів. </
р> |
|
|
"<strong> </strong> |
Використовується для виділення фрагмента
тексту напівжирним шрифтом |
<p> <strong>Київ
</strong> - столиця нашої Батьківщини. </р> |
|
|
<em> </em> |
Використовується для виділення фрагмента
тексту курсивом |
<р> <em>Вінниця </em> -
перлина Поділля. </р> |
|
|
<u> </u> |
Використовується для виділення фрагмента
тексту підкресленням |
<р> <u> Львів </u> -
місто науки. </р> |
|
|
<s> </s> |
Використовується для перекреслення тексту |
<р> У нас знижки! Стара ціна
<s> 5000 грн. </S>, нова ціна 1000 грн! </Р> |
|
|
<sup> </sup> |
Створює верхній індекс |
2 <sup> 2 </sup> = 4 |
|
|
<sub> </sub> |
Створює нижній індекс |
Хімічна формула води: H<sub> 2
</sub> О |
|
|
<font size = "+ 2">
</font> |
Змінює вигляд шрифту, а саме: збільшує
розмір букв у зазначеному тегом фрагменті тексту на дві одиниці в порівнянні
зі стандартним розміром (стандартний розмір шрифту дорівнює 3) |
<р> У нас знижки! Стара ціна 5000
грн., Нова ціна <font size = "+ 2"> 1000 </font> грн!
</Р> |
|
|
<font size = "l"> </font> |
Змінює вигляд шрифту, а саме: визначає
розмір букв у зазначеному тегом фрагменті тексту (всього можливі сьомій
градацій розмірів шрифту 1, 2, 3, 4, 5, 6, 7) |
<p> <font size =
"l"> ОДЕСА </ font> - південна ПАЛЬМІРА нашої Батьківщини. |
|
|
<font color = "red">
</font> |
Змінює вигляд шрифту, а саме: відмічені
тегом фрагменти тексту будуть червоного кольору (колір задається або
RGB-позначенням в шістнадцятковій системі, або англійською назвою одного з 16
базових кольорів: BLACK - чорний, BLUE - синій, NAVY - темносиній, LIME -
світло- зелений, GREEN - зелений, SILVER - світло-сірий, AQUA - блакитний,
OLIVE - оливковий, RED - червоний, MAROON - коричневий, GREY - сірий, FUCHSIA
- колір фуксії (рослина), PURPLE - фіолетовий, YELLOW - жовтий, WHITE -
білий, TEAL - зеленувато-блакитний) |
<p> <font со1ог =
"red">ДНІПРО</font> - місто козаків моєї Батьківщини.
</р> |
|
|
<body bgcolor = "silver" text
= "green"> </body> |
Задає колір фону вебсторінки (bgcolor - background color), а
також колір тексту (в даному випадку - червоний) у всьому документі |
<body bgcolor = "silver" text
= "green ''> <p> Це мій Ліцей. Він знаходиться у Вінниці.
</p> </body> |
|
|
<body background = "fon01.
jpg"> |
Дозволяє використовувати файл картинки (в
даному випадку графічний файл з ім'ям fon01.jpg) в якості фону веб-сторінки |
<body background = "fon01. jpg>
<p> Це моя вулиця. Я живу у Вінниці. </p> </body> |
|
|
<font face = '' courier new ">
</font> |
Змінює вигляд шрифту, а саме: задає
гарнітуру шрифту (рекомендується використовувати шрифти сімейства Times New
Roman, A rial, Tahoma, Courier; Courier New, які
найчастіше бувають встановлені на всіх комп'ютерах) |
<p> <font face = "courier
new"> Харків </font> - місто науковців. </р> |
|
|
<ul> <li> </li> </ul> |
Створює невпорядкованості ий список, при
цьому обов'язково позначення кожного з елементів цього списку за допомогою
тега <Н> |
<р> Столиці країн:
<ul> <li> Молдови- Кишинів, </li> <li> Польщі - Варшава, </li> <li> Болгарії - Софія, </li> <li> Чехії - Прага, </li> <li> Словаччини - Братислава,
</li> </ul> </р> |
|
|
<ol> <li> </ li> </ ol> |
Створює впорядкований список, при цьому
обов'язково позначення кожного з елементів цього списку за допомогою тега
<І> |
<р> Країни Східної Європи: <о1> <li> Болгарія,
</li> <li> Польща, </li><li>
Сербія</li> <li> Словаччина
</li><li> Словенія, </li><li> Чехія,
</li><li> Хорватія </li></о1></р> |
|
|
<a href=" kdu.org">
</a> |
Створить посилання вебсторінку в Інтернеті |
<а href = "msu.ru"> Це
посилання на веб-сайт до університету. </ а> |
|
|
<а href = "file.htm">
</ а> |
Створює посилання на інший файл (в даному
випадку на інший файл у форматі lit ml) |
<а href = "file.htm"> Це посилання на файл з новими матеріалами
про університет. </ А> |
|
|
<а href = "mailto: contact @
philol.ukr.net"> </а> |
Посилання на адресу електронної пошти |
<а href = "mailto: contact @
philol.msu.ru"> Це посилання на електронну поштову адресу ліцею |
|
|
<img src = "kdu.jpg"> |
Вставка малюнка (графічного елементу). У
веб документ можна вставити зображення в форматах: gif, jpg (jpeg), png |
Це фотографія мого університету. <Р>
<iing src = "mgu, jpg"> </р> |
|
|
<img src = "mgu.jpg" width =
"65" height = "59" hspace = "15" vspace =
"15" align = "right"> |
Вставка графічного елементу із завданням
параметрів відображення картинки: ширини малюнка (width), висоти
малюнка (height), відстань від попереднього елемента
веб-документа до малюнка (по горизонталі - hspace - horizontal space), відстань
від інших елементів малюнка по вертикалі (vspace - vertical space)
і спосіб вирівнювання малюнка щодо тексту (обтікання малюнка текстом) -
вирівняного вправо |
Це фотографія мого ліцею шириною близько 2
см і висотою близько 1,8 см, вирівняна Bnpaвo. <Img src =
"mgu.jpg" width = "250" height = "250" hspace =
"15" vspace = "15" align =
"right"> |
|
Практична
частина
Практична
робота.
Мова
розмітки HTML для гіпертексту.
Приклад
кодування властивостей гіпертексту на веб-сторінці
мовою
розмітки HTML
Завдання 1. Набрати в текстовому
редакторі Блокнот наступний текст і зберегти його у файл з розширенням html, а
саме: Вінниця.html
Скопіювати HTML-кодування веб-сторінки у
цьому завданні 1.
4)
Відкрити текстовий редактор Блокнот. І вставити на сторінку коди.
5)Зберегти
даний документ під Іменем index1.html на Робочий стіл.
6) Відкрити даний документ у веб-браузері.
Протестувати активні слова на веб-сторінці
7)
надіслати скріншот утвореної веб-сторінки на e-mail: vinnser@gmail.com
<! DOCTYPE HTML PUBLIC
"- // W3C // DTD HTML 4.01 Transitional // EN"
"w3.org/TR/html4/loose.dtd">
<html> <head>
<title> Mій ліцей </ title> </head><body bgcolor =
"silver" text = "green">
<p> Я вчусь у ліцеї
№7. Він знаходиться в Вінниці в районі Єрусалимки. </р>
<р> Вінниця - це моє рідне
місто. </р> <р> Я дуже люблю вивчати історію
Вінниці, особливо: </р><р> Історія міста періоду І-ої світової
війни; <br> Історія міста періоду ІІ-ої світової
війни;</p><р align = '' center "> Історія міста періоду
відлиги;
<br> Історія міста періоду
визвольних змагань</р><р align = "right"> Історія міста
кінця ХХ століття</р> <р align = "left"> Доренко
Максим </р><р>Я вивчаю першоджерела кожного періоду в державному
архіві міста. <br>Читаю старі газети, журнали, статистичні
довідники. </p><p align = '' center "> Вінниця має багату історію,
зокрема: </р>
<р> У місті Вінниці є знаменитий театр ляльок.</р> <h1>
Місто Вінниця має історичний музей.</h1><р> У центрі Вінниці є
художній музей</р> <h2> Місто Вінниця має музей
літаків </h2><р> Місто Вінниця має музей Пирогова
</Р> <p> <strong> Вінниця</ strong> -
перлина Поділля. </Р><р> <em> Вінниця</ em> - це
моя Батьківщина. </Р>
<р> <u>Вінниця </
u> - це місто наукової та творчої інтелегенції
</р> <р> У нас у місті є світло-музичний
фонтан. <s>Сучасний фонтан розташований на річці
Південний Буг</ S>, біля центрального мосту.</Р><p> Цікаво,
що вздовж цієї річки між центральним та київським мостами розташовані красиві
храми. <sup>1</sup> Річкою курсують туристичні катери.
</р>
<р> Вінницька
формула цілющої вроди: щось на зразок,
цілющої формули води:
H <sub> 2
</sub> О. </p><р> У місті Вінниці дуже низькі ціни
на житло, <font size = +2> приблизно 1000 грн за 1 кв.од. </font> і
навіть наймодерновіша архітектура житлових масивів. </Р> <p>
<font size = '' 6 "> Вінниця </font> - це потужний обласний
центр , повз який проходить міжнародна магістраль зі сходу на захід
країни</р>
<p> <font color =
"red">Вінниця </font> - зелене місто, що має
аєропорт. </р>
<p> <font face =
"courier new"> Вінниця </font> - це
місто чистої води. </р>
<р>Вінниця має транспортні
сполучення з столицями європейських країн:
<ul> <li>
Молдови- Кишинів, </li> <li>
Польщі - Варшава, </li><li>Болгарії - Софія,
</li> <li> Чехії - Прага, </li> <li>
Словаччини - Братислава, </li> </ul> </p>
<р> У Вінниці є більше
сотні підприємств та заводів:
<ОL> <li>
завод штучних діамантів, </li> <li> завод
холодильних агрегатів, </li>
<li> швейна фабрика
«Вінничанка»,</li> <li>
швейна фабрика «Подолянка»,</li>
<li> завод «Маяк»,
</li> <li>
підприємство «ЦКБТ», </li>
<li> кондитерська фабрика
«Roshen» </li> </ОL> </р>
<р> <а href =
"https://sch7.edu.vn.ua"> Це посилання на веб-сайт нашого ліцею.
</а> </р>
<р> <а href = ''E-mail:
lyceum7@i.ua">
</а> </р>
<р> Це фотографія нашого ліцею шириною близько 6,5 см і висотою близько 5
см, вирівняна вправо. </р>
<img src =
"Lyceum.png" width = "250" height = "250" hspace
= "15" vspace = "15" align = "right">
</body>
</html>
Завдання 2. Завантажте
програму-браузер файл з текстом завдання 1. Створена веб-сторінка повинна мати
напрочуд файний вигляд
Результат
виконаної практичної роботи це файли( із результатами тестування веб-сторінок)
надіслати вашому учителю на електронну скриньку:
vinnser@gmail.com (Сергій Петрович)
ktdfz@i.ua (Юрій Васильович)
Немає коментарів:
Дописати коментар