Будь умным!

У вас вопросы?
У нас ответы:) SamZan.net

Лабораторна робота 12 Основи WEBдизайну

Работа добавлена на сайт samzan.net:


МОДУЛЬ № 4

РОБОТА У СИСТЕМІ УПРАВЛІННЯ БАЗАМИ ДАНИХ MICROSOFT ACCESS. МОВА ГІПЕРТЕКСТУ HTML

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

Основи  WEB-дизайну. Засоби створення електронних WEB-документів

Мета: Навчитися створювати WEB-сторінку за допомогою основних конструкцій HTML.

Теоретичні відомості

Браузер Microsoft Internet Explorer

Для перегляду 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).

Призначення кнопок панелі інструментів:

  •  Назад –перехід до попередньої завантаженої сторінки;
  •  Вперед –перехід до наступної сторінки;
  •  Остановить – дає змогу перервати зв’язок з поточним вузлом і зупинки передавання даних;
  •  Обновить – дає змогу відновити інформацію у поточному вікні, знову завантаживши сторінку з сервера;
  •  Домой – перехід до “Домашньої” сторінки, з якої завжди починається навігація в Internet;
  •  Поиск – пошуку ресурсів Internet за введеними словами за допомогою пошукового сервера Internet Explorer;
  •  Избранное – для накопичування найцікавіших сторінок Internet та доступу до них;
  •  Журнал – для пошуку і вибору сторінок  Internet, до яких зверталися під час попередніх сеансів роботи з програмою Internet Explorer;
  •  Почта – завантаження програми Outlook Express для роботи з електронною поштою та групами новин;
  •  Печать –  друкування вмісту поточного вікна  Internet Explorer;
  •  Правка – виклик текстового редактора Блокнот, Word, або програми Front
  •  Page для редагування поточної сторінки;
  •  Messenger – виклик програми MSN Messenger Service, наприклад для проведення відео конференцій.

Рис. 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>

 де :

  •  Одиночний тег <HR> задає горизонтальну лінійку
  •  Атрибут NOSHADE не вимагає вказівки значення і визначає відображення лінійки в плоскому одноколірному виді.
  •  Атрибут SIZE="5" задає товщину лінійки,  рівну 5 пікселам.

Якщо в один тег включається кілька атрибутів, вони відокремлюються від найменування тега і одне від одного одиночними пробілами. Замість пробілів припустимо використовувати і символи переходу на новий рядок.

Основні структурні елементи HTML

Структурні елементи HTML визначають базову структуру документа HTML. Весь документ являє собою один великий елемент, обмежений парним тегом <HTML>. Усередині він складається з двох основних розділів:  заголовків (тег <HEAD>) і тіла документа (тег <BODY>). Розділ заголовків містить ряд елементів, що описують властивості документа в цілому. Він повинний містити тег <TITLE>, що має в собі загальний заголовок документа. Усередині тіла документа розташовується весь його зміст. Саме тут пишуть теги, що визначають спосіб оформлення документа у вікні браузера.

Усі перераховані структурні теги – парні. Таким чином, мінімальний “повний” документ HTML має таку структуру:

Стандарт мови HTML розглядає як  обов’язковий тільки тег <TITLE>, що повинний бути зазначений у всіх документах HTML. Основні структурні теги звичайно розміщають на окремих рядках (крім елемента TITLE, що іноді записують в один рядок). Теги пишуть так, щоб документ було зручно читати і перевіряти. Прийнято також використовувати систему відступів від лівого краю, за допомогою якої вказується рівень вкладення блокових елементів. Додавання додаткових пробілів несуттєво збільшує обсяг документа, але  значно спрощує перегляд і редагування вихідного тексту.

