![]() Главная страница Случайная страница КАТЕГОРИИ: АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника |
Завдання до роботи
Лабораторна робота Створення WEB-сторінок Мета роботи Сформувати у студентів практичні навички створення WEB-сторінок. Завдання до роботи · Вивчити необхідний теоретичний матеріал. · Виконати практичне завдання до лабораторної роботи. · Відповісти на контрольні теоретичні запитання. · Оформити звіт, який містить завдання до лабораторної роботи та вказівки для його виконання. Оцінювання роботи. Максимальну кількість балів за лабораторну роботу студент може одержати, якщо лабораторна робота здається вчасно (на парі з відповідної теми або не пізніше, ніж упродовж двох тижнів після цієї пари, якщо пара пропущена з поважної причини). Якщо лабораторна робота здається після закінчення терміну, вказаного в п.1, але не пізніше, ніж через тиждень після закінчення відповідного модуля, студент може одержати не більше 75% від максимальної кількості балів за дану роботу. Якщо лабораторна робота здається пізніше, ніж через тиждень після закінчення відповідного модуля, студент може одержати не більше 60% від максимальної кількості балів за дану роботу. Після закінчення семестру лабораторна робота захищається лише в період перескладання екзаменаційної сесії. І. Теоретико-практична частина Перед виконанням роботи створіть у власному каталозі підкаталог HTML, в який надалі потрібно записувати всі створювані документи. Для ОС Windows XP. Створивши папку HTML увійдіть до неї, викличте вікно її властивостей (“Сервис / Свойства папки / Вид”) та переконайтеся, що скинуто прапорець “Не показывать расширения для зарегистрированных типов файлов” (в противному випадку редактор „Блокнот” може автоматично додати в кінець імені файлу розширення.ТХТ). Поняття про Web-документи. Створення найпростішої Web-сторінки. Web-документи зберігаються і пересилаються як текстові файли з розширенням htm чи html тощо. Він являє собою звичайний текст, написані мовою HTML. Відображаються такі тексти на моніторі зовсім інакше, ніж вони виглядають у файлі. Для відображення html-файлів використовують спеціальні програми, які називають браузери. Фізико математичний факультет, кафедра Інформатики і ОТ Web-документ, який ми бачимо на екрані браузера, називають web-сторінкою. Бажано, щоб web-сторінка поміщалась на одній-двох екранних сторінках і використання вертикального скролінгу було мінімальним. Додаткову інформацію користувач має читати на інших сторінках, користуючись гіперпосиланнями. Декілька web-документів на одну тему, що є на деякому комп'ютері чи належать одному власникові, утворюють web-вузол (інший термін – web-сайт ). Простий web-документ складається з текстових блоків (короткі текстові абзаци, списки, таблиці), двох-трьох рисунків невеликих розмірів, горизонтальних ліній та гіперпосилань. Більш складні web-документи містять фрейми – рамки, в яких одночасно відображаються різні сторінки; елементи керування – кнопки, перемикачі, поля діалогу; динамічні ефекти та графічні рухомі об’єкти ActiveX чи Flash. Створюючи web-документ, потрібно стежити, щоб обсяг усіх його файлів, зокрема, графічних і відеододатків був невеликим. Великі файли браузер іноді зчитує надто довго. Тому перед тим як вставити у свою web-сторінку графічний, звуковий чи відеофайл або клацнути у чужій web-сторінці на звуковому чи відеопосиланні, варто взяти до уваги пропускну спроможність наявної лінії зв’язку. Для створення web-сторінок використовується мова HTML – Hyper Text Markup Language (мова для розмічування гіпертекстових документів). Деякі редактори, такі як FrontPage, MS Word тощо, дають змогу створювати web-сторінки методом конструювання, тобто за допомогою готових об’єктів не відображуючи явно коди мови HTML. Вони генерують цей код автоматично. Команди мови HTML називаються тегами. Теги записують у кутових дужках. Вони бувають одинарними і парними. Більшість тегів парні, як, наприклад, тег означення html-файлу: < HTML>... < /HTML> Такі парні теги називаються інакше контейнерами. Контейнер може містити текст та інші теги. Парні теги позначають початок і кінець області дії відповідної команди. Кожному відкритому тегу повинен відповідати закритий, що має той самий синтаксис, але починається з символу /. Він закриває область дії відповідної команди. Тег може містити параметри, які користувач записує у першому блоці тегу через пропуск, наприклад, < BODY TEXT=" red" BGCOLOR=#FF37A9>...< /BODY> Як можна бачити на прикладі, нечислові значення параметрів прийнято записувати у лапках. Домовимось надалі всі значення параметрів записувати в лапках. Таким чином, попередній приклад потрібно буде записати у вигляді: < BODY TEXT=" red" BGCOLOR=" #FF37A9" >...< /BODY> 2 Фізико математичний факультет, кафедра Інформатики і ОТ Зауваження. В літературі замість терміну параметр іноді вживають термін атрибут, а теги називають елементом, наприклад, елемент BODY тощо. Вправа 1. Створення найпростішої Web-сторінки 1. Запустіть текстовий редактор для (ОС Windows - Блокнот; для ОС Linux KWriter). 2. Введіть наступний документ: < HTML> < HEAD> < TITLE> Заголовок документа < /TITLE> < /HEAD> < BODY> Зміст документа < /BODY> < /HTML> 3. Збережіть цей документ під іменем first.html. 4. Запустить будь-який браузер. 5. В рядку адреси введіть шлях до файлу first.html, для його відкриття. 6. У випадку якщо текст документу є нечитабельним додайте до області заголовку документу (між тегами < HEAD>...< /HEAD>) один з наступних тегів, що буде встановлювати формат шрифту документу: для ОС Windows - < META http-equiv=" Content-Type" content=" text/html; Charset=windows- 1251", для ОС Linux - < META http-equiv=" Content-Type" content=" text/html; Charset=utf-8" >. 7. Подивіться, як відображається цей файл – найпростіший HTML-документ. Де відображається вміст елемента TITLE? Де і як відображається вміст елемента BODY? 8. Як відображаються слова «Зміст» і «документа», введені у двох окремих рядках? Чому? Перевірте, що відбувається при зменшенні ширини вікна. Тег Призначення Примітка < HTML> Означення html-файлу Парний < BODY параметри> Текст сторінки Парний < TITLE> Заголовок Windows-вікна Парний <! — текст —> Коментар Непарний 3 Фізико математичний факультет, кафедра Інформатики і ОТ Вправа 2. Прийоми форматування абзаців 1. Відкрийте документ first.html у текстовому редакторі. 2. Видалите весь текст, що знаходиться між тегами < BODY> і < /BODY>. 3. Після тегу < BODY> введіть заголовок тексту (заголовок першого рівня), розмістивши його між тегами < H1> і < /H1>. 4. Введіть підзаголовок тексту (заголовок другого рівня), розмістивши його між тегами < H2> і < /H2>. 5. Введіть окремий абзац тексту, почавши його з тегу < Р>. Пропуски можна використати всередині абзацу довільно. Вставте тег < BR>. 6. Введіть принаймні ще одне речення. Закінчіть абзац тегом < /P>. 7. Введіть тег горизонтальної лінійки < HR>. 8. Введіть ще один абзац тексту, розмістивши його між тегами < Р> та < /P>. 9. Збережіть цей документ під іменем paragraph.html, використовуючи пункт меню „Файл / Сохранить как…”. 10. Подивіться, як відображається цей файл. Для цього запустіть його для перегляду в браузер (подвійним клацанням лівою кнопкою миші на файлі або клавішею „Enter”). Встановіть відповідність між елементами HTML-коду і фрагментами документа, що відображаються на екрані. 11. Внесіть наступні зміни до файлу. Заголовок першого рівня розташуйте між тегами < CENTER>... < /CENTER>, а заголовок другого рівня – між тегами < DIV ALIGN=”RIGHT”>... < /DIV>. Збережіть змінений документ на диску, використовуючи пункт меню „Файл / Сохранить” та закрийте текстовий редактор. 12. В браузері оберіть пункт меню „Вид / Обновить” (або скористайтесь відповідною кнопкою панелі інструментів чи кнопкою F5 клавіатури). Порівняйте як змінився вигляд документу. Тег Призначення Примітка < Н1> Заголовок 1 рівня Парний ......... < Н6> Заголовок 6 рівня Парний < Р> Початок нового абзацу. Наступне речення після тега < Р> починатиметься з нового абзацу без відступу з вирівнюванням до лівого краю. Між абзацами буде порожній рядок. Парний < BR> Наступний за цим тегом текст буде виведено у новому рядку без пропуску рядка Непарний < HR> У рядку буде проведена горизонтальна лінія Непарний < CENTER> Вирівнювання по центру тексту або лінії Парний 4 Фізико математичний факультет, кафедра Інформатики і ОТ
|