اگر مقاله « راهنمای جامع بررسی تفاوت طراحی و برنامه نویسی سایت» را مطالعه کرده باشید، در مورد برنامه نویسی سایت و زبان هایی که برای برنامه نویسی سمت کاربر مورد استفاده قرار میگیرد اطلاعات مفید و کاربردی خواهید داشت.
همانطور که قبلا به این موضوع اشاره شده است، یکی از مهم ترین زبان های سمت کاربر که همواره به عنوان پایه ای ترین مفهوم در آموزش های طراحی سایت تدریس می شود، زبان نشانه گذاری html می‌باشد.
این زبان در اصل، اساس کار ما در برنامه نویسی و طراحی سایت می‌باشد برای همین در این مقاله من قصد دارم به زبان نشانه گذاری (نه برنامه نویسی!) html به عنوان اولین زیرشاخه از بخش front-end وبسایت بپردازم و با مقاله ای جامع، دانش شما را نسبت به این مبحث پایه ای از طراحی و برنامه نویسی سایت، افزایش دهم.
مطالعه مقاله «تعریف و مقایسه بک اند و فراند اند به زبان ساده» به شما عزیزان توصیه می شود.
آنچه در این نوشته خواهیم داشت
html چیست؟
زبان نشانه گذاری html (زبان نشانه گذاری ابرمتن) که مخفف واژه Hyper Text Markup Language می‌باشد یک نوع نشانه گذاری استاندارد، مقدماتی و البته اصولی برای ایجاد صفحات وبسایت و وب اپلیکیشن می‌باشد. زبان html به نوعی پایه و اساس صفحات یک وبسایت بوده و تمامی المان ها، متن ها، لینک ها و … با استفاده از نشانه های html در صفحه وب برای شما قرار گرفته است.
زبان نشانه گذاری html یا زبان برنامه نویسی؟
بسیاری از افراد تصور می‌کنند که html یک زبان برنامه نویسی است اما این موضوع کاملا غلط می‌باشد. چرا؟ برای پاسخ به این پرسش ما باید در مورد ساختار و ماهیت زبان برنامه نویسی با شما صحبت کنیم.
زبان های برنامه نویسی در اصل راه ارتباطی ما با سیستم های کامپیوتری می‌باشند. ما با استفاده از این زبان ها با یک سیستم ارتباط برقرار کرده و به آن (برای حل یک مسئله و …) دستوراتی می‌دهیم.شاید این موضوع مهم ترین شاخصه یک زبان برنامه نویسی می‌باشد اما زبان html این ویژگی را ندارد و صرفا یک زبان نشانه گذاری است.
حال ممکن است برای شما سوال پیش بیاید که زبان نشانه گذاری چیست؟
زبان های نشانه گذاری (زبان شبه برنامه نویسی) در اصل نوعی زبان توصیفی بوده که اطلاعات مختلف را با استفاده از نشانه گذاری های خاص با هم مرتبط می کند.
html چه زمانی وارد دنیای کامپیوترها شد؟
چیزی که ما امروز تحت عنوان زبان نشانه گذاری ابرمتن می شناسیم اولین بار در سال ۱۹۹۱ و با تعریف ۱۸ عنصر اساسی و مهم به دنیای وب وارد شد. حدود ۵ سال بعد این نشانه ها تحت عنوان html 2.0 تکمیل و به شکل یک ساختار استاندارد معرفی شد. اما این پایان بازی نبود و تا الان که شما در حال مطالعه این مقاله هستید ۵ ورژن دیگر از زبان نشانه گذاری html در دسترس توسعه دهندگان قرار گرفت که مهم ترین و البته جامع ترین این تحول ها مربوط به html5 بود که در سال ۲۰۱۲ ارائه شد.
نکته: لازم به ذکر است که آخرین نسخه html تحت عنوان xhtml5 در سال ۲۰۱۴ ارائه شد که به نقش موثری در بالابردن کیفیت تجربه کاربری کاربران ایفا کرد چراکه طراحی سایت به ساختار منظم و ایده آل خودش نزدیک شد و برخی مفاهیم قدیمی نیز به حاشیه رانده شد.
مزیت و معایب زبان html5
از ویژگی های بسیار مثبت html5 می توان به کدهای واضح و آسان، سهولت ایجاد فرم های جذاب تر که نیاز به جاوا اسکریپت را کاهش می‌دهد، سهولیت دسترسی به سایت ها، ذخیره سازی دقیق و البته آفلاین و … اشاره کرد.
و اما چند ایراد مهم زبان نشانه گذاری html به صورت کلی:
- ضعیف بودن پشتیبانی از مرورگرهای قدیمی (که البته مشکل بسیار حاد و بزرگی نیست)
- استاتیک بودن
- وابستگی بالا به زبان های سمت سرور
html چطور کار می‌کند؟
زبان نشانه گذاری ابرمتن از یک سری برچسب یا تگ تشکیل شده است که می‌توانید با استفاده از آن، المان های مختلف یک وبسایت مثل عکس ها، لینک ها، عناوین، متن و … را با یک نظم خاص در کنار یکدیگر قرار دهد. در اصل ما اسکلت اصلی ساختمان وبسایت را با html پی ریزی و احداث می کنیم.
تگ های html
تگ یا همان برچسب در زبان نشانه گذاری html، عناصری هستند که با یک سری حروف و علائم کد گذاری شده و شما با صدا زدن (فراخوانی) هرکدام می توانید کاری که قصد آن را دارید، انجام دهید. تگ های html در اصل قواعد زمین بازی هستند، هرکدام مفهومی خاص داشته و به ما امکان ایجاد، تغییر و ساخت عناصر و همچنین صفحات مختلف یک وبسایت را می‌دهند.
لیست جامع تگ های html
در تمام این سال ها به یک باور مشترک بین برنامه نویسان و البته طراحان سایت پی بردم: ما برنامه نویس شدیم تا چیزی را حفظ نکنیم! البته که این موضوع به نظر کاملا درست است و یک برنامه نویس جز اسلوب کار نباید هیچ کد یا روش خاصی را حفظ کند (مگر اینکه با تکرار زیاد آن را فرا بگیرد)
برای شما هم که در شروع مسیر یادگیری طراحی و برنامه نویسی سایت هستید این موضوع صدق می‌کند. برای همین من در ادامه فایلی جامع از تگ های html را همراه توضیح شان در اختیار شما قرار می‌دهم. فقط به عنوان تمرین حتما این تگ ها را در یک IDE باهم ترکیب کرده و خروجی های مختلف را مشاهده کنید.
مطالعه مقاله «۵ مورد از بهترین ویرایشگرهای متن در سال ۲۰۲۰ » به شما عزیزان توصیه می شود.
چطور کد html را اجرا کنیم؟
تمامی المان ها و عناصری که می خواهید در صفحه وبسایت خود به نمایش بگذارید به کمک تگ <> اجرا می‌شوند.
برای مثال در ادامه یک نمونه کد html را با هم مشاهده می‌کنیم؟
<!DOCTYPE html> <html> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
برای اجرای این تکه کد کافی است آن را در یک IDE که به شما مقاله آن را معرفی کردم یا notpad سیستم خود، کپی کرده و با تغییر پسوند فایل به htm با html روی آن کلیک کنید و نتیجه را در مروگر خود مشاهده نمایید.
نکته: یک کد html کامل باید با تگ <DOCTYPE html!> آغاز شود بعد از آن، سند حتماً باید دارای تگ <html> </html> باشد و داخل این تگ، <body> </body> قرار میگیرد که محتوای صفحه را نمایش می‌دهد.
کلام آخر و جمع بندی
هرچه که شما در صفحات وب مشاهده می‌کنید به پشتوانه زبان نشانه گذاری ابر متن یا همان html ایجاد شده است البته آنچه که شما ایجاد می کنید باید رنگ به خود بگیرد و جذابیت های بصری نیز به آن اضافه شود که این موضوع به مبحث بعدی ما یعنی css و جاوااسکریپت مربوط می‌شود.
اگر به فکر یادگیری طراحی وب هستید، می خواهید وارد دنیای برنامه نویسی شوید و یا در حوزه سئو فعالیت می‌کنید و می خواهید یک گام از بقیه همکاران خود جلوتر باشید درک ساختار وبسایت و شروع یادگیری زبان html که بسیار ساده نیز می‌باشد، به شما عزیزان اکیدا توصیه می شود.
امیدوارم از مطالعه این مقاله لذت و استفاده کافی را برده باشید.