Поиск по базе сайта:
Урок №29 Тема 8 Створення, публікація та підтримка веб-ресурсів icon

Урок №29 Тема 8 Створення, публікація та підтримка веб-ресурсів




Скачати 119.02 Kb.
НазваУрок №29 Тема 8 Створення, публікація та підтримка веб-ресурсів
Дата конвертації06.07.2013
Розмір119.02 Kb.
ТипУрок
<title> <br /> <b>Урок №29 </b> <br /><br /><br /><b>Тема 8 Створення, публікація та підтримка веб-ресурсів</b><br /> <br /> <b>Тема уроку: Різновиди веб-сторінок. Поняття, структура та різновиди веб-сайтів. Поняття про мову HTML. Її основні теги і атрибути.</b><i>(записати в зошит)</i><br /> <br /> <b>Мета:</b><br /> <br /> <i>навчальна: </i><b>ознайомлення з поняттям, структурою та різновидами веб-сайтів та різновидами веб-сторінок. Формування термінологічних знань учнів про мову розмітки гіпертексту HTML та її призначення. Ознайомитися з сутністю понять HTML-файла, кодів (тегів), атрибутів мови HTML.</b><br /> <br /> <i>розвивальна:</i><b>продовжити формування вмінь аналізувати, зіставляти, порівнювати, виділяти головне, встановлювати причинно-наслідкові зв`язки.</b><br /> <br /> <i>виховна: </i><b>розвивати творчу і пізнавальну активність учнів, виховувати інтерес до предмету, відпрацьовувати навички співпраці.</b><br /><br /><br /><b><span class="butback" onclick="goback(646583)">^</span> <span class="submenu-table" id="646583">Тип уроку</span></b>: засвоєння нових знань. <br /> <br /> <b>Хід уроку</b><br /> <ol> <li><br /><b>Актуалізація та мотивація опорних знань<i>(дати відповіді в зошит)</i>:</b><br /> </ol> <br /> <b>1) </b>Що таке World Wide Web, Web-сторінка?<br /> <ol start=2> <li><br /> Як називаються програми для перегляду інформації в Web? Назвіть деякі з них.<br /> <li><br /> Що таке гіпертекст? <br /> <li><br /> Для чого призначені гіперпосилання в гіпертекстовому документі?<br /> </ol> <ol start=2> <li><br /><b>Повідомлення нового матеріал:</b><br /> </ol> <br /> <b>Поняття про мову розмітки гіпертексту<i>(записати в зошит)</i></b><br /> <br /> Основою світової «павутини» World Wide Web є мова гіпертекстової розмітки HTML (НуperText Markup Language). Ця мова була створена вченими Європейського Центру Ядерних Досліджень (CERN, м. Женева). В кінці 80-х років у CERN зайнялися проблемою збереження та відображення даних, які отримували колеги-фізики. Складність полягала в тому, що кожний фахівець, який приїздив до Центру, застосовував власні методи представлення інформації, і терміново потрібно було створити універсальну систему, яка не залежала б від використовуваної комп'ютерної платформи і в той же час була б досить простою.<br /> <br /> Ідея вирішення проблеми обміну документами між різними комп'ютерами полягала в тому, що документи повинні бути розмічені за допомогою певного коду - HTML. Такі документи могли б читатися на будь-якому комп'ютері, на якому встановлена ​​ одна програма перегляду - броузер.<br /> <br /> Згодом HTML стала основною мовою при створенні документів, що розміщуються у World Wide Web. Завдяки мові розмітки користувач Web може у себе на екрані переглянути документ у тому вигляді, в якому його задумав розробник: із визначеними розмірами шрифту і розбивкою на абзаци, із заданими розмірами і розташуванням малюнків і ін.<br /> <br /> <b>H<img src="642499_html_1ce07244.jpg" name="graphics1" align=left hspace=12 width=70 height=48 border=0>TML </b>- <i><b>набір угод для розмітки документів, що визначають зовнішній вигляд документів на екрані комп'ютера при доступі до них з використанням програми броузера.</b></i><br /> <br /> Документи, підготовлені на мові HTML, називаються HTML-документами. Отримати уявлення про те, як виглядає код HTML, ви зможете, якщо завантажте HTML-документ у броузер і виконайте команду <b>Вид - В виде HTML</b>. У вікні Блокнот ви побачите код поточного документу.<br /> <br /> <i><b>H<img src="642499_html_1ce07244.jpg" name="graphics2" align=left hspace=12 width=70 height=60 border=0>TML-документ</b></i> (або <i><b>Web-сторінка</b></i>) - <i><b>це звичайний текстовий файл з розширенням htm або html, складений на мовою HTML, який містить інформацію, яка призначена для публікації в World Wide Web.</b></i><br /><br /><br />Код HTML є дуже компактним, і HTML-документи мають розмір значно менший, ніж документи, підготовлені в текстових процесорах типу Word. Це одна з основних причин широкого застосування мови HTML для кодування інформації, поширюваної по Інтернету.<br /> <br /> HTML-документи розміщуються в WWW не поодинці, а у вигляді так званих сайтів.<br /> <br /> <i><b>Web-сайт</b></i> - <i><b>це сукупність Web-сторінок (декількох десятків, сотень або навіть тисяч), об'єднаних однією загальною темою і поміщених, як правило, на одному вузловому комп'ютері</i>.</b><br /> <br /> Ми розглянемо основи створення HTML-документів і сайтів з використанням найпростіших елементів мови розмітки. Більш складні технології (листи стилів, програми-сценарії й ін) залишаться за рамками короткого курсу інформатики.<br /><br /><br /><b><span class="butback" onclick="goback(646584)">^</span> <span class="submenu-table" id="646584">Типи сайтів</span></b><br /><br /><br />Якими бувають сайти?<br /><br /><br />Офіційної класифікації сторінок в Інтернеті не існує, але є основні характеристики, за якими можна розділити існуючі сайти, які слугують діловому світові.<br /> <br /><b>Сайт-візитка</b> ­­- це своєрідний довідник про фірму, який містить всі необхідні контактні дані та інформацію про діяльність компанії.<br /> <ul> <li><br />зручний засіб для сканування грунту ринку;<br /> <li><br />не дорого;<br /> <li><br />швидко;<br /> <li><br />вигідний для організацій, у яких бізнес здійснюється не в Інтернеті.<br /> </ul> <br /><br /><b>Kорпоративний сайт – </b>з його допомогою замовники отримують інформацію про ціни на товари і послуги в зручному вигляді, роблять замовлення прямо в Інтернеті, на Вашій сторінці.<br /> <ul> <li><br />доказ серйозності і перспективності Вашого бізнесу;<br /> <li><br />гідне представництво Вашої компанії на ринку;<br /> <li><br />найдешевший і наймасовіший вид реклами Вашого бізнесу;<br /> <li><br />зручно і комерційно виправдано.<br /> </ul> <br /> <b>Промо-сайт - </b>реклама окремого товару або послуги до 10 сторінок, на яких можна розмістити дані про компанію, напрямок діяльності, просування послуги, контактні дані.<br /> <ul> <li><br /> використання можливостей інтернету для впливу на цільову аудиторію;<br /> <li><br /> донесення до потенційних клієнтів максимум інформації про товар і послугу;<br /> <li><br /> потужний й ефективний інструмент реклами компанії та її продуктів..<br /> </ul> <br /><br /><b>Сайт-вітрина - </b>інформація, необхідна для того, щоб клієнт побачив, зацікавився і купив конкретний товар або групу товарів, не відволікаючись на новини та посилання. Це структурований каталог продукції компанії.<br /> <ul> <li><br /> максимальний прибуток при мінімальному вкладенні сил та засобів;<br /> <li><br /> стабільний дохід;<br /> <li><br /> позитивний імідж компанії.<br /> </ul> <br /> <br /> <br /><b>Інтернет – магазин –</b> де клієнт може не тільки побачити наявність всіх товарів, а може ще й зробити замовлення, вибрати варіант розрахунку, спосіб отримання замовлення та одержати рахунок на оплату.<br /> <ul> <li><br />нові можливості для бізнесу;<br /> <li><br />розширення ринку збуту;<br /> <li><br />залучення широкої аудиторії клієнтів;<br /> <li><br /> скорочення витрат.<br /> </ul> <br /><br /><br /><b>Статичний або динамічний сайт?</b><br /> <br /> Крім класифікації сайтів за характеристиками можна розрізняти веб-сторінки і за складністю. Всього існує два види: <i>статичний</i> або <i>динамічний сайт.</i><br /> <br /> <b><span class="butback" onclick="goback(646589)">^</span> <span class="submenu-table" id="646589">Статичним називають сайт з набором постійних, незмінних сторінок.</span> </b>Наприклад, сайт-візитка або сайт-вітрина. Інформація на таких сторінках жорстко закріплена, і зміни можуть здійснюватися тільки фахівцем у веб-технологіях. Такі сайти швидко завантажуються, можуть переглядатися в браузері, мають мінімальні вимоги до веб- сервера. Для компаній такі сайти - бюджетне рішення. Але для підтримки та актуалізації інформації на сторінці все одно будуть потрібні фахівці.<br /> <br /> У цьому плані, динамічний сайт має безліч переваг. Для функціонування подібних веб-сторінок використовується система CMS (система управління змістом). Це забезпечення, яке дозволяє оновлювати інформацію, публікувати і змінювати її без залучення фахівців. Досить провести навчання персоналу лише в області порядку роботи з системою.<br /> <br /> <b><span class="butback" onclick="goback(646585)">^</span> <span class="submenu-table" id="646585">Програми для створення HTML-файлів</span></b><br /> <br /> Отже, документ, складений за допомогою мови розмітки HTML, являє собою текстовий файл. Такий файл можна набрати і відредагувати в звичайному текстовому редакторі, наприклад, в додатках Блокноті або WordPad, які входять до складу ОС Windows. Проте в даний час існують більш зручні та досконалі програми підготовки HTML-документів. Їх умовно можна розділити на візуальні редактори HTML і редактори HTML-текстів.<br /> <br /> При роботі у <i>візуальному HTML-редакторі</i> користувач має справу з графічними образами елементів HTML, а не з кодом документа. Він може шляхом перетягування мишею і простими операціями в інтерфейсі розміщувати на сторінці необхідні елементи. Завдяки цьому навіть користувачеві що, не знає мови HTML, під силу створювати прості Web-сторінки. До візуальних редакторів HTML відносяться програма FrontPage фірми Microsoft, Macromedia Dreamveawer, Netscape Navigator Gold і ін<br /> <br /> <i><span class="butback" onclick="goback(646586)">^</span> <span class="submenu-table" id="646586">Редактори власне HTML-текстів</span></i>, серед яких найбільш відомі HomeSite і HotDog, мають основні можливості текстових редакторів (використання буфера обміну, засоби пошуку слів та ін.) Але, на відміну від звичайних редакторів тексту, ці додатки надають у розпорядження розробника візуальне середовище програмування (типу Visual Basic або Delphi) і дозволяють автоматизувати створення HTML-коду. Редактори HTML-текстів дають можливість користувачу швидко і легко вставляти в документ елементи HTML, перевіряти синтаксис команд, виконувати запуск і налагодження сторінки, не залишаючи вікна редактора.<br /> <br /> При створенні сайту користувач зазвичай сам визначає, чи працювати йому в візуальному HTML-редакторі або вручну складати HTML-код. Але при цьому потрібно врахувати, що ефективно керувати HTML-документами і вирішувати питання Web-дизайну можна тільки при використанні мови розмітки HTML. Основи HTML-кодування ми і будемо вивчати. Усі приклади ви зможете дуже просто повторювати на комп'ютері, набираючи код у редакторі Блокнот і переглядаючи створені документи за допомогою програми броузера.<br /><br /><br />Web-сторінка зберігається як HTML-документ. Головна мета HTML – описати зовнішній вигляд документу. Для цього в текст документу уставляють спеціальні коди – <i>дескриптори </i>або як їх ще називають, <i>теги </i>(від. англ.- <i>tag – </i>етикетка, бірка, мітка, покажник). Вони визначають способи форматування тексту і дозволяють зв`язати слова та фрази документу з іншими документами в Internet. Створити Web-сторінку можливо в будь-якому текстовому редакторі, хоч існують також спеціальні HTML- редактори для створення HTML-документів.<br /> <br /> Щоб розрізнити дескриптори від тексту документу, їх замикають в кутові дужки <b><…></b>. Дескриптори можливо записувати як малими, так і великими літерами.<br /> <br /> <b><span class="butback" onclick="goback(646587)">^</span> <span class="submenu-table" id="646587">Тег – це фрагмент коду, що описує певні елементи документа HTML і вміщений у кутові дужки < > .</span></b><br /> <br /> <b>Елементи HTML – це пари тегів і символьні дані ( текст або код ), вміщені між ними.</b><br /> <br /> Елемент називається звичайно за іменем тегу (без кутових дужок).<br /> <br /> Усі елементи, передбачені в HTML, можливо поділити на кілька категорій:<br /> <ul> <li><br /> <i>структурні </i>– елементи, обов’язкові для документа, що відповідає стандарту HTML (наприклад, HTML, HEAD, BODY, TITLE );<br /> <li><br /> <i>блокові – </i>елементи, призначені для форматування цілих текстових блоків (наприклад, DIV, H1, H2, H3, H4, H5, H6, P, PRE); часто блокові елементи відокремлюються переведенням рядка від іншої частини документа;<br /> <li><br /> <i>текстові </i>– елементи, що задають розмітку шрифту ( I, B, U, BIG, SMALL і ін.), розмітку тексту (STRONG, CODE, VAR, CITE і ін.);<br /> <li><br /> <i>спеціальні </i>– елементи порожнього рядка ( BR, HR ), якірний елемент A, впроваджені елементи (IMG, OBJECT, MAP і ін.), елементи таблиці (TABLE) тощо.<br /> </ul> <br /> Отже, випробуємо себе в створенні Web-сторінок.<br /> <br /> Всі Web- сторінки мають однакову структуру. Дескриптори <b><HTML></b> та <b></HTML></b> є самими “зовнішніми”, вони замикають в себе решту тексту та інші дескриптори. Зверніть увагу: більшість дескрипторів мови – парні: відчиняючий та замикаючий.<br /> <br /> Замикаючий має теж ім`я, що і відчиняючий, але перед ним стоїть коса риска (“/”). Всередині “зовнішніх” дескрипторів знаходяться <i>заголовок </i>та <i>тіло</i> HTML-документів. Заголовок обмежується дескрипторами <b><HEAD> </b>та <b></HEAD> </b>(від. англ. <i>head -</i>заголовок), а тіло – дескрипторами <<b>BODY</b>> та </<b>BODY</b>> (від. англ. <i>body - </i>тіло). В заголовку природно розташувати назву Web-сторінки. Вона обмежується дескрипторами <<b>TITLE</b>> та <b> (від. англ. title - назва). Крім назви, в заголовку можуть знаходитися і інші елементи з додатковою інформацією про Web-сторінку. Тіло містить текст Web-сторінки, елементи мультимедіа, гіперпосилання.

Зручно один раз підготувати файл, який потім використовувати як шаблон – основу для створення інших Web-сторінок. Такий файл має містити наступний текст:





<TITLE> Назва Web-сторінки



<BODY>

Зміст Web-сторінки: текст, графіка, посилання…

BODY>



Складаючи тіло WEB-сторінки звичайно розпочинають з заголовків та підзаголовків, тому що саме вони задають чітку структуру документу. Існує шість рівнів заголовків, кожному з яких відповідає свій розмір шрифту. Використовується такий же принцип, що і в книжках: заголовки глав виділяються крупним шрифтом, заголовки розділів – меншим, заголовки підрозділів – ще більш мілким і т.д. Для виокремлення заголовків на Web- сторінці використовують дескриптори

,

- для заголовка першого рівня ( H від Head),

,

- для заголовків другого рівня і т.д.

Наприклад, створимо таку Web-сторінку:





Оформлення заголовків різних рівнів





Заголовок першого рівня



Заголовок першого рівня



Заголовок першого рівня



Заголовок першого рівня



Заголовок першого рівня


Заголовок першого рівня






Розглянемо теги, які використовують для форматування тексту. Спочатку розглянемо основні одинарні теги для розміщення тексту.

Для того, щоб розділити текст на абзаци, використовують дескриптор

. Він розміщується на початку кожного нового абзацу. Закриваючий дескриптор необов`язковий. Такий дескриптор дає команду браузеру завершити поточний абзац та вставити пустий рядок перед наступним. Якщо потрібно перейти на новий рядок, не вставляючи пустий, слід використати дескриптор розриву рядків <BR>.


