HTML هنر ساختن صفحات HTML به صورت پويا است.

DHTML ترکیب تکنولوژی های استفاده شده برای ساخت صفحات پویا و بلادرنگ کردن وب سایت ها است.

بسیاری از مردم DHTML را به عنوان وسیله ای برای ترکیب HTML و مجموعه تعاریف و Java Script می شناسند.

چه چیزهایی شما باید پیش از این بدانید؟

قبل از اینکه ادامه بدهید باید موارد اساسی زیر را بدانید :

HTML

Java Script

DHTML یک استاندارد وب جهانی نیست.

DHTML خلاصه شده ی Dynamic HTML است.

DHTML یک استاندارد تعریف شده با سازمان جهان پهناور وب ( W3C ) نیست. DHTML یک اصطلاح تجاری است که از Netscape و Microsoft گرفته شده است و برای شرح دادن تکنولوژی های جدید استفاده می شود. مرورگرهای نسل 4.x نیز آن را پشتیبانی می کند.

DHTML ترکیب تکنولوژی های استفاده شده برای ساخت وب سایت های پویا است.

بسیاری از مردم DHTML را به عنوان وسیله ای برای ترکیب HTML 4.0 و مجموعه تعاریف و Java Script می شناسند.

تکنولوژی های DHTML

یک توسعه دهنده وب با DHTML می تواند نحوه نمایش و موقعیت اجزاء HTML را در یک صفحه مرورگر کنترل نماید.

HTML 4.0

با HTML 4.0 می توان قالب بندی های اسناد HTML را داخل یک الگو مجزا تغییر داد. ما می توانیم صفحه آرایی را بدون دخالت در محتوای اسناد انجام دهیم زیرا HTML 4.0 اسناد جداگانه آن ساختار را نمایش می دهد.

روش آبشاری کردن صفحات ( CSS )

با استفاده از CSS یک روش و مدل صفحه آرایی برای اسناد HTML داریم.

با وجود CSS مشکل طراحی وب رفع شد زیرا به برنامه نویس اجازه می داد شیوه و صفحه آرایی همه صفحات وب را یکباره کنترل کند. به عنوان یک برنامه نویس وب شما می توانید یک شکل ظاهری برای هر جزء HTML تعریف کنید و آن را در تعداد زیادی از صفحات وب که می خواهید استفاده کنید. برای ایجاد یک تغییر عمومی به سادگی می توان شکل ظاهری و همه اجزایی که در صفحات وب هستند را به طور خودکار به روز رسانی کرد.

مدل سازی شئ سند The Document Object Model (DOM)

DOM خلاصه شده ی Document Object Model است.

HTML DOM سند ساخت شئ برای HTML است.

HTML DOM یک مجموعه استاندارد از اشیاء برای HTML و روش های استاندارد برای دست یابی و به کاربردن شئ های HTML تعریف می کند.

JavaScript

به شما اجازه ی نوشتن کد برای کنترل همه عناصر HTML را می دهد.

تکنولوژی های DHTML در Netscape 4.x و Internet Explorer 4.x

Netscape 4.x

Cross-Browser DHTML

Internet Explorer 4.x

JSS (JavaScript Style Sheets)

به شما اجازه می دهد تا کنترل کنید چگونه عناصر مختلف HTML نمایش داده شوند.

Layers (لایه ها)

به شما اجازه می دهد تا موقعیت و قابلیت دید عناصر را کنترل کنید.

CSS1
CSS2

به شما اجازه می دهد تا کنترل کنید چگونه عناصر مختلف HTML نمایش داده شوند.

CSS Positioning ( CSS موقعیت)

به شما اجازه می دهد تا موقعیت و قابلیت دید عناصر را کنترل کنید.

JavaScript
Visual Filters
به شما اجازه می دهد تا از جلوه های ظاهری برای متن ها و گرافیک ها استفاده کنید.
Dynamic CSS

به شما اجازه می دهد تا موقعیت و قابلیت دید عناصر را کنترل کنید.

