Що таке web-сторінка? Перерахуйте основні елементи web-сторінки
Основна маса контенту, представленого в інтернеті - це веб-сторінки. Це історично найперший тип документів, призначених для розміщення у віртуальному просторі Мережі, але до цих пір зберіг актуальність і практично не має конкуруючих форматів. Яка структура веб-сторінок? За допомогою яких засобів веб-розробки вони створюються?
Що являє собою Web-сторінка?
«Перерахуйте основні елементи Web-сторінки» - говорить нам екзаменатор на уроці інформатики. Що ми зможемо сказати йому у відповідь? Перш за все оповідаємо про те, що собою являє веб-сторінка в принципі.
Згідно із загальноприйнятою в середовищі IT-фахівців визначенням, це документ, який призначений для відкриття в спеціалізованій програмі - браузері, і який містить дані для відображення на екрані комп`ютера за допомогою відповідного типу ПО різного корисного контенту - текстів, посилань, графіки, відео, музики та т. д. Web-сторінка - це текстовий документ. Відповідні дані для браузера є букви, цифри і спеціальні символи, використовувані як елементи мови розмітки - HTML. Саме за допомогою нього творець веб-сторінки «пояснює» браузеру, яким чином відображати на екрані той чи інший контент.
Місце і роль веб-сторінок в структурі сайтів
Чи можна сказати, що Web-сторінка - це основний компонент веб-сайту? Почасти це вірно. Однак, як ми зазначили вище, веб-сторінка - це всього лише текстовий документ. На сайті ж, як правило, також розташовуються картинки, відео та інші мультимедійні елементи. Веб-сторінка вмістити їх в себе не може, проте в своїй структурі вона може містити посилання на них. Таким чином, веб-сторінку можна назвати основним компонентом сайту в аспекті чільну роль у відображенні віртуального контенту перед користувачами.
У рідкісних випадках, звичайно, даний документ буде єдиним компонентом сайту - якщо на ньому з якихось причин не передбачено відображення графіки, відео та інших мультимедійних елементів. Зокрема, найперші сайти - коли мови розмітки Web-сторінок тільки з`явилися, - не включали відповідного контенту. Перед очима користувача був тільки текст і посилання.
Принцип задіяння гіпертексту
Отже, Web-сторінкою називається документ, складений на мові HTML, за допомогою якого здійснюється розмітка гіпертексту. Але що це за явище? Що таке гіпертекст? Не заглиблюючись сильно в теорію, відзначимо, що це текст, який тим чи іншим чином дозволяє отримати швидкий доступ до іншого - за допомогою посилань. У звичайній книзі це неможливо - там «простий текст». Для отримання доступу до потрібної сторінки читач повинен зробити кілька перегортань, до цього ознайомившись зі змістом або посиланнями. У режимі «гіпертексту» основну частину роботи робить комп`ютер - за рахунок відомостей, що відображаються в HTML-елементах сторінки.
Якщо викладач інформатики говорить нам: "Перерахуйте основні елементи Web-сторінки", То ми абсолютно коректним чином можемо почати розповідь про компонентах відповідного документа, які створюються за допомогою мови розмітки HTML. Тому для початку розглянемо деякі теоретичні моменти, що стосуються HTML.
Структура мови HTML: теги
Яким чином браузер зчитує потрібні дані про веб-сторінці з документа, складеного на мові HTML? Дуже просто.
Відео: Маленькі заколочки Канзаши майстер клас / Kanzashi DIY
Основні елементи цієї мови - це теги. Вони в більшості випадків парні - є відкриває, а є закриває. Перші позначаються за допомогою тільки кутових дужок. Другі - аналогічно, але перед другою дужкою ставиться слеш - символ /. Браузер уміє їх розпізнавати, і тому без проблем відображає вміст веб-сторінок відповідно до алгоритмів, створюваними розробником документа.
Хто відкриває тег пишеться зазвичай великими буквами, що закриває - маленькими. Це - стандарт, усталений в середовищі IT-фахівців. Браузер, безумовно, розпізнає HTML-команду будь-якими буквами, але веб-розробникам рекомендується все ж дотримуватися зазначеної схеми написання тегів. Це полегшить, наприклад, доопрацювання веб-сторінки іншими фахівцями.
атрибути
Інші найважливіші елементи HTML-мови - атрибути. З їх допомогою творець веб-сторінки може задавати властивості контенту - наприклад, висоту шрифту, його колір, положення щодо сторінки. Те ж саме стосується картинок, відео та інших мультимедійних компонентів. Атрибути пишуться в межах відкриваючого тега.
Відео: Ялинкова іграшка Куля зі стрічок / Майстер Клас / 2015
вміст
Між відкриває і закриває тегом розташовується наступний ключовий компонент веб-сторінки - вміст. Це, власне, той самий контент, який повинен відображатися перед користувачем на екрані. Це може бути текст, посилання, картинка, відео чи іншої мультимедійний елемент.
Елементи веб-сторінок
«Так перерахуйте основні елементи Web-сторінки, нарешті!» - Повторює викладач. "Із задоволенням," - Відповідаємо ми йому. Що ж входить в структуру розглянутого типу документів? Домовимося, що будемо розглядати цей аспект в саме контексті HTML-елементів веб-сторінки. Тобто їх відображення в браузері - те, що користувач бачить на екрані - нас буде цікавити в меншій мірі. Справа в тому, що відповідні HTML-алгоритми, на основі яких програма відображає контент однаково, можуть бути різними. І в цьому особливість мови HTML: потрібне зображення на Web-сторінці можна вивести різними способами. При цьому вони можуть бути як рівнозначними з точки зору трудовитрат творця веб-сторінки способами, так і припускати різний обсяг зусиль і часу на їх здійснення.
Елементи веб-сторінок: заголовок
Стандартні елементи Web-сторінки, як би це дивно не звучало, представлені в дуже невеликій кількості. По суті, їх тільки два - заголовок і основна частина документа. Разом з тим кожен з них може мати досить складну структуру.
Яка специфіка заголовка? Розташовується він в самій верхній частині веб-сторінки. У HTML-коді, який формує заголовок, як правило, передбачається «шифрування» тільки тексту, але при необхідності у відповідному елементі можна також розміщувати невеликі графічні вставки. І це, власне, все, що можна сказати про заголовку. Здавалося б, його роль в структурі відповідного документа незначна. Але це не так. Заголовки веб-сторінок дуже значимі з точки зору індексації сайтів в пошукових системах - Яндексі, Google. Даний елемент повинен бути повністю релевантним змістом веб-сторінки, а також тематичної специфіки сайту.
Яким чином заголовок веб-сторінки фіксується за допомогою мови HTML? Дуже просто. Спочатку пишеться відкриває тег, який завжди виглядає як HEAD з кутовими дужками, потім - зміст заголовка, після - що закриває тег. Пишуться вони, зрозуміло, в самому верхній частині веб-документа.
Тема веб-документа може включати ряд додаткових елементів. Іноді формат Web-сторінки може вимагати відображення тексту в конкретній кодуванні. Як забезпечити відповідність веб-документа цим критерієм? Дуже просто. У структурі заголовка документа повинні бути розміщені HTML-алгоритми, які веліли браузеру використовувати конкретну кодування мови - наприклад, кириличну. Відповідні команди розміщуються в рамках тега META, який, так само як і інші, буває відкриває і закриває.
Основна частина веб-сторінки
Основна частина веб-документа відкривається тегом BODY, закривається ж за допомогою відповідного елемента, що включає слеш. При цьому між відкриває і закриває тегами може бути величезна кількість додаткових команд мови розмітки гіпертексту. Це пов`язано з тим, що в основній частині веб-сторінки розміщено її корисне вміст - тексти, посилання, графіка, відео, різні форми для заповнення.
Кожен з відповідних видів контенту має власні теги. У структурі основної частини веб-документа можуть бути присутніми HTML-команди, за допомогою яких здійснюється також форматування тексту - наприклад, надання шрифту певного кольору, розміру та інших властивостей.
Розглянемо те, як і специфіка деяких часто використовуваних HTML-тегів. Власне, вони ж і формують основні елементи веб-сторінки.
Базові HTML-теги
Отже, з метою детального дослідження того, що являють собою елементи Web-сторінки, вивчимо докладніше сутність базових HTML-тегів. Деякі з них ми вже навели вище - зокрема ті, за допомогою яких браузер прочитує заголовки веб-сторінок і визначає, де розташовується основна частина документа.
Відео: Warface. ЯК ЛЕГКО ЗАРОБЛЯТИ ВАРБАКСИ ?!
Досить поширений тег P. Він, як і інші аналогічні елементи мови розмітки гіпертексту, може бути відкриває і закриває. Даний тег дозволяє форматувати окремо взятий абзац документа. Можна, наприклад, задавати для нього певний тип шрифту або його колір. Однак це здійснюється за допомогою додаткового тега - FONT. При цьому розміщуватися він буде всередині того, що позначає межі абзацу - це дозволить не поширювати HTML-команду, яка відображатиме тип кращого шрифту, на інші елементи веб-сторінки.
За допомогою тега TABLE створюються таблиці. За допомогою відповідних йому атрибутів можна визначати необхідну кількість стовпців і рядків, задавати їх ширину, специфіку кордонів, розмір і колір шрифту тексту в таблиці.
тег IMG відповідає за обробку браузером картинок. У ньому також можна розміщувати різні атрибути, що регулюють розмір картинки, її положення на сторінці.
Посилання на інші веб-документи або файли вказуються за допомогою тега A. Як правило, всередині нього розташовуються атрибути, які позначають той факт, що в структурі веб-сторінки - гіперпосилання. При цьому вказується документ, файл або сайт, на який вона веде.
Поширений такий тег, як FRAMESET. З його допомогою можна розділити простір веб-сторінки на кілька областей - фреймів. У кожному з них можна розміщувати посилання на окремі веб-документи. Тобто фрейми дозволяють коректно розташувати на одному екрані одночасно дві і більше сторінки.
Розповідь про ключові елементи веб-сторінок і подальше оповідання про засоби їх форматування за допомогою мови HTML - приблизно таким буде алгоритм нашої відповіді на питання, який нам задав екзаменатор. Якщо він звернувся до нас, сказавши «перерахуйте основні елементи Web-сторінки», то ми, використовуючи відповідну методологію, матимемо всі шанси розкрити тему. Тобто під терміном «елементи» ми можемо розуміти ключові компоненти структури веб-документа, або типи вмісту - текст, картинки, таблиці, фрейми, посилання, які веб-майстер формує за допомогою такого інструменту, як мова HTML.
Специфіка інструментів веб-розробки
На додаток до сказаного ми можемо пояснити, що тегів і атрибутів, передбачених стандартами HTML - величезна кількість. Крім HTML веб-розробниками можуть використовуватися додаткові кошти форматування гіпертекстових документів. Наприклад, за допомогою мови скриптів javascript можна створювати динамічні Web-сторінки - тобто ті, в яких контент постійно оновлюється (як за рахунок дій самого користувача, так і відповідно до заздалегідь прописаними в скриптах алгоритмами).
Корисно буде додати, що веб-розробник може задіяти у своїй роботі повноцінні мови програмування, такі як, наприклад, Perl, PHP, Java, Python, за допомогою яких можливості роботи з гіпертекстовими документами стають ще ширше. Необхідність в цьому може бути пов`язана з тим, що області застосування веб-технологій сьогодні - найрізноманітніші. Завдання, які стоять перед сучасними розробниками, можуть бути досить складними. Наприклад, іноді потрібно здійснити переклад Web-сторінок, написаних російською мовою, англійською. В цьому випадку інструментарій розробника буде найрізноманітнішим.
