Урок 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.

Тому, якщо у Вас встановлений саме він, то Ви можете просто запустити свою сторінку, натиснути правою кнопкою миші, у випадаючому меню вибрати "Початковий Код". Там можете міняти все, що завгодно. А потім, просто натиснути на кнопку "Застосувати зміни".

Як бачите дійсно в заголовку документа написано "Це моя перша сторінка!" а коментарі справді не відобразилися в браузері!

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

Основними елементами форматування тексту в html є:

- P

Використовується для розбивання тексту на параграфи

- H1, H2, ... H6

Застосовуються для створення заголовків 1,2 ... 6 рівнів

- BR

Іспользуетcя для переносу рядка

- DIV, SPAN

Використовуються для виділення частини документа певним способом.

P - використовується для розмітки параграфів у html документах.

атрибути :

ALIGN - визначає спосіб горизонтального вирівнювання параграфа.

Можливі значення : left , center , right , justify . Це відповідно по лівому краю , по центру , по правому краю , і по ширині . За замовчуванням має значення left .

Наведу приклад:

Якщо всередині тіла документа написати наступне :

<p align="center"> Цей параграф по центру </ p >

<p align="left"> Цей по лівому краю </ p >

<p > Цей теж по лівому (тому за замовчуванням) </ p >

<p align="right"> Цей по правому краю </ p >

<p align="justify"> У цьому параграфі текст буде вирівнюватися по ширині (одночасно по лівому і правому краях документа). Не розуміють justify браузери будуть вирівнювати текст по лівому краю </ p >.

Примітка: слідкуйте щоб вміст в лапках було написано без пробілів, тобто <p align="right"> а не <p align=" right "> інакше не працюватиме!

H1 , H2 , ... H6 - Застосовуються для розбивання тексту на смислові рівні - розділи і підрозділи . Існує шість рівнів заголовків , різняться за величиною шрифту.

атрибути :

ALIGN - визначає спосіб горизонтального вирівнювання заголовків.

Можливі значення : left , center , right . Типово - left .

Наведу приклад:

Якщо всередині тіла документа написати наступне :

<! - Приклади заголовків від 1 до 6 рівня ->

<h1> Великий заголовок </ h1 >

<h2> Тема поменше </ h2 >

<h3> Ще менше </ h3 >

<h4> Зовсім маленький </ h4 >

<h5> Малюсенький заголовочек </ h5 >

<h6> Ну просто ліліпутські заголовочек </ h6 >

Примітка: закривати тег обов'язковий!

BR - даний елемент здійснює перенесення рядка. Не має закриває тега.

Наведу приклад:

Якщо всередині тіла документа написати наступне:

Починається перший рядок <br>

тепер йде друга <br>

а от вже і третя

<p> А це параграф і всередині нього теж можна використовувати тег <br> перенесення строкі.Его треба використовувати завжди, коли треба перенести рядок :) </ p>.

DIV - У сучасному Сайтобудування використовується як зручний контейнер для блоків html коду сторінки , яким легко динамічно маніпулювати - переміщати , регулювати відступи , приховувати і т.п. Обов'язковий закриває тег !

атрибути :

ALIGN - визначає спосіб горизонтального вирівнювання контейнера.

Припустимо нам потрібно вирівняти перші два рядки тексту з попереднього прикладу по правому краю , не виділяючи при цьому їх в абзац . Як це зробити?

Починається перший рядок <br> тепер йде друга <br>

</ div >

а от вже і третя

<p>

А це параграф і всередині нього теж можна використовувати тег <br> перенесення строкі.Его треба використовувати завжди , коли треба перенести рядок :) </ p >.

Примітка: Знаходяться між початковим і кінцевим тегами текст або HTML-елементи виділяються як би в окремий параграф (але відступи набагато менше).

наприклад:

Поки що ви читаєте текст на першому рядку <div> Але тепер вже на другий </ div> .

SPAN - Використовується для виділення частини інформації і надання їй різних стилів. Закриває тег обов'язковий!

Сам по собі, без використання стилів, елемент SPAN ніякого сенсу не має!

наприклад:

Хочете користуватися <span> Adobe Dreamweaver </ span> - тоді вивчіть хоча б основи html і <br>

тоді Ви без проблем розберетеся з цією чудовою програмою!

Як бачите, як ніби ми нічого і не виділяли! Але якщо прописати який нибудь стиль цього тегу, то він почне працювати!

Хочете користуватися <span style="color:red;"> Adobe Dreamweaver </ span> - тоді вивчіть хоча б основи html і <br>

тоді Ви без проблем розберетеся з цією чудовою програмою!

Таким чином за допомогою елемента SPAN можна хоч кожній букві в тексті привласнити різний стиль (колір, розмір, і.т.д.).

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

У першу чергу давайте поговоримо про посилання - переходах з однієї сторінки на іншу. Посилання це базовий елемент без якого неможливо уявити інтернет .

Створити html посилання дуже просто . Для цього використовується простенький елемент з одним атрибутом . Ну от наприклад :

<a href="http://www.vk.com"> Це посилання на сайт zvirec.com </ a >

буде виглядати в браузері :

Це посилання на сайт vk.com

Елемент а ( ancor ) є як би якорем , тобто текст , укладений між відкриває <a> і закриває </ a > тегом , буде текстом посилання .

Атрибут href це скорочення від " hypertext reference / гіпертекстове посилання " , спеціфірует місце , на яке виконується перехід за цим посиланням - зазвичай це internet -адресу та / або ім'я файлу.

