План

Вступ

Розділ 1. Вивчення HTML.

1.1. Введення.

1.2.Урок 1: Структура web-документа. Вставка коментар.

1.3. Урок 2: Створюємо свою першу сторінку.

1.4. Урок 3: Робота з текстом.

1.5. Урок 4: Робота з силками.

1.6. Урок 5: Робота з зображенням.

1.7. Урок 6: Колір фону і тексту.

1.8. Урок 7: Робота з таблицями.

1.9. Урок 8: Робота з формами.

Розділ 2. Вивчення СSS.

2.1.Введення.

2.2. Урок 1:Принцип роботи CSS.

2.3. Урок 2: Колір і фон.

2.4. Урок 3: Шрифти.

2.5. Урок 4: Робота з текстом.

2.6. Урок 5:Робота з списками.

2.7.Урок 6:Робота з рамками.

2.8. Урок 7: Поля (margin) і відступи (padding).

2.9. Урок 8: Шари в CSS.

Вступ

Маючи свій сайт, можна рекламувати свої послуги, заробляти гроші, шукати однодумців тощо. Тому треба навчитися його робити :) У цьому короткому огляді, я дам вам покрокові інструкції з навчання сайтостворення.

Почніть з вивчення мови 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

1.1 Введення

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>. Таким чином, елемент - більш загальне поняття, що означає пару тегів і ділянка документа між тегами, на який поширюється їх вплив.