Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Практична робота № 1
Мета роботи: одержати початкові навички по створенню найпростішого документа HTML. Під час виконання роботи студенти повинні вивчити прийоми форматування абзаців, навчитися створювати гіперпосилання, зображення і використовувати їх на WEB-сторінці.
Стислі теоретичні відомості
Створення Web-документів
Автономні Web-документи використовують мову НТМL (Hyper Text Markur Language — мова розмітки гіпертексту). Гіпертекст, тобто розширений текст, включає додаткові елементи: ілюстрації, посилання, вставні об'єкти. Під. розміткою розуміється використання спеціальних кодів, легко відокремлюваних від смислового змісту документа і використовуваних для реалізації гіпертексту. Застосування цих кодів підкоряється суворим правилам, обумовленим специфікацією мови НТМL.
Особливість опису документа засобами мови НТМL зв'язана з принциповою неможливістю досягнення абсолютної точності відтворення вихідного документа. Передбачається, що документ буде широко доступний в Інтернеті, і тому невідомо, як буде організоване його відтворення. Документ може бути представлений на графічному екрані, виведений у чисто текстовому виді або просто «прочитаний» програмою синтезу мови. Розмітка НТМL у всіх цих випадках повинна бути прийнята до уваги. Тому мова НТМL призначена не для форматування документа, а для його функціональної розмітки. Наприклад, документи звичайно починаються з заголовків. Властивість частини документа «бути заголовком» — це не особливість форматування документа, а характеристика його змісту. Конкретний засіб відображення документа (броузер) вибирає свій спосіб представлення частини документа, описаної як заголовок.
Керуючі конструкції мови НТМL називаються тегами і вставляються безпосередньо в текст документа. Усі теги поміщають в углові дужки <...>. Відразу після відкриваючої дужки розміщується ключове слово, що визначає тег, наприклад <DIV>. Теги НТМL бувають парними і непарними. Непарні теги впливають на весь документ або визначають разовий ефект у місці своєї появи. При використанні парних тегів у документ додаються відкриваючий і закриваючий теги, що впливають на частину документа, розміщену між ними. Закриваючий тег відрізняється від відкриваючого наявністю символу «/» (коса риска) перед ключовим словом (</DIV>). Закриття парних тегів виконується так, щоб дотримувалися правила вкладення.
<В><I>На цей текст впливають два тега</I></В>
Ефект застосування тегу може видозмінюватися шляхом додавання атрибутів. У парних тегах атрибути додаються тільки до відкриваючого тегу. Атрибути являють собою додаткові ключові слова, відокремлювані від ключового слова, що визначає тег, і від інших атрибутів пробілами і розташовувані до завершального тегу символу «>». Спосіб застосування деяких атрибутів вимагає вказівки значення атрибута. Значення атрибута відокремлюється від ключового слова атрибута символом «=» (знак рівності) і заключається в лапки.
<Н1 ALIGN=”LEFT”>
Визначення НTML як мови розмітки ґрунтується на тім, що при видаленні з документа всіх тегів виходить текстовий документ, еквівалентний по змісту вихідному гіпертекстовому документові. Таким чином, при відображенні документа НТМL самі теги не відображаються, але впливають на спосіб відображення іншої частини документа.
Якщо говорити про створення документів НТМL, то можна уявити собі два способи їхнього формування. Перший складається в розмітці існуючих (або створюваного) документа вручну. При цьому автор або редактор додає в документ теги розмітки. Цю роботу можна виконувати в текстовому редакторі або редакторі НТМL, що має спеціальні елементи керування для спрощення введення тегів. В обох цих випадках робота ведеться засобами мови НТМL, і людина, що виконує цю роботу, повинна знати і вміти застосовувати цю мову.
Принципи іншого підходу можна зрозуміти на основі вивчення роботи текстових процесорів. Інформацію про форматування документа також можна розглядати як «розмітку», що додається у документ, що форматується. Однак для використання текстового процесора не потрібно ніяких знань про формат документа і «мову розмітки»: зміни, відображувані на екрані, вносяться в документ автоматично. Такий принцип відповідності екранного зображення реальному одержав назву WYSIWYG (від англійського What You See Is What You Get — Що бачите, те й одержуєте). Найпростіший редактор WYSIWYG для мови НТМL, FrontPage Express, входить до складу операційної системи Windows 98.
Перший спосіб дозволяє створювати більш універсальні, більш якісні і більш різноманітні документи. Другий спосіб простіше освоїти, тому що він не вимагає знання мови НТМL. Однак у цьому випадку використовуються засоби форматування замість засобів опису, що може іноді приводити до небажаних наслідків.
Процес створення Web-документів те саме що програмування і також наражає на помилки. Незалежно від того, яким способом створюється документ, варто регулярно перевіряти його відповідність задумові, переглядаючи його в різних броузерах. Для художньої оцінки сторінки, що виходить, варто звернутися до незалежної думки.
Застосування мови НТМL.
Структура документа НТМL.
Усі документи НТМL мають ту саму структуру, обумовлену фіксованим набором тегів структури. Документ НТМL завжди повинний починатися з тега <НТМL> і закінчуватися відповідно закриваючим тегом (</НТМL>). Усередині документа виділяються два основних розділи: розділ заголовків і тіла документа, -що йдуть саме в такому порядку. Розділ заголовків містить інформацію, що описує документ у цілому, і обмежується тегами <НЕАD> і </НЕАD>. Зокрема, розділ заголовків повинен містити загальний заголовок документа, обмежений парним тегом <ТITLE>.
Основний зміст розміщається в тілі документа, що обмежується парним тегом <ВОDY>. Положення структурних тегів у документі неважко визначити, навіть якщо вони опущені. Тому стандарт мови НТМL вимагає тільки наявності тега <TITLE> (і, відповідно, </TITLE>). Проте, при створенні документа НТМL опускати структурні теги не рекомендується.
Найпростіший правильний документ НТМL, що містить усі теги, що визначають структуру, може виглядати в такий спосіб:
<НТМL>
<НЕАD><ТІTLЕ> Заголовок документа </ТІTLЕ></НЕАD>
<ВОDУ>
Текст документа
</ВОDY>
</НТМL>
Елементи НТМL
Для парних тегів область впливу визначається частиною документа між відкриваючим і закриваючим тегом. Таку частину документа розглядають як елемент мови НТМL. Так, можна говорити про «елемент ВОDY», що включає тег <ВОDY>, основний зміст документа і закриваючий тег </ВОDY>. Весь документ НТМL можна розглядати як «елемент НТМL». Для непарних тегів елемент збігається з тегом, що його визначає.
Більшість елементів мови НТМL описує частини змісту документа і міститься між тегами <ВОDY> і </ВОDY>, тобто, усередині структурного елемента BODY. Такі елементи поділяють на блокові і текстові. Блокові елементи відносяться до частин тексту рівня абзацу. Текстові елементи описують властивості окремих фраз і ще більш дрібних частин тексту. Тепер можна сформулювати правила вкладення елементів.
Усі правила мови НТМL можна розглядати винятково як «побажання». Засіб, використовуваний для відображення Web-документа, зробить усе можливе, щоб витлумачити розмітку найбільш розумним чином. Проте, гарантію правильного відтворення документа дає тільки неухильне дотримання вимог специфікації мови.
Функціональні блокові елементи
У більшості документів основними функціональними елементами є заголовки й абзаци (мал.1). Мова НТМL підтримує шість рівнів заголовків. Вони задаються за допомогою парних тегів від <Н1 > до <Н6>. При відображенні Web-документа на екрані комп'ютера ці елементи показуються за допомогою шрифтів різного розміру.
Звичайні абзаци задаються за допомогою парного тега <Р>. Мова НТМL не містить засобів для створення абзацного відступу («нового рядка»), тому при відображенні на екрані комп'ютера абзаци розділяються порожнім рядком. Закриваючий тег </Р> розглядається як необов'язковий. Мається на увазі, що він стоїть перед тегом, що задає початок чергового абзацу документа. Наприклад:
<Н1>Заголовок</Н1>
<Р>Перший абзац
<Р>Другий абзац
<Н2>Заголовок другого рівня</Н2>
Рис.1. Форматування заголовків і абзаців при відображенні Web-сторінки у вікні броузера
Наслідком наявності спеціального тега, що визначає абзац, є той факт, що звичайного символу кінця рядка, що вводиться по натисканню клавіші ENTER, для створення абзацного відступу недостатньо. Мова НТМL розглядає символи кінця рядка і пробіли особливим чином. Будь-яка послідовність, що складається тільки з пробілів і символів кінця рядка, при відображенні документа розглядається як одиночний пробіл. Це, зокрема, означає, що символ кінця рядка навіть не здійснює переходу на новий рядок (для цієї мети використовується текстовий елемент, що задається непарним тегом <BR>).
Для обмеження абзаців може також використовуватися горизонтальна лінійка. Цей елемент задається непарним тегом <НR>. При відображенні документа на екрані, лінійка розділяє частини тексту одну від іншої. Її довжина і товщина задаються атрибутами тега <НR>.
<HR ALIGN=”RIGHT” SIZE=”10” WIDTH=”50%“>
Цей тег створює горизонтальну лінійку шириною в 10 пікселів, що займає половину ширини вікна і розташовану праворуч.
Гіпертекстові посилання
Гіпертекстове посилання (мал. 2) є фрагментом тексту документа і тому задається текстовим елементом, обумовленим за допомогою парного тега <А>. Цей елемент містить обов'язковий атрибут, що не може бути опущений. У даному випадку обов'язковим є атрибут HREF= (знак рівності показує, що необхідно задати значення цього атрибута).
Як значення атрибута використовується адреса URL документа, на який указує посилання. Вона може вказувати на довільний документ, що розташовується на будь-якому загальнодоступному вузлі мережі (Web-вузол, архів FTP та інші). Наприклад, тег, що відкриває посилання може мати вигляд <А HREF="http://www.site.com/index.htm">.
Адреса URL може бути задана в абсолютній формі, тобто починатися з указівки протоколу й адреси Web-вузла. Такий запис адреси використовується, коли необхідно направити відвідувача на інший Web-вузол, і розглядається як зовнішнє посилання. При використанні відносної адреси в посиланні задається тільки відносний шлях пошуку для документа. У цьому випадку передбачається використання того ж протоколу і того ж Web-вузла, а посилання розглядається як внутрішнє. Внутрішнє посилання зберігає свою працездатність у випадку зміни адреси Web-вузла як цілого (наприклад, у результаті його переносу на інший сервер), тому при потенційній можливості такої події варто відмовлятися від повного завдання адрес у гіперпосиланнях.
Рис.2. На Web-сторінці гіпертекстові посилання виділяються кольором і підкресленням
Гіперпосилання можна використовувати для посилання на мультимедійні файли. Це зручно, тому що в цьому випадку не доводиться чекати завантаження мультимедійних файлів при роботі з даною сторінкою. Якщо ж потрібне інтегрування об'єктів мультимедіа в Web-сторінку, використовують парний тег <OBJECT> або нестандартний непарний тег <ЕМВЕD>, що теж підтримується найбільш розповсюдженими броузерами.
Повний формат гіперпосилання включає можливість посилання на визначене місце усередині сторінки. Але це можна зробити для сторінок власної розробки, позначивши відповідне місце за допомогою якоря. Якір задається також за допомогою парного тега <А>, але в ролі обов'язкового виступає атрибут NАМЕ=. Значення цього атрибута — довільна послідовність латинських літер і цифр (пробіли неприпустимі), розглянута як ім'я якоря. Для посилання на якір його ім'я вказується наприкінці адреси URL після символу «#».
<A HREF=http://www.site.com/index.htm#address>
WеЬ-графіка
Графічні ілюстрації в більшості випадків є невід'ємною частиною WеЬ-документів. Сьогодні графічні елементи WеЬ-сторінок використовують два основних формати — GIF і JPEG (новий формат PNG поки ще не можна вважати загальноприйнятим). Усі графічні броузери, призначені для відображення WеЬ-сторінок на екрані комп'ютера, здатні розпізнавати і відображати файли цих форматів.
Для підготовки зображень можна використовувати будь-який графічний редактор, наприклад стандартний додаток Paint (у Windows 98), що дозволяє зберігати файли в цих форматах.
Файли формату GIF (Graphic Interchange Format) мають розширення .GIF. Зображення в цьому форматі містять 256 кольорів, заданих індексною палітрою. Файл упакований і може займати значно менше місця, чим неупакований растровий малюнок (наприклад, у форматі .ВМР).
Специфікація формату GIF89а дозволяє створювати файли .GIF, що мають спеціальні можливості.
Для створення файлів .GIF, що використовують ці розширені можливості, необхідний графічний редактор, більш потужний, ніж програма Paint. Для створення GIF-анімації використовують спеціальні засоби.
Файли формату JPEG (Joint Photographic Expert Group — за назвою групи дослідників, що запропонувала цей формат, читається «джей-пег») можуть мати розширення .JPEG або .JPG. Формат призначений для збереження фотографічних зображень, що використовують 24-розрядний колір. При конвертуванні у формат JPEG відбувається втрата частини інформації, що приводить до деякого погіршення якості зображення, звичайно непомітного оку.
При виборі формату зображення в першу чергу беруть до уваги обсяг файлу, що виходить, і в другу чергу - якість зображення. При завантаженні WеЬ-документа левину частку часу займає саме завантаження ілюстрацій, так що вітається будь-яка економія. При виборі формату рекомендується створити два файли: у форматі GIF і у форматі JPEG з мінімально прийнятною якістю, після чого вибрати варіант, що має менший обсяг.
Малюнки зберігаються на WeЬ-вузлах в окремих файлах, але відображаються як елементи WеЬ-сторінок. Для вставки малюнка використовується текстовий елемент, що задається непарним тегом <IМG>. Тег <IМG> повинен містити обов'язковий атрибут SRC=, що задає адресу URL файлу з зображенням у відносній або абсолютній формі.
<IMG SRC="plcture 1 .gif”>
При відображенні малюнка броузер по умовчуванні використовує його реальні розміри. Якщо малюнок необхідно відмасштабувати, застосовують атрибути WIDTH= і HEIGHT=, що задають ширину і висоту малюнка (у пікселах), відповідно. Якщо ці параметри задані, то броузер може визначити, яке місце треба виділити для відображення малюнка, ще до того, як малюнок завантажений. Це трохи прискорює відображення сторінки, що завантажується, так що зручно задавати ці атрибути завжди.
<IMG SRC=”plcture2.jpg”WIDTH=”100” HEIGHT=”40”>
Зовнішній вигляд WeЬ-сторінки залежить від того, як саме малюнок розташовується на ній. Тому що малюнок задається як текстовий елемент, що знаходиться усередині якогось абзацу, за замовчуванням він розглядається як вбудоване зображення, що включається в рядок тексту. Щоб зображення відображалося автономно, його включають в окремий абзац.
Для зображення, що дійсно включено в рядок, можна задати режим взаємодії з текстом за допомогою атрибута ALIGN=.
<IMG SRC="picture3.gif” ALIGN=”BOTTOM”>)
Цей атрибут може приймати три значення:
Однак більш краще використання «» зображення, щоплаває, обтічним текстом, що також досягається використанням атрибута ALIGN=:
У цьому випадку рекомендується поміщати тег <IMG> у самий початок відповідного абзацу.
Однак нормальний режим обтікання вимагає, щоб між текстом і зображенням залишався деякий проміжок (мал.3). Задати величину цього проміжку можна за допомогою атрибутів HSPACE= (по горизонталі) і VSPACE= (по вертикалі). Розміри задаються в пікселах.
Створюючи ілюстровані сторінки, не слід забувати, що не усі зможуть побачити ці ілюстрації. Читачів, що не мають адекватного засобу перегляду, можна ознайомити зі змістом ілюстрацій за допомогою альтернативного тексту. Альтернативний текст задається як значення атрибута ALT= і відображається замість картинки, якщо вона з якихось причин не може бути виведена.
Тому що зображення задається як текстовий елемент, воно може бути поміщене усередину іншого текстового елемента, наприклад, що задає гіперпосилання (тег <А>). У цьому випадку зображення стає зображенням-посиланням. При відображенні документа на екрані комп'ютера таке зображення відрізняється синьою рамкою і зміною форми покажчика при наведенні.
Ще один спосіб застосування зображень на WеЬ-сторінках складається у використанні їх як фонового малюнка. При відображенні документа, що містить фоновий малюнок, на комп'ютері робоча область вікна заповнюється цим малюнком послідовно (як паркетом), рахуючи від верхнього лівого кута документа або вікна (мал. 4). Фоновий малюнок задається за допомогою атрибута BACKGROUNG= у тезі <BODY>. Значенням цього атрибута повинна бути абсолютна або відносна адреса URL для файлу з зображенням.
Рис.3. Зображення в тексті, вирівняне по лівому полю
<ВОDY BACKGROUND="waves.gif” ТЕХТ="YELLOW">
Рис. 4. До вибору фонового малюнка варто підходити з особливою обережністю, тому що невдалий фон може зробити читання документа утрудненим
Порядок виконання лабораторної роботи
Запустіть текстовий редактор Блокнот (Пуск > Программы > Стандартные > Блокнот).
Введіть наступний документ:
<НТМL>
<HEAD>
<ТІТLЕ> Заголовок документа </ТІТLЕ>
</HEAD>
<BODY>
Зміст
документа
</BODY> </HTML>
3. Збережіть цей документ під ім'ям first.htm.(Перед збереженням переконайтеся, що скинуто прапорець Не показывать расширения для зарегистрированных типов файлов (Пуск > Настройка > Свойства папки > Вид). У противному випадку редактор Блокнот може автоматично додати в кінець імені розширення .ТХТ.)
Дайте команду Файл >Открыть. Клацніть на кнопці Обзор і відкрийте файл first.htm.
Подивитеся, як відображається цей файл — найпростіший коректний документ HTML. Де відображається вміст елемента TITLE? Де відображається уміст елемента BODY?
Як відображаються слова «Зміст» і «документа», введені в двох окремих рядках? Чому? Перевірте, що відбувається при зменшенні ширини вікна.
Запустіть обзорювач Internet Explorer (Пуск > Программы > Internet Explorer).
Уведіть тег: <А HREF="first.htm">.
Запустіть обзорач Internet Explorer (Пуск > Программы > Internet Explorer).
Створення зображення і використання його на Web-сторінці
Збережіть документ під ім'ям picture.htm.
Дайте команду Файл > Открыть. Клацніть на кнопці Обзор і відкрийте файл picture.htm. Подивіться на документ, що вийшов, звертаючи особливу увагу на зображення.
Зміст звіту
зміст повинен містити:
Висновок.