Відкриваючий тег <BODY> може містити цілу групу атрибутів, що безпосередньо впливають на зовнішній вигляд документа:

  •  TEXT=“…” –  встановлює колір тексту всього документа;
  •  BGCOLOR=“…” –  визначає фонове зображення для сторінки; 
  •  BACKGROUND=“…”  – вказує адресу файла (*.gif або *.jpg), який необхідно використовувати в якості фонового зображення для сторінки. Це зображення “підкладається” під текст подібно плиткам  паркету, починаючи з лівого верхнього кута сторінки. Фонове зображення фактично заміщає фоновий колір, що (якщо він також заданий) у цьому випадку видний тільки під час завантаження сторінки. Зображення, що використовується як тіло, повинно бути неяскравим і малоконтрастним, щоб воно не порушувало читаність тексту сторінки.

Задавання кольору можна задати одним із двох можливих способів: найменуванням кольору (наприклад 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>

Результат:

перший пункт списку

другий пункт списку

перший пункт вкладеного списку

другий пункт вкладеного списку

третій пункт списку .

Завдання для лабораторної роботи

  1.  Запустити браузер Internet Explorer, ознайомитися з меню браузера і Довідкою, а також із структурою поточної (домашньої) Web-сторінки. Виконати Пуск/ Все программы/ Internet Explorer.
  2.  Налаштувати програму для перемикання кодування символів. Виконати команду меню Вид/Вид кодировки і обрати один із пропонованих варіантів: кирилиця (Windows), кирилиця (Dos), кирилиця (ISO) чи кирилиця (KOI8-P).
  3.  Відкрити Митний кодекс, який розташований на Mainserver\Common_doc\Митний кодекс та переглянути його розділи, ознайомитися з використанням кнопок Вперед, Назад та Оновити сторінку.
  4.  У власній робочій папці створити папку MY_STORY. 
  5.  Відкрити стандартну програму Блокнот (Пуск/Все программы/ Стандартные/ Блокнот). Зберегти порожній файл, який  створили у Блокноті, під назвою First.htm у папці MY_STORY. Для цього при збереженні слід обрати  Тип файлу/Всі файли. Закрити Блокнот і знайти свій файл. Зверніть увагу на його піктограму (е). Клацніть на піктограмі файла First.htm. Завантажиться браузер Internet Explorer, але його вікно буде порожнім. Зверніть увагу на рядок адреси. Щоб отримати доступ до вмісту файла First.htm, обрати меню Вид/У виді HTML (джерело). У вікні Блокнота, що відкриється, набрати тексти HTML-документу, наведеного у  прикладі №1  лабораторної роботи, в якому вказати  коротку інформацію про розробника: ПІБ, група, дата народження, хобі  та ін (всього п’ять рядків). Зберегти змінений файл  і натиснути кнопку Обновить в Internet Explorer. Аналізуємо результати виконання створеного HTML-коду і виправляємо можливі помилки.
  6.  За допомогою Блокнота створити порожній файл  Second.htm.
  7.  Відкрити  файл  Second.htm, створити структуру web-сторінки.

В розділі заголовків увести текст “Основні теги HTML”. Виконати всі приклади, наведені в теоретичній частині лабораторної роботи (додавання заголовків і абзаців, виділення тексту курсивом, зміну кольорів і розміру тексту, використання різних видів списків).

  1.  Знайти на своєму або іншому  мережному ПК довільний графічний файл  формату JPG  і  скопіювати  його в папку  MY_STORY.
  2.  Виконати вставку малюнка формату JPG, скопійованого раніше в папку MY_STORY.

Завдання для самостійної  роботи

  1.  Створити файл My_Site.htm в папці MY_STORY за темою у відповідності з номером варіанту. Використати всі теги наведені в лабораторній роботі: додавання заголовків і абзаців, виділення тексту курсивом, використання різних видів списків, додавання малюнків. Рядки тексту задати різним кольором та розміром.
  2.   Створити в My_Site.htm посилання на сторінки First.htm та Second.htm, що також знаходиться в папці MY_STORY.
  3.  Продивитися результати своєї роботи у браузері.

Теми індивідуальних завдань

  1.  Представлення інформації. Системи числень.
  2.  Складові частини ПК.
  3.  Центральний процесор. Його характеристика.
  4.  Види пам’яті.
  5.  Системне програмне забезпечення.
  6.  Прикладне програмне забезпечення.
  7.  Класифікація операційних систем.
  8.  .Файлова система операційних систем.
  9.  Програми-оболонки. Їх характеристика.
  10.   Стандартні  програми ОС Windows.
  11.  Сервісні програми ОС Windows.
  12.  Стиснення інформації. Програми архіватори.
  13.  Поняття віруса. Класифікація вірусів.
  14.  Захист інформації. Антивірусні програми.
  15.  Текстовий редактор Word.
  16.  Табличний процесор Excel.
  17.  Архітектура БД.
  18.   Моделі представлення БД.
  19.  Реляційні БД. СУБД Access.
  20.  Поняття про електронний офіс. Пакет Microsoft Office.
  21.  Поняття алгоритму. Типи та властивості алгоритмів.
  22.  Мова програмування  Visual Basic For Applications.
  23.  Комп’ютерні мережі та їх класифікація.
  24.  Поняття про електронну пошту. Протоколи передачі електронної пошти.
  25.  Поштові програми. Структура електронного листа.

Запитання для самостійної перевірки знань

  1.  Що таке браузер? Для чого він призначений?
  2.  Структура вікна Internet Explorer.
  3.  Призначення команд головного меню програми Internet Explorer.
  4.  Призначення мови розмітки гіпертексту.
  5.  Інтерпретація  документа HTML у браузері.
  6.  Що таке гіперпосилання?
  7.  Теги, їх оформлення та  класифікація.
  8.  Структура найпростішого HTML-документу.
  9.  Призначення  та  синтаксичні вимоги до атрибутів.
  10.  Основні відомості про систему кольорів.
  11.  Яку структуру має шістнадцятковий код кольору?
  12.  Які види заголовків підтримує HTML?  
  13.  За допомогою якого тега можна перейти на новий рядок?
  14.  Теги для створення  абзаців.
  15.  В чому різниці між тегами <br> та <p>?
  16.  Як виділити текст курсивом, жирним шрифтом чи підкреслити його?
  17.  Які  існують можливості налаштування кольору та розміру тексту?
  18.  Чим відрізняється абсолютна та відносна величина розміру тексту?
  19.  Як вирівняти текст документа?
  20.  Що таке списки? Які види списків бувають?
  21.  Як створити різні види списків?
  22.  Як створити вкладений список?
  23.  Як зробити посилання на іншу web-сторінку?
  24.  Як виконати вставку та  налаштування малюнків у web-сторінці?
  25.  Як задати розмір малюнка та розміщення на сторінці?

PAGE  10




1. лежал на стуле а глаза его были закрыты
2. Электроснабжение городского электрического транспорта
3. Новая история
4. на тему яка задана умовами конкурсу що проходить під егідою Національного Проекту Відкритий світ компані
5.  Манипуляторы Эти люди являются специалистами в области манипулирования
6. Права человека
7. на тему- Понизительная подстанция 110-6 кВ Курсовой проект выполнил- студент группы 429 Крупко В
8. Финансовое планирование на предприятиях промышленности в переходной экономике
9. Своеобразие жанров интернет-журналистики на примере газет Lent.ru, Ytro.ru, Территория и журнала Beutytime.r
10. на тему ldquo;Конституционные гарантии основных прав и свобод человека и гражданина в Российской Федерации rdquo
11. Акушерство базовый уровень среднего профессионального образования завершается проведением итоговой атте.
12.  Ключи-раркиИтак
13. БЕЛОРУССКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНОЛОГИЧЕСКИЙ УНИВЕРСИТЕТ Факультет Лесохозяйственный Кафедра Ле
14. Тематический план лабораторных занятий по нормальной физиологии по специальности Педиатрия III се
15. человек или эльф
16. Контрольная работа- Расчет параметров постоянно-поточной линии
17. Игра как организационная форма обучения через Интернет
18. во полных лет Семейное положение Состав семьи Количество и возраст детей
19. Сущность функций социального управления
20. Браве торларыны~ 14 т~рі.html

Материалы собраны группой SamZan и находятся в свободном доступе