یک تگ یا المنت شروع شده یک متن بینش آمده سپس تگ بسته شده است.مانند تگ p
بعضی از تگ ها دارای تگ بسته بصورت مجزا نیست. مانند تگ img
المنت با علامت کوچکتر، نام تگ، علامت کوچک شروع شده و با علامت کوچکتر، اسلش، نام تگ، علامت کوچک بسته می شود.
مثال:
1 |
<tagname>Content goes here...</tagname> |
مثال:
1 2 |
<h1>dejavan.ir</h1> <p>amir javanmir</p> |
در تگ بالا <h1> شروع سپس متن dejavan.ir را بین تگ ها نوشته و تگ بسته </h1> را قرار داده ایم.
نکته: تگی مانند <br> دارای تگ پایانی و متن درون تگ نیست و از آن برای رفتن به سطر بعد استفاده میشود. به این نوع المنت که محتوا نمی گیرد المنت خالی گفته میشود.تگ empty هم دارای تک بسته نیست.
المنت درون المنت دیگر
هر المنت می تواند درون تگ دیگر قرار بگیرد. به تگی که تگ پیکر درونش است تگ والد یا parent و به تگ درونی فرزند یا child گفته میشود.
برای مثال تمامی تگ ها درون تگ html است.
مثال:
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <body> <h1>dejavan.ir</h1> <p>amir javanmir</p> </body> </html> |
توضیح:
در مثال بالا تگ html روت و سرشاخه اصلی است که خود دارای تگ های head و body و تعریف کننده document html است.
این تگ با <html> شروع شده و با </html> تمام می شود.
المنتی که درون html قرار دارد تگ body است.
مثال:
1 2 3 4 5 6 |
<body> <h1>dejavan.ir</h1> <p>amir javanmir</p> </body> |
المنت body تعریف کننده document body است.
این تگ با <body> شروع شده و با </body> تمام می شود.
درون تگ body دو المنت دیگر به نام های h1 و p ایجاد شده است.
1 2 |
<h1>dejavan.ir</h1> <p>amir javanmir</p> |
المنت h1 تعریف کننده هد است. این تگ با <h1> شروع شده و با </h1> تمام شده است.
1 |
<h1>dejavan.ir</h1> |
المنت p تعریف کننده پاراگراف است.این تگ با <p> شروع شده و با </p> تمام شده است.
1 |
<p>amir javanmir</p> |
همیشه تگ ها را ببندید
برخی از تگ های html در صورتی که تگ پایانی را قرار دهید با اینکه اشتباه است اما در خروجی بدرستی نمایش میدهد.
1 2 3 4 5 6 |
<body> <h1>dejavan.ir <p>amir javanmir </body> |
با این حال، هرگز به این اعتماد نکنید! اگر تگ پایان را فراموش کنید ممکن است نتایج و خطاهای غیرمنتظره ای رخ دهد!
المنت های خالی در html
المنتی که دارای محتوا نباشد بعنوان تگ خالی شناخته می شود.
برای مثال تگ <br> دارای تگ پایانی نیست و محتوایی ندارد.از این المنت برای رفتن به خط بعد استفاده می شود.
1 |
<p>This is a <br> paragraph with a line break.</p> |
تگ ها حساس به نوع حروف نیستند
در html نام المنت ها حساس به نوع حروف در کوچکی و بزرگی نیستند.برای مثال تگ p با P فرقی نمی کند.
تگ های html:
نام تگ | توضیح |
---|---|
تگ html |
در یک سند html تگ html مربوط به روت اصلی سند است.این تگ حاوی تمامی تگ های دیگر بغیر از تگ <!DOCTYPE> است. |
تگ body |
با استفاده از این تگ می تواند بدنه سند را تعریف کنیم. |
تگ h1 تا h6 |
با استفاده از این تگ می توان تگ های عنوان یا head را ایجاد کنید. |
تگ meta |
این تگ اطلاعاتی را درباره داده سند به مرورگرها می دهد. |
تگ script |
در صورتی که بخواهیم فایل اسکریپت سمت سرور را در فایل html اجرا کنیم از این تگ استفاده می کنیم. عنصر <script> یا حاوی عبارات اسکریپت است یا از طریق ویژگی src به یک فایل اسکریپت خارجی اشاره می کند. کاربردهای رایج جاوا اسکریپت دستکاری تصویر، اعتبار سنجی فرم و تغییرات پویا در محتوا است. نکته: همچنین به عنصر <noscript> برای کاربرانی که اسکریپتها را در مرورگر خود غیرفعال کردهاند یا مرورگری دارند که از برنامهنویسی سمت سرویس گیرنده پشتیبانی نمیکند وجود دارد. |
تگ کامنت |
از این دستور جهت قرار دادن توضیح در سورس کد html استفاده میشود. |
تگ p |
این تگ یک پاراگراف تعریف می کند.مرورگرها بصورت پیش فرض یک لاین خالی بعد و قبل از تگ p قرار می دهند. |
تگ br |
این تگ یک لاین خالی قرار می دهد |
تگ a |
با استفاده از این تگ میتوانیم لینک ایجاد کنیم.با استفاده از این تگ میتوان کاربر را به صفحه دیگر هدایت کرد. |
تگ head |
این تگ حاوی متادیتا یا تگ های meta است. این تگ ها اطلاعاتی را درباره سند جاری را به مرورگر معرفی میکنند مانند کلمه کلیدی،توضیحات،نویسنده سایت،فایل های استایل،فایلهای اسکریپت،نوع یونیکد سند. این اطلاعات در خروجی نمایش داده نمیشود. |
تگ title |
این تگ یک عنوان برای سند جاری تعریف می کند. |
تگ button |
این تگ دارای یک تگ باز و بسته است و قابل کلیک کردن بر روی آن است. |
تگ fieldset |
از این تگ درون فرم استفاده میشود و برای گروه بندی کردن تگ های مشابه در فرم میباشد. |
تگ form |
با استفاده از این تگ می توان فرم خود را با فیلدهای مختلف تعریف کنیم. |
تگ iframe |
این تگ یک فریم ایجاد میکند که هم میتواند width و height بگیرد. از این فریم برای نمایش یک سند document از یک سایت یا صفحه دیگر در صفحه جاری استفاده میشود. |
تگ input |
با استفاده از این تگ میتوان فیلدی را تعریف کرد که بوسیله آن داده ای را دریافت کرد. |
تگ map |
از این تگ برای ایجاد یک نقشه یا map بر روی یک تصویر استفاده می شود. |
تگ hr |
این تگ یک خط کم رنگ ایجاد کرده که یک لاین را به خود اختصاص می دهد. از این تگ برای ایجاد فاصله بین محتوا به شکلی که بینشان یک خط وجود داشته باشد |
تگ pre |
این تگ یک متن را به همان فرمتی که نوشته شده است نمایش می دهد. |
تگ object |
از تگ آبجکت برای قرار دادن یک منبع خارجی در سند جاری استفاده می شود. |
تگ output |
این تگ حاصل محاسبه و نتیجه یک عملیات ریاضی را دریافت و نمایش می دهد. |
تگ b |
از این تگ برای بولد کردن متن استفاده می شود.این متن بولد به منظور اهمیت جلوه دادن متن موردنظر شما نیست. |
تگ select |
برای اینکه بتوانیم یک لیست بصورت آبشاری یا drop-down ایجاد نمایید که با کلیک کردن بتوان یکی از آنها را انتخاب کرد میتوان از تگ select بهره برد. |
تگ strong |
از این تگ برای بولد کردن متن استفاده می شود.این متن بولد به منظور اهمیت جلوه دادن متن موردنظر شما است. |
تگ i |
از این تگ برای مورب و italic نوشتن بخشی از متن استفاده می شود. |
تگ em |
از تگ em برای تعریف متن تاکید شده استفاده می شود. محتوای داخل آن به طور معمول بصورت (کج/مورب) نمایش داده می شود. |
تگ mark |
از این تگ برای نمایش دادن متن بصورت علامت گذاری یا هایلایت شده استفاده میشود. |
تگ small |
از این تگ برای نوشتن یک متن کوچک استفاده میشود. |
تگ del |
از این تگ برای نمایش متن (حذف شده یا تغییر پیدا کرده) از درون سند استفاده میشود. مرورگر بصورت پیش فرض یک خط، وسط متن دارای این تگ می کشد. |
تگ ins |
از این تگ برای نمایش (متن جدید) قرار گرفته شده درون سند، استفاده میشود. مرورگر بصورت پیش فرض یک خط زیر متن دارای این تگ می کشد. |
تگ sup |
از این تگ برای حالت متن فوق العاده استفاده میشود.متن فوق العاده متنی است که فونت سایز متن انتخاب شده نصف فونت اصلی میباشد. |
تگ sub |
از این تگ برای حالت متن فوق العاده استفاده میشود.متن فوق العاده متنی است که فونت سایز متن انتخاب شده نصف فونت اصلی میباشد. |