Основи застосування інформаційних технологій

Практичне заняття

Основи застосування інформаційних технологій

МЕТА РОБОТИ – вивчення структури HTML – сторінки і основ проектування для World Wide Web.

ЗМІСТ|вміст| РОБОТИ

Структура HTML| – сторінки

HTML – сторінка – це звичайний текстовою файл, який містить набір інструкцій для інтерпретації усередині спеціально призначених програм – браузерів типу Internet Explorer, Netscape Navigator і ін. (див. п. 3.7 «Робота в мережі Інтернет»). Після прочитання з сервера HTML – сторінки браузер, встановлений

на комп’ютері користувача, отримує вказівки, що містяться в інструкціях, по форматуванню тексту, відображенню графічних елементів, елементів управління, інших елементів, включених в сторінку, і приводить відповідно до них сторінку до того вигляду, який кінець кінцем і відображається на екрані монітора. Крім того, HTML – сторінка містить початкові тексти спеціальних програм, записаних на мовах програмування Java або Visual Basic, які також можуть виконуватися за допомогою браузера.

Теги

Для того, щоб відрізнити інструкцію браузера| від звичайного|звичного| тексту, вона полягає в кутові лапки. Така, укладена в лапки частина|частка| HTML| – сторінки називається тегом. Теги зазвичай|звично| записуються|занотовують| попарно: перший тег визначає початок тексту, з якого повинні діяти інструкції, що містяться|утримуються| в нім, і потім|і тоді| другий тег, який указує|вказує| на закінчення дії відповідних інструкцій. Усередині|всередині| кожного з парних тегів записується|занотовує| ім’я, по якому він ототожнюється, і щоб|аби| відрізнити кінцевий|скінченний| тег від початкового, в нім записується|занотовує| знак «/» (слэш|), наприклад:

<H1>ЗАНЯТИЕ 1</H1> – відобразити текст «ЗАНЯТТЯ 1», ув’язнений в парні теги H1, як заголовок першого рівня.

Крім того, початковий тег може містити|утримувати| опис додаткових властивостей, що уточнюють дію інструкцій. Якщо властивостей декілька, то вони відділяються|відокремлюються| один від одного пропуском|прогалиною|. Щоб|аби| вказати властивість, спочатку записується|занотовує| його повне|цілковите| ім’я (іноді|інколи| скорочене), а потім після|потім| знаку рівне значення, яке воно повинне прийняти. Тип значення є|з’являється| символьним і тому краще указувати|вказувати| його в одинарних (’) або подвійних (”) лапках (в деяких випадках потрібно записувати|занотовувати| дві що відкривають|відчиняють| і дві закриваючі|зачиняти| лапки і тоді можна використовувати спільно одинарні і подвійні лапки). Але|та| не буде і помилки, якщо при записі значення властивості, що містить|утримує| тільки|лише| символи англійського алфавіту, цифри або знак дефіса «-»|, лапки будуть опущені.

Приклади|зразки|:

<H1 align=”center”>ЗАНЯТИЕ 1</H1> – розташувати заголовок першого рівня по центру сторінки;

<FONT color=red size=5>Тема лекции</FONT> – відобразити слова «Тема лекції» шрифтом червоного кольору і розміром 5.

Допускається одну пару тегів укладати|ув’язнювати| усередині|всередині| іншої пари. В цьому випадку інструкції зовнішньої пари розповсюджуватимуться|поширюватимуться| і на увязнену в неї внутрішню пару. Наприклад, наступні|слідуючі| інструкції, вказані тегами <U>| (підкреслений шрифт), <B>| (напівжирне зображення):

<B><U>Тема| лекции</U></B>

Приведуть до того, що текст відобразиться напівжирними і підкресленими буквами (Тема лекції).

При написанні тегів рядкові і прописні букви|літери| не розрізняються, перенесення|перенос| рядка розпізнається як пропуск|прогалина|, а декілька підряд записаних пропусків|прогалин| сприймаються як один. У зв’язку з цим наступні|слідуючі| записи є|з’являються| рівноцінними:

<H1| align| = center>ЗАНЯТИЕ| 1</H1>

<H1| Align| = CENTER>ЗАНЯТИЕ|

1</H1|>

<H1| Align| = CeNteR>ЗАНЯТИЕ| 1</H1>

Скрипти

Скриптами є різновид коди комп’ютерної програми, використовуваної для додання|надання| динаміки HTML – сторінкам|. Така програма зазвичай|звично| записується|занотовує| у вигляді початкового|вихідного| тексту з використанням відповідних діалектів мов|язиків| Visual| Basic| (VB-скрипты|) або Java| (Java-скрипты|). Браузер сприймає текст такої програми, інтерпретує його в команди комп’ютеру і дозволяє таким чином реалізувати різні сценарії роботи із|із| сторінкою.

Для включення|приєднання| скриптів в HTML-сторінку| призначений спеціальний тег <SCRIPT|>. Як параметри цього скрипта задаються властивості, що уточнюють мову|язик|, використовувану для програмування сценаріїв. Слід також мати на увазі, що деякі браузери| не можуть реалізувати програмний код, записаний за допомогою скриптів, і виводять його як звичайний|звичний| текст. Тому правильним буде записати вміст тега <SCRIPT|> у вигляді коментаря, який не почне|стане| відтворюватися у випадку, якщо|у разі, якщо| браузер| не сприймає записаний програмний код, і в той же час дозволить реалізувати передбачений сценарій у відповідному браузере|. Для коментування програмної коди тут використовується поєднання знаків «<!–» – на початку коментаря і «–>|» – в кінці|у кінці| коментаря.

