ورود به دنیای برنامه نویسی وب با HTML

• ۱۰ اسفند ۱۴۰۱
• مقالات

اگر ایده نو و خوب برای شروع کار دارید و میخواهید کسب و کارتان راتوسعه دهید و نمیدانید چگونه در دنیای دیجیتال وارد شوید پیشنهاد میکنم این لینک را کلیک کنید.

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

سرآغاز و پیشرفت HTML

نسخه اول

برنرز لی در سال ۱۹۹۱ برای اولین بار طرح نخست خود از HTML را در اینترنت منتشر کرد. این نقطه شروعی برای این زبان بود. واژه HTML در واقع مخفف کلمات (Hyper Text Markup Language) به معنای زبان نشانه گذاری اَبَرمتن است. برنرز لی که یک فیزیکدان بود ابتدا با این هدف HTML را ایجاد کرد که همکارانش بتوانند بدون حضور در آزمایشگاه با یکدیگر ارتباط برقرار کنند. اما فناوری ساخته شده توسط او آن‌قدر کاربردی بود که امروزه در سراسر دنیا و تقریباً تمامی خانه ها از HTML استفاده می شود.

نسخه دوم

محبوبیت بالای HTML سبب شد تا نسخه دوم آن در سال ۱۹۹۵ عرضه شود که علاوه بر ویژگی های نسخه اول، یک سری ویژگی جدید نیز برای این زبان تعریف می کرد. این نسخه همچنین اولین نسخه استاندارد شده توسط IETF بود.

نسخه سوم یا HTML 3.2

آنچه از آن به عنوان یک انقلاب بزرگ در دنیای تکنولوژی نام می برند سال ۱۹۹۷ رخ داد. برنرز لی که حالا دیگر ریاست کنسرسیوم جهانی وب (W3C) را برعهده داشت به عنوان اولین کار شرکت خود WILBUR را ارائه کرد. بعدها این پروژه با نام HTML 3.2 شناخته شد. این نسخه در کنار CSS که یکسال قبل عرضه شده بود ترکیبی بی نظیر به وجود آورد. طولی نکشید که جایگاه اچ تی ام ال پس از آن تا جایی بالا رفت که امروزه تقریباً تمامی مرورگرها از آن پشتیبانی می کنند.

نسخه چهارم

نسخه چهارم اچ تی ام ال با عرضه رسمی در سال ۱۹۹۹ توانست بسیاری از مشکلات موجود در نسخه سوم را برطرف سازد. همچنین اضافه شدن برخی قابلیت ها در این نسخه بسیار جلب توجه کرد. HTML 4.01 امکاناتی برای اجرای بهتر CSS در اختیار توسعه دهندگان قرار داد. علاوه بر آن یک سری تنظیمات بیشتر برای مالتی مدیا (چند رسانه ای) به این نسخه اضافه شد. یک تغییر دیگر نیز جای دادن زبان های اسکریپتی و به کار گیری جداول بود.

HTML5

آخرین نسخه، HTML5 بود که سال ۲۰۰۸ پیش نویس اولیه آن منتشر شد و تا سال ۲۰۱۱ پیشرفت آن به طول انجامید. سال ۲۰۱۴ را به نوعی می شود زمان انتشار نهایی آن دانست چرا که در این سال با یک آپدیت اساسی کیفیت بسیار بالا رفت و تجربه کاربری بهبود چشمگیری پیدا کرد.

آنچه زبان HTML انجام می دهد

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

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

اگر بخواهیم به ساده ترین شکل ممکن نقش آن را توضیح دهیم این مثال را به کار خواهیم برد. سایت را یک ساختمان در نظر بگیرید؛ در این صورت HTML اسکلت و پی این ساختمان خواهد بود. آنچه HTML انجام می دهد این است که ساختاربندی صفحات سایت را نشان می دهد و مشخص می کند هر بخش صفحه چه عنصری است و چگونه باید نمایش داده شود.

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

ساختار زبان HTML

یک صفحه وبلاگ به چهار بخش اصلی تقسیم می شود. این بخش ها عبارت‌اند از: Header، Main، Aside و Footer. با توضیح در مورد این بخش ها، مفاهیم HTML کمی واضح تر می شوند.

