Головна > Витяжки > Html мова гіпертекстової розмітки є. Мова гіпертекстової розмітки HTML


Html мова гіпертекстової розмітки є. Мова гіпертекстової розмітки HTML




Вступ

§ 1. Загальні відомості про мову розмітки гіпертексту (HTML)

§ 2. Структура HTML-документа

§ 3. Елементи дизайну Web-сторінок

§ 4. Практичне застосування мови розмітки гіпертексту HTLM

Висновок

Література

Вступ

Діяльність розглядається мова розмітки гіпертексту HTML (Hypertext Markup Language); Першу специфікацію цієї універсальної та загальнодоступної мови розмітки - HTML було затверджено в 1991 році. HTML став стандартом і одночасно «коренем» для всіх сторінок, що розробляються.

Актуальність теми роботи визначена тим, що на сьогоднішній день HTML залишається найуніверсальнішим, навіть незамінним засобом розмітки гіпертексту, а отже, і публікації в Інтернеті. Написання Web сторінок на HTML не вимагає інтерпретації вихідного кодуу двійковий код.

Сучасні Web-сторінки вже не обходяться одним лише HTML. Його гармонійно доповнюють засоби динамічного HTML: скрипт мови JavaScript та/або VBScript, каскадні таблиці стилів (CSS), іноді є Java-аплети. По суті, можна вивести для сучасної Web-сторінки: Web-сторінка=HTML+DHTML(JavaScript/VBScript, CSS, Java-аплети)+CGI Тобто на будь-якій сторінці має бути присутня HTML-верстка - розташування елементів дизайну тексту та необхідні скрипти - як розширення HTML в області розташування та опису властивостей різних об'єктів. CGI-скрипти можуть грати першорядну роль, формуючи всю сторінку, наповнюючи її необхідними, оновленими даними або другорядну роль, - включаючись до неї.

Мета роботи полягає в загальної характеристикимови розмітки гіпертексту HTML. Відповідно до поставленої мети завдання роботи сформульовані такі:

1. огляд основних можливостей HTML

2. аналіз практичного застосування HTML (з прикладу навчальних програм).

§ 1. Загальні відомостіпро мову розмітки гіпертексту (HTML)

Гіпертекст - текст із вставленими у нього словами (командами) розмітки, які посилаються інші місця цього тексту, інші документи, картинки тощо. Під час читання такого тексту (у відповідній програмі, що його обробляє та виконує відповідні посилання або дії) ви бачите підсвічені (виділені) у тексті слова. Якщо наїхати на них курсором і натиснути клавішу або кнопку (очі) мишки, то висвітиться те, на що посилалося це слово, наприклад, інший параграф тієї ж глави цього ж тексту. У WWW за ключовими словами можна потрапити в зовсім інший текст з іншого документа, увійти в якусь програму, зробити якусь дію тощо. В Internet у контексті WWW можна отримувати доступ до будь-чого, до telnet, e-mail, ftp, Gopher, WAIS, Archie, USENET News тощо. У WWW можна посилатися на дані на інших машинах у будь-якому місці мережі, тоді при активації цього посилання ці дані автоматично передадуться на вихідну машину і ви побачите на екрані текст, дані, картинку, а якщо провести в життя ідею мультимедіа, то й звук почуєте, музику, мова. Це трохи нагадує Gopher, але фактично це є принципово інше та нове. У Gopher є жорстка структура меню, яким ви рухаєтеся, як вам завгодно. Ця структура залежить від того, що ви робите, який документ користуєте тощо. У WWW ви рухаєтеся за документом, який може мати будь-яку гіпертекстову структуру. Можна вільно організувати структури меню гіпертексту. Маючи редактор гіпертекстів, можна створити будь-яку структуру робочого середовища, включаючи документацію, файли, дані, картини, програмне забезпеченняі т.д., і це не буде нове програмне забезпечення, а просто гіпертекст.

Сучасні програми розробки Web-серверів, такі як MS FrontPage або Web Pen для Windows, дають можливість навіть новачкові без будь-якого вивчення підручників легко створювати готові сторінки. При цьому спеціаліст зі створення Web-сайтів, званий Web-майстром, бере готові файли (тексти, таблиці, графіку, бази даних, звук, анімацію, відеофільми, програми) та за допомогою кнопок та команд меню оформлює сторінки сайту. Подібні програми, виконуючи команди інструментального та операційного меню, формують гіпертекст WWW-сервера.

Вихідні текстові, табличні та графічні та інші об'єкти включаються до Web-site за допомогою тегів (tag = ярлик, етикетка). Тег - це послідовність символів, що задає

). становище об'єкта на сторінці сайту,

). зовнішній вигляд об'єкта або

Тег називають також керуючим маркером, прапором. Програми типу Web Pen самі розставляють теги, тому користувач таких програм може знати мови розмітки гіпертексту (HTML = HyperText Markup Language).

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

По-друге, вдосконалення свого Web-сервера без повної його переробки (що довго і дорого) зручно проводити шляхом ручної вставки та видалення об'єктів та тегів.

По-третє, HTML безперервно розвивається, тому програми типу MS FrontPage постійно відстають від нових можливостеймови.

По-четверте, не слід забувати про досить високу вартість таких програм.

Зрештою, по-п'яте, витративши гроші на придбання програми, потрібно ще витратити час на її освоєння.

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

У HTML реалізовано підтримку механізму спеціальних гіпертекстових посилань, які забезпечують зв'язок цього документа з іншими документами. Останні можуть бути:

) на даному сайті, тобто в папці, що містить усі htm-файли, графіку, звук, анімацію, відеофільми, програми;

) поза сайтом в інших папках на даному комп'ютері;

) у системі World Wide Web, тобто інших Web-серверах;

) в Internet на серверах інших типів (FTP, Gopher).

Застосування механізму гіпертекстових посилань створює всесвітнє єдине інформаційний простір, з якого співробітники торгової фірми отримують необхідну їм інформацію. Стандарт HTML, як і інші стандарти, що стосуються Web, розробляється під егідою консорціуму World Wide Web Consortium (W3C). Специфікації стандартів та проекти нових пропозицій можна знайти за адресою #578258.files/image001.gif>на панелі завдань.

Створити нове вікно текстового процесора MS Word, використовуючи команду операційного меню (Вікно, Нове вікно) або клацнувши мишкою на кнопці інструментального меню "Стандартне".

Командою операційного меню (Вікно, Упорядкувати все) розмістити на дисплеї одразу два вікна: з методичкою та нове. Курсор повинен знаходитись у новому вікні. Командою операційного меню MS Word (Вставка, Малюнок...) відкрити діалогову панель "Вставити рисунок".

Зі списку wmf-файлів у лівій частині діалогової панелі вибрати клацанням миші файл 1stplace.wmf. Розглянути малюнок у правій частині діалогової панелі.

Повторюючи дії, зазначені у пункті 6, переглянути кілька малюнків. Вибрати багатобарвний малюнок, що сподобався, клацнувши по кнопці OK в лівій нижній частині діалогової панелі. Цей малюнок з'явиться у новому вікні MS Word.

Розташувати покажчик миші малюнку і клацнути лівою клавішею миші. Копіювати малюнок у буфер обміну, використовуючи команду операційного меню (Правка, Копіювати) або клацнувши мишкою по кнопці інструментального меню "Стандартне".

Закрити вікно з малюнком за допомогою клавіші . Зробити максимальними розміри вікна з методичкою, клацнувши на кнопці максимізації розмірів цього вікна.

Перейти до вікна графічного редактора Paint, клацнувши мишею по кнопці на панелі завдань.

Редактором LView Pro прочитаємо bmp-файл, створений за допомогою Paint, і збережемо його як gif-файл, з'ясувавши і виконавши для цього такі дії.

Запустити провідник, використовуючи кнопку "Пуск" на панелі завдань:

ПУСК => ПРОГРАМИ => ПРОВІДНИК

На диску D: відкрити папку LWPRO та запустити редактор LView Pro подвійним клацанням на ім'я файлу Lviewpro.exe.

Прочитати bmp-файл, створений за допомогою Paint, використовуючи команду операційного меню LView Pro (File, Open).

Кольори в документах HTML можуть задаватися двома способами - вказівкою коду кольору або вказівкою назви кольору на англійській мові. При першому способі код кольору записується у вигляді шістнадцяткового числа, що містить шість цифр: перші дві цифри визначають інтенсивність червоного кольору, другі - зеленого, треті - синього. При другому способі використовуються наступні назви кольорів: black (чорний), maroon (темно-червоний), green (зелений), olive (оливковий), navy (синій), purple (фіолетовий), teal (зелено-синій), gray (сірий) ), silver (сріблястий), red (червоний), lime (вапняний), yellow (жовтий), blue (блакитний), fuchsia (яскраво-малиновий), aqua (морської хвилі) та white (білий).

