آیا زبان برنامه نویسی سی شارپ ارزش یادگیری را دارد؟

 

آموزش سی شارپ

 

آیا زبان برنامه نویسی سی شارپ ارزش یادگیری در سال 2022 را دارد؟ زبان C# در هر پلتفرمی از جمله دسکتاپ، آنلاین، فناوری های آینده، بازی ها و خدمات ادغام شده است. بنابراین، قطعاً باید همین الان سی شارپ را مطالعه کنید، زیرا بهترین شانس ورود به بازار کار را به شما می دهد و همچنان که در حرفه خود پیشرفت می کنید، شما را فعال نگه می دارد.

زبان C# در سال 2022 ارزش یادگیری را دارد زیرا این زبان برنامه نویسی اصلی است که به هر زبان برنامه نویسی سطح بالاتر کمک می کند. نه تنها از سی شارپ می توان برای ساخت برنامه های کاربردی ویندوز استفاده کرد، بلکه می توانیم برنامه هایی بسازیم که سیستم عامل های لینوکس، MacOS، iOS و Android را هدف قرار دهند.

اگر قبلاً در زمینه برنامه نویسی پیشینه دارید، می توانید انتظار داشته باشید که بین 2 تا 3 ماه زمان برای یادگیری اصول برنامه نویسی سی شارپ داشته باشید. از سوی دیگر، ایجاد مهارت ها و دانش مورد نیاز برای به دست آوردن شغل به عنوان یک توسعه دهنده، حدود 1 تا 2 سال تمرین نیاز خواهد داشت.

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

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

بر اساس شاخص TIOBE، تا زمان نگارش این مقاله، سی شارپ به عنوان پنجمین زبان برنامه نویسی محبوب جهان در رتبه بندی قرار گرفته است. این میزان فقط کمی کمتر از پسرعمویش C++ است که C# تا حدی از آن مشتق شده است. جاوا که شباهت های زیادی به سی شارپ دارد، در جایگاه سوم قرار دارد، درست پس از قدرتمندترین پایتون و سی.

زبان های برنامه نویسی سی شارپ

C#- تلفظ سی شارپ - یک زبان برنامه نویسی همه منظوره، سطح متوسط و شی گرا است که در سال 2000 توسط مایکروسافت ایجاد شد. C# توسط Anders Hejilsbergطراحی شده است تا بخشی از ابتکار .Netباشد. نسخه فعلی آن 9.0 است که به عنوان بخشی از .NET 5.0 در سال 2020 منتشر شد. در ابتدا قرار بود این زبان Cool نامیده شود که مخفف زبان شی گرا شبیه به C است. این زبان شباهت هایی با زبان های دیگر از جمله C، C++، و شاید بحث برانگیزترین، جاوا دارد.

سی شارپ به نحوی مشابه سایر زبان‌های نوع Cمتکی است و از قوانین نحوی آشنا مانند استفاده از نقطه ویرگول برای عبارات پایانی، پرانتزهای فرفری برای عبارات گروهی، براکت‌های مربع برای اعلام (و دریافت داده‌ها از) آرایه‌ها و استفاده از علامت تساوی (=) استفاده می‌کند.

چه نرم افزاری می توانید با آن بسازید؟

سی شارپ یک زبان برنامه نویسی انعطاف پذیر است که توسعه دهندگان می توانند تقریباً برای هر نوع نرم افزار یا برنامه ای که می توانید تصور کنید از آن استفاده کنند. این زبان، مانند همه زبان‌های کدنویسی، مزایا و معایب خود را دارد و به همین دلیل، بخش‌های خاصی وجود دارد که C# در آنها پیشرفت می‌کند و نقاط ضعف خود را نشان می‌دهد.

یکی از کاربردهای بسیار محبوب سی شارپ در توسعه بازی های ویدیویی هم برای رایانه های شخصی و هم برای کنسول های بازی ویدیویی است. در واقع این زبان انتخابی واقعی برای توسعه دهندگان بازی است. بخشی از جذابیت در این عرصه به این موضوع مربوط می شود که موتور بازی یونیتی بر روی C++ و C# ساخته شده است. به همین دلیل، سی شارپ کاملاً با موتور بازی ادغام می‌شود، موتوری که برای ساخت بسیاری از برترین بازی‌های ویدیویی در جهان امروز استفاده می‌شود.

از آنجایی که سی شارپ بسیار شبیه به C++ است، آموزش C++ را برای برنامه نویسان بازیهای کامپیوتری آسان‌تر می‌کند، زبان دیگری که در جامعه گیمرها بزرگ است. بازی‌هایی که می‌توانید در سی شارپ ایجاد کنید، از پلتفرم‌ها، اسکرول‌های جانبی، بازی‌های RPG، واقعیت تغییریافته (AR)، واقعیت مجازی (VR) و همچنین بازی‌های موبایل. البته، تا حد زیادی به لطف چارچوب دات نت، برنامه های کاربردی وب حوزه دیگری هستند که C# در آن برتری دارد. در صورت تمایل می توانید از چارچوب دات نت یا از یک پلت فرم منبع باز استفاده کنید.

نوشتن برنامه های دسکتاپ یکی دیگر از نقاط قوت زبان برنامه نویسی سی شارپ هستند. به لطف کد کارآمد، مقیاس پذیری و این واقعیت که نگهداری از آن بسیار آسان است، سی شارپ یک انتخاب عالی برای ایجاد برنامه های کاربردی در آن است. در واقع، برخی از بزرگترین نام های فناوری با استفاده از این زبان ایجاد شده اند، از جمله Adobe Photoshop. Mozilla Firefox، MySQL Server و Thunderbird.

معایب برنامه نویسی سی شارپ

مانند هر زبان برنامه نویسی، سی شارپ هم خالی از اشکال نیست. بسیاری از مشکلاتی که مهندسان نرم‌افزار با سی شارپ دارند، مربوط به اولویت‌های شخصی است، مانند مشکلاتی که در مورد شی گرا بودن آن بسیار زیاد است. برخی دیگر C# را از نظر استانداردهای کدنویسی و بهترین شیوه‌ها کمی سنگین و سخت‌گیرانه می‌دانند.

سی شارپ نیز در گذشته تا حد زیادی به چارچوب دات نت متکی بود و برنامه های ساخته شده با زبان برنامه نویسی واقعاً برای آن پلتفرم یا برای اجرا در محیط ویندوز در نظر گرفته شده بودند. این امر باعث می‌شود از برخی جهات دسترسی به بازارتان را کمی محدود کنید. سی شارپ اکنون روی مک و لینوکس نیز اجرا می‌شود، بنابراین دیگر چنین مشکلی وجود ندارد. شکایت دیگر در مورد سی شارپ این است که بارگذاری آن کند است؛ هر تغییری در کد سی شارپ شما نیاز به کامپایل مجدد دارد که ممکن است کمی دردسرساز باشد.

آینده زبان برنامه نویسی سی شارپ

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

به لطف آن، محبوبیت آن در محافل بازی، و سرمایه گذاری آن در توسعه موبایل و برنامه های وب، C# بعید است به این زودی ها به جایی برسد. چه زبان C# را به عنوان زبان اصلی خود یاد بگیرید یا به عنوان زبان دوم (یا سوم) توسعه دهنده، واقعاً اشتباه نکرده اید.

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

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

?

1 2 3 4 5 6 7 8 9 10

<canvas id="c1" width="200" height="200" style="border:solid 1px #000000;"></canvas> ‎<button onclick="draw_square();return true;">Red Square</button> <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 از <canvas>
قرار ندهید، مرورگرهایی که بوم نقاشی را پشتیبانی می کنند، آن را نادیده خواهند گرفت. شما می توانید فقط از جاوااسکریپت برای انجام نقاشی خود استفاده کنید.
قانون شماره یک، عنصر بوم نقاشی شما باید دارای یک ID باشد، بنابراین می توانیم از جاوااسکریپت برای قراردادن آن استفاده کنیم. قانون شماره دو، هر بوم نقاشی دارای یک کانتکست می باشد. در واقع کانتکست بوم نقاشی آن چیزی است که قرار است روی آن نقاشی بکشیم، نه خود بوم.

?

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

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

?

1 2	c1_context.fillStyle = "#f00"; c1_context.fillRect(50, 50, 100, 100);‎

 

برای ادامه مثال ها روی طراحی سایت کلیک کنید

آموزش لینک های متنی

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

لینک های متن HTML

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

 

لینک کردن داکیومنت ها

یک لینک با استفاده از برچسب < a> در HTML تعیین می شود. این برچسب anchor tag نامیده می شود و هر چیزی بین برچسب آغازین < a> و پایانی < /a> بخشی از لینک می شود و یک یوزر می تواند آن بخش را کلیک کرده تا به داکیومنت لینک شده برسد. در زیر ترکیب ساده ی استفاده از برچسب < a> را می بینید.

 

<a href="Document URL" ...="" attributes-list="">Link Text</a>

مثال:

اجازه دهید مثال زیر را امتحان کنیم که http://www.tahlildadeh.com را در صفحه ی شما لینک می کند.

 

نمونه یک

 

<!DOCTYPE html>

<html>

<head>

    <title>Hyperlink Example</title>

</head>

<body>

    <p>Click following link</p>

    <a href="http://www.tahlildadeh.com" target="_self">Tahlildadeh</a>

</body>

</html

 

 

این مثال نتیجه ی زیر را تولید خواهد کرد که شما می توانید روی لینک تولید شده ی tahlildadeh کلیک کنید تا به صفحه ی اصلی tahlildadeh برسید.
Click following link

 

tahlildadeh

ویژگی target

ما از ویژگی target در مثال قبلی خود استفاده کردیم . این ویژگی برای مشخص کردن موقعیتی که داکیومنت لینک شده باز می شود، مورد استفاده قرار می گیرد. در زیر گزینه های ممکن را مشاهده می کنید.

 

Option	Description
_blank	داکیومنت لینک شده را در یک پنجره یا تب جدید باز می کند.
_self	داکیومنت لینک شده را در همان چارچوب باز می کند.
_parent	داکیومنت لینک شده را در چارچوب اصلی باز می کند.
_top	داکیومنت لینک شده در کل بدنه ی پنجره باز می شود.
targetframe	داکیومنت لینک شده را در یک targetframe نام گذاری شده باز می کند.

 

مثال:

برای درک تفاوت اصلی در برخی گزینه های ارائه شده در ویژگی target مثال زیر را امتحان کنید.

 

نمونه دو

 

<!DOCTYPE html>

<html>

<head>

    <title>Hyperlink Example</title>

    <base href="http://www.tahlildadeh.com/">

</head>

<body>

    <p>Click any of the following links</p>

    <a href="http://www.tahlildadeh.com" target="_blank">Opens in New</a> |

    <a href="http://www.tahlildadeh.com" target="_self">Opens in Self</a> |

    <a href="http://www.tahlildadeh.com" target="_parent">Opens in Parent</a> |

    <a href="http://www.tahlildadeh.com" target="_top">Opens in Body</a>

</body>

</html>

 

این مثال نتیجه ی زیر را تولید خواهد کرد که می توانید روی لینک های مختلف کلیک کنید تا تفاوت بین گزینه های مختلف ارائه شده برای ویژگی target را درک کنید.

 

Click any of the following links

Opens in New | Opens in Self | Opens in Parent | Opens in Body

 

استفاده از مسیر پایه

وقتی که شما داکیومنت های HTML را متناسب با همان وب سایت لینک می کنید، ارائه ی یک URL کامل برای هر لینک ضروری نیست. اگر از برچسب 

 

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

 

 

 مثال:

مثال زیر از برچسب < base> برای مشخص کردن URL پایه استفاده می کند و پس از آن ما می توانیم به جای ارائه ی URL کامل برای هر لینک از مسیرهای مرتبط استفاده کنیم.

 

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

نمونه سه

 

<html>
<head>
    <title>Hyperlink Example</title>
    <base href="http://www.tahlildadeh.com/">
</head>
<body>
    <p>Click following link</p>
    <a href="/WebsiteNews/TahlildadeNews.aspx" target="_blank">HTML tahlildadeh</a>
</body>
</html>

این مثال نتیجه ی زیر را تولید خواهد کرد که می توانید روی لینک تولید شده ی HTML tahlildadeh کلیک کنید تا به آموزش HTML برسید.
اکنون URL ارائه شده ی < a href="http:/WebsiteNews/TahlildadeNews.aspx> باعنوان < a href=" http //www.tahlildadeh.com/WebsiteNews /TahlildadeNews.aspx"> در نظر گرفته می شود

 

لینک شدن به بخشی از صفحه

می توانید برای بخش خاصی از صفحه ی وب ارائه شده، با استفاده از ویژگی name یک لینک ایجاد کنید. این امر یک فرایند دو مرحله ای می باشد.
نخست اینکه در مکانی که می خواهید به داخل صفحه ی وب برسید یک لینک ایجاد کنید و آن را با استفاده از برچسب < a...> نام گذاری کنید

 

<h1>HTML Text Links <a name="top"></a></h1>

 

 

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

 

<a href="/html/html_text_links.htm#top">Go to the Top</a> 

و این مثال لینک زیر را تولید خواهد کرد که می توانید در آن روی لینک تولید شده ی Go to the Top کلیک کنید تا به نقطه ی بالای آموزش HTML Text Link برسید.

 

نمونه پنج

<!DOCTYPE html>
<html>
<head>
    <title>Hyperlink Example</title>
    <base href="http://www.tahlildadeh.com/">
</head>
<body alink="#54A250" link="#040404" vlink="#F40633">
    <p>Click following link</p>
    <a href="http://www.tahlildadeh.com" target="_blank">HTML tahlildadeh</a>
</body>
</html>

تنظیم رنگ های لینک

شما می توانید رنگ لینک های خود، لینک های فعال و لینکهای مشاهده شده را با استفاده ازویژگی های link و alink و vlink از برچسب < body>تنظیم کنید.

 مثال:

مثال زیر را در test.htm ذخیره کنید و سپس می توانید آن را در هر مرورگری باز کنید تا ببینید که چگونه ویژگی های link, alink و vlink کار می کنند.

 

نمونه شش

<!DOCTYPE html>
<html>
<head>
    <title>Hyperlink Example</title>
</head>
<body>
<a href="http://tahlildadeh.com/Files/Articles/04GL07.pdf"> download pdf file</a>
</body>
</html>

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

 

HTML tahlildadeh

دانلود کردن لینک ها

شما می توانید لینک متنی ایجاد کنید تا فایل های قابل دانلود PDF، ZIP و DOC خود را بسازید. این کار بسیار ساده می باشد، فقط کافیست یک URL کامل از فایل قابل دانلود ارائه بدهید.

 

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

 

آموزش طراحی سایت - آموزش ساخت جدول در html

آموزش Table در HTML

جدول های HTML به نویسندگان وب اجازه می دهند تا داده هایی مانند متن، تصاویر، لینک ها، جدول های دیگر و غیره در ردیف ها و ستون ها تنظیم کنید. جدول های HTML با استفاده از برچسب < table> ایجاد می شوند که در آن برچسب < tr> برای ایجاد ردیف ها و برچسب < td> برای ایجاد داده های سلول ها استفاده می شوند.

 مثال:

نمونه یک

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML Tables</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
        </tr>
        <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
        </tr>
    </table>
</body>
</html>

ویژگی های colspan و rowspan

اگر بخواهید دو یا بیشتر از دو ستون را با هم تلفیق کنید از ویژگی colspan استفاده می کنید. به طور مشابه اگر بخواهید دو یا بیشتر از دو ردیف را در یک ردیف تلفیق کنید از rowspan استفاده کنید.

 مثال:

نمونه سه

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML Table Colspan/Rowspan</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
        <tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
        <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
        <tr><td colspan="3">Row 3 Cell 1</td></tr>
    </table>
</body>

</html>

 

پس زمینه ی جدول

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

 

• ویژگی Bg color: می توانید رنگ زمینه را برای همه ی جدول و یا تنها برای یک سلول تنظیم کنید.
• ویژگی background: می توانید یک تصویر را برای کل جدول یا تنها یک سلول تنظیم کنید.

همچنین می توانید با استفاده از ویژگی bordercolor رنگ حاشیه را نیز تنظیم کنید.

 مثال:

نمونه چهار

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML Table Background</title>
</head>
<body>
    <table border="1" bordercolor="green" bgcolor="yellow">
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
        <tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
        <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
        <tr><td colspan="3">Row 3 Cell 1</td></tr>
    </table>
</body>
</html>

در اینجا مثالی در رابطه با استفاده از ویژگی background می بینید. در این مثال ما از تصویری موجود در image directory استفاده کرده ایم.

 

نمونه پنج

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML Table Background</title>
</head>
<body>
    <table border="1" bordercolor="green" background="/images/test.png">
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
        <tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
        <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
        <tr><td colspan="3">Row 3 Cell 1</td></tr>
    </table>
</body>
</html>

آموزش html css

طول و عرض جدول

شما می توانید طول و عرض جدولی را با استفاده از ویژگی های width و height تنظیم کنید. شما می توانید طول و عرض جدول را به پیکسل و یا متناسب با درصد صفحه ی جاری تنظیم کنید.

 مثال:

نمونه شش

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML Table Width/Height</title>
</head>
<body>
    <table border="1" width="400" height="150">
        <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
        </tr>
        <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
        </tr>
    </table>
</body>
</html>

شرح جدول

برچسب caption یک توضیح یا یک تیتر برای جدول می باشد که در بالای جدول نمایش داده می شود. این برچسب در ورژن های جدید HTML/XHTML توصیه می شود.

 مثال:

نمونه هفت

    <title>HTML Table Caption</title>

    <table border="1" width="100%">
        <caption>This is the caption</caption>
        <tr>
            <td>row 1, column 1</td>
            <td>row 1, columnn 2</td>
        </tr>
        <tr>
            <td>row 2, column 1</td>
            <td>row 2, columnn 2</td>
        </tr>
    </table>
 

تیتر، بدنه و پاورقی جدول

جدول ها می توانند به سه بخش تقسیم شوند: تیتر، بدنه و پاورقی جدول. عنوان و فوت(tfoot) در واقع شبیه به تیتر و پاورقی در یک فایل پردازش word می باشند که برای هرصفحه یکی می باشد، در حالیکه بدنه همان نگه دارنده ی محتوای اصلی جدول می باشد.
سه عنصر برای مجزا کردن عنوان، بدنه و فوت در یک جدول عبارتند از

 

• < thead> - برای ایجاد یک تیتر مجزا
• < tbody>- برای نشان دادن بدنه ی اصلی جدول
• < tfoot> - برای ایجاد یک پاورقی مجزا در یک جدول

یک جدول برای نشان دادن صفحات و گروه های مختلف یک داده، ممکن است دارای عناصر مختلفی باشد، اما ظاهر شدن برچسب های و قبل از زیاد مهم نیست.

 مثال:

نمونه هشت

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML Table</title>
</head>
<body>
    <table border="1" width="100%">
        <thead>
            <tr>
                <td colspan="4">This is the head of the table</td>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="4">This is the foot of the table</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
                <td>Cell 3</td>
                <td>Cell 4</td>
            </tr>
        </tbody>
    </table>
</body>
 

جدول های تودرتو

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

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

 مثال:

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

 

<a class="btn btn-danger" href="/Try/441/9" target="_blank">امتحان کنید</a><p> </p><p class="MsoNormal" style="unicode-bidi: embed; direction: rtl; margin: 0in 0in 10pt; line-height: 17pt;" dir="rtl"><span style="line-height: 18pt; mso-bidi-language: fa;" lang="FA"><span style="font-size: 12pt; color: #000000;">    

  <br></span></span></p><div class="row" style="padding-top: 10px;">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<ul class="bookMoreInfo">
                           
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                               
<span class="VisitCountHolder">
      
<span class="fa fa fa-eye"> </span>
<span id="BodyContent2_UVVisitCount1_VisitCountSeparator" class="VisitCountSeparator"> </span>
<span id="BodyContent2_UVVisitCount1_VisitCountCount" class="VisitCountNumber">1945</span>
</span>
                        </li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<em class="fa fa-download"> </em>  
<span id="BodyContent2_Lbl_dlcount">424</span>
                        </li>
   
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-12">تاریخ ارسال:  
<span id="BodyContent2_Lbl_createdate">1394/07/27</span>
                        </li>
   
                    </ul>
                </div>
   
            </div><div id="BodyContent2_dlPDF">
   
   
<div class="row" style="padding-top: 10px;">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <!--
                            .UserPassTable tr td {
                                text-align: right;
                                background-color: transparent !important;
                                color: #604e44;
                            }
   
                            .UserPassTable a {
                                color: #604e44 !important;
                            }
   
   
   
                            @media only screen and (max-width: 950px) {
                                .UserPassTable tr td {
                                    display: block;
                                    width: 100%;
                                    padding-right: 5px;
                                }
   
                                    .UserPassTable tr td::before, .UserPassTable tr td::after {
                                        content: " " !important;
                                        width: 0px;
                                    }
   
                                table.UserPassTable td:nth-of-type(1)::before {
                                    content: " " !important;
                                    width: 0px;
                                }
   
                                .UserPassTable tr td:nth-child(2n+1), .UserPassTable tr:last-child td:nth-child(2) {
                                    background-color: #239ead;
                                    color: white;
                                }
   
                                .UserPassTable tr td:nth-child(2n), .UserPassTable tr:nth-child(3) td:nth-child(1) {
                                    background-color: #f3f8fb;
                                    color: black;
                                }
                            }
                          
-->
                        </div></div></div><table style="width: 100%;" border="1">
<tbody><tr>
<td>
<table style="width: 100%;" border="1">
<tbody><tr>
<th>Name</th>
<th>Salary</th>
                    </tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
                    </tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
                    </tr>
                </tbody></table>
            </td>
        </tr>
   

               
               
            </tbody></table><table class="table-striped table-bordered UserPassTable" style="width: 100% !important; margin: 0 !important;">
<tbody><tr>
<td class="text-center">
   
<em class="fa fa-download fa-2x text-center"> </em>
   
                                </td>
<td class="text-center">
<a id="BodyContent2_Lnk_dl" href="/UserControls/CNTDL.aspx?Type=ARTA&ID=441">
                                               
                                                      
<span class="text-fa">دریافت این مقاله بصورت PDF</span>
                                    </a>
<a id="BodyContent2_Lnk_source" href="/UserControls/CNTDL.aspx?Type=ARTS&ID=441">
                                               
                                             
<span class="text-fa">دریافت سورس کد مقاله</span>
                                    </a>
                                </td>
                            </tr>
<tr>
   
<td colspan="2">
                                       
<br>
                                    پس از دانلود فایل رمز آن را به دقت وارد نمایید .فایل ها دارای رمز عبور می باشند.
                                                   
                                </td>
                            </tr>
<tr>
<td class="text-center">
<em class="fa fa-key fa-2x"> </em>
   
                                </td>
<td class="text-danger">tahlildadeh.com
                               یا
                               www.tahlildadeh.com
                                                  
                                </td>
                            </tr>
                        </tbody></table>
<div class="ipShow">
                        </div>

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

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

آموزش طراحی سایت : من معتقدم HTML5 دستاورد بزرگی خواهد بود (بسیاری از مردم هم چنین اعتقادی دارند.). این برنامه ممکن است روش لباس پوشیدن و غذا خوردن ما را تغییر ندهد، اما مطمئنا روش توسعه ی برنامه های وب و طراحی صفحات وب را در 10 سال آینده تغییر خواهد داد. به هرحال این صفحه آموزش HTML نمی باشد. HTML5 چیز کاملا جدیدی نمی باشد. بسیاری از ویژگی های HTML5 از HTML4 یا HTML1.0 گرفته شده اند. با زمان و انرژی محدودم می توانم فقط آنچه را در HTML5 جدید است و تمرینات قدیمی که دیگر مورد استفاده نیستند را پوشش دهم.

این یک سایت HTML5 می باشد. هنگامی که در حال کشف و یادگیری HTML5 هستم، امیدوارم بتوانم آنچه را که یاد گرفته ام با شما به اشتراک بگذارم.

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

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

برتراند راسل (1872 –1970)

با توجه به این نوشته HTML5 یک نسخه ی در حال کار می باشد. به عبارت دیگر HTML5 هنوز یک کار در حال پیشروی می باشد. ویژگی های آن در W3C منتشر شده و روز به روز تغییر می کند.

 

چرا HTML5 مهم است؟

حتمالا تاکنون در مورد HTML5 شنیده اید، فکر می کنم محبوب ترین برنامه ای که فیلم را بدون Adobe Flash اجرا می کند، باید از آقای استیو جابز برای تبدیل آن به یک فن آوری معروف تشکر کرد. علاوه بر این ممکن است در مورد ایجاد انیمیشن بدون پلاگین، کنترل ورودی غنی مانند دیت پیکر، کالرپیکر، اسلایدر بدون جاوااسکریپت و در انتها ذخیره ی داده ی برون خطی (آفلاین) نیز شنیده باشید. به هرحال این هم فقط بخشی از HTML5 می باشد. چه وقت؟ WC3 در فوریه ی 2011 اعلام کرد که جولای 2014 تاریخی است که HTML5 پیشنهاد رسمی برای استاندارد وب می شود. زمان را فراموش کنید: واقعیت این است که جدول زمانی پیشنهادی از طرف WHATWG واقعا اتفاق نیفتاد. توسعه ی وب در دستان دو گروه از مردم واقع شده است. اولین گروه کمپانی های مرورگر معروفی مانند Mozilla، مایکروسافت، اپل، گوگل و اپرا می باشند. گروه دوم نیز طراحان و توسعه دهندگان وب در این زمینه می باشند. ضعفHTML1.1 و HTML 2 خیلی ساده است، کمپانی های مرورگر فکر می کردند که ایده ی احمقانه است، بنابراین درهای خود را به روی آن بستند. امروزه بسیاری از مرورگرها به شدت تمایل دارند که از HTML5 پشتیبانی کنند.

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

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

اعلام نوع داکیومنت در HTML5 هم ساده و هم جالب می باشد. این کار به سادگی زیر میباشد:

‎<!DOCTYPE html>

و ‎بر خلاف doctype در HTML1 و HTML4 که با آن آشنا هستیم:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">‎

‎<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ‎‎"HTTP>

/www.w3.org/TR/html4/loose.dtd">‎

‎<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" ‎‎"HTTP>

/www.w3.org/TR/html4/frameset.dtd">‎

‎<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ‎‎"HTTP>

/www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">‎

‎<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ‎‎"HTTP>

/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">‎

 

برخی از آنها حتی در یک خط نوشته نمی شوند. این اولین دلیلی است که نشان می دهد کار طراحان وب با HTML5 راحت تر شده. یک صفحه ی HTML5 می تواند به سادگی زیر باشد:

<!DOCTYPE html>‎

<html>‎

<head> ‎

<title>HTML5 is rocks!</title> ‎

</head>‎

<body>

‎ <h1>HTML5 Rocks!</h1> ‎

</body>‎

</html>‎

 

آموزش کن وس 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>‎

 

کن وس Rectangle در آموزش طراحی سایت

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

 

<canvas id="c1" width="200" height="200" style="border:solid 1px #000000;"></canvas>

‎<button onclick="draw_square();return true;">Red Square</button>

<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 از <canvas> قرار ندهید، مرورگرهایی که بوم نقاشی را پشتیبانی می کنند، آن را نادیده خواهند گرفت. شما می توانید فقط از جاوااسکریپت برای انجام نقاشی خود استفاده کنید. قانون شماره یک، عنصر بوم نقاشی شما باید دارای یک 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);‎

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

 

<div>

<canvas id="Canvas2" width="200" height="200" style="border:solid 1px #000000;"></canvas>

‎ <div>

‎ <button onclick="blue_square_2();return true;">Blue Square</button>

‎ <button onclick="red_stroke_2();return true;">Red Square</button>

‎ <button onclick="clear_rect_2();return true;">Erase Everything</button>

</div>

</div>

<script>

‎ var c2 = document.getElementById("c2");

‎ var c2_context = c2.getContext("2d");

‎ function blue_square_2() { //Blue color square

‎ c2_context.fillStyle = "#00f";

‎ c2_context.fillRect(50, 50, 100, 100);

‎ }

‎ function red_stroke_2() { //Red color edges

‎ c2_context.strokeStyle = "#f00";

‎ c2_context.strokeRect(45, 45, 110, 110);

‎ }

‎ function clear_rect_2() { //Clear all

‎ c2_context.clearRect(40, 40, 120, 120);

‎ }

‎</script>‎

 

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