Гіпертекст і мова гіпертекстової розмітки HTML

Контрольна робота

на тему:

"Гіпертекст і мова гіпертекстової розмітки HTML"

Зміст

Введення

1. Застосування мови HTML

1.1 Структура документа HTML

2. Створення сайтів в інтернет

3. Мова гіппертекстов HTML

Висновок

Список літератури

Введення

У 1989 року гіпертекст представляв нову багатообіцяючу технологію, яка мала відносно велике число реалізацій, з одного боку, а з іншого боку, робилися спроби побудувати формальні моделі гіпертекстових систем, які носили скоріше описових характер і були навіяні успіхом реляційного підходу опису даних.

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

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

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

1. Застосування мови HTML

1.1 Структура документа HTML

Всі документи HTML мають одну і ту ж структуру, яка визначається фіксованим набором тегів структури. Документ HTML завжди повинен починатися з тега <HTML> і закінчуватися відповідним закриває тегом (</ HTML>). Усередині документа виділяються два основні розділи: розділ заголовків і тіло документа, - йдуть саме в такому порядку. Розділ заголовків містить інформацію, що описує документ у цілому, і обмежується тегами <НЕАD> та </ НЕАD>. Зокрема, розділ заголовків повинен містити загальний заголовок документа, обмежений парним тегом <ТITLE>.

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

</ ТITLE>). Тим не менш, при створенні документа HTML опускати структурні теги не рекомендується. Найпростіший правильний документ HTML містить всі теги, що визначають структуру, може виглядати наступним чином:

<HTML>

<HEAD> <TITLE> Тема документа </ TITLE> </ HE А D>

<BODY>

Текст документа

</ BODY>

</ HTML>

Елементи HTML.

Для парних тегів область впливу визначається частиною документа між відкриває і закриває тегом. Таку частина документа розглядають як елемент мови HTML. Так, можна говорити про «елементі BODY», що включає тег </ BODY>, основний зміст документа та закриває тег </ BODY>. Весь документ HTML. можна розглядати як «елемент HTML.». Для непарних тегів елемент збігається з тегом, який його визначає.

Більшість елементів мови HTML. описує частини змісту документа і міститься між тегами <BODY>. і </ BODY>, тобто всередину структурного елементу BODY. Такі елементи ділять на блокові і текстові. Блокові елементи відносяться до частин тексту рівня абзацу. Текстові елементи описують властивості окремих фраз і ще болів дрібних частин тексту.

Тепер можна сформулювати правила вкладення елементів.

Елементи не повинні перетинатися. Іншими словами, якщо відкриває тег розташовується всередині елемента, то і відповідний закриваючий тег повинен розташовуватися усередині цього ж елемента.

Блокові елементи можуть містити вкладені блокові і текстові елементи.

Текстові елементи можуть містити вкладені текстові елементи.

Текстові елементи не можуть містити вкладені блокові елементи.

Функціональні блокові елементи.

