HTML ( اچ تی ام ال ) مخفف Hyper Text Markup Language به معنی زبان نشانه گذاری فوق متن می باشد. Html زبان استاندارد طراحی صفحات وب بوده و کليه کدهای صفحه اعم از طرف سرور و طرف مشتری در نهايت به کدهای HTML تبديل می شود و توسط مرورگر نمايش داده می شوند.

مرورگر ها هیچکدام از کدها و کنترل های سمت سرور مانند کدهای asp و php را نمیشناسند و کد قابل فهم برای سرور اچ تی ام ال می باشد.

کامپایلر های زبان های برنامه نویسی سروری در نهایت کد های خود را برای نمایش به کد html تبدیل میکنند و برای مرورگر میفرستند تا به کاربران نمایش داده شود.

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

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

 هر یک از کدهای html ، معنا و مفهوم خاصی داشته و تأثیر مشخصی بر محتوا می‌گذارند. مثلاً برچسب‌هایی برای تغییر شکل ظاهری متن، نظیر درشت و ضخیم کردن یک کلمه یا برقراری پیوند به صفحات دیگر در html تعریف شده‌اند.

آموزش html

دلایل استفاه از HTML

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

به همین دلیل با یکسری علامت ها به توافق رسیدند که داخل متن از آنها استفاده می کردند. برای مثال اگر در هر دو طرف یک کلمه ای علامت Star (*) میگذاشتند یعنی آن کلمه Bold شده است. این علامت ها کافی نبوده و محدود بودند، از طرفی علامت گذاری کار آسانی نبود، مشکل دیگری نیز وجود داشت و آن پردازش علامت ها در مقصد بود. در نتیجه علامت ها را اسم دار کردند.مثلا اگر می خواستند کلمه ای را Bold کنند دو طرف کلمه را B میگذاشتند. باز هم مشکلی که پیش آمد این بود که به طور مثال در کلمه Boy Book معلوم نیست کدام B علامت و کدام مخصوص خود کلمه است.

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

مشکل بعدی پردازش متن در سمت مقصد(Client) بود که شرکت هایی مانند مایکروسافت آن را برطرف کردند. این شرکت ها مرورگر را نوشتند که وظیفه اش فقط پردازش تگ ها و تبدیل آن ها به شکل واقعی آن ها است.

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

نمونه کد ساده html

 

 

سرفصل های آموزشی html

New
آموزش دوره پیشرفته
/۲۲ساعت
  • معرفی html ، آموزش قالب کلی سایت ، فرم کلی html
  • Formatting
  • ادامه formatting ، تگ <div> ، آموزش رنگ ها ، لینک کردن html  به css ، آموزش background-color
  • آموزش لینک ها و خصوصیات آن در css
  • تصاویر و خصوصیات مربوط به آن در css
  • آموزش جدول و کادر بندی آن در css
  • لیست ها و استایل دادن به آنها در css
  • آموزش نوشتن css ، سلکتور های مربوط به آن و box ها
  • فونت ها و کادر بندی ها
  • طراحی فرم
  • ادامه طراحی فرم
  • ستون بندی صفحت سایت ، صوت و ویدیو
  • متا
  • آموزش طراحی فهرست و سربرگ سایت
  • طراحی سایت با مطالب گفته شده
ثبت نام
New
آموزش دوره مقدماتی
/۱۵ساعت
  • معرفی html ، فرم کلی html ، قالب کلی سایت
  • Formatting
  • ادامه Formatting ، رنگ ها ، تگ <div>
  • لینک ها ، معرفی css  و لینک کردن آن به html
  • معرفی css ، تگ <img>  و کد های مربوط به css
  • طراحی جدول
  • لیست ها
  • نوشتن css و سلکتورهای مهم آن
  • طراحی فرم ها
  • طراحی سایت با مطالب گفته شده
ثبت نام