در این محصول آموزشی قصد داریم تا شما را با بهترین زبان برنامه نویسی تحت وب آشنا کنیم. شما در این آموزش از ابتدا و از صفر با زبان اچ تی ام ال آشنا خواهید شد و تمامی نکات مورد نیاز را یاد خواهید گرفت. مزیت دیگر زبان برنامه نویسی HTML این است که تقریبا به هیچ ابزاری برای کدنویسی و مشاهده نتیجه احتیاج ندارد که در ادامه به آن اشاره خواهیم کرد.
ابزارهای مورد نیاز :
ابزارهای مورد نیاز برای کاربردهای پیشرفته تر متفائت هستند ولی ما در اینجا برای آموزش و یادگیری فقط به ابزار Notepad در ویندوز و یا TextEdit در مکنتاش نیاز داریم که همان نرم افزارهای پیش فرض می باشند و ما در این آموزش از Notepad در ویندوز استفاده می کنیم. برای شروع ابتدا نرم افزار Notepad را باز کرده یکسری کد را در آن می نویسم. این کدها پایه تمام کدهای HTML می باشد و هر کدی را که می خواهید اضافه کنید باید درون این کدها قرار بگیرند.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
کدهای بالا را به همین شکلی که هست درون نرم افزار بنویسید و سپس فایل را با یک نام و پسوند .htm و utf-8 ذخیره کنید. برای مشاهده کدهای خود در مرورگر بر روی فایل کلیک راست کرده و بر روی Open With رفته و یکی از مرورگرهای خود را انتخاب کنید تا کدها خوانده شده و نمایش داده شوند. البته با کدهای بالا فعلا چیزی نمایش داده نمی شود و هر چه جلوتر برویم این کدها بیشتر و بهتر خودشان را نشان خواهند داد.
حالا یک مثال از مطالب گفته شده میزنیم:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
حالا اگر این کد را در فایل بنویسید و ذخیره و سپس نمایش دهید نتیجه را خواهید دید. یکسری کد را اضافه کرده ایم که بعدا به طور کامل آنها را معرفی می کنیم.
تمامی کدهای زبان برنامه نویسی HTML با تگ شروع و پایان می یابند، اما بعضی از تگ ها به صورت تکی هستند پس به یاد داشته باشید تمامی دستورات در این زبان با تگ که با رنگ زرد در مثال بالا نمایش داده شده اند انجام می شوند. به تگ ابتدایی تگ باز و به تگ انتهایی تگ بسته گفته می شود.
همان طور که مشاهده می کنید تمامی کدها با تگ <!DOCTYPE html> آغاز می شوند. تگ بعدی <html> است که تمامی تگ ها درون آن قرار می گیرند. بعد از آن تگ <head> که در آن یکسری کدها برای سربرگ و ... نوشته می شود. تگ بعدی <body> است که هر کدی درون آن قرار گیرد در مرورگر قابل نمایش می باشد.
توجه داشته باشید از این به بعد تمامی تگ ها را درون تگ <body> قرار می دهیم تا نمایش داده شوند و دیگر کدهای گفته شده را نمی نویسیم.
تگ h1 تا h6 :
این تگ ها برای تیترها به کار می رود و تگ h1 بزرگترین و مهمترین و تگ h6 کوچکترین نوع قلم را به شما می دهد. مانند:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
تگ P :
این تگ که به تگ پاراگراف معروف است برای ایجاد پاراگراف های متنی به کار می رود. طریقه استفاده از آن نیز مانند زیر می باشد:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
تگ a :
این تگ برای ایجاد لینک به وب سایت و یا صفحات دیگر سایت می باشد. مانند:
<a href="https://www.site.com">نام سایت</a>
تگ img :
این تگ برای تعریف و ایجاد و آدرس دهی و نمایش تصاویر به کار برده می شود. مانند:
<img src="site.jpg" alt="site.com" width="104" height="142">
در این تگ بعضی مشخصه ها وجود دارد. مشخصه src همان نام تصویر است و مشخصه alt برای نام دادن به تصویر زمانی که تصویر در سایت به خوبی نمایش داده نمی شود به کار می رود. مشخصه های width و height برای ابعاد تصویر به کار می روند.
تگ buttons :
این تگ برای ایجاد دکمه به کار می رود. مانند :
<button>کلیک کن</button>
منبع : آموزش HTML