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

درواقع زبان نشانه‌گذاری HTML، زبان طراحی سایت و یک تکنولوژی بسیار تأثیرگذار بر فرآیند طراحی وب به شمار می‌آید. بنابراین، یادگیری آن کار چندان دشواری نبوده و با تمرین و آموزش اصولی می‌توانید به این زبان مهم در حوزه کدنویسی تسلط پیدا کنید.

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

HTML چیست؟

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

از سوی دیگر، این تکنولوژی گسترده، پیش نیاز مهمی برای ورود به دنیای طراحی وب محسوب می‌شود. چراکه اسکلت و ساختمان‌بندی تمام سایت‌های دنیا وابسته به آن است.

HTML مخفف عبارت Hyper Text Markup Language و به معنی زبان نشانه گذاری ابرمتن است. پس برای همیشه در یاد داشته باشید که HTML زبان برنامه‌نویسی نبوده و زبانی است برای طراحی سایت.

زبان HTML هیچ‌گونه جنبه ظاهری نداشته و به طور کلی یک متن خام است که با کمک زبان‌های دیگری همچون css و javascript می‌تواند شکل ظاهری یک وب‌سایت را خلق کند. از سوی دیگر، شما نمی‌توانید حتی یک سایت در میان میلیاردها سایت موجود در دنیای وب پیدا کنید که به منظور ساخت اسکلت خود HTML را به‌کار نگرفته باشد. این در حالی است که HTML به سایت‌ها کمک می‌کند تا به وسیله گوگل ایندکس شده و توسط کاربران مشاهده شوند.

بهتر است بدانید که HTML و CSS به عنوان پایه‌ و ابتدایی‌ترین زبان‌های طراحی سایت شناخته می‌شوند. این کدهای HTML هستند که ساختار سایت را می‌سازند و در مرحله بعد این CSS است که به صفحات سایت، رنگ، افکت، طرح و ده‌ها ویژگی ظاهری دیگر را می‌افزاید.

HTML چیست

تاریخچه HTML

اواخر قرن بیستم میلادی و درست در سال 1989، فیزیکدانی به نام تیم برنزلی، HTML را به عنوان زبان علامت‌گذاری در هایپر تکست (HyperText) طراحی کرد. پس از آن، HTML از جهات بسیاری توسعه یافت. به این صورت که هر نسخه جدید، نواقص نسخه‌های قبل را مرتفع کرده و امکانات جدیدی را به طراحان سایت‌ها ارائه می‌کند. در حال حاضر، HTML5 آخرین و به‌روزترین نسخه ارائه شده از این زبان است.

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

حتما بخوانید: کدنویسی HTML و CSS | از کجا شروع به یادگیری کنیم؟

کاربرد HTML چیست؟

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

حال سؤال اساسی اینجا است که چطور می‌توان اسکلت‌بندی و ساختار صفحات را با کدها انجام داد؟ جواب در دستورالعملی به نام تگ (TAG) قرار دارد که با استفاده از آن می‌توانید همه اِلمان‌های مورد نیاز صفحه مثل تیتر، لینک‌دهی و… را به مرورگرها ارائه دهید.

در ادامه بیشتر به توضیح تگ‌ها و نحوه کارشان می‌پردازیم.

کاربرد html

تگ‌هایHTML

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

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

تعداد تگ‌ها بسیار زیاد است و همانطور که اشاره کردیم؛ هرکدام کار مخصوص به خود را انجام می‌دهند. در ادامه چند نمونه از تگ‌های پرکاربرد را معرفی می‌کنیم.

تمام پاراگراف‌های یک مطلب با تگ p شناخته می‌شوند. نحوه کد دهی با تگ p به این شکل است که حرف p میان دو هشتگ باز و بسته به این صورت قرار می‌گیرد: <p>
برای ایجاد یک دکمه قابل کلیک در صفحه نیز از تگ button به این شکل باید استفاده کرد: <button>
برای گذاشتن عکس، ویدئو، PDF و.. در صفحه، تگ<embed> به‌کاربرده می‌شود.
برای رنگی کردن یک قسمت از محتوا نیز از تگ <mark> استفاده می‌شود.

سخن نهایی

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

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

امیدواریم این مطلب برای شما مفید بوده و هرگونه سؤال یا ابهام خود را در رابطه با HTML با ما درمیان بگذارید.

پیشنهاد ویژه: آموزش برنامه نویسی html

فرزانه فانی

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