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

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

خدا را شکر این روزها به مدد و یاری وب سایتهای زیادی که به منظور آموزش زبان های برنامه نویسی از جمله HTML راه اندازی شده ،  دیگر یاد گرفتن این دسته زبان ها کار مشکل و غیر ممکنی نیست و شما هرکجا که باشید می توانید HTMLبیاموزید.با اینکه این دسته وب سایتها بسیار زیاد هستند ولی من تصمیم گرفتم که 8 تا از بهترین آنها را برای شما گلچین کنم و در اینجا به شما تقدیم کنم. باید تاکید کنم که MUO با وجود مقالات معرکه ی Simon در مورد اصول پایه ای HTML ، مقالات Tina در مورد اکفت های HTML و نکات آموزشی Guy در باب HTML که به شما کمک می کند تا وب سایت خود را سریع تر لود کنید ،  به طور قطع اولین سایتهای آموزشی HTML محسوب می شود.

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

8 سایت مناسب برای مثالهای کدهای HTML

HTML Dog

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

HTML Dog یک جعبه ی تمیز و مرتب از تمام کدهای مورد نیاز به شما می دهد که شما به راحتی می توانید آنها را کپی کنید و هرجایی که لازم داشتید استفاده کنید . وقتی که به کدهای حرفه ای و سطح بالا نیاز پیدا کردید می توانید به راحتی به منوی سمت چپ بروید و “HTML Advanced”   یا  مناطق CSS  را سرچ کنید  .

W3Schools

با این که HTML Dog مورد علاقه ی من است زمانی پیش می آید که نیاز دارم برای دریافت و چک کردن ساختارهای پایه ای به W3Schools مراجعه کنم. W3Schools مکانی است که وقتی می خواهم کمی کدهای فانتزی به کار ببرم به آنجا می روم. W3Schools یکی از محبوب ترین منابع برای تمام کدهای ساده و داینامیک است از PHP گرفته تا XML و جاوااسکریپت با این حال شما در آنجا یک جای عالی پیدا خواهید کرد که برای کدهای پایه ی HTML است .

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

Quackit

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

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

LandOfCode

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

این  قسمت از سایت کمی حرفه ای تر از ابزار مشابه به کار رفته در سایت W3Schools است چرا که در این سایت شما دکمه های اضافی و زیادی را دارید که به شما اجازه می دهد نتایج را در یک پنجره ی جدید ببینید. نه فقط در یک صفحه ی نمایش در سمت راست مانند  چیزی که در W3Schools  وجود داشت!

Ove Klykken

سایت دیگری که بسیار مفید و کاربردی است و شما را به سمت کدهای حرفه ای و کامل می برد  سایت  Ove Klykken است .

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

EchoEcho

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

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

Java2s

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

Webpages That Suck

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

در این سایت شما مثالهایی را از کدهای مختلف HTML مشاهده خواهید کرد که بعضی از این کدها خوب و درست اند و بعضی نادرست و اشتباه . در این سایت شما می توانید بعضی از اشتباهات روزانه ی هر طراح وبی را  در قسمتی به نام  “Daily Sucker”  مشاهده کنید. قسمتی که واقعا می تواند برای شما خنده دار به نظر برسد !

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

با تشکر از همگی شما

منبع : MAKEUSEOF.COM