Google Play badge

زبان نشانه گذاری فرامتن


زبان نشانه گذاری فرامتن (HTML)

HTML مخفف Hypertext Markup Language است. این زبان نشانه گذاری استاندارد برای اسناد طراحی شده برای نمایش در یک مرورگر وب است. HTML را می توان با فناوری هایی مانند Cascading Style Sheets (CSS) و زبان های برنامه نویسی مانند JavaScript کمک کرد.

بنیاد وب

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

ساختار اسناد HTML

یک سند HTML بر اساس مجموعه‌ای از تگ‌های تودرتو، که عناصر محصور در براکت‌های زاویه‌ای هستند، ساختار می‌یابد. این تگ ها به مرورگر وب می گویند که چگونه محتوا را نمایش دهد. نمونه ای از ساختار سند HTML ساده به شرح زیر است:

 <!DOCTYPE html>
<html>
    <سر>
        <title>عنوان صفحه</title>
    </head>
    <بدن>
        <h1>این یک عنوان است</h1>
        <p>این یک پاراگراف است.</p>
    </body>
</html>

این کد یک صفحه وب اصلی را با عنوان، عنوان و پاراگراف متن تعریف می کند.

عناصر و برچسب های HTML

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

به عنوان مثال، تگ <code><p></code> یک پاراگراف از متن را در بر می گیرد و ساختار آن به صورت زیر است:

 <p>این یک پاراگراف نمونه است.</p>

عناصر مختلف در خدمت اهداف متفاوتی هستند. برای مثال:

ویژگی های

عناصر HTML می توانند دارای ویژگی هایی باشند که اطلاعات بیشتری در مورد عناصر ارائه می دهند. ویژگی ها در تگ شروع یک عنصر قرار می گیرند و اغلب به صورت جفت نام/مقدار مانند <code>name="value"</code> داده می شوند.

به عنوان مثال، برای جاسازی یک تصویر، از تگ <code><img></code> با ویژگی <code>src</code> (source) استفاده می کنیم تا URL تصویر را مشخص کنیم:

 <img src="url to image.jpg" alt="شرح تصویر">

مشخصه <code>alt</code> متن جایگزینی را برای تصویر در صورتی که نمایش داده نشود ارائه می دهد.

پیوندها و ناوبری

استفاده از تگ <code><a></code> پیوندهایی را ایجاد می کند که برای ارتباط متقابل وب اساسی هستند. یک هایپرلینک می تواند به یک صفحه وب دیگر، بخش دیگری در همان صفحه یا حتی یک فایل قابل دانلود پیوند دهد. مثلا:

 <a href="https://example.com">به Example.com مراجعه کنید</a>

این یک پیوند به <code>https://example.com</code> ایجاد می کند.

لیست ها

HTML عناصری را برای ایجاد لیست فراهم می کند. دو نوع اصلی لیست وجود دارد:

هر آیتم در لیست درون تگ <code><li></code> (مورد لیست) محصور شده است.

HTML5

HTML5 آخرین تکامل استاندارد است که بسیاری از ویژگی‌های جدید را معرفی می‌کند که نشان‌دهنده نیازهای مدرن برای اسناد چندرسانه‌ای و تعاملی است. اینها شامل عناصر ساختاری جدید (<code><header></code>، <code><footer></code>، <code><article></code>، <code><section></code>) است. ، عناصر گرافیکی (<code><canvas></code> برای طراحی، <code><svg></code> برای گرافیک‌های برداری مقیاس‌پذیر) و عناصر رسانه (<code><audio></code> و <code <video></code>).

HTML معنایی

HTML معنایی به استفاده از نشانه گذاری HTML برای تقویت معنایی یا معنی اطلاعات در صفحات وب اشاره دارد. HTML معنایی به جای اینکه صرفاً نحوه ظاهر یا رفتار عناصر را تعریف کند (این یک کار برای CSS و جاوا اسکریپت است)، ساختار و نوع محتوا را دقیقاً توصیف می کند. به عنوان مثال، یک تگ <code><article></code> نشان می دهد که محتوای داخل یک مقاله است، در حالی که تگ <code><nav></code> نشان دهنده یک منوی پیمایش است.

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

نتیجه

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

Download Primer to continue