آموزش HTML – اسکریپت

ما دو زبان اسکریپتی خیلی محبوب داریم که در HTML مورد استفاده قرار میگیرن، جاوا اسکریپت (Javascript) و وی بی اسکریپت (VBscript). این زبان ها به ما کمک میکنن تا صفحات HTML رو داینامیک یا پویا کنیم و همچنین تعامل بهتری با کاربر برقرار کنیم. اما باز جاوا اسکریپت محبوبتر از وی بی اسکریپت هستش و ما هم بیشترروی جاوا اسکریپت زوم میکنیم.

 

برای مثال از Ajax استفاده میکنیم تا کاربر مجبور به بارگذاری مجدد کل صفحه نباشه (داینامیک کردن صفحه) یا در زمان های خاص بجای اینکه برای نمایش پیامی کاربر رو به صفحه دیگه ای بفرستیم با استفاده از جاوا اسکریپت پیامی رو نمایش بدیم، منو های زیبا بسازیم و خیلی کارهای دیگه از اگر بخوام فقط بعضی هاشو نام ببرم کل صفحه پر میشه.

در این درس ما فقط نحوه استفاده از جاوا اسکریپت رو در HTML آموزش میدیم نه جاوا اسکریپت رو! توجه داشته باشید که جاوا اسکریپت با HTML اصلا قابل مقایسه نیست و برای یاد گیری این زبان باید وقت خیلی بیشتری بذارید اما میتونید از کدهای آماده ای که برنامه نویسان از قبل نوشتن استفاده کنید و در اینصورت باید حداقل دانش پایه ای از این زبان رو داشته باشید تا بتونید در صورت نیاز کمی تغییرش بدید و در صفحه بکار ببرید.

 

ادامه

آموزش HTML – فرم ها

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

حالا دقیقا همین فرمها با همین هدف تو محیط وب اومدن و اسمون شده وب فرم (Web form).

وب فرم ها مخلوطی از دکمه ها ، Check box ها و  Input field ها و… هستند که همگی یک هدف دارن: اطلاعاتی از کاربر بگیرن و برای پردازش اطلاعات دریافت شده اونها رو به سرور بفرستن.

 

ایجاد فرم در HTML

برای ساخت فرم در HTML از تگ <form> استفاده میکینم و المنت های که نیاز داریم رو داخل این المنت قرار میدیم و در نهایت دکمه submit رو به فرم اضافه میکنیم تا اطلاعات فرستاده بشن.

 

ادامه

آموزش HTML – گروه بندی المنتها

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

برای اینکار ما از دو تگ <div> (مخفف Division) و <span> استفاده میکنیم. همونطورکه تو درس قبلی گفتیم <div> یک المنت Block-level و <span> یک المنت Inline-level هست.  توجه کنید که منظور ما گروه بندی تو پشت صحنه است نه در ظاهر! برای اینکه گروه المنتها رو در ظاهر گروه بندی کنیم از المنت <fieldset> استفاده میکنیم.

 

گروه بندی با <span>

این المنت بصورت پیشفرض هیچ تغییری در صفحه ایجاد نمیکنه اما وقتی با استفاده از مشخصه(attribute) های class و id استفاده کنیم میتونیم با استفاده از CSS برای اونها استایلی تعیین کنیم.

مثالی از گروه بندی با <span>

<!DOCTYPE html>
<html>
<head>
<title>Softafzar.net | Grouping elements with span</title>
<style type="text/css">
span.benefit {
	color:green;
}
</style>
</head>
<body>
<p>Early to bed and early to rise makes a man 
  <span class="benefit">healthy</span>,
  <span class="benefit">wealthy</span> and 
  <span class="benefit">wise</span>.
</p>
</body>
</html>

خروجی:

Early to bed and early to rise makes a man healthy, wealthy and wise.

همونطور که میبینید ما در اینجا یکجور گروه بندی انجام دادیم و رنگ فواید رو با رنگ سبز مشخص کردیم توجه میکنید که ما نام کلاس همه <span> ها رو benefit گذاشتیم تا بتونیم با CSS همه اونها رو به رنگ سبز در بیاریم. در واقع در کد CSS گفتیم رنگ همه <span> هایی که کلاسی با نام benefit دارن رو سبز کن.

 

ادامه

آموزش HTML – مقدمه

به نام خدا

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

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

با ما باشید 😉

 

HTML چیست؟

  • HTML مخفف Hyper Text Markup Language و به معنای زبان نشانه گذاری ابر متن است.
  • HTML زبان نشانه گذاری (Markup language) اصلی برای ساخت صفحات وب (Web pages) و نمایش اطلاعات در مرورگر وب (Web browser) است.

یک زبان نشانه گذاری مجموعه تگ ها(Tag) است که محتویات سند رو شرح میدن.

نکته: به اسناد HTML یا HTML documents  صفحات وب (Web pages) هم گفته میشه.

با یادگیری این زبان شما میتونید شروع به طراحی صفحه وب خودتون کنید یا صفحات وب رو دستکاری و ویرایش کنید.

HTML یه زبان برنامه نویسی(Programming language) نیست بلکه یه زبان نشانه گذاریه. اگر شما از قبل زبانهای نشانه گذاری دیگه ای مثل XML رو بلدید یاد گرفتن HTML براتون خیلی ساده تر خواهد بود!
ادامه