 |
| Все не так складно як здається |
Створити HTML-сторінку або відредагувати HTML-код повідомлення можна за допомогою простого текстового редактора, вводячи вручну всі інстркуціі розмітки.
Однак існує велика кількість програм, які допомагають створювати HTML-сторінки без необхідності глибоких знань деталей HTML-коду. При цьому створення HTML-коду стає настільки ж простою справою, як створення текстової сторінки наприклад, у програмі MS Word. Проте використання програм автоматичного редагування HTML-коду не дозволяє скористатися всіма можливостями, що надає мова HTML, до того ж динамічні елементи вимагають завдання певних параметрів, які необхідно вказувати в контексті потоку HTML-коду. Редактори HTML-сторінок часом генерують надмірно химерний HTML-код, який вимагає редагування вручну. Все це вказує на те, що елементарні знання мови HTML просто необхідні.
Команди мови HTML називають тегами. Спрощено структура тегу виглядає так:
<Ім'я тега [модифікатори-атрибути]>
Ім'я тега - це слово. Існує обмежений набір стандартних імен тегів. Модифікатори-атрибути - це певні властивості, в кожному тезі їх може бути зазначено кілька або ж може не бути жодного. Для кожного тега існує свій набір атрибутів. Модифікатори мають такий вигляд:
Ім'я_атрибута= "значення"
Зазвичай значення вкладене в лапки. Це особливо важливо в тому випадку, якщо рядок значення складається з кількох слів. Пам'ятайте, що HTML не чутливий до регістру, тобто великі і малі літери несуть один і той же зміст. Ось приклад тега: <hr> - він використовується для створення горизонтальної лінії через всю сторінку. Тег <hr> може мати декілька атрибутів, наприклад, атрибути width і align. Для того щоб створити коротку лінійку, розташовану по центру сторінки, використовуємо наступний тег:
<HR Align="center" width="33%">
Тут вказана ширина лінійки у відсотках від ширини всієї сторінки. Замість відносної ширини можна задати значення ширини лінійки в пікселах. Атрибут align може приймати значення center, left, right (від англійської відповідно - центр, ліво, право).
Більшість тегів вимагає наявності парного тегу який їх закриває і виглядає так:
</Ім'я тега>
Схематично "комплекс" з парних тегів (елемент) можна зобразити так:
<Ім'я тега модифікатор="атрибути">Тут якийсь зміст</Ім'я тега>
Однак, ви вже зрозуміли, що не всі теги такі, деякі елементи не вимагають використання закриваючих тегів, наприклад тег <br />, який слугує для переходу на новий рядок.
Елементи у мові HTML описуються за допомогою тегів. Кожному тегу відповідає елемент. Як правило, елемент складається з відкриваючого тега, тіла елемента і закриває тега, однак не всі ці три складові повинні обов'язково бути присутнім. Завжди є необхідним тільки відкривючий тег. Тіло елемента і закриває тег як правило також потрібні, проте це відноситься не до всіх елементів HTML. Серед таких елементів - елемент <р>, який позначає початок нового абзацу. Після відкриваючого тега <р> слідує тіло тега (яке, однак, може виявитися і порожнім), в ньому записується текст абзацу. Абзац закінчується тегом </ р>, якого, однак, може і не бути. Замість закриває абзац тега можна використовувати тег, що відкриває новий абзац. Тег <р> може містити атрибути, наприклад, атрибут вирівнювання <р align = right> або <р align = center>.
Заголовки і шрифти
У HTML передбачено кілька елементів для оформлення структури тексту. Для виділення заголовків використовуються теги <h1>, <h2>, ..., <h6>. Вони відповідають заголовкам відповідних рівнів. Ці теги завжди повинні мати парні їм закриваючі теги, такі, як </ h1>. Заголовки можуть бути вирівняні з використанням атрибута align зі значеннями left, right, center. Наприклад:
<Н1 align ="center"> Заголовок першого рівня </ Н1>
Стиль тексту також створюється з використанням тегів. Теги <b> і </ b> використовуються для виділення фрагмента тексту напівжирним шрифтом, тег <i> та </ i> служить для виділення курсивом, <u> та </u> - підкреслений текст, <sub> та </ sub> - нижній індекс, <sup> і </sup> - верхній індекс, наприклад x <sup> 2 </ sup> - це ікс в квадраті
x2
Більш гнучкий засіб управління зовнішнім виглядом шрифту - це теги <font>. .. </ Font>. Елемент <font> має свій набір атрибутів, визначених у стандарті HTML 4, наприклад:
<FONT color="blue" size="+3"> Великий текст синього кольору </ FONT>
Списки
Списки утворюються з використанням тегів <ul> і <ol>. <ol> - це впорядкований список, тобто нумерований список, <ul> - це список невпорядкований, маркований список. Кожен елемент списку починається з тега <li>. Список закінчується закриваючим тегом </ ol> або </ ul>, наприклад список:
<UL>
<LI> Сергій Петренко</LI>
<LI> Ганна Сидоренко</LI>
<LI> Андрій Шевченко</LI>
<LI> Петрик П'яточкін</LI>
</ UL>
буде виглядати так:
- Сергій Петренко
- Ганна Сидоренко
- Андрій Шевченко
- Петрик П'яточкін
Практично всі HTML-документи містять посилання на інші HTML-сторінки та інтернет-ресурси. Посилання створюються за допомогою тега <a>, цей ярлик має атрибут href, значенням якого вказується адреса URL (Uniform Resource Locator, універсальний адресу ресурсів), наприклад:
<A HREF="http://www.edu.ltava.org/">Навчання для дорослих</ A>
Малюнки
Малюнки можна вставити до HTML-сторінки за допомогою тега <img>. Цей тег не має парного закриває тега, а також немає і тіла для відповідного йому елемента. В якості основного атрибута вказується URL малюнка що завантажений до хостингу. Крім того, можна задати розміри малюнка, при цьому він буде стиснутий (або розтягнутий) відповідно до зазначених розмірів. Можна вказати атрибути вирівнювання, альтернативний текст на той випадок, якщо малюнок не зможе бути завантажений браузером:
<IMG SRC="http://ltava.net/construkt.jpg" ALIGN="right" width="300" ALT="Чашка кави">
За матеріалами сайту src-code.net
Підручники, статті, довідники:
- http://htmlbook.ru/ - підручник та довідник з HTML
- http://html.manual.ru/ - довідник з HTML
- http://www.dikarka.ru/all_lessons.shtml - уроки для «домогосподарок»
- http://ab-w.net/ - самоучитель з побудови сайту
- http://wcode.ru/html/
- http://www.masterinweb.net/
- http://skillopedia.ru/ - відеопідручники
Немає коментарів:
Дописати коментар