Що таке 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-сторінок, написаних російською мовою, англійською. В цьому випадку інструментарій розробника буде найрізноманітнішим.