Header سربرگ صفحات است و معمولاً در تمامی صفحات به شکل یکسانی دیده می شود. این بخش اولین محتوایی است که در صفحه وجود دارد و عنوان سایت، لوگو و منوی اصلی در آن قرار می گیرد.

بخش Main همان‌طور که از اسمش پیداست قسمت اصلی محتوای صفحه است و نسبت به هر صفحه محتویاتی متفاوت دارد. محتوای بخش های دیگر اکثر مواقع در تمام صفحات یکسان هستند اما آنچه در قسمت Main قرار می گیرد یکتا (unique) است. به عنوان مثال همین مقاله که شما در حال حاضر مشغول مطالعۀ آن هستید در قسمت Main قرار گرفته است.

قسمت Aside جایی است که لینک های مطالب آرشیو شده سایت قرار می گیرد و در کنار قسمت Main قرار می دارد.

در نهایت قسمت Footer پایین ترین بخش سایت است که لینک به قسمت های کم اهمیت تر در آن گنجانده می شود. بخش کپی رایت سایت نیز در Footer قرار می گیرد.

تگ های زبان HTML

تگ ها (Tags) یا برچسب های HTML مهم ترین دلیل قدرتمند بودن این زبان است. هر عملی در اچ تی ام ال با کمک تگ ها انجام می پذیرد. با کمک این تگ ها هست که عناصر مختلف در کنار یکدیگر قرار می گیرند.

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

تگ ها کاربردهای مختلفی دارند. بعضی از آنها به وفور مورد استفاده قرار می گیرند و برخی اهمیت کمتری در برنامه نویسی پیدا می کنند. به عنوان مثال تگ <div> که برای تقسیم صفحه به قسمت های مختلف به کار برده می شود یک مورد بسیار کاربردی است و تقریباً بخش جدایی ناپذیر یک سایت است. تگی مثل <h1> برای تعریف عنوان به کار می رود و تگ <p> یک پاراگراف را تعریف می کند. این ها از جمله تگ های کاربردی و معروف HTML هستند.

نحوۀ ساخت فایل HTML

فایل اچ تی ام ال با پسوند .html ذخیره می شود. برای ساخت و اجرای این فایل شما نیاز به هیچ گونه نرم افزار خاصی ندارید. کافی است کدهای موجود در عکس بالا را در notepad ویندوز نوشته و با پسوند .html ذخیره کنید. این فایل را با استفاده از مرورگر خود باز کنید و نتیجه را ببینید. به همین سادگی شما نخستین برنامه خود را با زبان اچ تی ام ال ساختید!

در صورتی که بخواهید کمی بیشتر در مورد سایر جزئیات موجود در یک سایت بدانید کافی است یک صفحه اینترنتی (مثلاً همین صفحه) را در مرورگر خود باز کنید. با کلیک راست روی صفحه و انتخاب گزینۀ View page source یا استفاده از کلیدهای ترکیبی Ctrl+U کدهایی را که در صفحه به کار برده شده اند را مشاهده خواهید کرد.

مزایا و معایب HTML

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

یادگیری این زبان بسیار آسان است؛ چنان‌که گفتیم شما خیلی راحت با notepad می توانید کدها را بنویسید ولی مهارت پیدا کردن در این زبان چیزی است که نیاز به تمرین و تکرار دارد. این زبان در تمامی مرورگرهای به روز قابلیت اجرای بالایی دارد. HTML از جمله زبان های رایگان و متن باز است به طوری که تمام کدهای یک صفحه را بر روی مرورگر می توان دید. به سادگی می توان آن را با زبان های سمت سرور مانند PHP کانفیگ و ادغام کرد.

این ها مهم ترین مزیت های اچ تی ام ال هستند و نه تمام آنها ولی ذکر تمام مزایا چندان ضروری نیست.

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

نتیجه گیری: باید بدانید که اگرچه HTML یک مهارت کلیدی برای برنامه نویسی وب و طراحی سایت است اما به تنهایی تمام کارها را انجام نمی دهد. در واقع پنج تکنولوژی اصلی است که در کنار هم یک سایت کامل را تشکیل می دهند. این پنج تکنولوژی عبارتند از: HTML، CSS، JavaScript، PHP و MySQL. اگر می خواهید یک برنامه نویس موفق باشید باید یادگیری این مهارت ها را در برنامه خود بگنجانید.

با طراحی اپلیکیشن اختصاصی به سمت آینده شتاب کنید.