آموزش HTML به زبان ساده-قسمت سوم:تگ های head و body

آموزش html قسمت سوم

آموزش html قسمت سوم-تگ های head و body
آموزش html قسمت سوم

معرفی تگ head

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

حالا دوباره به بحث سند html برمی‌گردیم. میان تگ های head می‌توانیم لینک هایی از زبان های مختلف مانند زبان طراحی CSS یا فونت هایی همچون font awesome که یک فونت تصویری است را قرار بدهیم. همچنین می‌توانیم با استفاده از تگ title عنوان صفحه خود را تعیین کنیم. دیدید که رفتار تگ head دقیقا مشابه سر انسان است.

گفتیم تگ head همانند سر انسان است. علاوه بر وجود مغز در سر ما می‌توانیم روی سر خود یک کلاه بگذاریم یا اینکه یک ماسک روی صورت خود بگذاریم. درتگ head نیز این رفتار وجود دارد و ما می‌توانیم انواع تگ های دیگر مانند تگ های متنی را در بین آن قرار دهیم. اما بهتر است از این کار اجتناب کنید.

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

معرفی تگ body

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

در درس قبلی گفتیم که HTML5 نوع بهبود یافته و پیشرفته تر HTML است. حال که با تگ body آشنا شدید می‌توانیم توضیحات خود را گسترده تر کنیم. درHTML برای تعیین رنگ نوشته ها یا لینک های یک سایت باید درون تگ باز بدنه یعنی <body> صفاتی مانند رنگ نوشته،رنگ لینک ها و… را قرار می‌دادیم اما به لطف فناوری CSS و HTML5 دیگر نیازی به این کار نیست و می‌توانیم با استفاده از CSS همه عناصر داخل بدنه سایت را به طور کامل کنترل کنیم.

برای اینکه با توضیحات ارائه شده اُنس بگیرید کافی است به قطعه کد های درون باکس زیر توجه کنید.

See the Pen dybeevo by amir (@amir5250) on CodePen.0

ما در قسمت سر یا head نیز یک متن قرار داده‌ایم تا شما با موضوعات ذکر شده بیشتر آشنا شوید. اما همانطور که می‌بینید نوشته های درون باکس از چپ به راست چیده شده اند که این موضوع دلیلی برای نگرانی ندارد. در درس های بعدی شما با تگ های متنی بیشتر آشنا می‌شوید و به شما روش راست چین کردن متن ها آموزش داده می‌شود.

در قسمت معرفی تگ head به شما وعده نمایش دو نمونه از تگ های مجاز قسمت head را داده بودیم. حال اگر به جعبه کد ها نگاهی دقیق بیاندازید متوجه حضور یک تگ متا و یک تگ عنوان می‌شوید که در اولی نوع رمز گذاری سایت را که در جلسه‌ی دوم این دوره آموزش توضیح داده بودیم را تعیین کردیم و نوع آن را روی استاندارد UTF-8 قرار دادیم و در تگ دوم عنوان سایت خود را تعیین کردیم. می‌بینید که هر دو تگ چیزی را در صفحه نمایش نمی‌دهند زیرا اولی یک به بدنه دستور داده تا از استاندارد UTF-8 پشتیبانی کند و تگ دوم عنوان سایت است که در قسمت مخصوص url مرورگر ها نمایش داده می‌شود.

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

0 دیدگاه

برای نوشتن دیدگاه ، باید وارد حساب کاربری خود شوید.

قوانین و مقررات ارسال دیدگاه در "به اضافه" را مطالعه کرده و آنها را می‌پذیرم.


نمایش دیدگاه ها
هیچ دیدگاهی وجود ندارد!