آموزش تگ های HTML به زبان ساده

آموزش تگ های HTML به زبان ساده 640 400 نویسنده

آموزش تگ های HTML

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

مثلا این که ما خواهیم یک ویدئو یا تکست را داشته باشیم. باید درخواست خود را از طریق همین تگ ها برای فریوم ورک بفرستیم تا اجرا نماید. البته دایره ی دستور های ما محدود به همین ویدئو ها و تکست ها نیست. و ما می توانیم لینک و عکس و جدول و لیست و غیره را هم با استفاده از تگ ها به وجود بیاوریم. وقتی ما دستور خود را در قالب یک تگ اچ تی ام ال بیان می کنیم مرورگر ما هم آن را تفسیر نموده و سپس اجرا می کند. در ضمن هر تگ دارای یک شروع و یک پایان می باشد. یعنی یک Start و یک End.

html

html

چطور به سادگی کد نویسی یا تگ نویسی کنیم؟

ساده ترین راه آن این است که در گوشه ای از سیستم خود یک نوت پد باز کنیم و تگ مورد نظر مان را در درون آن تایپ کنیم. سپس با پسوند اچ تی ام ال آن را ذخیره کنیم. البته اگر قسمتی از تگ ما قرار است فارسی باشد می توان در قسمت Encoding گزینه ی UTF-8 را انتخاب نمود. در این حالت کد فارسی ما اجرا خواهد شد. برای اجرا کردن تگ هم باید فایل نوت پد را با یک مرورگر مانند فایر فاکس یا اکسپلورر باز کنیم. به این صورت که بر روی آن کلیک راست نموده و با Open with مرورگر خود را انتخاب می کنیم. وقتی می خواهیم تگی را بنویسیم باید با علامت کوچک تر و بزرگ تر این کار را انجام بدهیم.

یعنی < و >. مبنا را در همین دو علامت تایپ نموده و پس از آن دستور را می نویسیم. و دوباره از این دو علامت و مبنای درون آن ها استفاده می کنیم. مانند دستور زیر:

<h1>oap-it.com</h1>

دقت کنید.

باز و بسته کردن تگ ها

وقتی برای بار اول از دو علامت < و > استفاده می کنیم. می گوییم تگ را باز کرده ایم. و وقتی هم که برای بار دوم آن ها را به کار می بریم. می گوییم تگ را بسته ایم. نام تگی هم که در این جا از آن استفاده کرده ایم اچ وان است. که برای بزرگ نمایی واژگان در صفحات وب از آن استفاده می گردد. به صورت کلی نام هر تگ همان چیزی است که در میان دو علامت < و > وجود دارد. البته در بار دوم که از این دو علامت استفاده می کنیم حتما باید علامت فوروارد اسلش  /  را هم به کار ببریم. این را هم بگوییم که در برخی از تگ ها وقتی می خواهیم آن ها را ببندیم ممکن است به گونه ای که توضیح داده شد تگ بسته نشود.

 تگ ها می توانند به صورت پیچیده تر و تو در تو هم نوشته شوند. وقتی می خواهیم یک تگ اچ تی ام ال استاندارد شده بنویسیم باید حتما اول آن را به ثبوت برسانیم. چگونه؟ به دستور زیر توجه کنید:

<html>

</html>

دقت کردید؟ این دفعه ما تگ را به این صورت زیر هم باز و بسته کردیم. و با تایپ کلمه ی اچ تی ام ال آن را به اثبات رساندیم. از این جا به بعد می توانیم تگ های دیگر مان را نیز در درون این تگ بنویسیم. ما به این تگ تو در تو می گوییم.

تگ های زیر شاخه ای

ما دو تگ دیگر را هم می توانیم در دستوری که بالا تر نوشتیم استفاده کنیم. مانند تگ body و head. این یک مثال است. در تگ هد ما می توانیم تنظیماتی را که به صفحه ی وب اختصاص دارد بیاوریم. یعنی تمام گزینه های مربوط به این صفحه را در تگ Head می نویسیم. اما تگ body چه چیزی را می سازد؟ این تگ وظیفه ی پیکره بندی صفحه را به عهده دارد. بنابر این هر چیزی که باید مخاطب آن را ببیند باید ابتدا در همین تگ نگارش شود. این احتمال وجود دارد که با نوشتن دستورات در قسمت های دیگر کد کار کند.

