11.10.2021 - 17.10.2021
Тема: Шрифтове
оформлення текстових блоків веб-сайту.
Створення текстових
блоків на веб-сторінці.
Теоретична
частина
Прочитайте
наступне кодування сторінки мовою HTML
<!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>
<META content="MSHTML 6.00.2900.2180"
name=GENERATOR>
</HEAD>
<BODY bgColor=#fffafa onload=drag><FONT
face=arial,helvetica,sans-serif
color=#0000ff size=4>
<TABLE cellSpacing=2 cellPadding=2 align=center
background=Тести4.files/Тест3.html border=0>
<TBODY>
<TR>
<TD
colSpan=2>
<H1
align=center><FONT color=#ff3333>ТЕСТ 26
<BR></H1></FONT></TD></TD></TR>
<TR>
<TD
colSpan=2>
<H1
align=center><FONT color=#55c555><BR>Початковий курс
<BR>знавців
КОМП'ЮТЕРНИХ МЕРЕЖ<BR>
<BR></H1></FONT></TD></TD></TR></TBODY></TABLE>
<!Будь чемним і чесним, не списуй відповіді!">
<FORM><H4><FONT color=#ff3333>1.
Що таке комунікація? Вкажіть найточніше визначення. </FONT>
<FORM><H5>
<INPUT onclick=r1=0 type=radio value=v1
name=R1> "Комунікація" - це слово грецького походження, що перекладається
як "розширення", "вимога", "обробка". <BR>
<INPUT type=radio value=V2
name=R1onclick=r1=0>
"Комунікація" - це слово китайського походження, що
перекладається як "порція", "протокол",
"пакет".<BR>
<INPUT onclick=r1=1 type=radio value=V3
name=R1> "Комунікація" - це слово латинського походження, що
перекладається як "повідомлення", "сполучення",
"передавання". <BR>
<INPUT onclick=r1=0 type=radio value=V4
name=R1> "Комунікація" - це слово японського походження, що
перекладається як "точність", "стандарт",
"якість".</H5></FORM>
<!Будь чемним і чесним, не списуй відповіді!">
</body>
</html>
Запитання.
Як
перевірити, що закодовано у цьому кодуванні?
Чи
закодовано у цих кодах таблиця?
Чи
закодовано у цих кодах кнопка?
Чи
є у цих кодах закодовані рядки, які не відображаються в браузері?
Довідник тегів мови розмітки HTML для кодування текстовї інформації
Кодування спеціального форматування фрагментів в
текстовому блоці
Тег початку нового
рядка без абзацу: <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>(зміна маркеру у списку)
Поширені шрифти
Для вашої зручності, ось група
найпопулярніших та найпоширеніших списків шрифтів:
- Arial, Helvetica,
- Требуше MS, Arial, Helvetica,
- Вердана, Женева,
- Times New Roman, Times,
- Джорджія, Гарамонд, Палатіно, засічка
- Кур'єр Новий, Кур'єр, монопростір
·
Коди
основних елементів мови 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"> |
|
·
Практична частина
Завдання 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. Створена веб-сторінка повинна мати
напрочуд файний вигляд
Завдання 3. Набрати в текстовому редакторі Блокнот наступний
текст і зберегти його у файл з розширенням html, а саме: CARAMEL.html
Скопіювати HTML-кодування веб-сторінки у
цьому завданні 3.
1)
Відкрити текстовий редактор Блокнот. І вставити на сторінку коди.
2)Зберегти
даний документ під Іменем index2.html на
Робочий стіл.
3) Відкрити даний документ у веб-браузері.
Протестувати активні слова на веб-сторінці
4)
надіслати скріншот утвореної веб-сторінки на e-mail: vinnser@gmail.com
Реалізація.
<!DOCTYPE HTML>
<html>
<head>
<title>Strongly Typed by HTML5 UP</title>
<meta
charset="utf-8" />
<meta
name="viewport" content="width=device-width, initial-scale=1,
user-scalable=no" />
<link
rel="stylesheet" href="css/main.css" />
</head>
<body>
<div
id="page-wrapper">
<!--
Header -->
<section
id="header">
<div
class="container">
<h1>
<a name="festival"></a> 🍭 Фестиваль
карамелi</h1>
<br>
<p>Шматочок щастя від сонячних променів! КАРАМЕЛЬ МОЖЕ СТАТИ
ВИТВОРОМ МИСТЕЦТВА, ПОДАРУНКОМ ВІД ЩИРОГО СЕРЦЯ ДИТИНІ. СВЯТОМ, ЯКЕ ЗБИРАЄ
ДРУЗІВ, КАРТИНОЮЧИ НАВІТЬ ЦІЛИМ МІСТОМ – СОЛОДКИМ І ЯСКРАВИМ<br>
</p>
<div class="gallery">
<div class="header__gallery">
<div class="header__image">
<img src="./images/gallery/1.jpg"
alt="">
</div>
<div class="header__image">
<img
src="./images/gallery/2.jpg" alt="">
</div>
<div class="header__image">
<img
src="./images/gallery/3.jpg" alt="">
</div>
<div class="header__image">
<img
src="./images/gallery/4.jpg" alt="">
</div>
<div class="header__image">
<img
src="./images/gallery/5.jpg" alt="">
</div>
<div class="header__image">
<img src="./images/gallery/6.jpg"
alt="">
</div>
<div class="header__image">
<img
src="./images/gallery/7.jpg" alt="">
</div>
<div class="header__image">
<img
src="./images/gallery/8.jpg" alt="">
</div>
</div>
</div>
<h4><a href="#nav">🞁</a></h4>
<!-- Nav -->
<nav id="nav">
<ul>
<a name="nav"></a>
<li><a href="#festival"><span>Фестиваль
карамелі</span></a></li>
<li><a href="#mklass"><span>Події</span></a>
</li>
<li><a
href="#info"><span>Інформація</span></a></li>
<li><a href="#order"><span>Замовити
подію</span></a></li>
</ul>
</nav>
</div>
<a
name="mklass"></a>
</section>
<!--
Banner -->
<section
id="banner">
<div
class="container">
<div class="wrapper_table">
<p>Хотіли б побачити на власні очі процес створення карамелі,
<br>та ще й взяти в ньому участь?
<br>Ласкаво просимо на <span
class="colortext">фестиваль карамелі</span> - місце, де
збуваються мрії!</p>
<br>
<br>
<div class="table_wrap">
<table class="table">
<thead>
<tr>
<th>Подія</th>
<th>Місце проведення</th>
<th>Тривалість</th>
<th>Відвідування</th>
</tr>
</thead>
<tbody>
<tr>
<td>Карамельний майстер-клас</td>
<td>Майстерня карамелі - Дніпро</td>
<td>60-90 хвилин</td>
<td>Індивідуальне або групове</td>
</tr>
<tr>
<td>
<a href="#eks">Екскурсія майстернею</a></td>
<td>Майстерня карамелі - Дніпро</td>
<td>45 хвилин</td>
<td>Групове</td>
</tr>
<tr>
<td>Корпоративний тимбилдинг</td>
<td>Художня майстерня карамелі</td>
<td>120 хвилин </td>
<td>Групове</td>
</tr>
<tr>
<td>Соціальна акція «Подаруй своє серце»</td>
<td>Художня майстерня карамелі</td>
<td>Нон-стоп</td>
<td>Індивідуальне або групове</td>
</tr>
<tr>
<td>Зимовий майстер-клас "Метелиця"</td>
<td>Художня майстерня карамелі</td>
<td>90 хвилин</td>
<td>Групове</td>
</tr>
</tbody>
</table>
</div>
<br>
<h4><a
href="#nav">🞁</a></h4>
</div>
</div>
</section>
<!--
Main -->
<a
name="info"></a>
<section
id="main">
<div
class="container">
<div class="row">
<!-- Content -->
<div id="content" class="col-3 col-4-medium">
<!-- Post -->
<article class="box post">
<header>
<h2>Позитивні емоції завжди корисні для здоров'я, а карамельні
веселі картинки - хороший спосіб відволіктися від щоденних турбот і здійснити
подорож в дитинство.<span class="colortext"> Як створюється
карамель?</span>
</h2>
</header>
<img
src="images/pic02.jpg" alt="" class="image
featured" />
<p>На самому початку
процесу готується карамельна маса. Цукор з'єднують з патокою і отриману суміш
повільно нагрівають до 100 градусів.<br> Для більших веселощів масу
фарбують у всі барви веселки. Різні відтінки смаку карамелі
забезпечують витяжки з
фруктів і трав.<br>Барвники, які використовують майстри, мають природне
походження.<br> Листя шпинату і щавлю дають <span
class="colortext_green">зелений</span> колір, чорна морква
або кармінова кислота
- <span
class="colortext_red">червоний</span>. Джерело кармінової
кислоти - маленькі мурахи, які водяться тільки в Іспанії. У карамелеводстве
застосовується і <span class="colortext_black">чорний</span>
колір. Наприклад, для кавунових
кісточок. Щоб його отримати, «добувають» рослинне вугілля. Для цього спалюють
сухі рослини, а їх залишки перетирають і змішують з водою. <span
class="colortext_brown">Коричневий</span> колір дає порошок
з какао-бобів, жовтий -
куркума. Білий колір отримують з ... повітря. <br>Карамельну масу
розміщують на спеціальному гачку і розтягують. Такі «процедури» насичують її
повітрям настільки, наскільки вимагає технологія. Майбутня карамель ручної роботи завдяки цьому стає
білою і повітряної. На тому ж гачку за допомогою змішування можна отримати і
інші кольори. Як тільки температура нагріву досягає ста градусів, саме час
виливати вміст на гранітний або
мармуровий стіл. Охолоджуючись, солодка суміш стає дуже пластичною. Це говорить
про те, що робити з неї можна все, що завгодно. Якщо під час подорожі в
дитинство ви вирішили створити карамельний шедевр своїми руками, то фартух і рукавички -
обов'язкові атрибути дійства. Рукавичок надаватися, як правило, більше однієї
пари, так як в ході роботи карамель досить гаряча. Тому пам'ятаємо про техніку
безпеки. <br> Приходьте на <span class="colortext">
фестиваль карамелі</span>, творите дива ручної роботи, іноді заглядайте
в очі дитинству і пам'ятайте - гарний настрій завжди корисно для здоров'я.
</p>
</article>
</div>
<!-- Sidebar -->
<div id="sidebar" class="col-1 col-4-medium">
<!-- Excerpts -->
<section>
<ul
class="divided">
<ul>
<li>
<!--
Excerpt -->
<article class="box excerpt">
<header>
<h3>"КАРАМЕЛЬНИЙ МАЙСТЕР-КЛАС"</h3>
</header>
<p>Спостерігати за майстерністю приготування солодощів дуже
захоплююче, а створювати карамельний шедевр своїми руками цікавіше подвійно! На
нашому солодкому майстер-класі ви спробуєте себе в ролі карамел'є, самі
зробите кращу цукерку в світі, дізнаєтеся історію народження карамельних
чудес і весело проведете час!
</p>
<p><strong>Попередній запис обов'язковий!<br>Вік - від
6 років.</strong></p>
</article>
</li>
<li>
<!--
Excerpt -->
<article class="box excerpt">
<header>
<a name="eks"></a>
<h3>Екскурсія майстернею</h3>
</header>
<p>Кожен день наша карамельна майстерня відкриває двері для всіх
бажаючих!
<br>Під час цієї захоплюючої подорожі ви зможете: <br> зазирнути у
чарівний світ солодощів; <br> на власні очі
побачити, як створюється карамель; <br> долучитися до таїнства появи
малюнків і написів у середині солодощів; <br> скуштувати щойно приготовану, ще теплу
карамельку!
</p>
<p><strong>Попередній запис обов'язковий!<br>Участь у
екскурсії безкоштовна!</strong></p>
</article>
</li>
<li>
<!--
Excerpt -->
<article
class="box excerpt">
<header>
<h3>Корпоративний тимбилдинг "Художнє ліплення з
карамелі"</h3>
</header>
<p>Для
компаній, які прагнуть підвищити корпоративний дух в команді, для збільшення
лояльності співробітників, для згуртування і підвищення вміння співробітників
працювати в команді!
</p>
<p><strong>За попереднім замовленням!<br>Майстер-клас
проводиться для дорослих!</strong></p>
</article>
</li>
</ul>
</ul>
</section>
</div>
</div>
<h4><a
href="#nav">🞁</a></h4>
</div>
</section>
<!--
Footer -->
<section
id="footer">
<a
name="order"></a>
<div
class="container">
<header>
<h2>Замовити участь у події</h2>
<br>
</header>
<div class="row">
<div class="col-2 col-4-medium">
<section>
<form
id="contact-form">
<div
class="row gtr-50">
<div class="col-2
col-4-small">
<input id="name" autocomplete="off" required
placeholder="Ваше ім'я*" type="text" />
</div>
<div
class="col-2 col-4-small">
<input id="email" autocomplete="off" required
placeholder="Адреса електронної пошти*" type="text" />
</div>
<div
class="col-4">
<select autocomplete="off" id="event">
<option value="opt*" disabled >Оберіть
подію*</option>
<option
value="Caramel master class">Карамельный майстер
клас</option>
<option value="Tour of the workshop">Екскурсія
майстернею</option>
<option value="Corporate team building">Корпоративний
тімбілдінг </option>
<option value="Social action - Give your
heart">Соціальна акція «Подаруй своє серце»</option>
<option value="Winter Master Class">Зимовий майстер-клас
"Метелиця" </option>
</select>
</div>
<div
class="col-4">
<textarea id="message"
placeholder="Ваші побажання"></textarea>
</div>
<div
class="col-4">
<label for="">* - обов'язкове для заповнення
поле</label>
<button type="submit" class="form-button-submit button
icon solid fa-envelope"> <a href="">Відправити
замовлення</a></button>
</div>
</div>
</form>
</section>
</div>
<div class="col-2 col-4-medium">
<section class="footer_image">
<img
src="images/pic03.jpg" alt=""
class="rightimage">
</section>
</div>
</div>
</div>
<h4><a
href="#nav">🞁</a></h4>
</section>
</div>
<script
src="js/contact.js"></script>
</body>
</html>
Завдання 4. Завантажте програму-браузер
файл з текстом завдання 3. Створена веб-сторінка повинна
мати напрочуд файний вигляд. Виконайте зміну розмірів кольорів шрифту у заголовках на веб-сторінці. Результат
змін виконання сфотогрофуйте.
Результат
виконаної практичної роботи це файли( із результатами тестування веб-сторінок)
надіслати вашому учителю на електронну скриньку:
vinnser@gmail.com (Сергій Петрович)
Немає коментарів:
Дописати коментар