آموزش رایگان برنامه نویسی در کانال یوتیوب yasharhabibimedia
سبد خرید
0

هیچ محصولی در سبد خرید نیست.

یادگیری html در ۵ دقیقه

یادگیری html در ۵ دقیقه

مطلب پیشنهادی:آموزش رایگان برنامه نویسی
یادگیری html در ۵ دقیقه ! چطوری میشه؟ توی این پست میخوام توی ۵ دقیقه ! html رو بهتون یاد بدم. دوستان html پایه‌ای‌ترین و ساده‌ترین موضوع یا مطلبی هست که باید یاد بگیرید. پس بریم که یه آموزش سریع رو شروع کنیم.

html چیه؟

html یه زبان نشانه گذاری هست که برای ساخت وبسایت ازش استفاده میشه. ساختار اصلی سایت با همین html نوشته میشه. در کنار html از css و javascript هم استفاده میشه تا سایت پویا و تعاملی بشه. اگر میخواین برنامه نویس وب بشید، حتما باید html رو بلد باشید چرا که پایه و اساس وب است. توی همین مطلب ( یادگیری html در ۵ دقیقه ) بهتون اصول html یا اچ تی ام ال رو یاد میدم.

معماری وب

قبل از شروع لازم هست که شما رو با معماری وب آشنا کنم. وقتی که شما وبسایتی رو ایجاد می‌کنید، باید اونو توی اینترنت یا وب آپلود کنید. این کار به کمک سرور انجام میشه. یعنی این که شما فضایی رو خریداری می‌کنید (سرور) و بعد سایت خودتون رو اونجا قرار میدید. بعدش هر کسی می‌تونه سایت شما رو ببینه و ازش استفاده کنه.

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

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

وب چطوری کار میکنه

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

رابطه html، css و js باهم چیه؟

Html اسکلت و ساختار اصلی سایت‌هاست. برای اینکه رابطه این سه زبان رو بهتر درک کنید از تصویر استفاده می‌کنم. یک انسان رو فرض کنید. html میشه همون اسکلت انسان. دقیقا شکل زیر.

ساختار html

حالا به شکل بعدی نگاه کنید.

سی اس اس

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

بعد از تسلط روی html و css باید سراغ جاوااسکریپت یا js برید. برای اینکه درک کنید که وظیفه js توی سایت چیه به عکس زیر نگاه کنید.

جاوااسکریپت

همونطور هم که توی عکس دیدید، js مثل اعصاب و مغز انسان می‌مونه. مغز و اعصاب باعث حرکت کردن و تعامل انسان با بقیه میشه. وقتی بخوایم یک سایت تعاملی و پویا داشته باشیم، از js استفاده می‌کنیم.

ایجاد اولین فایل html

برای اینکه بتونید اولین فایل html خودتون رو بسازید، باید فایل رو با پسوند .html ذخیره کنید. این پسوند نشون میده که فایل شما از نوع html هست و وقتی بازش می‌کنید، با مرورگر باز میشه. برای ایجاد فایل html می‌تونید از ویرایشگرهای رایگانی مثل Atom یا Vscode استفاده کنید.

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

Hello world!

اگر فایل رو توی مرورگر باز کنید با همچین صفحه‌ای رو به رو میشید.

سلام دنیا

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

<h1>Hello world!</h1>

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

اولین کد html

رعایت استانداردهای html

برای نوشتن فایل‌های html باید استانداردها رو رعایت کنید. در تصویر زیر یک فایل استاندارد رو می‌بینید.

استاندارد html

همون‌طور هم که توی تصویر می‌بینید، یک سری تگ باید توی فایل نوشته بشن. تگ html کل محتوا رو در برمیگیره. بعد از اون تگ head تگ‌های مربوط به سند رو داخل خودش داره. مثلا برای اضافه کردن فایل استایل‌ها، لینکشون رو داخل همین تگ head میذاریم. همچنین محتوای سایت ما داخل تگ body قرار می‌گیره.

پاراگراف‌ها

برای قرار دادن یک متن داخل صفحه سایت، باید از تگ مناسب استفاده کنیم. تگ p مناسب این کار هست. دقت کنید که این تگ، هم تگ باز و هم تگ بسته داره و شما باید متن خودتون رو بین این دو تگ بذارید. به تصویر زیر نگا کنید.

پاراگراف ها

لیست‌ها

یکی دیگه از پراستفاده‌ترین تگ‌های html، تگ‌های مربوط به لیست‌ها هستند. برای نشون دادن یک لیست مثل منوهای سایت یا هر لیست دیگه‌ای از تگ ul و li استفاده می‌کنیم. توی عکس زیر نحوه استفاده رو می‌بینید.

لیست html

همون‌طور هم که دیدید، برای نوشتن یک لیست باید اول تگ ul رو بنویسم و بعد در داخل اون لیست‌های خودمون رو با li تعریف کنیم.

فیلدهای ورودی

توی سایت‌ها از فیلدهای ورودی خیلی زیاد استفاده می‌شه. برای گرفتن اطلاعات کاربر، ثبت نام کاربر، گرفتن ایمیل و غیره از تگی به نام input استفاده می‌کنیم. در تصویر زیر نحوه استفاده از اون رو می بینید.

فیلدهای ورودی

این تگ از کاربر ایمیل رو میگیره. نوع تگ رو هم از نوع ایمیل گذاشتیم. همین جا می‌خوام شما رو با دو مفهوم یکی attribute و یکی self-closing تگ‌ها آشنا کنم. ویژگی یا attribute شامل یک سری اطلاعات اضافی درمورد اون تگ هست. مثلا توی تصویر قبلی type یک ویژگی یا attribute هستش که نوع اینپوت رو تعریف میکنه. همچنین یک ویژگی دیگه‌ای که برای تگ input تعریف کردیم، placeholder هستش. این ویژگی یه مقدار میگیره و اونو به کاربر نشون میده.

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

جمع بندی

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

مطلب پیشنهادی:یادگیری تضمینی برنامه نویسی

امتیاز 4.1666666666667 از 6 رای

14

من یاشار حبیبی 15 سال تو حوزه برنامه نویسی وب در حال فعالیت هستم و اینجا قراره تجربیاتم رو باشما به اشتراک بزارم و باهم کلی چیز یادبگیریم و لذت ببریم

دیدگاه کاربران
  • ahmadreza.shamimi 3 خرداد 1400 / 6:25 ب.ظ

    سلام یاشار جان خوبید
    اقا میشه یه Road map.درست برای یادگیری فرانت حالت اینفوگرافی درست کنید ؟

  • آواتار
    ابوالفضل فیروزی 3 خرداد 1400 / 6:51 ب.ظ

    سلام خیلی خوب بود

  • pouyadeveloper1997 4 خرداد 1400 / 0:15 ق.ظ

    سلام توضیحاتتون عالی بود ولی کاشکی یخورده بیشتر در مورد تگ های پر استفاده صحبت میکردید و اینکه بیشتر در کدوم قسمت سایت استفاده میشن

    • یاشار حبیبی 4 خرداد 1400 / 10:02 ق.ظ

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

  • tack.2005.tick 4 خرداد 1400 / 11:40 ب.ظ

    سلام عالی بود
    ولی بهتر بود که بیشتر وترد جزییات میشدید…..یه کوچولو

    • یاشار حبیبی 5 خرداد 1400 / 12:32 ب.ظ

      سلام ممنون، یه آموزش کامل تر به زودی مبزارم حتما ولی یه ویدیو آموزش html, css هم تو یوتیوب دارم ببینیدش حتما

  • آواتار
    yusyn__ 10 خرداد 1400 / 4:30 ق.ظ

    مختصر و مفید بودن مطالب تشکر

  • sajjad85askari 25 خرداد 1400 / 8:24 ب.ظ

    ممنون که به صورت کلی منظور رو رسومدید

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

توسط
تومان