Презентація Робота з html
Мова розмітки гіпертекстуHTML
Мова розмітки гіпертекстуHTML (Hypertext Markup Language — мова гіпертекстової розмітки) служить для опису Web-сторінки, що зберігається у виді звичайного текстового файлу з розширенням *.htm або *.html. Головна мета HTML — описати формат вмісту Web-сторінки, він описується з допомогою дескрипторів (tag) HTML. Мова HTML інтерпретується браузерами і відображається у вигляді документа у зручній для людини формі.HTML був розроблений британським вченим Тімом Бернерсом-Лі приблизно в 1986-1991 роках в стінах Європейського Центру ядерних досліджень в Женеві (Швейцарія).
Поняття тега . Поняття атрибутуДескриптори також часто називають «тегами».Те, як будуть виглядати елементи на вашій сторінці визначають мітки (англійською tags) або теги. Тег – основний елемент HTML, який виконує певну функцію.Тег починається знаком < , закінчується знаком > , між ними - ім'я тега. Без тегів не існує HTML документу.
Парні та непарні тегиЗа виглядом теги поділяються на парні і непарні.До парних тегів належать ті теги, які повторюються і двічі оточують ту частину, над якою виконується певна конкретна функція.ПрикладНепарні теги відрізняються тим, що вони не виділяють певну частину коду, над якою виконується функція тега. Функція тегу поширюється або на весь документ, або на конкретне місце документу.Зразок: <br> , <p> та ін.
АтрибутиБезліч дескрипторів HTML також приймають параметри, які називаються атрибутами. Атрибути використовуються для вказівки додаткової інформації Web-браузерові про те, як застосовувати цей дескриптор. Атрибути — це імена, яким через знак рівності (=) привласнюються визначені значення. Слово «атрибут» походить від лат. attributio - приписування. Приклад:Так, невід'ємними атрибутами держави є прапор, герб та гімн - це символи, що дають уявлення про сутність держави та цінності, яких воно дотримується.
Загальний вигляд інформаційної сторінки.Зверніть увагу на картинку: вона містить обов'язкові теги. Обов'язкові вони тому, що їх необхідно постійно прописувати для кожної сторінки.<html>Цей тег повинен відкривати документ, він парний</html> Далі виділяється дві частини : head(голова) та body(тіло).
HTML тегиОсновні теги<html> </html> - Вказує програмі перегляду сторінок що це HTML документ.<head> </head> - Визначає місце, де міститься різна інформація - заголовка. <body> </body> - Визначає основну частину документа.<title> </title> - Поміщає назву документа-зміст програми перегляду сторінок.
Атрибути тіла документа<body bgcolor = ?> - Встановлює колір фону документа, використовуючи значення кольору у вигляді RRGGBB – приклад: FF0000 - червоний колір.<body text = ?> - Встановлює колір тексту документа, використовуючи значення кольору у вигляді RRGGBB – приклад: 000000 - чорний колір.<body link = ?> - Встановлює колір гіперпосилань, використовуючи значення кольору у вигляді RRGGBB – приклад: 00FF00 - зелений колір.<body vlink = ?> - Встановлює колір гіперпосилань на яких ви вже побували, використовуючи значення кольору у вигляді RRGGBB - приклад: 800080 - фіолетовий колір.<body alink = ?> - Встановлює колір гіперпосилань при натисканні.Замість знаку ? – потрібно зробити підстановку (код кольору)
Теги для форматування текстуЗаголовки: <h1> Найбільший заголовок </h1> <h3> Середній заголовок </h3> <h6> Найменший заголовок </h6>
<b> </b> - Створює жирний текст.<i> </i> - Створює похилий текст.<u> </u>- Створює підкреслений текст.<tt> </tt> - Створює текст - стиль друкованої машинки.ТегиВигляд
<font> </font>face - назва шрифта ( Arial, Verdana, Georgia і т.п.),size - розмір тексту від 1 до 7,color - колір тексту( Red, RRGGBB, 000000 ).< font face =? > </font>< font size =? > </font> < font color =? > </font>
Списки<ol> </ol> - Створює нумерований список.start - задає перше число, з якого починається нумерація.type - задає стиль нумерації пунктів:"A" – великі літериA, B, C ..."a" – малі літери a, b, c ..."I" – великі римські цифри I, II, III ..."i" – маленькі римські цифри i, ii, iii ..."1" - арабські цифри 1, 2, 3<li> - Визначає кожен елемент списку і присвоює номер.
<ul> </ul> - Створює ненумерованний список.disc - зафарбований кружок,circle - незафарбований кружок,square - зафарбований квадратик.ТегиВигляд
Вирівнювання тексту< р align="left"> За лівим краєм< р align="center"> За центром< р align="right"> За правим краєм<p> - Створює новий параграф.<br> - Наступний за цим тегом текст буде у новому рядку.<blockquote> </blockquote> - Створює відступи з обох сторін тексту.
Графічні елементи<img src = ”name” > - Додає зображення в HTML документ.<img src = ”name” align = ? > - Вирівнює зображення до однієї з сторін документа, приймає значення: left, right, center; bottom, top, middle.<img src="4.gif" align="right"> <img src = ”name” border = ?> - Встановлює товщину рамки навколо зображення.<hr> - Додає в HTML документ горизонтальну лінію.<hr size = ?>- Встановлює висоту(товщину) лінії. <hr width = ?> - Встановлює ширину лінії.<hr color = ?> - Визначає лінії певний колір.
Гіперпосилання<a xhref = ”URL” > </a> - Створює гіперпосилання на інші документи або частина поточного документа.<a xhref = mailto:EMAIL > </a> - Створює гіперпосиланнявиклику поштової програми для написання листа.<a name = ”NAME”> </a> - Зазначає частину тексту як мета для гіперпосилань у документі.<a xhref = ”http://www.cyberguru.ru/#NAME”> </a> - Створює посилання на частину поточного документа. Приклад
Таблиці<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)<td nowrap> - Не дозволяє програмі перегляду робити переклад тексту у клітинці таблиці.
Кадри<frameset></frameset> - Передує тег <body> в документі, що містить кадри;<frameset rows=”value,value”> - Визначає рядок таблиці кадрів, висота яких визначена кол-вом пікселів або у відсотковому співвідношенні до висоти таблиці кадрів.<frameset cols=”value,value”> - Визначає стовпці в таблиці кадрів, ширина яких визначена кількістю пікселів або у відсотковому співвідношенні до ширини таблиці кадрів.<frame> - Визначає одиничний кадр або область в таблиці кадрів.<noframes></noframes> - Визначає, що буде показано у вікні браузера якщо він не підтримує кадри.Атрибути кадрів<frame xsrc=”URL”> - Визначає який з HTML документів буде показаний в кадрі.<frame name=”name”> - Вказує Ім'я кадру або області, що дозволяє передавати інформацію в цей документ.
Таблиця кольорів
Пуск → Все программы → Стандартные → Блокнот