Знаймо

Додати знання

приховати рекламу

Цей текст може містити помилки.

Елементи HTML


Перегляд цього шаблону

План:


Введення

Ця стаття присвячена в основному елементам HTML. Щоб дізнатися про формат елементів Вікіпедії, див Вікіпедія: Як редагувати статтю і m: Допомога: HTML в вікітексте


Елемент HTML - це основна структурна одиниця веб-сторінки, написана мовою HTML



1. Структура HTML-документа

HTML - це тегів мова розмітки документів, тобто будь-який документ на мові HTML являє собою набір елементів, причому початок і кінець кожного елемента позначається спеціальними позначками, званими тегами. Регістр, в якому набрано ім'я тега, в HTML значення не має. Елементи можуть бути порожніми, тобто не містять ніякого тексту та інших даних (наприклад, тег перекладу рядка
).
У цьому випадку зазвичай не вказується закриваючий тег. Крім того, елементи можуть мати атрибути, що визначають небудь їх властивості (наприклад, розмір шрифту для тега ). Атрибути вказуються у відкриваючому тезі. Ось приклад частині розмітки HTML-документа:

 <  p  >  Текст між двома тегами - відкриває і закриває.  <  /  p  >  <  a  href  =  "Http://www.example.com"  >  Тут елемент містить атрибут href.  <  /  a  >  А ось приклад порожнього елемента:  <  br  > 

Кожен HTML-документ, який відповідає специфікації HTML якої версії, зобов'язаний починатися з рядка декларації версії HTML , яка зазвичай виглядає приблизно так:

  

Якщо цей рядок не вказана, то домогтися коректного відображення документа в браузере стає важче.

Далі позначається початок і кінець документа тегами і відповідно. Усередині цих тегів повинні знаходитися теги заголовка ( ) і тіла ( ) документа.


1.1. Варіанти DOCTYPE для HTML 4.01

  • Строгий (Strict): не містить тегів, помічених як "застарілі" або "не схвалювані" (deprecated).
  
  • Перехідний (Transitional): містить застарілі теги в цілях сумісності і спрощення переходу зі старих версій HTML.
  
  • З фреймами (Frameset): аналогічний перехідному, але містить також теги для створення наборів фреймів.
  

1.2. DOCTYPE для HTML 5

На відміну від попередніх версій тег всього один [1]

  

2. Основні елементи (" теги ")

Теги та їх параметри нечутливі до регістра. Тобто і означають одне і те ж.

В останніх версіях HTML практично у кожного тега величезне число необов'язкових параметрів - зазвичай не менше 15. Ми наводимо тільки основні параметри тегів.

2.1. Гіперпосилання

Значення за умовчанням: _self.


2.2. Текстові блоки


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

  • - логічний наголос (зазвичай відображається курсивним шрифтом)
  • - посилене логічний наголос (зазвичай відображається жирним шрифтом)
  • - виділення тексту курсивом
  • - виділення тексту жирним шрифтом
  • - підкреслення тексту
  • (або ) - закреслення тексту
  • - збільшення шрифту
  • - зменшення шрифту
  • - миготливий текст. Увага! Цей тег не працює в браузері Internet Explorer версій 5 і нижче без застосування JavaScript
  • - зрушується по екрану текст.
  • - підрядковий текст. Наприклад, H 2O створить текст H 2 O.
  • - надрядковий текст. Наприклад, E = MC 2 створить текст E = mc 2.
  • параметры > - завдання параметрів шрифту. У цього тега є наступні параметри:
    • COLOR = color - завдання кольору. Колір може бути заданий в шістнадцятковій формі як # rrggbb (перші 2 шістнадцяткові цифри задають червону компоненту, наступні 2 - зелену, останні 2 - синю) або назвою.
    • FACE = шрифт завдання гарнітури шрифту
    • SIZE = розмір завдання розміру шрифту. Розмір від 1 до 7: стандартний за замовчуванням 3. Є багато способів змінити стандартний розмір.
    • SIZE = + зміна або SIZE = - зміна - зміна розміру шрифту від стандартного. Наприклад, +2 означає розмір на 2 більше стандартного.

Так, наприклад,

 Сигналом до початку атаки є  <  U  >  три  <  /  U  >  <  FONT  SIZE  =  "+2"  >  великих  <  /  FONT  >  <  FONT  COLOR  =  "Green"  >  зелених  <  /  FONT  >  свистка. 

створить текст

Сигналом до початку атаки є три великих зелених свистка.

2.4. Списки

 <  UL  >  <  LI  >  перший елемент  <  /  LI  >  <  LI  >  другий елемент  <  /  LI  >  <  LI  >  третій елемент  <  /  LI  >  <  /  UL  > 

створює список

  • перший елемент
  • другий елемент
  • третій елемент

