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

کامنت گذاشتن در HTML : 

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

برنامه نویسی HTML

در صورتی که در برنامه استفاده شوند نیز به فرم زیر هستند : 

برنامه نویسی HTML

تگ در برنامه نویسی HTML یعنی چی؟ 

همان طور که در قسمت های قبل گفته شد، شما برای اینکه بتوانید به مروگر بفهمانید که از قصد نمایش چه چیزی را به کاربر دارید باید از HTML  استفاده کنید. اما اگر بخواهید ظاهر این المان های معرفی شده را تغییر دهید گزینه های زیادی پیش رو ندارید و باید از CSS استفاده کنید. بنابراین در HTML برای معرفی المان های مختلف یک سایت به مرورگر از مفهومی به نام تگ استفاده می شود. به عنوان مثال برای تعیین کردن مجموعه از جمله ها باید از تگ پاراگراف (Paragraph)، که به صورت p نمایش داده می شود استفاده کنید. بنابراین با استفاده از تگ های مختلف مشا قادر خواهید بود المان های مختلف مانند عکس، فیلم و … را به صفحه اضافه کنید. در حالت کلی دو نوع تگ رد برنامه نویسی HTML  وجود دارد :

  • تگ هایی که در ساختار آن ها باید از تگ شروع و پایان به فرم زیر استفاده شود :

برنامه نویسی HTML

  • تگ هایی که اصطلاحا “self closing” نامیده می شوند، به این معنا که نیازی به بستن تگ به فرم بالا نیست.

برنامه نویسی HTML

معرفی تگ های رایج در برنامه نویسی HTML : 

  • تگ <html> : اولین تگی است که بعد از <DOCTYPE html!> نوشته می شود. شما باید تمام المان هیا صفحه خود را درون این تگ قرار دهید. به عنوان مثال در این عکس ما با استفاده زا این تگ، زبان سایت را انگلیسی تعیین کرده ایم. شما می توانید از زبان های دیگر نیز استفاده کنید.

برنامه نویسی HTML

  • تگ <head> : در این تگ لینکها، تیترها و سایر فایل های شما قرار داده می شود. به ازای هر فایل HTML، شما باید یک بار از این تگ رد برنامه خود استفاده کنید. روش encoding را UTF-8 قرار می دهیم که بتوانیم بسیاری از کاراکترها را نمایش دهیم. 

برنامه نویسی HTML

  • تگ <body> : در مرود این تگ هم شما به ازای هر فایل HTML انها یک بار از این تگ استفاده می شود. تمام چیز هایی که می خواهید به کرابر نمایش داده شود را در این قسمت باید قرار دهید. که دقیقا بعد از تگ head نیز می آید.

برنامه نویسی HTML

  • تگ <p> : این تگ خلاصه شده paragraph است که برای نمایش متن استفاده می شود. 

برنامه نویسی HTML

  • تگ <a> : برای این که شما بتوانید از هایپر لینک در متن خود استفاده کنید باید از این تگ استفاده کنید. این تگ اصطلاحا دارای ویژگی “href” است که شما با استفاده از آن لینک را مشخص می کنید. و در قسمت معین شده متن مورد نظر که باید لینک شود را قرار می دهید. به صورت پیش فرض کلمکه ای که لینک می شود آبی رنگ است و به آندرلاین به کاربر نمایش داده می شود. بعد از کلیک کاربر نیز به رنگ بنفش در می آید. 

برنامه نویسی HTML

  • تگ </img> : برای قرار دادن عکس در متن باید از این تگ استفاده کنید. با استفاده از ویژگی “src” عکس را معین می کنید. همچنین اگر دقت کرده باشید مواقعی پیش آمده است که مرورگر عکسی را باز نمی کند و به جای آن متنی برای شما نمایش داده می شود. با استفاده از ویژگی “alt” شما متنی که به جای عکس نمایش داده می شود را معین می کنید. متنی را انتخاب کنید که متناسب با عکس باشد. این تگ نمونه از تگ های “self-closing” است.  

برنامه نویسی HTML

  • تگ <ul> : این تگ خلاصه شده عبارت unordered list است. به این معنا که لیستی که شما در متن می خواهید قرار دهید نیاز به رعایت ترتیب ندارد. 

برنامه نویسی HTML

  • تگ <ol> : این تگ در مقابل با تگ ul است و خلاصه شده nordered list است. بنابراین برای نمایش لیستی استفاده می شود که رعایت ترتیب در آن اهمیت دارد. 

برنامه نویسی HTML

  • تگ <li> : با استفاده از این تگ مواردی که در لیست نمایش داده می شوند را معین می کنید.
  • تگ </ br> : برای ایجاد یک خط فاصله در بین خطوط از این تگ استفاده می کنید. این تگ نمونه ای از تگ های “self-closing” است.

برنامه نویسی HTML

  • تگ <header> : برای نمایش سر تیترها از این تگ استفاده می شود. برای تعیین سایز می توانید از h1 تا h6 استفاده کنید. از این تگ بعد از تگ body استفاده می شود. 

برنامه نویسی HTML

  • تگ <section> : برای گروه بندی کردن المان ها یکی از روش ها استفاده از این تگ است. این تگ بعد از تگ header و قبل از تگ footer استفاده می شود. 

برنامه نویسی HTML

  • تگ <footer> : از این تگ برای مشخص کردن متن پایانی استفاده می شود. مانند اطلاعات تماس و … .

برنامه نویسی HTML

  • تگ <div> : برای دسته بندی المان های مختلف استفاده می شود و کلی ترین راه برای دسته بندی است. 

برنامه نویسی HTML

توجه : برای این که مطمئن شوید کد HTML نوشته شده، متناسب با استانداردهای برنامه نویسی است می توانید از سایت “https://validator.w3.org/” استفاده کنید. آدرس فایلی که نوشته اید را وارد می کنید و سپس خطاها و اخطارهای مربوط به کد را مشاهده می کنید.

 

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