Що таке web-сторінка? Перерахуйте основні елементи web-сторінки

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

Що являє собою Web-сторінка?

«Перерахуйте основні елементи Web-сторінки» - говорить нам екзаменатор на уроці інформатики. Що ми зможемо сказати йому у відповідь? Насамперед оповідаємо про те, що собою являє веб-сторінка в принципі.

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

Місце і роль веб-сторінок в структурі сайтів

Чи можна сказати, що Web-сторінка - це основний компонент веб-сайту? Почасти це вірно. Однак, як ми зазначили вище, веб-сторінка - це всього лише текстовий документ. На сайті ж, як правило, також розташовуються картинки, відео та інші мультимедійні елементи. Веб-сторінка вмістити їх в себе не може, однак у своїй структурі вона може містити посилання на них. Таким чином, веб-сторінку можна назвати основним компонентом сайту в аспекті чільної ролі у відображенні віртуального контенту перед користувачами.

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

Принцип задіяння гіпертексту

Отже, Web-сторінкою називається документ, складений на мові HTML, за допомогою якого здійснюється розмітка гіпертексту. Але що це за явище? Що таке гіпертекст? Не заглиблюючись сильно в теорію, відзначимо, що це текст, який тим чи іншим чином дозволяє отримати швидкий доступ до іншого - за допомогою посилань. У звичайній книзі це неможливо - там «простий текст». Для отримання доступу до потрібної сторінки читач повинен зробити кілька перегортань, до цього ознайомившись зі змістом або виносками. У режимі «гіпертексту» основну частину роботи здійснює комп`ютер - за рахунок відомостей, що відображаються в HTML-елементах сторінки.

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

Структура мови HTML: теги

Яким чином браузер зчитує потрібні дані про веб-сторінку з документа, складеного мовою HTML? Дуже просто.

Основні елементи даної мови - це теги. Вони в більшості випадків парні - є відкриває, а є закриваючий. Перші позначаються за допомогою тільки кутових дужок. Другі - аналогічно, але перед другою дужкою ставиться слеш - символ /. Браузер уміє їх розпізнавати, і тому без проблем відображає вміст веб-сторінок відповідно до алгоритмами, створюваними розробником документа.

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

Атрибути

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

Вміст

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

Елементи веб-сторінок

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

Елементи веб-сторінок: заголовок

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

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

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

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

Основна частина веб-сторінки

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

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

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

Базові HTML-теги

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

Досить поширений тег P. Він, як і інші аналогічні елементи мови розмітки гіпертексту, може бути відкриває і закриває. Даний тег дозволяє форматувати окремо взятий абзац документа. Можна, наприклад, задавати для нього певний тип шрифту або його колір. Проте це здійснюється за допомогою додаткового тега - FONT. При цьому розміщуватися він буде всередині того, який позначає межі абзацу - це дозволить не поширювати HTML-команду, яка відображатиме тип предпочтительного шрифту, на інші елементи веб-сторінки.

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

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

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

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

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

Специфіка інструментів веб-розробки

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

Корисно буде додати, що веб-розробник може задіяти у своїй роботі повноцінні мови програмування, такі як, наприклад, Perl, PHP, Java, Python, за допомогою яких можливості роботи з гіпертекстовими документами стають ще ширше. Необхідність у цьому може бути пов`язана з тим, що області застосування веб-технологій сьогодні - найрізноманітніші. Завдання, які стоять перед сучасними розробниками, можуть бути досить складними. Наприклад, іноді потрібно здійснити переказ Web-сторінок, написаних російською мовою, на англійську. У цьому випадку інструментарій розробника буде найрізноманітнішим.