اما حالت استاندارد آن این است که حتما در درون تگ body نوشته شود. و تنضیمات صفحه را هم حتما در تگ head بنویسیم.  مثلا یکی از تنظیمات صفحه می تواند تایتل صفحه باشد که به صورت زیر می توانیم آن را نمایش بدهیم:

<head>

<title>oap-it.com</title>

</head>

چنان که در قسمت بالا می بینید. ما در درون تگ head که وظیفه ی آن تنظیم کردن صفحه می باشد، تگ عنوان را به نام وب سایت oap-it.com در آوردیم. پس از این به بعد هر گاه صفحه را اجرا کنیم عنوان صفحه آدرس سایت ما می شود. اگر بخواهیم استاندارد خود را در این زبان باز هم بالا ببریم. می توانیم از استاندارد اچ تی ام ال 5 استفاده کنیم. این استاندارد اشاره دارد به آخرین نسخه ی این زبان.

br

br

استاندارد سازی بیشتر

خوب است که هر چیزی اصولی انجام گردد. همان طور که بالا تر اشاره نمودیم می توان تگ ها و کد ها را در قسمت های دیگری هم قرار داد . و اتفاقا شاید به خوبی هم نمایش داده شوند. اما بهتر این است که سلسله مراتب در کد نویسی رعایت شوند. و همان طوری که گفتیم تگ ها سر جای خود شان آورده شوند. در این صورت خیال مان راحت خواهد بود که اتفاقی نمی افتد. اما این را هم گفتیم که استفاده از استانداردی به نام اچ تی ام ال 5 می تواند کار را به نهایت کمال برساند. اما چگونه می توان به مرور گر فهماند که ما در حال استفاده از آخرین نسخه ی اچ تی ام ال هستیم؟ کار سختی نیست. تنها باید در ابتدای فرمان های خود یک بار کد خاصی را بنویسیم و تمام. به کد زیر توجه کنید:

<!DOCTYPE html>

دقت کنید که کلا یک مرتبه کافی است تا این کد را بالای تمام کد ها بنویسیم. و به این ترتیب به مرورگر می گوییم که ما در حال نگارش دستور به نسخه ی پنجم اچ تی ام ال هستیم. دقت داشته باشید که این نسخه ی جدید اچ تی ام ال چیز عجیب و غریبی نیست و تنها یک سری قابلیت جدید و کاربردی به آن اضافه شده است. به خاطر داشته باشید که می توانید برای مشخص تر شدن تگ ها، آن ها را به صورت پله ای هم نشان بدهید. و برای این کار می توان از TAB زدن استفاده نمود.

اشاره ای مختصر به تگ های متداول

ما تا به این جا با مفهوم تگ آشنا شدیم. حالا می توانیم برخی تگ های کاربردی را که ممکن است به آن ها احتیاج پیدا کنید را در این قسمت بیاوریم. به تگ های زیر توجه کنید:

<a>

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

<abbr>

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

تگ <address> زمانی به کار برده می شود که بخواهیم مشخصات تماس نویسنده ی کد ها را در صفحه قرار بدهیم. تگ <area> به منظور آوردن یک نقشه ی قابل کلیک کردن در صفحه ی وب موثر است. در نسخه ی پنجم اچ تی ام ال می توانیم از دستور <article> برای تولید یک پست جدید استفاده کنیم.

ساختار تگ

ساختار تگ

کد های جدید تر

زمانی هم که بخواهیم پست فرعی ای را ایجاد نماییم. می توانیم از تگ <aside> استفاده کنیم. چنین محتوا و پستی می تواند زیر شاخه ای از پست اصلی باشد. کد <audio> برای قرار دادن یک آهنگ مورد استفاده قرار می گیرد. برخی از کد ها را اگر کمی زبان انگلیسی خوبی هم داشته باشید می توانید به راحتی حفظ کنید. مانند کد <b> که به معنای بولد می باشد. یعنی با به کار بردن این کد می توان متون را برجسته نمایی کرد. زمانی هم که می خواهیم یک لینک اصلی ایجاد نماییم می توانیم از کد <base> استفاده کنیم. کلا عبارت و کلمه ی base نشان دهنده ی پایه ای بودن یک چیز است. مانند <basefont> که نشان از یک فونت پایه ای دارد. <blockquote> را هم زمانی به کار می بریم که بخواهیم از یک منبع خارجی نقل قول کنیم.

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