Html теги

Наберемо найпростіший код сторінки



Моя персональна сторінка


Всім привіт


Збережіть ваш файл і запустіть його через браузер, наприклад "Internet Explorer".
Зверніть увагу, що HTML сторінка містить як звичайний текст, так і команди розмітки (tags або теги), укладені в кутові дужки (<и>). Теги мови HTML задають правила, за якими браузер відображає документ на екрані.
Більшість тегів мови HTML, такі як , , та інші, вимагають відповідну команду з символом </.> для її закриття, то є тега кінця команди.</p> <p>Розглянемо теги нашого документа</p> <p>Даний тег використовується для відкриття HTML-документа. Кожна Web-сторінка починається тегом <HTML> і закінчується закриває тегом </HTML>. <br><HEAD></p> <p>Будь HTML-документ складається як мінімум з двох частин: заголовка і власне документа. Даний тег визначає заголовок Web-сторінки і повинен мати обов'язковий закриваючий тег </HEAD>. Також обов'язковим атрибутом цього тега є-ється тег <TITLE>. <br><TITLE></p> <p>Кожен HTML-документ має назву, укладену між тегами <TITLE> і . За назвою документа HTML браузери можуть знайти інформацію, тому місце для назви завжди визначено - воно знаходиться вгорі і окремо от вмісту HTML-документа. Показує назви в заголовку вікна броузера, тому на нього накладається обмеження: максимальна довжина назви - 40 символів.

Даний тег містить в собі безпосередньо документ. Також необхідний закриває тег .

атрибути тега


Вибір кольору можна проводити двома способами: завданням імені або визначенням номера кольору по колірній схемі RGB (Red, Green, Blue). Мова HTML, яка підтримує такі імена Квітів: AQUA, BLACK, BLUE, FUCHSIA, GRAY, GREEN, LIME, MAROON, NAVY, OLIVE, PURPLE, RED, SILVER, TEAL, WHITE, YELLOW. Номер кольору RGB задається трьома двозначними шестнадцатерічнимі числами, причому кожне число належить інтер-валу від 00 до FF і визначає інтенсивність відповідного кольору. Наприклад, номер кольору #FFOOOO відповідає червоному кольорі, так як має максимальну інтенсивність для червоного кольору, а зелений і блакитний є такими, рівні нулю. Соот-повідно, номер #OOFFOO кодує зелений колір, а номер #OOOOFF - синій. Білий колір утворюється в результаті насичений-ня всіх основних кольорів, тобто його кодом буде число #FFFFFF. У разі повної відсутності усіх трьох кольорів можна отримати абсолютно чорний колір (код # 000000). Очевидно, що, використовуючи таку комбінацію шістнадцятирічних чисел, можна отримати дуже велику кількість квітів. Для зручності, основні шістнадцять квітів, їх коди та назви приведені в таблиці. Основні кольори і їх коди Колір Код RGB Ім'я Колір Код RGB Ім'я чорний # 000000 black срібний # СОСОСО silver темно-бордовий # 800000 maroon червоний #FFOOOO red зелений # 008000 green вапно #OOFFOO lime оливковий # 808000 olive жовтий #FFFFOO yellow темно-синій # 000080 navy синій #OOOOFF blue фіолетовий # 800080 purple фуксія #FFOOFF fuchsia чирок # 008080 teal аква #OOFFFF aqva сірий # 808080 gray білий #FFFFFF white

Тепер спробуємо застосувати наші нові знання на практиці. Додамо в нашу сторінку атрибутів тега і посилання на сторінку в інтернеті. Змінимо код сторінки:


Моя домашня сторінка


Опис таблиць в HTML-документах здійснюється за допомогою контейнера

.
. Таблиця задається двома контейнерами тегів:
. - опис рядка таблиці і
. - опис елементу таблиці.
За замовчуванням текст всередині таблиці вирівнюється по лівому краю, а ширина стовпця таблиці визначається найдовшим елементом в цьому стовпці.
Розглянемо приклад найпростішої таблиці:


Таблиця















Тема Таблиці.

Перша осередок першого рядка.

Друга осередок першого рядка.

Перша осередок другого рядка.

Друга осередок другого рядка.



Ширина таблиці задається атрибутом width = "." Для тега , а значення ширини таблиці може здаватися в пікселях або у відсотках від ширини екрану. Вміст кожного осередку можливо вирівняно за допомогою атрибутів align = "." (Горизонтальне положення) і valign = "." (Вертикальне положення) для тегів або
.
Атрибут valign = "." Може набувати таких значень: top - притиснути вгору, bottom - притиснути вниз і middle - розмістити по центру, а атрибут align = «." Набуває таких значень: left - притиснути вліво, right - притиснути вправо і center - розмістити по центру.
Атрибути cellpadding = "." І cellspacing = "." Визначають, відповідно, відстань в пікселях між закордонах осередки і її змістом, в тому числі між осередками.
Допускається додавати до таблиці, до рядка або колонки заголовок. тег
, який розташовується після тега , задає заголовок до таблиці, центрований за замовчуванням щодо таблиці. За допомогою атрибутів align = "." Або valign = "." Заголовок можна розмістити вгорі (top) або внизу (bottom) і в лівому (left) або правом (right) кутку таблиці. Завдання заголовка для рядка чи стовпця таблиці здійснюється за допомогою тега або
після тегів
відповідно.
Атрибут border = "." Тега малює рамку навколо таблиці і кожного осередку, при цьому ширина рамки задається в пікселях. Слід мати на увазі, що атрибути colspan = "." І rowspan = "." Тегів дозволяють об'єднувати осередки таблиці в групи, навколо яких малюється рамка.
і












приклад таблиці


Дві комірки, об'єднані по горизонталі

Дві комірки, об'єднані по вертикалі

no лівому краю


no правому краю

Вставка графічних зображень

alt = "дівчина твоєї мрії">

У мові HTML є спеціальний тег, який вказує браузеру на те, що в даному місці тексту (там, де знаходиться цей тег) повинен починатись новий абзац. Цей тег про * значущих наступним чином:

.


створення абзаців


Це перший абзац. Він дуже маленька, але все ж
деяка інформація в ньому відображена.

А це другий.


Якщо ви хочете розташувати в документ кілька порожніх рядків в доці * мент необхідно використовувати тег
, оскільки броузер ігнорує всі наступні теги <Р>, розташовані поспіль і знаходяться після першого. Для тегів абзацу закривають теги

не є обов'язковими, оскільки тег, який вказує на початок нового абзацу, одночасно вказує на кінці попереднього.


Заголовки позначають початку розділів документа. У мові HTML визначено 6 рівнів заголовків: від H1 до Н6. Текст, оточений тегами <Н1>. , виходить більшим - це основний заголовок. Якщо текст оточений тегами <Н2>. , то він вигля * дит трохи менше (підзаголовок); текст всередині <НЗ>. ще менше і так далі до <Н6>. .

створення заголовків



Тема другого рівня


Тема третього рівня


Тема четвертого рівня


Тема п'ятого рівня

Найменший заголовок



Для вирівнювання тексту в документі використовується атрибут align, який дозволяє вирівняти текст по лівому або правому краю і по центру.
align = "left" - Вирівнювання по лівому краю.
align = "right" - Вирівнювання по правому краю.
align = "center" - Вирівнювання по центру.

Крім того, для центрування тексту або графіки можна використовувати тег

, який цін * Трір будь-які об'єкти.
вирівнювання тексту


Цей текст вирівняний по лівому краю

Цей текст вирівняний праворуч.

Цей текст вирівняний по центру.





Текст також центрирован, проте в даному
випадку був використаний тег центрування



Для виділення тексту в HTML - документах можуть використовувати різні стилі шрифтів. За допомогою контейнера <В>. можна встановити жирний шрифт, теги , встановлює похилий шрифт, контейнер . задає підкреслене написання символів, а теги . - шрифт фіксованої ширини.
Допускається також використання у тексті верхніх і нижніх індексів відповідно за допомогою контейнерів . і . . Результатом форматування буде зменшений і зрушений вгору або вниз текст. контейнер тегів . перекреслює текст горизонтальною лінією. контейнер тегів . дозволяє вивести текст шрифтом більшого розміру. контейнер тегів . дає змогу вивести текст шрифтом меншого розміру.

