آموزش html (اچ تی ام ال)

اچ تی ام ال (html) چیست

 عبارت HTML مخفف Hper text markup Language است و همانطور در متن فوق گفته شد به معنای زبان شانه گذاری متن است. Html توسط تگ هایی از هم از جدا می شوند و به مرورگر اعلام می کنند که هرجز در صفحه چه عنصری است و باید به چه صورت نمایش داده شود.

یک سایت STATIC چگونه کار می کند؟

وقتی صفحه ای از سایت با HTML نوشته می شود یعنی صفحه استاتیک یا ایستا است و فقط مقداری از اطلاعات وارد شده از این صفحه به به کاربران نشان داده می شود.به طور کلی یک سایت متشکل از HTMLوCSS،تصاویر،ویدئواست. که این اطلات بر روی سرور قرار می گیرند منظور از سرور همان کامپیوتری است که اطلاعات بر روی آن قرار می گیرند. اما وب سرور یک نرم افزار است که کاربر و سروری که اطلاعات در آن ذخیره شده را بهم وصل می کند.

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

انواع نسخه های قابل استفاده شده html

  • اولین نسخه html 2

  • دومین نسخه html3.2
  • سومین نسخه html4.0
  • چهارمین نسخهhtml 4.01
  • پنجمین نسخه html5

 

نسخه html2.0

نسخه html2.0در سال 1866نوشته شد.این نسخه توسط IETF به عنوان اولین نسخه استاندارد html معرفی شد.این نسخه کامل ترین نسخه استاندارد شده html بود.

نسخه html3.2

14 ژانویه 1997 HTML 3.2 به عنوان یک پیشنهاد W3C منتشر شد. این اولین نسخه بود که بطور انحصاری توسط W3C تهیه و تنظیم شد ، زیرا IETF در 12 سپتامبر 1996 گروه کاری HTML خود را بسته بود.

در ابتدا با نام Wilbur ، HTML 3.2 فرمول های ریاضی را به کلی کاهش داد ، همپوشانی بین برنامه های مختلف اختصاصی را آشتی داد و اکثر برچسب های نشانه گذاری بصری Netscape را تصویب کرد.

 

سومین نسخه html4.0

18 دسامبر 1997 HTML 4.0 به عنوان یک پیشنهاد W3C منتشر شد. این سه نوع ارائه می دهد:

دقیق ، که در آن عناصر مستهلک ممنوع است

انتقالی ، که در آن عناصر مستهلک مجاز هستند

فریم ، که در آن بیشتر فقط عناصر مرتبط با قاب مجاز هستند.

در ابتدا با نام "Cougar" با کد، HTML 4.0 بسیاری از عناصر و ویژگی های خاص مرورگر را به تصویب رساند ، اما در همان زمان به دنبال حذف ویژگی های نشانه گذاری بصری Netscape با مشخص کردن آنها به نفع صفحه های سبک بود. HTML 4 یک برنامه SGML است که با ISO 8879 مطابقت دارد.

چهارمین نسخهhtml 4.01

HTML 4.0 بدون ویرایش شماره نسخه مجدداً با ویرایشهای جزئی مورد تجدید نظر قرار گرفت. 24 دسامبر 1999 HTML 4.01 به عنوان یک توصیه W3C منتشر شد. این سه تغییر مشابه HTML 4.0 و آخرین عیب های آن در 12 مه 2001 منتشر شد.

مه 2000 ISO / IEC 15445: 2000 "ISO HTML" ، بر اساس HTML 4.01 Strict به عنوان یک استاندارد بین المللی ISO / IEC منتشر شد. در ISO این استاندارد در دامنه ISO / IEC JTC1 / SC34 قرار دارد 

پس از HTML 4.01 ، سال هاست که نسخه جدید HTML وجود ندارد زیرا توسعه زبان موازی ، مبتنی بر XML XHTML گروه کاری HTML W3C را در اوایل و اواسط دهه 2000 اشغال کرده است.

 

پنجمین نسخه html5

پنجمین ورژن نشانگذاری برای طراحی سایت  نسخه HTML5 است.نسخه HTML5 برترین نسخه بر HTML است.

علت برتر بودن HTML5:

Html5 درحال توسعه امن

از دستورعمل های ساده تر پیروی می کند

اضافه شدن تگ

اضافه شدن تگ های معنایی

تگ های جدید

 و

اضافه شدن تگ های

و

تگ های

فرم های جدید در html

کنارگذاشتن  و

عدم پشتیبانی از

و

پشتیبانی از مرورگر های اصلی از جمله کروم، سافاری، فایرفاکس، اپرا، وجود دارد.

