ا سلام و عرض ادب خدمت شما خوانندگان گرامی روکسو، امروز می خواهیم به عناصر پایه ای HTML بپردازیم.
برای یادگیری HTML و کدنویسی آن می توانید از ادیتور های پیشرفته مانند PHPStorm یا Visual Studio Code استفاده کنید اما در ابتدای کار بهتر است از ادیتور های متنی ساده مانند notepad خودِ ویندوز استفاده کنید. دلیل این مسئله آن است که ادیتورهای پیشرفته به شما در کدنویسی کمک می کنند و شما مطلب را از خودتان نمی نویسید و فراموشش می کنید.
برای کد نویسی به شکل ساده در notepad ابتدا باید آن را باز کنید و سپس به صورت ساده عناصر زیر را در آن بنویسید:
این عناصر تنها یک نمونه هستند تا با کدنویسی در notepad آشنا شویم، بعدا می توانید آن را تغییر دهید. کد هایتان در notepad به این شکل خواهند بود:
کدنویسی ساده HTML در notepad
حالا برای ذخیره سازی این فایل به شکل یک سند HTML باید به این شکل عمل کنید:
این مراحل را در تصویر زیر می بینید:
ذخیره ی فایل notepad به شکل یک سند HTML
نکات مربوط به مراحل بالا:
پس از اینکه فایل را ذخیره کردید می توانید آن را در مرورگر خود باز کنید:
باز کردن فایل ساده ی HTML در مرورگر کروم
اما برای دوره ی ما استفاده از ادیتور هایی مثل notepad ممکن نیست چرا که قرار است همه با هم یاد بگیریم. بنابراین از همان ادیتور آنلاین جاوا اسکریپت استفاده می کنیم که در دوره ی آموزشی جاوا اسکریپت استفاده کردیم. به طور مثال کد زیر را در ادیتور آنلاین اجرا می کنیم:
برای نمایش این کد در مرورگرتان روی این لینک کلیک کنید.
اگر در این قسمت با تگ هایی آشنا شدید که قبلا آن ها را یاد نگرفته اید، جای نگرانی نیست. فعلا می خواهیم با عناصر پایه ای HTML آشنا شویم و در جلسات بعد تمام این تگ ها را توضیح خواهیم داد.
همه می دانیم که تمام اسناد HTML با یک declaration (به معنی «اعلان») شروع می شود: <DOCTYPE html!>
. پس از آن تگ های <html>
و <html/>
را داریم که تمام تگ های دیگر در آن ها نوشته می شوند. البته از بین این تگ ها، تنها تگ هایی که بین <body>
و <body/>
قرار می گیرند برای کاربر قابل مشاهده هستند. مثال زیر را ببینید:
این تیتر ها از <h1>
شروع می شوند و تا <h6>
ادامه دارند. این تگ ها به ترتیب اهمیت نام گذاری شده اند بنابراین <h1>
یعنی مهم ترین و اصلی ترین تیتر و <h6>
یعنی فرعی ترین تیتر. به مثال زیر دقت کنید: