2. Етапи створення сайту
Створення сайту умовно можна розділити на такі етапи:
1. Попередній етап розробки сайту.
На цьому етапі розв'язуються питання загального характеру. Обговорюється загальна концепція сайту, формулюються та фіксуються цілі створення сайту.
2. Етап проектування сайту.
Визначення структури сайту: меню, посилання, розміщення модулів, побудова списку компонентів, що підключаються, тощо.
Етап розробки й тестування сайту
Розміщення сайту
Розвиток ресурсу.
Можна виділити такі варіанти створення веб-сайтів:
І-ий спосіб (програма Блокнот)
Програмування сайту мовою HTML
Різні структурні елементи Web-сторінки позначають відповідними операторами, які називаються тегами. При одержанні Web-сторінки із сервера броузер аналізує її. Він знаходить у ній теги, що вказують, якого типу елемент треба відобразити, і виводить фрагмент Web-сторінки на екран.
Сукупність тегів і правил їх використання називається мовою HTML – мова розмітки гіпертексту. Файл даних, фрагменти якого розмічені тегами мови HTML, називається HTML-документом. Ім’я такого файла звичайно має розширення .htm чи .html. HTML-документ, поміщений на Web-сервер є Web-сторінкою, яка переглядається за допомогою Web-броузера. Тому, навчившись створювати HTML-документи, ми зможемо робити власні Web-сторінки.
HTML-документ складається з фрагментів тексту у вигляді ASCII-коду й тегів. Теги записуються символами ASII, які беруться в кутові дужки (знаки “<” менше та “>” більше). Таким чином, HTML-документ є звичайним ASII-файлом, і створювати його можна за допомогою найпростішого текстового редактора. Наприклад, при використанні редактора Блокнот треба ввести вміст HTML-документа, а при збереженні вибрати команду Файл-Сохранить. У вікні Сохранение, що відкрилося, встановити значення Все файлы в полі Тип файла, а в імені обов’язково вказати розширення .htm.
Завдяки цьому файл буде відображатися у вигляді значка броузера, який встановлено на даному комп’ютері. Подвійне клацання на значку відкриває HTML-документ у броузері для перегляду. Наприклад, до поля імені файла можна ввести його назву “Перша.htm”.
Щоб редагувати сворену веб-сторінку потрібно на документі натиснути правою кнопкою мишші та вибрати “Відкрити з допомогою Блокнот”.
Теги. Структура HTML-документа. Вище було сказано, що тег – це вказівка браузера, як відображати фрагмент документа. Тег завжди починається символом “<” і закінчується символом “>”. Між цими символами вказується ім’я тега. В імені малі й великі літери не розрізняються.
Теги бувають двох видів – одинарні(не парні) й парні. Одинарний тег ставиться перед фрагментом тексту, яким він керує. Наприклад, запис
<br> Зошит
означає, що слово „Зошит” відображається з нового рядка.
Парні теги складаються з двох частин – початкової та завершальної. Початкова частина вказує точку документа, з якої починається дія команди, а завершальна – точку її закінчення. Завершальна частина відрізняється від початкової наявністю символу „ / „ (похила риска) перед ім’ям команди. Наприклад, запис <b> Синій олівець </b> означає, що текст „Синій олівець” відображається напівжирним шрифтом. Ознакою того, що текстовий файл є HTML-документом, служить парний тег <HTML> </HTML>. Він починає і завершає весь документ, тобто HTML-документ має вигляд:
<HTML>
текст документа
</HTML>
HTML-документ складається з двох частин – заголовка й тіла. Заголовок позначається парним тегом <HEAD> … </HEAD>, а тіло – парним тегом <BODY> … </BODY>. Текст, що виводиться в заголовку вікна броузера, розміщається в парному тезі <TITLE> … </TITLE>. Структура HTML-документа має вигляд:
<HTML>
<HEAD>
<TITLE> Заголовок документа </TITLE>
</HEAD>
<BODY>
Тіло документа
</BODY>
</HTML>
Основним елементом HTML-файла є абзац. Розбиття тексту на стрічки при написанні HTML-файла не впливає на те, як цей текст буде відображатись в браузері, тому при написанні тексту можна стільки разів переводити рядок, скільки це зручно. Заголовки використовують для найменування частин документа, а також змінювати загальний вигляд. Мова HTML дозволяє створювати добре структуровані документи за допомогою таких тегів:
<Р> - тег „параграф”, відділяє абзаци один від одного, ставиться в кінці абзацу.
<ВR> - наступний за цим тегом зміст HTML-файла буде просто починатися з нової стрічки.
<НR> - цей тег вказує на те, що браузер повинен відобразити горизонтальну лінію, що йде через весь екран.
<PRЕ></PRЕ> - за допомогою цього тегу встановлюється попередньо відформатований текст.
<Н1></Н1> - тег, який визначає заголовок документа. Після букви Н вказується вид заголовка від 1 до 5. Чим більша цифра, тим більший шрифт заголовку.
Браузер знищує всі зайві пробіли між словами. Якщо використовувати тег <PRЕ>, то можна ввести текст, відображений шрифтом фіксованої ширини, наприклад таблицю.
Створення веб-сайту чи веб-сторінки за допомогою спеціальних програм (FrontPage, PowerPoint, Word)
Демонстрація можливостей (нагадати можливості публікацій у веб)
Автоматизоване створення веб-сайту
Демонстрація сайту гімназії (процес буде на практичній роботі)