آموزش html اولین قدمی هست که باید برای یادگیری طراحی سایت بردارید. البته تو پرانتز بگم که آموزش html اولین قدم هست اما به شرطی که مدل اول یادگیری طراحی سایت رو انتخاب کرده باشی یعنی طراحی سایت با استفاده از برنامه نویسی. اگه دوست داری جزئیات بیشتری راجع به مدل‌های طراحی سایت بدونی، توصیه میکنم مقاله از کجا شروع کنم؟ | راهنمای جامع
یادگیری طراحی سایت2023 رو بخونی.
اگه اومدی سراغ یادگیری html حتما میدونی html چیه و به چه دردی میخوره. به همین دلیل سعی میکنم زیاد در این باره توضیح ندم که مطلب طولانی و خسته کننده نشه اما اجازه بدید یه کوچولو html رو معرفی کنیم و بعد قدم به قدم آموزش رو پیش ببریم.
html چیه؟؟
توضیحات قلمبه سلمبه زیادی واسه html وجود داره که احتمالا خوندین یا شنیدین اما من نمیخوام html رو این شکلی بهتون معرفی کنم چون هیچ کمکی بهتون نمیکنه?. میخوام با یه مثال ساده بهتون html رو توضیح بدم و بگم اصلا چرا آموزش html اینقد مهم و ضروریه؟
بیاید فرض کنیم تصمیم گرفتید واسه مسافرت برید ژاپن. مسلما واسه برقراری ارتباط باید ژاپنی بلد باشید. حالا اگه تصمیم بگیرید برید عربستان لازم میشه علاوه بر ژاپنی عربی رو هم یاد بگیرید. به این ترتیب اگه قصد داشته باشید به کشورهای مختلف سفر کنید باید زبان‌های مختلفی هم یاد بگیرید. همین الان یه لحظه این اوضاع رو تصور کنید و ببینید که واقعا چقدر سخته?.
حالا راهکار چیه؟
راهکار اینه که به جای یادگرفتن چندتا زبان، یه زبان یاد بگیریم که همه بتونن به اون زبان صحبت کنن. برای مثال زبان انگلیسی. تو دنیای امروز انتظار داریم اگه زبان انگلیسیمون خوب باشه وقتی به جایی سفر می‌کنیم، یکی دوتا آدم باشن که بتونیم باهاشون ارتباط برقرار کنیم و نیاز خودمون رو رفع کنیم. html دقیقا چنین تعریفی داره و دقیقا به همین دلیله که آموزش html ضروریه. چون مرورگر ما به جای تمرکز روی یادگرفتن چندین مدل قاعده و قانون (زبان) برای نمایش صفحات وب، یک استاندارد جهانی وضع کرده به نام زبان html.
حالا html واقعا زبانه؟
اگه هم صحبت یه برنامه نویس شدید سعی کنید به هیچ عنوان از واژه زبان html استفاده نکنید چون حسابی بهشون برمیخوره. خیلی سریع بهتون میگن html که زبان نیست?. شما به عنوان کسی که آموزش html رو شروع کرده باید بدونید که این قضیه صحت داره یا نه؟
میخوام بگم حرف برنامه نویس‌ها کاملا صحیحه. html یه زبان برنامه نویسی نیست، دلیلش هم اینه که توی html ما دستورات حلقه‌های تکرار، شرط، دستورات پرش و… رو نداریم. وجود نداشتن این دستورات باعث میشه html علی رغم تمام خون دل خوردن‌هایی که برای یادگیریش می‌کشید یه زبان به حساب نیاد. میدونم سخته ولی باید باهاش کنار بیاید.
مواد لازم برای آموزش html:
حالا که با html آشنا شدیم می‌خوایم بینیم برای آموزش html به چه ابزاری نیاز داره؟
برای یادگیری html شما علاوه بر سیستم کامپیوتری و اتصال اینترنت به عزم و اراده راسخ + تمرین و تکرار زیاد + یه نرم افزار ادیتور متن نیاز دارید?
ادیتور متنی نرم افزاری هست که به شما اجازه نوشتن کدهای html و مشاهده خروجی رو میده. از بهترین ادیتورهای متنی که می‌تونید برای آموزش html از اون استفاده کنید می‌تونیم به نوت پد پلاس پلاس، سابلایم تکس، ویژوال استدیو کد و… اشاره کنیم.
اینکه کدومش بهتره هم کاملا به سلیقه خودتون بستگی داره. مثلا من با ویژوال استدیو کد خیلی راحت ترم. لینک دانلود این سه تا ادیتور متنی رو واستون میذارم که بتونید راحت دانلود کنید
ساختارصفحه html:
یه صفحه html در ساده ترین حالت این شکلیه:
<DOCTYPE HTML>
<html>
<head>
<tittle> this is a test site </tittle>
</head>
<body>
this is a test site
</body>
</html>
به این علامت‌های باز و بسته (<>) میگن تگ. توی html هر تگ باز یه تگ بسته داره، البته بعضی تگ‌ها هستن که تگ بسته ندارن اما خیلی محدودن و به مرور تجربه میشناسیدشون اما فعلا اینو بدونید که هر تگ باز حتما حتما یه تگ بسته داره وگرنه به درستی اجرا نمیشه. برای مثال توی مثال بالا تگ باز <html> و تگ بسته <html/> هست.
خب تا اینجای کار ساختار یه صفحه html و مفهوم تگ رو یاد گرفتید. حالا لازمه تگ‌های اصلی یه صفحه html رو دونه دونه بهتون معرفی کنم و بشناسیدشون.
تگ html:
این تگ بدنه اصلی سند html شما رو نشون میده و نوشتن هر دستوری بیرون این تگ بی معنیه.
تگ head:
این تگ در برگیرنده تنظیمات سند html شما هست. مثلا اگه بخواید یه سری فایل طرح و رنگ و اینجور چیزا به صفحه تون الحاق کنید باید دستورات مربوطه رو توی این تگ بنویسید که در ادامه با دستورات مربوط به این بخش آشنا میشید.
تگ title:
اگه دقت کنید توی مثال بالا داخل این تگ یه متن نوشته شده. اگه این صفحه وب رو اجرا کنید این متن بالای صفحه نمایش داده میشه
تگ body:
این تگ بدنه اصلی سایت شما هست. هر چیزی که می‌خواید توی صفحه وب نمایش بدید و کاربر اون رو ببینه باید توی این تگ نوشته بشه. اگه دستوری رو خارج از این تگ بنویسید یا اصلا نمایش داده نمیشه و اگر هم نمایش داده بشه حالت استانداردی نداره پس حتما حتما حواستون به این قضیه باشه.
جمع بندی جلسه اول:
توی این جلسه مفاهیم اولیه آموزش html رو با هم یاد گرفتیم. فهمیدیم html چی هست و چی نیست. ساختار صفحه html رو با هم دیدیم و تگ‌های اصلی اون رو یاد گرفتیم. توی قسمت‌های بعدی مفاهیم بیشتری رو با هم یاد می‌گیریم.
نکته مهم برای تسلط به html و طراحی سایت صبور بودن و تمرین و تکرار زیاد هست بنابراین هر قسمت آموزش html رو با دقت مطالعه کنید و قسمت‌های بعدی آموزش رو هم دنبال کنید.