- буде проведена горизонтальна лінія.

Це одинарні дескриптори (теги) для розміщення тексту : вони не мають замикаючої пари.

Часто теги , окрім імені, містять додаткові елементи, які називаються атрибутами. Наприклад, якщо в тег тіла документу ввести додатковий елемент:



то це означатиме, що документ має відображатися на жовтому тлі. Слово bgcolor є атрибутом, а yellow – значенням атрибуту.

Атрибути – це компоненти тегу, що містять вказівки про те, як браузер має сприйняти й обробити тег. Атрибут записується після імені тегу перед дужкою > і складається, як правило, із пари « ім`я атрибуту - значення ».

Значення атрибута записується після імені атрибуту через знак рівності = . Всі значення атрибутів за умовчанням мають братися в подвійні (“) або одинарні (`) лапки. Імена атрибутів можуть набиратися як малими, так і великими літерами, - браузер інтерпретуватиме їх однаково. У тега може бути кілька атрибутів, тоді вони відокремлюються один від одного пробілами.

Основна сила мови HTML – у можливості зв’язувати документи між собою за допомогою посилань.

Мова HTML підтримує внутрішні і зовнішні гіперпосилання. Якщо посилання здійснює перехід у межах того самого документу, то його називають внутрішнім. Такі посилання звичайно застосовують у великих документах для переміщення по розділах. Якщо посилання забезпечує перехід до іншого документа, розташованого на іншому Web-вузлі, то це зовнішнє посилання.

