Главная страница Случайная страница
КАТЕГОРИИ:
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Поняття про мову HTML. Основні теги і атрибути
|
|
Лекція №18
Поняття про мову HTML. Основні теги і атрибути. Огляд середовища редактора сайтів. Створення сайту за допомогою майстра. Створення веб-сайту вручну.
Поняття про мову HTML. Основні теги і атрибути
HTML (Hypertext Markup Language — Мова гіпертекстової розмітки) — це мова опису структури сторінок документів, яка дозволяє звичайний текст форматувати в абзаци, заголовки, списки та інші структури, створювати посилання на інші сторінки. Це текстова мова, в якій інструкції з форматування, що називаються тегами, вбудовані в розділи документа, які містять конкретну інформацію. Теги повідомляють броузерам, як форматувати і представляти інформацію на екрані.
Мова гіпертекстової розмітки HTML була запропонована Тімом Бернерсом-Лі у 1989 р. як один з компонентів технології розробки розподіленої гіпертекстової системи World Wide Web. Ідея гіпертекстової інформаційної системи полягає у тому, що користувач має можливість переглядати документи (сторінки тексту) у найбільш зручному для себе порядку, а не послідовно, як це прийнято при читанні книг. Досягається це шляхом створення спеціального механізму пов'язування різних сторінок тексту за допомогою гіпертекстових посилань.
Мова HTML дозволяє визначити структуру електронного документа з поліграфічним рівнем оформлення. Результуючий документ може містити різноманітні елементи: ілюстрації, аудіо- і відеофрагменти. Мова HTML включає розвинені засоби для визначення кількох рівнів заголовків, шрифтових виділень, різних груп об'єктів та багато інших можливостей.
Важливим чинником, який вплинув на існування мови HTML, став вибір основи для гіпертекстової бази даних звичайного текстового файла, який можна створювати у будь-якому текстовому редакторі на будь-якій апаратній платформі у середовищі будь-якої операційної системи.
Таким чином, гіпертекстова база даних у концепції WWW - це набір текстових файлів, розмічених мовою HTML, яка визначає форму представлення інформації (розмітка) і структуру зв'язків цих файлів (гіпертекстові посилання).
За основу моделі розмітки документів у HTML прийнята тегова модель. Тегова модель описує документ як сукупність контейнерів, кожен з яких починається і закінчується тегами. Тобто документ HTML є не чим іншим, як звичайним ASCII-файлом з доданими до нього керуючими HTML-кодами (тегами).
Теги HTML-документів в основному є простими і зрозумілими для використання, оскільки вони створені за допомогою загальновживаних слів англійської мови, зрозумілих скорочень і позначень.
HTML-тег складається з імені, за яким може слідувати необов'язковий список атрибутів тегу. Текст тегу вміщується у кутові дужки (< І>). Найпростіший варіант тегу - ім'я, вміщене у кутові дужки, наприклад, < HEAD>. Для більш складних тегів характерна наявність різних атрибутів, які можуть мати конкретні значення, визначені для видозмінення функцій тегу.
Атрибути тегу слідують за ім'ям і відділяються один від одного одним або кількома пропусками. Порядок запису атрибутів у тегу не має значення. Значення атрибута слідує за знаком рівняння, який стоїть після імені атрибута. Якщо значення атрибута - одне слово або число, його можна вказати безпосередньо після знаку рівняння, не виділяючи додатково. Решту значень необхідно вміщувати у одинарні або подвійні лапки, особливо якщо вони містять декілька розділених пропусками слів.
Найчастіше HTML-теги складаються з початкового і кінцевого компонентів, між якими розміщуються текст та інші елементи документа. Ім'я кінцевого тегу ідентичне імені початкового тегу, але перед ім'ям ставиться коса риска (/) (наприклад, для тегу заголовка < TITLE> закриваючою парою буде < /TITLE>). Кінцеві теги не містять атрибутів.
При використанні вкладених тегів їх слід закривати, починаючи,
з останнього і рухаючись до першого.
Деякі HTML-теги не мають кінцевого компонента, оскільки є автономними елементами. Наприклад, тег зображення < IMG>, призначений для вставки зображення у документ, не має кінцевого компонента.
| Основні теги |
| < html> < /html> - вказує програмі перегляду сторінок, що це HTML документ. < head> < /head> - визначає місце, де міститься різна інформація не відображається в тілі документа. Тут розташовується тег назви документа та теги для пошукових машин. < body> < /body> - визначає видиму частину документа |
| Теги змісту |
| < title> < /title> - поміщає назва документа до змісту програми перегляду сторінок |
| Атрибути тіла документа |
| < 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? https://www.cyberguru.ru/#NAME" title=" https://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" > Створює кнопку " Скасувати" |