Ukr:Довідка:HTML

Translate: - English (no prefix) - Türkçe - українська мова 

HTML – це мова розмітки для веб-сторінок. Вся складність відображення забезпечується текстовою розміткою і внесеними сторонніми елементами, такими як зображення. Певна розмітка HTML, здебільшого пов'язана із форматуванням, може бути використана безпосередньо як вікірозмітка. З іншого боку, окремі теги вікірозмітки (як-от <nowiki>) нагадують розмітку HTML, але не є такою насправді. Кожен тег HTML створює "елемент".

Базовий синтаксис

Загальний принцип розмітки HTML такий:

<tagname attribute="value">вміст</tagname>

<                                         tagname                           attribute="value"                                  >                    вміст                          </tagname>
^                                                ^                                   ^                                         ^                    ^                               ^
стартовий тег (без пропуску між < та tagname)        атрибути, розділювані пропуском          знак = та лапки важливі  кінець стартового тега  може бути HTML, текст чи вікірозмітка  закрий тег, повторивши його назву з косою рискою перед нею (тут атрибути неприпустимі)

<br/>
   ^
   окремі теги закриваються прямо у стартовому тегу, кінцевий не потрібен

Теги

Застосовувати як частину вікірозмітки дозволено не всі теги HTML. Ось набір дозволених:

• div – створює розділ сторінки
• span – придатний для форматування тексту певним стилем
• ul – невпорядкований список (краще застосовувати вікірозмітку *)
• ol – впорядкований список (краще застосовувати вікірозмітку #)
• li – елемент списку (має бути всередині тегу <ul> чи <ol>
• pre – створює попередньо форматований блок тексту
• code – стиль комп'ютерного коду
• b – напівжирний (краще застосовувати вікірозмітку ''')
• i – курсив (краще застосовувати вікірозмітку '')
• u – підкреслений
• s – закреслений
• sup – верхній індекс
• sub – нижній індекс
• p – абзац
• abbr – скорочення
• center – відцентровує текст

Ось кілька заборонених тегів HTML:

• a – додає посилання (тільки вікірозмітка)
• img – додає зображення (тільки вікірозмітка)
• script – запускає JavaScript
• style – додає лист форматів CSS до сторінки
• object – додає об'єкт Flash (анімація, відео)
• canvas – малює на сторінці за допомогою JavaScript

Звісно, стандарт HTML містить значно більше тегів.

Класи та ідентифікатори

Кожен елемент HTML може належати до певних "класів" та бути позначеним "ідентифікатором" ID. Ці дані належать до атрибутів; класи вказуються в такий спосіб: class="розділений пропусками перелік назв класів", а ідентифікатор так: id="мій_унікальний_ID". Зазвичай класи описуються в CSS і застосовуються власне на сторінці та в JavaScript.

CSS

Головна стаття: Довідка:CSS

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

Синатксис

Типові властивості в CSS задаються так:

height: 100px;

height         :                                       100px                                         ;
^              ^                                       ^                                             ^
назва параметру двокрапка розділює назву та значення   значення в цьому прикладі є числом з одиницею виміру  розділювач параметрів – крапка з комою

Параметри

Параметри (англ. properties) CSS, які можна застосовувати у вікі:

• height: 100px – визначає висоту блочного елемента
• width: 50% – визначає ширину блочного елемента
• color: #577f2a – визначає колір тексту
• font-size: 1em – визначає розмір шрифта
• border: 1px solid black – визначає межу блочного елемента, тут:
  • 1px – ширина межі (окремим параметром так: border-width: 1px)
  • solid – тип межі (окремим параметром так: border-style: solid)
    • Допустимі типи: solid, dashed, none, dotted
  • black – колір межі (окремим параметром так: border-color: black)
• padding: 5px – відступи (внутрішні) блочного елемента
• margin: 5px – поля (зовнішні) блочного елемента
• border-radius: 5px – скруглені кути
• border-top-left-radius – один скруглений кут, лівий верхній

Звісно, стандарт CSS визначає значно більше параметрів.

Переміщення

Блочні елементи можна переміщувати по сторінці відображення у бажану позицію. Це досягається встановленням параметру float: left/right, звідси англомовна назва floating.

Інший спосіб позиціонування називається відносним (англ. relative positioning). За замовчуванням, кожен елемент позиціонується "статично", тобто отримує власний простір відповідно до вільної позиції у відображенні, свого розміру, відступів та полів. Але його можна примусово посунути.

<div style="position: relative; top: 50px; border: 1px dashed green"></div>

Цей код посуне вміст тегу <div> на 50 пікселів вище його природної позиції. Негативне значення -50 посуне його на 50 пікселів нижче.

Параметр position: relative задає для браузера відносне позиціонування елемента. Разом із цим значеням можуть використовуватися такі: top, bottom, left, чи right. Ті, що не протирічать одне одному, можна змішувати.

Слід звернути увагу на те, що відносне позицонування одного елемента не змінює автоматично природних позицій усіх інших елементів.

Блочні та інлайн елементи

Вище згадувалося про "блочні" чи "інлайн" (від англ. "в рядку") елементи.

"Блочнмй" елемент отримує власний рядок і область для відображення. Це, зокрема, div, p, ul.

Елемент "інлайн" не отримує власного простору на сторінці відображення і застосовується прямо на місці у просторі батьківського елемента. Це, зокрема, b, span, code.

Детальнішим пояснення можна знайти у відповдній статті.

Застосування <div>

Тег <div> застосовується частіше за все для створення блочного елемента відповідного стилю. Найяскравішу демонстрація цього можна бачити, приміром, на сторінці вмісту.

Параметри CSS можуть надавати блоку <div> певних висоти, ширини, розташування та навіть фонового зображення. Це краще розбирати на конкретних прикладах.

Дивись також

• Ukr:Довідка:CSS – каскадні таблиці стилів

Для тих, хто хоче дізнатися більше про можливості HTML і CSS, рекомендовано Mozilla Developer Network (MDN) - англійською:

• HTML
• CSS