نکته: مشکلی که با کد گذاری در تکنولوژی های DHTML به وجود خواهد آمد این است که تا زمانیکه مرورگر ایجاد شده نتواند ویژگی های مخصوص آن را پشتیبانی کند ممکن است یک صفحه وب در یک مرورگر، بزرگ و موحش به نظر برسد.

CSS برای ظاهر عناصر HTML استفاده می شود.

مثال ها:

<html>

<head>

<style>

h1.ex1

{

position:relative;

left:20px;

}

h1.ex2

{

position:relative;

left:-20px;

}

</style>

</head>

<body>

<h1>Normal Heading</h1>

<h1 class="ex1">Heading +20</h1>

<h1 class="ex2">Heading -20</h1>

<p>

<html>

<head>

<style>

h1.ex1

{

position:relative;

left:20px;

}

h1.ex2

{

position:relative;

left:-20px;

}

</style>

</head>

<body>

<h1>Normal Heading</h1>

<h1 class="ex1">Heading +20</h1>

<h1 class="ex2">Heading -20</h1>

<p>

موقعیت نسبی یک عنصر حرکت داده شده به مکان اولیه آن بستگی دارد.

</p>

<p>

"left:20" adds 20 pixels to the element's LEFT position.

</p>

<p>

"left:-20" subtracts 20 pixels from the element's LEFT position.

</p>

</body>

</html>

</p>

<p>

"left:20" adds 20 pixels to the element's LEFT position.

</p>

<p>

"left:-20" subtracts 20 pixels from the element's LEFT position.

</p>

</body>

</html>

موقعیت یک عنصر نسبت به موقعیت معمولی آن چگونه است.

<html>

<head>

<style>

h1

{

position:relative;

left:40px;

}

</style>

</head>

<body>

<h1>Heading A</h1>

<p>This is a paragraph.</p>

<h1>Heading B</h1>

<p>This is a paragraph.</p>

<h1>Heading C</h1>

<p>This is a paragraph.</p>

<h1>Heading D</h1>

<p>This is a paragraph.</p>

</body>

</html>

<html>

<head>

<style>

{

position:relative;

left:40px;

}

</style>

</head>

<body>

<h1>Heading A</h1>

<p>This is a paragraph.</p>

<h1>Heading B</h1>

<p>This is a paragraph.</p>

<h1>Heading C</h1>

<p>This is a paragraph.</p>

<h1>Heading D</h1>

<p>This is a paragraph.</p>

</body>

</html>

مکان همه عنوان ها نسبت به مکان معمولیشان چگونه است.

<html>

<head>

<style>

h1.x

{

position:absolute;

left:100px;

top:150px;

}

</style>

</head>

<body>

<h1 class="x">This is a heading</h1>

<p>With absolute positioning, an element can be placed anywhere on a page.</p>

<p>The LEFT position of the heading is 100 pixels from the left of the page.

The TOP position is 150 pixels from the top of the page.</p>

</body>

</html>

<html>

<head>

<style>

h1.x

{

position:absolute;

left:100px;

top:150px;

}

</style>

</head>

<body>

<h1 class="x">This is a heading</h1>

<p>With absolute positioning, an element can be placed anywhere on a page.</p>

<p>The LEFT position of the heading is 100 pixels from the left of the page.

The TOP position is 150 pixels from the top of the page.</p>

</body>

</html>

مکان یک جزء کاربردی یک مقدار مطلق است.

کدام ویژگی را با CSS-P می توان به کار برد؟

اول، عنصر باید موقعیت مشخصه را تعیین کند ( مطلق یا نسبی )

سپس ما می توانیم از مجموعه مشخصه های زیر استفاده کنیم:

LEFT : عنصر به سمت چپ برده می شود.

TOP : عنصر به بالا برده می شود.

Visibility : مشخص می کند که یک عنصر باید نمایش داده شود یا مخفی شود.

Z-index : مجموعه ای از عناصر را مرتب می کند.