У приведеному нижче прикладі|зразку| показано, яким чином краще всього включити в HTML-сторінку| програмний код сценарію, написаного на діалекті мови|язика| Visual| Basic| (сценарій передбачає обробку події, що відбувається|походить| при натисненні кнопки BUTTONKI| за допомогою подієвого, – орієнтованої процедури ButtonKI_onclick|):

<SCRIPT| LANGUAGE=vbScript|>

<!–

Sub| ButtonKI_onclick|

Msgbox| (“Кнопка натиснута|натискувати|”)

End| Sub|

–>

</SCRIPT|>

Зміст|вміст| сторінки

Мінімальна структура HTML| – сторінки включає наступні|слідуючі| обов’язкові теги (якщо вони відсутні, то браузер| підставляє їх автоматично):

<HTML|>

<HEAD|>

<TITLE></TITLE>

</HEAD|>

<BODY|>

Змістовна частина|частка|

</BODY|>

</HTML|>

Якщо за допомогою будь-якого текстового редактора створити файл із|із| записом перерахованих тегів, замість слів «Змістовна частина|частка|» привести, наприклад, зміст|вміст| текстової частини|частки| конспекту лекції і привласнити файлу розширення. htm, то такий файл почне|розпочинатиме| розпізнаватися браузером| як сторінка HTML|, його можна розмістити на будь-якому сайті і тоді він буде доступний всім учасникам мережі Інтернет.

Як видно|показний| з|із| приведеної схеми, обов’язкова структура сторінки включає дві частини|частки| – заголовок (поміщений|ув’язнений| між тегами HEAD|) і тіло (усередині|всередині| тегів BODY|).

У тегу <TITLE|>, записаному усередині|всередині| заголовка, задається ім’я сторінки. Воно відображається|відображує| в назві вікна браузера|, в якому виводиться дана сторінка, і, крім того, використовується багатьма пошуковими системами Інтернет для визначення тематичного змісту|вмісту| сторінки при пошуку потрібної інформації.

Окрім|крім| тега <TITLE|>, в заголовку можуть бути присутніми і інші теги. Це теги: <BASE|> – задає абсолютну адресу посилань|заслань| на URL|; META| – включає спеціальну інформацію про редактора, в якому створювалася сторінка, про термін її дії і т. п.; LINK| – містить|утримує| інформацію про зв’язки сторінки з|із| іншими сторінками, а також і деякі інші.

Частина|частка| документа, увязнена, в тег <BODY|> охоплює змістовну частину|частку| сторінки. Тут розміщується та інформація, яка має бути відображена|відображувати| на HTML|, – сторінці. Текст, написаний тут, відображатиметься|відображуватиме| у вікні браузера| з урахуванням|з врахуванням| тих інструкцій, які сформовані в тегах або скриптах. При написанні тексту слід враховувати, що декілька підряд написаних пропусків|прогалин| відображатимуться|відображуватимуть| як один пропуск|прогалина|. Щоб|аби| задати пропуск|прогалину| явно, слід використовувати спеціальні інструкції. Наприклад, записаний в тексті набір символів &nbsp відтворюватиметься як пропуск|прогалина|, а якщо записати їх декілька, розділивши знаками «;», то можна задати будь-який відступ (наступний|такий| набір символом відобразиться|відображуватиме| як три розташованих|схильних| послідовно один за одним пропуску|прогалини| – &nbsp;&nbsp;&nbsp). Крім того, ознака кінця рядка, який зазвичай|звично| формується в текстових редакторах при натисненні на клавіатурі клавіші «Enter|», також сприйматиметься як пропуск|прогалина|.

Якщо необхідно використовувати теги скриптів, які повинні реалізувати який, – або сценарій, то їх можна включити в будь-яке місце|місце-милю| сторінки. Проте|однак| якщо сценарієм передбачені зміни сторінки до її завантаження|загрузки| в браузер|, тоді теги скриптів слід помістити перед відкриваючим|відчиняти| тегом <BODY|>. В цьому випадку на більшості браузерів| одночасно із завантаженням|загрузкою| виконуватиметься програмний код, який не включений в процедури обробки подій, і після|потім| закінчення завантаження|загрузки| сторінка відобразиться|відображуватиме| відповідно до передбачених сценарієм змін.

ЗАВДАННЯ|задавання|

1 Ознайомитися із|із| змістом|вмістом| теоретичної частини|частки| роботи.

2 Запустити на виконання текстовий редактор.

3 Створити HTML-сторінку|, що включає заголовок і тіло. Використовуючи тег <TITLE|>, вказати в заголовку сторінки назву «Концептуальна інформатика». У тілі сторінки набрати текст (без урахування форматування і розділення|поділу| на абзаци), приведений в додатку|застосуванні| 1 .

4 Зберегти сторінку командою «Файл – Зберегти як». Вказати тип|типа| файлу «Всі файли» і назва файлу «Ki_button|.htm». Помістити файл в теку|папку|, вказану викладачем.

ВИМОГИ ДО ОФОРМЛЕННЯ ЗВІТУ

Звіт повинен містити|утримувати|:

1 Текстовий файл, що включає теги, необхідні для створення|створіння| HTML-сторінки| і збережений під ім’ям «ki_button|.htm». У файлі має бути вказане назва сторінки, і він повинен мати необхідну змістовну частину|частку|.

2 Звіт оформляється в електронному вигляді|виді|.

Питання для самоперевірки

1.Що таке проектування і проект?

2. Мета і завдання проектування.

3. Вкажіть, для чого на html – сторінці записуються знаки <!– и –> ?

4.Який з тегів повинен стояти ближче до початку HTML – сторінки?

Реферати :

Ви прочитали: "Основи застосування інформаційних технологій"
Читати далі