Створимо документ, що містить таблицю, комірки якої забарвлені у різні кольори. Фон документа встановимо чорним. Документ наберемо (або відредагуємо) Блокнотом та запишемо у робочу папку у файл colortab1.htm.

Подивіться за допомогою MS Internet Explorer на результат. Цей результат досягнуто застосуванням нових атрибутів та тегів. Атрибут BGCOLOR задає колір фону в тегах та . Він може використовуватися також у тегах і для визначення кольору рядка фону в цілому. Тег

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

і після кінця абзацу припиняється дія його атрибутів.

- Це так званий тег заголовка таблиці. Фактично він оголошує рядок, у якому має бути записаний заголовок таблиці. В даному випадку він має атрибут COLSPAN, що визначає, скільки осередків з наступного рядка повинен перекрити цей заголовок. Тег визначає налаштування властивостей шрифту. У цьому випадку встановлюється колір тексту у рядку заголовка. Взагалі, в тегах можна використовувати кілька атрибутів, але тег є винятком – для кожної зміни властивостей тексту використовується окремий тег. , наприклад:

Створіть у робочій папцідокумент font1.htm, до тіла якого увімкніть текст наведеного вище прикладу та перегляньте результат. Прискорити виконання завдання можна копіюванням цього прикладу в текст, створюваний Блокнотом. Для цього слід виділити приклад у методичці, протягнувши покажчик миші (при натиснутій лівій клавіші) по смузі виділення зліва від трьох рядків прикладу. Використовуючи як зразок документ colortab1.htm, створіть у робочій папці документ table3.htm, що містить таблицю із заголовком "Координати осередків" та з 16-ма клітинками (4 рядки по 4 осередки), в яких записані координати цих клітин за принципом С1К1 (де С - рядок, К - колонка з відповідними номерами). Фон документа має бути синьо-зеленим, фон рядка заголовка – білим, текст рядка заголовка – жовтим. Текст у комірках таблиці має бути чорним на сірому фоні. Осередки таблиці повинні мати межі.

§ 4. Практичне застосування мови розмітки гіпертексту HTLM

p align="justify"> Основним принципом формування інтерактивного навчального середовища при всіх концепціях навчання, як показує практичний досвід, є гіпертекстовий принцип структурування та подання інформації. Теорія гіпертексту, що розробляється в літературі, а також наявний досвід зі створення гіпертекстових структур дозволяють намітити ряд його сутнісних, структурно значущих понятійних ознак. Згадаймо історію формування цього явища. Спочатку гіпертекстові технології привернули увагу викладачів як засіб інтеграції текстової інформації та інформації, що подається в інших модальностях – мультимедіа (звук, відео, анімація тощо). Потім автори - розробники комп'ютерних навчальних програм відкрили гіпертекст як засіб моделювання когнітивних процесів і цим як новий засіб управління цими процесами. Симптоматично, що сама ідея гіпертексту (хоча і без введення саме цього терміну) була вперше, як стверджується у всіх західних підручниках з історії цього поняття і як прийнято зараз рахувати в інтернетівській інформаційній спільноті, викладена у статті Ванневара Буша, озаглавленої так: «As we may think»; саме від цієї роботи починається відлік епохи гіпертексту як деякого особливого явища в теорії інформації, лінгвістиці та когнітивній психології, а також у сфері художнього слова нового типу (hypertext fiction).

В даний час термін «Гіпертекст» застосовують до різних об'єктів: 1) так називають особливий метод побудови інформаційних систем, Що забезпечує прямий доступ до даних із збереженням логічних зв'язків між ними; 2) це певна система подання текстової та мультимедійної інформації у вигляді мережі пов'язаних між собою текстових та інших файлів; 3) це особливий універсальний інтерфейс, відмінними рисами якого є його інтерактивність та надзвичайна дружелюбність по відношенню до користувача. Розробка гіпертекстових систем з метою навчання було розпочато там у 80-ті роки, аналогічні роботи у Росії досі перебували у пілотної стадії. У 2004 р. у нас спостерігається експоненційне зростання кількості гіпертекстових систем, що пропонуються для дистанційного навчання, що відповідає світовим тенденціям у цій галузі.