Clip : قسمتی از عنصر را می چیند.

Overflow : محتویات لبریز شده را اداره می کند.

Position

خصوصیت Position، ازCSS به شما اجازه می دهد تا محل یک عنصر در یک سند کنترل کنید.

Position:relative

خصوصیت Position:relative موقعیت یک عنصر نسبت به موقعیت جاری را مشخص می کند.

مثال زیر مکان عنصر را به 10 پیکسل به سمت راست از مکان معمولی تقسیم می کند :

div

{

position:relative;

left:10;

}

position:absolute

خصوصیت position:absolute موقعیت یک عنصر از حاشیه های پنجره را مشخص می کند.

مثال زیر مکان عنصر را به 10 پیکسل به سمت راست از حاشیه چپ آن تقسیم می کند :

div

{

position:absolute;

left:10;

}

Visibility

خصوصیت Visibility مشخص می کند که یک عنصر فعال شود یا نشود.
visibility:visible

خصوصیت visibility:visible عنصر را فعال می سازد.

{

visibility:visible;

}

visibility:hidden

خصوصیت visibility:hidden عنصر را غیر فعال می سازد.

{

visibility:hidden;

}

Z-index

از خصوصیت Z-index برای قرار دادن یک عنصر پشت عنصر دیگر استفاده می شود به طور پیش فرض Z-index صفر است. شماره بالاتر اولویت بیشتری دارد. -1: Z-index پایین ترین اولویت را دارد.

{

z-index:1;

}

{

z-index:2;

}

Filters

خصوصیت Filter به شما اجازه می دهد تا جلوه های بیشتری را برای متن و تصویرتان اضافه کنید.

{

width:100%;

filter:glow;

}

نکته: اگر شما می خواهید از خصوصیت فیلتر استفاده کنید همیشه باید عرض عنصر را مشخص کنید.

می توانید خروجی تولید شده مثال بالا را تست کنید.

فیلتر های مختلف

