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

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

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

Ваш ip адрес:54.80.169.119

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

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

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

 

Post_53aПривет всем на zura – blog. сегодня речь пойдет о еще одном елементе который используют в html, ето индентификаторы элементов, к ним относятся “id”, “class”, “div”, “span”, “adress”

Характеристика по этим элементам, а также примеры как добавляются индентификаторы к html-страницам, как применять эти элементы, все ето можно прочитать в сегоднешней публикации.

Для каких целей индетификаторы могут быть использованы. Применяют когда необходимо выделить среди других, какой-то из элементов.

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

С помощью атрибута “id” указывается имя элемента, которое используют в сценариях и таблициях стилей. Атрибутом “id” элемента назначают уникальный индетификатор.

Атрибут id играет в HTML следующие роли.

целевого показателя для гипертекстовой ссылки

селектор C сс

имя объекта, явившегося элементом 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” может быть использован для предсатвлення контактной информации о документе или часть документа. Этот элемент появляется чаще всего в начале или в конце документа и содержит имя автора документа, адрес его электронной почты и т.п. Браузеры отображают его курсивом шрифтом.

<адрес> Автор Стецьо Бухий <br> 
Электронная почта: <a href="malito:stetso9@mail.ru"> stetso9@mail.ru </a> </ адрес>
                               000 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *