ООІ та ПЗ-2.6.3. Розміщення графіки, аудіо- та відеоінформації на веб-сторінках | Основи комп'ютерної графіки та веб дизайну

Лабораторна робота №5

Тема: Створення HTML-документів в простому текстовому редакторі

Мета: Навчитись створювати HTML-документи в простому текстовому редакторі

Створимо HTML-документ за допомогою найпростішого текстового редактора. 1. Відкрийте текстовий редактор Блокнот (Notepad). 2. Для створення HTML-документа наберіть такий текст: <HTML> <HEAD> <TITLE>Купівля\продаж</TITLE> </HEAD> <BODY> < Н 1 > Т о р г о в е л ь н і о б ' є к т и Львівщини</Н1> <Н2>Супєрмаркети</Н2> <Р>На Львівщині діє мережа магазинів Інтермаркет. У кожному районі є торговельний об’єкт < /Р > Одним із таких магазинів став нещодавно відкритий супермаркет"АРСЕН". <HR> Це торговельний центр із багатьма відділами та зручною системою обслуговування покупців Його можна назвати торговельним містечком. </BODY> </HTML> 3. Збережіть файл на жорсткому диску у створеній заздалегідь папці, назвавши його, наприклад, 1.html. Закрийте текстовий редактор. 4. Запустіть браузер Internet Explorer та відкрийте файл 1.html. Перегляньте отриманий результат. 5. Проаналізуйте, як відтворено веб-сторінку. Якщо потрібно внести зміни, виберіть команду Перегляд HTML-коду в меню Вигляд. Збережіть зміни та оновіть веб-сторінку за допомогою клавіші F5 або кнопки Оновити панелі інструментів. 6. Помістіть на веб-сторінку наведений нижче текст, відформатувавши його за допомогою відповідних тегів. Троянда сталиста Граціозні форми, ніжне забарвлення, витончений аромат троянди з незапам'ятних часів чарували людей. Тому й створено безліч легенд про цю чарівну, ніжну й чудову квітку. За староіндійською легендою, прекрасна богиня Лакшмі народилася з пуп'янка троянди. У давньому індійському міфі розповідається, що прегарний юнак Адоніс, який уособлював прихід весни, постав із куща троянди. У Персії так шанували царицю квітів, що навіть країна одержала назву Гюлістан — країна троянд. У Римі цю квітку вважали символом хоробрості, нею нагороджували за доблесть. В Афінах часів Аристофана трояндовий вінок одягали на шию переможцям змагань. Гірлянди квітів прикрашали колони і стіни залів у дні тріумфальних святкувань. Існує припущення, що русальна неділя — давнє свято в Україні та Білорусі — пов'язана з розаріями — святом римлян на честь цих прекрасних квітів. (Мамчур Ф.І., Гладун Я.Д., Лікарські рослини на присадибній ділянці) 7. Введіть HTML-код веб-сторінки, на якій відображатиметься наведений вище відформатований текст. 8. У цьому прикладі для деяких фрагментів тексту необхідно застосувати по два теги форматування, наприклад, <І>Укр а ї н і . Слід пам'ятати про правило вкладених тегів, згідно з я к и м їх потрібно закривати у зворотному до відкривання порядку. Тобто я к щ о спершу відкрили тег курсиву, а потім — тег підкреслення, то спочатку слід закривати тег підкреслення, а потім — курсиву. 9. Збережіть html-документ у файлі з розширенням .html.

Лабораторна робота №6

Тема: Використання тегів форматування тексту. Нумеровані й марковані списки на веб-сторінках

Мета: Навчитись форматувати текст та використовувати списки