Property	Argument	Description	Example
alpha	opacity finishopacity style startx starty finishx finishy	به شما اجازه می دهد تا شفافیت عناصر را تعیین کنید.	filter:alpha(opacity=20, finishopacity=100, style=1, startx=0, starty=0, finishx=140, finishy=270)
blur	add direction strength	عنصر را مات می کند.	filter:blur(add=true, direction=90, strength=6);
chroma	color	رنگ تعیین شده را شفاف می کند.	filter:chroma(color=#ff0000)
fliph	none	عناصر را افقی می کند	filter:fliph;
flipv	none	عناصر را عمودی می کند.	filter:flipv;
glow	color strength	عنصر را درخشان می سازد.	filter:glow(color=#ff0000, strength=5);
gray	none	عنصر را به صورت سیاه و سفید تحویل می دهد.	filter:gray;
invert	none	رنگ ها و مقادیر درخشندگی را معکوس می کند.	filter:invert;
mask	color	عنصر را با رنگ تعیین شده پس زمینه و رنگ روشنایی پیش زمینه تحویل می دهد.	filter:mask(color=#ff0000);
shadow	color direction	عنصر را با یک سایه ارائه می دهد.	filter:shadow(color=#ff0000, direction=90);
dropshadow	color offx offy positive	عنصر را با یک سایه کم تحویل می دهد.	filter:dropshadow(color=#ff0000, offx=5, offy=5, positive=true);
wave	add freq lightstrength phase strength	عنصر را شبیه موج می کند.	filter:wave(add=true, freq=1, lightstrength=3, phase=0, strength=5)
xray	none	عنصر را سیاه و سفید می کند همچنین رنگها و مقادیر درخشندگی را بر عکس می کند.	filter:xray;

Background

خصوصیت Background به شما اجازه می دهد تا پس زمینه دلخواهتان را انتخاب کنید.
background-attachment:scroll

پس زمینه پایه صفحات را همراه با نوار لغزنده دارا است.

background-attachment:fixed

در این حالت اگر پایه صفحات نوار لغزنده باشد باز هم حرکت نمی کند.

مثال های بیشتر

<html>

<head>

<style>

h1.one

{

visibility:visible;

}

h1.two

{

visibility:hidden;

}

</style>

</head>

<body>

<h1 class="one">Heading one</h1>

<h1 class="two">Heading two</h1>

<p>Where is heading two?</p>

</body>

</html>

<html>

<head>

<style>

h1.one

{

visibility:visible;

}

h1.two

{

visibility:hidden;

}

</style>

</head>

<body>

<h1 class="one">Heading one</h1>

<h1 class="two">Heading two</h1>

<p>Where is heading two?</p>

</body>

</html>

چگونه می توانید یک عنصر را نا مرئی کنید؟ آیا می خواهید عنصر نمایش داده شود یا نه؟

<html>

<head>

<style>

img.x

{

position:absolute;

left:0px;

top:0px;

z-index:-1;

}

</style>

</head>

<body>

<h1>This is a Heading</h1>

<img class="x" src="/bulbon.gif" width="100" height="180"> 

<p>Default z-index is 0. Z-index -1 has lower priority.</p>

</body>

</html>

<html>

<head>

<style>

img.x

{

position:absolute;

left:0px;

top:0px;

z-index:-1;

}

</style>

</head>

<body>

<h1>This is a Heading</h1>

<p>Default z-index is 0. Z-index -1 has lower priority.</p>

</body>

</html>

از Z-index برای قرار دادن یک عنصر پشت عنصر دیگر می توان استفاده کرد، کار Z-index برحسب اولویت است که عناصر را بررسی می کند تا ببیند کدام عنصر اولویت Z-index اش تغییر کرده است.

<html>

<head>

<style>

img.x {

position:absolute;

left:0px;

top:0px;

z-index:1;

}

</style>

</head>

<body>

<h1>This is a Heading</h1>

<img class="x" src="/bulbon.gif" width="100" height="180"> 

<p>Default z-index is 0. Z-index 1 has higher priority.</p>

</body>

</html>

<html>

<head>

<style>

img.x {

position:absolute;

left:0px;

top:0px;

z-index:1;

}

</style>

</head>

<body>

<h1>This is a Heading</h1>

<p>Default z-index is 0. Z-index 1 has higher priority.</p>

</body>

</html>

نوع نمایشگر موس را با css تغییر دهید.

<html>

<body>

<p>Move the mouse over the words to see the cursor change</p> 

<span style="cursor: auto">Auto</span><br />

<span style="cursor: crosshair">Crosshair</span><br />

<span style="cursor: default">Default</span><br />

<span style="cursor: pointer">Pointer</span><br />

<span style="cursor: hand">Hand</span><br />

<span style="cursor: move">Move</span><br />

<span style="cursor: e-resize">e-resize</span><br />

<span style="cursor: ne-resize">ne-resize</span><br />

<span style="cursor: nw-resize">nw-resize</span><br />

<span style="cursor: n-resize">n-resize</span><br />

<span style="cursor: se-resize">se-resize</span><br />

<span style="cursor: sw-resize">sw-resize</span><br />

<span style="cursor: s-resize">s-resize</span><br />

<span style="cursor: w-resize">w-resize</span><br />

<span style="cursor: text">text</span><br />

<span style="cursor: wait">wait</span><br />

<span style="cursor: help">help</span><br />

</body>

</html>

<html>

<body>

<p>Move the mouse over the words to see the cursor change</p>

<span style="cursor: crosshair">Crosshair</span><br />

<span style="cursor: default">Default</span><br />

<span style="cursor: pointer">Pointer</span><br />

<span style="cursor: e-resize">e-resize</span><br />

<span style="cursor: ne-resize">ne-resize</span><br />

<span style="cursor: nw-resize">nw-resize</span><br />

<span style="cursor: n-resize">n-resize</span><br />

<span style="cursor: se-resize">se-resize</span><br />

<span style="cursor: sw-resize">sw-resize</span><br />

<span style="cursor: s-resize">s-resize</span><br />

<span style="cursor: w-resize">w-resize</span><br />

</body>

</html>

نوع عنوان را با استفاده از خصوصیت فیلتر تغییر دهید.

<html>

<head>

<style>

h2

{

width:100%;

}

</style>

</head>

<body>

<h2 style="filter:glow()">Glow</h2>

<h2 style="filter:blur()">Blur</h2>

<h2 style="filter:fliph()">Flip H</h2>

<h2 style="filter:flipv()">Flip V</h2>

<h2 style="filter:shadow()">Shadow</h2>

<h2 style="filter:dropshadow()">Drop Shadow</h2>

<h2 style="filter:wave(Strength=2)">Wave</h2>

<p>NOTE: Filters don't work if the width property of the element is not set.</p>

</body>

</html>

<html>

<head>

<style>

{

width:100%;

}

</style>

</head>

<body>

<h2 style="filter:shadow()">Shadow</h2>

<h2 style="filter:dropshadow()">Drop Shadow</h2>

<p>NOTE: Filters don't work if the width property of the element is not set.</p>

</body>

</html>

خصوصیت فیلتر همچنین می تواند برای تصاویر استفاده شود، در اینجا بعضی نمونه ها برای تصاویر وجود دارند. نگاه کنید :

<html>

<head>

<style>

div

{

width:160px;

height:120px;

}

</style>

</head>

<body>

Alpha: 

<div style="filter:alpha(Opacity=20)">

<img src="/landscape.jpg" width="160" height="120" />

</div>

Gray: 

<div style="filter:gray()">

<img src="/landscape.jpg" width="160" height="120" />

</div>

Invert: 

<div style="filter:invert()">

<img src="/landscape.jpg" width="160" height="120" />

</div>

Xray: 

<div style="filter:xray()">

<img src="/landscape.jpg" width="160" height="120" />

</div>

Mask: 

<div style="position:absolute;left:10;top:610;">

<img src="/landscape.jpg" width="160" height="120" />

</div>

<div style="position: absolute; left: 10; top: 610; filter: mask(color=#ffffff); width: 160; height: 120">

<h2>The mask value makes the text transparent</h2>

</div>

</body>

</html>

<html>

<head>

<style>

div

{

width:160px;

height:120px;

}

</style>

</head>

<body>

Alpha:

</div>

Gray:

</div>

Invert:

</div>

Xray:

</div>

Mask:

</div>

<h2>The mask value makes the text transparent</h2>

</div>

</body>

</html>

یک تصویر پس زمینه که با پایه صفحات نوار لغزنده حرکت نمی کند.

DOM به ما امکان دسترسی به عناصر را در یک سند می دهد.

منبع : w3schools.com

Meghdad Alibakhshi

مقداد علی بخشی هستم. موسیقی دان، برنامه نویس، متخصص هوش مصنوعی، علم داده، متخصص بلاکچین و توسعه دهنده ربات های هوشمند.
دانش آموخته مقطع ارشد و دکتری دانشکده فنی دانشگاه تهران هستم. با سابقه تدریس درس برنامه نویسی در دانشگاه (پردیس بین الملل کیش دانشگاه تهران)

آموزش DHTML – قسمت اول

DHTML یک استاندارد وب جهانی نیست.

تکنولوژی های DHTML

تکنولوژی های DHTML در Netscape 4.x و Internet Explorer 4.x

کدام ویژگی را با CSS-P می توان به کار برد؟

فیلتر های مختلف

دیدگاه‌ خود را بنویسید لغو پاسخ

DHTML یک استاندارد وب جهانی نیست.

تکنولوژی های DHTML

تکنولوژی های DHTML در Netscape 4.x و Internet Explorer 4.x

کدام ویژگی را با CSS-P می توان به کار برد؟

فیلتر های مختلف

مطالب مرتبط:

دیدگاه‌ خود را بنویسید لغو پاسخ