آموزش طراحی سایت

به روز ترین مطالب آموزشی و متدلوژی های برنامه نویسی

آموزش کن وس Shadow در HTML

۱۷ بازديد

آموزش کن وس Shadow در HTML

چطوری سایه بیندازیم؟

از آنجایی که اکنون می دانید چطور مستطیل بکشید، احتمالا تمایل داشته باشید با انداختن سایه آن را زیباتر کنید. این کار خیلی راحت انجام می شود. لازم است که فقط چند خط بیشتر به کد برنامه خود اضافه کنید. اجازه دهید اول به چند ویژگی که در انداختن سایه دخیل هستند، نگاهی داشته باشیم.

Descriptions
Context properties
فاصله ی افقی (x-axis) بین سایه و شکل در پیکسل.
shadowOffsetX
فاصله ی عمودی(y-axis) بین سایه و شکل در پیکسل.
shadowOffsetY
تا چه اندازه می خواهید سایه شما محو باشد.
shadowBlur
واضح است که برای تنظیم رنگ سایه استفاده می شود.
shadowColor

و در ادامه می بینید.

<div><canvas id="c8" width="200" height="200" style="border:solid 1px #000000;">canvas>div>
<script>
    var c8 = document.getElementById("c8");
    var c8_context = c8.getContext("2d");
‎   function draw_rectangle() {
    c8_context.shadowOffsetX = 5;
    c8_context.shadowOffsetY = 5;
    c8_context.shadowBlur = 10;
    c8_context.shadowColor = "DarkGoldenRod";
    c8_context.fillStyle = "Gold";
    c8_context.fillRect(20, 20, 100, 120);
   ‎}
    window.onload = draw_rectangle();
script

همانطور که در کد بالا می بینید، برای ترسیم یک شکل با سایه، قبل از کشیدن سایه لازم است ویژگی های آن را مشخص کنید.

جهت مشاهده مثال ها برروی دوره آموزش طراحی سایت کلیک نمایید.

آموزش کن وس Rectangle در HTML

۱۹ بازديد

آموزش کن وس Rectangle در HTML

قبل از فکر کردن در مورد ایجاد بازی های کنشی HTML5، اجازه دهید با اساس آن شروع کنیم.
ابتدا روی دکمه ی قرمز کلیک کنید. اگر دکمه ی قرمز در بوم نقاشی نمی بینید، احتمالا تمایل داشته باشید مرورگر درستی برای ادامه بگیرید.

<canvas id="c1" width="200" height="200" style="border:solid 1px #000000;">canvas>
‎<button onclick="draw_square();return true;">Red Squarebutton>
<script>
    function draw_square() {
    ‎  var c1 = document.getElementById("c1");
    ‎  var c1_context = c1.getContext("2d");
    ‎  c1_context.fillStyle = "#f00";
    ‎  c1_context.fillRect(50, 50, 100, 100);
    ‎}
script>‎

برای کشیدن هرچیزی در بوم نقاشی، چیزی بین برچسب opening و برچسب closing از
قرار ندهید، مرورگرهایی که بوم نقاشی را پشتیبانی می کنند، آن را نادیده خواهند گرفت. شما می توانید فقط از جاوااسکریپت برای انجام نقاشی خود استفاده کنید.
قانون شماره یک، عنصر بوم نقاشی شما باید دارای یک ID باشد، بنابراین می توانیم از جاوااسکریپت برای قراردادن آن استفاده کنیم. قانون شماره دو، هر بوم نقاشی دارای یک کانتکست می باشد. در واقع کانتکست بوم نقاشی آن چیزی است که قرار است روی آن نقاشی بکشیم، نه خود بوم.

var c1 = document.getElementById("c1");
   var c1_context = c1.getContext("2d");‎


از لحاظ نگارش، نه تنها کانتکست های دو بعدی، بلکه سه بعدی آن نیز در دسترس می باشند. به هرحال کانتکست سه بعدی که webGL نامیده می شود، برای شما توسط W3G یا WHATWG آورده نمی شودبلکه توسط یک شرکت غیرانتفاعی به نام Khronos Group ارائه می شود. علاوه بر آن گوگل هم در دسامبر 2010 برای اطمینان بیشتر آینده ی این استاندارد، تولید شگفت انگیز Body Browser را آزاد کرد.
اجازه دهید از رنگ قرمز (fillStyle="#f00";) استفاده کرده و یک مربع قرمز با اضلاع 100px بکشیم.
 
c1_context.fillStyle = "#f00";
c1_context.fillRect(50, 50, 100, 100);‎

جدول زیر روش های کشیدن مستطیل را نشان می دهد.

Descriptions
Methods of "Context"
رنگ CSS، الگو یا گرادیان داخل شکل. پیش فرض fillstyle رنگ سیاه می باشد.
fillStyle
رنگ یا روش CSS از خطوط شکل.
strokeStyle
مسطتیلی بکشید که از نقطه ی x و y شروع می شود و اندازه ی طول x عرض باشد.
fillRect(x, y, width, height)
مستطیلی فقط با حاشیه های آن رسم کنید.
strokeRect(x, y, width, height)
ناحیه مشخص شده در مختصات x و y و همچنین در عرض x طول را روشن کنید.
clearRect(x, y, width, height)

جهت مشاهده نمونه مثال ها برروی دوره آموزش طراحی سایت کلیک نمایید.

آموزش کن وس Canvas

۲۱ بازديد

آموزش کن وس Canvas

