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