تگ در HTML

بیشتر بخوانید 👈 XHTML چیست؟

سلام دوستان بنده میثم صحراگرد هستم، مدیر وب سایت آموزشی webtml.ir.
توی این دوره قصد دارم نحوه کار با HTML5 را طبق آموزش های w3schools.com به شما توضیح بدهم. برای این کار وارد سایت w3schools.com می شویم و در صفحه اصلی دکمه LEARN HTML را در وسط صفحه کلیک می کنیم.

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

در ادامه، نحوه کار با این ویرایشگر را خدمت شما توضیح خواهم داد.
برای شروع آموزش HTML روی لینکی که در اینجا قرار دارد، کلیک می کنیم و وارد بخش html introduction می شویم.

HTML چیست؟

در این بخش به مقدمات اچ تی ام ال و این که HTML چی هست، می پردازیم:

HTML یک زبان نشانه گذاری استاندارد برای صفحات وب و در واقع مخفف عبارت Hyper Text Markup Language به معنای زبان نشانه گذاری فرامتن می باشد.
HTML با استفاده از نشانه گذاری، ساختار صفحات وب را توضیح می دهد و المان های HTML که از طریق تگ مشخص می شوند، بلاک های تشکیل دهنده صفحات HTML هستند.

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

تگ در HTML در واقع نام المان هایی است که بین علامت کوچکتر و بزرگتر قرار می گیرند. این تگ ها معمولا از یک جفت تگ آغازین و پایانی تشکیل می شوند.

در اینجا تگ آغازین (<html>) و تگ پایانی (</html>) را مشاهده می کنید.
تگ پایانی شبیه تگ آغازین نوشته می شود، با این تفاوت که در ابتدای آن یک forward slash (/) نوشته می شود.
به تگ های آغازین و پایانی، تگ باز و بسته نیز گفته می شود.
از این که بحث های تئوری کمی طولانی می شود، نگران نباشید، به زودی سراغ مطالب کاربردی می رویم. خب به مثال برمی گردیم.
در این مثال ما ابتدا تگ DOCTYPEرا می بینیم. اگر توجه کرده باشید، من گفتم که تگ در HTML “معمولا” از دو بخش آغازین و پایانی تشکیل می شود، اما این موضوع استثنائاتی هم دارد.
یکی از این استثناها، همین تگ DOCTYPEهست که بخش پایانی ندارد و در واقع، این بخش مشخص می کند که این سند از نوع HTML5 هست و به مرورگر، در نمایش صحیح صفحات وب کمک می کند.
HTML نسخه های دیگری هم دارد که در گذشته استفاده می شدند.
تگ بعدی، تگ html می باشد که در واقع المان ریشه صفحه HTML هست و تمامی تگ ها، درون این تگ نوشته می شوند.
خود تگ html از دو تگ head و body تشکیل می شود. تگ head داده های اضافی در مورد سند را شامل می شود و تگ body محتوای اصلی و قابل مشاهده سند را در بر می گیرد.

از تگ title برای مشخص کردن عنوان سند، که معمولا روی زبانه بالا، نمایش داده می شود، استفاده می کنیم.
در اینجا چون editor آنلاین است، نمی توانیم تغییرات مربوط به این تگ را ببینیم.
در اینجا دو تگ دیگر نیز آورده شده است که یکی، تگ h1 هست که برای نمایش عنوان های بزرگ استفاده می شود و تگ بعدی تگ p است که از آن برای نمایش پاراگراف های متن، استفاده می کنیم.
ما می توانیم در همین مثال، با کلیک کردن دکمه Try It Yourself، کمی کد را تغییر دهیم و نتیجه را مشاهده کنیم.

سراغ تگ h1 و p می رویم و مقادیر آن ها را تغییر می دهیم. مقادیر این بخش ها، بین تگ آغازین و پایانی، قرار می گیرد.
حال متن موجود در تگ h1 را به مقدار دلخواهتان تغییر دهید و روی دکمه RUN کلیک کنید. همان طور که می بینید، نتیجه در بخش سمت راست نمایش داده می شود.
حال محتوای تگ p را تغییر می دهیم و نتیجه را می بینیم.

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

ساختار صفحه HTML

خب به صفحه قبل و ادامه آموزش، بر می گردیم. توی این قسمت، توضیحات کمی راجع به مرورگر داده شده است.
هدف از مرورگرها ازجمله Chrome, Edge, Firefox, Safari خواندن اسناد HTML و نمایش آن هاست و درواقع، مرورگرها تگ های html را نمایش نمی دهند، بلکه از آن ها برای این که چطور اسناد را نمایش دهند، استفاده می کنند.
در اینجا می توانید یک نمایش گرافیکی از ساختار HTML را مشاهده کنید. همان طور که می بینید، تگ html را به عنوان تگ ریشه قرار داده و سایر تگ ها درون آن هستند.

<html>

<head>

<title>Page title</title>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>

این نکته را یادآوری می کنم که تنها محتوای موجود در تگ body به عنوان خروجی صفحات HTML نمایش داده می شود.

تگ DOCTYPE

در این قسمت، یک سری توضیحات تکمیلی راجع به تگ DOCTYPE ارائه شده که من دو نکته مهم را خدمتتون عرض می کنم.
تگ DOCTYPE فقط یک بار در سند HTML و قبل از تگ <html> نوشته می شود و به بزرگی و کوچکی حروف، حساس نیست یعنی ما می توانیم حروف آن را به صورت بزرگ (DOCTYPE) یا کوچک (doctype) بنویسیم و مشکلی پیش نمی آید.
در نهایت و در پایان این آموزش، شما می توانید نسخه های مختلف HTML را ببینید: