Вебдизайнери проєктують логічну структуру вебсторінок, продумують найбільш зручні рішення подачі інформації, а також займаються художнім оформленням вебпроєкту. В результаті перетину двох галузей людської діяльності грамотний вебдизайнер повинен бути знайомий з останніми вебтехнологіями і володіти відповідними художніми якостями.
| Вебпрограмування | |
| Сфера діяльності | Вебпрограмування |
|---|---|
| Вебпрограмування у Вікісховищі |
Основні принципи роботи Web Редагувати
Теоретично гіпертекст — це усього лише зручний спосіб представлення інформації. Але на практиці гіпертекст — це можливість зробити посилання на інші документи за допомогою слів, фраз, малюнків. Ім'я кожного з цих місць можна зв'язати з іншим документом, у якому міститься більш докладна інформація. Коли користувач вибирає посилання в першому документі, браузер відкриває другий документ із більш докладними даними.
У гіпертексту є дві важливі особливості.
1. Інформація ніяк не впорядковується — документи просто зв'язуються один з одним за допомогою посилань. Хоча головною метою багатьох методів є саме впорядкування інформації тим або іншим способом (наприклад, у виді ієрархії), у гіпертексті основна увага приділяється створенню інформаційних зв'язків. Таким чином, гіпертекст — це спроба створення моделі, що описує спосіб представлення інформації в мозку людини.
2. Інформаційні зв'язки можуть існувати між самими різними документами. Створюючи впорядкований список або схему, ви поміщаєте на кожне місце в списку або ієрархії (тобто в структурі) тільки один елемент. А в гіпертексті кожен інформаційний фрагмент (або елемент) може знаходитися в багатьох, причому зовсім різних, місцях структури.
Термін гіпермедіа (hypermedia) використовується для опису того, що ви знаходите в Web. Гіпермедіа — це природне узагальнення поняття гіпертексту, що відноситься до документів, у яких розміщується не тільки текст, але і мультимедіа, тобто зображення, відеозаписи і звук. Ці елементи також можна зв'язувати з іншими документами гіпермедіа. Наприклад, на Web-сторінці можна зв'язати зображення з документом таким чином, що якщо користувач клацне на зображенні, браузер відкриє відповідний документ.
Документи HTML Редагувати
HTML (Hypertext Markup Language — мова гіпертекстової розмітки) служить для опису Web-сторінки, що зберігається у виді звичайного текстового файлу з розширенням *.htm або *.html. Головна мета HTML — описати формат вмісту Web-сторінки, він описується з допомогою дескрипторів (tag) HTML. Дескриптори визначають способи форматування тексту, служать розпізнавальними знаками зображень або таблиць, дозволяють зв'язувати слова або фрази з іншими документами в Internet.
Якщо дати коротке означення Web-сторінки, то це комбінація тексту і дескрипторів HTML, що описують способи форматування цього тексту.
Робота з динамічними даними Редагувати
Динамічний HTML користується в даний час величезною популярністю, оскільки дозволяє розроблювачеві створити дійсно інтерактивну Web-сторінку, а не статичний документ. Подібна можливість досягається за рахунок того, що для кожного елемента Web-сторінки можна написати сценарій. Наприклад, можна написати сценарій зміни кольору слова при приміщенні на нього покажчика миші, чи написати сценарій імітації феєрверку при натисненні кнопки миші на деяких елементах Web-сторінки.
Створення WEB — сторінок Редагувати
Створення Web-сторінок з допомогою мови HTML Редагувати
Гіпертекстові Web-сторінки зберігаються в звичайних текстових файлах з розширенням НТМ або HTML. HTML — мова розмітки гіпертекстових документів, призначена для створення та написання гіпертекстів. HTML — базується на стандартній мові узагальненої розмітки (SGML — Standard Generalized Markup Language) та призначений для опису взаємопов'язаних документів у розподіленій мережевій інформаційній системі WWW. HTML описує не тільки структуру документів, а й зв'язок між ними. У загальному вигляді HTML — це набір стилів (tags), які виділяють різні компоненти WWW-документів.
Зовнішній вигляд документа на екрані користувача визначається браузером. Браузери є графічні та текстові, в кожнім браузері документ буде виглядати по-своєму, але структура його залишиться незмінною, оскільки вона задана форматом html.
Мова HTML є лінійною мовою й у стандартному варіанті не підтримує циклів або розгалужень, при умові, що не використовуються технології SSI (Server Side Includes), DHTML (Dynamic HTML) або ASP (Active Server Pages) чи PHP. Браузер передивляється документ від початку і до кінця, одразу форматуючи сторінку. Використання програм, які мають назву CGI-script (VB-Script, JAVA-Script), а також використання мов серверного програмування (включаючи SSI, ASP, PHP, JAVA) змінилося уявлення про HTML документ, як про статичний текст з елементами гіпертекстової розмітки. Нові технології дозволяють генерувати активні документи і використовувати всю техніку програмування для їх створення.
Чистий HTML— це мова, що описує, як повинен виглядати документ. Його також можна назвати мовою розмітки.
Основним елементом HTML є дескриптори або теги. Документ форматується при додаванні дескриптора, що точно вказує, як повинен виглядати текст. Дескриптори HTML розташовані у кутових дужках . Умовно дескриптори можна розбити на три частини:
• Дескриптори, які інформують браузер про те, що документ є HTML-документом, і дескриптори коментарів. • Дескриптори заголовків HTML-документа. • Дескриптори тіла HTML-документа.
Розрізняють два типи дескрипторів: дескриптори-контейнери і прості дескриптори.
Атрибути HTML Редагувати
Безліч дескрипторів HTML також приймають параметри, які називаються атрибутами. Атрибути використовуються для вказівки додаткової інформації Web-браузерові про те, як застосовувати цей дескриптор. Якщо ви додасте дескриптор, що створює посилання, то атрибути будуть використовуватися для вказівки URL зв'язаної Web-сторінки. Атрибути — це імена, яким через знак рівності (=) привласнюються визначені значення. Наприклад, для зв'язку з файлом HTML необхідно атрибутові HREF привласнити URL цього файлу — HREF=document2.html і помістити його між відкриваючою і закриваючою кутовою дужками дескриптора ": "
Друга сторінка Редагувати
Якщо рядок значення параметра містить пробіли, її необхідно записувати в одинарних або подвійних лапках.
Структура документів HTML Редагувати
Кожен файл HTML має однакову базову структуру. Умовно його можна розбити на дві частини — заголовок і тіло. Відповідно є дескриптори які відносяться до заголовка і тіла html-документу, але крім цього, як ми говорили, існують ще загальні дескриптори. Тому, структуру html, розглядають поряд з структурою дескрипторів.
В загальному кожен html-файл починається з дескрипторів і закінчується дескриптором . Усередині цього контейнера вкладені два інші: і . Контейнер містить заголовну інформацію про документ, а контейнер вміст документа. В загальному ж структура html-файлу така: Текст заголовку html-документа Текст html-документу Розглянемо детальніше дескриптори, які відносяться до кожної частини html-документу.
Загальні дескриптори і коментарі. Редагувати
До загальних дескрипторів можна віднести:
1) — дескриптор-контейнер, повідомляє браузеру, що вся інформація, яка знаходиться між і є текстом, закодованим згідно із форматом HTML.
2) — дескриптор контейнер, який вказує на те, що даний текст, який міститься між цими дескрипторами є коментарем. Коментарі, так як і коментарі в будь-якій мові програмування, на екран не виводяться.
3) — ще один вид дескриптора-коментаря.
Структура документів HTML Редагувати
Кожен файл HTML має однакову базову структуру. Умовно його можна розбити на дві частини — заголовок і тіло. Відповідно є дескриптори які відносяться до заголовка і тіла html-документу, але крім цього, як ми говорили, існують ще загальні дескриптори. Тому, структуру html, розглядають поряд з структурою дескрипторів.
В загальному кожен html-файл починається з дескрипторів <HTML> і закінчується дескриптором </HTML>. Усередині цього контейнера вкладені два інші: <HEAD> і <BODY>. Контейнер <HEAD> містить заголовну інформацію про документ, а контейнер <BODY> вміст документа. В загальному ж структура html-файлу така:
<html>
<head>
Текст заголовку html-документа
</head>
<body>
Текст html-документу
</body>
</html>