اچ تی ام ال HTML

زبان نشانه‌گذاری ابرمتنی یا اچ‌تی‌ام‌ال، HTML یا HyperText Markup Language در کنار CSS سی‌اس‌اس هستهٔ فناوری ساخت صفحه‌های وب هستن. HTML زبان توصیف ساختار صفحه‌های وب است.زبانی‌است برای نشانه‌گذاری ابرمتن (فرامتن) که برای تدوین قالب و طراحی صفحه‌های وب به کار می‌ره. دستورالعمل‌های این زبان، برچسب (Tag) هستن که محتوای یک صفحهٔ وب، با اونها، نشانه‌گذاری میشه و به این‌ترتیب، نحوهٔ نمایش اون صفحه برای مرورگرهای وب، توصیف می‌شه. تا الان ۵ نسخه از اچ تی ام‌ال عرضه شده.

هر یک از تگ ها یا برچسب‌های اچ‌تی‌ام‌ال، معنا و مفهوم خاصی دارن و تأثیر مشخصی بر محتوا می‌گذارن؛ مثلاً برچسب‌هایی برای تغییر شکل ظاهری متن، نظیر درشت و ضخیم کردن یک کلمه یا برقراری پیوند به صفحات دیگر در اچ‌تی‌ام‌ال تعریف شده‌.

برای یادگیری اچ تی ام ال به زمان نیاز دارید و با مراجعه به وب های مختلف میتونید موفق بشید.

یک سند اچ‌تی‌ام‌ال، یک پروندهٔ مبتنی بر متن (Text–based) هست که معمولاً با پسوند .htm یا .html نام‌گذاری شده و محتویاتش از برچسب‌های اچ‌تی‌ام‌ال تشکیل میشه. مرورگرهای وب، که قادر به درک و تفسیر برچسب‌های اچ‌تی‌ام‌ال هستند، تک‌تک آن‌ها را از داخل سند اچ‌تی‌ام‌ال خوانده و بعد از اون محتوای صفحه را نمایان‌سازی (Render) می‌کنن.

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

HTML زبان برنامه‌نویسی نیست، بلکه زبانی برای نشانه‌گذاری ابرمتن هست و اساساً برای ساخت‌مند کردن اطلاعات و جدانمودن اجزای منطقی یک نوشتار (مثل عناوین، تصاویر، فهرست‌ها، بندها و جداول) به کار می‌ره. از طرفی، HTML را نباید به عنوان زبانی برای صفحه‌آرایی یا نقاشی صفحات وب به کار بُرد؛ این وظیفه اکنون بر دوش فناوری‌های دیگه مثل CSS هست.

گفتنی است اچ‌تی‌ام‌ال شکلی از زبان دیگری به نام SGML (اس‌جی‌ام‌ال) است و کنسرسیوم وب آن را به عنوان استانداردی برای نشانه‌گذاری مستندات ابرمتنی برای عرضه در وب، تدوین کرده‌.

HTML

HTML

نشانه‌گذاری

نمونه زیر کد معروف Hello World هست که معمولاً برای مقایسه زبان‌های برنامه‌نویسی، زبان‌های اسکریپت‌نویسی و زبان‌های نشانه‌گذاری به کار میره:

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>This is a title</title>
  5.     </head>
  6.     <body>
  7.         <p>Hello world!</p>
  8.     </body>
  9. </html>

 

عنصر اچ‌تی‌ام‌ال

نمونه عنصرهای اچ‌تی‌ام‌ال

سرتیترها: تگ‌های <h1> تا <h6>

  1. <h1>بزرگتر</h1>
  2. <h2>بزرگ</h2>
  3. <h3>کمی کوچک</h3>
  4. <h4>کوچک</h4>
  5. <h5>ریز</h5>
  6. <h6>بسیار ریز</h6>

 

پاراگراف‌ها:

  1. <p>Paragraph 1</p>
  2. <p>Paragraph 2</p>

خط شکن (پرش به خط بعد)

  1. <br />

تفاوت میان تگ <br> و <p> در اینه که “br” متن بعد خودش را به خط بعد می بره بدون اینکه در ساختار معنایی صفحه تغییری ایجاد کنه، در حالیکه “p” متن را توی پاراگراف‌هایی بخش‌بندی میکنه. در ضمن به یاد داشته باشید که “br” یک تگ خالی(مستقل) هست، یعنی ممکنه دارای ویژگی‌هایی باشد ولی نمی‌تونه محتوایی را تو خودش جای بده و تگ پایانی هم نداره.

  1. <p>This<br />
  2. is a paragraph<br />
  3. with<br />
  4. line breaks</p>

لینک: برای ایجاد لینک از تگ <a> استفاده می‌شود. برای مثال:

  1. <a href="https://mrebi.ir/">A link to mrebi.ir!</a>

ویژگی href آدرسی که لینک به اون اشاره می‌کنه رو توی خودش نگه می‌داره.

کامنت‌ها:

  1. <!-- This is a comment -->

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

  1. <div>
  2. <h2>بزرگ</h2>
  3. <p>Salam .</p>
  4. </div>

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

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