Навчальні матеріали, підготовлені на основі мультимедійних гіпертекстових технологій, мають низку очевидних переваг як для вчителя, що забезпечує, спрямовує та контролює процес навчання, так і для того, хто навчається: насамперед, це принципово нові можливості презентації навчального матеріалу, пов'язані з використанням зорової та аудитивної наочності. Необхідно також зазначити, що сама гіпертекстова структурованість навчального матеріалу має власне дидактичне значення, оскільки є значно більш гнучкою формою подання інформації, що дозволяє максимально враховувати індивідуальні потреби учня. По суті, кожне звернення до автоматизованого навчального курсу, основою якого є база даних, виконана в гіпертекстовому форматі, є процесом створення свого власного навчального тексту, що найбільш адекватно відповідає даному актуальному завданню, внаслідок чого процес навчання набуває творчого аспекту. Встановлюючи логічні зв'язки інформаційних блоків, вибудовуючи інформацію, дотримуючись власної логіки її осмислення, той, хто навчається по суті, стає співавтором, і, можливо, це і стає найбільш привабливою стороною використання подібних курсів у процесі навчання. Однак необхідно наголосити, що ключовою проблемою в такій системі стає проблема організації «навігації», вільна або нав'язувана автором-розробником стратегія дослідження даного інформаційного поля, яка, до того ж, повинна вирішувати і власне дидактичні завдання. У дослідженнях з теорії гіпертексту питання організації «читання» гіпертекстової інформації розглядаються разом із формальним аналізом структури гіпертекстового поля, можливостями технічних засобів управління «навігацією», а також особливостями когнітивних стратегічних переваг людини (знову підкреслимо, що останнє залишається досі найменш вивченою областю) ). Як досить добре опрацьовані формалізовані стратегічні моделі часто виступають моделі, що лежать в основі систем автоматизованого пошуку і систем автоматичної обробки запитів.

а) на першому, самому високому рівні, використовується жанр максимально коротких анотацій всім базових термінологічних понять,

б) на наступному рівні дається предметне тлумачення тих чи інших понять,

У підготовлених навчальних комп'ютерних матеріалах було експериментально отримано оптимальну кількість допустимих посилань у розрахунку на один абзац тексту (не більше 1 - 2 посилань), а також рекомендований обсяг текстової інформації: при виведенні на екран комп'ютера він повинен займати не більше 1,5 або 2 х екранів. Допустима і рекомендована ієрархічна глибина зв'язків встановлювалася відповідно до даних теорії сприйняття інформації та когнітивної лінгвістики. Передбачалося, що залежно від індивідуальних когнітивних стилів засвоєння інформації, вона може коливатися від 2 до 5 кроків. У ряді психологічних і психолінгвістичних робіт, присвячених теорії гіпертексту, були спроби виявлення базових стратегій, які виявлялися кращими для різних груп людей; отримані дані дозволяють намітити три основних типи поведінки в гіпертекстовому просторі, їх прийнято в англомовній традиції називати depth-first navigation, breadth-first navigation і два варіанти проміжної стратегії (random navigation), що поєднує у певних частках два перші підходи. Однак не можна не відзначити, що всі без винятку дослідники наголошують на необхідності додаткових експериментів у цьому напрямку для встановлення ступеня достовірності отриманих даних. Безперечно, це питання потребує подальшого, більш глибокого вивчення, тому в даній роботі керувалися переважно інтуїтивними уявленнями про оптимальну структуру зв'язків, які були продиктовані специфікою матеріалу, що лежить в основі гіпертексту.

Контрольне тестування та усне опитування є одними з найбільш широко використовуваних та добре розроблених засобів перевірки знань у вищій освіті. Класичний тест є послідовністю досить простих питань. На кожне запитання є проста відповідь, яка може бути формально перевірена і оцінена як правильна, неправильна або частково правильна (наприклад, неповна). Питання зазвичай класифікуються за типами відповідно до типу очікуваної відповіді. Класичні типи питань поділяються на питання типу [так/ні], питання типу [багато варіантів/одна відповідь] (МВ/ГО), питання типу [багато варіантів/багато відповідей] (МВ/МО) та питання відкритого типу з текстовим або числовим відповіддю. Більш просунуті типи питань включають питання відповідність, питання правильну послідовність, питання вказівка ​​(відповідь - одна чи кілька областей малюнку), і навіть графічні питання (відповідь - простий граф). Крім цього, кожна предметна сфера може мати деякі специфічні типи питань.