У більшості документів основними функціональними елементами є заголовки і абзаци. Мова HTML. підтримує шість рівнів заголовків. Вони задаються за допомогою парних тегів від <Н1> до <Н6>. При відображенні Web-документи ються за допомогою таким чином; тегом (документа на екрані комп'ютера ці елементи показуються за допомогою шрифтів різного розміру.

Звичайні абзаци задаються за допомогою парного тега <р>. Мова HTML. не містить засобів для створення абзацного відступу («червоного рядка»), тому при відображенні на екрані комп'ютера абзаци розділяються порожнім рядком. Закриваючий тег </ Р> розглядається як необов'язковий. Мається на увазі, що він стоїть перед тегом, який задає початок чергового абзацу документа. Наприклад:

<Р> Перший абзац <Р> Другий абзац

<H2> Заголовок другого рівня </ Н2>

Наслідком наявності спеціального тега, що визначає абзац, є той факт, що звичайного символу кінця рядка, що вводиться після натискання клавіші ENTER, для створення абзацного відступу недостатньо. Мова HTML. розглядає символи кінця рядки та прогалини особливим чином. Будь-яка послідовність; складається тільки з пропусків і символів кінця рядка, при відображенні документа розглядається як одиночний пробіл. Це, зокрема, означає, що символ кінця рядка навіть не здійснює переходу на новий рядок (для цієї мети використовується текстовий елемент, що задається непарним тегом <BR>.

В якості обмежувача абзаців може також використовуватися горизонтальна лінійка. Цей елемент задається непарним тегом <HR>. При відображенні документа на екрані лінійка розділяє частини тексту один від одного. Її довжина й товщина задається атрибутами тега <HR>.

Цей тег створює горизонтальну лінійку шириною в 10 пікселів, що займає половину ширини вікна і розташовану праворуч.

2. Створення сайтів в інтернет

Створення сайтів - одна з широко доступних можливостей сучасної Інтернет-індустрії. Власне створення сайтів в принципі не набагато складніше створення особистих електронних скриньок та електронних візиток.

Для створення сайту, перш за все, необхідний сервер, підключений до Інтернету, на якому можна розмішати необхідні гіпертексти. Крім того, необхідна реєстрація імені сайга у провайдера, обслуговуючого вибраний сервер.

В Інтернет можна знайти провайдерів, що пропонують безкоштовне відкриття сайтів на своїх серверах. Безкоштовні сайти можна відкрити на вітчизняних серверах narod.ru, boom.ru, hotmail.ru і на закордонних серверах, наприклад geocities.com, tripod.com.

На вказаних серверах можна зареєструвати доменні імена виду:

<Ім'я>. narod.ru

ім'я>. boom.ru,

Приклади зареєстрованих доменних імен:

bak.boom.гu-особистий сайт автора підручника;

wdu.da.ru-сайт електронного університету;

wduniv.newmail.ru - сайт розподіленого університету.

Після реєстрації доменного імені сайту на ньому можна розміщувати гіпертексти. Розміщення гіпертекстів на сайті проводиться за допомогою спеціальних програм, що дозволяють створювати, редагувати, накопичувати і копіювати самі різні гіпертексти. Відразу після розміщення найпершої (головної) гіпертекстової сторінки її інформація може читатися з допомогою браузера в будь-якій країні з будь-якого комп'ютера, підключеного до Інтернет. Для цього у віконці браузера вказується адреса сайту в Інтернет. Наприклад: http://bak.boom.ru

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

Всі розміщувані файли повинні бути гіпертексту, записаними у форматі HTML і мають ідентифікатори виду <ім'я>. Html.

HTML - це мова розмітки гіпертекстів (hypertext markup language).

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

За допомогою зазначених засобів і програм в Інтернет можуть бути створені самі різноманітні інформаційні сайти і системи - особисті сайти, фірмові сайти, електронні газети, журнали, електронні книги, енциклопедії, а також електронні архіви і бібліотеки.

Різниця між сайтами складається в обсязі інформації, їх структуру та процедури оновлення. У цілому для сайтів в Інтернет, як і для будь-якої організації, можна говорити про життєві цикли їх створення, розвитку, модернізації та ліквідації.

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

Структура сайтів може бути найрізноманітнішою. Найпростіша структура - це головна сторінка з посиланнями на набір текстів. Ці посилання можуть перебувати в тексті головної сторінки або виділятися у змісті на її початку.

Кожна сторінка сайту може бути забезпечена назвою, яке з'являється на верхній частині екрана при завантаженні сайту браузером.

Крім того, в головній сторінці сайту можна вказати список ключових слів для пошукових систем.

Пошукові системи тижні переглядають всі сервери в мережі Інтернет і записують адреси всіх знайдених сайтів і гіпертекстів разом з виділеними в них ключовими словами. З цих причин не пізніше ніж через тиждень будь-яка інформація, опублікована в Інтернет, може бути знайдена але міститься в них, ключовими словами.

Крім текстової інформації в гіпертексті можна вставляти таблиці, малюнки та фотографії, що дозволяють створювати сайти з графічними ілюстраціями. Такі сайти зі змістом та фотографіями з організації та оформлення багато в чому схожі з ілюстрованими журналами та книгами.

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

Інформаційні сайти можуть мати ієрархічну або мережеву структуру. В ієрархічних сайтах створюються змісту, а в сайтах з мережевою структурою для навігації використовуються карти сайтів.

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

Приклади електронних газет, журналів і новинних сайтів:

gazeta.ru - новинний сайт;

internet.ru - Інтернет-газета;

commputtera.ru - комп'ютерний журнал.

3. Мова гіппертекстов HTML

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

Гіпертексти повинні починатися зі слова <html> і закінчуватися словом </ html>. Слова в кутових дужках <> у мові HTML називаються тегами, а в програмуванні - дескрипторами. Майже всі теги HTML парні - <html> і </ html>, <head> і </ head> і т.д.

Парні теги виділяють певну частину гіпертексту - «заголовок», «тіло» і т. д. Перший тег починає фрагмент, а другий - завершує його. У закривають дескрипторах перед ім'ям ставиться знак дробу /.

Загальна структура гіпертекстів, записаних в мові HTML:

гіпертекст:: = <html> заголовок тіло </ html>

заголовок:: = <head> титул </ head>

титул:: = <title> назва </ title>

тіло:: = <body> текст </ body>

Відповідно до правил HTML гіпертексти зобов'язані мати «заголовок» і «тіло». Як публікації гіпертексти можуть і повинні містити відомості про авторів та власників авторських прав (сайтів).

У заголовку гіпертексту має міститися «назва», яке браузерами відображається на самому верхньому рядку екрана ЕОМ. Назва повинна виражати головну ідею публікації (сторінки). Гіпертекст без назви - це як стаття без назви.

«Тіло» гіпертексту має містити тексти, таблиці, фотографії та ілюстрації. Відмінність електронних гіпертекстів від звичайних паперових текстів - включення гіперпосилань, натискання на які викликає завантаження нових гіпертекстом.

Приклад гіпертексту і результат його відображення браузером на екрані ЕОМ:

Гіпертекст: Результат:

Результат роботи браузера - завантаження та виведення на екран ЕОМ гіпертексту, що зберігається на сайті за адресою, вказаною у вікні браузера. Якщо гіпертекст занадто великий, то браузер виводить кнопки протягання гіпертексту праворуч або внизу екрану.

Розміри екранів ЕОМ мають такий спектр. Мінімальний розмір екрану - 640 х 480 пікселів. Далі стандартні розміри екранів - 800 х 600, 1024 х 768 і 1280 х 1024 пікселів. Тому на різних екранах гіпертексти можуть ви дивитися по-різному.

Загальна структура гіпертекстів та їх відображення на екрані ЕОМ:

Гіпертекст: Результат:

Текстова частина може складатися з рядків і абзаців із заголовками і без заголовок, зі списками, таблицями і меню.

тіло:: - <body> текст </ body>

текст:: = заголовок {текст} |

абзац {текст} |

посилання {текст} |

список {текст} |

таблиця {текст} |

Заголовки в гіпертексту оформляються в наступному вигляді:

заголовок:: = <h1> назва </ h1>

заголовок:: = <h2> назва </ h2>

заголовок:: = <h6> назва </ h6>

де теги h1, ... , H6 задають розмір заголовків по відношенню до основного тексту.

Абзаци в гіпертексту починаються з дескриптора <p>:

абзац:: = <p | параметри |> гіпертекст | </ p> |

Перехід на новий рядок і абзацах вказується дескриптором <bг>. Кінець абзацу </ р> не обов'язковий, але необхідний при використанні параметрів у дескрипторі абзацу.

Основний параметр абзаців - align - вирівнювання текстів на екрані ЕОМ. Вирівнювання текстів проводиться браузерами автоматично відповідно до розмірів екрана ЕОМ:

align = center-по центру екрану:

align = left-до лівого краю;

align = right - до правого краю;

align = justify - на весь екран.

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

Для оформлення гіпертекстів мову розмітки HTML має багатий спектр шрифтів, стилів і ресурсів. Найбільш простий засіб оформлення - виділення слів з метою залучення уваги читачів сайтів до окремих частин текстів.

Для виділення слів в гіпертекст можна використовувати жирний шрифт або підкреслення за допомогою наступних тегів:

<big> Великі символи </ big>

<b> жирний шрифт </ b>

<i> курсив </ i>

<u> підкреслення </ u>

<strike> перекреслення </ strike>

<small> маленькі символи </ small>

Шрифтове виділення в гіпертекст задається тегом <font>: шрифти:: = <font параметри> текст </ font>

Параметри шрифтів - їх розмір і тип. Розміри шрифту задаються параметром size = розмір.

Розмір вказується явно від 1 до 6, або у формі збільшення +1, +2 чи зменшенні - 1, - 2.

Тип шрифту задається параметром

face = шрифт

Тут шрифт - один зі стандартних шрифтів: «Times», «Courier» і т. д.

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

<Font color = гed> текст </ font>

Стандартні назви кольорів у мові НТМL:

red - червоний, green - зелений, blue - синій, black-чорний,

white - білий, gold - золотий, yellow-жовтий і т. д.

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

Єдиний стиль оформлення - це важлива властивість будь-якої публікації в книгах, журналах і на сайтах. Надалі найкраще дотримуватися прийнятого еталона та стилю оформлення на весь період створення і супроводу сайту.

Фрагменти гіпертекстів можуть розмішати на одному і тому ж сайті або на кількох сайтах або навіть на декількох серверах. У зовнішніх гіперпосиланнях вказуються імена відповідних файлів на сайті, сервері або в мережі Інтернет:

Загальна форма зовнішніх гіперпосилань:

гіперпосилання:: = <a href = «адрес»> напис </ a>

де «адреса» - це адреса гіпертексту усередині сайту або на іншому сервері мережі Інтернет.

Приклади зовнішніх гіперпосилань:

а) адреса сайту в Інтернет:

http:// bак2.naгоd.гu

б) адреса сторінки на сайті:

