Embed Size (px)
Citation preview
Основні теги мови HTMLОсновні теги мови HTML
Роботу виконалаСтудентка групи ОБФі-14-2
Блищик Лариса
Роботу виконалаСтудентка групи ОБФі-14-2
Блищик Лариса
HTML• HTML (англ. HyperText Markup Language — Мова
розмітки гіпертекстових документів) —стандартна мова розмітки веб-сторінок в Інтернеті. Більшість веб-сторінок створюються за допомогою мови HTML.
• Теги – службові символи, що являють собою команди HTML, які вказує броузеру, як слід відображати Web-сторінку.
• Теги починаються зі знака <, за яким потрібно писати ключове слово, і закінчується знаком > .Наприклад теги можуть виглядати так:<HTML><BODY>.
Основні теги• <html></html> - вказує програмі перегляду
сторінок, що це HTML документ.
• <head></head> - визначає місце, де міститься різна інформація не відображається в тілі документа. Тут розташовується тег назви документа та теги для пошукових машин.
• <body></body> - визначає видиму частину документа
• <title></title> - поміщає назва документа до змісту програми перегляду сторінок
Приклад загальної структури HTML-документу:
Атрибути тіла документа• <body bgcolor=?> - встановлює колір фону документа,
використовуючи значення кольору у вигляді RRGGBB - приклад: FF0000 - червоний колір.
• <body text=?> - встановлює колір тексту документа, використовуючи значення кольору у вигляді RRGGBB - приклад: 000000 - чорний колір.
• <body link=?> - встановлює колір гіперпосилань, використовуючи значення кольору у вигляді RRGGBB - приклад: 00FF00 - зелений колір.
• <body vlink=?> - встановлює колір гіперпосилань на яких ви вже побували, використовуючи значення кольору у вигляді RRGGBB - приклад: 333333 - сірий колір.
• <body alink=?> - встановлює колір гіперпосилань при натисканні.
Теги для форматування тексту• <pre></pre> - обрамляє попередньо відформатований текст.
• <h1></h1> - створює НАЙБІЛЬШИЙ заголовок
• <h6></h6> - створює найменший заголовок
• <b></b> - створює жірий текст
• <i></i> - створює похилий текст
• <tt></tt> - створює текст - імітує стиль друкованої машінкі.Використовується для цитат, звичайно похилий текст.
• <em></em>- використовується для виділення з тексту слова (похилий або жирний текст)
• <strong></strong> - використовується для виділення найбільш вижних частин тексту (похилий або жирний текст)
• <font size=?>< font> - встановлює розмір тексту в межах від 1 до 7.
• <font color=?></ font> - встановлює колір тексту, використовуючи значення кольору у вигляді RRGGBB.
Приклад
Гіперпосилання• <a xhref="URL"></a> - створює гіперпосилання на
інші документи або частину поточного документа.
• <a xhref="mailto:EMAIL"></a> - створює гіперпосилання виклику поштової програми для написання листа автору документа.
• <a name="NAME"></a> - зазначає частина тексту як мета для гіпперссилок в документі.
• <a xhref="/go?http://www.cyberguru.ru/#NAME" title="http://www.cyberguru.ru/#NAME"></a> - створює гіперпосилання на частину поточного документа.
Приклад
Форматування• <p> - створює новий параграф
• <p align=?> - вирівнює параграф щодо однієї з сторін документа, значення: left, right, або center
• <br> - вставляє переклад рядка.
• <blockquote></blockquote> - створює відступи з обох сторін тексту.
• <dl></dl> - створює список визначень.
• <dt> - визначає кожен з термінів списку
• <dd> - описує кожне визначення
• <ol></ol> - створює нумерований список
• <li> - визначає кожен елемент списку і присвоює номер
• <ul></ul> - створює ненумерований список
• <div align=?> - важливий тег використовується для форматування великих блоків тексту HTML документа, також використовується в таблицях стилів.
Графічні елементи• <img xsrc="name"> - додає зображення в HTML документ
• <img xsrc="name" align=?> - вирівнює зображення до однієї зі сторін документа, приймає значення: left, right, center; bottom, top, middle
• <img xsrc="name" border=?> - встановлює товщину рамки навколо зображення
• <hr> - додає в HTML документ горизонтальну лінію.
• <hr size=?>- Встановлює висоту (товщину) лінії
• <hr width=?> - встановлює ширину лінії, можна вказати ширину в пікселах або відсотках.
• <hr noshade> - створює лінію без тіні.
• <hr color=?> - визначає певний колір лінії. Значення RRGGBB.
Таблиці• <table></ table> - створює
таблицю.
• <tr></ tr> - визначає рядок у таблиці.
• <td></ td> - визначає окрему клітинку в таблиці.
• <th></th> - визначає заголовок таблиці.
Приклад
Атрибути таблиць• <table border=#> - задає товщину рамки таблиці.
• <table cellspacing=#> - Задає відстань між осередками таблиці.
• <table cellpadding=#> - Задає відстань між вмістом комірки і її рамкою.
• <table width=#> - встановлює ширину таблиці в пікселах або відсотках від ширини документа.
• <tr align=?> або <td align=?> - задає вирівнювання клітинок у таблиці, приймає значення: left, center, або right.
• <tr valign=?> або <td valign=?> - встановлює вертикальне вирівнювання для елементів таблиці, приймає значення: top, middle, або bottom.
• <td colspan=#> - вказує кількість стовпців яку об'єднано в одній клітинці. (За замовчуванням = 1)
• <td rowspan=#> - вказує кількість рядків яку об'єднано в одній клітинці. (За замовчуванням = 1)
Приклад
Кадри• <frameset></frameset> - випереджає тег <body> в
документі, що містить кадри;
• <frameset rows="value,value"> - визначає рядка в таблиці кадрів, висота яких визначена кількістю пікселів або у відсотковому співвідношенні до висоти таблиці кадрів.
• <frameset cols="value,value"> - визначає стовпці в таблиці кадрів, ширина яких визначена кількістю пікселів або у відсотковому співвідношенні до ширини таблиці кадрів.
• <frame> - визначає одиничний кадр чи область в таблиці кадрів.
• <noframes></noframes> - визначає, що буде показано у вікні браузера якщо він не підтримує кадри.
Атрибути кадрів• <frame xsrc="URL"> - визначає який з HTML документів
буде показаний в кадрі.
• <frame name="name"> - вказує Ім'я кадру або області, що дозволяє перенаправляти інформацію в цей кадр чи область з інших кадрів.
• <frame marginwidth=#> - визначає величину відступів по лівому і правому краях кадру; повинно дорівнювати або бути більшим за 1.
• <frame marginheight=#> - визначає величину відступів по верхньому і нижньому краях кадру; повинно дорівнювати або бути більшим за 1.
• <frame scrolling=VALUE> - вказує чи буде виводиться лінійка прокрутки в кадрі; значення value може бути "yes," "no," або "auto". Значення за замовчуванням для звичайних документів - auto.
• <frame noresize> - перешкоджає зміні розмірів кадру.
Форми
• Для форм, що виконують якісь функції повинні бути запущені
відповідні CGI скрипти на сервері. HTML лише створює зовнішній інтерфейс форми.
• <form></form> - створює форми
• <select multiple name="NAME" size=?></select> - створює скролівне меню. Size встановлює кількість пунктів меню, яке буде показано на екрані, інші будуть доступні при використанні прокручування.
• <option> - вказує кожен окремий елемент меню
• <select name="NAME"></select> - створює спадаюче меню.
• <textarea name="NAME" cols=40 rows=8> - створює вікно для введення тексту. Columns вказує ширину вікна; rows вказує його висоту.
• <input type="checkbox" name="NAME"> - Створює checkbox. За тегом слід текст.
• <input type="radio" name="NAME" value="x"> - Створює radio кнопку. За тегом слід текст.
• <input type=text name="foo" size=20> - Створює рядок для введення тексту. Параметром Size вказується довжина в символах.
• <input type="submit" value="NAME"> - Створює кнопку "Прийняти" .
• <input type="image" border=0 name="NAME" xsrc="name.gif"> - Створює кнопку "Прийняти" - для цього використовується зображення.
• <input type="reset"> Створює кнопку "Скасувати".
