Вступ
Маючи свій сайт, можна рекламувати свої послуги, заробляти гроші, шукати однодумців тощо. Тому треба навчитися його робити:) У цьому короткому огляді, я дам вам покрокові інструкції з навчання сайтостворення.
Почніть з вивчення мови html - це як би абетка сайтостворення, не знаючи яку, самостійно створити сайт в мережі практично нереально. Дуже хороший підручник html, з масою прикладів, знаходиться у мене на сайті.
Як другий крок, вивчіть технологію CSS - каскадних таблиць стилів. Ця чудова технологія в сукупності з html творить просто чудеса в сайтобудування.
Коли ви вже розберетеся з html і css, Вам залишиться тільки автоматизувати процес написання html і css коду. Для цього існують так звані візуальні редактори, одним з лідерів серед яких є Adobe Dreamweaver. Справа в тому, що працюючи з такою чудовою програмою як Adobe Dreamweaver, сайтостроєніє проходить значно легше, Ви економите просто нереальна кількість часу. Те, що в блокноті пишеться за годину, в цій програмі можна зробити за хвилину.
Щоб максимально швидко розібратися з цією програмою, скачайте навчальний відеокурс по Adobe Dreamweaver.
З цими знаннями, Ви вже можете зробити собі статичний сайт. Якщо ж Ви хочете, щоб Ваш сайт був живий, тобто з можливістю коментування, з реєстрацією і т.п. - То тут Вам допоможе готовий движок для сайту. Я спеціально зробив БЕЗКОШТОВНИЙ БАЗОВИЙ КУРС ПО CMS JOOMLA. Joomla - це один з найпопулярніших движків у світі. Тому можете сміливо вивчати і робити повнофункціональні сайти. Движок дуже просто у вивченні! Якщо Вам потрібно швидко зробити сайт, не особливо розбираючись що там до чого, то Joomla Вам підійде.
Також, на zvirec.com мається БЕЗКОШТОВНИЙ ВІДЕОКУРС ПО CMS DRUPAL. Drupal - на сьогоднішніх момент найбільш популярний движок для сайту. На базі Друпала можна створити сайт будь-якої складності. Він трохи складніше в освоєнні ніж Joomla, але більш гнучкий і потужний. Якщо чесно - з недавнього часу, я працюю тільки з ним. Тут вже самі вирішуйте, що обрати Вам!
Для створення красивої графіки, Вам знадобиться вивчити який-небудь графічний редактор. Безумовним лідером серед них є Adobe Photoshop. Тому якщо Ви ще не знайомі з цією програмою, раджу потихеньку починати її вивчати, тим більше що в мережі маса навчальних матеріалів (як відео так і текстових).
Ну ось в принципі і все на перших порах. Ну а далі, все залежить від Вас. Як то кажуть " досконалості немає межі ".
Розділ 1. Вивчення HTML
Введення
Html - це дуже корисна штука, тому що не знаючи мову html, практично неможливо створити свій сайт в мережі.З html починається шлях будь-якого веб -майстра.
Нижче, ви можете спостерігати інструкцію детального вивчення html.
Радий, що ви вирішили приступити до вивчення мого підручника з html. Повірте мені, в ньому немає нічого складного, і вже через годину ви створите свою першу сторінку.
HTML - це мова розмітки документів у середовищі WEB. Те, що ви бачите при перегляді сторінки в Internet, це інтерпретація вашим браузером HTML - тексту. Щоб браузер правильно відображав форматування наприклад тексту тобто поділяв його на абзаци, виділяв цитати, заголовки, списки і.т.д. йому треба якось повідомити, що мовляв це заголовок, а це - параграф і.т.д. Цим якраз і займається мову html.
Щоб побачити HTML -коди сторінки в Internet, клікніть правою кнопкою миші по сторінці, в меню виберіть пункт - view source (або " перегляд HTML коду ") Не лякайтеся! Я ще раз повторюся - насправді, все дуже просто!
Що знадобиться нам для навчання?
Браузер та Блокнот (або аналогічний простий редактор) - ось все, що вам необхідно для роботи з даними підручником. Раз ви переглядаєте цю сторінку - значить браузер у вас вже є, ну а блокнот я думаю знайти не важко (Пуск - Програми - Стандартні - Блокнот).
Чому простий текстовий редактор ідеально підходить для вивчення HTML і CSS? та тому, що він не змінює вводиться вами код. Так ви швидко просунетеся, а помилки будуть тільки вашими, а не програмними.
Можливо ви вже чули, або навіть використовували такі програми, як Microsoft FrontPage, Adobe Dreamweaver, які спрощують роботу з кодом.
Поки що забудьте про ці програми! Поки вчимося в блокноті!
Так, без сумнівів Ми будемо ними користуватися, але тільки після того, як пройдемо коротенькі курси з html і css.
3 терміна використовувані по ходу навчання
Тег - оформлена одиниця HTML-коду. Наприклад, <html>, <body>, <h1>, <h2> і так далі. Усі теги мають однаковий формат: вони починаються знаком "<" і закінчуються знаком ">". Зазвичай є два тега - відкриває та закриває. Різниця в тому, що в закриваючому мається слеш "/". Бажано вводити всі теги в нижньому регістрі (маленькими літерами), хоча не обов'язково.
Наведу приклад:
<h1> Крупний заголовок </ h1>
<h2> Тема трохи менше </ h2>
Як ви напевно здогадалися тег <h1> означає заголовок першого рівня, а тег <h2> - другого рівня. На початку тег відкривається, потім йде його вміст, потім він закривається. Все досить просто!
Атрибут-це свого роду додаткова інформація. Атрибути завжди записуються всередині тега, потім слід знак рівності та деталі атрибута, укладені в подвійні лапки.
Наведу приклад:
<h1> Крупний заголовок </ h1>
<h2 align="center"> Тема трохи менше </ h2>
Як бачите, я дописав в тезі <h2> атрибут align = "center", що означає вирівнювання по центру, в результаті чого вміст тега вирівнялась по центру осередки. У тегу <h1> атрибуту align (вирівнювання) немає, і тому вирівнювання відбувається за замовчуванням (по лівому краю).
Елемент - поняття, введене чисто для зручності пояснення. Наприклад, елемент HEAD складається з двох тегів - відкриває <HEAD> і закриває </ HEAD>. Таким чином, елемент - більш загальне поняття, що означає пару тегів і ділянка документа між тегами, на який поширюється їх вплив.
Урок 1: Структура web-документа. Вставка коментар.
Кожен HTML-документ, який відповідає специфікації HTML-якої версії, повинен починатися з рядка оголошення версії HTML <! DOCTYPE...>, яка зазвичай виглядає приблизно так:
<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN"
"http://www.w3.org/TR/html4/loose.dtd">
У даному випадку ми говоримо браузеру, що HTML відповідає міжнародній специфікації версії 4.01. Не намагайтеся запам'ятати цю строчку напам'ять, головне - ви повинні знати, що вона необхідна. Адже саме вона допомагає зробити сайт, який буде однаково виглядати у всіх браузерах (зазвичай це три основні Internet Explorer, Opera, Firefox).
Далі позначається початок і кінець документа тегами <html> і </ html> відповідно. Усередині цих тегів повинні знаходитися теги голови (<head> </ head>) і тіла документа (<body> </ body>).
Зазвичай основою голови документа є елемент TITLE - заголовок документа. Також там міститься вся технічна інформація, різні таблиці стилів і.т.п. А основний вміст: текст, таблиці, картинки, - знаходиться в тілі документа.
На цій смішний картинці я спробував схематично зобразити структуру:
Як ви бачите голова знаходиться над тілом, тому ніколи не розміщуйте голову документа в тілі документа (або навпаки). Спочатку закриваємо голову документа </ HEAD >, і лише потім відкриваємо тіло <BODY>. І ще, у документа одна голова і одне тіло, і не варто намагатися створювати їх більшу кількість.
Вставка коментаря: <! ---->
Дуже корисним при створенні сайтів є вставка коментар. Чому? та тому, що через місяць після створення, вам буде важкувато розібратися що до чого, адже коду буде дуже багато. А якщо ви будете коментувати свої дії - тоді розібратися буде значно легше! Т.к. це підручник html з прикладами, давайте до них і звернемося:)
приклад:
<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN"
" http://www.w3.org/TR/html4/loose.dtd ">
<html>
<head>
<title> Сайт про собак </ title >
</ head >
<! - Почнемо працювати з тілом документа ->
<body>
<! - вставляємо таблицю з переліком основних порід собак ->
</ body >
<! - закінчили з тілом документа ->
</ html >
Ви вже напевно здогадалися, що закоментувавши текст потрібен тільки для Вас, тобто при перегляді документа через браузер його видно не буде.
На початку коментар потрібно відкрити тегом <! - Потім вписати текст, і закрити тегом ->.
Примітка: тег <! ----> Всередині елемента TITLE не діє.
