با عضو شدن در کانال تلگرام ما از اخرین مطالب باخبر شوید

همین حالا عضو شوید!

اموزش Html

اموزش Html

یک سند Html از تگ های Html تشکیل میشود.تگ ها درون <tagName> و <tagName/> قرار میگیرند که نشان دهنده شروع و پایان تگ است(<> به معنی شروع و </> به معنی پابان تگ است).

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

<p> this is p tag</p>

 <p> نشان دهنده ی شروع تگ p و <p/> نشان دهنده ی پایان تگ p است.

یک سند ساده ی Html از چندین تگ ابتدایی تشگیل میشود:

<html>
<head>
<title>pmcode.ir</title>
<meta charset="utf-8">
</head>
<body>
 
</body>
</html>

                              

در تمامی صفحات وب این تگ های پایه وجود دارند.(در بخش بعدی کاربرد تگ های بالا را یاد خواهیک گرفت)

نکته: تگ های html میتوانند درون یکدیگر قرار بگیرند.

لازم به ذکر است که بعضی از تگ ها درون html فقط از یک بخش تشکیل میشوند برای مثال:

<br>

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

برای فارسی نویسی از تگ زیر استفاده کنید(در اینده این تگ را توضیح خواهیم داد):

<meta charset="utf-8">

 

انواع تگ ها

 

1. DOCTYPE

        ------> نشان دهنده این است که ما از چه نسخه ی html استفاده کردیم ( <DOCTYPE html!> نشان دهنده HTML5 است )

2. تگ html

        ------> این المان نشان دهندی شروع و پایان سند html است و تمامی تگ ها درون این تگ قرار میگرد.

3. تگ head

        ------> این تگ که اولین تگ بعد از html است حاوی اطلاعاتی از سایت شما میباشد که میتواند شامل:عنوان صفحه و لینک فایل های css و js, محل قرار گرفتن meta تگ ها(متا ت ها بسیار مهم هستند!) باشد و تگ هایی که درون این قرار بگیرند در بدنه سایت شما نشان داده نخواهد شد!

     

4. Body

        ------> این تگ بعد از تگ head قرار میگیرد و شامل مواردی میشود که درون صفحه قرار میگیرند و بدنه سایت شما را تشکیل میدهند و برای کاربر قابل مشاهده است.

5. تگ p

        ------> این تگ که درون body قرار میگرد وظیفه نشان دادن پاراگراف را بر عهده دارد که نمونه ان را در بالا مشاهده میکنید. شاید برای شما سوال پیش بیاید که چرا برای نشان دادن پاراگراف از p استفاده میکنیم و مستقیم ب بدون این تگ نمینویسیم؟

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

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

5. تگ hn (h1 تا h6)

        ------> این تگ ها هم برای نشان دادن متن مورد استفاده قرار میگیرد البته در سایز های متفاوت:

                  

 

در اینده تگ های بیشتری را یاد خواهیم گرفت

اتریبیوت ها

اتریبیوت ها برای مشخص کردن بعضی از ویژگی های یک تگ است که درون تگ باز قرار میگیرند

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

نکته:بعضی از تگ ها فقط با اتریبیوت کار میکنند مثل تگ a که اتربیوت href به مشخص میکند که وقتی بر روی محتوای ان کلیک شد به چه مسیری برود.

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

اتریبیوت id برای دادن ایدی به یک تگ است.(ایدی برای هر تگ باید منحصر به فرد باشد).

البته لازم نیست برای هر تگ بیاییم و ایدی و کلاس بنویسیم (فقط در صورت لزوم)

<p class="class" id="id"> this is p tag</p>

در کد بالا ما به تگ p یک کلاس و یک ایدی دادیم.

موفق باشید!!


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

  تاریخ انتشار : 1397/5/4


نظرات