http:// bак2.naгоd.гu / inrogl.html.

в) адреса сторінки в папці сайту;

http:// b ак 2.na го d. г u / tests / test2.html.

У гіперпосилання на сторінки того ж сайту вказівка імені сайту в адресі може бути відсутнім:

а) посилання на сторінку всередині того ж сайту:

<A href = «inrogl.html. > Зміст </ a>

б) посилання на сторінку всередині того ж сайту, але в іншій папці:

<a href = «tests / test2.html»> тести 2 </ a>

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

Графічні файли зазвичай размешаются на сайтах і окремій папці з ім'ям image. Завантаження ілюстрацій на екрани для користувача ЕОМ проводиться браузерами за допомогою операторів <img>:

Загальна форма операторів завантаження графічних ілюстрацій:

Розташування ілюстрацій на екрані ЕОМ задається параметрами вирівнювання: align = left-по лівому краю, align = right - по правому краю екрана. Текст при цьому обтікає ілюстрації відповідно праворуч плі сліпа.

Ілюстрації можуть бути притиснуті до верхнього або нижнього краю екрана, що задається параметрами: align = top - до верхнього краю, align = bottom - до нижнього краю екрана, або вирівняні по середині екрана - align = middle.

Для розташування ілюстрації па екрані ЕОМ в операторі завантаження можуть бути вказані їх ширина і висота:

