آموزش HTML, واژه نامه

HTML چیست؟

HTML چیست؟

HTML مخفف Hypertext Markup Language است. اچ تی ام ال این امکان را به کاربر می دهد تا بخش ها، پاراگراف ها، عناوین، لینک ها و نقل قول ها را برای صفحات وب و برنامه ها ایجاد و ساختاربندی کند.

HTML یک زبان برنامه نویسی نیست، به این معنی که قابلیت ایجاد عملکرد پویا را ندارد. درعوض، ساماندهی و قالب بندی اسناد، مشابه ورد مایکروسافت، امکان پذیر است.

HTML چیست؟

هنگام کار با HTML، از ساختارهای ساده کد (برچسب ها و ویژگی ها) برای مشخص کردن صفحه وب سایت استفاده می کنیم. به عنوان مثال، می توانیم با قرار دادن متن در یک برچسب شروع <p> و بستن </p> یک پاراگراف ایجاد کنیم.

<p>اینگونه است که پاراگراف را در اچ تی ام ال اضافه می کنید</p>
<p>شما می توانید بیش از یک پاراگراف ایجاد کنید</p>

به صورت کلی، HTML یک زبان نشانه گذاری است که برای یادگیری حتی مبتدیان بسیار ساده و آسان است و هر کسی می تواند به وسیله آن سایت راه اندازی کند. در ادامه هر آنچه که نیاز است را توضیح می دهیم.

تاریخچه HTML

HTML توسط Tim Berners-Lee، فیزیکدان در پژوهشکده سرن در سوئیس اختراع شده است. او ایده یک سیستم ابرمتن مبتنی بر اینترنت را ارائه داد.

Hypertext به معنای متنی است که شامل منابع (پیوندها) به سایر متونی است که بینندگان می توانند بلافاصله به آنها دسترسی پیدا کنند. او اولین نسخه HTML را در سال 1991 منتشر کرد، که شامل 18 برچسب HTML بود. از آن زمان، هر نسخه جدید از زبان HTML با برچسب ها و ویژگی های جدید (اصلاح کننده برچسب) به نشانه گذاری ارائه می شد.

مطابق با شبکه توسعه دهنده موزیلا، HTML Element Reference در حال حاضر 140 برچسب HTML وجود دارد ، اگرچه برخی از آنها قبلاً منسوخ شده اند (توسط مرورگرهای مدرن پشتیبانی نمی شوند).

با توجه به افزایش سریع محبوبیت، اکنون HTML استاندارد جهانی وب در نظر گرفته شده است. مشخصات HTML توسط کنسرسیوم جهانی وب (W3C) حفظ و توسعه می یابد. می توانید آخرین وضعیت این زبان را در هر زمان و در وب سایت W3C بررسی کنید.

بزرگترین نسخه ارتقاء زبان HTML5 در سال 2014 بود. در آن چندین برچسب معنایی جدید به نشانه گذاری اضافه شده است، که معنای محتوای خودشان، مانند <article> ، <header> و <Footer> را نشان می دهد.

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

اسناد HTML پرونده هایی هستند که پسوند .html یا .htm دارند. سپس می توانید با استفاده از هر مرورگر وب (مانند Google Chrome ، Safari یا Mozilla Firefox) آن را مشاهده کنید. مرورگر پرونده HTML را می خواند و محتوای آن را ارائه می دهد تا کاربران اینترنت بتوانند آن را مشاهده کنند.

معمولاً یک وب سایت متوسط ​​شامل چندین صفحه HTML مختلف است. به عنوان مثال: صفحات اصلی، صفحات درباره ما، صفحات تماس و … که همه اسناد HTML جداگانه دارند.

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

بیشتر عناصر HTML دارای یک تگ باز و بسته هستند که از نحو <tag> </tag> استفاده می کنند.

در زیر، می توانید نمونه ای از نحوه ساخت عناصر HTML را مشاهده کنید:

