آموزش جامع HTML انواع تگ و اجزای اصلي سندهای HTML

سلام اميدوارم که سلامت باشيد، به قسمت دوم آموزش HTML خوش اومديد اميدوارم از مطالعه‌ی قسمت قبلی لذت برده باشيد و اگر هنوز قسمت قبلی رو مطالعه نکرديد، حتما همين الان جلسه اول رو مطالعه کنید تا بتونيد مطالب اين قسمت رو بهتر متوجه بشيد، قراره کلی نکات و مطالب مهم و جذاب رو باهم در اين قسمت بررسی کنیم! پس بزن بريم سراغ آموزش.

انواع تگ و اجزای اصلی سندهای HTML

از اين جلسه شروع می‌کنم به بررسی زبان HTML فقط همين الان يه نکته‌ای رو بگم که HTML يک زبان برنامه‌نويسی نيست و اون رو به عنوان يک mark up language می‌شناسند، HTML شکل مخفف شده‌ی hyper text mark up language است، می‌دونم اسمش خيلی طولانيه اما اصلا نگران نباشيد انقدر ساده است که سريع‌تر از اون چيزی که فکرش رو بکنيد می‌تونيد ياد بگيريد.

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

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

در HTML ما با تگ‌های مختلف کار می‌کنيم که هر يک از اين تگ‌ها کاربردهايی دارن که کم‌کم با هر يک از اون‌ها آشنا ميشيم.

به طور کلي دو نوع تگ در HTML داريم:

دسته‌ی اول تگ‌هايی هستن که مجردن که به اونها Single Tag ميگيم،
دسته‌ی دوم تگ‌هایی متاهل هستن که به اونها Double Tag ميگيم، تعداد اين نوع تگ‌ها بيشتر از تگ‌های مجرد هست.

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

<p> Hi wellcome to codento </p>

همونطور که می‌بینید تگ p يک تگ متاهل هست يعنی شامل يک تگ باز و يک تگ بسته هست، توجه کنيد که تگ‌های بسته هميشه همراه با يک اسلش هستند (يعنی </>)، اصلا نگران نباشيد در ادامه و قسمت‌های بعدی کاربرد همه‌ی تگ‌هارو بررسی می‌کنيم. تگ هاي باز و بسته همونطور که در تصوير بالا می‌بینید محتوايی که قرار است در تگ قرار بگيريد درست در بين دو تگ باز و بسته قرار می‌گيره،

براي آشنايی بيشتر با تگ‌های مجرد يا Single Tag به مثال زير توجه کنيد:

<img>
</img>

همونطور که در مثال بالا می‌بینید تگ img مجرد هست، تگ‌های مجرد نياز به تگ بسته ندارند و می‌تونيد در انتها آن‌ها از اسلش استفاده کنيد (که البته اختياری هست و هردو شکل نوشتن کاملا درسته)، حالا که با مفهوم اين دو نوع تگ آشنا شديد بريم که يک سند استاندارد HTML رو بررسی کنيم و ببينم که شامل چه تگ‌هايی ميشه:

<!DOCTYPE html>
<html>
    <head>    
    <head/>    
 
    <body>     
<body/>    
<html/>

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

تگ body در زبان html:

و اما تگ body، اين تگ درست جايی هست که تمام عناصر و اجزای صفحه وب که برای کاربر قابل ديدن هست قرار می‌گيرند، به مثال زير توجه کنيد:

<!DOCTYPE html>
<html>
    <head>
    </head>

    <body>
        <p>Hello world!</p>
    </body>
</html>

خروجي مثال بالا: خروجي کد همينطور که در تصوير بالا می‌بيند متنب رو که در بخش body نوشتيم بر روی صفحه‌ی مرورگر چاپ شد.

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

اميدوارم از اين قسمت لذت برده باشيد، حتما اگر سوال نظر‌ و پيشنهادی داريد در بخش نظرات به اشتراک بذاريد، تمرين فراموش نشه، تا قسمت بعدی بدرود!