سورس سرا – آموزش برنامه نویسی https://sourcesara.com سایت سورس سرا بزرگترین و جامع ترین سایت در زمینه آموزش برنامه نویسی و طراحی سایت می باشد که با کیفیت عالی و مثال های مختلف برنامه نویسی سعی در پیشرفت کاربران در امر برنامه نویسی را دارد Fri, 13 Jul 2018 19:45:28 +0000 fa-IR hourly 1 تگ body در HTML – آموزش HTML https://sourcesara.com/tag-body-in-html/ https://sourcesara.com/tag-body-in-html/#respond Fri, 13 Jul 2018 19:08:05 +0000 https://sourcesara.com/?p=1860 تگ body در HTML نحوه تعریف و استفاده از تگ body تگ <body> بدنه سند را مشخص می کند. عنصر <body> حاوی تمامی محتویات یک سند HTML است، مانند متن، لینک، تصاویر، جداول، لیست ها و غیره. مثال یک سند HTML ساده، با حداقل برچسب های مورد نیاز: [crayon-5b4c0deda6063416877833/] پشتیبانی […]

نوشته تگ body در HTML – آموزش HTML اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.

]]>
tag body in html 1860 تگ body در HTML   آموزش HTML

تگ body در HTML

نحوه تعریف و استفاده از تگ body

تگ <body> بدنه سند را مشخص می کند.

عنصر <body> حاوی تمامی محتویات یک سند HTML است، مانند متن، لینک، تصاویر، جداول، لیست ها و غیره.

مثال

یک سند HTML ساده، با حداقل برچسب های مورد نیاز:

<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

امتحان کنید

پشتیبانی مرورگر

عنصر Chrome Edge Firefox Safari Opera
<body> Yes Yes Yes Yes Yes

تفاوت بین HTML 4.01 و HTML 5

تمام صفات مربوط به لایه بندی در HTML 5 حذف شده است.

صفات

صفت مقدار توضیحات
alink رنگ در HTML 5 پشتیبانی نمی شود.

رنگ یک لینک فعال در یک سند را مشخص می کند.

background آدرس در HTML 5 پشتیبانی نمی شود.

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

bgcolor رنگ در HTML 5 پشتیبانی نمی شود.

رنگ پس زمینه سند را مشخص می کند.

link رنگ در HTML 5 پشتیبانی نمی شود.

رنگ لینک های مشاهده نشده در یک سند را مشخص می کند.

text رنگ در HTML 5 پشتیبانی نمی شود.

رنگ متن را در یک سند مشخص می کند.

vlink رنگ در HTML 5 پشتیبانی نمی شود.

رنگ لینک های بازدید شده در یک سند را مشخص می کند.

صفات جهانی

تگ <body> از صفات جهانی موجود در HTML نیز پشتیبانی می کند.

صفات رویداد

تگ <body> از صفات رویداد موجود در HTML نیز پشتیبانی می کند.

تنظیمات پیش فرض CSS

اکثر مرورگرها عنصر <body> را با مقادیر پیش فرض زیر نمایش می دهند:

body {
display: block;
margin: 8px;
}

body:focus { 
    outline: none;
}

نوشته تگ body در HTML – آموزش HTML اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.

]]>
https://sourcesara.com/tag-body-in-html/feed/ 0
تگ title در HTML – آموزش HTML https://sourcesara.com/tag-title-in-html/ https://sourcesara.com/tag-title-in-html/#respond Thu, 12 Jul 2018 05:24:26 +0000 https://sourcesara.com/?p=1856 تگ title در HTML نحوه تعریف و استفاده از تگ title تگ <title> در تمام اسناد HTML مورد نیاز است و عنوان سند را تعریف می کند. عنصر <title>: یک عنوان در تب مرورگر تعریف می کند یک عنوان برای زمانی که صفحه به علاقه مندی ها اضافه می شود، […]

نوشته تگ title در HTML – آموزش HTML اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.

]]>
tag title in html 1856 تگ title در HTML   آموزش HTML

تگ title در HTML

نحوه تعریف و استفاده از تگ title

تگ <title> در تمام اسناد HTML مورد نیاز است و عنوان سند را تعریف می کند.

عنصر <title>:

  • یک عنوان در تب مرورگر تعریف می کند
  • یک عنوان برای زمانی که صفحه به علاقه مندی ها اضافه می شود، تعریف می کند
  • یک عنوان برای صفحه در نتایج موتور های جستجو تعریف می کند

مثال

تعریف یک عنوان برای سند HTML:

<!DOCTYPE html>
<html>

<head>
<title>HTML Reference</title>
</head>

<body>
The content of the document......
</body>

</html>

امتحان کنید

پشتیبانی مرورگر

عنصر Chrome Edge Firefox Safari Opera
<title> Yes Yes Yes Yes Yes

توجه: شما نمی توانید بیش از یک عنصر <title> را در یک سند HTML داشته باشید.

نکته: اگر تگ <title> را حذف کنید، سند به عنوان HTML معتبر تأیید نخواهد شد.

تفاوت بین HTML 4.01 و HTML 5

هیج تفاوتی وجود ندارد.

صفات جهانی

تگ <title> از صفات جهانی موجود در HTML نیز پشتیبانی می کند.

تنظیمات پیش فرض CSS

اکثر مرورگرها تگ <title> را با مقادیر پیش فرض زیر نمایش می دهند:

title {
display: none;
}

نوشته تگ title در HTML – آموزش HTML اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.

]]>
https://sourcesara.com/tag-title-in-html/feed/ 0
تگ head در HTML – آموزش HTML https://sourcesara.com/tag-head-in-html/ https://sourcesara.com/tag-head-in-html/#respond Wed, 11 Jul 2018 20:09:27 +0000 https://sourcesara.com/?p=1833 تگ head در HTML نحوه تعریف و استفاده از تگ head عنصر <head> یک ظرف برای تمام عناصر مربوط به بخش head سند در HTML می باشد. عنصر <head> میتواند شامل یک عنوان برای سند، اسکریپت ها، استایل ها، اطلاعات متا و موارد دیگر باشد. عناصر زیر می توانند داخل […]

نوشته تگ head در HTML – آموزش HTML اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.

]]>
tag head in html 1833 تگ head در HTML   آموزش HTML

تگ head در HTML

نحوه تعریف و استفاده از تگ head

عنصر <head> یک ظرف برای تمام عناصر مربوط به بخش head سند در HTML می باشد.

عنصر <head> میتواند شامل یک عنوان برای سند، اسکریپت ها، استایل ها، اطلاعات متا و موارد دیگر باشد.

عناصر زیر می توانند داخل تگ <head> قرار بگیرند:

  • تگ <title> (این عنصر در یک سند HTML لازم است)
  • تگ <style>
  • تگ <base>
  • تگ <link>
  • تگ <meta>
  • تگ <script>
  • تگ <noscript>

مثال تگ <head>

یک سند HTML با یک تگ <title> درون بخش head:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

امتحان کنید

پشتیبانی مرورگر

عنصر Chrome Edge Firefox Safari Opera
<head> Yes Yes Yes Yes Yes

تفاوت بین HTML 4.01 و HTML 5

در HTML 4.01 تعریف تگ <head> لازم است و موقع نوشتن اسناد HTML باید در سند ذکر شده باشد. در HTML 5، تگ head می تواند حذف شود. کد زیر به عنوان HTML 5 معتبر خواهد بود:

<!DOCTYPE html>
<html>
<title>Title of the document</title>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

امتحان کنید

صفات

صفت مقدار توضیحات
profile URL

در HTML 5 پشتیبانی نمی شود.

یک URL را برای یک سند مشخص می کند که شامل مجموعه ای از قوانین است. این قوانین می تواند توسط مرورگر خوانده شود تا به وضوح اطلاعات مربوط به صفت محتوای <meta> را درک کند.

صفات جهانی

تگ <head> از صفات جهانی موجود در HTML نیز پشتیبانی می کند.

تنظیمات پیش فرض CSS

اکثر مرورگرها عنصر <head> را با مقادیر پیش فرض زیر نمایش می دهند:

head {
display: none;
}

نوشته تگ head در HTML – آموزش HTML اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.

]]>
https://sourcesara.com/tag-head-in-html/feed/ 0
محیط برنامه نویسی سی شارپ – آموزش سی شارپ https://sourcesara.com/csharp-environment/ https://sourcesara.com/csharp-environment/#respond Wed, 11 Jul 2018 05:34:22 +0000 https://sourcesara.com/?p=1762 محیط برنامه نویسی سی شارپ در این فصل ابزار های مورد نیاز برای برنامه نویسی به زبان سی شارپ را بررسی خواهیم کرد. قبلا اشاره کردیم که زبان برنامه نویسی سی شارپ بخشی از فریم ورک .Net می باشد که برای نوشتن برای های .NET استفاده می شود. بنابراین قبل […]

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

]]>
csharp environment 1762 محیط برنامه نویسی سی شارپ   آموزش سی شارپ

محیط برنامه نویسی سی شارپ

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

فریم ورک .Net

فریم ورک .Net یک پلتفرم انقلابی است که به شما کمک می کند تا انواع مختلفی از برنامه ها را بنویسید:

  • Windows applications
  • Web applications
  • Web services

برنامه هایی که تحت فریم ورک .Net ایجاد می شوند، جزء برنامه های چند پلتفری هستند. طراحی این فریم ورک به گونه ای است که می توان از زبان های برنامه نویسی مختلفی (مانند C#، C++، VisualBasic، Jscript، COBOL و غیره) برای نوشتن کد و ارتباط آن ها با هم استفاده کرد.

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

اجزای فریم ورک

  • Common Language Runtime (CLR)
  • The .Net Framework Class Library
  • Common Language Specification
  • Common Type System
  • Metadata and Assemblies
  • Windows Forms
  • ASP.Net and ASP.Net AJAX
  • ADO.Net
  • Windows Workflow Foundation (WF)
  • Windows Presentation Foundation
  • Windows Communication Foundation (WCF)
  • LINQ

محیط توسعه مجتمع (IDE) برای زبان سی شارپ

شرکت مایکروسافت برای برنامه نویسی به زبان سی شارپ ابزار های زیر را ارائه می کند:

  • Visual Studio 2010 (VS)
  • Visual C# 2010 Express (VCE)
  • Visual Web Developer

دو مورد آخر به صورت رایگان در سایت رسمی مایکروسافت در دسترس است. با استفاده از این ابزار ها، شما می توانید تمام برنامه هایی که می شود با زبان C# نوشت (از برنامه های کنسولی ساده تا برنامه های پیچیده تر) را بنویسید. همچنین شما می توانید کدهای سی شارپ را با استفاده از یک ویرایشگر متن ساده مانند Notepad ویندوز بنویسید و سپس با استفاده از کامپایلر command-line (که بخشی از فریم ورک .Net است) کامپایل کنید.

نرم افزار Visual C# Express و Visual Web Developer ویرایشی از نرم افزار Visual Studio هستند که ظاهری مشابه اما امکانات کمتری دارند، اما بیشتر ویژگی های Visual Studio در آن ها حفظ شده است. در این آموزش ما از نرم افزار Visual C# Express استفاده خواهیم کرد. شما می توانید آن را از سایت رسمی Microsoft Visual Studio دانلود کنید.

توجه: برای نصب نسخه Express نیاز به یک اتصال اینترنتی پر سرعت دارید.

برنامه نویسی به زبان سی شارپ در سیستم عامل Linux و Mac

فریم ورک .Net نسخه های دیگری نیز دارد که در سیستم عامل های دیگر کار می کنند. Mono نسخه متن باز فریم ورک .Net است که یک کامپایلر سی شارپ دارد و بر روی چندین سیستم عامل از جمله توزیع های مختلف Linux و Mac اجرا می شود.

هدف از ارائه Mono توسط مایکروسافت فراهم کردن امکان اجرای برنامه های تحت فریم ورک .Net بر روی پلتفرم های مختلف و ابزار توسعه بهتر برای توسعه دهندگان Linux بوده است. Mono را می توان در بسیاری از سیستم عامل ها مانند Android، BSD، IOS، Linux، Windows، Unix و Solaris اجرا کرد.

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

]]>
https://sourcesara.com/csharp-environment/feed/ 0
مروری بر زبان برنامه نویسی سی شارپ – آموزش سی شارپ https://sourcesara.com/csharp-overview/ https://sourcesara.com/csharp-overview/#respond Tue, 10 Jul 2018 21:04:28 +0000 https://sourcesara.com/?p=1760 مروری بر زبان برنامه نویسی سی شارپ سی شارپ یک زبان برنامه نویسی ساده، مدرن، عمومی و شیء گرا می باشد که توسط مایکروسافت توسعه داده شده است و توسط انجمن ECMA و سازمان بین المللی استاندارد (ISO) تأیید شده است. زبان برنامه نویسی سی شارپ در جریان توسعه .Net […]

نوشته مروری بر زبان برنامه نویسی سی شارپ – آموزش سی شارپ اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.

]]>
csharp overview 1760 مروری بر زبان برنامه نویسی سی شارپ   آموزش سی شارپ

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

سی شارپ یک زبان برنامه نویسی ساده، مدرن، عمومی و شیء گرا می باشد که توسط مایکروسافت توسعه داده شده است و توسط انجمن ECMA و سازمان بین المللی استاندارد (ISO) تأیید شده است.

زبان برنامه نویسی سی شارپ در جریان توسعه .Net Framework توسط Anders Hejlsberg و تیمش توسعه داده شد. C# برای CLI یا (Common Language Infrastructure) طراحی شده است و شامل کد اجرایی و محیط زمان اجرا است که اجازه استفاده از زبان های سطح بالا در پلتفرم های مختلف را می دهد.

به دلایل زیر، استفاده از زبان برنامه نویسی C# بسیار گسترده است

  • یک زبان برنامه نویسی مدرن و جامع است
  • شیء گرا است
  • جزء گرا است
  • برای یادگیری آسان است
  • یک زبان ساختاری است
  • برنامه های کارآمد و با کیفیت تولید می کند
  • بر روی انواع سیستم عامل های کامیپوتری کامپایل می شود
  • بخشی از .Net Framework است

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

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

قابلیت ها و ویژگی های منحصر به فرد زبان سی شارپ

  • پشتیبانی از شرط های Boolean
  • جمع کننده خودکار زباله
  • کتابخانه استاندارد
  • پشتیبانی از ورژن های مختلف Assembly
  • خواص و رویداد ها
  • امکان مدیریت Delegate ها و Event ها
  • امکان آسان از ویژگی Generic
  • Indexer ها
  • کامپایل شرطی
  • چند نخی (Multithreading)
  • امکان استفاده از LINQ و Lambada
  • تعامل با نسخه های مختلف سیستم عامل ویندوز

نوشته مروری بر زبان برنامه نویسی سی شارپ – آموزش سی شارپ اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.

]]>
https://sourcesara.com/csharp-overview/feed/ 0
سر تیترها در HTML – آموزش HTML https://sourcesara.com/html-headings/ https://sourcesara.com/html-headings/#respond Tue, 10 Jul 2018 14:55:57 +0000 https://sourcesara.com/?p=1722 سر تیترها در HTML منظور تعریف سر تیترها در HTML یا همان عناوین از تگ های <h1> تا <h6> استفاده می کنیم. <h1> مهمترین عنوان و <h6> کم اهمیت ترین عنوان را مشخص می کند. [crayon-5b4c0deda9a88472842611/] نکته: مرورگر ها به صورت خودکار به قبل و بعد از هر عنوان مقداری […]

نوشته سر تیترها در HTML – آموزش HTML اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.

]]>
html headings 1722 سر تیترها در HTML   آموزش HTML

سر تیترها در HTML

منظور تعریف سر تیترها در HTML یا همان عناوین از تگ های <h1> تا <h6> استفاده می کنیم. <h1> مهمترین عنوان و <h6> کم اهمیت ترین عنوان را مشخص می کند.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

امتحان کنید

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

سر تیترها مهم هستند

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

اهمیت عنوان ها یا سر تیترها

در HTML باید از <h1> برای نمایش عنوان های اصلی و مهم استفاده شود و با افزایش این عدد از ۱ تا ۶ از میزان اهمیت عنوان ها کاسته می شود.

نکته: هرگز نباید از عنوان ها برای نمایش متون بزرگ (BIG) و یا ضخیم (BOLD) استفاده کرد.

عنوان های بزرگتر

هر یک از عنوان ها در HTML دارای انداز پیشفرض می باشند. اما با اسفتاده صفت font-size در CSS می توانید اندازه دلخواه را بر روی آن ها اعمال کنید.

<h1 style="font-size:60px;">Heading 1</h1>

امتحان کنید

خطوط افقی

در اسناد HTML به منظور ایجاد یک خط افقی و یا جدا کردن محتوای سند از یک دیگر از تگ <hr> استفاده می شود.

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

امتحان کنید

عنصر <head>

عنصر <head> هیچ ارتباطی با عنوان های سند ندارد بلکه اطلاعات متای مربوط به سند HTML را در خود نگه می دارد. اطلاعات متا به کاربران نمایش داده نمی شود. تگ <head> باید بین دو تگ <html> و تگ <body> تعریف شود.

<!DOCTYPE html>
<html>

<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>

<body>
.
.
.

امتحان کنید

نکته: معمولا از اطلاعات متا برای تعیین عنوان سند، مجموعه کاراکتر ها، استایل ها، لینک ها، اسکریپت ها و غیره استفاده می شود.

چگونه کدهای منبع یک سند را مشاهده کنیم؟

حتما تا به حال یک صفحه وب را دیده و از خود پرسیده اید که “چگونه آن را ساخته اند؟”.

نحوه مشاهده کدهای منبع

برای اینکار، بر روی صفحه مورد نظر کلیک راست کنید، سپس از منوی باز شده گزینه “View Page Source” را انتخاب کنید. پنجره ایی باز خواهد شد که شامل کد های منبع آن صفحه می باشد. البته با استفاده از این روش فقط می توان کد های HTML، کدهای CSS و جاوا اسکریپت مشاهده کرد.

بازبینی یک عنصر

برای بررسی و بازبینی یک عنصر، ابتدا بر روی آن یا بخش خالی صفحه کلیک راست کنید، سپس از منوی باز شده گزینه “Inspect” و یا “Inspect Element” را انتخاب کنید تا چگونگی ساخته شدن عناصر آن صفحه را مشاهده کنید (در پنجره باز شده کد های HTML و سی اس اس را مشاهده خواهید کرد). البته شما علاوه بر مشاهده کد ها می توانید آن ها را ویرایش کنید.

نوشته سر تیترها در HTML – آموزش HTML اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.

]]>
https://sourcesara.com/html-headings/feed/ 0
خصوصیت ها در HTML – آموزش HTML https://sourcesara.com/html-attributes/ https://sourcesara.com/html-attributes/#respond Mon, 09 Jul 2018 11:14:39 +0000 https://sourcesara.com/?p=1719 خصوصیت ها در HTML خصوصیت ها اطلاعات اضافی را در مورد عناصر HTML فراهم می کنند. خصوصیت ها تمام عناصر HTML می توانند دارای خصوصیت باشند. خصوصیت ها اطلاعات بیشتری را در مورد عناصر فراهم می کنند. خصوصیت ها همیشه در تگ شروع مشخص می کنند. خصوصیت ها معمولا به […]

نوشته خصوصیت ها در HTML – آموزش HTML اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.

]]>
html attributes 1719 خصوصیت ها در HTML   آموزش HTML

خصوصیت ها در HTML

خصوصیت ها اطلاعات اضافی را در مورد عناصر HTML فراهم می کنند.

خصوصیت ها

  • تمام عناصر HTML می توانند دارای خصوصیت باشند.
  • خصوصیت ها اطلاعات بیشتری را در مورد عناصر فراهم می کنند.
  • خصوصیت ها همیشه در تگ شروع مشخص می کنند.
  • خصوصیت ها معمولا به صورت نام / مقدار تعریف می شوند. مانند name=”value”.

خصوصیت href

لینک ها در HTML با تگ <a> مشخص می شوند. آدرس لینک در خصوصیت href مشخص می شود.

<a href="https://www.goole.com">This is a link</a>

امتحان کنید

در مورد لینک ها و تگ <a> بعدا مطالب بیشتری را یاد می گیرید.

خصوصیت src

عکس ها در HTML با تگ <img> تعریف می شوند و نام و آدرس عکس در خصوصیت src مشخص می شود.

<img src="sample.jpg">

امتحان کنید

خصوصیت عرض و ارتفاع

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

<img src="sample.jpg" width="500" height="600">

امتحان کنید

اندازه عکس ها با پیکسل مشخص می شود. برای مثال width=”500″ یعنی عرض تصویر ۵۰۰ پیکسل است. در مورد عکس ها و خصوصیت ها آن ها در بخش ها بعدی بیشتر می آموزید.

خصوصیت alt

خصوصیت alt یک متن جایگزین برای عکس مشخص می کند تا زمانی که نمی توان عکس را نمایش داد یا عکس موجود نیست، این متن به کاربر نشان داده شود.

<img src=" sample.jpg" alt="Image not found">

امتحان کنید

خصوصیت style

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

<p style="color:red">I am a paragraph</p>

امتحان کنید

خصوصیت lang

زبان سند را می توان در تگ <hml> اعلام کرد. این اعلام با استفاده از خصوصیت lang انجام می شود. مشخص بودن زبان سند برای برنامه ها دسترسی و موتور های جستجو از اهمیت بالایی برخوردار است.

<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>

دو حرف اول (en) در مقدار خصوصیت lang زبان را مشخص می کند و اگر زبان دارای گویش خاصی باشد از دو حرف دوم (US) برای اعلام آن استفاده می کنیم.

خصوصیت title

در اینجا خصوصیت title به یک عنصر <p> اضافه شده است. مقدار داخل خصوصیت title زمانی که اشاره گر ماوس بر روی عنصر قرار بگیرد، به عنوان راهنمای ابزار نمایش داده می شود.

<p title="I'm a tooltip">
This is a paragraph.
</p>

امتحان کنید

پیشنهاد ما: استفاده از حروف کوچک برای نام خصوصیت است

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

پیشنهاد ما: استفاده از علامت نقل قول (“) برای مقادیر خصوصیت است

در HTML 5 نیازی به استفاده از علامت (“) برای مقادیر خصوصیت ها نیست. برای نمونه خصوصیت href نشان داده شده در بالا می تواند بدون علامت نقل قول نوشته شود.

Bad

<a href=https://www. google.com>

امتحان کنید

Good

<a href="https://www.google.com">

امتحان کنید

اما W3C توصیه می کند تا از علامت نقل قول در اسناد HTML و همچنین اسناد پیچیده تر مانند XHTML استفاده شود.

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

<p title=About html>

امتحان کنید

مثال بالا به درستی کار نخواهد کرد زیرا مقدار خصوصیت title شامل فضای خالی می باشد. استفاده نکردن از نقل قول ها می تواند باعث بروز خطا های غیره منتظره شود.

علامت نقل قول تکی (‘) یا دوتایی (“)

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

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

<p title='John "ShotGun" Nelson'>

یا برعکس

<p title="John 'ShotGun' Nelson">

امتحان کنید

خلاصه

  • تمام عناصر HTML می توانند خصوصیت داشته باشند.
  • خصوصیت title اطلاعاتی را به عنوان راهنمای ابزار فراهم می کند.
  • خصوصیت href اطلاعات ادرس را برای لینک ها مشخص می کند.
  • خصوصیت های width و height اطلاعات مربوط به اندازه عکس را مشخص می کنند.
  • خصوصیت alt یک متن جایگزین برای عکس و خوانندگان صفحه فراهم می کند.

خصوصیت های HTML

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

توضیحات خصوصیت
یک متن جایگزین برای عکس مشخص می کند تا زمانی که نمی توان عکس را نمایش داد یا عکس موجود نیست، این متن به کاربر نشان داده شود alt
مشخص می کند که عنصر ورودی باید غیرفعال باشد disabled
آدرس اینترنتی را برای لینک مشخص می کند href
یک شناسه منحصر به فرد برای عنصر را مشخص می کند id
نشانی یا آدرس را برای یک تصویر مشخص می کند src
یک استایل درونی برای عنصر مشخص می کند style
اطلاعات اضافی در مورد یک عنصر را مشخص می کند (به عنوان راهنمای ابزار نمایش داده می شود) title

نوشته خصوصیت ها در HTML – آموزش HTML اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.

]]>
https://sourcesara.com/html-attributes/feed/ 0
عناصر در HTML – آموزش HTML https://sourcesara.com/html-elements/ https://sourcesara.com/html-elements/#respond Sun, 08 Jul 2018 21:33:49 +0000 https://sourcesara.com/?p=1717 عناصر در HTML عناصر معمولا یک عنصر HTML دارای یک تگ شروع و یک تگ پایان است که محتوا در بین این دو تگ قرار می گیرد. [crayon-5b4c0dedaa443623687144/] تگ شروع محتوای عنصر تگ پایان <h1> My First Heading </h1> <p> My first paragraph </p> <br> عناصری را که فاقد محتوا […]

نوشته عناصر در HTML – آموزش HTML اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.

]]>
html elements 1717 عناصر در HTML   آموزش HTML

عناصر در HTML

عناصر

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

<tagname>Content goes here...</tagname>
<p>My first paragraph.</p>

تگ شروع محتوای عنصر تگ پایان
<h1> My First Heading </h1>
<p> My first paragraph </p>
<br>

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

عناصر تو در تو

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

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

امتحان کنید

توضیحات مثال

عنصر <html> کل سند را تعریف می کند و یک تگ شروع <html> و یک تگ پایان </html> دارد. محتوایی که در داخل این عنصر قرار گرفته است، خود نیز یک عنصر است (عنصر <body>).

<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

عنصر <body> بدنه سند را تعریف می کند و یک تگ شروع <body> و یک تگ پایان </body> دارد. مانند عنصر قبلی محتوایی که در داخل این عنصر قرار گرفته است، نیز یک عنصر است (<h1> و <p>).

<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>

عنصر <h1> یک عنوان تعریف می کند که یک تگ شروع <h1> و یک تگ پایان </h1> دارد. محتوای داخل این عنصر به صورت متن می باشد (My First Heading).

<h1>My First Heading</h1>

عنصر <p> یک بند یا پاراگراف تعریف می کند که یک تگ شروع <p> و یک تگ پایان </p> دارد. محتوای داخل این عنصر نیز به صورت متن می باشد (My first paragraph).

<p>My first paragraph.</p>

تگ پایان را فراموش نکنید

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

<html>
<body>

<p>My first paragraph
<p>My first paragraph

</body>
</html>

امتحان کنید

کد بالا در تمام مرورگر ها کار می کند و دلیل آن هم این است که گذاشتن تگ پایان اختیاری است. اما همیشه نمی شود از نتیجه همچین کد هایی مطمئن بود و ممکن است نتایج و خطا های غیره منتظره ایی را تولید کنند.

عناصر خالی

همان طور که قبلا هم اشاره شد، عناصری را که محتوایی ندارند، عناصر خالی می نامند. برای نمونه <br> یک عنصر خالی است که تگ پایان ندارد. عناصر خالی می توانند در تگ شروع بسته شوند مانند: </br>.

در HTML 5 نیازی به بستن عناصر خالی نیست. اما اگر می خواهید کد های شما معتبر باشد و یا نیاز دارید که سند شما توسط تجزیه کننده های XML قابل خواندن باشد، باید تمام عناصر را ببندید.

تگ ها را به صورت حروف کوچک استفاده کنید

تگ ها HTML به بزرگ یا کوچک بودن حروف حساس نیستند. برای مثال تگ <P> برای مرورگر یعنی همان <p>. در استاندارد HTML 5 نیاز نیست که حتما از حروف کوچک استفاده کنید. اما W3C توصیه می کند تا از حروف کوچک در اسناد HTML و یا اسناد دقیق تر مانند XHTML استفاده شود.

نوشته عناصر در HTML – آموزش HTML اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.

]]>
https://sourcesara.com/html-elements/feed/ 0
مثال های پایه HTML – آموزش HTML https://sourcesara.com/html-basic/ https://sourcesara.com/html-basic/#respond Sat, 07 Jul 2018 16:27:10 +0000 https://sourcesara.com/?p=1714 مثال های پایه HTML در مورد استفاده شدن تگ هایی که یاد نگرفته اید در مثال ها نگران نباشید. در فصل های بعد آن ها را یاد خواهید گرفت. اسناد HTML تمامی اسناد HTML باید با یک اعلام نوع سند یعنی <!DOCTYPE html> شروع شوند. خود سند HTML با تگ […]

نوشته مثال های پایه HTML – آموزش HTML اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.

]]>
html basic 1714 مثال های پایه HTML   آموزش HTML

مثال های پایه HTML

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

اسناد HTML

تمامی اسناد HTML باید با یک اعلام نوع سند یعنی <!DOCTYPE html> شروع شوند.

خود سند HTML با تگ <html> شروع و با تگ </html> پایان می یابد.

بخش قابل مشاهده هر سند HTML در بین دو تگ <body> و </body> قرار می گیرد. به مثال زیر توجه کنید.

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

امتحان کنید

عنوان ها (Heading)

عنوان ها در HTML با استفاده از تگ های <h1> تا <h6> تعریف می شوند. <h1> مهمترین عنوان را تعریف می کند و با بیشتر شدن عدد از اهمیت عنوان کاسته می شود.

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

امتحان کنید

پاراگراف ها (Paragraph)

پاراگراف ها در HTML با تگ <p> تعریف می شوند.

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