Розглянемо приклади використання різних типів списків. 1. Маркований список, в якому для позначення елементів використовують коло <HTML> <TITLE>Райдуга</TITLE> <BODY> <BASEFONT SIZE=6> <UL ТУРЕ=”сігсlе”> <LI>Червоний</LI> <LI>Оранжевий</LI> <LI>Жовтий</LI> <LI> З е л е н и й < / F O N T > < / L I > <LI>Блакитний</LI> <LI>Синій</LI> <LI>Фioлeтoвий</LI> </UL> </BODY> </HTML> 2. Нумерований список, в якому для позначення елементів використовують малі римські цифри <HTML> <TITLE>Райдуга</TITLE> <BODY> <BASEFONT SIZE=6> <OL TYPE=i> <LI>Червоний</LI> <LI>Оранжевий</LI> <LI>Жoвтий</LI> <LI>Зелений</LI> <LI>Блакитний</LI> <LI>Синій</LI> <LI>Фіолетовий</LI> </OL> </BODY> </HTML> 3. HTML-документ, в якому використовуються гіперпосилання та якорі <HTML> <HEAD> <TITLE>Посилання та якорі</TITLE> </HEAD> <BODY> Нові версії стандартних програм операційної системи та найважливіші драйвери можна знайти на веб-сайті компанії <А HREF="http://www.microsoft.com/">Microsoft</A>. A тепер можна перейти на <А HREF="main.htm"> мою особисту сторінку</А>. <Р>Про те, як зв'язатися з автором, розповідається в <А HREF="#olenap"> кінці цієї сторінки</А> Можна використати матеріали, що розміщені <А href="text.doc"> в цьому текстовому документі.</А> <А NAME="olenap" HREF="mailto:[email protected]">[email protected]</A> </BODY> </HTML>

Лабораторна робота №7

Тема: Створення таблиць та розмітка веб-сторінок за їх допомогою

Мета: Навчитись створювати таблиці

Створити HTML-документ з таблицею яка містить назви п'яти робочих днів тижня, на кожен з яких припадає 4-5 уроків. HTML-код для створення цієї таблиці матиме такий вигляд: <HTML> <TITLE>Приклад простої таблиці</TITLE> <BODY> <TABLE BORDER="1"> <САРТION>Розклад уроків</САРТION> <TR> <ТН>Понеділок</ТН> <ТН>Вівторок</ТН> <ТН>Середа</ТН> <ТН>Четвер</ТН> <ТН>П'ятниця</ТН> </TR> <TR> <TD>1. Алгебра</TD> <TD>1. Українська мова</TD> <TD>1. Зарубіжна література</TD> <TD>1. Географія</TD> <TD>1. Хімія</TD> </TR> <TR> <TD>2. Іноземна мова</TD> <TD>2. Хімія</TD> <TD>2. Геометрія</TD> <TD>2. Фізична культура</TD> <TD>2. Іноземна мова</TD> </TR> <TR> <TD>3. Фізична культура</TD> <TD>3. Алгебра</TD> <TD>3. Іноземна мова</TD> <TD>3. Фізика</TD> <TD>3. Геометрія</TD> </TR> <TR> <TD>4. Географія</TD> <TD>4. Інформатика</TD> <TD>4. Трудове навчання</TD> <TD>4. Українська мова</TD> <TD>4. Українська література</TD> </TR> <TR> <TD></TD> <TD>5. Фізика</TD> <TD>5. Українська література</TD> <TD></TD> <TD></TD> </TR> </TABLE> </BODY> </HTML> 3. Зверніть увагу на те, що за відсутності даних у комірці таблиці рамка навколо неї не відображається. Для того щоб рамку було видно, можна ввести спеціальний код   (non-breaking space — нерозривний пробіл). Після цього порожня комірка буде взята в рамку.

Лабораторна робота №8

Тема: Розмітка веб-сторінок за допомогою фреймів

Мета: Навчитись працювати з фреймами

. 1. Запишіть HTML-код для веб-сторінки про школу «Дивосвіт» і збережіть цей файл як 1.html. <HTML> <TITLE>Школа «Дивосвіт»</TITLE> <BODY BGCOLOR=CYAN><BASEFONT SIZE=6 COLOR=olive> <Н1 ALIGN=CENTER> Школа «Дивосвіт»</Н1> <Р>Цю школу відвідують діти молодших класів, вони додатково вчаться малюванню, музиці та танцям.</Р> </BODY> </HTML> 2. Запишіть HTML-код для веб-сторінки про гімназію «Сихівська» і збережіть цей файл як 2.html. <HTML> <TITLE>Гімназія «Сихівська»</TITLE> <BODY BGCOLOR=lightcoral><BASEFONT SIZE=6 COLOR=indigo> <Н1 ALIGN=CENTER>Гiмнaзiя «Сихівська»</Hl> <Р>Діти відвідують гімназію з п'ятого класу, додатково вивчають іноземні мови, інформатику, відвідують спортивні секції.</Р> </BODY> </HTML> 3. Запишіть HTML-код для веб-сторінки про ліцей «Оріяна» і збережіть цей файл як 3.html. <HTML> <TITLE>Ліцей «Оріяна»</TITLE> <BODY BGCOLOR=lavender><BASEFONT SIZE=6 COLOR=dark:cyan> Використання таблиць у HTML-документах 73 <Н1 ALIGN=CENTER>Лiцeй «ОріяHa»</Hl> <Р>У ліцеї основну увагу приділяють вивченню математики та інформатики.</Р> </BODY> </HTML> 4. Запишіть HTML-код для головної сторінки та збережіть цей файл як index.html. 5. Створіть файл сторінки та збережіть його як main.html у тій самій папці, що й решту документів. <HTML> <TITLE>Навчальні заклади</TITLE> <FRAMESET ROWS="60%, 40%"> <FRAMESET COLS="50%,50%"> <FRAME SRC="2.html"> <FRAME SRC="3.html"> </FRAMESET> <FRAME SRC="l.html"> </FRAMESET> </HTML> 7. Відкрийте файл main.html.