Для визначення посилань використовують дескриптор <А> , </A >.

Загальний формат посилання такий:

</A >.

Значенням атрибуту HREF є URL адреса Web- сторінки або шлях до файлу, на який робиться посилання.

Посилання в межах одного документу робиться за допомогою атрибуту NAME (значення) дескриптора <А>.

Локатор URL ресурсу, на який вказує посилання, може бути абсолютним і відносним. Абсолютний URL містить усі компоненти, необхідні для того, щоб броузер зміг знайти Web- сторінку в неосяжній мережі WWW. Але якщо посилання вказує на ресурс, що міститься на тому самому вузлі, що і вихідний документ, зручніше користуватися скороченим записом URL, у якому вказується тільки папка і файл. Такий запис адреси називається відносним URL.

Абзаци та заголовки можливо вирівнювати по центру, по лівому краю та по правому краю. Спосіб вирівнювання задається в дескрипторі заголовку або абзацу за допомогою параметра ALING (вирівняти), який може приймати три значення : CENTER (по центру), LEFT (по лівому краю), та RIGHT (по правому краю).

Наприклад:

<^ P ALIGN=RIGHT> цей абзац буде вирівняний по правому краю.

цей заголовок буде розташований у центрі сторінки.


Коментар

Часто при створенні Web-страниц виникає необхідність пояснити ту або іншу особливість HTML-кода або наміру розробника, але так, чтоби ці пояснення не відображувалися у вікні броузера. У таких випадках незамінним є коментар.

Коментар означає фрагмент коду, що не виконується і розташований між групами символів . Наприклад, на екрані не відображатимуться такі елементи:

або

в двох рядках ->

^ 5. Закріплення матеріалу.

а) Що таке веб-сайт? Назвіть типи веб-сайтів.

б) Яке призначення мови розмітки HTML?

в) Що таке теги і елементи HTML?

г) Що таке заголовок і тіло документа?

д) Яке призначення атрибутів і в якій частині коду вони розміщені?


6.Домашнє завдання.

Повторення матеріалу: Гаєвський О. Ю. ( Інформатика 7 -11 кл.: Навч. посіб.- Київ.: «А.С.К.», 2008.- 512 с.: іл.) §§66-67 (повт.).

Вивчити визначення: Гаєвський О. Ю. ( Інформатика 7 -11 кл.: Навч. посіб.- Київ.: «А.С.К.», 2008.- 512 с.: іл.) § 73








Схожі:




База даних захищена авторським правом ©lib.exdat.com
При копіюванні матеріалу обов'язкове зазначення активного посилання відкритою для індексації.
звернутися до адміністрації