Давайте відразу вчитися все робити правильно. Хоч це і найпримітивніша сторіночка створимо її за всіма правилами (вони знадобляться при роботі з 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 - визначає спосіб горизонтального вирівнювання контейнера.
Можливі значення: left, center, right, justify. Це відповідно по лівому краю, по центру, по правому краю, і по ширині. За замовчуванням має значення left.
Припустимо нам потрібно вирівняти перші два рядки тексту з попереднього прикладу по правому краю, не виділяючи при цьому їх в абзац. Як це зробити?
<div align="right">
Починається перший рядок <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 - вказує заголовок посилання, який з'являється при наведенні на неї.
Дивіться приклад:
<a href="http://www.zvirec.com" target="_blank">
Це посилання на сайт zvirec.com, відкриється в новому вікні
</ a > <br> <br>
<a href="http://www.zvirec.com" title="Учебнік створення сайту ">
Ця - теж на zvirec.com. При наведенні з'явиться заголовок.
</ a >
Дивіться на результат:
Це посилання на сайт zvirec.com, відкриється в новому вікні
Ця - теж на zvirec.com. При наведенні з'явиться заголовок.
Ну ось в принципі і все. Можете сильно не зациклюватися, у програмі Adobe Dreamweaver будь-яке посилання робиться одним натисканням мишки. Головне для Вас, зрозуміти що до чого, а зазубрювати не обов'язково...
А чи можна змінити колір посилань?
Звичайно можна. Щоб змінювати колір посилань у всьому документі, існують спеціальні атрибути елемента BODY.
LINK - колір просто посилань.
ALINK (Active Link) - колір активних посилань (активна означає в момент натискання на неї)
VLINK (Visited Link) - колір вже відвіданих посилань
Всі кольори задаються або RGB - значенням в шістнадцятковій системі, або одним з 16 базових кольорів.
Приміром якщо при відкритті тіла документа, елементу body прописати:
<body link="red" vlink="green" alink="white">
то всі посилання в даному документі стануть червоними, вже відвідані посилання стануть зеленими а посилання в момент натиснення будуть білими.
А якщо потрібно щоб в якомусь місці посилання мала інший колір? наприклад по всьому документу червоні, а саме в одному місці зелена?
Тоді потрібно всередині html посилання прописати вже знайомий елемент font з атрибутом кольору:
<a href="http://www.zvirec.com"> <font color="black"> Чорне посилання </ font > < / a >
Якщо зробити так, то дане посилання буде чорним.
