HTML-верстка і Web-програмування сайту. З чого почати?
Січень 07, 2008 Автор: adminДана стаття написана для тих, хто самостійно намагається розібратися в програмуванні Web-сайтів. Вона показує шлях по якому може рухатися початківець, який розгубився в різноманітності сучасних мов програмування для Web, а також вона намагається обґрунтувати даний вибір. Кроки запропоновані в цій статті не варто вважати абсолютно правильними. Це лише авторське бачення можливого розвитку Web-програміста.
Сьогодні існує чимало програм, які дозволяють створювати власні Web-сайти не вникаючи в код сторінок. Крім того Інтернет рясніє сайтами, які пропонують готові шаблони для сайтів. Ми орієнтуватимемося на те, що Ви не шукаєте легких шляхів і бажаєте здобути достатній обсяг знань з метою самостійного створення Web-сайтів, якісного редагування готових шаблонів, тощо.
Отже, з чого слід почати. Без чого подальше вивчення Web-програмування неможливе?
Щоб створити сайт потрібно знати хоча б мову розмітки. Найлегшою і найпопулярнішою є мова HTML.
Що таке HTML?
Термін HTML (HyperText Markup Language) означає “мова маркування гіпертексту”. З часу створення першої версії (специфікації) HTML зазнав деяких змін. Поточну специфікацію HTML можна знайти на сайті www.w3.org.
Що вам знадобиться для освоєння HTML?
- браузер;
- редактор текстових файлів.
HTML-сторінка – це звичайний текстовий файл. Свої перші HTML-файли Ви будете розробляти в себе на локальному диску.
При вивченні нового матеріалу слід дотримуватися таких нескладних порад:
- не використовуйте старих книг, статей, тощо;
- звертайте увагу на автора матеріалу.
Для більш-менш якісного створення HTML-документів Вам необов’язково досконало вивчати грубезні посібники, але Ви повинні знати основні можливості, які забезпечує HTML і де можна знайти потрібну інформацію.
Що далі? А далі – CSS.
Тут слід зауважити, що після вивчення HTML Ви маєте достатній багаж знань для того, щоб створювати повноцінні статичні сайти. Більше того, на цьому Ви можете зупинитись… Але в такому випадку Ви втратите величезні додаткові можливості для зручної роботи.
CSS (Cascading Style Sheets) – каскадні таблиці стилів, які застосовуються для візуального форматування документу в мовах розмітки, крім того в CSS є можливості створювати стилі для друкованої версії сторінки і для управління звуком.
CSS найчастіше зменшує об’єм коду, дозволяє виносити стилі в окремий файл, який можна повторно використовувати і ще багато іншого.
З вище сказаного можна зробити висновок, що як HTML, так і CSS не є мовами програмування. Вони дозволяють лише змінювати оформлення елементів Web-документів.
Але, як же бути з опрацюванням даних на сайті?
Вам потрібно рухатися далі. Зазвичай, наступний крок дається не всім, бо, далі треба вивчати програмування.
JavaScript – мова опису сценаріїв. Являє собою скрипт-мову для www, засновану на Java. Код JavaScript може бути вбудований безпосередньо в текст сторінки HTML.
JavaScript – мова програмування, за допомогою якої Ви можете створювати інтерактивні Web-сторінки. Величезною перевагою JavaScript перед іншими мовами програмування є те, що їй не потрібно ніяких інтерпретаторів і Web-серверів, а достатньо тільки одного браузера.
Зауваження! Не слід плутати JavaScript з Java, чи з JScript. Це різні мови програмування.
Як! Ви успішно впоралися і з цим кроком? Тоді Ви досягли неабиякого рівня. Під словом “впоралися” не варто розуміти досконалого вивчення JavaScript. Лише з практикою Ви зрозумієте, що багато-чого не знаєте, багато автор книги, яку Ви читали для знайомства з JavaScript, Вам не розказав.
Зауваження! Кожен по-своєму розуміє словосполучення “достатній рівень знань”. Але погане вивчення матеріалу призведе або може призвести до помилок в коді, які важко виявити, бо Ви впевнені в своїй правоті і шукаєте не там, де слід.
Наступний крок – це PHP. Хоча необов’язково наступний. Він сміло може йти перед вивченням JavaScript, а може взагалі не бути виконаним. Але ж Ви бажаєте вдосконалюватися.
Можна довго сперечатись про те, яку мову програмування обрати. Тут і ASP, і Perl, і Java, … Але ми зупинимо свій вибір на PHP.
PHP вибраний з-поміж інших аналогічних мов програмування через свою простоту в освоєнні, популярність серед програмістів і безкоштовність.
Навіщо Вам PHP?
Сучасний сайт повинен підтримувати пошук інформації, продаж продуктів, гостьову книгу, тощо. А це і не тільки це можна реалізувати на PHP.
Відмінність PHP від JavaScript полягає в тому, що PHP-скрипт виконується на сервері, а клієнту передається результат роботи, тоді як JavaScript-код повністю передається на клієнтську машину і тільки там виконується.
Наведу найбільш популярні можливості мови:
- інтеграція Web з базами даних;
- робота з файлами і папками;
- легка робота з формами;
- робота з растровими зображеннями (бібліотека GD);
- скрипти можна “вклеїти” прямо в HTML-код;
- робота з FTP;
- шифрування;
- підтримка PDF (Adobe).
Для початку можу порадити Вам сайт www.php.net. На ньому Ви зможете скачати свіжу версію PHP, документацію, FAQ, приклади скриптів, тощо.
Порада: не завантажуйте найсвіжіші версії, оскільки вони можуть бути нестабільні. Краще трохи почекати і скачати нормальний стабільний реліз.
Для того, щоб всі ваші скрипти написані на PHP працювали, необхідно мати або доступ до вже налаштованого сервера, або (найпростіший варіант) поставити собі пакет “Denwer” (http://denwer.ru). Там всі операції по налаштуванні виконані за вас. Такий варіант цілком підійде для роботи зі скриптами вдома.
Якщо Ви вже розібрались з PHP, то, як тут не скористатись можливістю роботи з базами даних.
MySQL – це одна з найпопулярніших і найпоширеніших СУБД (система управління базами даних) в Інтернеті завдяки вдалому поєднанні користувацьких властивостей, відкритому коду і добрій технічній підтримці. Офіційний сайт – www.mysql.com.
MySQL розглядається як основа для не надто складних проектів, які не вимагають високого рівня збереження даних, як то: форуми, системи ведення статистики, електронні магазини, тощо.
В якості альтернативи MySQL можна розглянути: Oracle, PostgreSQL, mSQL.
Переваги MySQL:
- маленький;
- швидкий;
- легкий в установці і використанні;
- є безкоштовним для некомерційного використання;
- написаний під десятки видів ОС.
Для мови PHP MySQL виступає як стандарт де-факто, і бібліотека для звернення до MySQL скомпільована в ядро PHP.
Мабуть, все. Ні, ні… Звичайно не все, але цього має бути достатньо, щоб успішно створювати сучасні, зручні, конкурентні Web-сайти.
Як бачите, дана дорога нелегка. І тому перш ніж розпочати вивчення потрібно добре подумати, чи Вам дійсно це потрібно. Адже, час – безцінний і його не повернути.
Популярність: 46%
Теґи до статті: CSS, Denwer, HTML, JavaScript, MySQL, PHP, Web-програмування, Web-сайт, Інтернет, браузер, верстка, сайт, СУБД.

каже: 22.01.2008 о 10:47
Стаття дуже сподобалась. Все просто і доступно. Я сидів в неті днями і не міг знайти чітко з чого мені почати створювати сайт, купа інформації а толку МАЛО, а тут в одній статі. Спасибі автору! Так тримати!
каже: 22.01.2008 о 11:08
Приємно чути, що моя праця не була марна
каже: 15.02.2008 о 00:59
Більшість програмістів не вміють верстати навіть на самому примітивному рівні
каже: 15.02.2008 о 10:49
Роботодавці найчастіше розділяють ці два види робіт (верстку сайтів і веб-програмування). Адже, це дві окремі веб-науки, два світи, які мають різні підходи. Не кожен верстальщик взмозі осилити на пристойному рівні веб-програмування. Та й навіщо, коли його душа не лежить до цього. Гарний верстальщик і без цього заробить собі на хліб
А, ось, програмісти найчастіше ставляться до верстки зверхньо, оскільки програмування дозволяє непогано заробляти і не лісти у верстку сайтів.
P.S. Я починав створення сайтів з верстки, а вже згодом взявся за веб-програмування. Як на мене, це логічний шлях розвитку веб-майстра.
каже: 04.03.2008 о 13:23
Спасибо за материал! все просто и доступно, вы мне очень помогли!!!
каже: 06.04.2008 о 15:52
Хочу висловити взагальному респект цьому блогу, дуже хороші матеріали, хотілось би щось цікаве про розкрутку
каже: 06.04.2008 о 16:16
Дякую, Віталій, за схвальний відгук. На разі я не можу похвалитися великим багажем знань в області розкрутки сайтів. Окрім, мого першого сайту (www.formula.co.ua) похвалитися загалом нічим. Адже, я більшою мірою займався версткою сайтів і Web-програмуванням. А писати про те, що вже всі й так знають (про важливість тегу title, потребу прописувати для картинок атрибут alt і тому подібне) — не варто. Зараз можу хіба порадити вам блоґ http://mystyle.name (Розкрутка сайту. Оптимізація та просування сайту в пошукових системах). А також форум на цьому сайті — http://promolab.org.
каже: 18.05.2008 о 23:18
Мені ближче програмування. Якщо треба щось зверстати за готовим дизайном, можу і так зробити, хоча як на мене це занадто клопітка робота. Взагалі і дизайн самостійно можна робити. Однак… Це вже в мене виходить “не дуже”. Так що краще працювати поряд з дизайнером.
Як навчила практика, краще робити програмну частину сайта, коли дизайн вже готовий, а ще краще, зверстаний через блоки та css - багато часу таким чином можна зберегти.