Лабораторна робота 9

Тема: Створення форм. Таблиці стилів

Мета: Ознайомитися з стилями CSS

Теоретичні відомості Поняття про таблиці каскадних стилів. Стиль – це набір правил оформлення та форматування, який можна застосовувати до різних елементів веб-документа. У разі використання стандартної мови HTML для надання кільком елементам певних властивостей (наприклад, призначення стилю шрифту) доводиться здавати ці властивості для кожного елемента. Використання таблиць стилів дає змогу уникнути цього, оптимізувавши розробку веб-сайтів. Стилі дають змогу позицію вати елементи сторінки (наприклад, тексти і графіку), задаючи координати. Крім того, таблиці стилів часто використовують під час створення так званих динамічних сторінок. Таблиці каскадних стилів (CSS, Cascading Style Sheets) містять параметри форматування частини або всього тексту веб-сторінки. Якщо таку таблицю підключено, то у тегах можна просто вказувати посилання на неї, а не задавати велику кількість атрибутів. У цьому випадку стилі названі каскадними тому, що в одному документі їх можна описати кілька, і браузер використовуватиме їх каскадом відповідно до їхнього пріоритету. Таблиці каскадних стилів – це передусім набори параметрів, що змінюють властивості тегів HTML. Такі набори називають ще визначенням тегів. Наприклад: P {font-size: 40pt; color: green; font-family: “Comic Sans MS”} Тут задано параметри для тегу абзацу , які встановлюють розмір шрифту 40 пунктів, колір шрифту – зелений, гарнітуру - Comic Sans MS. У документі достатньо ввести теги … із текстом абзацу, щоб автоматично адати йому зазначеного оформлення. Параметрів форматування, які можна задавати за допомогою стилів, досить багато. Це зокрема: background – колір тла; font-family – стиль шрифту (гарнітура); font-size – розмір шрифту; font-weight – жирність шрифту; color – колір шрифту; text-decoration –оздоблення тексту; text-align – вирівнюваня тексту; margin-top – відступ від верхнього рядка абзацу; line-height – міжрядкова відстань. Застосування каскадних стилів у HTML-документах. Є три способи зв’язку каскадних стилів із HTML-документом: підключення зовнішньої таблиці стилів; безпосередньо в тегах абзаців і заголовків. Підключення зовнішньої таблиці стилів. Зовнішня таблиця стилів (External Style Sheet) – це текстовий файл із розширенням .css. Його підключають до HTML-документа за допомогою тегу <LINK>, який записують у розділі <HEAD>, наприклад: <LINK REL=”stylesheet” TYPE=”text/css” HREF=”mystyle.css”> Атрибути REL та TYPE вказують браузеру на те, що сторінка використовує таблиці каскадних стилів. Атрибут HREF задає адресу файлу (mystyle.css). Хід роботи Оформимо веб-сторінку за допомогою зовнішньої таблиці стилів. Відкрийте текстовий редактор Блокнот і введіть таке визначення тегу : P {font-size: 40pt; color: green; font-family: “Comic Sans MS”} Збережіть файл з іменем mystyle.css. Створіть у Блокноті файл такого змісту: <HTML> <HEAD> <LINK REL=”stylesheet” TYPE=”text/css” HREF=”mystyle.css”> <TITLE> Приклад використання CSS</TITLE> </HEAD> <BODY> Цей текст оформлено відповідно до таблиці стилів, яка міститься у файлі mystyle.css: розмір шрифту - 40 пунктів, колір шрифту – зелений, а гарнітура - Comic Sans MS. </BODY> <HTML> Збережіть цей файл з іменем pryklad1.html у тій самій папці, що і mystyle.css. Відкрийте файл pryklad1.html у вікні браузера. Як бачите, хоча в цьому докуметі не задано жодних параметрів для тегу &l