HTML چیست ؟

HTML چیست ؟

کاربرد HTML

اگر بخواهیم کاربرد HTML را بطور ساده توضیح دهیم باید بگوییم:

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

اگر کمی با طراحی وب آشنایی داشته باشید،‌ حتما میدانید که طراحی وب ۲ مرحله اصلی دارد:

1. ساختاربندی اصلی صفحات وب که با HTML انجام میشود.
2. اضافه کردن جذابیت های ظاهری مثل رنگ و… که با CSS انجام میشود.

ساخت یک وب سایت حرفه ای و کامل شامل استفاده از زبان های و کد های مختلف برنامه نویسی مثل php، ASP، HTML، CSS و… است، که هیچکدام از این کدها و زبان های بجز اچ تی ام ال برای مرورگرهای مختلف قابل فهم نیست. یعنی مرورگر ها فقط کد ها و عناصری را نمایش می دهند که در دل کدها HTML نوشته شده باشند.

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

تگ های HTML

انجام هر عملی در HTML به کمک تگ های HTML امکان پذیر می باشد، در اصل این تگ های HTML هستند که به آن قدرت می دهند.

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

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

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

ابرمتن چیست؟

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

کاربردهای html

۱۰ کاربرد برتر HTML

در زیر لیستی از 10 کاربرد برتر زبان HTML آمده است.

1. توسعه صفحات وب

HTML به شدت برای ایجاد صفحاتی که در شبکه جهانی وب نمایش داده می شوند استفاده می شود.

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

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

1. ایجاد سند وب

ایجاد سند در اینترنت تحت سلطه HTML و مفهوم اصلی آن از طریق تگ و DOM می باشد.

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

یک سند وب شامل سه بخش است: عنوان، سر و بدن.

Head شامل اطلاعاتی برای شناسایی سند، از جمله عنوان و هر کلمه کلیدی مهم دیگری است. یک عنوان در نوار مرورگر قابل مشاهده است.

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

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

1. ناوبری اینترنتی

این یکی از مهمترین کاربردهای HTML است که انقلابی است.

این پیمایش با استفاده از مفهوم Hypertext امکان پذیر است.

این اساساً متنی است که به سایر صفحات وب یا متن اشاره دارد و هنگامی که کاربر روی آن کلیک می کند، به متن یا صفحه ارجاع داده می شود.

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

1. ویژگی لبه برش

HTML5 با مجموعه استانداردها و API خود برای معرفی برخی از آخرین روندها در تجارت ایجاد وب سایت استفاده می شود.

مرورگری مانند Google Chrome برای اجرای آخرین مجموعه استانداردها و APIهای HTML5 بهترین انتخاب است.

یک کتابخانه جاوا اسکریپت به نام Modernizr در دسترس است که می‌تواند ویژگی‌هایی را شناسایی کند که به توسعه‌دهنده اجازه می‌دهد کتابخانه‌های polyfill را به صورت پویا بارگذاری کند.

1. تصاویر واکنش گرا در صفحات وب

با ویژگی srcset عنصر img در HTML و ترکیب آن با عناصر تصویر، یک توسعه‌دهنده می‌تواند به طور کامل نحوه نمایش تصویر توسط کاربر را کنترل کند.

اکنون انواع مختلفی از یک تصویر با تغییر اندازه را می توان با استفاده از عنصر img بارگذاری کرد.

قوانین را می توان به راحتی با عنصر تصویر تنظیم کرد. می‌توانیم عنصر img را با منبع پیش‌فرض اعلام کنیم، و سپس برای هر مورد، یک منبع را می‌توان ارائه کردد.

1. ذخیره سازی سمت مشتری

قبلاً، یک کاربر نمی‌توانست داده‌های مرورگر خود را که در تمام جلسات باقی می‌ماند، ذخیره کند.

برای برآورده کردن این نیاز، زیرساخت سمت سرور باید ساخته شود، یا می توان از کوکی های کاربر استفاده کرد.

اما با HTML5، ذخیره سازی سمت سرویس گیرنده با استفاده از localStorage و IndexDB امکان پذیر است. این دو استراتژی استانداردها و ویژگی های خاص خود را دارند.

localStorage اساساً ذخیره سازی جدول را فراهم می کند. API آن بسیار ساده است و متدهای setItem، getItem و removeItem را در اختیار توسعه دهنده قرار می دهد.

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

1. استفاده از قابلیت های آفلاین

هنگامی که داده‌ها در مرورگر ذخیره می‌شوند، توسعه‌دهنده می‌تواند استراتژی‌ای را برای کارکرد برنامه در صورت قطع ارتباط کاربر در نظر بگیرد.

HTML5 مکانیسم کش کاربردی خود را دارد که نحوه مدیریت وضعیت آفلاین را توسط مرورگر مشخص می کند.

حافظه نهان برنامه، که مسئول توانایی آفلاین است، شامل اجزای مختلفی از جمله روش‌های API که به‌روزرسانی شده اند، خواندن فایل مانیفست و ایجاد رویدادها است.

با استفاده از ویژگی خاص در HTML5، یک توسعه دهنده می تواند بررسی کند که آیا برنامه آنلاین است یا نه. یک توسعه‌دهنده همچنین می‌تواند اطلاعات را در فایل مانیفست کش برنامه وب‌سایت مشخص کند.

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

1. پشتیبانی از ورود داده با HTML

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

به طوری که کاربر نهایی بتواند ورودی داده بهتری داشته باشد.

1. استفاده از توسعه بازی

قبل از ظهور HTML5، توسعه بازی یک دامنه انحصاری فلش و سیلورلایت بود.

از آنجایی که مرورگرها از مشخصات جدیدی برای HTML5 پشتیبانی می‌کنند، از جمله CSS3 و موتور جاوا اسکریپت با سرعت نور برای ایجاد یک تجربه غنی جدید.

HTML5 می‌تواند واقعیت توسعه بازی را که قبلاً نقطه قوت Flash و Silverlight بود، به ارمغان بیاورد.

هر ویژگی API ها نیازی به پیاده سازی ندارند، اما می توان از مناسب ترین آنها استفاده کرد و بقیه ویژگی ها را حذف کرد.

1. استفاده از API های بومی برای غنی سازی وب سایت

HTML5 بسیاری از توانایی ها و ابزارهای جدید را اضافه می کند که در گذشته فقط یک تصور بود.

مجموعه بزرگی از APIهای جدید در مورد سیستم فایل، مکان جغرافیایی ، کشیدن و رها کردن، مدیریت رویداد، ذخیره‌سازی مشتری و غیره، قابلیت‌هایی هستند که با استفاده از HTML5 امکانپذیر و آسانتر از قبل هستند.

برنامه وب را می توان با سایر APIها مانند Fullscreen، Visibility و Media Capture افزایش داد.

یک برنامه وب مدرن دارای ماهیت ناهمزمان است که می تواند با استفاده از Websockets و کارمندان وب مانند API ها تقویت شود.

ساخت فایل HTML

برای ساخت فایل html کافی است کد های بالا را در notepad ویندوز کپی کرده و با پسوند .html ذخیره کنید.

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