باcss3 کار می کند و استفاده از w3c ویژگی های بیشتر و چشمگیری به آن اضافه شد.

Local storage یکی از ویژگی های چشمگیر در html5

 

 معرفی سایت های خارجی برای آموزش html

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

CodeCademy

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

Udemy

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

W3school

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

KhanAcademy

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

CodeAvengers

 در این سایت آموزش های با زبان های مختلف همچون انگلیسی،آلمانی، اسپانیایی، روسی، ترکی است.ارائه های آن این سایت به صورت کارتونی انجام میشود و بسیار سرگرم کننده است بیشتر آموزش های آن رایگان است اما بعضی آموزش های آن پولی است.

بهترین مرورگر برای html

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

اشتباهات رایج در html

خطاهای املائی

یکی از اشتباهات رایج در html اگر از ابتدا یکی از تگی اشتباه نوشته است باعث حذف کل دستور های نوشته شده می شود.

بسته نشدن تگها

اگر تگی در html بسته نشود به این معنا است که دیگر آن کد در نظر گرفته نمی شود هر کد html شروع و پایانی دارد که با نماد <> نوشته می شود.

خطاهای مربوط به تگهای head و body

محتواهای داخل html  باید همان داخل html قرار بگیرند و محتواهای body  وhead  هم نباید خارج از کدها قرار بگیرند تا قابل اجرا باشند

تبدیل نکردن ampersand  یا همان &

هنگامی که کد پشت صفحات وب سایت های پیاده سازی شده را نگاه میکنم، یکی از شتباهات رایج در آنها تبدیل نکردن نماد & است. علت این اشتباه این است که کدنویس می تواند به سادگی نماد & را در کدهای خود کپی و یا از روی صفحه کلید وارد کند. بنابراین فراموش میکند برای نمایش این نماد در صفحات وب باید کد HTML آن یعنی ;amp& را در کدهای خود بنویسد

نمایش اشتباه ELLIPSIS

در فارسی برای نشان دادن غیره در انتها متن از کلمه غیره استفاده می کنند و آن را با ... نشان می دهند که به آن گسستگی می گویند. در html کدی وجود دارد به نام shepplip; که با نوشتن این کد باعث می شود که نمایش سه نقطه در html استاندارد باشد

علاوه بر خاصیت گفته شده در بالا باید از دو خاصیت دیگر overflow و white-space هم استفاده کرد.

 

آموزش ایجاد ... در انتهای متن های طولانی با css با ما همراه باشید

اشتباه استفاده از فاصله END

هنگامی که شما برای فاصله گذاری از نماد منها یا dash استفاده می کنید به طور کلی معنی آن برای مرورگر تغییر می کند در نشانه گذاری  html  از کدی استفاده می شود که مرورگر آن را می شناسد.

نماد حق کپی رایت

همگان با این نماد آشنا هستند. حرف C که دور آن یک دایره کشیده شده و نشان دهنده حقوق سایت دربرابر کپی برداری است ©. برخی افراد پس از اینکه روی صفحه کلید خود نتوانستند این نماد را پیدا کنند، تصمیم گرفتند با گذاشتن پرانتز یا براکت اطراف حرف C به صورت (C) شخصا آن را ایجاد کنند! برای استفاده از نماد کپی رایت در سایت باید از کد ;copy& استفاده کنید.

نمایش اشتباه کد تجاری

این نماد trademark است و چنانچه نامی را ثبت کرده اید و می خواهید این نماد در کنار نام ثبت شده™ نمایش داده شود کافیست از کد ;trade& در کدهای HTML خود استفاده کنید. بنابراین لازم نیست شخصا از روش های گوناگون اقدام به ساخت این نماد و از بین بردن مفهوم واقعی آن کنید.

مزایا و معایب html - اچ تی ام ال

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

استاندارد بودن Html از کجا معلوم می شود؟

  •  اعتبار سنجی
  • دستور dotype  براساس نسخه html
  •  تگ های خالی و غیر خالی

اعتبار سنجی

برای آن که متوجه شوید کدهای html شما استاندارد است یا خیر می توانید از سایت های استاندارد سنجی استفاده کرد به عنوان نمونه می توانید از سایت http://validator.w3.org استفاده کنید.

دستور dotype  براساس نسخه html

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

 تگ های خالی و غیر خالی

در زبان html  برخی تگ ها خالی و برخی غیر خالی هستند.

تگ های غیرخالی مانند:

متن پاراگراف

متن پر رنگ

تگ های غیر خالی به تگ هایی می گوییم که تگ باز و بسته دارند.

ادامه مطلب بستن