висота: = height = «висота»

ширина: = width = «довжина»

Розміри ілюстрацій задаються числом точок екрана (в пікселях) або у відсотках від висоти або ширини екрана ЕОМ. В останньому випадку на різних екранах ілюстрації будуть мати різні розміри. Розрахувавши розташування ілюстрацій для екранів мінімальних розмірів, можна бути впевненим у їх розміщенні на екранах різного, іншого розміру.

Розміри ілюстрацій звичайно вибирають так, щоб вони були видні цілком навіть на екранах ЕОМ з мінімальним розміром. Якщо кран ЕОМ більше, то ілюстрації будуть займати тільки його частину.

Гіпертекстові списки - це переліки з нумерацією або виділенням елементів списків. Всі елементи починаються тегами <li>. Нумеровані списки починаються тегом <ol> і закінчуються тегом </ ol>. Ненумеровані списки обмежуються тегами <ul> </ ul>.

Гіпертекстові списки - зручний засіб для організації змістів у складних сайтах і великих гіпертекстів. Елементами в таких списках є адреси відповідних розділів сайтів (розділів, параграфів розділів електронних книг і бібліотек).

Висновок

HTML - це мова розмітки гіпертекстів (hypertext markup language).

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

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

Елементи не повинні перетинатися;

Блокові елементи можуть містити вкладені блокові і текстові елементи;

Текстові елементи можуть містити вкладені текстові елементи;

Текстові елементи не можуть містити вкладені блокові елементи.

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

Список літератури

«Економічна інформатика» / Под. ред. П.В. Конюховского і Д.М. Колесова, СПб: Питер, 2000, 560с.
Каймін В.А., «Інформатика», учеб.4-е вид. М.: ,2003-285с.
«Інформатика» / колектив авторів: Веретенникова Є.Г., Патрушіна С.М., Савельєва Н.Г., навч. Посіб., Ростов Н / Д, 2002, 416с.
«Інформатика», базовий курс, 2-ге видання / Під. ред. С.В. Симоновича, СПб.: 2003, 640с.
«Інформатика» навч. Третій перероб. вид. / Під. ред. проф. Н.В. Макарової, М.: 2000, 768с.