Урок 1: Структура web-документа. Вставка коментар
Вступ
Маючи свій сайт, можна рекламувати свої послуги, заробляти гроші, шукати однодумців тощо. Тому треба навчитися його робити :) У цьому короткому огляді, я дам вам покрокові інструкції з навчання сайтостворення.
Почніть з вивчення мови 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 не діє.