<div>
  <h1>عنوان اصلی</h1> 
  <h2>زیرعنوان جذاب</h2>
  <p>پاراگراف یک</p> 
  <img src="/" alt="عکس"> 
  <p>پاراگراف 2 با یک لینک <a href="https://example.com">لینک</a></p>
</div>
  • اصلی ترین عنصر یک تقسیم ساده است (<div> </div>) که می توانید برای مشخص کردن بخش های محتوای بزرگتر استفاده کنید.
  • این شامل یک عنوان (<h1></h1>) ، زیر عنوان (<h2></h2>) ، دو پاراگراف (<p></p>) و یک تصویر (<img>) است.
  • پاراگراف دوم شامل پیوندی (<a> </a>) با یک ویژگی href است که حاوی آدرس مقصد است.
  • تگ تصویر همچنین دو ویژگی دارد: src برای مسیر تصویر و alt برای توصیف تصویر.

نمای کلی تگ های HTML استفاده شده

برچسب های HTML دارای دو نوع اصلی هستند: برچسب های سطح block-level و inline .

1. عناصر سطح بلوک (Block-level) فضای کامل موجود را اشغال می کنند و همیشه خط جدیدی را در سند شروع می کنند. سرفصل ها و پاراگراف ها نمونه خوبی از این برچسب ها هستند.

2. عناصر درون خطی (Inline)  فقط به اندازه نیاز خود فضا را می گیرند و خط جدیدی را در صفحه شروع نمی کنند. آنها معمولاً در قالب بندی محتوای داخلی عناصر سطح بلوک عمل می کنند. لینک ها و رشته های تأکید شده نمونه های خوبی از برچسب های درون خطی هستند.

برچسب های Block-level

سه تگ سطح بلوکی که باید هر سند HTML را شامل شود <html> ، <head> و <body> است.

1. برچسب <html> </html> بالاترین سطح است که هر صفحه HTML را محصور می کند.

2. برچسب <head> </head> دارای اطلاعات متا مانند عنوان صفحه و صفحه اصلی است.

3. سرانجام، برچسب <body> </body> تمام محتوای نمایش داده شده در صفحه را محصور می کند.

<html>
  <head>
    <!-- اطلاعات متا -->	
  </head>
  <body>
    <!-- محتوای صفحه -->
  </body>
</html>
  • عناوین، دارای 6 سطح در HTML است. آنها از <<h1></h1>تا <h6></h6>هستند، و h1 بالاترین سطح را دارد و h6 پایین ترین آن است.
  • پاراگراف ها در بین <p> </p> قرار می گیرند، در حالی که نقل قول ها از برچسب <blockquote> </blockquote> استفاده می کنند.
  • تقسیم بندی ها بخش های بزرگتر از محتوا هستند که به صورت معمول شامل چندین پاراگراف، تصاویر، گاه نقل قول و سایر عناصر کوچکتر هستند. می توانیم آنها را با استفاده از برچسب <div> </div> علامت گذاری کنیم. یک عنصر div می تواند حاوی برچسب تقسیم دیگری نیز باشد.
  • همچنین می توانید برای لیست های مرتب شده از برچسب <ol> </ol>  استفاده کنید و برای لیست های غیر مرتب شده از <ul> </ul> استفاده کنید. موارد لیست جداگانه باید با برچسب <li> </li> ضمیمه شوند. برای مثال لیست غیر مرتب به صورت زیر است:
<ul>
    <li>آیتم های لیست 1</li>
    <li>آیتم های لیست 2</li>
    <li>آیتم های لیست 3</li>
</ul>

برچسب های Inline

بسیاری از برچسب های درون خطی برای قالب بندی متن استفاده می شوند. به عنوان مثال، یک برچسب </ strong> <strong> یک عنصر را به صورت پررنگ به نمایش می گذارد، در حالی که برچسب های <em> </em> آن را به صورت کج نشان می دهد.

لینک ها همچنین عناصر درون خطی هستند که برای نشان دادن مقصد لینک ، به برچسب <a> </a> و ویژگی های href نیاز دارند:

<a href="https://example.com/">اینجا کلیک کنید</a>

تصاویر نیز عناصر درون خطی هستند. می توانید با استفاده از <img> و بدون نیاز به تگ بستن، یکی را اضافه کنید.

<img src="/images/example.jpg" alt="عکس دلخواه">

تکامل HTML ، تفاوت بین HTML و HTML5 چیست؟

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

HTML4 (این روزها معمولاً با عنوان “HTML”) در سال 1999 منتشر شد، در حالی که آخرین نسخه اصلی در سال 2014 منتشر شد. با نام HTML5 ، این بروزرسانی بسیاری از ویژگی های جدید را به این زبان معرفی کرده است.

یکی از ویژگی های مورد انتظار HTML5 پشتیبانی بومی برای جاسازی صوتی و تصویری است. به جای استفاده از Flash Player ، ما به سادگی می توانیم فیلم ها و فایل های صوتی را با استفاده از برچسب های جدید <audio> </audio> و <video> </video> در صفحات وب خود جاسازی کنیم. همچنین شامل پشتیبانی داخلی برای گرافیک های بردار مقیاس پذیر (SVG) و MathML برای فرمول های ریاضی و علمی است.

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

محبوب ترین برچسب های معنایی عبارتند از: <article> </article> ، <section> </section> ، <aside> </aside> ، <header> </header>و <footer> </footer>.

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

مانند اکثر موارد، HTML دارای نقاط قوت و محدودیت هایی است.

مزایا

  • زبانی گسترده که دارای منابع زیادی است و جامعه عظیمی در پشت آن وجود دارد.
  • در هر مرورگر وب بصورت محلی اجرا می شود.
  • همراه با منحنی یادگیری مسطح است.
  • منبع باز و کاملاً رایگان.
  • نشانه گذاری تمیز و مداوم.
  • استانداردهای رسمی وب توسط کنسرسیوم جهانی وب (W3C) حفظ می شود.
  • یکپارچه سازی راحت با زبان های بک اند مانند PHP و Node.js.

معایب

  • بیشتر برای صفحات وب استاتیک استفاده می شود. برای عملکرد پویا، ممکن است شما نیاز به استفاده از JavaScript یا یک زبان بک اند مانند PHP داشته باشید.
  • این امکان را به کاربر نمی دهد که منطق را پیاده سازی کند. در نتیجه، باید تمام صفحات وب، جداگانه ایجاد شوند، حتی اگر از همان عناصر استفاده کنند، به عنوان مثال هدر و فوتر
  • برخی از مرورگرها ویژگی های جدید را به آرامی قبول می کنند.
  • پیش بینی رفتار مرورگر گاهی دشوار است (به عنوان مثال مرورگرهای قدیمی همیشه برچسب های جدیدتری ارائه نمی دهند).

HTML ، CSS و JavaScript چگونه ارتباط دارند؟

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

  • CSS مسئول استایل هایی مانند پس زمینه، رنگ ها، چیدمان ها، فاصله و انیمیشن ها است.
  • جاوا اسکریپت به شما امکان می دهد قابلیت های پویایی مانند اسلایدر، پاپ آپ و گالری عکس اضافه کنید.

HTML را به عنوان یک فرد برهنه، CSS به عنوان لباس، و JavaScript به عنوان حرکات و روش فکر کنید.

بنابراین … HTML چیست؟

HTML زبان اصلی نشانه گذاری وب است. در هر مرورگر بومی اجرا می شود و توسط کنسرسیوم جهانی وب نگهداری می شود.

شما می توانید از آن برای ایجاد ساختار محتوای وب سایت ها و اپلیکیشن های وب استفاده کنید. این پایین ترین سطح از فن آوری های فرانت اند است، که به عنوان پایه ای برای یک ظاهر طراحی شده است و می توانید با CSS و کارایی که می توانید با استفاده از JavaScript پیاده سازی کنید اضافه کنید.

5/5 - (8 امتیاز)

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

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