امتحان کنید

لینک ها (Link)

لینک ها در HTML با استفاده از تگ <a> تعریف می شوند.

<a href="https://www.w3schools.com">This is a link</a>

امتحان کنید

مقصد لینک ها در صفت href مشخص می شود. صفت ها برای ارائه اطلاعات بیشترد مورد عناصر استفاده می شوند. در مورد صفت ها در فصل بعد مطالب بیشتری یاد خواهید گرفت.

عکس ها (Image)

عکس ها در HTML با تگ <img> تعریف می شود. در تگ <img> آدرس فایل منبع (src)، متن جایگزین (alt)، عرض و ارتفاع به عنوان صفات ارائه می شود.

<img src="image.jpg" alt="not found" width="104" height="142">

امتحان کنید

دکمه ها (Button)

دکمه ها در HTML با تگ <button> تعریف می شوند.

<button>Click me</button>

امتحان کنید

لیست ها (List)

لیست ها در HTML با تگ <ul> یا  <ol> ایجاد می شوند. سپس در درون این تگ ها، تگ های <li> یا همان آیتم های لیست تعریف می شوند.

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

امتحان کنید

نوشته مثال های پایه HTML – آموزش HTML اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.

]]>
https://sourcesara.com/html-basic/feed/ 0
ویرایشگرهای HTML – آموزش HTML https://sourcesara.com/html-editors/ https://sourcesara.com/html-editors/#respond Sat, 07 Jul 2018 05:32:11 +0000 https://sourcesara.com/?p=1728 ویرایشگرهای HTML نوشتن HTML با استفاده از Notepad ویندوز و TextEdit مک صفحات وب می توانند با استفاده از ویرایشگر های HTML حرفه ایی ایجاد و اصلاح شوند، اما توصیه ما استفاده از یک ویرایشگر ساده مانند نرم افزار Notepad و نرم افزار TextEdit است. ما اعتقاد داریم که استفاده […]

نوشته ویرایشگرهای HTML – آموزش HTML اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.

]]>
html editors 1728 ویرایشگرهای HTML   آموزش HTML

ویرایشگرهای HTML

نوشتن HTML با استفاده از Notepad ویندوز و TextEdit مک

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

به منظور ساخت اولین صفحه وب خود با استفاده از Notepad ویندوز و TextEdit مک چهار مرحله زیر را دنبال کنید.

مرحله ۱: باز کردن Notepad در ویندوز

  • در ویندوز ۸ یا جدید تر، برای باز کردن Notepad بر روی لوگوی ویندوز در پایین و سمت چپ صفحه کلیک کنید و کمله Notepad را تایپ کنید.
  • در ویندوز ۷ یا ویندوز های قدیمی تر، منو استارت را باز کرده و از مسیر Programs > Accessories برنامه Notepad را اجرا کنید.

مرحله ۱: باز کردن TextEdit در مک

از مسیر Finder > Applications برنامه TextEdit را اجرا کنید. همچنین برای ذخیره سازی درست فایل ها، از قسمت Preferences > Format گزینه “Plain Text” را انتخاب کنید. سپس در زیر قسمت  “Open and Save” تیک گزینه “Display HTML files as HTML code instead of formatted text” را فعال کنید. بعد از انجام این کارها یک سند جدید باز کنید.

مرحله ۲: نوشتن HTML

کد های زیر را در داخل Notepad بنویسید.

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

html editors 1728 1 ویرایشگرهای HTML   آموزش HTML

مرحله ۳: ذخیره صفحه HTML

برای ذخیره سند بر روی کامپیوتر تان، از منوی File گزینه Save as را انتخاب کنید. سپس در پنجره باز شده در قسمت نام Index.htm را وارد کنید و از بخش Encoding گزینه UTF-8 (کد گذاری مورد استفاده برای اسناد HTML) را انتخاب کنید.

html editors 1728 2 ویرایشگرهای HTML   آموزش HTML

نکته: شما می توانید از پسوند html به جای htm استفاده کنید. تفاوتی بین این دو وجود ندارد.

مرحله ۴: مشاهده صفحه HTML در مرورگر شما

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

html editors 1728 3 ویرایشگرهای HTML   آموزش HTML

نوشته ویرایشگرهای HTML – آموزش HTML اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.

]]>
https://sourcesara.com/html-editors/feed/ 0