Якщо замість

    ( Unordered List - Ненумерований список) поставити
      ( Ordered List - Нумерований список), список вийде нумерованим:

      1. перший елемент
      2. другий елемент
      3. третій елемент

      У цих тегів є параметри:

       type = "тип" 

      де тип - форма: у

        - символів

        • square - квадрат
        • round - коло
        • disk - коло: за замовчуванням

        а в

          - цифр або букв

          • A або а (латинськими літерами) - літерний список: відповідно заголовними або малими літерами
          • I чи i - римські цифри: відповідно заголовними або малими літерами
          • 1 - арабські цифри: за замовчуванням

          пишеться так:

           <  ol  type  =  "I"  >  <  li  >  Перше  <  /  li  >  <  li  >  Друге  <  /  li  >  <  li  >  І т.д.  <  /  li  >  <  /  ol  > 

          і створить наступне:

          1. Перше
          2. Друге
          3. І т.д.

          Параметр start = "початок" (тільки для

            ), що визначає початок нового відліку: наприклад, якщо потрібно не 1, 2, 3, а 24, 25, 26

            Пишеться так:

             <  ol  start  =  "24"  >  <  li  >  Двадцять чотири  <  /  li  >  <  li  >  Двадцять п'ять  <  /  li  >  <  li  >  І т.д.  <  /  li  > 

            і створить наступне:

            1. Двадцять чотири
            2. Двадцять п'ять
            3. І т.д.

            і, нарешті для тега

          1. параметр value = "наступний" - якщо необхідно перескочити з однієї цифри на іншу: наприклад, не 1, 2, 3, 4, а 1, 2, 22, 23

             <  ol  >  <  li  >  Один  <  /  li  >  <  li  >  Два  <  /  li  >  <  li  value  =  "22"  >  Двадцять два  <  /  li  >  <  li  >  Двадцять три  <  /  li  > 

            створить наступне:

            1. Один
            2. Два
            3. Двадцять два
            4. Двадцять три

            Нарешті, третім, і останнім, списком є список визначень:

             <  DL  >  <  DT  >  Кішка  <  /  DT  >  <  DD  >  нявкати домашня тварина  <  /  DD  >  <  DT  >  Кот  <  /  DT  >  <  DD  >  чоловік кішки  <  /  DD  >  <  DT  >  Крокодил  <  /  DT  >  <  DD  >  великий африканський звір із гострими зубами  <  /  DD  >  <  /  DL  > 

            створить наступне:

            Кішка
            нявкати домашня тварина
            Кот
            чоловік кішки
            Крокодил
            великий африканський звір із гострими зубами

            Між іншим, теги

          2. ,
            ,
            можна і не закривати.


            2.5. Об'єкти

            • EMBED - вставка різних об'єктів: не-HTML документів та media-файлів
            • APPLET - вставка Java-аплетів
            • SCRIPT - вставка скриптів.

            2.6. Зображення

            • IMG - вставка зображення. Цей тег не закривається.
              • SRC - ім'я або URL
              • ALT - альтернативне ім'я (відобразиться, якщо в браузері заборонити відображати картинки)
              • TITLE - короткий опис зображення (відобразиться при наведенні курсору на картинку)
              • WIDTH, HEIGHT - розміри (якщо не збігаються з істинними розмірами картинки, то зображення "розтягнеться" / "стиснеться")
              • ALIGN - задає параметри обтікання текстом (top, middle, bottom, left, right)
              • VSPACE, HSPACE - задають розміри вертикального і горизонтального простору навколо зображення

            Приклад:

             <  IMG  SRC  =  url  ALT  =  "Текст"  TITLE  =  "Текст"  WIDTH  =  "Розмір (пикс,%)"  HEIGHT  =  "Розмір (пикс,%)"  > 

            Зображення можна зробити посиланням:

             <  A  HREF  =  url> <  IMG  SRC  =  url> <  /  A  > 

            2.7. Таблиці

            • TABLE - створення таблиці. Параметри тега:
              • BORDER - товщина розділових ліній в таблиці
              • CELLSPACING - відстань між клітинами
            • CAPTION - заголовок таблиці (цей тег необов'язковий)
            • TR - рядок таблиці
            • TH - заголовок стовпця таблиці (цей тег необов'язковий)
            • TD - комірка таблиці
            • height - висота таблиці
            • width - ширина таблиці

            Так, наприклад,

             <  TABLE  BORDER  =  "1"  CELLSPACING  =  "0"  >  <  CAPTION  >  Улов крокодилів в Мумба-Юмбе  <  /  CAPTION  >  <  TH  >  Рік  <  /  TH  >  <  TH  >  Улов  <  /  TH  >  <  TR  >  <  TD  >  1997  <  /  TD  >  <  TD  >  214  <  /  TD  >  <  /  TR  >  <  TR  >  <  TD  >  1998  <  /  TD  >  <  TD  >  216  <  /  TD  >  <  /  TR  >  <  TR  >  <  TD  >  1999  <  /  TD  >  <  TD  >  207  <  /  TD  >  <  /  TR  >  <  /  TABLE  > 

            Створить таблицю:

            Улов крокодилів в Мумба-Юмбе
            Рік Улов
            1997 214
            1998 216
            1999 207

            У тега TABLE є ще параметр CELLPADDING. Він визначає відстань в пікселях між рамкою комірки і її вмістом. Наприклад, якщо замінити перший рядок таблиці на

             <  TABLE  BORDER  =  "1"  CELLSPACING  =  "0"  CELLPADDING  =  "5"  > 

            таблиця вийде такий:

            Улов крокодилів в Мумба-Юмбе
            Рік Улов
            1997 214
            1998 216
            1999 207

            Інший параметр тегів TABLE, TR, TH, TD - ALIGN. Він визначає вирівнювання. Можливі значення - center (по центру), left (по лівому краю), right (по правому краю).

            Параметр ALIGN в TD або TH визначає вирівнювання для вмісту всередині даної комірки, в TR - для вмісту всіх комірок рядки, TABLE - для самої таблиці на сторінці. Для кожної комірки береться вирівнювання з TD або TH, якщо воно не задано - з TR, якщо і воно не задано - по центру для TH або по лівому краю для TD.

            Наприклад, якщо замінити перші рядки таблиці на

             <  TABLE  BORDER  =  "1"  CELLSPACING  =  "0"  ALIGN  =  "Center"  >  <  CAPTION  >  Улов крокодилів в Мумба-Юмбе  <  /  CAPTION  >  <  TH  >  Рік  <  /  TH  >  <  TH  >  Улов  <  /  TH  >  <  TR  >  <  TD  >  1997  <  /  TD  >  <  TD  ALIGN  =  "CENTER"  >  214  <  /  TD  > 

            таблиця вийде такий:

            Улов крокодилів в Мумба-Юмбе
            Рік Улов
            1997 214
            1998 216
            1999 207

            Незакриті теги TD, TR і TH призводять до некоректного відображення, особливо при роботі з вкладеними таблицями.


            2.8. Форми

            Створення форм в HTML є досить складною справою. Тут наводяться лише назви основних тегів.

            • FORM - створення форми
            • INPUT - елемент введення (може мати різні функції - від введення тексту до відправки форми)
            • TEXTAREA - текстова область (багаторядкове поле для введення тексту)
            • SELECT - список (зазвичай у вигляді випадного меню)
            • OPTION - пункт списку

            2.9. Символи

            Щоб створити символ, необов'язково шукати його на клавіатурі. Можна просто набрати тег (наприклад, щоб отримати , треба набрати ¢). Пробіл -, наголос - і т. д.

            3. Назви квітів

            У HTML визначені наступні кольори.

            Назва Шістнадцятковий колір
            black # 000000
            silver # C0c0c0
            maroon # 800000
            red # Ff0000
            navy # 000080
            blue # 0000ff
            purple # 800080
            fuchsia # Ff00ff
            green # 008000
            lime # 00ff00
            olive # 808000
            yellow # Ffff00
            teal # 008080
            aqua # 00ffff
            gray # 808080
            white # Ffffff

            4. Основні символи

            Код Символ Сенс
            < <
            > >
            & &
            нерозривний пробіл (на цьому пробілі не перекладається рядок)
            копірайт (copyright)
            зареєстрований товарний знак (registered trademark)
            товарний знак (trademark)
            градуси
            " відкриваюча лапка в російській мові
            " закриваюча лапка в російській мові
            ... ... многоточие
            - - тире
            жирна крапка
            плюс-мінус
            - - мінус

            Клавіатурні символи 'і "в російській мові лапками не є. Також неправильно на сайтах замінювати №, , , , C на N, (c), (R), TM, C.

            Дефіс, тире і мінус - три різних знака.

            1. Клавіатурний символ - називається дефіс і використовується всередині слів.
            2. Мінус ширше дефіса. Він використовується для запису негативних чисел і операції віднімання.
            3. Тире ще ширше, ніж мінус. Воно використовується між словами і відбивається пробілами. Для позначення числових інтервалів теж використовується тире, але пробілами не відбивається.

            В електронному листуванні, чатах і форумах всі ці спрощення припустимі: можна заміняти тире і мінуси дефісами, знак номера на N, лапки тими, що є на клавіатурі і т. д.

            Символи <,> і & не можна відобразити в HTML звичайним чином, тому що вони мають спеціальний сенс.

            Більшість спецсимволів див. на сайті about.com.


Цей текст може містити помилки.

Схожі роботи | скачати

Схожі роботи:
HTML
Фрейм (HTML)
Кольори HTML
Canvas (HTML)
Редактор HTML
Кодування символів в HTML
g-елементи
f-елементи
d-елементи
© Усі права захищені
написати до нас
Рейтинг@Mail.ru