Якщо потрібно зробити посилання між власними сторінками ?

Зробити html посилання між сторінками одного і того ж веб -сайту набагато простіше. Наприклад , якщо у нас є дві сторінки (наприклад page1.htm і page2.htm ) розташовані в одній папці , то код посилання з page1 на page2 буде виглядати так:

<a href="page2.htm"> Для переходу на page2 клацни тут ! </ a >

Тобто треба просто написати назву сторінки , на яку ми хочемо перейти .

Eсли сторінка page 2 знаходиться в папці " subfolder " , код посилання виглядає так:

<a href="subfolder/page2.htm"> Для переходу на page2 клацни тут ! </ a >

Так буде виглядати код html посилання зі сторінки page 2 на page1 ( у зворотний бік ) :

<a href="../page1.htm"> Для переходу на page1 клацни тут ! </ a >

Тобто поєднання " .. / " вказує як би на папку , розташовану на один рівень вище від даної позиції файлу , з якого робиться посилання .

А якщо треба зробити посилання всередині сторінки ?

Бувають випадки коли необхідно зробити посилання з початку сторінки в кінець або навпаки , або наприклад з змісту на глави і.т.д. Зробити її дуже просто! Необхідно помітити місце документа наступною конструкцією :

<! - Цей спосіб використовується при маркуванні заголовків - >

<h2 id="razdel1"> Розділ 1 </ h2 >

<! - А таку позначку можна поставити скрізь де знадобиться ->

<h2> <a name="razdel1"> </ a > Розділ1 : </ h2 >

Тепер ви можете посилатися на помічену область ( в даному випадку Розділ1 ) простою вказівкою її імені після клавіші #.

Ось як виглядатиме посилання на раздел1 :

<a href="#razdel1"> Посилання на Розділ 1 </ a >

Наведу більш наочний приклад:

<h1 > Зміст < / h1 > <br>

<a href="#razdel1"> Розділ 1: як стати багатим </ a > <br>

<a href="#razdel2"> Розділ 2: як стати щасливим </ a > <br>

<a href="#razdel3"> Розділ 3: як бути здоровим </ a >

<h2 id="razdel1"> Розділ 1: як стати багатим </ h2 >

<p> Для того , щоб стати багатим необхідно дуже багато трудитися ..... </ p >

<h2 id="razdel2"> Розділ 2: як стати щасливим </ h2 >

<p> Для того щоб стати щасливим , потрібно використовувати кожну хвилину ... </ p >

<h2> Розділ3 : <a name="razdel3"> </ a > як бути здоровим </ h2 >

<p> Для того щоб бути здоровим потрібно багато займатися фізкультурою ... </ p >

Ось результат в браузері :

Зміст

Розділ 1: як стати багатим

Розділ 2: як стати щасливим

Розділ 3: як бути здоровим

Розділ 1: як стати багатим

Для того щоб стати багатим необхідно дуже багато трудиться .....

Розділ 2: як стати щасливим

Для того щоб стати щасливим , потрібно використовувати кожну хвилину ...

Розділ3 : як бути здоровим

Для того щоб бути здоровим потрібно багато займатися фізкультурою ...

А можна зробити посилання на пошту ?

Як ви бачите , використовується mailto потім двокрапка і емаил одержувача . При натисканні на посилання запуститься поштова програма -клієнт із заповненим полем імені одержувача .

Парочка додаткових атрибутів:

TARGET - вказує де відкривати сторінку на яку веде html посилання . За умовчанням вона відкривається в тому ж вікні. Якщо хочеться щоб відкривалася в новому , слід написати target = " _blank" .

TITLE - вказує заголовок посилання , який з'являється при наведенні на неї.

Дивіться приклад:

Це посилання на сайт zvirec.com , відкриється в новому вікні

</ a > <br> <br>

Ця - теж на zvirec.com . При наведенні з'явиться заголовок.

</ a >

Дивіться на результат:

Це посилання на сайт zvirec.com , відкриється в новому вікні

Ця - теж на zvirec.com . При наведенні з'явиться заголовок.

Ну ось в принципі і все. Можете сильно не зациклюватися , у програмі Adobe Dreamweaver будь-яке посилання робиться одним натисканням мишки. Головне для Вас , зрозуміти що до чого , а зазубрювати не обов'язково ...

А чи можна змінити колір посилань?

Звичайно можна . Щоб змінювати колір посилань у всьому документі , існують спеціальні атрибути елемента BODY .

LINK - колір просто посилань.

ALINK ( Active Link ) - колір активних посилань (активна означає в момент натискання на неї)

VLINK ( Visited Link ) - колір вже відвіданих посилань

Всі кольори задаються або RGB - значенням в шістнадцятковій системі , або одним з 16 базових кольорів.

Приміром якщо при відкритті тіла документа , елементу body прописати :

то всі посилання в даному документі стануть червоними , вже відвідані посилання стануть зеленими а посилання в момент натиснення будуть білими.

А якщо потрібно щоб в якомусь місці посилання мала інший колір ? наприклад по всьому документу червоні , а саме в одному місці зелена?

Тоді потрібно всередині html посилання прописати вже знайомий елемент font з атрибутом кольору :

<a href="http://www.zvirec.com"> <font color="black"> Чорне посилання </ font > < / a >

Якщо зробити так , то дане посилання буде чорним .