یکی از داغ ترین موضوعات HTML5 موضوع canvas می باشد، اما دقیقا canvas چیست؟
canvas یک پارچه ی ساده بافته شده ی سنگین می باشد که برای ساختن قایق، چادر، کوله پشتی، خیمه و دیگر ابزاری که استحکام لازم دارند، استفاده می شود. و همچنین توسط نقاشان به عنوان سطح نقاشی که روی چارچوب چوبی نصب شده باشد، استفاده می شود.
شاید این جوابی که شما به دنبال آن بودید، نباشد.به هرحال canvas در HTML5 از کاربرد آن توسط هنرمندان تقلید می کند و بوم نقاشی نامیده می شود.
بوم نقاشی یک فضای خالی بدون رنگ ( حتی بدون سفید) است، که قرار است با مداد و قلم موی جاوااسکریپت تبدیل به یک کار هنری شود.
البته که وجود بوم نقاشی تنها برای یک تصویر ثابت نیست. تصویر ثابت می تواند به سادگی به وسیله ی عنصر قدیمی img مورد بررسی قرار بگیرد. با جاوااسکریپت به عنوان قلم موی خود، می توانید یک انیمیشن شاد و یا حتی بازیهای تکرار شونده ایجاد کنید.
اگر قبلا انیمیشن های درخشانی ایجاد کرده اید و امید دارید که یک ورژن HTML5 ایجاد کنید، ابزاری وجود دارند که در انجام آن به شما کمک می کنند. یکی از آنها Flash to HTML5 می باشد.
HTML5 مقوله ی خیلی بزرگی است، آنقدر بزرگ که می توانید در مورد آن یک کتاب بنویسید. هدف من در این آموزش تحت پوشش قرار دادن جزئیات مربوط به بوم نقاشی نیست، بلکه تنها معرفی مختصری از آن است. به یاد داشته باشد که این تنها شروع آن است.
برای ایجاد بوم نقاشی، کد ساده ی زیر لازم است.

canvas width="200" height="200">canvas>‎>

به هرحال به یاد داشته باشید که مرز یک بوم نقاشی یک آبجکت ناپیداست. این برنامه فضایی را می گیرد اما شما آن را نمی بینید. اجازه دهید یک سبک مرزی اضافه کرده و از ID برای مرجع استفاده کنیم. هدف از ID این است که با استفاده از DOM (document object model) آن را قابل دسترس کنیم. بدون مرجع ID، جاوا اسکریپت، در این مورد قلم موی شما، هیچ ایده ای برای نقاشی روی بوم ندارد.

‎<canvas id="Canvas1" width="200" height="200" style="border:solid 1px #000000">canvas>‎

اگر در قسمت بالا به جای یک تیره و مربع، یک جمجمه با دو استخوان ضربدری می بینیدبه این معناست که مرورگر شما بوم نقاشی را پشتیبانی نمی کند. ممکن است تمایل داشته باشید مرورگری دانلود کنید که با بوم نقاشی کار کند، همانطور که در زیر می بینید.

Basic Canvas Support
Browsers
✓ (requires ExplorerCanvas)
IE 7
IE 9 Beta
Firefox 3.0
Safari 3.0
Chrome 3.0
Opera 10
 

HTML Layouts

۲۴ بازديد

HTML Layouts

آموزش HTML Layout ‏ ‏

Layout برای یک صفحه ی وب بسیار مهم است، چرا که دید بهتری نسبت به وب سایت شما ارائه می دهد. طراحی Layout خوب با منظره و حس خوب برای یک وب سایت زمان فوق العاده زیادی می گیرد. این روزها همه ی وب سایت های مدرن از چارچوب هایی بر اساس جاوااسکریپت و CSS استفاده میکنند تا به وب سایت های پاسخگو و دینامیک پیروز شوند، اما کار یک Layout در صفحه ی وب شما، صرفا از HTML و ویژگی های ان استفاده می کند.

 

Layout HTML – استفاده از جدول ها

ساده ترین و محبوب ترین راه برای ایجاد Layout ها، استفاده از برچسب < table>در HTML می باشد. این جدول ها در ردیف ها و ستون ها منظم می شوند که شما می توانید از این ردیف ها و ستون ها به هر طریقی که می خواهید استفاده کنید.


 مثال:

برای مثال، نمونه Layout HTML زیر از طریق استفاده ی یک جدول با سه ردیف و دو ستون به دست می آید، اما عنوان و پاورقی ستون هر دو ستون را با استفاده از ویژگی colspan احاطه می کند.

 

نمونه یک

Layout های HTML – استفاده از DIV و Span

عنصر < div>یک عنصر block level می باشد که برای گروه بندی عناصر HTML استفاده می شود. در حالیکه این عنصر یک عنصر block level است، عنصر< span>برای گروه بندی عناصر در یک سطح درون خطی استفاده می شوند.
گرچه می توانیم با جدول های HTML ، Layout های بسیار زیبایی به دست آوریم، اما جدول ها در واقع به عنوان ابزار Layout طراحی نشده اند، و بیشتر برای نمایش داده های جدولی استفاده می شوند.

 

نمونه دو

 توجه:

این مثال از CSS استفاده می کند، بنابراین قبل از درک این مثال، بهتر است درک بهتری از چگونگی کار CSS داشته باشید.

 مثال:

در اینجا سعی می کنیم با استفاده از برچسب < div> همراه با CSS همان نتیجه ای را به دست اوریم که هنگام استفاده از برچسب < table> در مثال قبل به دست آوردیم.

 

نمونه سه

شما می توانید با استفاده از DIV و SPAN به همراه CSS، Layout های بهتری طراحی کنید. برای درک بیشتر از CSS لطفا به CSS Tutorial مراجعه کنید.

برای مشاهده این نمونه برروی دوره آموزش طراحی سایت کلیک نمایید.



جاوااسکریپت در html

۱۶ بازديد

جاوااسکریپت در html

آموزش javascript‏