Варіанти підтримки на стадії створення зазвичай залежать від технології, яка використовується для зберігання окремого питання у системі. В даний час нам відомо два різних способузберігання питання: у форматі подання та у внутрішньому форматі. У контексті Web-заснованого навчання зберігання питання у форматі представлення означає його зберігання як частини HTML-коду (зазвичай у вигляді HTML-форми). Такі питання також можуть називатися статичними питаннями. Вони є чорними ящиками для WBE-системи. Система може представляти статичні питання лише «як є» (у тому вигляді, в якому вони були створені). Створення питань цього часто не підтримується WBE-системой, оскільки це може бути зроблено у будь-якому HTML-редакторе.

Тип інтерактивної технології, що використовується для отримання відповідей учня, є однією з найбільш важливих характеристик WBE-систем. Він визначає всю функціональність на стадії видачі питань, а також впливає на стадії створення та оцінки питань. В даний час розрізняють п'ять технологій: HTML-посилання, HTML/CGI-форми, скриптові мови, впровадження (plag-in) і Java.посилання - найпростіша технологія взаємодії, що реалізує набір можливих відповідей як список HTLM-посилань. Кожне посилання пов'язане з певною сторінкою зворотнього зв'язку. При використанні цього підходу виникає дві проблеми: складність створення питань (логіка питання має бути жорстко вбудована в гіпертекст курсу) та підтримка всього двох типів питань: [так/ні] та [МВ/ГО]. Ця технологія використовувалася в основному на зорі Web-заснованого навчання, коли більш просунуті технології взаємодії, такі як CGI, JavaScript або Java ще не були розроблені.

Найбільш популярною технологією Web-тестування, що використовується зараз численними комерційними та університетськими системами, є комбінація HTML-форм і CGI-скриптів. HTML-форми надзвичайно зручні представлення основних типів питань. Запитання типу [так/ні] та [МВ/ГО] представляються наборами іконок, списками вибору, що спливають меню. Питання [МВ/МО] подаються списками множинного вибору або наборами перемикачів. Питання відкритого типу реалізуються як полів редагування. Більш просунуті питання, такі як питання на відповідність або правильну послідовність, також можуть бути реалізовані, за допомогою форм. Крім того, приховані поля можуть використовуватись для зберігання додаткової інформаціїпро тест, якого може потребувати CGI-скрипт. Значні переваги від використання технології "сторони сервера" (до якої відноситься і технологія "форма/CGI") і схожої з нею технології "картки сторони серверної" виникають при реалізації графічних питань на вказівку.

Висновок

За підсумками вирішення завдань роботи отримано такі результати:

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

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

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

Щодо сфери застосування можна сказати таке. Майбутнє Web також пов'язане зі збільшенням швидкості передачі в Інтернет, оскільки Web нерозривно пов'язані з Інтернет.

Ймовірно, залишиться проблема несумісності між броузерами та Web-серверами, оскільки Netscape Communications дещо розширила HTML, через що не всі броузери відображають документи, написані в новому форматі HTML.

Література

1. Бройдо В.Л. Обчислювальні системи, мережі та телекомунікації СПб, Пітер 2002 - 464 с.

2. Інформатика / за редакцією С.В.Симоновича. СПб, Пітер 2001-400 с.

Кірмайєр М. Інформаційні технології. СПб.: Пітер, 2003 – 443 с.

Метьюз Дж. Web - сервер. СПб.: Символ, 1998 – 356 с.

Оліфер Ст Р., Оліфер Н.А. Комп'ютерні мережі. СПб.: Пітер, 2005 – 864 с

Оліфер Ст Р., Оліфер Н.А. Мережеві операційні системи. СПб.: Пітер, 2003 – 539 с.

Продовжуємо цикл статей про основи веб-мов та розробки в цій галузі. Раніше ми з основами гіпертекстової мови HTML, її особливостями та методами розмітки тексту (тегами).

Також нам стало відомо, що мова HTML взаємо взаємодіє з такими програмними розробками, як стилі CSS і Javascript і для чого необхідна така співпраця мов. Сьогодні ми у подробицях розглядатимемо структуру побудови документів на HTML5. Блокова побудова документа, його структура – ​​тема сьогоднішньої статті. Але спочатку потрібно зрозуміти, що таке HTML5.

Мова програмування HTML5 (від англійської HyperText Markup Language) – п'ята версія мови. Як і всі попередні версії, призначений для вибудовування структури документів та представлення їх у мережі. на Наразіверсія HTML5 перебуває у стадії розробки. Мета, що переслідується створенням п'ятої версії HTML – покращення мови у сфері його роботи з документами мультимедіа (аудіо- та відеододатками).

Додавання деяких синтаксичних нововведень, таких як

,
,