نقشه راه یادگیری html

سلام ، خیلی خوش اومدی . قبل از هر چیز بذا اینو بگم که :

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

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

اقا اصن این html برا چی استفاده میشه؟

دیدی وقتی دارن یه ساختمون رو میسازن اول اسکلت بندیش رو درست میکنن بعد میرن سراغ دیواراش و نمای ظاهریش ؟ در کمال تعجب همچین روالی موقع ساخت فرانت یه سایت اتفاق می افته =)

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

میدونی چَرا ؟

چون هر چیزی که مربوط به ظاهر و زیبایی میشه مربوط میشه به یه چیزی به اسم css

فاز کلی و ساختارش چیه ؟ یه دید کلی بده ازش

خیلیا وقتی میگی html یه زبون برنامه نویسه یهو جوش میارن با رگای بیرون زده میگن زبون نیست ! ولی خب مخفف شده Hypertext Markup Language که خب :).

ببین کل html یسری کلید واژه است ( که بهشون میگیم tag ) که هر کدوم مربوط به یه المان خاصه . برا متن یسری تگ داریم ، برای عکس و لینک یسری تگ و ... مهم اینه که این تگا رو با یه ترتیب درست پشت سر هم بنویسی همین ^^

ساختار فایل :

ببین اولا اینکه پسوند فایلت باید .html باشه و اینکه یسری تگ های اولیه حتما باید توی فایلت باشه تا مرورگرت سر دربیاره چی به چیه و بتونه تگ هایی که اون بین نوشتی رو اجرا کنه . پس اول باید بدونی قالب یه فایل html چیه که اینجا توضیح داده. ببین همین اول کار برو اینجا نگاهی هم به تگ های meta بنداز ، شاید یکم اولش گیج بشی ولی یکم که بگذره میفهمی داستانشون چیه

ادیتور یا محیط برنامه نویسی :

ببین تو به یه جایی نیاز داری که بیای توش کدت ( همون تگ ها منظورمه ) رو بنویسی . اینکار رو میتونی توی code editor یا IDE انجام بدی . اینکه کدوم بهتره و فرقشون چیه داستانش درازه ولی من پیشنهادم برای HTML اینه که از Visual studio code استفاده کنی

المنت های block و inline

ببین المنت های html دو دسته کلی دارن ، یا خاصیت block طوری دارن یا inline هستن . لازمه که بری اینجا ببینی این دوتا مفهوم چی هستن و هر المنتی توی html جز کدوم دسته قرار میگیره

داستان این attribute ها چیه ؟

ببین بعضی المنت ها هستن که یسری پارامتر میگیرن ، مثلا به المنتی که قرار برات یه عکس نشون بده باید لینک اون عکس رو بدی . پس وقتی میری سراغ یادگیری هر المنت حواست باشه که تمام اتریبیوت هاشو به دقت بررسی کنی

پرکاربرد ترین !

ما برای مدیریت بهتر المنت هامون اونارو میذاریم داخل یسری المنت به اسم container که پر کاربرد ترینشون

· <div>

· <span>

که لازمه هرکدوم رو دقیق یادبگیری

متن و پاراگراف

یکی از پر کاربرد ترین المنتها توی html مربوط به متن و heading میشه . و مهم تریناشون

· تگ های مربوط به هدینگ که میشن<h1> تا <h6>

· تگ های مربوط به متن

o <p>

o <hr>

o <br>

o <pre>

· و خوبه که درمورد تگ های مربوط به formatting متن رو هم باهاشون اشنا باشی

فورم ها و input

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

حالا form یجورایی مث کانتینر میمونه برای input هات و میتونی با قرار دادن input هات داخلش بتونی بهتر مدیریتشون کنی این لینک خوبه . قرارمون یادت نره ! حتما اتریبیوت هاشونم بخون ^-^

لینک ها

توی html ما برای لینک دادن از تگ <a> استفاده میکنیم . حتما حتما نیازه که به اتریبیوت هاش مسلط باشی همین . ایجا رو میتونی بخونی

ای وای حالا عکسا رو چیکار کنیم ؟؟؟؟

نمیدونم چرا جو دادم ولی برا نشون دادن عکسا خیلی ساده از <img> استفاده میکنیم . اما من توصیه میکنم ساده ازش نگذری و حتما اینجا رو خوب بخونی

المنت های مربوط به media

توی html تو میتونی عکس ، فیلم و فایل صوتی رو به کاربر نشون بدی نکته اش اینه که باید نسخه html و ساپورت مرورگر رو درنظر بگیری و بهشون اشراف داشته باشی ، لازم نیست اینارو حفظ کنی ولی تو باغ باش که چی به چیه ، اینجا خوبه

لیست و table

خوبه که بلدشون باشی برای table اینجا بد نیست . لیست ها کاربردشون خیلی بیشتر و توصیه میکنم انواعش رو یادبگیری . کل بخش لیست رو میتونی از اینجابخونی

این داستان semantic چیه ؟

ببین داستان اینه که میتونی برای کانتینر بجای استفاده از div و span از المنت های سمانتیک استفاده کنی که خوبیشون اینه که هم مرورگر و هم یه برنامه نویس دیگه که بیاد کدت رو بخونه میفهمه محتوای داخل این المنت ها چیه . کسی که سمانتیک کد میزنه داره حرفه ای کار میکنه . برای اینکه حرفه ای باشی اینجا رو بخون *-^

یسری سایت خوب برای یادگیری معرفی میکنی

تقریبا تمام لینک هایی که اینجا گذاشتم از سایت w3schools.com بود . کوتاه گفته و سعی کرده تا اونجا که میشه مثال قابل اجرا و تعاملی برای مطالبش بذاره . من خیلی وقتا با اجرا کردن مثالش و دستکاریشون فهمیدم که اصن چی به چیه

سایت خوب بعدی developer.mozilla.org که سایت فوق العاده خوب و کاملیه . این دوتا سایت توی دنیای فرانت جز مراجع خیلی بزرگ و کامل به حساب میان . ولی یکم ظاهر قدیمی دارن و ممکنه توشون خسته شی

پس یسری سایت ایرانی باحال معرفی کن =)

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

کیفیت دوره های سایت راکت هم خوبه

اگر بنظرت چیزی رو جا انداختم یا پیشنهادی داری که باهاشو بتونم مقاله رو بهتر کنم با گفتنشون تو کامنتا لطف بزرگی بهم میکنی . اگر خوشت اومد و بنظرت مفید بود با لایک کردن بهم بگو که کلی ذوق میکنم =))

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

فعلا ?