Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
МОДУЛЬ № 4
РОБОТА У СИСТЕМІ УПРАВЛІННЯ БАЗАМИ ДАНИХ MICROSOFT ACCESS. МОВА ГІПЕРТЕКСТУ HTML
Лабораторна робота № 12
Основи WEB-дизайну. Засоби створення електронних WEB-документів
Мета: Навчитися створювати WEB-сторінку за допомогою основних конструкцій HTML.
Теоретичні відомості
Для перегляду WEB-сторінок використовуються програми, які називаються браузерами або оглядачами. Така програма, застосовуючи протокол HTTP (протокол передавання гіпертексту), встановлює зв’язок із WEB-сервером, читає сторінку, розміщену за вказаною користувачем адресою, та відтворює її у своєму вікні на екрані ПК. Сьогодні найпопулярнішим браузером є Microsoft Internet Explorer.
Браузер Microsoft Internet Explorer 5.0 (5.5) входить до складу ОС Windows98/Me/NT/2000 і дає змогу не тільки проглядати Web-сторінки, а й працювати з іншими сервісами Internet (електронною поштою, FTP, мережними новинами та ін.). Як більшість застосувань під Windows, вікно Internet Explorer має заголовок, меню, панель інструментів, навігатор і кілька службових панелей (адресна, посилань та ін.). Внизу вікна розміщується статусний рядок, у якому відображається поточна інформація про мережне сполучення. У вікно завантажується Web-сторінка, адресу якої користувач вказує у полі панелі адрес (рис. 1).
Призначення кнопок панелі інструментів:
Рис. 1. Вікно Microsoft Internet Explorer
Перед початком роботи необхідно здійснити налаштування програми. Для перемикання кодування символів слід виконати команду Вид/Вид кодировки і обрати один із пропонованих варіантів: кирилиця (Windows), кирилиця (Dos), кирилиця (ISO) чи кирилиця (KOI8-P).
WEB-сторінка являє собою текстовий документ. Екранне представлення Web-сторінки формується за допомогою спеціальних команд мови HTML, інтерпретованих браузером. Цими командами можна забезпечити відображення малюнків, звукозаписів, відео роликів і інших об’єктів у документі. Тобто Web-сторінка, насправді, відображається як комбінований документ.
Мова HTML
Мова HTML (HyperText Markup Language) – це мова розмітки гіпертексту. Розмітка полягає в тім, що до звичайного тексту додаються спеціальні команди HTML, що описують, як він повинний виглядати. Якщо чисто формально викинути з тексту всі ці команди (що можна зробити навіть автоматично), ми одержимо в точності вихідний текст документа. Гіпертекст – це розширений текст, що містить додаткові елементи. Головним серед них є гіпертекстове посилання – гіперпосилання – клацання на якому дозволяє перейти до іншого документу або фрагменту того ж самого документа. Вставні об’єкти (малюнки, відеоролики та ін.) також розглядаються як елементи гіпертексту.
Для створення Web-сторінки можна сформувати документ вручну з використанням текстового редактора і безпосередньо команд HTML. Це найбільш трудомісткий, але і найбільш універсальний шлях. З його допомогою можна реалізувати усе, що дозволяє мова HTML.
Мова HTML описує не формат документа, а його структуру. Форматування документа відбувається потім, у момент перегляду за допомогою браузера. Браузер бачить команди, задані автором, і форматує документ на екрані у відповідності зі своїми настроюваннями і з властивостями комп’ютерної системи, у якій він працює.
Для того, щоб створити WEB-сторінку необхідно в Блокноті (Пуск/Все программы/Стандартные/Блокнот) за допомогою тегів набрати текст документа (рис. 2). Зберегти документ з розширення .htm (наприклад first.htm), при цьому вказати тип файла Все файлы. Закрити Блокнот і знайти свій файл. Зверніть увагу на його піктограму .
Рис 2. Приклад №1
Клацніть на піктограмі файла First.htm. Завантажиться браузер Internet Explorer в якому можна побачити створений документ (рис. 3). Щоб отримати доступ до вмісту файла First.htm, необхідно вибрати меню Вид/У виді HTML (джерело).
Рис. 3. Вигляд документа у браузері.
Треба проаналізувати результати виконання створеного HTML-коду і виправити можливі помилки. Зберегти змінений файл і натиснути кнопку Обновить в Internet Explorer.
Команди мови HTML називаються тегами і записуються у вигляді послідовності букв, укладених у кутові дужки: <тег>. Теги можуть бути одиночними чи парними. Парний тег складається з відкриваючого і закриваючого тега. Закриваючий тег містить ту ж послідовність букв, але їм передує коса риса: </тег>. Область дії парного тега охоплює ту частину документа, що міститься між відкриваючим і закриваючим тегами. Після появи відкриваючого тега в документі повинний обов’язково зустрітися і закриваючий. Наприклад:
<Н1>Заголовок</Н1> – Парний тег, що визначає заголовок першого рівня
<BR> Одиночний тег, який вказує, що наступний текст повинний починатися
з нового рядка.
Тег </BR> – не існує.
Тег може містити атрибути, що задають додаткові чи обов’язкові параметри, які визначають спосіб застосування тега. Атрибути включаються у відкриваючий тег чи безпосередньо в одиночний тег. Вони розміщаються після назви тега і до закриваючого символу “>”. Закриваючі теги ніколи не містять атрибутів.
Атрибути бувають двох типів. Для деяких атрибутів потрібно вказати тільки ім’я. Причому воно може бути присутнім у тегу, або бути опущеним. Для інших атрибутів (таких більшість) задається значення. Тип значення в різних атрибутах різний — це може бути число, ім’я файлу, довільний текстовий рядок та інше.
Щоб вказати значення атрибута, треба після його імені поставити знак = і вказати потрібне значення, взявши його в лапки. Якщо значення атрибута не містить пробілів чи інших спеціальних символів, лапки можна опустити. Імена тегів і атрибутів містять тільки латинські букви, причому в будь-якому регістрі. У значеннях атрибутів регістр враховується, так що варто використовувати прописні чи малі літери.
Наприклад:
<HR size="5" NOSHADE>
де :
Якщо в один тег включається кілька атрибутів, вони відокремлюються від найменування тега і одне від одного одиночними пробілами. Замість пробілів припустимо використовувати і символи переходу на новий рядок.
Основні структурні елементи HTML
Структурні елементи HTML визначають базову структуру документа HTML. Весь документ являє собою один великий елемент, обмежений парним тегом <HTML>. Усередині він складається з двох основних розділів: заголовків (тег <HEAD>) і тіла документа (тег <BODY>). Розділ заголовків містить ряд елементів, що описують властивості документа в цілому. Він повинний містити тег <TITLE>, що має в собі загальний заголовок документа. Усередині тіла документа розташовується весь його зміст. Саме тут пишуть теги, що визначають спосіб оформлення документа у вікні браузера.
Усі перераховані структурні теги – парні. Таким чином, мінімальний “повний” документ HTML має таку структуру:
Стандарт мови HTML розглядає як обов’язковий тільки тег <TITLE>, що повинний бути зазначений у всіх документах HTML. Основні структурні теги звичайно розміщають на окремих рядках (крім елемента TITLE, що іноді записують в один рядок). Теги пишуть так, щоб документ було зручно читати і перевіряти. Прийнято також використовувати систему відступів від лівого краю, за допомогою якої вказується рівень вкладення блокових елементів. Додавання додаткових пробілів несуттєво збільшує обсяг документа, але значно спрощує перегляд і редагування вихідного тексту.
Відкриваючий тег <BODY> може містити цілу групу атрибутів, що безпосередньо впливають на зовнішній вигляд документа:
Задавання кольору можна задати одним із двох можливих способів: найменуванням кольору (наприклад RED) чи його шістнадцятковим кодом (FF0000). Наприклад:
<body text=“red”>червоний</body>
<body text= “#FF0000”>червоний</body>.
Існує стандарт найменування кольорів, причому найпростіший список містить тільки шістнадцять основних кольорів, а розширений – більш 100, з дуже екзотичними назвами типу “cornflowerblue” (волошковий). Запам’ятовувати такого роду назви немає ніякого сенсу і тому зручніше використовувати шістнадцяткові коди кольорів. Такий код складається з трьох пар шістнадцяткових цифр, яким передує символ #. Перші дві цифри описують насиченість червоного кольору, наступні дві – зеленого, а третя пара – синього. Так, код #6495ED, що відповідає згаданому вище волошковому кольору, вказує, що насиченість червоного складає 100 (#64 у шістнадцятковій системі), насиченість зеленого – 149, насиченість синього – 237. У результаті дійсно виходить синювато-блакитний колір. Максимальне значення насиченості будь-якого компонента – 255 (шістнадцяткове #FF).
Додавання заголовків і абзаців
Якщо ви користувалися Microsoft Word, вам повинно бути добре знайоме використання стилів для виділення заголовків за ступенем важливості. У HTML заголовки поділяються на шість рівнів: H1 – найважливіший, H2 – трохи менш важливий, . . ., H6 – найменш значимий.
Приклад того, як додати важливий заголовок:
<H1>Важливий заголовок</H1>
<H2>Трохи менш важливий</H2>
Результат:
Важливий заголовок
Трохи менш важливий
Кожен абзац повинний починатися тегом <P> і закінчуватися тегом </P>. Для вирівняння тексту в документі використовується атрибут align, який дозволяє вирівняти текст по лівому чи правому краю та по центру.
Наприклад:
<P>Це перший абзац</P>
<P>А це другий абзац </P>
<P align="right"> Цей текст вирівняний по правому краю </P>
<P align="left"> Цей текст вирівняний по лівому краю </P>
<P align="center"> Цей текст вирівняний по центру </P>
Форматування тексту
Для форматування тексту можна використовувати різні стилі шрифтів. За допомогою тега <B> встановлюють жирний шрифт, тегів <EM> або <I> – курсив, тег <U> – підкреслене написання символів. Усі перераховані теги – парні. Наприклад:
Це дійсно <em>цікавий</em> пункт!
Результат:
Це дійсно цікавий пункт!
Тег <font> може бути використаний для задавання кольору й розміру шрифту, яким буде виведений ваш текст. Атрибут color служить для вказівки кольору тексту.
Наприклад:
У цій пропозиції є <font color="red">слово</font>, виділене червоним кольором.
Результат:
У цій пропозиції є слово (червоного кольору), виділене червоним кольором.
Атрибут size служить для задавання розміру шрифту в умовних одиницях від 1 до 7. Прийнято вважати, що розмір “нормального” шрифту відповідає числу 3. Розмір може бути зазначено як абсолютною величиною (size=5), так і відносною (size=+2 – збільшить текст на 2 одиниці відносно базового, size=-1 – зменшить текст на 1 одиницю відносно базового).
Наприклад:
Поради <font size="+2" color="maroon">ветеринарного</font> лікаря
Результат:
Поради ветеринарного лікаря
Додавання малюнків
Використання малюнків робить ваші сторінки більш цікавими. Вставити малюнок дозволяє тег <img>. Припустимо, що файл малюнка “peter.jpg” завширшки 200 пікселів і висотою 150 пікселів, лежить у тій же папці, що і HTML файл. Вказуємо наступну команду:
<img src="../files/131/peter.JPG" width="200" height="150"><BR>
Вказівка ширини й висоти не є строго необхідними, але збільшує швидкість завантаження WEB-сторінки. У випадках коли відключене завантаження зображень треба задати опис картинки, використовуючи атрибут alt:
<img src="../files/131/peter.JPG" width="200" height="150" alt="Мій друг Петро">
При встановленні малюнка в документ можна використовувати атрибут align=“…” для вирівняння його по лівому, правому краю та по центру.
У WWW використовується два формати графічних файлів GIF і JPG. Формат GIF використовується, коли потрібно прозоре зображення чи анімація, а також для:
чорно-білих малюнків і тексту
зображень з обмеженою кількістю кольорів
графіки з різкими контурами (меню, кнопки, діаграми і т.п.)
зображень із текстом
Формат JPG більше підходить у таких випадках:
скановані зображення
графіка зі складним сполученням кольорів і відтінків
будь-яке зображення з палітрою більш ніж 256 кольорів
Створення посилань на інші сторінки
Найважливішим поняттям в HTML є гіперпосилання, яке дозволяє зв’язати текст або будь-який об’єкт з іншими гіпертекстовими документами. Посилання позначаються тегом <a>. Загальний вигляд посилання:
<a href="filename">Текст_посилання</a>
Текст між <a> і </a> використовується як опис посилання, і позначається, як правило, синім кольором, і підкреслюється лінією.
Наприклад посилання на сторінку, визначену у файлі “advanced.htm” (тобто посилання на файл “advanced.htm”) має вигляд:
<a href="advanced.htm">Просунутий HTML</a>
Можна використовувати в посиланні малюнок. Наступний приклад дозволяє кликанням на логотипі компанії перейти на її домашню сторінку:
<a href="/"><img src="../files/131/logo.gif" alt="home page"></a>
Списки
HTML пропонує три види списків:
1. Маркірований (невпорядкований) список відкривається тегом <ul> і закінчується </ul>, а кожен його пункт починається стандартним тегом <li>. Наприклад:
<ul>
<li>перший пункт списку</li>
<li>другий пункт списку</li>
<li>третій пункт списку</li>
</ul>
Результат:
перший пункт списку
другий пункт списку
третій пункт списку
2. Нумерований (впорядкований) список використовує теги <ol> і </ol>, а кожен його пункт починається стандартним тегом <li>.
Наприклад:
<ol>
<li>перший пункт списку</li>
<li>другий пункт списку</li>
<li>третій пункт списку</li>
</ol>
Результат:
перший пункт списку
другий пункт списку
третій пункт списку
Список визначень (глосарій) представляє текст у формі словникової статті, що складається з обумовленого терміна й абзацу, що розкриває його значення й відкривається тегом <dl>. Кожен термін відкривається тегом <dt>, а визначення тегом <dd>.
Наприклад:
<dl>
<dt>перший термін</dt>
<dd>його визначення</dd>
<dt>другий термін</dt>
<dd>його визначення</dd>
</dl>
Результат:
перший термін
його визначення
другий термін
його визначення
Списки можуть бути вкладеними один в іншій. Наприклад:
<ol>
<li>перший пункт списку</li>
<li>другий пункт списку</li>
<ul>
<li>перший пункт вкладеного списку</li>
<li>другий пункт вкладеного списку</li>
</ul>
<li>третій пункт списку</li>
</ol>
Результат:
перший пункт списку
другий пункт списку
перший пункт вкладеного списку
другий пункт вкладеного списку
третій пункт списку .
Завдання для лабораторної роботи
В розділі заголовків увести текст “Основні теги HTML”. Виконати всі приклади, наведені в теоретичній частині лабораторної роботи (додавання заголовків і абзаців, виділення тексту курсивом, зміну кольорів і розміру тексту, використання різних видів списків).
Завдання для самостійної роботи
Теми індивідуальних завдань
Запитання для самостійної перевірки знань
PAGE 10