نمایش نسخه قابل چاپ
ارسال این موضوع به دوستان
مشاهده آخرین ارسال این تاپیک
اعطای حداکثر رتبه به این موضوع
اشتراک در موضوع
![[-]](https://forums.irserv.ir/images/collapse.png "[-]")
آموزش مقدماتی و پیشرفته زبان html . به کمک html به سادگی قادر به طراحی صفحات استاتیک وب خواهید بود . زبان html اساس کار طراحی وب سایت است
[/url]![[عکس: 672x372xdialog4-672x372.png.pagespeed.ic.iYLu6fdQjp.png]](http://compiler.ir/wp-content/uploads/2014/09/672x372xdialog4-672x372.png.pagespeed.ic.iYLu6fdQjp.png)
آموزش زبان html, سایر آموزش ها
تگ dialog و کاربرد آن در html
مهر ۲۵, ۱۳۹۳ سپیده محراب دیدگاهی بنویسید
<dialog open><p>Greetings, one and all!</p> </dialog>
1
2
3
<dialog open>
<p>Greetings, one and all!</p>
</dialog>
<div><dialog id="myFirstDialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;"> <p><q>The world is full of magical things patiently waiting for our wits to grow sharper.</q> - <cite>Bertrand Russell</cite></p> <button id="hide">Close</button> </dialog> <!-- "Show" button --> <button id="show">Show Dialog</button> </div> <!-- JavaScript to provide the "Show/Close" functionality --> <script type="text/JavaScript"> (function() { var dialog = document.getElementById('myFirstDialog'); document.getElementById('show').onclick = function() { dialog.show(); }; document.getElementById('hide').onclick = function() { dialog.close(); }; })(); </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div>
<dialog id="myFirstDialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">
<p><q>The world is full of magical things patiently waiting for our wits to grow sharper.</q> - <cite>Bertrand Russell</cite></p>
<button id="hide">Close</button>
</dialog>
<!-- "Show" button -->
<button id="show">Show Dialog</button>
</div>
<!-- JavaScript to provide the "Show/Close" functionality -->
<script type="text/JavaScript">
(function() {
var dialog = document.getElementById('myFirstDialog');
document.getElementById('show').onclick = function() {
dialog.show();
};
document.getElementById('hide').onclick = function() {
dialog.close();
};
})();
</script>
تگ dialog و کاربرد آن در html
<!-- Simple pop-up dialog box, containing a form --><dialog id="favDialog"> <form method="dialog"> <section> <p><label for="favAnimal">Favorite animal:</label> <select id="favAnimal" name="favAnimal"> <option></option> <option>Brine shrimp</option> <option>Red panda</option> <option>Spider monkey</option> </select></p> </section> <menu> <button id="cancel" type="reset">Cancel</button> <button type="submit">Confirm</button> </menu> </form> </dialog> <menu> <button id="updateDetails">Update details</button> </menu> <script> (function() { var updateButton = document.getElementById('updateDetails'); var cancelButton = document.getElementById('cancel'); // Update button opens a modal dialog updateButton.addEventListener('click', function() { document.getElementById('favDialog').showModal(); }); // Form cancel button closes the dialog box cancelButton.addEventListener('click', function() { document.getElementById('favDialog').close(); }); })(); </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!-- Simple pop-up dialog box, containing a form -->
<dialog id="favDialog">
<form method="dialog">
<section>
<p><label for="favAnimal">Favorite animal:</label>
<select id="favAnimal" name="favAnimal">
<option></option>
<option>Brine shrimp</option>
<option>Red panda</option>
<option>Spider monkey</option>
</select></p>
</section>
<menu>
<button id="cancel" type="reset">Cancel</button>
<button type="submit">Confirm</button>
</menu>
</form>
</dialog>
<menu>
<button id="updateDetails">Update details</button>
</menu>
<script>
(function() {
var updateButton = document.getElementById('updateDetails');
var cancelButton = document.getElementById('cancel');
// Update button opens a modal dialog
updateButton.addEventListener('click', function() {
document.getElementById('favDialog').showModal();
});
// Form cancel button closes the dialog box
cancelButton.addEventListener('click', function() {
document.getElementById('favDialog').close();
});
})();
</script>
تگ dialog و کاربرد آن در html
مقدار
شرح
open
open
فعال بودن عنصر dialog را به منظور تعامل کاربران با آن مشخص میکند . در صورتی که از این خاصیت استفاده نشود عنصر dialog از دید کاربران پنهان خواهد ماند .
hidden
itemtype
class
id
lang
contenteditable
inert
spellcheck
contextmenu
itemid
style
dir
itemprop
tabindex
draggable
itemref
title
dropzone
itemscope
translate
onended
onmousewheel
oncancel
onerror
onpause
onblur
onfocus
onplay
oncanplay
onformchange
onplaying
oncanplaythrough
onforminput
onprogress
onchange
oninput
onratechange
onclick
oninvalid
onreadystatechange
oncontextmenu
onkeydown
onscroll
ondblclick
onkeypress
onseeked
ondrag
onkeyup
onseeking
ondragend
onload
onselect
ondragenter
onloadeddata
onshow
ondragexit
onloadedmetadata
onstalled
ondragleave
onloadstart
onsubmit
ondragover
onmousedown
onsuspend
ondragstart
onmousemove
ontimeupdate
ondrop
onmouseout
onvolumechange
ondurationchange
onmouseover
onwaiting
onemptied
onmouseup
گوگل کروم
اینترنت اکسپلورر
فایرفاکس
سافاری
اپرا
<dialog>
Canary
پشتیبانی نمی کند
پشتیبانی نمی کند
۶٫۰
پشتیبانی نمی کند
![[عکس: 672x372xdel5-672x372.png.pagespeed.ic.Z7Zg9et3ry.png]](http://compiler.ir/wp-content/uploads/2014/09/672x372xdel5-672x372.png.pagespeed.ic.Z7Zg9et3ry.png)
آموزش زبان html, سایر آموزش ها
تگ del و کاربرد آن در html
مهر ۲۰, ۱۳۹۳ سپیده محراب دیدگاهی بنویسید
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
1
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
تگ del و کاربرد آن در html
<p>I am <del>very</del> <ins>extremely</ins> happy that you visited this page </p>
1
<p>I am <del>very</del> <ins>extremely</ins> happy that you visited this page </p>
تگ del و کاربرد آن در html
<p><del>This text has been deleted</del></p>
1
<p><del>This text has been deleted</del></p>
تگ del و کاربرد آن در html
مقدار
شرح
cite
URL
یک URL برای سندی که دلیل حذف متن در آن توضیح داده شده مشخص میکند
datetime
YYYY-MM-DDThh:mm:ssTZD
تاریخ و زمان حذف متن را مشخص میکند
hidden
itemtype
class
id
lang
contenteditable
inert
spellcheck
contextmenu
itemid
style
dir
itemprop
tabindex
draggable
itemref
title
dropzone
itemscope
translate
onended
onmousewheel
oncancel
onerror
onpause
onblur
onfocus
onplay
oncanplay
onformchange
onplaying
oncanplaythrough
onforminput
onprogress
onchange
oninput
onratechange
onclick
oninvalid
onreadystatechange
oncontextmenu
onkeydown
onscroll
ondblclick
onkeypress
onseeked
ondrag
onkeyup
onseeking
ondragend
onload
onselect
ondragenter
onloadeddata
onshow
ondragexit
onloadedmetadata
onstalled
ondragleave
onloadstart
onsubmit
ondragover
onmousedown
onsuspend
ondragstart
onmousemove
ontimeupdate
ondrop
onmouseout
onvolumechange
ondurationchange
onmouseover
onwaiting
onemptied
onmouseup
![[عکس: 672x372xdl1-672x372.png.pagespeed.ic.vXNDacDCRp.png]](http://compiler.ir/wp-content/uploads/2014/09/672x372xdl1-672x372.png.pagespeed.ic.vXNDacDCRp.png)
آموزش زبان html, سایر آموزش ها
تگ dl و کاربرد آن در html
مهر ۱۸, ۱۳۹۳ سپیده محراب دیدگاهی بنویسید
<!DOCTYPE html><html> <body> <dl> <dt>Firefox</dt> <dd>A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</dd> <!-- other terms and definitions --> </dl> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<dl>
<dt>Firefox</dt>
<dd>A free, open source, cross-platform, graphical web browser
developed by the Mozilla Corporation and hundreds of volunteers.</dd>
<!-- other terms and definitions -->
</dl>
</body>
</html>
تگ dl و کاربرد آن در html
<!DOCTYPE html><html> <body> <dl> <dt>Firefox</dt> <dt>Mozilla Firefox</dt> <dt>Fx</dt> <dd>A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</dd> <!-- other terms and definitions --> </dl> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<dl>
<dt>Firefox</dt>
<dt>Mozilla Firefox</dt>
<dt>Fx</dt>
<dd>A free, open source, cross-platform, graphical web browser
developed by the Mozilla Corporation and hundreds of volunteers.</dd>
<!-- other terms and definitions -->
</dl>
</body>
</html>
تگ dl و کاربرد آن در html
<!DOCTYPE html><html> <body> <dl> <dt>Firefox</dt> <dd>A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</dd> <dd>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).</dd> <!-- other terms and definitions --> </dl> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<dl>
<dt>Firefox</dt>
<dd>A free, open source, cross-platform, graphical web browser
developed by the Mozilla Corporation and hundreds of volunteers.</dd>
<dd>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox,
is a mostly herbivorous mammal, slightly larger than a domestic cat
(60 cm long).</dd>
<!-- other terms and definitions -->
</dl>
</body>
</html>
تگ dl و کاربرد آن در htmlتگ dl و کاربرد آن در html
<dl> <dt>Name</dt> <dd>Godzilla</dd> <dt>Born</dt> <dd>1952</dd> <dt>Birthplace</dt> <dd>Japan</dd> <dt>Color</dt> <dd>Green</dd> </dl>
1
2
3
4
5
6
7
8
9
10
<dl>
<dt>Name</dt>
<dd>Godzilla</dd>
<dt>Born</dt>
<dd>1952</dd>
<dt>Birthplace</dt>
<dd>Japan</dd>
<dt>Color</dt>
<dd>Green</dd>
</dl>
hidden
itemtype
class
id
lang
contenteditable
inert
spellcheck
contextmenu
itemid
style
dir
itemprop
tabindex
draggable
itemref
title
dropzone
itemscope
translate
onended
onmousewheel
oncancel
onerror
onpause
onblur
onfocus
onplay
oncanplay
onformchange
onplaying
oncanplaythrough
onforminput
onprogress
onchange
oninput
onratechange
onclick
oninvalid
onreadystatechange
oncontextmenu
onkeydown
onscroll
ondblclick
onkeypress
onseeked
ondrag
onkeyup
onseeking
ondragend
onload
onselect
ondragenter
onloadeddata
onshow
ondragexit
onloadedmetadata
onstalled
ondragleave
onloadstart
onsubmit
ondragover
onmousedown
onsuspend
ondragstart
onmousemove
ontimeupdate
ondrop
onmouseout
onvolumechange
ondurationchange
onmouseover
onwaiting
onemptied
onmouseup
![[عکس: 672x372xdiv-672x372.jpg.pagespeed.ic.Pprfx474Ho.jpg]](http://compiler.ir/wp-content/uploads/2014/09/672x372xdiv-672x372.jpg.pagespeed.ic.Pprfx474Ho.jpg)
آموزش زبان html, سایر آموزش ها
عنصر div و کاربرد آن در html
مهر ۱۶, ۱۳۹۳ سپیده محراب دیدگاهی بنویسید
<div> <p>Any kind of content here. Such as <p>, <table>. You name it!</p> </div>
1
2
3
<div>
<p>Any kind of content here. Such as <p>, <table>. You name it!</p>
</div>
<div style="background-color:orange;text-align:center"><p>Bright Widget</p> </div> <div style="background-color:olive;text-align:center"> <p>Dull widget</p> </div>
1
2
3
4
5
6
<div style="background-color:orange;text-align:center">
<p>Bright Widget</p>
</div>
<div style="background-color:olive;text-align:center">
<p>Dull widget</p>
</div>
مقدار
شرح
align
left
right
center
justify
این خاصیت در html5 پشتیبانی نمیشود
تراز محتوای یک عنصر div را مشخص میکند .
hidden
itemtype
class
id
lang
contenteditable
inert
spellcheck
contextmenu
itemid
style
dir
itemprop
tabindex
draggable
itemref
title
dropzone
itemscope
translate
onended
onmousewheel
oncancel
onerror
onpause
onblur
onfocus
onplay
oncanplay
onformchange
onplaying
oncanplaythrough
onforminput
onprogress
onchange
oninput
onratechange
onclick
oninvalid
onreadystatechange
oncontextmenu
onkeydown
onscroll
ondblclick
onkeypress
onseeked
ondrag
onkeyup
onseeking
ondragend
onload
onselect
ondragenter
onloadeddata
onshow
ondragexit
onloadedmetadata
onstalled
ondragleave
onloadstart
onsubmit
ondragover
onmousedown
onsuspend
ondragstart
onmousemove
ontimeupdate
ondrop
onmouseout
onvolumechange
ondurationchange
onmouseover
onwaiting
onemptied
onmouseup
![[عکس: 672x372xem1-672x372.png.pagespeed.ic.FcymAmNtLf.png]](http://compiler.ir/wp-content/uploads/2014/09/672x372xem1-672x372.png.pagespeed.ic.FcymAmNtLf.png)
آموزش زبان html
تگ em و کاربرد آن در html
مهر ۱۰, ۱۳۹۳ سپیده محراب دیدگاهی بنویسید
توضیحات
<em>
یک متن تاکیدی را تعریف میکند
<strong>
یک متن مهم را تعریف میکند
<dfn>
یک اصطلاح تعریف شده را تعریف می کند
<code>
یک قطعه از کد کامپیوتری را تعریف می کند
<samp>
یک خروجی نمونه از برنامه کامپیوتری تعریف می کند
<kbd>
ورودی صفحه کلید را تعریف می کند
<var>
یک متغیر تعریف می کند
I can <em>not</em> emphasise this enough!
1
I can <em>not</em> emphasise this enough!
<p> In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content. </p>
1
2
3
<p>
In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content.
</p>
hidden
itemtype
class
id
lang
contenteditable
inert
spellcheck
contextmenu
itemid
style
dir
itemprop
tabindex
draggable
itemref
title
dropzone
itemscope
translate
onended
onmousewheel
oncancel
onerror
onpause
onblur
onfocus
onplay
oncanplay
onformchange
onplaying
oncanplaythrough
onforminput
onprogress
onchange
oninput
onratechange
onclick
oninvalid
onreadystatechange
oncontextmenu
onkeydown
onscroll
ondblclick
onkeypress
onseeked
ondrag
onkeyup
onseeking
ondragend
onload
onselect
ondragenter
onloadeddata
onshow
ondragexit
onloadedmetadata
onstalled
ondragleave
onloadstart
onsubmit
ondragover
onmousedown
onsuspend
ondragstart
onmousemove
ontimeupdate
ondrop
onmouseout
onvolumechange
ondurationchange
onmouseover
onwaiting
onemptied
onmouseup
![[عکس: 672x372xembed-672x372.png.pagespeed.ic.WV4AAY0GFB.png]](http://compiler.ir/wp-content/uploads/2014/09/672x372xembed-672x372.png.pagespeed.ic.WV4AAY0GFB.png)
[url=http://compiler.ir/category/learning/html/]آموزش زبان html, سایر آموزش ها
تگ embed و کاربرد آن در html
مهر ۹, ۱۳۹۳ سپیده محراب دیدگاهی بنویسید
<embed type="video/quicktime" src="movie.mov" width="640" height="480">
1
<embed type="video/quicktime" src="movie.mov" width="640" height="480">
<!DOCTYPE html><html> <body> <embed src="helloworld.swf"> </body> </html>
1
2
3
4
5
6
<!DOCTYPE html>
<html>
<body>
<embed src="helloworld.swf">
</body>
</html>
مقدار
شرح
height
pixels
تعیین کننده ارتفاع محتوا موجود در تگ embed
src
URL
تعیین کننده آدرس فایل موجود در تگ embed
type
media_type
تعیین کننده نوع رسانه فایل موجود در تگ embed
width
pixels
تعیین کننده عرض محتوا موجود در تگ embed
hidden
itemtype
class
id
lang
contenteditable
inert
spellcheck
contextmenu
itemid
style
dir
itemprop
tabindex
draggable
itemref
title
dropzone
itemscope
translate
onended
onmousewheel
oncancel
onerror
onpause
onblur
onfocus
onplay
oncanplay
onformchange
onplaying
oncanplaythrough
onforminput
onprogress
onchange
oninput
onratechange
onclick
oninvalid
onreadystatechange
oncontextmenu
onkeydown
onscroll
ondblclick
onkeypress
onseeked
ondrag
onkeyup
onseeking
ondragend
onload
onselect
ondragenter
onloadeddata
onshow
ondragexit
onloadedmetadata
onstalled
ondragleave
onloadstart
onsubmit
ondragover
onmousedown
onsuspend
ondragstart
onmousemove
ontimeupdate
ondrop
onmouseout
onvolumechange
ondurationchange
onmouseover
onwaiting
onemptied
onmouseup
![[عکس: 672x372xfooter1-672x372.png.pagespeed.ic.Kcm9WK_JGQ.png]](http://compiler.ir/wp-content/uploads/2014/09/672x372xfooter1-672x372.png.pagespeed.ic.Kcm9WK_JGQ.png)
آموزش زبان html, سایر آموزش ها
تگ footer و کاربرد آن در html
مهر ۹, ۱۳۹۳ سپیده محراب دیدگاهی بنویسید
<!DOCTYPE html><html> <head></head> <body> <header> <h1>Talking Dogs</h1> <b><p>Humans aren't the only talkers!</p></b> </header> <nav></nav> <main> <article> <p>Ever encountered a talking dog? I have.</p> <p>It all happened one day as I was walking down the street...</p> </article> </main> <footer> © 2009 Woofer Dog Corporation </footer> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head></head>
<body>
<header>
<h1>Talking Dogs</h1>
<b><p>Humans aren't the only talkers!</p></b>
</header>
<nav></nav>
<main>
<article>
<p>Ever encountered a talking dog? I have.</p>
<p>It all happened one day as I was walking down the street...</p>
</article>
</main>
<footer>
© 2009 Woofer Dog Corporation
</footer>
</body>
</html>
تگ footer و کاربرد آن در html
hidden
itemtype
class
id
lang
contenteditable
inert
spellcheck
contextmenu
itemid
style
dir
itemprop
tabindex
draggable
itemref
title
dropzone
itemscope
translate
onended
onmousewheel
oncancel
onerror
onpause
onblur
onfocus
onplay
oncanplay
onformchange
onplaying
oncanplaythrough
onforminput
onprogress
onchange
oninput
onratechange
onclick
oninvalid
onreadystatechange
oncontextmenu
onkeydown
onscroll
ondblclick
onkeypress
onseeked
ondrag
onkeyup
onseeking
ondragend
onload
onselect
ondragenter
onloadeddata
onshow
ondragexit
onloadedmetadata
onstalled
ondragleave
onloadstart
onsubmit
ondragover
onmousedown
onsuspend
ondragstart
onmousemove
ontimeupdate
ondrop
onmouseout
onvolumechange
ondurationchange
onmouseover
onwaiting
onemptied
onmouseup
اینترنت اکسپلورر
فایرفاکس
سافاری
اپرا
< footer>
۶٫۰
۹٫۰
۴٫۰
۵٫۰
[/url]
آموزش زبان html, سایر آموزش هاتگ dialog و کاربرد آن در html
مهر ۲۵, ۱۳۹۳ سپیده محراب دیدگاهی بنویسید
تگ dialog و کاربرد آن در html
برچسب dialog یک باکس یا کادر محاوره ای تعریف می کند. این عنصر در HTML بخشی از یک برنامه کاربردی را نشان می دهد که کاربر می تواند با آن در تعامل باشد.
همراه با عنصر dialog از یک خاصیت boolean به نام open استفاده میشود که این عنصر را “فعال” میکند. اگر این خاصیت حذف شود، باید برای فعال کردن عنصر و باز و بسته کردن آن در صورت نیاز ، از یک اسکریپت (مانند جاوا اسکریپت) استفاده شود.
مثال ۱:
<dialog open><p>Greetings, one and all!</p> </dialog>
1
2
3
<dialog open>
<p>Greetings, one and all!</p>
</dialog>
برای درک بهتر، به مثال ۲ توجه کنید . در این مثال با ایجاد یک دکمه برای فراهم کردن قابلیت باز و بسته شدن از جاوا اسکریپت و برای اعمال برخی استایل ها از CSS درون خطی استفاده شده است. (به طور معمول بهتر است از style sheet خارجی استفاده شود، اما در این مثال استفاده از style درون خطی مناسب تر خواهد بود).
<div><dialog id="myFirstDialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;"> <p><q>The world is full of magical things patiently waiting for our wits to grow sharper.</q> - <cite>Bertrand Russell</cite></p> <button id="hide">Close</button> </dialog> <!-- "Show" button --> <button id="show">Show Dialog</button> </div> <!-- JavaScript to provide the "Show/Close" functionality --> <script type="text/JavaScript"> (function() { var dialog = document.getElementById('myFirstDialog'); document.getElementById('show').onclick = function() { dialog.show(); }; document.getElementById('hide').onclick = function() { dialog.close(); }; })(); </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div>
<dialog id="myFirstDialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">
<p><q>The world is full of magical things patiently waiting for our wits to grow sharper.</q> - <cite>Bertrand Russell</cite></p>
<button id="hide">Close</button>
</dialog>
<!-- "Show" button -->
<button id="show">Show Dialog</button>
</div>
<!-- JavaScript to provide the "Show/Close" functionality -->
<script type="text/JavaScript">
(function() {
var dialog = document.getElementById('myFirstDialog');
document.getElementById('show').onclick = function() {
dialog.show();
};
document.getElementById('hide').onclick = function() {
dialog.close();
};
})();
</script>
تگ dialog و کاربرد آن در html
همانطور که مشاهده میکنید با فشردن دکمه show dialog یک کادر ظاهر میشود .
مثال ۳:
<!-- Simple pop-up dialog box, containing a form --><dialog id="favDialog"> <form method="dialog"> <section> <p><label for="favAnimal">Favorite animal:</label> <select id="favAnimal" name="favAnimal"> <option></option> <option>Brine shrimp</option> <option>Red panda</option> <option>Spider monkey</option> </select></p> </section> <menu> <button id="cancel" type="reset">Cancel</button> <button type="submit">Confirm</button> </menu> </form> </dialog> <menu> <button id="updateDetails">Update details</button> </menu> <script> (function() { var updateButton = document.getElementById('updateDetails'); var cancelButton = document.getElementById('cancel'); // Update button opens a modal dialog updateButton.addEventListener('click', function() { document.getElementById('favDialog').showModal(); }); // Form cancel button closes the dialog box cancelButton.addEventListener('click', function() { document.getElementById('favDialog').close(); }); })(); </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!-- Simple pop-up dialog box, containing a form -->
<dialog id="favDialog">
<form method="dialog">
<section>
<p><label for="favAnimal">Favorite animal:</label>
<select id="favAnimal" name="favAnimal">
<option></option>
<option>Brine shrimp</option>
<option>Red panda</option>
<option>Spider monkey</option>
</select></p>
</section>
<menu>
<button id="cancel" type="reset">Cancel</button>
<button type="submit">Confirm</button>
</menu>
</form>
</dialog>
<menu>
<button id="updateDetails">Update details</button>
</menu>
<script>
(function() {
var updateButton = document.getElementById('updateDetails');
var cancelButton = document.getElementById('cancel');
// Update button opens a modal dialog
updateButton.addEventListener('click', function() {
document.getElementById('favDialog').showModal();
});
// Form cancel button closes the dialog box
cancelButton.addEventListener('click', function() {
document.getElementById('favDialog').close();
});
})();
</script>
تگ dialog و کاربرد آن در html
تگ dialog و کاربرد آن در html
تفاوت بین HTML 4.01 و HTML5
عنصر <dialog> یک تگ جدید در HTML5 است.
تگ dialog و کاربرد آن در htmlخاصیت ها
تگ HTML می تواند شامل یک یا چند خاصیت باشد که چگونگی ارائه در مرورگر را تعیین میکنند. خاصیت ها دارای یک نام و یک مقدار هستند که با علامت (=) از هم جدا شده اند. مقدار خاصیت با علامت نقل قول احاطه میشود .
۳ نوع خاصیت وجود دارد که شما می توانید به تگ های HTML خود اضافه کنید:
خاصیت ویژه عنصر
خاصیت عمومی
خاصیت رویداد
خاصیت ویژه عنصر
خاصیتمقدار
شرح
open
open
فعال بودن عنصر dialog را به منظور تعامل کاربران با آن مشخص میکند . در صورتی که از این خاصیت استفاده نشود عنصر dialog از دید کاربران پنهان خواهد ماند .
خاصیت های عمومی
تگ <dialog> از خاصیت های عمومی HTML پشتیبانی میکند
accesskeyhidden
itemtype
class
id
lang
contenteditable
inert
spellcheck
contextmenu
itemid
style
dir
itemprop
tabindex
draggable
itemref
title
dropzone
itemscope
translate
خاصیت های رویداد
تگ <dialog> از خاصیت های رویداد در HTML نیز پشتیبانی میکند.
onabortonended
onmousewheel
oncancel
onerror
onpause
onblur
onfocus
onplay
oncanplay
onformchange
onplaying
oncanplaythrough
onforminput
onprogress
onchange
oninput
onratechange
onclick
oninvalid
onreadystatechange
oncontextmenu
onkeydown
onscroll
ondblclick
onkeypress
onseeked
ondrag
onkeyup
onseeking
ondragend
onload
onselect
ondragenter
onloadeddata
onshow
ondragexit
onloadedmetadata
onstalled
ondragleave
onloadstart
onsubmit
ondragover
onmousedown
onsuspend
ondragstart
onmousemove
ontimeupdate
ondrop
onmouseout
onvolumechange
ondurationchange
onmouseover
onwaiting
onemptied
onmouseup
پشتیبانی مرورگر ها
اعداد مشخص شده در جدول زیر ، اولین نسخه ی مرورگرهایی که به طور کامل از این عنصر پشتیبانی میکنند را مشخص میکند .
عنصرگوگل کروم
اینترنت اکسپلورر
فایرفاکس
سافاری
اپرا
<dialog>
Canary
پشتیبانی نمی کند
پشتیبانی نمی کند
۶٫۰
پشتیبانی نمی کند
توجه: در هنگام استفاده از این عنصر توجه داشته باشید که گوگل کروم (و احتمالا سافاری نسخه ۶ به بالا ) تنها مرورگری است که از این عنصر پشتیبانی میکند. با این حال، به منظور انجام این کار در کروم، باید chrome://flags/ را در آدرس بار مرورگر گوگل کروم تایپ کنید، سپس گزینه Enable experimental Web Platform features را فعال کرده و مرورگر را ری استارت کنید.
آموزش زبان html, سایر آموزش هاتگ del و کاربرد آن در html
مهر ۲۰, ۱۳۹۳ سپیده محراب دیدگاهی بنویسید
تگ del و کاربرد آن در html
برچسب <del> متنی را که از یک سند حذف شده است مشخص میکند.
برای مشخص کردن متنی که جایگزین متن حذف شده میشود باید از عنصر <ins> استفاده کرد .
مثال ۱ دو متن حذف شده و جایگزین شده را نشان میدهد:
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
1
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
تگ del و کاربرد آن در html
مثال ۲ :
<p>I am <del>very</del> <ins>extremely</ins> happy that you visited this page </p>
1
<p>I am <del>very</del> <ins>extremely</ins> happy that you visited this page </p>
تگ del و کاربرد آن در html
مثال ۳ :
<p><del>This text has been deleted</del></p>
1
<p><del>This text has been deleted</del></p>
تگ del و کاربرد آن در html
تگ del و کاربرد آن در html
برای روز رسانی و تغییرات در یک سند از این دو عنصر <del> و <ins> استفاده میشود . رورگرها معمولا متن حذف شده را به صورت خط دار و متن جایگزین را به صورت زیر خط دار نمایش میدهند.
نشانه گذاری متن حذف شده می تواند در تعیین تفاوت بین نسخه های متعدد در یک سند ، مفید باشد.
تگ del و کاربرد آن در htmlتفاوت بین HTML 4.01 و HTML5
هیچ تفاوتی بین تگ del در HTML 4.01 و HTML5 وجود ندارد .
خاصیت ها
تگ HTML می تواند شامل یک یا چند خاصیت باشد که چگونگی ارائه در مرورگر را تعیین میکنند. خاصیت ها دارای یک نام و یک مقدار هستند که با علامت (=) از هم جدا شده اند. مقدار خاصیت با علامت نقل قول احاطه میشود .
۳ نوع خاصیت وجود دارد که شما می توانید به تگ های HTML خود اضافه کنید:
خاصیت ویژه عنصر
خاصیت عمومی
خاصیت رویداد
خاصیت ویژه عنصر
خاصیت هامقدار
شرح
cite
URL
یک URL برای سندی که دلیل حذف متن در آن توضیح داده شده مشخص میکند
datetime
YYYY-MM-DDThh:mm:ssTZD
تاریخ و زمان حذف متن را مشخص میکند
خاصیت های عمومی
تگ del از خاصیت های عمومی HTML پشتیبانی میکند
accesskeyhidden
itemtype
class
id
lang
contenteditable
inert
spellcheck
contextmenu
itemid
style
dir
itemprop
tabindex
draggable
itemref
title
dropzone
itemscope
translate
خاصیت های رویداد
تگ del از خاصیت های رویداد در HTML نیز پشتیبانی میکند.
onabortonended
onmousewheel
oncancel
onerror
onpause
onblur
onfocus
onplay
oncanplay
onformchange
onplaying
oncanplaythrough
onforminput
onprogress
onchange
oninput
onratechange
onclick
oninvalid
onreadystatechange
oncontextmenu
onkeydown
onscroll
ondblclick
onkeypress
onseeked
ondrag
onkeyup
onseeking
ondragend
onload
onselect
ondragenter
onloadeddata
onshow
ondragexit
onloadedmetadata
onstalled
ondragleave
onloadstart
onsubmit
ondragover
onmousedown
onsuspend
ondragstart
onmousemove
ontimeupdate
ondrop
onmouseout
onvolumechange
ondurationchange
onmouseover
onwaiting
onemptied
onmouseup
پشتیبانی مرورگر ها
برچسب delدر همه مرورگرهای اصلی نظیر اینترنت اکسپلورر، فایرفاکس ، اپرا ، گوگل کروم و سافاری پشتیبانی می شود.
آموزش زبان html, سایر آموزش هاتگ dl و کاربرد آن در html
مهر ۱۸, ۱۳۹۳ سپیده محراب دیدگاهی بنویسید
تگ dl و کاربرد آن در html
برچسب <dl> یک لیست توصیفی تعریف می کند و به همراه برچسب <dt> ( تعریف واژه یا نام ) و <dd> (شرح واژه یا نام) استفاده میشود.
به مثال های زیر توجه کنید :
مثال ۱: یک واژه به همراه توصیف
<!DOCTYPE html><html> <body> <dl> <dt>Firefox</dt> <dd>A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</dd> <!-- other terms and definitions --> </dl> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<body>
<dl>
<dt>Firefox</dt>
<dd>A free, open source, cross-platform, graphical web browser
developed by the Mozilla Corporation and hundreds of volunteers.</dd>
<!-- other terms and definitions -->
</dl>
</body>
</html>
تگ dl و کاربرد آن در html
مثال ۲: چند واژه به همراه یک توصیف
<!DOCTYPE html><html> <body> <dl> <dt>Firefox</dt> <dt>Mozilla Firefox</dt> <dt>Fx</dt> <dd>A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</dd> <!-- other terms and definitions --> </dl> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<dl>
<dt>Firefox</dt>
<dt>Mozilla Firefox</dt>
<dt>Fx</dt>
<dd>A free, open source, cross-platform, graphical web browser
developed by the Mozilla Corporation and hundreds of volunteers.</dd>
<!-- other terms and definitions -->
</dl>
</body>
</html>
تگ dl و کاربرد آن در html
مثال ۳: یک واژه به همراه چند توصیف
<!DOCTYPE html><html> <body> <dl> <dt>Firefox</dt> <dd>A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.</dd> <dd>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).</dd> <!-- other terms and definitions --> </dl> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<dl>
<dt>Firefox</dt>
<dd>A free, open source, cross-platform, graphical web browser
developed by the Mozilla Corporation and hundreds of volunteers.</dd>
<dd>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox,
is a mostly herbivorous mammal, slightly larger than a domestic cat
(60 cm long).</dd>
<!-- other terms and definitions -->
</dl>
</body>
</html>
تگ dl و کاربرد آن در htmlتگ dl و کاربرد آن در html
با ترکیب مثالهای بالا امکان تعریف واژه های متعدد به همراه تعاریف مختلف وجود دارد.
لیست توصیفی برای نمایش متاداده به عنوان یک لیست از مقادیر کلیدی نیز مفید می باشد.
مثال :
<dl> <dt>Name</dt> <dd>Godzilla</dd> <dt>Born</dt> <dd>1952</dd> <dt>Birthplace</dt> <dd>Japan</dd> <dt>Color</dt> <dd>Green</dd> </dl>
1
2
3
4
5
6
7
8
9
10
<dl>
<dt>Name</dt>
<dd>Godzilla</dd>
<dt>Born</dt>
<dd>1952</dd>
<dt>Birthplace</dt>
<dd>Japan</dd>
<dt>Color</dt>
<dd>Green</dd>
</dl>
تفاوت بین HTML 4.01 و HTML5
-
- در HTML 4.01، برچسب <dl> یک لیست تعریفی مشخص میکند.
- در HTML5 ، برچسب <dl> یک لیست توصیفی مشخص میکند.
- در HTML 4.01، برچسب <dl> یک لیست تعریفی مشخص میکند.
تفاوت اصلی بین دو واژه توصیف و تعریف این است که توصیف ، به معنای دقیق یک مفهوم یا یک پدیده گفته میشود، در حالی که تعریف، معنای کوتاه آن را شرح میدهد. در واقع توصیف ، جزئیات بیشتری را شامل می شود.
خاصیت ها
تگ HTML می تواند شامل یک یا چند خاصیت باشد که چگونگی ارائه در مرورگر را تعیین میکنند. خاصیت ها دارای یک نام و یک مقدار هستند که با علامت (=) از هم جدا شده اند. مقدار خاصیت با علامت نقل قول احاطه میشود .
۳ نوع خاصیت وجود دارد که شما می توانید به تگ های HTML خود اضافه کنید:
خاصیت ویژه عنصر
خاصیت عمومی
خاصیت رویداد
خاصیت ویژه عنصر
تگ dl هیچ خاصیت ویژه ای ندارد .
خاصیت های عمومی
تگ dl از خاصیت های عمومی HTML پشتیبانی میکند
accesskeyhidden
itemtype
class
id
lang
contenteditable
inert
spellcheck
contextmenu
itemid
style
dir
itemprop
tabindex
draggable
itemref
title
dropzone
itemscope
translate
خاصیت های رویداد
تگ dl از خاصیت های رویداد در HTML نیز پشتیبانی میکند.
onabortonended
onmousewheel
oncancel
onerror
onpause
onblur
onfocus
onplay
oncanplay
onformchange
onplaying
oncanplaythrough
onforminput
onprogress
onchange
oninput
onratechange
onclick
oninvalid
onreadystatechange
oncontextmenu
onkeydown
onscroll
ondblclick
onkeypress
onseeked
ondrag
onkeyup
onseeking
ondragend
onload
onselect
ondragenter
onloadeddata
onshow
ondragexit
onloadedmetadata
onstalled
ondragleave
onloadstart
onsubmit
ondragover
onmousedown
onsuspend
ondragstart
onmousemove
ontimeupdate
ondrop
onmouseout
onvolumechange
ondurationchange
onmouseover
onwaiting
onemptied
onmouseup
پشتیبانی از مرورگر ها
برچسب dl در همه مرورگرهای اصلی نظیر اینترنت اکسپلورر، فایرفاکس ، اپرا ، گوگل کروم و سافاری پشتیبانی می شود.
آموزش زبان html, سایر آموزش هاعنصر div و کاربرد آن در html
مهر ۱۶, ۱۳۹۳ سپیده محراب دیدگاهی بنویسید
عنصر div و کاربرد آن در html
برچسب div یک بخش در یک سند HTML تعریف می کند. با استفاده از این تگ میتوانید بخش های بزرگی از عناصر html را گروه بندی کرده و با css قالب بندی کنید.
تفاوت بین عنصر <div> و <span> در این است که <div> به همراه عناصر block-level استفاده میشود در حالی که <span> در عناصر درون خطی مورد استفاده قرار میگیرد.
عنصر div و کاربرد آن در htmlبنابراین، به طور کلی عنصر <div> باید به عنوان یک مکانیسم توسعه یافته عمل کرده و فقط در صورتی استفاده شود که عنصر HTML مناسبی برای استفاده وجود نداشته باشد.
مثال ۱:
<div> <p>Any kind of content here. Such as <p>, <table>. You name it!</p> </div>
1
2
3
<div>
<p>Any kind of content here. Such as <p>, <table>. You name it!</p>
</div>
مثال۲:
<div style="background-color:orange;text-align:center"><p>Bright Widget</p> </div> <div style="background-color:olive;text-align:center"> <p>Dull widget</p> </div>
1
2
3
4
5
6
<div style="background-color:orange;text-align:center">
<p>Bright Widget</p>
</div>
<div style="background-color:olive;text-align:center">
<p>Dull widget</p>
</div>
این مثال در مرورگر به شکل زیر نمایش داده میشود:
عنصر div و کاربرد آن در htmlتوجه: مرورگر همیشه به طور پیش فرض، یک شکست خط قبل و بعد از عنصر <div> قرار میدهد. با این حال، این حالت را می توان با CSS تغییر داد.
عنصر div و کاربرد آن در html
تفاوت بین HTML 4.01 و HTML5
خاصیت align در HTML5 پشتیبانی نمی شود.
در HTML 4.01 ، تگ <div> اغلب برای مشخص کردن بخش های ناوبری مختلف در یک سند HTML (مانند header ، footer ، content area ، side bars ، و غیره) مورد استفاده می گرفت.
HTML 5 عناصر جدیدی را معرفی کرده که باید به جای عنصر <div> استفاده شوند. نمونه هایی از این عناصر جدید شامل < article>، <aside>، <header> و <footer> و … هستند .
خاصیت ها
تگ HTML می تواند شامل یک یا چند خاصیت باشد که چگونگی ارائه در مرورگر را تعیین میکنند. خاصیت ها دارای یک نام و یک مقدار هستند که با علامت (=) از هم جدا شده اند. مقدار خاصیت با علامت نقل قول احاطه میشود .
۳ نوع خاصیت وجود دارد که شما می توانید به تگ های HTML خود اضافه کنید:
خاصیت ویژه عنصر
خاصیت عمومی
خاصیت رویداد
خاصیت ویژه عنصر
خاصیتمقدار
شرح
align
left
right
center
justify
این خاصیت در html5 پشتیبانی نمیشود
تراز محتوای یک عنصر div را مشخص میکند .
خاصیت های عمومی
تگ <div> از خاصیت های عمومی HTML پشتیبانی میکند
accesskeyhidden
itemtype
class
id
lang
contenteditable
inert
spellcheck
contextmenu
itemid
style
dir
itemprop
tabindex
draggable
itemref
title
dropzone
itemscope
translate
خاصیت های رویداد
تگ <div> از خاصیت های رویداد در HTML نیز پشتیبانی میکند.
onabortonended
onmousewheel
oncancel
onerror
onpause
onblur
onfocus
onplay
oncanplay
onformchange
onplaying
oncanplaythrough
onforminput
onprogress
onchange
oninput
onratechange
onclick
oninvalid
onreadystatechange
oncontextmenu
onkeydown
onscroll
ondblclick
onkeypress
onseeked
ondrag
onkeyup
onseeking
ondragend
onload
onselect
ondragenter
onloadeddata
onshow
ondragexit
onloadedmetadata
onstalled
ondragleave
onloadstart
onsubmit
ondragover
onmousedown
onsuspend
ondragstart
onmousemove
ontimeupdate
ondrop
onmouseout
onvolumechange
ondurationchange
onmouseover
onwaiting
onemptied
onmouseup
پشتیبانی مرورگر ها
برچسب <div> در همه مرورگرهای اصلی نظیر اینترنت اکسپلورر، فایرفاکس ، اپرا ، گوگل کروم و سافاری پشتیبانی می شود.
آموزش زبان htmlتگ em و کاربرد آن در html
مهر ۱۰, ۱۳۹۳ سپیده محراب دیدگاهی بنویسید
تگ em و کاربرد آن در html
برچسب <em> یک برچسب عبارتی است که برای نشان دادن تاکید مورد استفاده قرار میگیرد و متن تاکیدی را احاطه میکند. این عنصر را میتوان در داخل عناصر دیگر بکار برد .
نکته: این تگ نامناسب شناخته نشده اما برای رسیدن نتیجه مطلوب تر میتوان از CSS استفاده کرد .
لیست برچسب های عبارتی
تگتوضیحات
<em>
یک متن تاکیدی را تعریف میکند
<strong>
یک متن مهم را تعریف میکند
<dfn>
یک اصطلاح تعریف شده را تعریف می کند
<code>
یک قطعه از کد کامپیوتری را تعریف می کند
<samp>
یک خروجی نمونه از برنامه کامپیوتری تعریف می کند
<kbd>
ورودی صفحه کلید را تعریف می کند
<var>
یک متغیر تعریف می کند
مثال ۱:
I can <em>not</em> emphasise this enough!
1
I can <em>not</em> emphasise this enough!
مثال ۲:
<p> In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content. </p>
1
2
3
<p>
In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content.
</p>
مثال های فوق را در یک ادیتور مانند notepad کپی کرده و آن را با پسوند html ذخیره کنید . با کلیک بر روی فایل ایجاد شده ، میتوانید نتیجه کدهای نوشته شده در فایل را در مروگر مشاهده کنید.
تگ em و کاربرد آن در html
این عنصر معمولا به صورت ایتالیک یا مورب نمایش داده می شود. با این حال، نباید به سادگی برای اعمال استایل ایتالیک مورد استفاده قرار بگیرد ؛ برای اینکار از css استفاده کنید. به منظور نشانه گذاری عنوان یک کار یا اثر (کتاب، بازی، آهنگ، و غیره) از عنصر <cite> که آن هم به صورت ایتالیک نوشته میشود و برای دادن تاکید و اهمیت بیشتر به یک متن از عنصر <strong> استفاده کنید.
تفاوت بین عنصر i و em
این سوال برای توسعه دهندگان مطرح میشود که چرا عناصر بسیاری برای تاکید متن وجود دارد! <i> و <em> شاید یکی از رایج ترین عناصر تاکیدی باشند. چرا از <em> < em/> به جای <i> < i/> استفاده میشود در حالی هر دو نتیجه ی یکسانی خواهند داشت ؟
تگ em و کاربرد آن در htmlدر واقع اینطور نیست. نتیجه های بصری به طور پیش فرض, یکسان است و هر دو تگ ، محتوا را به صورت کج (ایتالیک) نمایش میدهند. اما از نظر معناشناختی متفاوت هستند. برچسب <em> نشان دهنده محتوای تاکیدی می باشد، در حالی که <i> نشان دهنده ی متنی است که خارج از نثر عادی نوشته شود، مانند نام یک فیلم ، کتاب یا یک کلمه خارجی، و یا وقتی که متنی به جای معنای مفهومی، به تعریف یک کلمه اشاره دارد.
به عنوان مثال “Just do it already!” و یا “We had to do something about it”.که به صورت کج (ایتالیک) نوشته شده اند، با تاکید تلفظ میشوند. در این مثال از تگ em برای تاکید واژگان استفاده شده است.
در جمله “The Queen Mary sailed last night” هیچ تأکیدی وجود ندارد . در این مثال از تگ i استفاده شده و به معنی ملکه ای به نام Mary نیست بلکه به نام یک کشتی (Queen Mary) اشاره دارد.
تگ em و کاربرد آن در html
تفاوت بین HTML 4.01 و HTML5
هیچ تفاوتی بین تگ em در HTML4 و HTML5 وجود ندارد.
خاصیت ها
تگ HTML می تواند شامل یک یا چند خاصیت باشد که چگونگی ارائه در مرورگر را تعیین میکنند. خاصیت ها دارای یک نام و یک مقدار هستند که با علامت (=) از هم جدا شده اند. مقدار خاصیت با علامت نقل قول احاطه میشود .
۳ نوع خاصیت وجود دارد که شما می توانید به تگ های HTML خود اضافه کنید:
خاصیت ویژه عنصر
خاصیت عمومی
خاصیت رویداد
خاصیت ویژه عنصر
تگ em هیج خاصیت ویژه ای ندارد.
خاصیت های عمومی
تگ em از خاصیت های عمومی HTML پشتیبانی میکند
accesskeyhidden
itemtype
class
id
lang
contenteditable
inert
spellcheck
contextmenu
itemid
style
dir
itemprop
tabindex
draggable
itemref
title
dropzone
itemscope
translate
خاصیت های رویداد
تگ em از خاصیت های رویداد در HTML نیز پشتیبانی میکند.
onabortonended
onmousewheel
oncancel
onerror
onpause
onblur
onfocus
onplay
oncanplay
onformchange
onplaying
oncanplaythrough
onforminput
onprogress
onchange
oninput
onratechange
onclick
oninvalid
onreadystatechange
oncontextmenu
onkeydown
onscroll
ondblclick
onkeypress
onseeked
ondrag
onkeyup
onseeking
ondragend
onload
onselect
ondragenter
onloadeddata
onshow
ondragexit
onloadedmetadata
onstalled
ondragleave
onloadstart
onsubmit
ondragover
onmousedown
onsuspend
ondragstart
onmousemove
ontimeupdate
ondrop
onmouseout
onvolumechange
ondurationchange
onmouseover
onwaiting
onemptied
onmouseup
پشتیبانی مرورگر
برچسب emدر همه مرورگرهای اصلی نظیر اینترنت اکسپلورر، فایرفاکس ، اپرا ، گوگل کروم و سافاری پشتیبانی می شود.
[url=http://compiler.ir/category/learning/html/]آموزش زبان html, سایر آموزش هاتگ embed و کاربرد آن در html
مهر ۹, ۱۳۹۳ سپیده محراب دیدگاهی بنویسید
تگ embed و کاربرد آن در html
برچسب <embed> یک بخش برای یک برنامه خارجی و یا محتوای تعاملی (یک پلاگین) تعریف می کند. این برچسب یک عنصر خالی است و تگ پایان ندارد .
تگ embed یک پلاگین در صفحه قرار میدهد . پلاگین یک برنامه خاص واقع بر روی کامپیوتر سرویس گیرنده است (یعنی نه در وب سرور شما) که نوع خاصی از فایل دیتا را هندل میکند. رایج ترین پلاگین ها ، برای صدا و فیلم ها می باشد. برچسب embed مکانی را به فایل دیتا اختصاص میدهد که پلاگین اجرا شود.
عنصر < embed…> بخشی از مشخصه HTML 4 و XHTML 1 نیست، اما هنوز به طور گسترده ای توسط مرورگرهای مدرن پشتیبانی می شود. بر خلاف دیگر برچسب ها، خاصیت های این عنصر به نوع پلاگین مورد استفاده بستگی دارد . تنها خاصیت ضروری برای این عنصر SRC می باشد.
تگ embed و کاربرد آن در htmlمیتوانید از عنصر <embed> در طراحی سایت با HTML5 استفاده کنید اما بهتر است زیاد به آن متکی نباشید .
مثال ۱:
<embed type="video/quicktime" src="movie.mov" width="640" height="480">
1
<embed type="video/quicktime" src="movie.mov" width="640" height="480">
مثال۲:
<!DOCTYPE html><html> <body> <embed src="helloworld.swf"> </body> </html>
1
2
3
4
5
6
<!DOCTYPE html>
<html>
<body>
<embed src="helloworld.swf">
</body>
</html>
مثال های فوق را در یک ادیتور مانند notepad کپی کرده و آن را با پسوند html ذخیره کنید . با کلیک بر روی فایل ایجاد شده ، میتوانید نتیجه کدهای نوشته شده در فایل را در مروگر مشاهده کنید.
تگ embed و کاربرد آن در html
تفاوت بین HTML 4.01 و HTML5
embed یک تگ جدید در HTML5 است.
خاصیت ها
تگ HTML می تواند شامل یک یا چند خاصیت باشد که چگونگی ارائه در مرورگر را تعیین میکنند. خاصیت ها دارای یک نام و یک مقدار هستند که با علامت (=) از هم جدا شده اند. مقدار خاصیت با علامت نقل قول احاطه میشود .
۳ نوع خاصیت وجود دارد که شما می توانید به تگ های HTML خود اضافه کنید:
خاصیت ویژه عنصر
خاصیت عمومی
خاصیت رویداد
خاصیت ویژه عنصر
خاصیت هامقدار
شرح
height
pixels
تعیین کننده ارتفاع محتوا موجود در تگ embed
src
URL
تعیین کننده آدرس فایل موجود در تگ embed
type
media_type
تعیین کننده نوع رسانه فایل موجود در تگ embed
width
pixels
تعیین کننده عرض محتوا موجود در تگ embed
خاصیت های عمومی
تگ embed از خاصیت های عمومی HTML پشتیبانی میکند
accesskeyhidden
itemtype
class
id
lang
contenteditable
inert
spellcheck
contextmenu
itemid
style
dir
itemprop
tabindex
draggable
itemref
title
dropzone
itemscope
translate
خاصیت های رویداد
تگ embed از خاصیت های رویداد در HTML نیز پشتیبانی میکند.
onabortonended
onmousewheel
oncancel
onerror
onpause
onblur
onfocus
onplay
oncanplay
onformchange
onplaying
oncanplaythrough
onforminput
onprogress
onchange
oninput
onratechange
onclick
oninvalid
onreadystatechange
oncontextmenu
onkeydown
onscroll
ondblclick
onkeypress
onseeked
ondrag
onkeyup
onseeking
ondragend
onload
onselect
ondragenter
onloadeddata
onshow
ondragexit
onloadedmetadata
onstalled
ondragleave
onloadstart
onsubmit
ondragover
onmousedown
onsuspend
ondragstart
onmousemove
ontimeupdate
ondrop
onmouseout
onvolumechange
ondurationchange
onmouseover
onwaiting
onemptied
onmouseup
پشتیبانی مرورگر
برچسب embedدر همه مرورگرهای اصلی نظیر اینترنت اکسپلورر، فایرفاکس ، اپرا ، گوگل کروم و سافاری پشتیبانی می شود.
آموزش زبان html, سایر آموزش هاتگ footer و کاربرد آن در html
مهر ۹, ۱۳۹۳ سپیده محراب دیدگاهی بنویسید
تگ footer و کاربرد آن در html
برچسب <footer> برای یک سند و یا بخش، یک پا صفحه تعریف می کند و شامل اطلاعات عناصری است که در داخل آن قرار دارند.
Footer یا پا صفحه معمولا شامل اطلاعات نویسنده ی سند، اطلاعات کپی رایت، لینک شرایط استفاده ، اطلاعات تماس و غیره میباشد.
مثال ۱:
<!DOCTYPE html><html> <head></head> <body> <header> <h1>Talking Dogs</h1> <b><p>Humans aren't the only talkers!</p></b> </header> <nav></nav> <main> <article> <p>Ever encountered a talking dog? I have.</p> <p>It all happened one day as I was walking down the street...</p> </article> </main> <footer> © 2009 Woofer Dog Corporation </footer> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head></head>
<body>
<header>
<h1>Talking Dogs</h1>
<b><p>Humans aren't the only talkers!</p></b>
</header>
<nav></nav>
<main>
<article>
<p>Ever encountered a talking dog? I have.</p>
<p>It all happened one day as I was walking down the street...</p>
</article>
</main>
<footer>
© 2009 Woofer Dog Corporation
</footer>
</body>
</html>
تگ footer و کاربرد آن در html
تگ footer و کاربرد آن در html
نکته ۱: در یک سند html ممکن است چند عنصر footer وجود داشته باشد.
نکته ۲ : اطلاعات تماس داخل یک عنصر footer باید در داخل عنصر address قرار بگیرد.
نکته ۳: اگرچه این عنصر میتواند در داخل یک عنصر header یا یک عنصر footer دیگر قرار بگیرد اما نمیتواند حاوی عنصر header باشد .
تفاوت بین HTML 4.01 و HTML5
عنصر footer یک تگ جدید در HTML5 است.
تگ footer و کاربرد آن در htmlخاصیت ها
تگ HTML می تواند شامل یک یا چند خاصیت باشد که چگونگی ارائه در مرورگر را تعیین میکنند. خاصیت ها دارای یک نام و یک مقدار هستند که با علامت (=) از هم جدا شده اند. مقدار خاصیت با علامت نقل قول احاطه میشود .
۳ نوع خاصیت وجود دارد که شما می توانید به تگ های HTML خود اضافه کنید:
خاصیت ویژه عنصر
خاصیت عمومی
خاصیت رویداد
خاصیت ویژه عنصر
تگ footer هیچ خاصیت ویژه ای ندارد .
خاصیت های عمومی
تگ footer از خاصیت های عمومی HTML پشتیبانی میکند
accesskeyhidden
itemtype
class
id
lang
contenteditable
inert
spellcheck
contextmenu
itemid
style
dir
itemprop
tabindex
draggable
itemref
title
dropzone
itemscope
translate
خاصیت های رویداد
تگ footer از خاصیت های رویداد در HTML نیز پشتیبانی میکند.
onabortonended
onmousewheel
oncancel
onerror
onpause
onblur
onfocus
onplay
oncanplay
onformchange
onplaying
oncanplaythrough
onforminput
onprogress
onchange
oninput
onratechange
onclick
oninvalid
onreadystatechange
oncontextmenu
onkeydown
onscroll
ondblclick
onkeypress
onseeked
ondrag
onkeyup
onseeking
ondragend
onload
onselect
ondragenter
onloadeddata
onshow
ondragexit
onloadedmetadata
onstalled
ondragleave
onloadstart
onsubmit
ondragover
onmousedown
onsuspend
ondragstart
onmousemove
ontimeupdate
ondrop
onmouseout
onvolumechange
ondurationchange
onmouseover
onwaiting
onemptied
onmouseup
پشتیبانی از مرورگر ها
اعداد مشخص شده در جدول زیر ، اولین نسخه ی مرورگرهایی که به طور کامل از این عنصر پشتیبانی میکنند را مشخص میکند .
عنصر
گوگل کروماینترنت اکسپلورر
فایرفاکس
سافاری
اپرا
< footer>
۶٫۰
۹٫۰
۴٫۰
۵٫۰
۱۱٫۱
