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

Afshin Javan · 2/7/20

میخواهیم بصورت عملی کار رو شروع کنیم و یه یک پروژه ی واقعی رو استارت بزنیم و درباره‌ی تگ ها در 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 ایجاد کنیم و بسازیم.

رمان ۹۸ | بهترین انجمن رمان نویسی

بهترین انجمن رمان نویسی ایران | رمان ۹۸

forum.roman98.com

رمان ۹۸ | دانلود رمان

نودهشتیا,بزرگترین مرجع تایپ رمان, دانلود رمان جدید,دانلود رمان عاشقانه, رمان خارجی, رمان ایرانی, دانلود رمان بدون سانسور,دانلود رمان اربابی,

roman98.com

Afshin Javan · 2/7/20

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

حواستان باشد که تگ ها به حروف کوچک و بزرگ حساس هستند و شما در 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 که میخواهیم بنویسیم را در بین این دو تگ قرار میدهیم.

رمان ۹۸ | بهترین انجمن رمان نویسی

بهترین انجمن رمان نویسی ایران | رمان ۹۸

forum.roman98.com

رمان ۹۸ | دانلود رمان

نودهشتیا,بزرگترین مرجع تایپ رمان, دانلود رمان جدید,دانلود رمان عاشقانه, رمان خارجی, رمان ایرانی, دانلود رمان بدون سانسور,دانلود رمان اربابی,

roman98.com

Afshin Javan · 2/7/20

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

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

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

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

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

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

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

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

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

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰

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

<body>

</body>
</html>

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

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

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

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

۱
۲
۳
۴
۵
۶
۷
۸
۹

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

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

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

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

رمان ۹۸ | بهترین انجمن رمان نویسی

بهترین انجمن رمان نویسی ایران | رمان ۹۸

forum.roman98.com

رمان ۹۸ | دانلود رمان

نودهشتیا,بزرگترین مرجع تایپ رمان, دانلود رمان جدید,دانلود رمان عاشقانه, رمان خارجی, رمان ایرانی, دانلود رمان بدون سانسور,دانلود رمان اربابی,

roman98.com

خوش آمدید به رمان ۹۸ | بهترین انجمن رمان نویسی

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

Afshin Javan

اخراج شده

رمان ۹۸ | بهترین انجمن رمان نویسی

رمان ۹۸ | دانلود رمان

رمان ۹۸ | بهترین انجمن رمان نویسی

رمان ۹۸ | دانلود رمان

Afshin Javan

اخراج شده

رمان ۹۸ | بهترین انجمن رمان نویسی

رمان ۹۸ | دانلود رمان

رمان ۹۸ | بهترین انجمن رمان نویسی

رمان ۹۸ | دانلود رمان

Afshin Javan

اخراج شده

رمان ۹۸ | بهترین انجمن رمان نویسی

رمان ۹۸ | دانلود رمان

رمان ۹۸ | بهترین انجمن رمان نویسی

رمان ۹۸ | دانلود رمان

درباره ما

لینک‌های پیشنهادی رمان ۹۸

آمار آنلاین

خوش آمدید به رمان ۹۸ | بهترین انجمن رمان نویسی

ما را در شبکه‌های اجتماعی دنبال کنید

اخراج شده

اخراج شده

اخراج شده

ما را در شبکه‌های اجتماعی دنبال کنید

درباره ما

لینک‌های پیشنهادی رمان ۹۸

آمار آنلاین