Шукати в цьому блозі

Мова розмітки HTML

Зміст
  • Структура гіпертексту
  • Формат веб-сторінки
  • Частини тексту
  • Формат тексту
  • Гіперпосилання
  • Мітки на веб-сторінці
  • Таблиці простої структури
  • Таблиці складної структури (з об’єднаними комірками)
  • Списки
  • Графічні зображення на веб-сторінці
  • Графічні зображення таблицею
Структура гіпертексту
<html>
<head>
<title>Назва сторінки</title>   - Назва сторінки відображається у заголовку вікна
</head>
<body>
Зміст сторінки                       - Те, що буде відображатися безпосередньо на сторінці
</body>
</html>
Формат веб-сторінки

<body [text=колір] [bgcolor=колір] [background=шлях/файл] [bgproperties="fixed"]>

Квадратні дужки вказують на те, що відповідний параметр необов’язковий.

TEXT - колір за умовчанням для тексту на веб-сторінці. Цей параметр дозволяє одразу для всього тексту на веб-сторінці поміняти колір (детальніше про колір)

BGCOLOR - колір фону (детальніше про колір)

BACKGROUND - фоновий малюнок (шпалери веб-сторінки). Значенням цього параметра є файл, в якому зберігається потрібне зображення. 
Примітка щодо адреси/назви файла:
Якщо потрібний файл знаходиться не в одній теці з файлом веб-сторінки, то разом з назвою файла необхідно зазначати шлях до нього. 
Повну назву файла потрібно розпочинати з file:/// (якщо файл знаходиться на комп’ютері), або з http:// (якщо файл береться з Інтернету). 

BGPROPERTIES="FIXED" - робить фонове зображення нерухомим. Якщо зміст сторінки вертикально більший за висоту вікна, то без цього параметра фонове зображення буде рухатись разом із вмістом, з цим параметром фонове зображення залишатиметься на місці.

Приклад:
<body background=file:///d:/images/fon.jpg>                         - фоновий малюнок з файла на комп’ютері
<body background=http://nv.org/les.jpg" bgproperties="fixed"> - малюнок з Інтернету, при цьому він із вмістом не переміщується
<body bgcolor=lightgreen>                                                  - сторінка має фоновий колір світлозелений (без малюнку)

<h№ [align=left/center/right/justify]>Текст заголовку</h№>    - Заголовок заданого рівня

№ - число від 1 по 6. Вказує на номер рівня заголовку. Заголовок 1 рівня (<h1>) вважається найголовніший. Рівні 2,3,...,6 - підзаголовки з відповідним підпорядкуванням вищому собі рівню.

ALIGN - вирівнювання заголовку (тексту та ін. об’єкта) в рядку (по горизонталі). Допускаються наступні значення: 
  • LEFT - по лівій стороні; 
  • CENTER - по центру; 
  • RIGHT - по правій стороні; 
  • JUSTIFY - за шириною (текст вирівнюється з лівого і правого боків шляхом розтягування проміжків між словами).
<p align=...>Текст абзацу    - Організація одного абзацу

ALIGN - вирівнювання абзацу (детальніше)

<br> - продовжити абзац з наступного рядка. Ставиться в абзаці перед словом, яке повинне продовжувати абзац з наступного рядка.

<hr [color=колір] [size=тобщина]>     - Розділова лінія

COLOR - колір лінії. Колір можна вказувати англійською мовою (наприклад: red, green, lightgreen тощо), або його кодом.

Формат коду кольору: #RRGGBB

Кожна літера в коді, це цифра шістнадцятирічної системи числення (0, 1, 2, 3,..., 9, A, B, C, E, F). Нуль означає, що відповідний колір відсутній. Далі зростання значення кольору відповідає зростанню насиченості цього кольору.

Відповідність пар літер у коді до кольорів:
RR - червоний колір.
GG - зелений колір.
BB - синій колір.

Наприклад: #000000 - чорний, #ffffff - білий, #ff0000 - червоний, №663300 - коричневий.

SIZE - товщина лінії в пікселах. Задається товщина числом, починаючи від 1. Наприклад: size=1, size=10 тощо.

Приклад:
<hr color=#005500 size=1> - тонка розділова лінія темно-зеленого кольору.
<hr>                               - тонка розділова лінія сірого кольору.

Формат тексту

<font [color=колір] [size=розмір] [face=шрифт]>текст</font>   - Шрифт тексту (колір, розмір, шрифт)

COLOR - колір символів (детальніше про колір)

SIZE - розмір символів. Це число в межах від 1 по 7. Якщо розмір задати більшим за 7, то це впливати на символи не буде (вони залишаться на рівні розміру 7).

FACE - шрифт тексту. Приклади шрифтів: Arial, "Times New Roman", "Bookman Old Style" тощо). Якщо назва шрифта складається з декількох слів, то застосовуються лапки.

Накреслення шрифту:

<b> текст </b>      - напівжирний
<i> текст </i>        - курсив (нахилений)
<u> текст </u>      - підкреслений
Гіперпосилання

<a href=адреса/файл [target=_blank]>текст/зображення</a>     - гіперпосилання на веб-сторінку, або файл іншого формату.

HREF - адреса веб-сторінки (файла) в Інтернеті, або повна назва файла, що зберігається на комп’ютері (детальніше про назву файла).

TARGET=_BLANK   - відкрити веб-сторінку (файл) в новій вкладці (новому вікні) браузера.
Мітки на веб-сторінці

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

<a name=ім’я мітки></a>текст, або інший об’єкт веб-сторінки - створення мітки. Цей тег ставиться перед об’єктом, до якого потрібно організувати перехід.

<a href=#ім’я мітки>текст/зображення</a>   -  посилання на мітку, створену на даній веб-сторінці.

<a href=адреса#мітка>текст/зображення</a>  - посилання на мітку на іншій веб-сторінці. Значенням параметра є url-адреса веб-сторінки після якої одразу ставиться знак # і ім’я мітки.

Приклад: <a href=http://nvk.ua/tytul.html#m1>Історія закладу</a>  - посилання на мітку m1 на сторінці http://nvk.ua/tytul.html. Відкриється ця сторінка і одразу відбувається перехід на зазначену мітку.
Таблиці простої структури


Структура організації простої таблиці:

<table width=ширина border=товщина>         - початок організації таблиці
<tr [align=горизонтальне вирівнювання] [valign=вертикальне вирівнювання] [bgcolor=колір]>   -   вставка рядка
<td [align=горизонтальне вирівнювання] [valign=вертикальне вирівнювання] [bgcolor=колір]>  - вставка комірки у поточний рядок
<td ...> - вставка  наступної комірки у поточний рядок
...
<tr ...>
<td ...>
...
</table>

WIDTH - ширина таблиці. Якщо ширину таблиці потрібно задати у пікселах, то задається тільки числове значення (допускається використання закінчення px). При цьому ширина таблиці при зміні ширини вікна змінюватись не буде. Якщо потрібно зробити ширину таблиці гнучкою відносно ширини вікна, то значення ширини таблиці потрібно задавати у відсотках (наприклад 50%, 100% тощо).

BORDER - товщина зовнішньої лінії таблиці. Варіанти значень параметра:
    0 - внутрішні і зовнішні лінії таблиці не відображаються;
    1 - внутрішні і зовнішні лінії таблиці тонкі;
    від 2 - внутрішні лінії тонкі, зовнішні - відповідної товщини.


VALIGN - вирівнювання тексту (зображення та ін. об’єкта) по вертикалі (в даному випадку, відносно висоти комірки). Можливі значення:
    BOTTOM - вирівнювання по нижній межі комірки;
    TOP - по верхній межі;
    MIDDLE - по середині комірки.

BGCOLOR - колір фону комірки. Якщо цей параметр у тегу <TR>, то заданим кольором зафарбовуються усі комірки цього рядка, крім тих, що містять свій параметр BGCOLOR. Колір фону вказується англійською мовою (red, blue, lightblue тощо), або формулою #ччззсс (детальніше про колір)
Таблиці складної структури (з об’єднаними комірками)
Таблиця складної структури передбачає об’єднання комірок в одну велику. При цьому, якщо об’єднано комірки в межах стовпця (комірка 1 на мал.), то належить вона рядку, в якому починається (комірка 1 на малюнку належить першому рядку). Для об’єднання комірок використовуються параметри ROWSPAN (об’єднання комірок у стовпчику) та COLSPAN (об’єднання комірок у рядку). Наприклад, для комірки 1 (див. мал.) використано параметр ROSPAN=2, для комірки 2 - параметр COLSPAN=3.
Приклад організації складної таблиці (до таблиці на малюнку):
<table width=100% border=1>
<tr aligncenter>
  <td rowspan=2 valign=middle>1
  <td colspan=3>2