یک اسکریپت قطعه ی کوچکی از برنامه است که می تواند به وب سایت شما تعامل اضافه کند. به عنوان مثال یک اسکریپت می تواند یک هشدار پاپ آپ مربوط به باکس پیغام تولید کند، یا یک منوی رو به پایین ایجاد کند. این اسکریپت توسط javascript یا VBScript نوشته می شود.
شما می توانید با استفاده از هر زبان اسکریپتی، کارکردهای متنوع کوچکی به نام گردانندگان رویداد بنویسید و سپس می توانید آن عملکردها را با استفاده از ویژگی های HTML اجرا کنید.
این روزها فقط javascript و چارچوب های متناظر با آن توسط بسیاری از توسعه دهندگان وب استفاده می شوند. VBScript حتی توسط برخی مرورگرها پشتیبانی هم نمی شود.
شما می توانید کد javascript را در یک فایل مجزا نگهداری کرده و سپس هرزمان که لازم بود آن را وارد کنید، یا می توانید قابلیت را در داخل خود داکیومنت HTML تعریف کنید. اجازه بدهید هر دو مورد را یکی یکی با مثال های مناسب بررسی کنیم.

 

جاوااسکریپت خارجی

اگر قصد دارید قابلیتی را تعریف کنید که در انواع داکیومنت های HTML استفاده می شود، بهتر است آن قابلیت را در یک فایل مجزای جاوااسکریپت حفظ کرده و آن فایل را وارد داکیومنت های HTML خود کنید. یک فایل جاوااسکریپت دارای ضمیمه هایی مانند js می باشد که با استفاده از برچسب< script>وارد فایل های HTML می شود.


 مثال:

تصور کنید که با استفاده از جاوااسکریپت در script.js یک عملکرد کوچک را تعریف می کنیم که دارای کد زیر می باشد.


function Hello()
{
    alert("Hello, World");
}



اکنون اجازه بدهید از فایل جاوااسکریپت خارجی بالا در داکیومنت HTML خود استفاده کنیم، مانند زیر

<input type="button" onclick="Hello();" name="ok" value="Click Me">

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

 

جاوا اسکریپت درونی

شما می توانید کد جاوااسکریپت را مستقیما روی داکیومنت HTML خود بنویسید. معمولا کد اسکریپت را با استفاده از برچسب< script>در سربرگ داکیومنت نگهداری می کنیم در غیر این صورت هیچ محدودیتی وجود نداشته و می توانید کد خود را در هر جایی در داکیومنت به جز داخل برچسب < script> نگه دارید.

 

نمونه یک

 
Javascript Internal Script

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

 

گردانندگان رویدادها(()EventHandler)

گردانندگان رویدادها عملکردهای تعریف شده ی ساده ای می باشند که می توانند برعلیه هر یک از عملکردهای ماوس یا صفحه کلید فراخوانده شوند. شما می توانید عملکرد خود را در یک گرداننده ی رویداد تعریف کنید که می تواند یک خط تا 1000 خط کد باشد.
در زیر مثالی را می بینید که چگونگی نگارش یک گرداننده ی رویداد را نشان می دهد. اجازه بدهید یک تیتر ساده ی ()EventHandler را در تیتر داکیومنت بنویسیم. هر زمان که کاربر ماوس را روی یک پاراگراف بیاورد، این عملکر را فرا خواهیم خواند.

 

نمونه دو

برای مشاهده نمونه دو برروی دوره آموزش طراحی سایت کلیک نمایید.



HTML Style Sheet

۲۴ بازديد

HTML Style Sheet

آموزش طراحی سایت 

آموزش Cascading style sheet ‏ ‏

Cascading style sheet (CSS) بیان می کند که داکیومنت ها روی صفحه و در چاپ چگونه نشان داده می شوند، یا شاید چگونه بیان می شوند. از زمانی که کنسرسیوم در سال 1994 تاسیس شد، W3C به طور فعالانه ای در استفاده از Style sheet روی وب پیشرفت کرده است.
CSS جایگزین های ساده و موثری را برای تعیین ویژگی های مختلف برچسب های HTML ارائه می دهد. با استفاده از CSS شما می توانید تعدادی از ویژگی های طراحی را برای یک HTML ارائه شده تعیین کنید. هر ویژگی دارای نام مقدار میباشد که به وسیله ی علامت (:) از هم جدا شده اند. اطلاعیه ی مربوط به هر ویژگی نیز توسط علامت نقطه ویرگول (;) از یکدیگر جدا شده اند.


 مثال:

ابتدا اجازه بدهید که مثالی از داکیومنت HTML را مورد بررسی قرار دهیم که برای تعیین رنگ و اندازه ی فونت از برچسب < font> استفاده می کند.

 

نمونه یک





HTML CSS


Hello, World!






می توانیم با استفاده از style sheet مثال بالا را مانند زیر بازنویسی کنیم.

نمونه دوم

HTML CSS

Hello, World!

 

شما می توانید به سه روش از CSS در داکیومنت HTML خود استفاده کنید.

 

  • Style sheet خارجی – قوانین style sheet را در یک فایل css مجزا تعریف می کند، و سپس آن فایل را با استفاده از برچسب در HTML وارد داکیومنت HTML شما می کند.
  • Style sheet داخلی – قوانین style sheet را در با استفاده از برچسب< style>در بخش سربرگ داکیومنت HTML تعریف می کند.
  • Inline style sheet – قوانین style sheet را مستقیما و به همراه عناصر HTML با استفاده از ویژگی style تعریف می کند.

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

 

Style sheet خارجی

اگر می خواهید از style sheet خود در صفحات مختلف استفاده کنید، توصیه می شود که یک style sheet متداول در یک فایل مجزا تعریف کنید. یک فایل cascading style sheet دارای ضمیمه هایی مانند css می باشد و با استفاده از برچسب < link> وارد فایل های HTML خواهد شد.


 مثال:

توجه داشته باشید که ما یک فایل style sheet به نام style.css که دارای قوانین زیر می بشد، تعریف می کنیم.


.red{
   color: red;
}
.thick{
   font-size:20px;
}
.green{
   color:green;
}



در اینجا سه قانون CSS را تعریف کردیم که برای سه گروه متفاوت تعریف شده در برچسب های HTML مناسب می باشند. پیشنهاد می کنم در مورد چگونگی تعریف این قوانین خود را اذیت نکنید، زیرا هنگام مطالعه ی CSS آنها را فرا خواهید گرفت.
اکنون اجازه بدهید از فایل CSS خارجی بالا در داکیومنت HTML زیر استفاده کنیم.


< !DOCTYPE html>
 
< html>
< head>
< title>HTML External CSS< /title>
<link rel="stylesheet" type="text/css" href="/html/style.css">
 
< /head>
< body>
< p class="red">This is red< /p>
  
< p class="thick">This is thick< /p>
  
< p class="green">This is green< /p>
  
< p class="thick green">This is thick and green< /p>
< /body>
< /html>
 
این مثال نتیجه ی زیر را تولید خواهد کرد.

This is red
This is thick
This is green
This is thick and green


Style sheet داخلی

اگر می خواهید قوانین style sheet را برای یک داکیومنت مجزا به کار ببرید، فقط آن موقع است که می توانید این قوانین را با استفاده از برچسب< style>وارد بخش سربرگ داکیومنت HTML کنید.
قوانین تعریف شده در style sheet داخلی، قوانین تعریف شده در فایل CSS خارجی را نیز در بر می گیرد.


 مثال:

اجازه بدهید مثال بالا را یک بار دیگر بازنویسی کنیم، اما در اینجا قوانین style sheet را در همان داکیومنت HTML و با استفاده از برچسب< style>می نویسیم.

 

نمونه سوم


<!DOCTYPE html>
HTML Internal CSS

This is red

 

This is thick

 

This is green

 

This is thick and green



شما می توانید با استفاده از ویژگی style از برچسب مربوطه، قوانین style sheet را مستقیما برای هر عنصر HTML به کار برید. این امر فقط زمانی می تواند انجام شود که شما علاقمند به ایجاد تغییرات خاص در هرکدام از عناصر HTML می باشید.
قوانین تعریف شده با عنصر درون خطی، قوانین تعریف شده در یک فایل CSS خارجی و نیز قوانین تعریف شده در یک عنصر< style>را در برمی گیرد. اجازه بدهید مثال بالا را یک بار دیگر بازنویسی کنیم، اما این بار قوانین style sheet را همراه با قوانین HTML و با استفاده از ویژگی style در عناصر خواهیم نوشت.

نمونه چهارم


HTML Inline CSS

This is red

 

This is thick

 

This is green

 

This is thick and green

سربرگ HTML

۲۰ بازديد

سربرگ HTML‏‏

یاد گرفتیم که یک نمونه داکیومنت HTML دارای ساختار زیر می باشد.

Document declaration tag
< html>
< head>
    Document header related tags
< head>
< body>
    Document body related tags
< body>
< html>

این فصل جزئیات بیشتری در مورد بخش سربرگ در HTML ارائه می دهد که به وسیله ی برچسب< head>نمایش داده می شود. برچسب< head>حاوی برچسب های مهمی می باشد که عبارتند از:< title>, < meta>, < link>, < base>,< style>, < script >, و < noscript > tags.


برچسب < title> در HTML

این برچسب برای تعیین تیتر داکیومنت HTML استفاده می شود. در زیر مثالی می بینید از ارائه ی تیتر به داکیومنت HTML.


نمونه یک

HTML Title Tag Example

Hello, World!

 

برچسب < meta> در HTML

این برچسب برای ارائه ی متادیتا در مورد داکیومنت HTML استفاده می شود که اطلاعاتی از قبیل انقضا صفحه، گردآورنده ی صفحه، لیست کلمات کلیدی، توصیف صفحه و غیره ارائه می دهد.
در ادامه استفاده های مهم برچسب < meta> در داکیومنت HTML ارائه شده اند

 

نمونه دو

HTML Title Tag Example
 
 
 
 
 
 

Hello, World!

برچسب < base> در HTML

این برچسب برای تعیین URL پایه برای همه ی URL های وابسته در صفحه استفاده می شود، که به این معناست که همه ی URL های دیگر هنگامی که برای آیتم ارائه شده قرار می گیرند، دیگر URL ها به URL پایه زنجیر خواهند شد.
به عنوان مثال تمام صفحات و تصاویر ارائه شده، پس از پیشوند دار کردن URL های ارائه شده با URL پایه مسیر prefixing جستجو خواهند شد

 

نمونه سه

HTML Title Tag Example
Logo Images

برچسب < link> در HTML

این برچسب ارتباط بین داکیومنت جاری و منبع خارجی را تعیین می کند. در ادامه مثالی را می بینید از لینک یک فایل style sheet خارجی موجود در مسیر css با یک web root.

 

نمونه چهار

HTML Title Tag Example

Hello, World!

برچسب< style>در HTML

این برچسب برای تعیین style sheet برای داکیومنت جاری HTML استفاده می شود. در ادامه مثالی را می بینید از تعریف برخی قوانین style sheet در داخل برچسب< style>.

 

نمونه پنج




HTML style Tag Example




Hello, World!





 توجه:

برای فراگیری چگونگی کار Cascading Style Sheet یک آموزش مجزای موجود در اینجا را کلیک کنید.

برچسب< script>در HTML

این برچسب برای وارد کردن فایل اسکریپت خارجی و یا تعریف فایل اسکریپت داخلی برای داکیومنت HTML استفاده می شود. در زیر مثالی را می بینید که در آن از جاوا اسکریپت برای تعریف عملکرد ساده ی جاوااسکریپت استفاده می کنیم.

 

نمونه شش




HTML Title Tag Example








جهت مشاهده کدها برروی آموزش طراحی سایت کلیک نمایید 

HTML Embed Multimedia

۲۲ بازديد

HTML Embed Multimedia

آموزش طراحی سایت 

آموزش چند رسانه ای در HTML‏ ‏

گاهی اوقات تمایل دارید که موسیقی یا ویدئو به صفحه ی وب خود اضافه کنید. ساده ترین راه برای افزودن صدا یا ویدئو به وب سایت، وارد کردن برچسب خاص HTML به نام < embed> می باشد. این برچسب باعث می شود که مرورگر به طور خودکار کنترل هایی را برای مولتی مدیا وارد کند که مرورگر ارائه شده برچسب < embed> و نوع مدیای ارائه شده را پشتیبانی می کند.
همچنین می توانید یک برچسب < noembed>برای مرورگرهایی وارد کنید که برچسب < embed> را نمی شناسند. به عنوان مثال می توانید از < embed> برای نمایش یک فیلم به انتخاب خود استفاده کنید واگر مرورگر < embed> را پشتیبانی نمی کند، از< noembed> برای نمایش یک تصویر JPG مجزا استفاده کنید.


 مثال:

در اینجا مثال ساده ای می بینید از اجرای یک فایل جاسازی شده ی midi.

 

مرحله 1

HTML embed Tag <title></span></div> <div style="direction: ltr;"><span style="font-size: 12px;"><head></span></div> <div style="direction: ltr;"><span style="font-size: 12px;"><body></span></div> <div style="direction: ltr;"><span style="font-size: 12px;"><embed src="/html/yourfile.mid"` width="100%" height="60"></span></div> <div style="direction: ltr;"><span style="font-size: 12px;"><noembed><img src="yourimage.gif" alt="Alternative Media"><noembed></span></div> <div style="direction: ltr;"><span style="font-size: 12px;"><embed></span></div> <div style="direction: ltr;"><span style="font-size: 12px;"><body></span></div> <div style="direction: ltr;"><span style="font-size: 12px;"><html><br /><br /></span> <h3 class=" InnerTitle1" style="text-align: right;">ویژگی های برچسب < embed></h3> <p style="text-align: right;">در زیر لیستی از ویژگی های مهمی را می بینید که توسط برچسب < embed> استفاده می شود.</p> <span style="font-size: 12px;"><br /></span> <div class="divTable"> <div class="divTableBody"> <div class="divTableRow"> <div class="divTableHead">Attribute</div> <div class="divTableHead">Description</div> </div> <div class="divTableRow"> <div class="divTableCell">align</div> <div class="divTableCell">تعیین می کند که چگونه یک آبجکت را تنظیم کرد، که می تواند هم در مرکز، هم در راست و یا چپ تنظیم شود.</div> </div> <div class="divTableRow"> <div class="divTableCell">autostart</div> <div class="divTableCell">این ویژگی Boolean نشان می دهد که آیا مدیا باید به طور خودکار شروع به کار کند. شما می توانید آن را با true یا false تنظیم کنید.</div> </div> <div class="divTableRow"> <div class="divTableCell">loop</div> <div class="divTableCell">تعیین می کند که آیا صدا متداولا پشت سرهم تکرار شود( لوپ را روی true تنظیم کنید)، یا چند دفعه باید تکرار شود ( یک مقدار مثبت) و یا اصلا تکرار نشود(false).</div> </div> <div class="divTableRow"> <div class="divTableCell">playcount</div> <div class="divTableCell">تعداد دفعاتی را که یک صدا باید تکرار شود تعیین می کند. اگر در حال استفاده از IE هستید، این گزنیه جایگزینی برای loop می باشد.</div> </div> <div class="divTableRow"> <div class="divTableCell">hidden</div> <div class="divTableCell">مشخص می کند که آیا آبجکت مولتی مدیا باید روی صفحه نمایش داده شود.مقدار false یعنی نه و مقدار true یعنی بله.</div> </div> <div class="divTableRow"> <div class="divTableCell">width</div> <div class="divTableCell">عرض آبجکت به پیکسل.</div> </div> <div class="divTableRow"> <div class="divTableCell">height</div> <div class="divTableCell">عرض آبجکت به پیکسل.</div> </div> <div class="divTableRow"> <div class="divTableCell">name</div> <div class="divTableCell">نامی که برای اشاره به آبجکت استفاده می شود.</div> </div> <div class="divTableRow"> <div class="divTableCell">src</div> <div class="divTableCell">URL مربوط به آبجکت که باید جاسازی شود.</div> </div> <div class="divTableRow"> <div class="divTableCell">volume</div> <div class="divTableCell" style="direction: rtl;">میزان صدا را کنترل می کند که می تواند از 0 (صدا قطع شده) تا 100 (آخرین حد صدا) باشد.</div> </div> </div> </div> <h3 class=" InnerTitle1" style="direction: rtl;">انواع ویدیوهای پشتیبانی شده</h3> <p style="direction: rtl;">می توانید از انواع مدیاهای مختلفی مانند فایل های flash movies، AVi و MOV در داخل برچسب embed استفاده کنید.</p> <span style="font-size: 12px;"><br /></span> <div style="direction: rtl;">فایل های swf – فایل هایی هستند که با برنامه ی macromedia’s flash تولید می شوند.</div> <div style="direction: rtl;">فایل های wmv – انواع فایل های تصویری ویندوز مایکروسافت می باشند.</div> <div style="direction: rtl;">فایل های mov - فرمت Quick time movie در اپل.</div> <div style="direction: rtl;"> فایل های mpeg – فایل های تصویری هستند که توسط گروه تخصصی تصاویر متحرک (Moving Pictures Expert Group) ایجاد می شوند.</div> <div class="example"> <h2 class="example_head" style="direction: rtl; text-align: right;">مرحله2<br /><br /></h2> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><!DOCTYPE html></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><html xmlns="http://www.w3.org/1999/xhtml"></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><head></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><title>HTML embed Tag<title></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><head></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><body></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><embed src="/html/yourfile.swf" width="200" height="200"></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><noembed><img src="yourimage.gif" alt="Alternative Media"><noembed></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><embed></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><body></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><html><br /></span> <h3 class=" InnerTitle1" style="text-align: right;">صدای زمینه</h3> <p style="text-align: right;">شما می توانید از برچسب < bgsound>در html برای اجرای صدا در زمینه ی صفحه ی وب خود استفاده کنید. این برچسب فقط توسط اینترنت اکسپلورر پشتیبانی می شود و دیگر مرورگرها آن را نادیده می گیرند. زمانی که سند اصلی در ابتدا توسط کاربر دانلود شده و نمایش داده می شود، این برچسب یک فایل صدا را دانلود کرده و اجرا می کند. همچنین هروقت کاربر مرورگر را تازه سازی کند، صدای زمینه نیز دوباره اجرا خواهد شد.این برچسب دارای فقط دو ویژگی می باشد، loop و src، که همانطور که در بالا توضیح داده شد هر دوی این ویژگی ها دارای یک معنا می باشند.<br />در اینجا مثال ساده ای از اجرای فایل کوچک midi را می بینید.</p> <span style="font-size: 12px;"><br /></span> <div class="example"> <h2 class="example_head" style="text-align: right;">جهت مشاهده مثالها برروی <a title="دوره آموزش طراحی سایت" href="http://www.tahlildadeh.com/CourseDetails/28/%D8%AF%D9%88%D8%B1%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-Web-Design.aspx">دوره آموزش طراحی سایت</a> کلیک نمایید</h2> </div> </div> </div> </div> </div> <div id="gtx-trans" style="position: absolute; left: 639px; top: -11.9236px;"> </div> </div> <div class="post-tags"> <span class="tag"> </span> برچسب ها: <a href="https://tahlildadeh.farsiblog.com/tag/آموزش+طراحی+سایت/">آموزش طراحی سایت</a>, <a href="https://tahlildadeh.farsiblog.com/tag/دوره+طراحی+سایت/">دوره طراحی سایت</a>, <a href="https://tahlildadeh.farsiblog.com/tag/طراحی+سایت+دیجی+کالا/">طراحی سایت دیجی کالا</a>, </div> </div> <div class="post-info"> <ul> <li> <div class="postlike"><a href="https://tahlildadeh.farsiblog.com/prate/upcDzJWLFpzPCOPyL/" class="uplike"><span class="like-up"></span></a><span class="up-result"><span class="fbrateQuery fbrateUp" id="fbrate_upcDzJWLFpzPCOPyL">۰</span></span><a href="https://tahlildadeh.farsiblog.com/prate/downcDzJWLFpzPCOPyL/" class="downlike"><span class="like-down"></span> </a><span class="down-result"><span class="fbrateQuery fbrateDown" id="fbrate_downcDzJWLFpzPCOPyL">۰</span></span></div> </li> <li> <span class="postcmnt"> <a href="https://tahlildadeh.farsiblog.com/post/HTML-Embed-Multimedia/#comments">۰ نظر</a></span> </li> </ul> </div> </div><div class="post"> <div class="post-title"> <span class="post-title-icon"></span> <h2><a href="https://tahlildadeh.farsiblog.com/post/آموزش-لینک-های-عکس-در-html/" target="_blank"> آموزش لینک های عکس در html </a></h2> </div> <div class="post-body"> <div class="post-details"><span class="postauthor">پیمان کلانتری</span> <span class="postdate"> جمعه ۰۷ خرداد ۰۰ | ۱۲:۳۷ </span> <span class="postviews"> ۱۹ بازديد </span> </div> <div class="post-cnt"> <h1 class="MainTitle">آموزش لینک های عکس در html</h1> <h2 class=" InnerTitle"><a title="آموزش طراحی سایت" href="http://www.tahlildadeh.com/CourseDetails/28/%D8%AF%D9%88%D8%B1%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-Web-Design.aspx">آموزش طراحی سایت</a> - آموزش Image Link</h2> <p>تاکنون مشاهده کردیم که چگونه با استفاده از متن، یک لینک هایپرتکست ایجاد کنیم و همچنین فرا گرفته ایم که چگونه از تصاویر در صفحات وب خود استفاده کنیم. اکنون فرا خواهیم گرفت که چگونه با استفاده از تصاویر هایپرلینک ایجاد کنیم.</p> <h1 class="MainTitle"><br /><span class="SampleTitle"> مثال:</span></h1> <p>استفاده از تصویر به عنوان هایپرلینک بسیار ساده می باشد. لازم است که یک تصویر را در داخل هایپرلینک در محل تصویر قرار دهیم، همانطور که در زیر نشان داده شده است.</p> <h1 class="MainTitle"> </h1> <div class="example"> <h2 class="example_head" style="text-align: right;">نمونه یک<br /><br /></h2> <div style="direction: ltr;"><span style="font-size: 10pt;"><!DOCTYPE html></span></div> <div style="direction: ltr;"> </div> <div style="direction: ltr;"><span style="font-size: 10pt;"><html xmlns="http://www.w3.org/1999/xhtml"></span></div> <div style="direction: ltr;"><span style="font-size: 10pt;"><head></span></div> <div style="direction: ltr;"><span style="font-size: 10pt;"><title>Image Hyperlink Example

Click following link

tahlildadeh

 

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

 

تصاویر حساس به ماوس

استانداردهای HTML و XHTML یک ویژگی ارائه می دهند که به شما اجازه می دهد لینک های مختلفی را در داخل یک تصویر اجرا کنید. شما می توانید براساس مختصات مختلف موجود روی تصویر، لینک های مختلفی را روی یک تصویر مجزا ایجاد کنید. زمانی که لینک های متفاوت به مختصات متفاوت ضمیمه می شود، می توانیم برای باز کردن داکیومنت های تارگت روی بخش های مختلف تصویر کلیک کنیم. چنین تصاویری که به ماوس حساس می باشند، تصاویر نقشه نامیده میشوند. دو روش برای ایجاد چنین تصاویری وجود دارد.

 

  • Server-side image maps - توسط ویژگی ismap از برچسب < img> فعال می شود و دستیابی به یک سرور و پردازش برنامه های مربوط به تصویر نقشه لازم می باشد.
  •  Client-side image maps - با استفاده از ویژگی usemap از برچسب < img> همراه با برچسب های متناظر< map> و < area> ایجاد می شود.

Server side image maps

آموزش html css

در اینجا به سادگی تصویر خود را داخل یک هایپرلینک قرار داده و از ویژگی ismap استفاده کنید که آن را یک تصویر خاص می سازد و وقتی یوزر در بخشی از تصویر کلیک می کند، مرورگر مختصات اشاره گر ماوس را همراه با URL مشخص شده در برچسب < a>به سرور وب منتقل می کند. سرور از مختصات اشاره گر ماوس استفاده می کند تا تعیین کند کدام داکیومنت باید به مرورگر بازگردانده شود.
زمانی که ismap استفاده می شود، ویژگی href از برچسب < a> باید URL یک برنامه ی سرور را مانند یک cgi یا اسکریپت PHP و غیره در برداشته باشد، تا درخواست ورودی را براساس مختصات انتقال داده شده پردازش کند. مختصات موقعیت ماوس پیکسل های صفحه میباشند که از گوشه ی بالای سمت چپ تصویر شمرده می شوند و با (0,0) شروع می شوند. مختصات دنبال شده با یک علامت سوال، به انتهای URL اضافه می شوند.


 مثال:

نمونه دو

ISMAP Hyperlink Example

Click following link

tahlildadeh

سپس مرورگر پارامترهای جستجوی زیر را به سرور می فرستد که می تواند توسط اسکریپت ismap.cgi یا فایل map پردازش شود و شما می توانید هر داکیومنتی را که دوست داشته باشید به این مختصات لینک کنید.

 

/cgi-bin/ismap.cgi?20,30

از این طریق شما می توانید لینک های مختلفی را به مختصات متفاوت یک تصویر اختصاص دهید، و وقتی این مختصات کلیک می شوند، می توانید داکیومنت های لینک شده ی متناظر را باز کنید.

 

 توجه:

شما برنامه نویسی CGI را زمانی فراخواهید گرفت که برنامه نویسی perl را مطالعه کنید. می توانید اسکریپت خود را بنویسید تا این مختصات انتقال داده شده را با استفاده از PHP یا هر اسکریپت دیگری پردازش کنید. فعلا اجازه بدهید روی یادگیری HTML تمرکز کنیم، می توانید این فصل را بعدا بازبینی کنید.

Client side image maps

این تصاویر به وسیله ی ویژگی usemap از برچسب < img> فعال می شوند و به وسیله ی برچسب های ضمیمه ی< map>و< area> تعریف می شوند.
نقشه ای که قرار است نقشه را طراحی کند، به وسیله ی< img> به عنوان یک تصویرعادی وارد صفحه می شود، به جز اینکه این مورد ویژگی اضافه ای به نام usemap همرا خود دارد. مقدار ویژگی usemap مقداری می باشد که در یک برچسب< map>استفاده می شود تا برچسب های تصویر و نقشه را لینک کند.< map>همراه با برچسب های< area> همه ی مختصات تصویر و لینک های مربوطه را تعریف می کند.
برچسب< area> در داخل برچسب نقشه مختصات و شکل حاشیه های قابل کلیک در داخل تصویر را تعریف می کند. در اینجا مثالی از تصویر نقشه می بینید.

 

نمونه سه

 
Tahlildadeh
 


سیستم مختصات

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

rect = x1 , y1 , x2 , y2

x1 و y1 مختصات گوشه ی بالای سمت چپ از مستطیل می باشد. x2 و y2 مختصات گوشه ی سمت راست پایین می باشند.

circle = xc , yc , radius

xc و yc مختصات مرکز دایره و radius شعاع دایره می باشد. دایره ای به مرکز200,50 با شعاع 25 دارای ویژگی coords="200,50,25" خواهد بود.

poly = x1 , y1 , x2 , y2 , x3 , y3 ,... xn , yn

جفت های مختلف x-y رئوس چند ضلعی می باشند، با یک خط که از یک نقطه به نقطه ی دیگر کشیده شده. یک چندضلعی لوزی شکل با بالاترین راس آن در نقطه ی 20،20 و 40 پیکسل، در عریض ترین نقطه ی خود دارای ویژگی coords="20,20,40,40,20,60,0,40" می باشد.
تمام مختصات مربوط به بالاترین گوشه ی سمت چپ تصویر می باشند. هر شکل دارای یک URL مربوطه می باشد. می توانید از هر نرم افزار تصویری برای
دانستن مختصات موقعیت های مختلف استفاده کنید.


آموزش List

۱۴ بازديد

آموزش طراحی سایت - آموزش List

آموزش List

HTML سه روش برای مشخص کردن لیست هایی از اطلاعات ارائه می دهد. تمام لیست ها باید شامل یک یا بیشتر ازیک عنصر باشند. لیست ها ممکن است شامل موارد زیر شوند.

 

  • < ul>- لیست بدون ترتیب. این لیست آیتم ها را با استفاده از bullet های ساده لیست می کند.
  • < ol> - لیست منظم. این لیست از نمودارهای عددی مختلف برای لیست کردن آیتم های شما استفاده می کند.
  • < dl>- لیست تعریف. این لیست آیتم های شما را به همان روشی که در دیکشنری منظم شده اند، منظم می کند.

لیست های بدون ترتیب HTML

لیست بدون ترتیب مجموعه ای از آیتم های مربوط به هم می باشد که هیچگونه نظم و ترتیب خاصی ندارند. این لیست با استفاده از برچسب < ul> در HTML ایجاد می شود. هر آیتم در لیست با یک bullet مشخص می شود.

 مثال:

نمونه یک

 

    HTML Unordered List

   

           

  • Beetroot
  •        

  • Ginger
  •        

  • Potato
  •        

  • Radish
  •    

ویژگی type

می توانید از ویژگی type برای برچسب < ul> استفاده کنید تا نوع bullet خود را مشخص کنید، که به طور پیش فرض یک دیسک می باشد. در زیر گزینه های ممکن را مشاهده می کنید.

 

1
2
3
<ul type="square">
<ul type="disc">
<ul type="circle">ul>ul>ul>

 

در زیر مثالی را میبینید که در آن از < ul type="square"> استفاده می کنیم.

 

نمونه دو

    HTML Unordered List

   

           

  • Beetroot
  •        

  • Ginger
  •        

  • Potato
  •        

  • Radish
  •    

 

در زیر مثالی را می بینید که در آن از < ul type="disc"> استفاده کرده ایم.

 

نمونه سه

 

    HTML Unordered List

   

           

  • Beetroot
  •        

  • Ginger
  •        

  • Potato
  •        

  • Radish
  •    

 

در زیر مثالی را می بینید که در آن از < ul type="circle"> استفاده کرده ایم.


نمونه چهار

 

    HTML Unordered List

   

           

  • Beetroot
  •        

  • Ginger
  •        

  • Potato
  •        

  • Radish
  •    

 

لیست های منظم HTML

اگر تمایل دارید آیتم های خود را به جای قرار دادن در یک لیست دارای bullet، در یک لیست عددگذاری شده قرار دهید، می توانید از لیست منظم HTML استفاده کنید. این لیست با استفاده از برچسب < ol> ایجاد می شود. شماره گذاری از یک شروع شده و برای هر لیست منظم عنصر بعدی با اضافه شدن یک عدد و به همراه برچسب< li>اضافه می شود.
می توانید از ویژگی type برای برچسب < ol> استفاده کنیم تا نوع شماره گذاریمورد نظر خود را مشخص کنید. به طور پیش فرض شماره گذاری به وسیله ی عدد انجام می شود. در زیر گزینه های ممکن را مشاهده می کنید.

 

1
2
3
4
5
6
7
8
9
<ol type="1">
    - Default-Case Numerals.
<ol type="I">
        - Upper-Case Numerals.
<ol type="i">
            - Lower-Case Numerals.
<ol type="a">
                - Lower-Case Letters.
<ol type="A"> - Upper-Case Letters.ol>ol>ol>ol>ol>

در زیر مثالی را می بینید که در آن از < ol type="1"> استفاده کرده ایم.


نمونه پنج

 

    HTML Ordered List

   

           

  1. Beetroot
  2.        

  3. Ginger
  4.        

  5. Potato
  6.        

  7. Radish
  8.    

 

در زیر مثالی را می بینید که در آن از < ol type="I"> استفاده می کنیم.

 

نمونه شش

 

    HTML Ordered List

   

           

  1. Beetroot
  2.        

  3. Ginger
  4.        

  5. Potato
  6.        

  7. Radish
  8.    

ر زیر مثالی را میبینید که در آن از < ol type="i"> استفاده کرده ایم.

 

نمونه هفت

    HTML Ordered List

   

           

  1. Beetroot
  2.        

  3. Ginger
  4.        

  5. Potato
  6.        

  7. Radish
  8.    

مثال:

در زیر مثالی را می بینید که در آن از < ol type="A"> استفاده کرده ایم.


نمونه هشت

 

    HTML Ordered List

   

           

  1. Beetroot
  2.        

  3. Ginger
  4.        

  5. Potato
  6.        

  7. Radish
  8.    

در زیر مثالی را می بینید که در آن از< ol type="a"> استفاده کرده ایم.


نمونه نه

 

    HTML Ordered List

   

           

  1. Beetroot
  2.        

  3. Ginger
  4.        

  5. Potato
  6.        

  7. Radish
  8.    

 

ویژگی start

شما می توانید از ویژگی start برای برچسب < ol> استفاده کنید تا نقطه ی شروع شماره گذاری خود را مشخص کنید. در زیر گزینه های ممکن را مشاهده می کنید.

 
<ol type="1" start="4">
    - Numerals starts with 4.
<ol type="I" start="4">
        - Numerals starts with IV.
<ol type="i" start="4">
            - Numerals starts with iv.
<ol type="a" start="4">
                - Letters starts with d.
<ol type="A" start="4">    - Letters starts with D.
ol>ol>ol>ol>ol>

 

در زیر مثالی را می بینید که در آن از < ol type="i" start="4"> استفاده می کنیم.

 

نمونه ده

    HTML Ordered List

   

           

  1. Beetroot
  2.        

  3. Ginger
  4.        

  5. Potato
  6.        

  7. Radish
  8.    

 

ست های تعریف HTML

HTML و XHTML لیست هایی به نام لیست های تعریف را پشتیبانی می کنند که در این لیست ها ورودی ها مانند ترتیب لغات در دیکشنری قرار می گیرند. این لیست یک روش ایده آل برای ارائه یک فهرست از معانی یا لیستی از اصطلاحات یا لیستی از نام ها و مقادیر می باشد.
لیست تعریف از سه برچسب زیر استفاده می کند

 

  • < dl> - شروع لیست را تعریف می کند.

 مثال:

نمونه یازده

 

    HTML Definition List

   

       

HTML

       

This stands for Hyper Text Markup Language

       

HTTP

       

This stands for Hyper Text Transfer Protocol

   

 
جهت مشاهده کد ها برروی آموزش طراحی سایت کلیک نمایید.