Використання сервісу Word Wide Web

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

Web-вузол складається з наступних елементів: заголов­ної (початкової) сторінки, інформаційних розділів, відо­мостей про автора та проект і гостьової книги. У більшості випадків подорож сайтом по­чинається із титульної сто­рінки. За назвами інших еле­ментів легко судити про їхнє призначення. Зауважимо тільки, що гостьова книга — це розділ, у якому кожен відвіду­вач може висловити свою дум­ку про ваш проект.

Базовим інструментом для створення Web-сторінок є мова НТМL. Утім, це навіть не мова у звичному розумінні цьо­го слова, за аналогією з С++ чи Раsсаl. НТМL — це набір міток, за допомогою яких мож­на визначити вигляд елект­ронного документа в Інтернет: шрифт, колір тла і тексту, роз­міщення ілюстрацій і багато чого іншого. Він не зовсім звичний, але дуже простий.

Виконаємо практичні завдання.

Завдання №1. Створення сторінки з написом «Музика без кордонів» — саме цій темі ми й присвятимо наш сайт.

1.1. Відкрийте текстовий редактор Блок­нот Windows і введіть у нього наступний фрагмент тексту:

<НТМL>

<ВODY>

Музика без кордонів

</BODY>

</НТМL>

1.2.Отриманий документ збе­режіть в папці з іменем групи у файлі index з розширенням html

1.3. Відкрийте броузер Internet Explorer і завантажте щойно створений вами файл командою File Load (Файл, Открыть). Подивіться, що у вас вийшло. Таким чином ви можете оціни­ти вигляд створеної вами сто­рінки прямо на своєму ком­п'ютері, без підключення до Iнтернет. Майте на увазі, що сторінку слід переглядати в тому коду­ванні, у якому вона була ство­рена. Розбіжність кодувань впливає тільки на вигляд ки­риличного тексту — англійські фрази будуть коректно відо­бражатися в будь-якому ви­падку. Стандартні російсько­мовні кодування: Windows-1251 і КОІ-8R. Користувачам Windows слід віддати перевагу першому. Як набрати текст з потрібним кодуванням? Це за­лежить від вашого редактора: наприклад, файл, збережений із Блокнота Windows з уста­новками за замовчуванням, буде містити текст у кодуванні Windows-1251.

1.4. Повернімося до нашого файла. Спробували? Працює? Прекрасно! А якщо набрати дві фрази? Будь ласка:

<НТМL>

<ВОDY>

Музика без кордонів

Створено Ігорем Шевчен­ком

</ВОDY>

</НТМL>

Як бачимо, теги, а саме так називають керуючі мітки мови НТМL, розміщені у кутових дужках (у цьому випадку <НТМL> і <ВОDY>), копіюва­ти не довелося. Кожен з них зустрічається в документі тільки один раз. Тег <НТМL> позначає початок документа, а тег </НТМL> — його закінчен­ня. <ВODY> і </ВODY>, відпо­відно, обмежують тіло доку­мента.

Запишіть доповнений файл за тим же маршрутом.

1.5.Перевірте, який вигляд має цей файл у броузері. А ви здивовані? Обидві фрази будуть розташовані в одному рядку. У чому ж проблема? А річ у тім, що переклад рядка в броузері здійснюється тільки тоді, коли текст не вміщується в його вікні. Якщо ви хоче­те, щоб наступна фраза починалася з нового рядка, використовуйте тег <ВR> (скорочення від brek line). Внесіть зміни у ваш файл:

<НТМL>

<ВODY>

Музика без кордонів <ВR>

Створено Ігорем Шевченком

</ВОDY>

</НТМL>

До речі, зовсім неважливо, якими буквами (прописними чи рядковими) ви будете писати теги: <ВR> і <br> діють зовсім однаково.

Перевірте, який вигляд має цей файл у броузері.

1.6. Виконаємо, щоб слово "Музика" було написане вгорі в рядку заголовку вікна броузера. Для цього служить пара тегів <ТITLE>...</ТITLЕ>. Вони розміщуються не в тілі (<ВODY>) НТМL-документа, а в його заголовку — <НЕАD> — окремій частині, у якій накопичується службова інформація. Внесіть зміни у ваш файл:

<НТМL>

<НЕАD>

<ТІТLЕ> Музика </ТІТLЕ>

</НЕАD>

<ВODY>

Музика без кордонів <ВR>

Створено Ігорем Шевченком

</ВODY>

</НТМL>

Перевірте, який вигляд має цей файл у броузері.

Дата добавления: 2015-05-26