<tr>
  <td>текст
  <td>текст
  <td>текст
<tr>
  <td>текст
  <td>текст
  <td>текст
  <td>текст
</table>
ROWSPAN - вказує, скільки рядків буде займати комірка, включаючи поточний рядок.
COLSPAN - вказує, скільки стовпців буде займати комірка.
Списки

У таблиці показано, як мовою HTML організовується кожен з типів списків. 

 Нумерований    Маркований  Багаторівневий
  1. Понеділок
  2. Вівторок
  3. Середа
  4. Четвер
  5. П’ятниця
  • Понеділок
  • Вівторок
  • Середа
  • Четвер
  • П’ятниця
  • Понеділок
    1. Фізика
    2. Нім.мова
    3. Геометрія
    4. Біологія
    5. Інформатика
  • Вівторок
    1. Математика
    2. Укр.мова
    3. Географія
    4. Англ.мова
    5. Фізкультура
  • Середа
  • Четвер
  • П’ятниця
 <ol>
  <li>Понеділок
  <li>Вівторок
  <li>Середа
  <li>Четвер
  <li>П’ятниця
</ol>
<ul>
  <li>Понеділок
  <li>Вівторок
  <li>Середа
  <li>Четвер
  <li>П’ятниця

</ul>  
<ul>
  <li>Понеділок
    <ol>
        <li>Фізика
        <li>Нім.мова
        <li>Геометрія
        <li>Біологія
        <li>Інформатика
    </ol>
  <li>Вівторок
    <ol>
        <li>Математика
        <li>Укр.мова
        <li>Географія
        <li>Англ.мова
        <li>Фізкультура
    </ol>
  <li>Середа
  <li>Четвер
  <li>П’ятниця

</ul>  

Графічні зображення на веб-сторінці

<img src=адреса/файл [width=ширина] [height=висота] [border=рамка] [align=розташування відносно тексту]>

SRC - графічний файл з потрібним зображенням (детальніше про назву файла).

WIDTH/HEIGHT - ширина/висота зображення. Задається в пікселях або у відсотках (разом з числом використовується знак "%"). Відсотки вказують розмір зображення відносно розміру вікна, наприклад: 100% - на ширину/висоту вікна, 50% - на половину ширини/висоти вікна. При цьому, під час зміни розмірів вікна, розміри зображення теж будуть змінюватися. Якщо ширина/висота зображення вказана у пікселях, то вона не змінюється при зміні розмірів вікна.

BORDER - визначає, чи буде рамка у зображення, коли воно буде у ролі гіперпосилання (див. про гіперпосилання). При значенні цього параметра "0" зображення-гіперпосилання буде без рамки, інакше - з рамкою.

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


Мал. Значення параметру ALIGN



Графічні зображення таблицею

Для розташування зображень матрицею (див. мал.) можна використовувати таблицю. У кожну комірку таблиці замість тексту вставляється малюнок тегом <img>.

Приклад:

<table width=100% border=0>         - ширина таблиці, наприклад, на всю ширину вікна, ліній таблиці - невидимі.

<tr align=center valign=middle>        - в усіх комірках поточного рядка зображення розташовуються в центрі комірки.
<td><img src=шлях/файл width=ширина у пікселях>     - може бути необхідним зменшувати розмір малюнка. Саме для цього використовується параметр width.
<td><img src=шлях/файл width=ширина у пікселях>  
<td><img src=шлях/файл width=ширина у пікселях>  

<tr align=center valign=middle>     
<td><img src=шлях/файл width=ширина у пікселях>    
<td><img src=шлях/файл width=ширина у пікселях>  
<td><img src=шлях/файл width=ширина у пікселях>  

</table>

Зображення матрицею
Мал. Розташування зображень матрицею

Підписатися на: Дописи (Atom)