برترین مقالات کامپیوتر

HTML

تگ ها ( tags ) اجزا تشکیل دهنده عناصر یا elements های اچتمل هستند و در این فصل با عناصر و تگ های پایه و مهم:
<hr> , <br> , <h1> .... <h6> ,  , <p>
آشنا خواهید شد . یکی از بهترین روش های یادگیری تگ های اچتمل دیدن مثالها و تغییر آنها میباشد و با کمک ادیتور اختصاصی ما و با استفاده از امکانات فارسی نویسی آن به صورت آنلاین میتوانید به مطالعه و یادگیری مثالها پرداخته، کدهای اچتمل را تغییر داده و با کلیک روی دکمه "نمایش نتایج" به مشاهده نتایج بپردازید.

مثالها :

مثالی ساده از یک صفحه اچتمل
در این مثال بسیار ساده جمله "!Hellow World" در صفحه مرور گر نمایش داده میشود و در واقع محتوا و متن عنصر body تماما نمایش داده خواهد شد.

پاراگرافهای ساده:
چگونگی نمایش متون با کمک تگ <p> و بصورت پاراگرافی

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

مثالهای بیشتر:

سر تیترها (Headings)
سر تیترها با کمک تگ های <h1> تا <h6> تعیین میشوند. <h1> معرف بزرگترین سر تیتر و <h6> معرف کوچکترین سر تیتر است. مرورگر به هنگام نمایش یک سر تیتر بصورت اتوماتیک یک سطر خالی قبل و بعد از هر سر تیتر اضافه خواهد کرد.

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

مثال بالا در صفحه مرورگر بدین شکل نمایش داده خواهد شد.

پاراگرافها (Paragraphs)
پاراگرافها با کمک تگ <p> معرفی میشوند.مرورگر به هنگام نمایش یک پاراگراف بصورت اتوماتیک یک سطر خالی قبل و بعد از آن اضافه خواهد کرد.

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

مثال بالا در صفحه مرورگر بدین شکل نمایش داده خواهد شد.

سطر جدید (Line Breaks)

برای رفتن سر سطر جدید از تگ <br> استفاده میشود.در اینحالت یک پاراگراف جدید ایجاد نمیشود. تگ <br> از نوع تگ های خالی بوده و دارای تگ انتهائی (مثلا <br/> ) نمیباشد.

<p>This <br> is a para<br>graph with line breaks</p>

مثال بالا در صفحه مرورگر بدین شکل نمایش داده خواهد شد.

کامنت ها در اچتمل (Comments)

برای نوشتن شرح و توضیحات در مورد کدهای اچتمل باید از تگ خاصی استفاده کنید. برای اینکار باید متن و شرحتان را درون علائم <-- و --!> قرار دهید. مرور تگ های comment را در نظر نگرفته و محتوی آنها را نمایش نخواهد داد و فقط شرح و توضیحات برای برنامه نویس و دیگر افرادی که احتمالا در آینده با کد اچتمل کار خواهند کرد مفید خواهد بود. (به محل نویسه "!" توجه کنید! فقط یکی و آنهم در ابتدا)

<!-- This is a comment -->

مثالی در مورد comments و نحوه استفاده از آن

چند نکته کاربردی:

توجه داشته باشید که بدلیل وجود مرورگرهای متفاوت (اکسپلورر، نت اسکیپ، ..) و به دلیل تفاوت دقت نمایش صفحه نمایش کامپیوترها، صفحات اچتمل با اندکی تفاوت در حالتهای مختلف نمایش داده میشوند و همیشه سعی کنید که صفحاتتان را نه تنها با اکسپلورر که معروفترین مرورگر است بلکه با نت اسکیپ و حتی مرورگرهای کامپیوترهای مکینتاش چک کرده و همچنین در دقت های نمایش 800x600 و 1024X768 آن را امتحان کنید.

از نظر فاصله و سطر بندی، متنی که در صفحه ادیتورتان تایپ میکنید با چیزی که مرورگر نمایش خواهد داد متفاوت خواهد بود.همیشه به یاد داشته باشید که فاصله های اضافی (space) و خطهای خالی متن در صفحه ادیتور توسط مرورگر در نظر گرفته نشده و نمایش داده نخواهد شد.

برای نمایش بیش از یک فاصله خالی باید از نویسها یا ترکیب کاراکتری خاصی (None Breaking Space) استفاده کنید. در بخش ( Entities ) نهادها به این مطلب بیشتر پرداخته خواهد شد.

فاصله های اضافی بین کلمات در یک متن اچتمل توسط مرورگرها دیده نخواهد شد و در نمایش همیشه تبدیل به یک فاصله (space) خواهد شد. در ضمن یک خط خالی در متن ادیتور بصورت یک فاصله یا space نمایش داده خواهد شد.

برای ایجاد یک سطر جدید هیچگاه از یک تگ <p> خالی استفاده نکنید و به جای آن از تگ <br> استفاده کنید..

مرورگرها به هنگام نمایش بعضی عناصر بصورت اتوماتیک یک سطر خالی قبل و بعد از آن عنصر نمایش خواهند داد. برای نمونه این گروه از عنصرها میتوان از پاراگراف (<p>) و سرتیترها (<h..>) نام برد.

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

مثالهای بیشتر:

باز هم مثال پاراگرافها
این مثال بعضی از مقادیر قراردادی عناصر پاراگراف را شرح میدهد.

ترازبندی پاراگراف ها
این مثال نحوه تراز بندی یک پاراگراف را با کمک شناسه یا attribute ای به نام align نشان میدهد. در این حالت پاراگراف در وسط ناحیه نمایش داده خواهد شد.
( "align="center )

رفتن سر سطر جدید
این مثال نحوه استفاده از تگ <br> را در یک متن اچتمل نشان میدهد.

سر تیترها
این مثال نحوه استفاده از تگهای <h1> .... <h6> را در یک متن اچتمل نشان میدهد.

ترازبندی سر تیترها
این مثال نحوه تراز بندی یک سر تیتر را با کمک شناسه یا attribute ای به نام align نشان میدهد. در این حالت سر تیتر در وسط ناحیه نمایش داده خواهد شد.
( "align="center )

نمایش خطوط افقی
این مثال نحوه نمایش خطوط افقی با استفاده از تگ <br> میباشد.

استفاده از comment
این مثال نحوه استفاده از comment در کدهای اچتمل را نمایش میدهد.

تعیین رنگ زمینه صفحه
این مثال نحوه تعیین رنگ زمینه صفحه را با کمک یکی از شناسه های (attribute ) عنصر body با نام bgcolor نشان میدهد. (Background Color)
( "bgcolor ="blue )

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

Start Tag	Purpose	کاربرد

<html>	Defines a html document	نشان شروع متن اچتمل

<body>	Defines the document's body	تعیین بدنه و قسمت اصلی صفحه اچتمل

<h1>-<h6>	Defines heading 1 to heading 6	تعریف سر تیترهای h1 تا h6

<p>	Defines a paragraph	تعریف پاراگراف

<br>	Inserts a single line break	رفتن سر خط جدید

<hr>	Defines a horizontal rule	نمایش خط افقی

<!-->	Defines a comment in the HTML source code	نوشتن شرح و comment