0

همه چیز درباره‌ی تگ ها در HTML

19 نوامبر 2018
ارسال شده توسط
HTML5 ، طراحی وب
198 بازدید
تگ ها در HTML

در ایستگاه سوم آموزش HTML میخواهیم بصورت عملی کار رو شروع کنیم و یه یک پروژه ی واقعی رو استارت بزنیم و درباره‌ی تگ ها در HTML بصورت کامل صحبت کنیم. در قسمت قبل گفتیم که نرم افزار Notepad رو باز میکنیم، یک فایل جدید میسازیم و با پسوند html. اون رو ذخیره میکنیم و نهایتا اون فایل رو با استفاده از یک مرورگر باز میکنیم.

تگ ها در HTML

قبل از اینکه شروع به نوشتن فایل های HTML کنیم، میخواهیم درباره‌ی مفهوم تگ ها در HTML صحبت کنیم. و بعد از آن به سراغ نوشتن اولین فایل HTML خود میرویم. تگ ها در HTML مفهوم بسیار مهمی هستند. زیرا HTML تمام کارهایش را با استفاده از تگ ها (Tag) انجام میدهد.

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

<start>محتوای تگ</end>

همانطور که در کد بالا میبینید، یک تگ HTML بصورت <start> شروع میشود و با <start/> پایان می‌یابد. و بین این دو میتوانیم محتوای تگ را تعریف کنیم. حالا اینکه چه تگ هایی در HTML وجود دارد و چه کارهایی برای ما انجام میدهند را در ادامه‌ی آموزش با آن آشنا میشویم.

 

تگ های تو در تو

شما در HTML میتوانید تگ های تو در تو داشته باشید. به این معنا که از یک تگ، درون تگ دیگری استفاده کنید. به کد زیر دقت کنید:

<tag1>
	<tag2>محتوای تگ دوم</tag2>
</tag1>

در کد بالا، ما در ابتدا tag1 را ایجاد کرده‌ایم، سپس به عنوان محتوای tag1، یک تگ جدید با نام tag2 ساخته‌ایم. پس تگ ها را میتوانیم بصورت تو در تو در HTML استفاده کنیم.

اسامی که تا کنون برای تگ ها انتخاب کرده‌ایم، مثل tag1, tag2 و… اسامی تست هستند که در HTML وجود خارجی ندارند. هر تگ در HTML کار خاصی برای ما انجام میدهد که در طول این آموزش میخواهیم با انواع تگ های HTML آشنا شویم تا یاد بگیریم که چطور هر آن چیزی که میخواهیم با استفاده از تگ ها در HTML ایجاد کنیم و بسازیم.

 

نکته‌ای مهم درباره‌ی تگ ها

حواستان باشد که تگ ها به حروف کوچک و بزرگ حساس هستند و شما در HTML باید تمامی تگ ها را با حروف کوچک بنویسید.

 

استفاده از تگ ها برای ساختار فایل HTML

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

کدهایی که در ادامه میخواهیم صحبت کنیم، کدهایی است که بین تمام فایل های HTML یکسان هستند و هر فایل HTML باید آن‌ها را داشته باشد.

برای تعیین ساختار HTML، باید با استفاده از یکسری تگ ها اینکار را انجام دهیم.

اولین خط کدی که در فایل HTML خود مینویسیم باید کد زیر باشد:

<!DOCTYPE html>

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

در ادامه باید ۳ تگ دیگر را در فایل HTML خود وارد کنیم. ساختار این تگ ها به این صورت است:

<!DOCTYPE html>
<html>
	<head>  

	</head>

	<body>

	</body>
</html>

کد بالا شامل چند تگ مختلف است که باز و بسته شده‌اند. در خط ۱ ما تگ <html> را باز کرده‌ایم و در خط ۹ آنرا با استفاده از  <htlm/> بسته‌ایم. در ادامه ما هر کد HTML که میخواهیم بنویسیم را در بین این دو تگ قرار میدهیم.

در خط ۲ و ۴ نیز تگ <head> را باز و بسته کرده‌ایم. کاری که تگ head برای ما در HTML انجام میدهد، کار بسیار مهمی است. ما در چیزی که بخواهیم بصورت تنظیمات در فایل HTML خود داشته باشیم را در تگ head قرار میدهیم. برای مثال اگر بخواهیم یک فایل CSS را اضافه کنیم، عنوان صفحه را تغییر دهیم و یا یک فایل جاوا اسکریپت را اضافه کنیم، همه‌‌ی این کارها را در تگ head انجام میدهیم.

در خط ۶ و ۸ نیز تگ body را باز و بسته کرده‌ایم. تگ body مهم ترین تگ در HTML است.

هر چیزی که بخواهیم آن‌را در صفحه‌ی مرورگر به کاربر نمایش دهیم را در درون تگ body قرار میدهیم. در واقع تگ body، همان بدنه‌ی اصلی سایت شما است.

پس یک بار دیگر تکرار میکنیم:

تگ head مربوط به تنظیمات کلی صفحه ما می‌باشد.

تگ body شامل هر آن چیزی میشود که در صفحه‌ی وب ما به نمایش در می‌آید.  حالا میخواهیم کمی بیشتر پیش برویم.

اگر الان این فایل را ذخیره کنیم و آن‌را با استفاده از یک مرورگر باز کنیم، چیزی شبیه به نتیجه‌ی زیر را مشاهده میکنیم.

تگ ها در HTML

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

تغییر عنوان صفحه، یک المان مربوط به تنظیمات صفحه‌ می‌باشد. و همانطور که گفتیم تنظیمات صفحه را در تگ head قرار میدهیم. برای اینکه بتوانیم عنوان صفحه را تغییر دهیم، از تگ <title> در قسمت head سایت خود به این صورت استفاده میکنیم:

<!DOCTYPE html>
<html>
	<head>  
		<title>عنوان صفحه‌ی من</title>
	</head>

	<body>

	</body>
</html>

 

همانطور که در بالا میبینید،  در خط ۴ ما تگ title را درون تگ head قرار دادیم و بین تگ باز و بسته‌ی title، عنوان سایت خودمان را وارد کردیم. حالا اگر فایل را ذخیره کنیم و در مرورگر باز کنیم، با نتیجه‌ی زیر مواجه می‌شویم.

تگ ها در HTML

حالا میخواهیم با تگ body کار کنیم. همانطور که گفتیم:

تگ body شامل تمام چیزهایی میشود که در مرورگر نمایش داده میشود. اگر میخواهید چیزی را در مرورگر نمایش دهید، باید آن‌را در تگ body بنویسید.

برای مثال به کد زیر توجه کنید:

<!DOCTYPE html>
<html>
    <head>
        <title>عنوان صفحه‌ی من</title>
    </head>
    <body>
     سلام من مهدی خسروی هستم از yadify.com 
    </body>
</html>

همانطور که میبینید در کد بالا، ما متن «سلام من مهدی خسروی هستم» را درون تگ body قرار داده‌ایم. این باعث میشود که این متن درون مرورگر به کاربر نمایش داده شود. حالا اگر این صفحه را ذخیره کنیم و فایل را در یک مرورگر باز کنیم، نتیجه‌ی زیر را مشاهده میکنیم.

تگ ها در HTML

البته که اگر متن‌مان را در هرجای دیگری از کدمان‌، مثلا در تگ head نیز  قرار بدهیم، باز هم در صفحه نمایش داده میشود. اما روش درست، استاندارد و اصولی این است که هر چیزی که قرار است کاربر ببیند را در تگ body قرار دهیم.

در این ایستگاه درباره‌ی ساختار کلی فایل HTML نکات بسیار خوبی را یاد گرفتیم. در ایستگاه بعدی، درباره‌ی متن ها در HTML صحبت میکنیم و یاد میگیریم که با استفاده از تگ های مختلف، چه کارهای جذابی میتوانیم با متن ها انجام دهیم. با من در ایستگاه بعدی همراه باشید.

اشتراک گذاری:
برچسب ها:
درباره مهدی خسروی

۸ سال پیش که یادگیری برنامه نویسی رو آغاز کردم، با یک مشکل بزرگ مواجه شدم: کمبود منابع آموزشی حرفه‌ای و کاربردی به زبان فارسی. به همین دلیل، بعد از چندین سال فعالیت حرفه‌ای در زمینه‌ی برنامه نویسی، تصمیم گرفتم دانسته‌ها و تجربیات خودم را با شما عزیزان به اشتراک بگذارم. پیشنهاد میکنم به آدرس yadify.com/gifts حتما سر بزنید :)

مطالب زیر را حتما مطالعه کنید

2 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

  • جالب بود مهدی جان تو جان کلام را گفتی و نیت خیرت به ما ویا حداقل به شخص بنده متفهم شد و مفهوم خوشحالم که عشق به خاک و بوم وطنت داری وازاین ارق هموطن دوستی و مسولیت پذیریت خرسند و خوشحالیم ..موفق و موید باشی عزیزبرادر

    پاسخ

دیدگاهتان را بنویسید

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.