Поточний час:
Сьогодні 21 листопада, вівторокк 2017 рік
Стрічка RSS

Введіть ваш Е-mail:

Zura-Blog 2 роки 11 місяців 2 дня

Ваш ip адрес:54.198.210.67

Доброї ночі!
Ви обновили сторінку в 4 : 38
Статистика

Кількість публікацій на блозі: 367
Кількість коментарів на блозі: 102
Кількість категорій на блозі: 17
Кількість міток на блозі: 28

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

 

Post_53aПривіт сьогодні мова піде про індентифікатори елементів, до них відносяться “id”, “class”, “div”, “span”, “adress”

Характеристикe по цим елементам, а також  приклади як додаютья індентифікатори до html-сторінки, як застосовувати ці елементи, можна прочитати нижче.

Для яких цілей індетифікатори можуть бути використані. Застосовують коли необхідно виділити серед інших якийсь з елементів.

Характеристика атрибутів id, class

З допомогою атрибуту  “id” вказується імя елемента, яке використовують в сценаріях і таблиціях стилей. Атрибутом  “id” елементу назначають унікальний індетифікатор.

Атрибут id відіграє в HTML наступні ролі.

цільового показника для гіпертекстового посилання

селектора сss

імя обєкта, обявленого елементом OBJECT (елемент OBJECT забезпечує включення в документ різних обєктів)

властивість посилання на визначений елемент сценарію

використовується для загальної обробки користувачем (наприклад для визначення полів в випадку, коли дані з документа HTML видобуваються в базу даних, переносячи документи HTML в другі формати.)

З допомогою атрибута “сlass”  можна задавати різні правила форматування для одного елемнта визначеного типу або всіх елементів документу.

Синтаксис <елемент class= “значення”>

 

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 //EN» «http://www.w3.org/TR/html4/strict.dtd»>

<html>

<head>

<meta http–equiv= "Content–Type" content= "text/html; сharset=utf-8">
<title>Атибут class</title>
<style type="text/css">
p.note{font-size:small}
</style>
</head>
<body>
<p class="note">Текст</p>
</body>
</html>

Атрибут  “сlass”  вказує, що елемент який належить до даного конкретного класу.

Одне і теж саме імя класа може бути звязано з любою кількістю елементів, в той же час з допомогою атрибута “сlass” можна визначити декілька правил форматування для одного елемента. Імена класів повинні бути обовязково розділені пробілами.

Майже кожному HTML–елементу може бути назначена інформація типу “id”  або типу “class”. Наприклад ми сворюємо документ про мову програмування.

Документ буде включати в себе цілий ряд прикладів, маючих визначений формат. Ми використовуємо елемент PRE для того, щоб відформатувати ці приклади. Також ми присвоїмо фоновий (жовтий) колір всім обєктам елемента PRE які належать класу “example”

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Атрибут class</title>
<style type="text/css">
PRE.EXAMPLE{background:yellow}
</style>
</head>
<body>
<pre class="EXAMPLE" id="example_1">
<!--Тут приклад коду-->
Наприклад
<address>Автор Стецьо Бухий<br>
E-mail: <a href="malito:stetso9@mail.ru">stetso9@mail.ru</a></address>
'Kometa
CLS
SCREEN 9
RANDOMIZE TIMER
'Xvist kometu
FOR n = 5 TO 100
x = INT(RND(50) * 320)
y = INT(RND(50) * 175)
c = INT(RND(1) * 16)
LINE (300, 200)-(x, y), c
'Yadro
CIRCLE (300, 200), 10, 1: PAINT (300, 200), 1
NEXT n

'Zoriane nebo
FOR m = 1 TO 1500
i = INT(RND(1) * 641)
e = INT(RND(1) * 351)
PSET (i, e), 15
NEXT m

'misiatz
CIRCLE (500, 70), 50, 14, 4.71, 1.57
CIRCLE (500, 70), 50 * 3 / 4, 14, 4.71, 1.57, 2
PAINT (530, 70), 15, 14

x = 300: y = 270
dx = 1
1 : PSET (x, y), 14
PSET (x, y), 0
IF x = 0 OR x = 640 THEN
dx = -dx
x = x + dx
x = x + dx
END IF
GOTO 1

END

</body>
</html>

qbasic

⇑ Приклад.  Код мова програмування Qbasic

Додаючи атрибут “id” цьому прикладу, ми можимо створити гіперпосилання на нього і переписати інформацію CSS цього класу для даного випадку.

Приклад як додавати “Якорні посилання” використовуючи атрибут “id” можна прочитати в публікації  “Все про посилання в HTML”

Характеристика елементів div,  span, і ADDRESS

Елементи “div”  і “span”  разом з атрибутами “id” і “class”  пропонують загальний механізм для конкретизації структури документів. Ці елементи визначають вміст лінійно (span) або на рівні блоків (div) но не навязують вмісту другі стандарти. Тому автори використовують їх разом з таблицями CSS, атрибутом lang і т.д. для реалізації потреб і переваг з допомогою мови HTML.

Іншими словами елемент “span” призначений для виділення частини інформації в середині других тегів і примінення до частини свого стилю. На відміну від “span” елемент “div” вважається блочним елементом і призначений для виділення фрагменту документа з ціллю зміни виду вмісту.

Наприклад потрібно створити HTML– документ оснований на базі даних з інформацією яка належить нашим клієнтам. Так як документ HTML  не включає в себе елементи, які  індетифікують обєкт, такі як:

“кліент” “номер телефону”  “адресу електронної почти” і т.д

ми використовуємо “DIV” і “SPAN” для досягнення бажаних ефектів. Ми можем також використати елемент “table”  для структурування інформації.  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ПРИКЛАД ВИКОРИСТАННЯ ЕЛЕМЕНТІВ SPAN DIV</title>
<style type="text/css">
#client_boyera{
	width:350px;
	background:yellow;
}
#client_Petrov{
	width:350px;
	background:red;
}
.client_title{
	background:silver;<br>
}
</style>
</head>
<body>
<div id="client_boyera">
<p><span class="client_title">Інформація клієнта</span>
<table>
<tr><td>Фамілія</td><td>Сідоров</td></tr>
<tr><td>Імя</td><td>Сидор</td></tr>
<tr><td>Тел</td><td>222 444 55</td></tr>
<tr><td>email</td><td>sidor@mail.ua</td></tr>
</table>
<div id="client_Petrov">
<p><span class="client_title">Інформація клієнта</span>
<table>
<tr><td>Фамілія</td><td>Петров</td></tr>
<tr><td>Імя</td><td>Петр</td></tr>
<tr><td>Тел</td><td>222 444 55</td></tr>
<tr><td>email</td><td>petr@mail.ua<</td>/tr>
</table>
</div>
</body>
</html>

Priclad-3

⇑Приклад ( інформацієя яка належжить клієнтам)

Елемент “ADDRESS” може бути використаний для предсатвлення контактної інформації про документ чи частину документу. Цей елемент появляється частіше всього на початку або в кінці документа і містить імя автора документа, адресу його електронної почти і т.п. Браузери відображають його курсивним шрифтом.    

<address>Автор Стецьо Бухий<br>
E-mail: <a href="malito:stetso9@mail.ru">stetso9@mail.ru</a></address>
                               000 

 

Leave a Reply

Your email address will not be published. Required fields are marked *