آشنایی با تگ‌ها جلسه دوم

آشنایی با تگ‌ها جلسه دوم:

به دستورات برنامه نویسی توسط HTML تگ یا TAG گفته میشود و در علامت های “ < ” یا “ > ” قرار میگیرند.این تگ ها به صورت های مختلف نوشته میشوند یک دسته از این تگها تگ هایی هستند که در هر جایی از صفحه ممکن است درج شود مانند تگ <HR> و هر وقت این کد درج شود بلافاصله یک خط افقی درج میگردد.یک سری تگ یا TAG هستند که باید ابتدا و انتهای مشخصی داشته باشند یعنی این تگ ها دارای ابتدا و انتها هستند و از این نوع تگ ها زیاد استفاده میشود.

cover آشنایی با تگ‌ها جلسه دوم آشنایی با تگ‌ها جلسه دوم cover

نتیجه‌ای که مرورگر نمایش خواهد داد

آشنایی با تگ‌ها جلسه دوم آشنایی با تگ‌ها جلسه دوم آشنایی با تگ‌ها جلسه دوم Capture 1

آشنایی با تگ‌ها جلسه دوم

خب اگر صفحه اچ تی ام ال بالا را نگاه کنید، مشاهده می‌کنید که تمامی کلمات ما در بین دو علامت <> قرار می‌گیرند. ما به این علامت و کلمه بین آن‌ها, اصطلاحا تگ اچ تی ام ال یا گاهی المان اچ تی ام ال می‌گوییم. به مثال زیر توجه کنید

به تگ اول opening tag و به تگ دوم Closing tag می‌گوییم. شما هر چه دوست دارید خطابشان کنید.

  • نمونه یک تگ باز کننده (همان فارسی openning tag است): <html>
  • نمونه یک تگ تمام کننده (معادل فارسی closing tag است): <html/>

قالب تگ‌های HTML به صورت بالا تعریف می‌شوند. یعنی در ابتدا نام تگی که قصد استفاده از آن را داریم,در بین < > می‌نویسیم، سپس محتوایی که می‌خواهیم نمایش دهیم را بین دو تگ ابتدایی و انتهایی نوشته  و در آخر المان را با علامت اسلش /  تمام می‌کنیم. 

 

حتما به بسته شدن و باز شدن تگ‌هایتان دقت داشته باشید

 

 

ساخت سند html

 

  • اولین جمله هر سند اچ‌تی‌ام‌ال <!DOCTYPE html> است. این بخش در واقع به همه بیان می‌کند که ما در حال ایجاد یک صفحه HTML هستیم. پس  اولین کاری که انجام می‌دهیم، آن است که همین کلمه را در ابتدای سند می‌نویسیم. اگر نگاهی به صفحه ساده‌ای که برایتان مثال زدیم نیز بیندازید, در خط اول کلمه <!DOCTYPE html> را می‌بینید.
  • دومین رکن اصلی  همان <html> و <html/> است که برای شروع نوشتن زبان اچ تی ام ال از آن استفاده می‌کنیم. پس در قدم بعدی و بعد از <!DOCTYPE html> آن را می‌نویسیم. همه محتویات یک صفحه اچ تی ام ال را از این به بعد در بین این دو تگ نوشته می‌شود.
  • بین دو <html> و <html/> تگ‌های جدیدی با اسم <head> و <head/> قرار می‌گیرند. معمولا چیزهایی که در این بخش گفته می‌شود به صورت مستقیم در سایت شما نمایش داده نمی‌شوند.

 

آشنایی با تگ‌ها جلسه دوم آشنایی با تگ‌ها جلسه دوم آشنایی با تگ‌ها جلسه دوم Capture 2

 

یکی از کدهای مهمی که در این بخش قرار میگیرد، <“meta charset=”UTF-8> است. این کد در واقع با انکود صفحه مطابق با استانداردی است که برای نوشتن حروف فارسی ضروری است. پس اگر قصد نوشتن فارسی در صفحات دارید، حتما از این کد در بین تگواستفاده کنید.

 

در بین دو تگ <head> و <head/> علاوه بر کدهای متا، تگ جدیدی قرار می گیرد که عنوان صفحه شما خطاب می‌شود.این تگ همان <title> و <title/> است که یک عنوان برای صفحه اچ‌تی‌ام‌ال شما معین می‌کند و در نوار بالای مرورگر به عنوان اسم صفحه نشان می‌دهد. مثلا عنوان سایت ما “تمینا|قالب وردپرس|…” است. 

هر آ«چه که ما نتیجه اونو توی مرورگر می بینیم بین دو تگ <body> و <body/> قرار می گیرند.

 

در اولین قسمت از سری آموزش HTML با نحوه ایجاد یک صفحه اچ‌تی‌ام ال آشنا شدید. در ادامه با تگ‌ها و مفاهیم اولیه یک صفحه HTML آشنا شدید و الان می‌دانید که در واقع تگ‌ها بدین صورت نوشته می‌شوند: content یعنی یک بار تگ ما باز می‌شود و سپس دوباره بعد از آنکه کارمان تمام شد بسته می‌شوند و محتوای مورد نظر نیز در بین تگ باز و بسته نوشته می‌شود. همچنین فهمیدیم که در ابتدای هر صفحه اچ‌تی‌ام‌ال تگ‌های ثابت و مخصوصی وجود دارند که می‌گویند قصد ایجاد یک صفحه HTML داریم. این تگ‌ها عبارتند از وووو. این تگ‌ها همیشه در صفحات قرار می‌گیرند. برای نمایش صحیح حروف فارسی در صفحه، حتما کد <“meta charset=”UTF-8> را در بین تگوقرار دهید.

 

 

آموزش HTML

یک نظر

  1. منظورتون از لغت ” تگو ” چی هست؟

دیدگاه خود را بیان کنید