HTML چیست؟
روزانه به سایتهای زیادی سر میزنیم که هر کدام به شکلی برایمان جذاب هستند و ممکن است ما را به این فکر بیندازند که این سایتها چطور ساخته شدند؟ اگر به چند سال قبل برگردیم و نگاهی به اولین سایتهای منتشرشده در وب بیندازیم، میبینیم که صفحات آنها تنها از چند المان ساده و ابتدایی تشکیل شدهاند.
از قدیم تا امروز، تکنولوژیهای مختلفی در جذاب کردن فرآیند طراحی وب تاثیرگذار بودهاند، اما اگر بگوییم تمام این تکنولوژیها به HTML منتهی میشوند باور میکنید؟ در این مسیر از سوین هاست همراه ما باشید تا کشف کنیم HTML چیست و چطور این همه سال در دنیای وب جایگاه خودش را حفظ کرده است؟
HTML چیست؟
HTML مخفف Hyper Text Markup Language بوده و در فارسی به آن زبان نشانه گذاری ابرمتن میگویند. دقت کنید که HTML یک زبان برنامه نویسی نیست، بلکه یک زبان نشانگذاری یا Markup language به حساب میآید. کدنویسی با HTML قدم گذاشتن در جای پای بزرگان وب و شروع ساخت سایتهای شگفتانگیز است.
اگر عاشق طراحی سایت هستید و برای ورود به این حوزه برنامه جدی دارید، آموزش HTML اولین قدم شما در این مسیرخواهد بود.
زبان نشانهگذاری چه تفاوتی با زبان برنامه نویسی دارد؟
زبان برنامه نویسی ابزاری قدرتمند است که به وسیله آن میتوانیم با کامپیوترها حرف بزنیم. زبانهای برنامه نویسی به کمک دستورالعملهایی که برای کامپیوتر قابل فهم هستند با آنها ارتباط برقرار کرده و به طور عمده از ساختارهای کنترلی و شرطی استفاده میکنند. سخت افزار برای این که درست کار کند نیاز به یک سری دستورالعمل دارد. این دستورالعملها توسط برنامه نویس و زبانی که برای کامپیوتر قابل فهم باشد، به سخت افزار داده میشود.
انواع مختلفی از زبان نشانه گذاری وجود دارد که معروفترین آن HTML است. اگر به اسم زبان نشانه گذاری دقت کنید، متوجه مفهوم آن خواهید شد. در زبانهای نشانه گذاری خبری از ساختارهای رایج برنامهنویسی مثل شرط، حلقه، تکرار و غیره وجود ندارد و شما داخل متن خود از یک سری نشانه استفاده میکنید. در حقیقت در این زبانها شما به کمک این نشانهها متن را از سایر عناصر صفحه جدا میکنید تا به کمک آنها المانهای مختلف را داخل یک صفحه وب قرار داده و ساختار صفحه را مشخص کنید.
تاریخچه زبان HTML
برای اینکه بدانیم HTML از کجا آمده باید سفر کوتاهی به سال 1991 داشته باشیم. زمانی که آقای Tim Berners-Lee کار خود را روی 18 Tag یا همان برچسب ساده شروع کرد و اولین نسخه HTML را طراحی کرد. HTML روز به روز پیشرفت کرد و در هر نسخه امکانات بیشتری را در قالب تگهای کاربردیتر در اختیار طراحان قرار داد.
به این ترتیب این زبان مشکلات قبلی خود را به مرور رفع کرد. HTML4 در سال 1999 معرفی شد و توانست تا مدتها توسط طراحان وب مورد استفاده قرار گیرد، تا این که بزرگترین تحول تاریخ HTML با معرفی HTML5 اتفاق افتاد. این نسخه از زبان HTML توانست بیش از پیش به توسعه دهندگان در طراحی سایتها کمک کند که در ادامه میخواهیم با آن بیشتر آشنا شویم.
HTML5 چیست؟
قصد داریم در این بخش از سوین هاست به این موضوع بپردازیم که HTML5 چیست و چه فرقی با HTML دارد. تا سال 2008 بازار HTML4 داغ بود و به طور گسترده استفاده میشد. اما مشخص بود که این نسخه از HTML ضعفهایی دارد و باید بروزرسانی شود. به همین دلیل کمپانی WHATWG توسعه این زبان را در دست گرفت و استانداردهای آن را ارتقا داد. ضعف اصلی که باید روی آن کار میشد مربوط به چندرسانهای (multimedia) و گرافیک بود.
HTML5 در سال 2014 یک آپدیت مهم و اساسی را تجربه کرد. در این آپدیت تگهای HTML جدیدی اضافه شدند که تاثیر بسیار مثبتی در بالا بردن کیفیت و بهبود تجربه کاربران داشتند. پس از این آپدیت طراحی سایتها ساختار منظمی پیدا کرد و مفاهیم قدیمی (مانند استفاده از table در بدنه اصلی صفحات) کنار گذاشته شدند.
HTML چطور کار میکند؟
HTML عناصر مختلفی را از جمله پاراگراف، لیست، عکس، صوت و غیره کنار هم قرار میدهد تا چهارچوب اصلی صفحه وب را ایجاد کند. به زبان سادهتر ما با HTML بدنه اصلی صفحه وب را میسازیم. حال که با اصلیترین وظیفه HTML آشنا شدید، بگذارید به سراغ بررسی یک مثال برویم.
اگر HTML را شبیه به یک ساختمان در حال ساخت در نظر بگیریم، مهندس عمران که پی ساختمان را ریخته و اسکلت آن را میسازد حکم کسی را دارد که ساختار اصلی صفحات وب را با HTML میسازد. همچنین مهندس معماری که وظیفه دارد ظاهر ساختمان را زیباتر کند مانند کسی است که به کدنویسی با CSS میپردازد.
البته در دنیای وب معمولا وظیفه کدنویسی HTML و CSS به عهده یک نفر خواهد بود. فایلهای HTML با پسوند .htm یا .html در سیستم ذخیره میشوند. این فایلها تقریبا توسط همه مرورگرهای وب پشتیبانی میشوند و به راحتی میتوانند محتویات آن را رندر کنند. منظور از رندر کردن این است که عناصر داخل سایت که ترکیبی از کد، تصویر، انیمیشن، ویدئو یا غیره هستند، تبدیل به اطلاعات قابل نمایش برای کاربران میشوند.
تگ چیست؟
HTML به کمک برچسبها (Tags) عناصر مختلف را کنار هم میچیند و هر کاربر با توجه به نیاز خود از آنها استفاده میکند. شاید بپرسید تگ چیست؟ تگها عناصری هستند که وظایف گوناگونی دارند و با فراخوانی هر کدام کارشان شروع شده و با بستن تگ کارشان تمام میشود. مثلا برای نوشتن پاراگرافها در زبان HTML از تگ p استفاده میشود و زمانی که پاراگراف تمام شده، تگ هم بسته میشود. همچنین برای نشان دادن لینکها از تگ a استفاده در صفحات وب استفاده میشود. برای مثال :
<a href="https://7learn.com">
تگهای HTML در حقیقت همان دستورالعملهای این زبان هستند که به مرورگر میگویند صفحه مورد نظر از چه عناصری تشکیل شده است. هر کدام از این Tag معنا و مفهوم خاصی دارند و به شما امکاناتی مانند تغییر شکل ظاهری متنها، ساخت لیستهای مختلف و به هم متصل کردن صفحات را میدهند. همچنین از آنها برای کار با صدا، تصویر و غیره استفاده میشود.
مهمترین تگهای HTML را بشناسید
تنوع تگها در HTML بسیار بالاست و این تگها در نسخههای جدید در حال پیشرفت و بهبود هستند. بعضی از آنها محبوبیت چندانی نداشته و به ندرت توسط طراحان وب استفاده میشوند. مثلا تگ meter که برای اندازهگیری است به ندرت توسط طراحان سایت استفاده میشود.
از طرفی دیگر تگ <div> که برای تقسیم کردن صفحه به بخشهای مختلف به کار میرود، تقریبا بخش جدا نشدنی در طراحی سایت میباشد. پس اگر قصد دارید بر این زبان مسلط شوید، به شما توصیه میکنیم که به بررسی و مطالعه تگهای مختلف HTML بپردازید.
دسترسی یکجا به لیست کامل تگهای HTML
برنامه نویسی سر و کله زدن با کد، تمرین و تمرین است. پس باید این مسیر را بدون میانبر طی کنید و به دنبال تقویت مهارتهای خود باشید. خواندن لیست کامل تگهای HTML به تنهایی به هیچ دردی نمیخورد. زیرا پس از شناخت تگهای HTML شما باید تک تک آنها را تست و با یکدیگر ترکیب کنید تا ببنید چطور در کنار هم کار میکنند. پس زمانی که تازه کار خود را شروع کردهاید، لیست تگهای HTML را کنار خود داشته باشید تا بتوانید آنها را به خاطر بسپارید و به صورت کاربردی به کار بگیرید.
مزایا و معایب زبان HTML چیست؟
HTML در کنار css و js هسته اصلی وب را تشکیل میدهد و یک زبان بسیار مهم در دنیای وب حساب میشود. این زبان مزیتها و محدودیتهایی هم دارد که در ادامه به آنها اشاره میکنیم و میبینیم دلیل اصلی ماندگاری HTML چیست و چرا این زبان با تمام مشکلاتش هنوز زبان شماره یک وب به حساب میآید. برخی از مهمترین مزایا و معایب این زبان عبارتند از:
مزایای HTML :
- یادگیری آسان و لذتبخش
- قابلیت اجرا در تمام مرورگرها
- متن باز و رایگان بودن
- ادغام آسان با زبانهای سمت سرور مثل php
معایب HTML:
- استاتیک بودن و وابستگی به زبانهای سمت سرور برای تعامل با کاربر
- ضعف در پشتیبانی از مرورگرهای قدیمی
- نیاز به طراحی جداگانه هر صفحه به دلیل نبود قواعد منطقی برنامه نویسی
HTML چه رابطهای با زبانهای css و javascript دارد؟
روزانه به سایتهای زیادی سر میزنیم که هر کدام به شکلی برایمان جذاب هستند و ممکن است ما را به این فکر بیندازند که این سایتها چطور ساخته شدند؟ اگر به چند سال قبل برگردیم و نگاهی به اولین سایتهای منتشرشده در وب بیندازیم، میبینیم که صفحات آنها تنها از چند المان ساده و ابتدایی تشکیل شدهاند.
از قدیم تا امروز، تکنولوژیهای مختلفی در جذاب کردن فرآیند طراحی وب تاثیرگذار بودهاند، اما اگر بگوییم تمام این تکنولوژیها به HTML منتهی میشوند باور میکنید؟ در این مسیر همراه ما باشید تا کشف کنیم HTML چیست و چطور این همه سال در دنیای وب جایگاه خودش را حفظ کرده است؟
HTML چیست؟
HTML مخفف Hyper Text Markup Language بوده و در فارسی به آن زبان نشانه گذاری ابرمتن میگویند. دقت کنید که HTML یک زبان برنامه نویسی نیست، بلکه یک زبان نشانگذاری یا Markup language به حساب میآید. کدنویسی با HTML قدم گذاشتن در جای پای بزرگان وب و شروع ساخت سایتهای شگفتانگیز است.
زبان نشانهگذاری چه تفاوتی با زبان برنامه نویسی دارد؟
زبان برنامه نویسی ابزاری قدرتمند است که به وسیله آن میتوانیم با کامپیوترها حرف بزنیم. زبانهای برنامه نویسی به کمک دستورالعملهایی که برای کامپیوتر قابل فهم هستند با آنها ارتباط برقرار کرده و به طور عمده از ساختارهای کنترلی و شرطی استفاده میکنند. سخت افزار برای این که درست کار کند نیاز به یک سری دستورالعمل دارد. این دستورالعملها توسط برنامه نویس و زبانی که برای کامپیوتر قابل فهم باشد، به سخت افزار داده میشود.
انواع مختلفی از زبان نشانه گذاری وجود دارد که معروفترین آن HTML است. اگر به اسم زبان نشانه گذاری دقت کنید، متوجه مفهوم آن خواهید شد. در زبانهای نشانه گذاری خبری از ساختارهای رایج برنامهنویسی مثل شرط، حلقه، تکرار و غیره وجود ندارد و شما داخل متن خود از یک سری نشانه استفاده میکنید. در حقیقت در این زبانها شما به کمک این نشانهها متن را از سایر عناصر صفحه جدا میکنید تا به کمک آنها المانهای مختلف را داخل یک صفحه وب قرار داده و ساختار صفحه را مشخص کنید.
تاریخچه زبان HTML
برای اینکه بدانیم HTML از کجا آمده باید سفر کوتاهی به سال 1991 داشته باشیم. زمانی که آقای Tim Berners-Lee کار خود را روی 18 Tag یا همان برچسب ساده شروع کرد و اولین نسخه HTML را طراحی کرد. HTML روز به روز پیشرفت کرد و در هر نسخه امکانات بیشتری را در قالب تگهای کاربردیتر در اختیار طراحان قرار داد.
به این ترتیب این زبان مشکلات قبلی خود را به مرور رفع کرد. HTML4 در سال 1999 معرفی شد و توانست تا مدتها توسط طراحان وب مورد استفاده قرار گیرد، تا این که بزرگترین تحول تاریخ HTML با معرفی HTML5 اتفاق افتاد. این نسخه از زبان HTML توانست بیش از پیش به توسعه دهندگان در طراحی سایتها کمک کند که در ادامه میخواهیم با آن بیشتر آشنا شویم.
HTML5 چیست؟
قصد داریم در این بخش از سوین هاست به این موضوع بپردازیم که HTML5 چیست و چه فرقی با HTML دارد. تا سال 2008 بازار HTML4 داغ بود و به طور گسترده استفاده میشد. اما مشخص بود که این نسخه از HTML ضعفهایی دارد و باید بروزرسانی شود. به همین دلیل کمپانی WHATWG توسعه این زبان را در دست گرفت و استانداردهای آن را ارتقا داد. ضعف اصلی که باید روی آن کار میشد مربوط به چندرسانهای (multimedia) و گرافیک بود.
HTML5 در سال 2014 یک آپدیت مهم و اساسی را تجربه کرد. در این آپدیت تگهای HTML جدیدی اضافه شدند که تاثیر بسیار مثبتی در بالا بردن کیفیت و بهبود تجربه کاربران داشتند. پس از این آپدیت طراحی سایتها ساختار منظمی پیدا کرد و مفاهیم قدیمی (مانند استفاده از table در بدنه اصلی صفحات) کنار گذاشته شدند.
HTML چطور کار میکند؟
HTML عناصر مختلفی را از جمله پاراگراف، لیست، عکس، صوت و غیره کنار هم قرار میدهد تا چهارچوب اصلی صفحه وب را ایجاد کند. به زبان سادهتر ما با HTML بدنه اصلی صفحه وب را میسازیم. حال که با اصلیترین وظیفه HTML آشنا شدید، بگذارید به سراغ بررسی یک مثال برویم.
اگر HTML را شبیه به یک ساختمان در حال ساخت در نظر بگیریم، مهندس عمران که پی ساختمان را ریخته و اسکلت آن را میسازد حکم کسی را دارد که ساختار اصلی صفحات وب را با HTML میسازد. همچنین مهندس معماری که وظیفه دارد ظاهر ساختمان را زیباتر کند مانند کسی است که به کدنویسی با CSS میپردازد.
البته در دنیای وب معمولا وظیفه کدنویسی HTML و CSS به عهده یک نفر خواهد بود. فایلهای HTML با پسوند .htm یا .html در سیستم ذخیره میشوند. این فایلها تقریبا توسط همه مرورگرهای وب پشتیبانی میشوند و به راحتی میتوانند محتویات آن را رندر کنند. منظور از رندر کردن این است که عناصر داخل سایت که ترکیبی از کد، تصویر، انیمیشن، ویدئو یا غیره هستند، تبدیل به اطلاعات قابل نمایش برای کاربران میشوند.
تگ چیست؟
HTML به کمک برچسبها (Tags) عناصر مختلف را کنار هم میچیند و هر کاربر با توجه به نیاز خود از آنها استفاده میکند. شاید بپرسید تگ چیست؟ تگها عناصری هستند که وظایف گوناگونی دارند و با فراخوانی هر کدام کارشان شروع شده و با بستن تگ کارشان تمام میشود. مثلا برای نوشتن پاراگرافها در زبان HTML از تگ p استفاده میشود و زمانی که پاراگراف تمام شده، تگ هم بسته میشود. همچنین برای نشان دادن لینکها از تگ a استفاده در صفحات وب استفاده میشود. برای مثال :
<a href="https://7learn.com">
تگهای HTML در حقیقت همان دستورالعملهای این زبان هستند که به مرورگر میگویند صفحه مورد نظر از چه عناصری تشکیل شده است. هر کدام از این Tag معنا و مفهوم خاصی دارند و به شما امکاناتی مانند تغییر شکل ظاهری متنها، ساخت لیستهای مختلف و به هم متصل کردن صفحات را میدهند. همچنین از آنها برای کار با صدا، تصویر و غیره استفاده میشود.
مهمترین تگهای HTML را بشناسید
تنوع تگها در HTML بسیار بالاست و این تگها در نسخههای جدید در حال پیشرفت و بهبود هستند. بعضی از آنها محبوبیت چندانی نداشته و به ندرت توسط طراحان وب استفاده میشوند. مثلا تگ meter که برای اندازهگیری است به ندرت توسط طراحان سایت استفاده میشود.
از طرفی دیگر تگ <div> که برای تقسیم کردن صفحه به بخشهای مختلف به کار میرود، تقریبا بخش جدا نشدنی در طراحی سایت میباشد. پس اگر قصد دارید بر این زبان مسلط شوید، به شما توصیه میکنیم که به بررسی و مطالعه تگهای مختلف HTML بپردازید.
دسترسی یکجا به لیست کامل تگهای HTML
برنامه نویسی سر و کله زدن با کد، تمرین و تمرین است. پس باید این مسیر را بدون میانبر طی کنید و به دنبال تقویت مهارتهای خود باشید. خواندن لیست کامل تگهای HTML به تنهایی به هیچ دردی نمیخورد. زیرا پس از شناخت تگهای HTML شما باید تک تک آنها را تست و با یکدیگر ترکیب کنید تا ببنید چطور در کنار هم کار میکنند. پس زمانی که تازه کار خود را شروع کردهاید، لیست تگهای HTML را کنار خود داشته باشید تا بتوانید آنها را به خاطر بسپارید و به صورت کاربردی به کار بگیرید.
مزایا و معایب زبان HTML چیست؟
HTML در کنار css و js هسته اصلی وب را تشکیل میدهد و یک زبان بسیار مهم در دنیای وب حساب میشود. این زبان مزیتها و محدودیتهایی هم دارد که در ادامه به آنها اشاره میکنیم و میبینیم دلیل اصلی ماندگاری HTML چیست و چرا این زبان با تمام مشکلاتش هنوز زبان شماره یک وب به حساب میآید. برخی از مهمترین مزایا و معایب این زبان عبارتند از:
مزایای HTML :
- یادگیری آسان و لذتبخش
- قابلیت اجرا در تمام مرورگرها
- متن باز و رایگان بودن
- ادغام آسان با زبانهای سمت سرور مثل php
معایب HTML:
- استاتیک بودن و وابستگی به زبانهای سمت سرور برای تعامل با کاربر
- ضعف در پشتیبانی از مرورگرهای قدیمی
- نیاز به طراحی جداگانه هر صفحه به دلیل نبود قواعد منطقی برنامه نویسی
HTML چه رابطهای با زبانهای css و javascript دارد؟
کمتر پیش میآید که از HTML صحبت کنیم و ذهنمان به سمت زبانهای css و JavaScript کشیده نشود. تا اینجای کار فهمیدیم HTML چیست و چرا در طراحی سایت به آن نیاز خواهیم داشت. اما به این نکته توجه داشته باشید که امروزه HTML به تنهایی کاربرد زیادی ندارد.
چون فقط ساختار صفحه را شکل داده و اجازه اضافه کردن جذابیتهای ظاهری را نمیدهد. صفحات HTML به تنهایی ارزشی برای انتشار ندارند اما زمانی که در کنار css و JavaScript قرار میگیرند، زیبایی واقعی خود را در طراحی وب نشان میدهند.
آموزش زبان HTML و یک پروژه کوچک برای تمرین
حالا که با مفاهیم اولیه وب و زبان HTML آشنا شدید، بهتر است دست به کد شده و اولین صفحه وب خود را با استفاده از HTML طراحی کنید. البته قرار نیست تبدیل به یک متخصص HTML شوید، فقط چند تگ ساده را بررسی میکنیم تا بفهمید HTML در دنیای واقعی چطور کار میکند. برای شروع کار یک ویرایشگر کد را باز کنید تا کدهای HTML را در آن وارد کنید. شاید برای شما سوال شود که در چه محیطی میتوان کدهای HTML را نوشت و مشاهده کرد؟
اگر از ویندوز استفاده میکنید، نرم افزار notepad برای این منظور در دسترس شما خواهد بود. ویرایشگرهای کد بسیار زیادی وجود دارند که از این زبان پشتیبانی کرده و یک محیط کدنویسی HTML به حساب میآیند. مثلا Adobe Dreamweaver یا Jetbrain PHPMystorm که جزء محبوبترین ویرایشگرهای کد در طراحی وب هستند.
هر صفحه ای که با HTML ایجاد میشود، دارای ساختاری مشخص و منظم است. یک سری از تگها در تمام این صفحات تکرار میشوند که در حقیقت میتوان آنها را تگهای جدانشدنی هر سند HTML دانست. تگهای اصلی در تمام صفحات وب عبارتند از:
- doctype html : این تگ به مرورگر میگوید که ما از کدام نسخه HTML استفاده میکنیم.
- تگ HTML : تمام تگهای HTML باید داخل این تگ قرار بگیرند تا به عنوان زبان HTML شناخته شوند.
- تگ head : این تگ به عنوان مغز متفکر صفحات وب شناخته میشود و کارهایی مثل تعامل با موتور جستجو، تعامل با فایلهای CSS و جاوااسکریپت، عنوان صفحه، توضیحات صفحه و غیره را به عهده دارد.
- تگ body : مهمترین تگ HTML است. تمام عناصری که مربوط به ظاهر صفحه هستند باید در این تگ قرار بگیرند. در غیر اینصورت نمایش داده نمیشوند.
مشاهده گر HTML چیست و چگونه به آموزش ما کمک میکند؟
شاید از کامپیوتر شخصی و لپ تاپ خود دور باشید ولی دلتان بخواهد برنامه نویسی HTML تمرین کنید یا حتی روی یک پروژه کار کنید. در چنین شرایطی است که دوست دارید بدانید منظور از مشاهده گر HTML چیست؟ اگر گوشی شما اندرویدی است به کمک یک اپلیکیشن به راحتی میتوانید این کار را انجام دهید.
اپلیکیشنی که راجع به آن حرف میزنیم HTML Viewer نام دارد. این برنامه در google Play Store بیشتر از یک میلیون نصب فعال داشته و امتیاز قابل قبولی از کاربران گرفته است. پس اگر میخواهید در هر جایی که هستید به تمرین زبان HTML بپردازید، همین الان این اپلیکیشن را دانلود کنید.
جمع بندی
اگر طراحی وب شما را به وجد میآورد و دوست دارید برای این کار وقت و انرژی بگذارید، اولین قدم یادگیری HTML است. شما در این مطلب دیدید که HTML چیست و چه کاربردی در دنیای وب دارد و سپس اولین کد HTML خود را نوشتید. اما مثالی که با هم انجام دادیم از شما یک برنامه نویس نمیسازد. شرط لازم برای تبدیل شدن به یک برنامه نویس خبره تمرین مداوم است.
فقط تمرین و تکرار که شما را با فوت و فن کار آشنا کرده و از شما یک برنامه نویس متخصص میسازد. برنامه نویسی HTML شروع کار است و باید این قدمهای اول را محکم بردارید تا زمانی که وارد مباحث پیشرفته وب شدید، به مشکل نخورید.
۶ پاسخ
ممنونم خیلی عالی بود
ازاین همه تلاش که انجام دادین نهایت تشکررودارم.👌👌
ممنون که همراه سوین هاست هستید.
با تشکر دنبال یه سایت مثل شما بودم که بالاخره پیدا کردم.
ممنون محبوبه ی عزیز که ما را همراهی می کنید.
سایت بسیار خوبی است. از آموزشتان بسیار سپاسگزارم.
ممنون سایه ی عزیز که همراه ما هستید.