1.2.Урок 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 не діє.
1.3. Урок 2: Створюємо свою першу сторінку.
Давайте відразу вчитися все робити правильно . Хоч це і найпримітивніша сторіночка створимо її за всіма правилами (вони знадобляться при роботі з Adobe Dreamweaver ) .
КРОК 1 :
Створіть на своєму комп'ютері папку з назвою вашого майбутнього сайту , ну наприклад в даному випадку актуально буде назвати папку obuchenie_html . Всередині папки створіть ще одну папку з назвою www , а всередині неї ще одну для зображень з назвою img (пізніше вставимо туди картинки) . Для наочності я намалював вам приблизну структуру , вийшла в результаті :
Поки повірте мені на слово , далі коли почнете вивчати Dreamweaver все зрозумієте.
КРОК 2 :
Зайдіть в створену на попередньому кроці папку www і створіть всередині неї текстовий документ. Для цього зайдіть в неї , клікніть правою кнопкою миші в спадному меню виберіть Створити - Текстовий документ. Перед собою ви повинні бачити приблизно наступне:
КРОК 3 :
Тепер , слідуючи попереднього уроку напишіть у Блокноті текст найпростішої сторінки :
Наведу приклад:
<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN"
" http://www.w3.org/TR/html4/loose.dtd ">
<html>
<head>
<title> Це моя перша сторінка! </ title >
</ head >
<body>
<! - зараз я напишу свій перший рядок тексту! ->
Ура ! ! Я створив свою першу сторінку на html !
</ body >
</ html >
Готово ! Ви створили свою першу справжню веб - сторінку !
КРОК 4 :
Тепер збережіть ваш документ як " index.htm " (розширення " . Htm " вказує , що це HTML - документ. " . Html " дасть той же результат . Це не має значення) Для цього в меню Файл виберіть Зберегти Як :
У пункті Тип файлу виберіть "Усі файли".
Після збереження можете видалити текстовий документ.
Для того, щоб внести зміни в сторінку, Вам потрібно відкрити даний файл через звичайний блокнот. Або ж, можна міняти прямо в браузері, але тільки в браузері Opera.
Тому, якщо у Вас встановлений саме він, то Ви можете просто запустити свою сторінку, натиснути правою кнопкою миші, у випадаючому меню вибрати "Початковий Код". Там можете міняти все, що завгодно. А потім, просто натиснути на кнопку "Застосувати зміни".
Як бачите дійсно в заголовку документа написано "Це моя перша сторінка!" а коментарі справді не відобразилися в браузері!