مقالات طراحی سایت

آشنایی با زبان برنامه نویسی HTML

آشنایی با زبان برنامه‌­نویسی HTML | پرگاس

اولین سوالی که در آشنایی با زبان برنامه نویسی HTML پیش می­‌آید این است که HTML یعنی چه؟

HTML مخفف عبارت Hypertext Markup Language به معنای زبان نشانه‌­گذاری فرامتنی است. منظور از فرامتن، متنی هست شامل لینک­‌هایی به متون دیگر که قابل دسترسی سریع برای کاربران باشند.

زبان برنامه نویسی HTML چیست؟

  • HTML زبان نشانه­‌گذاری استاندارد برای ساخت صفحات وب است.
  • HTML ساختار صفحات وب را توصیف می­‌کند.
  • HTML از یک سری عناصر تشکیل می­‌شود.
  • عناصر HTML به مرورگر می‌­گویند که محتوا را چگونه نمایش دهد.
  • با HTML نمی­‌توان سایت­های دینامیک ساخت و فضای کلی آن شبیه به Microsoft Word است.
  • هنگام کار با HTML از ساختار کدنویسی ساده (برچسب­‌ها و نمادها) استفاده می‌­شود. مثلاً برای ایجاد یک پاراگراف، متن را بین دو علامت <p> و </p> قرار می­‌دهند.

تاریخچه HTML

این زبان توسط شخصی به نام تیم برنرز لی (Tim Berners-Lee) فیزیکدان انستیتو تحقیقاتی CERN در سوئیس ابداع شد. این ابداع از ایده یک سیستم فرامتنی مبتنی بر اینترنت نشأت گرفت.

این فیزیکدان نخستین نسخه HTML که شامل ۱۸ برچسب بود را در سال ۱۹۹۱ منتشر کرد. نسخه­‌های جدیدتر شامل برچسب‌­های بیشتر نیز پس از آن منتشر شدند.

نسخه HTML4 (که این روزها با همان نام HTML شناخته می­‌شود) در سال ۱۹۹۹ منتشر شد. نسخه بعدی و کامل‌ترین نسخه این زبان تاکنون، یعنی HTML5 در سال ۲۰۱۴ ارائه شد.

یکی از جدیدترین ویژگی­‌های HTML5 امکان قرار دادن فایل صوتی یا ویدیویی در متن برنامه می‌باشد. به جای استفاده از فلش پلیرها، می­‌توان این فایل­‌ها با استفاده از برچسب­‌های <audio> </audio> و یا <video> </video> در صفحه سایت قرار داد.

  کسب درآمد با طراحی سایت فروشگاهی

این نسخه همچنین از گرافیک‌­های برداری مقیاس­‌پذیر (SVG) و MathML برای فرمول­‌های ریاضی و آمار پشتیبانی می­‌کند.

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

محبوب‌ترین برچسب‌­های معنادار عبارتند از:

  • <article> </article>
  • <section> </section>
  • <aside> </aside>
  • <header> </header>
  • <footer> </footer>

HTML5 آخرین نسخه منتشر شده و دارای خصوصیات جدید و کاربردی است | پرگاس

امروزه زبان برنامه نویسی HTML یک استاندارد وب رسمی می‌باشد. خصوصیات این زبان توسط کنسرسیوم شبکه گسترده جهانی (World Wide Web Consortium یا W3C) توسعه داده شده و پشتیبانی می‌­شود.

مطابق آمار منتشر شده در حال حاضر حدود ۱۴۰ برچسب HTML وجود دارد که البته برخی از آنها منسوخ شده­‌اند.

HTML چگونه کار می­‌کند؟

اسناد زبان برنامه نویسی HTML فایل­‌هایی هستند که در انتها عبارت html. یا htm. دارند. مرورگرها این فایل­‌ها را خوانده و محتوای آنها را به صورت کاملاً خوانا به کاربران ارائه می­‌کنند.

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

اغلب اجزای HTML یک شروع و یک پایان دارند که به ترتیب با ساختار <tag> و </tag> نشان داده می‌­شوند.

پرکاربردترین برچسب‌­های HTML

برچسب­‌ها در زبان برنامه نویسیHTML به دو دسته اصلی تقسیم می­‌شوند:

عناصر بلاکی (Block-level elements)

همه فضای برنامه نویسی را دربرمی‌­گیرند و همیشه آغاز کننده سطر جدید هستند. عنوان­‌ها (Headings) و پاراگراف­‌ها در این دسته قرار می‌­گیرند.

سه برچسب بلاکی که باید در هر سند HTML موجود باشند عبارتند از: <html>، <head> و <body>.

  • برچسب <html> </html> بالاترین (اولین) عنصری است که صفحه HTML را دربرمی­‌گیرد.
  • سپس برچسب <head> </head> قرار دارد که حاوی اطلاعات متا مثل عنوان صفحه است.
  • در آخر برچسب <body> </body> می­‌آید که شامل محتوای صفحه است.
  دامین و هاست در وبسایت چیست؟

عناصر اینلاینی (Inline elements)

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

مثلاً برچسب <strong> </strong> برای بولد کردن عبارت درون برچسب و برچسب <em> </em> برای ایتالیک کردن آن استفاده می­‌شود.

لینک­‌های درون متن هم از دسته عناصر اینلاینی هستند که باید در برچسب <a> </a> و به همراه نماد href نوشته شوند.

عکس­ها هم در این دسته­‌بندی قرار دارند. برای قرار دادن عکس از برچسب <img> و قرار دادن مسیر مربوط به مکان نگهداری فایل بعد از عبارت src استفاده می‌­شود. در این مورد نیازی به تایپ عبارت </img> نیست.

شناخت و درک کاربرد هرکدام از این عناصر گام مهمی در آشنایی با زبان برنامه نویسی HTML به شمار می­‌رود.

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

زبان برنامه نویسی HTML مانند هر چیز دیگری نقاط ضعف و قوت خودش را دارد. برای آشنایی بهتر با زبان برنامه نویسی HTML بهتر است این موارد را در نظر داشته باشید:

مزایا

  • بسیار پرکاربرد با منابع متعدد
  • قابل اجرا در همه مرورگرها
  • دارای منحنی یادگیری هموار
  • منبع باز (open-source) و کاملاً رایگان
  • نشانه‌­گذاری تمیز و کاملاً سازگار
  • دارای استانداردهای وب موثق توسط W3C
  • قابل دریافت توسط زبان‌­هایی مثل PHP و Node.js

معایب

  • غالباً برای سایت­‌های استاتیک استفاده می‌­شود. برای دینامیک بودن سایت باید از جاوااسکریپت یا یک زبان بک­‌اند مثل PHP استفاده شود.
  • به کاربر امکان استفاده از منطق را نمی­‌دهد. همه صفحات وب باید به طور جداگانه تهیه شوند حتی اگر عناصر یکسانی مثلاً در عنوان یا فوتر داشته باشند.
  • بعضی از مرورگرها ویژگی­‌های جدید این زبان را به کندی قبول می‌­کنند.
  • رفتار مرورگرها همیشه هم قابل پیش‌­بینی نیست! یعنی ممکن هست مرورگرهای قدیمی‌­تر نتوانند برچسب­های جدید را ارائه دهند.
  خرید سایت پزشکی; بهترین شرکت طراحی سایت برای راه اندازی وبسایت پزشکان

ارتباط HTML با CSS و JavaScript

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

  • زبان CSS مسئول آراستن ظاهر محتوا یعنی بخش­‌های مربوط به پس‌­زمینه، رنگ­‌ها، لایه‌­ها، فاصله­‌گذاری­‌ها و انیمیشن­‌ها است.
  • زبان جاوااسکریپت نیز برای اضافه کردن قابلیت­‌های دینامیکی مثل اسلایدرها، پاپ آپ­‌ها و گالری­‌های عکس استفاده می‌­شود.

رابطه HTML با CSS و JavaScript: یکی برای همه، همه برای یکی! | پرگاس

پس HTML معادل جسم، CSS معادل لباس و JavaScript معادل حرکات و رفتار است!

زبان برنامه نویسی HTML: آسان برای یادگیری، قوی برای طراحی سایت!

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

اگرچه با پیشرفت علم برنامه نویسی، زبان­‌های برنامه نویسی جدیدتر هم ابداع شده­‌اند اما مزایای زبان برنامه نویسی HTML همچنان به قوت خود باقی است!

10 فکر در مورد “آشنایی با زبان برنامه نویسی HTML

  1. حامد قهرمانلو گفت:

    سلام ممنون از این مقاله مفید.
    ببخشید من سایت خبری دارم وقتی خبر از بقیه سایتها میذارم مستقیم آخره مطلب منبع لینک اون مطلب سایتو میذارم بنظرتون این تاثیر منفی رو سئو داره ؟

    1. پرگاس گفت:

      سلام دوست عزیز، از تگ نوفالو برای لینکهای این مطالب استفاده کنید

      1. آکو بختیاری گفت:

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

        1. پرگاس گفت:

          سلام دوست عزیز، بستگی به کار و توع استفاده شما دارد یک سرچ در گوگل بزنید

  2. ناصر ملک پور گفت:

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

  3. سینا شهرام پور گفت:

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

    1. پرگاس گفت:

      سلام دوست عزیز برای اطلاعات بیشتر با شماره ۲۸۴۲۸۴۵۶ تماس بگیرید

  4. مرضیه عناصر گفت:

    خوش به حال برنامه نویسا که هر چی دلشون بخواد میشینن و می نویسن، عاشق کد زدنم. اما همیشه برای یادگیری بهونه آوردم.

  5. رضا گلدره ایی گفت:

    سلام. از اعضای سایت کسی هست که با این زبان مسلط مسلط باشه؟

  6. آزیتا روانشناس بالینی گفت:

    والا من که چیزی نفهمیدم.
    اما دستتون درد نکنه.

دیدگاهتان را بنویسید

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