آموزش کن وس Canvas

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

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

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

Basic Canvas Support

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

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

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

افشین پنج‌شنبه 14 مرداد 1400 ساعت 15:57

0 نظر

HTML Layouts

آموزش HTML Layout ‏ ‏

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

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

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

مثال:

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

نمونه یک

<!DOCTYPE html>

<head>

<title>HTML Layout using Tables</title>

</head>

<body>

<tr>

<h1>This is Web Page Main title</h1>

</td>

</tr>

HTML<br />

PHP<br />

PERL...

</td>

Technical and Managerial Tutorials

</td>

</tr>

<tr>

</center>

</td>

</tr>

</table>

</body>

</html>

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

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

گرچه می توانیم با جدول های HTML ، Layout های بسیار زیبایی به دست آوریم، اما جدول ها در واقع به عنوان ابزار Layout طراحی نشده اند، و بیشتر برای نمایش داده های جدولی استفاده می شوند.

نمونه دو

<!DOCTYPE html>

<head>

<title>Three Column HTML Layout</title>

</head>

<body>

HTML<br />

PHP<br />

PERL...

</td>

Technical and Managerial Tutorials

</td>

<b>Right Menu</b><br />

HTML<br />

PHP<br />

PERL...

</td>

</tr>

</table>

</body>

</html>

توجه:

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

مثال:

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

نمونه سه

<!DOCTYPE html>

<head>

<title>HTML Layouts using DIV, SPAN</title>

</head>

<body>

<h1>This is Web Page Main title</h1>

</div>

HTML<br />

PHP<br />

PERL...

</div>

<p>Technical and Managerial Tutorials</p>

</div>

<div><b>Right Menu</b></div>

HTML<br />

PHP<br />

PERL...

</div>

</center>

</div>

</body>

</html>

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

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

افشین سه‌شنبه 29 تیر 1400 ساعت 13:38

0 نظر

جاوااسکریپت در 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> نگه دارید.

نمونه یک

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

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

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

نمونه دو

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

Bring your mouse here to see an alert

مخفی کردن اسکریپت ها از مرورگرهای قدیمی

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

عنصر < noscript>

می توانید یک سری اطلاعت جایگزین به کاربری ارائه دهید که مرورگر وی اسکریپت ها را پشتیبانی نمی کند، همچنین برای کاربرهایی که گزینه ی script مرورگر خود را غیرفعال کرده اند. شما می توانید اینکار را با استفاده از برچسب < noscript> انجام دهید.

JavaScript Example

نمونه سه

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

آموزش طراحی سایت آموزش حرفه ای طراحی سایت آموزش طراحی وب یادگیری طراحی وب

افشین دوشنبه 28 تیر 1400 ساعت 12:50

0 نظر

HTML Style Sheet

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

آموزش Cascading style sheet ‏ ‏

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

مثال:

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

نمونه یک

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p><font color="green" size="5">Hello, World!</font></p>

</body>

</html>

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

نمونه دوم

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p style="color:green;font-size:24px;">Hello, World!</p>

</body>

</html>

شما می توانید به سه روش از 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>

<head>

<title>HTML Internal CSS</title>

.red {

color: red;

}

.thick {

font-size: 20px;

}

.green {

color: green;

}

</style>

</head>

<body>

<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>

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

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

نمونه چهارم

<!DOCTYPE html>

<html>

<head>

<title>HTML Inline CSS</title>

</head>

<body>

<p style="font-size:20px;">This is thick</p>

<p style="color:green;">This is green</p>

<p style="color:green;font-size:20px;">This is thick and green</p>

</body>

</html>

آموزش html css آموزش طراحی سایت دوره آموزش طراحی سایت آموزش برنامه نویسی

افشین سه‌شنبه 22 تیر 1400 ساعت 16:34

0 نظر

سربرگ 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.

نمونه یک

<!DOCTYPE html>

<head>

<title>HTML Title Tag Example</title>

</head>

<body>

<p>Hello, World!<p>

</body>

</html>

برچسب < meta> در HTML

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

در ادامه استفاده های مهم برچسب < meta> در داکیومنت HTML ارائه شده اند

نمونه دو

<!DOCTYPE html>

<head>

<title>HTML Title Tag Example</title>

</head>

<body>

<p>Hello, World!<p>

</body>

</html>

برچسب < base> در HTML

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

نمونه سه

<!DOCTYPE html>

<head>

<title>HTML Title Tag Example</title>

</head>

<body>

<a href="/ArticleDetails/HTML Marquees" title="HTML Tutorial">HTML Tutorial</a>

</body>

</html>

برچسب < link> در HTML

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

نمونه چهار

<!DOCTYPE html>

<head>

<title>HTML Title Tag Example</title>

</head>

<body>

<p>Hello, World!<p>

</body>

</html>

برچسب< style>در HTML

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

نمونه پنج

<!DOCTYPE html>

<head>

<title>HTML style Tag Example</title>

<style>

.myclass {

background-color: #aaa;

padding: 10px;

}

</style>

</head>

<body>

<p class="myclass">Hello, World!<p>

</body>

</html>

توجه:

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

برچسب< script>در HTML

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

نمونه شش

<!DOCTYPE html>

<head>

<title>HTML Title Tag Example</title>

function Hello() {

alert("Hello, World");

}

</script>

</head>

<body>

</body>

</html>

دوره آموزش طراحی سایت آموزش طراحی سایت آموزش طراحی وب آموزش طراحی سایت با html فیلم آموزش Jquery

افشین سه‌شنبه 15 تیر 1400 ساعت 11:38

0 نظر

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

پیوندها

دسته‌ها