جاوا اسکریپت – درس ششم: HTML زبان نشانه‌گذاری ابرمتن

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

به‌عبارت‌دیگر برای حرفه‌ای شدن در برنامه‌نویسی JS باید به‌خوبی بتوانید با HTML و CSS کارکنید.

HTML چیست؟

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

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

برای مثال کد زیر که دارای چند تگ متفاوت است یک صفحه وب ساده است.

جاوا اسکریپت - درس ششم: HTML زبان نشانه‌گذاری ابرمتن

شاید این کد چندان صفحهٔ پرزرق و برقی ایجاد نکند اما این مثال تمام المان‌های پایهٔ موردنیاز صفحهٔ وب را پوشش می‌دهد.

دستورات کلی زبان HTML

کد را با یک تگ ساده تحت عنوان <!DOCTYPE HTML > شروع می‌شود که نوع صفحهٔ وب را مشخص می‌کند. با این کار به مرورگرها می‌فهمانید که این صفحه از چه استانداردی پیروی می‌کند. HTML در نسخه‌های مختلفی ارائه‌شده است که برای هرکدام از DOCTYPE متفاوتی استفاده می‌شود. برای مثال در این کد نوع سند صفحهٔ وب HTML انتخاب‌شده است که نشان‌دهندهٔ استفاده صفحه از استانداردهای HTML5 است. برای معرفی سایر نسخه‌های HTML روش‌های متفاوتی برای معرفی وجود دارد.

در اساس DOCTYPE به مرورگر می‌گوید که چگونه صفحهٔ وب را نمایش دهد. علاوه بر آن DOCTYPE می‌تواند بر روی CSS و JS نیز اثر بگذارد.

در مثال بخش قبل همانند هر صفحهٔ HTML دیگری دیدید که هر المان یا هر بخش به‌عنوان یک تگ توسط دو بلوک متن احاطه‌شده است. این تگ‌ها دستوراتی هستند که به مرورگر می‌گویند چگونه صفحهٔ وب را نمایش دهد.

هر دستور دارای دو تگ است؛ تگ باز و تگ بسته. تگ باز به مرورگر می‌گوید که دستور از کجا شروع می‌شود و تگ بسته محل پایان دستور را مشخص می‌کند. تگ بسته غالباً با کاراکتر (/) همراه است. برای مثال <p> به منزلهٔ شروع یک پاراگراف و </p> به مرورگر می فهماند که پاراگراف به پایان رسیده است. البته تعدادی از المآن‌ها هستند که فقط دارای یک تگ هستند و تگ بسته ندارند. مانند تگ <img>، <input> و <br> که فقط شامل یک تگ می شوند البته این تگ‌ها باید حتماً همراه (/) در انتهای تگ قبل از علامت (>) باشند برای مثال <br />

تگ‌هایی html که برای هر صفحهٔ وبی ضروری هستند

برای اینکه صفحات وب به درستی کار کنند و در مرورگرها به درستی نمایش داده شوند باید حتماً شامل تگ‌های زیر شوند

تگ <html>

این تگ در ابتدای هر صفحهٔ وب ظاهر شده (بعد از DOCTYPE ) و در آخر آن به صورت </HTML> برای مشخص کردن پایان صفحه است، این تگ به مرورگر می‌گوید که محتوای این صفحه حاوی کدهای HTML است. در واقع کلیه اطلاعات صفحات وب  بین تگ باز و بسته اچ تی ام ال قرار داده می شوند.اگر صفحهٔ وب را مانند یک درخت تصور کنیم تگ <HTML> مانند ریشهٔ آن است و تگ‌های <body> و <head> دو شاخهٔ اصلی آن.

تگ <head>:

این تگ به‌عنوان رأس یک صفحهٔ وب شناخته می‌شود، که می‌تواند حاوی اطلاعاتی مانند عنوان صفحه و اطلاعات غیرقابل نمایش مانند کلمات کلیدی، فایل‌های الحاقی، زبان و… که برای مرورگرها مفاهیم خاص دارد.در اضافه تگ head می‌تواند حاوی اطلاعاتی برای مرورگر باشد. برای مثال فایل CSS و Java را اغلب در این تگ به صفحه الحاق می‌کنند.

تگ <body>:

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

تگ <strong>

این تگ برای اعمال تأکید بر روی یک متن خاص است. وقتی‌که شما یک متن را بین دو تگ باز و بسته <strong> قرار دهید متن به صورت boldface یا توپر درخواهد آمد.

تگ <a> یا anchor

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

 

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

 


درس بعدی موضوع این درس درس قبلی
افزودن جاوا اسکریپت به صفحه(به زودی) HTML زبان نشانه‌گذاری ابرمتن مقدمه ای بر برنامه نویسی

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *