قسمت اول از دوره HTML و CSS - معرفی HTML

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

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



  • اصلا HTML چیه اخه شوهر عمم میگه یادش بگیرم برنامه نویس میشم

ببین HTML اصلا یه زبان برنامه نویسی نیست بلکه زبان نشانه گذاریه که بخوام انگلیسیشم بگم میشه HyperText Markup Language و این نکته رو هم در نظر بگیر با یاد گرفتن یک زبان برنامه نویسی نمیشه برنامه نویس شد.

  • یعنی چی یه زبان نشانه گذاریه؟

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

ساختار سایت با استفاده از تگ های معنا دار
ساختار سایت با استفاده از تگ های معنا دار


  • کاربردشو میشه برام بگی؟

بذارید با یه مثال کار رو در بیارم، فرض کنید که میخواید یه ساختمون بسازید، اولش باید اسکلت ساختمون رو بزنید و بعدش برید سراغ کارای ظاهرش و.. که تو دنیای وب اسکلت سایت رو با HTML میزنن و ظاهرش رو با CSS عزیز تر.

  • حالا که میدونم HTML چیه چطوری میتونم یک فایل HTML بسازم؟

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

ساختار یک فایل HTML
ساختار یک فایل HTML


  • آقا اوکیه من الان ساختم ولی هیچی نمیفهمم اصلا اینا چین؟

ببین خط اول DOCTYPE برای اینه که به مرورگر عزیز بگیم این فایلی که داری میخونی و نشون میدی یک فایل HTML هست و خوده این کلمه مخقق کلمه Document Type هست

باورت بشه تگ html که خط 2 باز شده و خط 13 باز بسته شده رو اصلا نمیدونم میدونم فقط باید باشه

میرسیم به تگ head که داخلش اسم سایت، توضیحات سایت و لینک های خارجی که استفاده میکنیم رو میذاریم و تگ های meta ای که استفاده شده برای اینه که بگیم کاراکترهامون مثلا فارسیه یا بگیم نویسنده سایت کیه و...

بخش بعدی یعنی تگ body اصل کاره که هرچی تو صفحه وب میبینی داخل تگ body نوشته میشه

  • یعنی الان من برای ساخت یک فایل باید همه این مراحل رو حفظ کنم و بزنم؟

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

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