Навчальний посібник з розмітки сторінки в HTML для чайників

Цей текст містить інформацію про тему, як можна розмічати сторінку за допомогою HTML. Тут ви не знайдете жодної підказки про мови ВЕБ-програмування, а лише навчитеся азам HTML. Текст містить основні поняття, які можуть стати в нагоді, основні елементарні теги та атрибути, використання елементів style та деякі інші корисні фішки.

html не є мовою програмування, вона призначена для розмітки текстових документів

- не просто тег, це контейнер - тег, який може містити в собі інші теги (і текст). Така черговість закривають тегів правильна: .

Загальний вигляд документа:

→Цей тег повинен відкривати документ→Цей тег відкриває голову документа: блок, в якому міститься вся службова інформація

→Цей тег відкриває тіло документа

Весь текст коду

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

Ну а тепер перейдемо до деяких окремих випадків використання тегів

♠ За допомогою атрибутаalign=". "також можна центрувати або вирівнювати текст по краях документа.

без будь-якого змісту (інших тегів чи тексту) можуть ігноруватися броузерами.

Є альтернативний тег

Найкраще використовувати тег

: центр, left, right, justify

Параграф не може містити в собі інших параграфів, а також тег

може містити в собі параграфи

♠Заголовкивводяться тегом і можуть набувати значення 1..6, залежно від важливості заголовка. Відповідно, 1 - найголовніший, 6 - найслабший.

Текст заголовка

♠Для спільної роботидля зміни параметрів тексту використовується тегТекстЙого основні атрибути:

face - завдання типу (одного або відразу кількох через кому) шрифту: Times, Times New Roman, Arial, Helvetica, Courier, Verdana, Tahoma, Cosmic Sans, Garamond.

size – зміна розміру тексту від -6 до +6.

color - зміна кольору шрифту (номер кольору дивитись у таблиці/"палітрі" стандартних кольорів інтернету таблиці/"палітрі" стандартних кольорів інтернету

♠ За допомогою тегаможна зробити текстнапівжирним.

♠ Тегдозволяє писатикурсивом.

♠ Тегробить текстмоноширинним.

Моноширинний шрифт - це шрифт із символами однакової фіксованої ширини, як шрифт у машинки, що пише.

♠Підкресленийтекст задається тегом.

♠Перекресленийтекст може задаватися двома тегами:і, на вибір.

♠ Тегпредставляєтьсявеликим шрифтом, амалим шрифтом щодо основного тексту.

♠ Теги і - визначаютьверхній та нижній регістривідповідно.

♠ Зображення можна вставити в текст.

Основні атрибути тега:

align - вирівнювання самої картинки щодо документа.

alt - спливаюча підпис для картинки.

border - кадр зображення.

height/width - висота/ширина картинки.

hspace/wspace - вертикальне/горизонтальне поле, що відокремлює текст від зображення.

Атрибут- задає не просто розташування самої картинки на сторінці, а й обтікання її текстом. Це означає, що якщо, наприклад, заданий параметр left, то картинка буде вирівняна по лівому краю, а текст розташується праворуч від неї.

Можливо використовувати картку як посилання. (Про застосування посилань дивитись нижче)

♠ Посилання може вести до іншого HTML-документа, будь-якого файлу або будь-якої внутрішньої частини документа (прикладом до останнього варіанту служить "зміст" на цій сторінці).

Посилання задається тегомПосилання

Зауваження:

Для визначення кольору тексту посилання в тезі необхідно задати три атрибути:

link="#. " - колір основного посилання.

alink="#. " - колір активного посилання.

vlink="#. " - колір вже відвіданого посилання.

Посилання на вашу пошту прописується трохи інакше (і тільки так):

де:

?subject - Тема письма

&Body - Текст вашого повідомлення

Щоб зробити картинку як посилання, потрібно замість тексту посилання задати вашу картинку, тобто:

Те саме застосовується і для завдання посилання на пошту.

Щоб зробити посилання всередині документа (подібно до змісту), можна скористатися атрибутом name="#ім'я" тега.

♠ Загальний вигляд коду таблиці 2*2:

тексттекст

Атрибути для всієї таблиці:

background=". " - встановлює картинку як фон таблиці.

bgcolor=". " - встановлює колір тла.

border=". " - ширина кордону.

bordercolor=". " - колір кордону.

cellpadding=". " - внутрішні поля комірки.

cellspacing=". " - Відстань між осередками.

height=". " - Висота таблиці.

w – ширина таблиці.

Атрибути для стовпців:

background=". " - встановлює картинку як тло стовпця.

bgcolor=". " - встановлює колір тла.

bordercolor=". " - колір кордону.

colspan=". " - розтягує стовпець на три стовпці.

rowspan=". " - розтягує стовпець на три рядки.

valign=". " - вертикальне вирівнювання внутрішнього вмісту стовпця.

height=". " - Висота стовпця.

w – ширина стовпця.

Допускається додавання вкладених таблиць.

♠ Сторінка буде краще виглядати, якщо її вміст буде розведений лініями-розділювачами. Тег для лінії:Атрибути для ліній:

align="." - положення лінії на сторінці.

w – ширина лінії.

size=". " - Товщина лінії.

NoShade=". " - скасування об'ємності.

color=". " - колір лінії.

♠Неупорядковані спискизадаються тегом, де в якості параметра задається тип значка одного пункту списку: коло, коло або ромб. Самі окремі пункти списку задаються тегом.

♠Упорядкові спискизадаються тегом , де в якості параметра задається тип значка одного пункту списку: цифри арабські та римські великі та малі та великі та малі літери. Особливі пункти списку задаються так само, як і під час неупорядкового списку.

♠ Атрибут style - це атрибут, за допомогою якого можна задавати практично будь-які параметри для практично будь-якого елемента сторінки, тому при мінімальному знанні англійської мови або принаявності під рукою словничка, який освоїв цей атрибут людині не складе ніяких труднощів зробити сторінку саме такою, як їй завгодно. Не думаю, що варто говорити, що освоїти цю корисну річ для кодера просто необхідно. Отже. як задати цей атрибут, покажемо наприкладі:

style="border-bottom-width:5px; border-left-width:0px; border-top-width:0px; border-right-width:0px;; border-bottom-style:inset; border-bottom -color:#660000;"Кожен параметр задається через точку з комою, всі параметри полягають у лапки. Ось, власне, і все. Залишилося тільки вивчити напам'ять таблицю параметрів, і все =)