Форматування тексту в HTML


Це напівжирний шрифт тексту.
Це курсив.
Моноширинний шрифт, або, як його ще називають,
телетайп.
Горіеонтальная лінія виходить при використанні тега



Допускається також використання в тексті вepxнux
і нижніх індексів відповідно.

Цей текст перекреслений горизонтальною лінією.
Цей текст надрукований шрифтом більшого розміру.
Цей текст виведений меншого розміру.
А цей текст підкреслений.

Тег попереднього форматування


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

.
. Ув'язнений в ці теги текст буде відображатися в браузері точно так же, як він був записаний в вихідному коді Web-сторінки.

Приклад використання тега попереднього<br>форматування


Нижче буде наведено вихідний код на мові
Java, призначений для створення
найпростішого фреймового вікна

// Приклад ілюструє використання 
// пакету AWT для створення найпростішого
// фреймового вікна
import Java.awt. *;
public class window 
public static void main (String [] args)
<
Frame myWindow = new Frame ( "Вікно");
myWindow.setSize (400,200);
myWindow.show ();
>
>


Щоб вибрати розмір шрифту


Мова гіпертекстової розмітки дозволяє задавати розміри шрифту, яким буде відображатися текст документа. За замовчуванням розмір шрифту дорівнює 3, однак, використовуючи тег з атрибутом size = ".", його можна перевизначити Використовуються як відносні розміри шрифтів, так і абсолютні.


Зміна розміру шрифта.


Paзмер шрифту дорівнює 7.



Paзмер шрифту дорівнює 6.



Paзмер шрифту дорівнює 5.



Paзмер шрифту дорівнює 4.



Paзмер шрифту дорівнює 3.



Paзмер шрифту дорівнює 2.



Paзмер шрифту дорівнює 1.



Крім абсолютних значень розмірів шрифту в HTML можна використовувати і відносні розміри. Якщо в тезі встановити параметр size рівним якого-небудь числа, то броузер буде використовувати вказаний розмір як базовий. За замовчуванням базовий розмір дорівнює трьом. Щодо цього базового розміру можна вказувати розмір шрифту тексту, який укладено в контейнері тегів . Для цього досить привласнити атрибуту size одне з наступних значень:
+1. +7 - збільшення шрифту на вказану кількість одиниць щодо базового розміру;
-1. -7 - зменшення шрифту на вказану кількість одиниць щодо базового розміру.



Зміна відносного розміру шрифту


Звичайний текст. Його абсолютний розмір дорівнює 3.



Установка базового розміру 5.


Збільшення до абсолютного розміру, рівного 12.



Зменшення до абсолютного розміру, рівного 3.



тег призначений для опису вихідних параметрів шрифту Web-сторінки. Його дія поширюється до наступного тега цього типу. Він має наступні атрибути:
face = "." - задає ім'я шрифту або кілька можливих шрифтів, які броузер використовує для відображення тексту. Оскільки шрифт береться з набору встановлених на комп'ютері клієнта шрифтів, рекомендується перераховувати, через кому, кілька близьких по зображенню гарнітур, так як немає ніякої гарантії, що обраний шрифт буде присутній на комп'ютері користувача. В іншому випадку броузер вибере встановлений за замовчуванням шрифт і, можливо, текст буде відображатися не так, як хотілося.
size = "." - задає розмір шрифту від 1 до 7. Базовий розмір шрифту дорівнює 3. Шрифти можуть бути задані щодо базового +1, -1, +2, -2. ; +7, -7.
color = "." - задає колір шрифту. Слід зазначити, що всі розглянуті атрибути притаманні і тегу .

Ну ось і все, вище були наведені основні поняття для того, що-б створити просту сторінку.
center

Останнє оновлення 12.03.12 12:05