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

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

زبان HTML

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

HTML یک توصیه رسمی توسط کنسرسیوم وب جهانی (W3C) است و عموماً توسط همه مرورگرهای وب، از جمله مرورگرهای وب دسکتاپ و موبایل، رعایت می شود. HTML5 آخرین نسخه مشخصات است.

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

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

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

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

Doctypes فقط برای HTML استفاده نمی شود، آنها می توانند برای ایجاد هر سندی که از SGML (زبان استاندارد تعمیم یافته نشانه گذاری) استفاده می کند، اعمال شوند.

SGML استانداردی برای تعیین یک زبان نشانه گذاری خاص است که استفاده می شود. HTML یکی از چندین زبان نشانه گذاری است که اعلان های SGML و doctype روی آن اعمال می شود.

نیاز حیاتی دیگر برای ایجاد یک فایل HTML ذخیره آن با پسوند فایل html است. در حالی که اعلان doctype HTML را از داخل فایل به کامپیوتر سیگنال می دهد، پسوند فایل از خارج فایل به کامپیوتر سیگنال می دهد. با داشتن هر دو، یک کامپیوتر می تواند بفهمد که یک فایل HTML است، خواه در حال خواندن فایل باشد یا نه.

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

پس از نوشتن doctype و ذخیره به عنوان یک فایل HTML، کاربر می تواند سایر ابزارهای نحوی HTML را برای سفارشی کردن یک صفحه وب پیاده سازی کند.

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

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

عناصر اساسی HTML

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

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

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

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

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

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

مزایای استفاده از HTML عبارتند از:

  • به طور گسترده با منابع زیادی در دسترس است.

  • به صورت بومی در هر مرورگر اجرا می شود.

  • یادگیری نسبتا آسان است.

  • دارای کد منبع تمیز و ثابت است.

  • منبع باز و رایگان برای استفاده است.

  • قابلیت ادغام با سایر زبان های برنامه نویسی Backend مانند PHP.

چند معایب که باید در نظر گرفت عبارتند از:

  • عملکرد بسیار پویا ندارد و عمدتاً برای صفحات وب استاتیک استفاده می شود.

  • همه اجزاء باید به طور جداگانه ایجاد شوند حتی اگر از عناصر مشابه استفاده کنند.

  • رفتار مرورگر می تواند غیر قابل پیش بینی باشد. به عنوان مثال، مرورگرهای قدیمی ممکن است با ویژگی های جدید سازگار نباشند.

تگ های HTML که معمولاً استفاده می شود

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

  • h1 که یک عنوان سطح بالا را توصیف می کند.

  • h2 که عنوان سطح دوم را توصیف می کند.

  • p که یک پاراگراف را توصیف می کند.

  • table جدولی که داده های جدولی را توصیف می کند.

  • ol که فهرستی از اطلاعات مرتب شده را توصیف می کند.

  • ul که لیست نامرتب اطلاعات را توصیف می کند.

همانطور که گفته شد، برچسب های باز و بسته کننده ای وجود دارد که محتوایی را که آنها در حال افزایش هستند احاطه می کنند. یک تگ باز به این شکل است:

. یک تگ پایانی یکسان است اما حاوی یک بک اسلش در آن است که نشان می دهد پایان عنصر HTML داده شده است. تگ های بسته به این شکل هستند: <p>.

نحوه استفاده و پیاده سازی HTML

از آنجایی که HTML کاملاً مبتنی بر متن است، یک فایل HTML را می‌توان به سادگی با باز کردن آن در برنامه‌هایی مانند Notepad++، Vi یا Emacs ویرایش کرد. هر ویرایشگر متنی را می توان برای ایجاد یا ویرایش یک فایل HTML استفاده کرد و تا زمانی که با پسوند فایل html نامگذاری شده باشد، هر مرورگر وب - مانند کروم یا فایرفاکس - می تواند فایل را به عنوان یک صفحه وب نمایش دهد.

برای توسعه دهندگان نرم افزار حرفه ای، ویرایشگرهای WYSIWYG مختلفی برای توسعه صفحات وب وجود دارد. NetBeans، IntelliJ، Eclipse و ویژوال استودیو مایکروسافت ویرایشگرهای WYSIWYG را به عنوان پلاگین یا به عنوان اجزای استاندارد ارائه می دهند که استفاده و پیاده سازی HTML را فوق العاده آسان می کند.

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

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

نیاز به کمک یا مشاوره دارید؟ با شماره 77637159-021 تماس بگیرید. ما آماده پاسخگویی هستیم!

HTML، CSS و جاوا اسکریپت

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

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

برچسب هایی به نام ویژگی های کلاس برای تطبیق عناصر HTML با عناصر CSS یا JS مربوطه خود استفاده می شود.

به عنوان مثال، اگر کاربر بخواهد رنگ مقدار مشخصی از متن قرمز باشد، می‌تواند کدی را در فایل CSS با یک ویژگی کلاس بنویسد که متن قرمز می‌شود. سپس آنها می توانند صفت کلاس مرتبط را روی تمام تکه های متنی که می خواهند در صفحه HTML قرمز باشند قرار دهند. همان روش اصلی برای برگه های JS، با عملکردهای مختلف اعمال می شود.

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

تاریخچه پیدایش HTML

تاریخچه پیدایش HTML

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

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

تیم برنرز - لی مخترع HTML و وب

سال 1989 میلادی: تیم برنرز - لی (Tim Berners-Lee) با انتشار زبان نشانه گذاری خود HTML، شبکه جهانی وب را اختراع می کند

