Загальне уявлення про веб-конструюванні
Всесвітня інформаційна павутина (WWW-WorldWideWeb) є в даний час популярною і зручною службою мережі Інтернет. Веб-сторінки та веб-сайти широко застосовуються у Всесвітній павутині.
Методи конструювання веб-сайтів і інструменти, за допомогою яких виконується конструювання, дуже різноманітні, їх можна класифікувати за різними ознаками. Найважливішими з них є ступінь автоматизації конструювання сайту (візуальний і програмований) і методика процесу розробки.
Візуальний метод дозволяє конструювати веб-сайт з високим ступенем автоматизації. Цей метод виник з необхідності зменшити трудомісткість створення сайту і скоротити терміни виконання робіт.
Не можна стати справжнім веб-майстром, не знаючи основних конструкцій мови HTML, а для професійної роботи необхідно освоїти мову HTML. Створення сайту на мові HTML часто називають програмованим або ручним методом конструювання.
Для безпосередньої роботи з HTML-кодом можуть використовуватися спеціальні інструменти розробки, наприклад програми Hotdog, HomeSite і ін. Ці програми полегшують розробнику веб-сайту введення і редагування основних конструкцій мови HTML.
Крім мови розмітки гіпертекстових документів HTML для створення веб-сайтів використовуються інші мови програмування, наприклад Java Script і PHP.
Широке застосування при веб-конструюванні отримали скрипти. Вони використовуються, як правило, для створення окремих елементів веб-сторінки, наприклад, випадаючих списків, динамічних меню, годинників, календарів і т.п.
Методика веб-конструювання передбачає виконання проектування сайту за кілька основних етапів:
Розробка тематики сайту, його цілей і завдань.
Логічне проектування, яке включає в себе: формування структури сайту (лінійний, ієрархічний), назва розділів, зв'язок між ними, підготовка інформації, що розміщується на кожній веб-сторінці сайту.
Безпосереднє створення сайту, яке включає в себе визначення методів проектування і вибір інструментів для нього.
Методи і інструменти конструювання веб-сайтів дуже різноманітні, наприклад можна створювати сайти динамічні і статичні.
На динамічної сайті розміщується інформація, яка може змінюватися користувачем або завантажуватися з баз даних. Такі бази даних зазвичай містять інформацію, яка вимагає постійного оновлення. Наприклад, сайт Інтернет магазину завжди поповнюється відомостями про додаткові товари і змінюються ціни.
Статичний сайт не оновлюється в режимі реального часу.
Широке поширення отримали інтерактивні сайти. На таких сайтах веб-сторінки генеруються серверними програмами. Інформація зазвичай береться з баз даних. Дуже часто використовується розмежування доступу до сайту, при якому відвідувачі сайту мають різні права доступу до інформації на ньому. Такі сайти можуть містити різні форми для заповнення.
При створенні сайтів можуть використовуватися готові шаблони або їх побудова може виконуватися в спеціальних програмних середовищах, побудованих в основному на графічних зображеннях і т.д.
Питання для самоперевірки:
Які два основні методи веб-конструювання вам відомі?
Які інструменти можуть використовуватися при створенні веб-сайтів?
У чому різниця між візуальним і програмованим методами веб-конструювання?
Для чого використовуються скрипти?
Які етапи слід виконувати при проектуванні веб-сайту?
Основні понятіяHTML. Подання про структуреHTML-документа
П.1 Структура HTML-документа
Суть мови HTML - в розмітці тексту за допомогою керуючих символів - тегів, які розташовуються в кутових дужках.
Теги - це певні послідовності символів, укладені між знаками<(меньше ) и>(Більше), що задають правила виведення на екран текстів, графіки, звуку і т.д.
Більшість тегів парні, тобто мають відкриває елемент <> і закриває елемент .
Між ними і перебувають коди, які розпізнає браузер.
HTML-документ завжди повинен починатися відриває тегом і закінчуватися закриває .
Основні теги, необхідні для створення HTML- документа простої структури, можна знайти в таблицях.
У блоці заголовка розміщується тег
Приклад 1. Створити простий HTML-документ в Блокноті. Зберегти створений файл prim1.htm. Відкрити створений документ в браузері.
Структура такого документа представляється в такий спосіб:
Зовнішній вигляд в блокноті і в браузері (один і той же документ):
П.2 Оформлення HTML-документа
Теги мови HTML можуть містити атрибути, які є параметрами або властивостями елементів розмітки документа.
Правило запису атрибутів у тегу наступне:
<тег атрибут1=значение атрибут2=значение …>
тег
визначає зовнішній вигляд всієї веб-станиці, в той час як окремі її елементи, наприклад заголовки, таблиці можуть мати своє особливе оформлення.Вибір кольору сторінки, фонового малюнка і кольору тексту на ній є досить важливим, так як від цього залежить візуальне сприйняття всього сайту.
Колір сторінки задається атрібутомbgcolor, а колір тексту -text. Значним атрибутів є колір, який задається своєю назвою англійською мовою або його шістнадцятковим кодом.
Приклад 2. У цьому прикладі задано синій колір сторінки двома способами:
При формуванні веб-сторінок вказуються рів-ні заголовків, які позначаються h1, h2. h6. Для опису рівнів використовуються відповідні теги, наприклад, для третього рівня -
align = center - вирівнювання заголовка по центру;
align = left - вирівнювання заголовка по лівому краю;
align = right - вирівнювання заголовка по правому краю.
Приклад 3. Перетворимо створений раніше HTML-документ в документ з жовтим кольором фону і зеленим кольором тексту. Виведемо тексти заголовків рівня h1, h2, h3, вирівнявши їх відповідно по центру, по лівому і правому краю документа.
Порівняйте з попереднім прикладом:
Питання для самоперевірки:
1. За допомогою чого створюється HTML-документ?
2. Для чого призначені теги і атрибути в мові HTML?
вправи
а) Який колір фону і тексту буде на веб-сторінці?
б) При виведенні заголовків на веб-сторінці розмір їх зменшується або збільшується?