تصویر شاخص آموزش اچ تی ام ال - قسمت 1 : معرفی اچ تی ام ال

قسمت 1: معرفی اچ تی ام ال

معرفی اچ تی ام ال

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

معرفی اچ تی ام ال - اچ تی ام ال چیست ؟

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

اچ تی ام ال یا زبان نشانه گذاری ابر متن (HyperText Markup Language) زبان نشانه گذاری استاندارد برای نمایش سند ها و صفحاتی است که در مرورگر ها نمایش داده میشوند. صفحات و سند هایی که توسط این زبان، نشانه گذاری شدند میتوانند با تکنولوژی هایی مانند CSS (Cascading Style Sheets) و زبان های اسکریپتی مانند JavaScript طراحی و دیزاین شوند.

  • اچ تی ام ال مخفف شده زبان نشانه گذاری ابر متن میباشد
  • اچ تی ام ال زبان استاندارد برای نشانه گذاری (ساخت) صفحات وب میباشد
  • اچ تی ام ال قالب یک صفحه وب را مشخص میکند
  • اچ تی ام ال از تعداد زیادی تگ تشکیل شده است
  • تگ های اچ تی ام ال به مرورگر روش نمایش متن داخل خودشان را دیکته میکنند
  • تگ ها در واقع اسم هایی برای محتوای خود هستند. مثلا: این موضوع است، این یک پاراگراف است و …

اچ تی ام ال چطوری کار میکند ؟

مرورگر ها فایل های  HTML،CSS  و JavaScript  را از وب سرور یا فضای ذخیره سازی داخلی دریافت میکنند و آن اسناد را به صورت یک صفحه مولتی مدیا وب ارائه میکنند. این زبان نشانه گذاری، قالب صفحات وب را تولید میکند. اگر یک صفحه وب را به بدن انسان تشبیه کنیم،  HTML استخوان های بدن است.

یک سند اچ تی ام در وب

<!DOCTYPE html>

<html>

    <head>

        <title>نام صفحه</title>

    </head>

    <body>

        <h1>اولین سر فصل</h1>

        <p>اولین پاراگراف</p>

     </body>

</html>

توضیح تگ های مثال بالا

  • <!DOCTYPE html> این تگ به مرورگر میگه که این یک سند اچ تی ام ال است
  • <HTML> تگ روت سند اچ تی ام ال (ریشه: همه تگ های دیگر باید زیر مجموعه این تگ باشند)
  • <HEAD> تگ ها و اطلاعاتی که توسط ماشین خوانده میشوند (اطلاعات متا) در این تگ قرار میگیرند مانند استایل ها و اسکریپت های سمت کاربر
  • <title> این تگ اسم سند اچ تی ام ال را مشخص میکند. (در مرورگر به عنوان نام صفحه نمایش داده میشود)
  • <Body> بدنه سند را مشخص میکند. این تگ همه اطلاعات قابل مشاهده را شامل میشود، مانند عنوان ها، پاراگراف ها و …
  • <H1> بزرگ ترین سر فصل سند را در این تگ مینویسند (معمولا موضوع اصلی سند).
  • <p> مشخص کننده یک پاراگراف است

مرورگر ها

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

مرورگر ها تگ ها را نمایش نمیدهند ولی با خواندن آنها تصمیم میگیرند که اطلاعات را چگونه و در چه قالبی به کاربر نمایش دهند.

قالب سند اچ تی ام ال

در اچ تی ام ال، اکثر تگ ها، مخصوصا تگ هایی که محتوا درون آنها قرار میگیرد، شامل یک تگ باز و یک تگ بسته میشوند. اولین تگ کاملی که در یک سند اچ تی ام ال باید نوشت، تگ ریشه یا همان <HTML> میباشد که همه تگ ها و محتوای دیگر درون این تگ قرار میگیرند.

بعد از آن این سند، باید شامل یک تگ <Head> و یک تگ <Body> باشد که همه اطلاعات متا درون تگ <Head> و همه اطلاعاتی که در صفحه وب قابل مشاهده هستند درون تگ <Body> قرار میگیرند.

تنها تگی که نسبتا قابل مشاهده است و در Head سایت قرار میگیرد، تگ <Title> میباشد که در اسم تب مرورگر نمایش داده میشود. تگ Head و محتوای آن عموما در وبسایت برای کاربران قابل مشاهده نیست.

Head
Head
Body

در این زبان نشانه گذاری، تگ هایی هم وجود دارند که از یک بخش تشکیل شده اند. مانند: <Br>, <Hr> و … که در قسمت های بعدی آموزش اچ تی ام ال به بررسی آنها میپردازیم.

تاریخچه اچ تی ام ال

  1. سال 1989:  World Wide Web (WWW)توسط Tim Berners-Lee اختراع شد
  2. سال 1991: اچ تی ام ال توسط Tim Berners-Lee ساخته شد که شامل 18 تگ یا عنصر بود
  3. سال 1993: Dave Raggett
  4. سال 1995: اچ تی ام ال 2 توسط کار گروه اچ تی ام ال منتشر شد
  5. سال 1997: اچ تی ام ال 3.2 منتشر شد
  6. سال 1997: اچ تی ام ال 4 منتشر شد
  7. سال 1999: اچ تی ام ال 4.1 منتشر شد
  8. سال 2000: اکس اچ تی ام ال 1.0 منتشر شد
  9. سال 2014: اچ تی ام ال 5 منتشر شد
  10. سال 2016: اچ تی ام ال 5.1 منتشر شد
  11. سال 2017: اچ تی ام ال 5.2 منتشر شد

چرا معرفی اچ تی ام ال رو نوشتیم ؟

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

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

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

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