شبکه جهانی وب، زندگی خود را از مکانی شروع کرد که کمترین انتظار را برای شنیدن آن دارید: سرن (CERN)، آزمایشگاه قاره اروپا در ژنو برای آزمایش فیزیک هسته ای و ذرات بنیادی. جایی که فیزیکدانان سراسر دنیا در آن مکان جمع می شوند و به بیان دیدگاه ها، تفکرات، و یافته های خود می پردازند و آن ها را مورد آزمایش قرار می دهند.

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

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

ابر متن

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

تیم قبل از ورودش و کار در سرن، بر روی تولید متون و پردازش محتوا، کار کرده بود و نام سیستم متنی خود را که در سال 1980 برنامه نویسی کرده بود "Enquire" گذاشته بود و تنها برای استفاده های شخصی و خصوصی از آن استفاده می کرد.

نمونه اولیه مرورگر وب، در سال 1990 میلادی و بر روی کامپیوترهای NeXT به وجود آمد.

تاریخچه و توسعه

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

HTML 4.01 در سال 1999 منتشر شد، زمانی که اینترنت هنوز نامی شناخته شده نبود، و HTML5 تا سال 2014 استاندارد نشده بود. در این مدت، نشانه گذاری HTML از کار توصیف ساختار سند محتوای صفحه وب به نقش تغییر کرد. همچنین توضیح می دهد که وقتی یک صفحه وب محتوا را نمایش می دهد چگونه باید به نظر برسد.

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

HTML به طور کلی باید نحوه ساختار محتوا را توصیف کند، نه اینکه چگونه در یک مرورگر استایل دهی و ارائه می شود. سایر زبان‌های نشانه‌گذاری برای این کار مناسب‌تر هستند.

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

نسخه های HTML

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

  • HTML 1.0 -- منتشر شده در سال 1992 -- دارای قابلیت بسیار محدود و حدود 20 عنصر بود.

  • HTML 2.0 -- منتشر شده در سال 1995 -- شروع به ترکیب عناصر مربوط به توابع ریاضی کرد.

  • HTML 3.2 -- منتشر شده در سال 1996 -- ابتکار تابع ریاضی را به کلی کنار گذاشت و همپوشانی بین برنامه های افزودنی اختصاصی مختلف را برطرف کرد.

  • HTML 4.0 -- منتشر شده در سال 1997 -- سه تغییر ارائه می دهد که در تعداد عناصر منسوخ مجاز متفاوت بودند.

  • HTML 4.01 -- منتشر شده در سال 1999 -- تا حد زیادی مشابه 4.0.

  • HTML 5 -- منتشر شده در سال 2014 -- پس از یک وقفه طولانی در به روز رسانی به وجود آمد زیرا سازمان توسعه دهنده آن -- W3C -- بر زبان موازی دیگری به نام XHTML تمرکز کرده بود.

  • HTML 5.1 -- منتشر شده در سال 2016 -- با هدف قرار دادن آسان تر انواع مختلف جاسازی رسانه با برچسب های جدید.

  • HTML 5.2 -- منتشر شده در سال 2017 -- هدف آن این بود که برای انسان و رایانه به یک اندازه قابل درک باشد.

  • HTML 5.3 -- هنوز منتشر نشده -- W3C در حال همکاری با WHATWG در یک نسخه جدید است. این همکاری در سال 2019 آغاز شد.

استانداردهای نحوی HTML

توجه داشته باشید که وقتی یک قطعه HTML در یک مرورگر رندر می‌شود، تگ‌های HTML بر نحوه نمایش هر عنصر HTML در صفحه تأثیر می‌گذارند، اما هیچ یک از برچسب‌ها یا ویژگی‌های HTML نمایش داده نمی‌شوند. HTML به سادگی نحوه ارائه محتوا را توضیح می دهد. خود HTML هرگز به کاربر نهایی نمایش داده نمی شود.

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

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

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

به منظور تطبیق مجموعه‌ های کاراکترهای خاص، کاربران باید رمزگذاری کاراکترها را با عنصری که به شکل زیر است مشخص کنند:

meta charset="utf-8". در این مورد، utf-8 مجموعه کاراکترها است. Utf-8 مجموعه حروف انگلیسی پیش فرض HTML است.

ساختار کدهای HTML صفحات وب سایت

ساختار کدهای HTML

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

  • HTML زبانی است که از زبان XML مشتق شده است و اساسا از قوانین آن پیروی می کند.

  • HTML زبانی است که آجرهای آن را تگ های HTML تشکیل می دهند.

  • تگ های HTML عملا حکم پرانتزهای یک عبارت ریاضی را بازی می کنند.

  • تگ های HTML می توانند همانند پرانتزهای یک عبارت ریاضی، تو در تو باشند.

  • تگ های HTML همانند پرانتزهای یک عبارت ریاضی، با باز شدن آنها می بایست در جایی مناسب بسته شوند.

  • تگ های HTML و تنها برخی از آنها، می توانند به صورت مختصر، باز و بسته شوند.

  • درون تگ های HTML همانند درون پرانتزهای یک عبارت ریاضی، می تواند محتویاتی قرار داشته باشد که متعلق به آن تگ می باشد.

  • تگ های HTML هرکدام معنا و مفاهیم خاص خود را دارند.

یک مثال عملی از ساختار کدهای HTML

اکنون که دید کلی را به ساختار کدهای HTML پیدا کردید اجازه دهید تا ساده ترین ساختار یک صفحه HTML را مورد بررسی قرار دهیم:

<html>
      <head>
      </head>
      <body>
            This is a text.
      </body>
</html>


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

تگ html: در مثال فوق، بیان می کند که کل این فایل، حاوی کدهای html می باشد.

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

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

هنوز نظری ثبت نشده است.

یک نظر بگذارید

کد امنیتی: