آشنایی با زبان برنامه نویسی HTML
HTML به عنوان یک “زبان نشانه‌گذاری” استاندارد برای ساخت صفحات وب، از اصل وجود دارد. این زبان ساده با ساختار شفافی برخوردار است و حتی برای افرادی که تازه قصد یادگیری ساخت وبسایت را دارند، بسیار آسان است. برای بسیاری از افراد، سوال “HTML چیست؟” ممکن است مطرح شود، زیرا میتوان آن را پایه و اساس وب و حتی اینترنت در نظر گرفت. در این مقاله از پورتال جامع مهندسین ایران، تلاش شده است تا مفاهیم ابتدایی HTML به طور کامل معرفی شده و راهنمایی لازم برای شروع و یادگیری زبان برنامه نویسی HTML ارائه شود.
HTML چیست؟
HTML مخفف ( Hyper Text Markup Language ) یک زبان نشانه گذاری است، به این معنی که بخش های مختلف توسط اجزایی به نام تگ از هم جدا شده، که هر کدام دارای کاربرد و خواص مربوط خود هستند. این تگ‌ها به مرورگر اعلام می‌کنند، که هر بخش از صفحه چه نوع عنصری است و باید به چه صورت نمایش داده شود.
تاریخچه زبان HTML
برای درک منشاء HTML، باید یک سفر کوتاه به سال ۱۹۹۱ داشته باشیم. در آن زمان، آقای تیم برنرز-لی (Tim Berners-Lee) با کار خود بر روی ۱۸ برچسب ساده یا تگ شروع کرد و اولین نسخه از HTML را طراحی کرد. HTML به تدریج پیشرفت کرد و در هر نسخه، امکانات بیشتری را به طراحان در قالب تگ‌های کاربردی‌تر ارائه داد.
به این ترتیب، این زبان برنامه نویسی مشکلات قبلی خود را به تدریج برطرف کرد. HTML4 در سال ۱۹۹۹ معرفی شد و برای مدت زمان طولانی توسط طراحان وب استفاده شد، تا زمانی که با معرفی HTML5 بزرگترین تحول تاریخ HTML رخ داد. این نسخه از HTML به طراحان وب در طراحی وب‌سایت‌ها کمک بیشتری کرد.
آیا HTML زبان برنامه نویسی است؟
باید توجه کنید که HTML یک زبان نشانه‌گذاری (Markup) است و نه یک زبان برنامه نویسی. HTML برای تعیین ساختار محتوا استفاده میشود و شامل منطق برنامه نویسی یا عبارات شرطی مانند If و Else نمی‌شود. در HTML نمی‌توانید متغیر تعریف کنید یا توابع بنویسید. امکان مدیریت رویدادها یا انجام وظایف در HTML وجود ندارد. از طریق HTML نمی‌توانید داده‌ها را تغییر دهید یا آنها را ویرایش کنید.
زبان نشانه گذاری HTML
HTML یک زبان نشانه‌گذاری است که داده‌ها را در داخل تگ‌های HTML قرار می‌دهد و آنها را «علامت‌گذاری» می‌کند. این نشانه‌گذاری هدف داده را تعریف و تفسیر می‌کند. سپس، مرورگر وب کدهای HTML را می‌خواند و این کدها مکان مؤلفه‌هایی مانند عناوین، پاراگراف‌ها، لینک‌ها و سایر موارد را برای مرورگر تعیین می‌کنند. در واقع، HTML داده را به مرورگر توصیف می‌کند تا مرورگر وب بتواند داده‌ها را به شکل مناسبی نمایش دهد.
همراه با HTML و برای تکمیل آن، میتوان از فناوری‌هایی مانند CSS و زبانهای اسکریپت نویسی مانند جاوا اسکریپت برای ایجاد وب‌سایت‌ها استفاده کرد. اما به دلیل استفاده رایج عبارت “زبان برنامه نویسی HTML” و ترجیح اکثر افراد برای استفاده از این اصطلاح، در این مطلب نیز از همین عبارت استفاده شده است.
زبان برنامه نویسی HTML چیست ؟
HTML در واقع یک زبان نشانه‌گذاری استاندارد است که برای ایجاد مستنداتی استفاده میشود که در مرورگر وب نمایش داده می‌شوند. HTML یک کد است که برای ساختاردهی به محتوا در صفحات وب استفاده میشود. به عنوان مثال، محتوا ممکن است شامل پاراگراف‌ها، لیست‌های نشانه‌دار (Bullet Points) یا استفاده از تصاویر و جداول داده باشد.
HTML به عنوان یک زبان کامپیوتری طراحی شده است و برای ایجاد صفحات وب استفاده میشود. این صفحات وب از طریق اینترنت به همگان دسترسی پذیر هستند.
معرفی نسخه های HTML
HTML تاکنون از زمان ایجاد خود تا به امروز چندین نسخه مختلف داشته است. در ادامه، ورژن‌های اصلی HTML را معرفی می‌کنم:
HTML 2.0
بنیاد IETF این نسخه را در سال ۱۹۹۵ استاندارد سازی نمود که اولین حالت واقعی با ویژگیهای HTML در همان سال رقم خورد.
HTML 3.2
این نسخه از HTML پیشنهاد W3C ( کنسرسیوم جهانی وب ) در سال ۱۹۹۶ بود که در ۱۴ ژانویه ۱۹۹۷ منتشر شد و چون هماهنگی زیادی با مرورگرها در سیستم عامل ها داشت که قادر بود رضایت همه کسانی که در زمینه وب سرمایه گذاری کرده بودند را به خود جلب نماید.
به همین منظور برای هدف های زیادی در وب توسعه یافت ، از ویژگی های این نسخه اضافه شدن اپلتها ، جدول ها ، بکار بردن گرافیک ها و رنگ ها که قابلیت بهره برداری بیشتری را داشته باشد و در این نسخه فرمول های ریاضی بطور کامل بکار میرفت اما برای ایجاد قالب بندی صفحه ، بایستی از تگ ها و یا کدنویسی بیشتری استفاده می شد که صفحاتی که به این حالت ایجاد می شدند بارگذاری آن کاهش و حجم صفحات بسیار افزایش پیدا میکرد.
HTML 4.0
به طور کلی این نسخه با صفحه شیوه ها ( StyleSheets ) ، اسکریپت ها ( Scripting ) ، فریم ها ( Frames ) ، تعبیه آبجکت ها ( embedded Objects ) توسعه یافت و بازده ایی آن بیشتر در فرم ها و جدول ها معرفی گردید ، جستجوی بهتری از متون چپ به راست و راست به چپ را فراهم نمود ، تا همه مردم دنیا با هر زبانی و در هرجا بتوانند این زبان را منتقل کنند و افراد کم توانان تر هم استفاده از وب را تجربه کنند.
HTML 4.0.1
در بیست و چهارم دسامبر سال ۱۹۹۹ برای رفع برخی از اشکالات که در نسخه قبلی بوجود آمده ، کمی با نسخه قبلی خود HTML 4.0 تفاوت دارد اما هماهنگی زیادی با نسل های جدید و زبان وب را دارا است.
ویژگیهای HTML4 که به چهار دسته تقسیم میشود:
- تایید از انواع زبان ها و کاراکتر ها :
مهمترین ویژگی HTML4 پشتیبانی از انواع زبان هاست که تا قبل از آن فقط امکان ایجاد به زبانهایی مثل انگلیسی و فرانسوی ( چپ به راست ) بود اما این نسخه امکان استفاده از زبانهای عربی و فارسی ( راست به چپ ) را نیز فراهم کرده است. - استفاده از برگه های سبک آبشاری :
از ویژگی های آن میتوان به Stylesheet ها برای کنترل و نمایش صفحات توسط طراحان و کاربران اشاره کرد که تا قبل این نسخه طراحان امکانات کمتری بر نحوه نمایش صفحات خود را داشتند. - جای دادن زبان های اسکریپتی :
از دیگر امکانات آن میتوان به استفاده زبانهای اسکریپتی در محتویات صفحات HTML برای ایجاد صفحات پویا اشاره نمود.با استفاده از این زبان می شود بر نحوه عناصر موجود در یک صفحه ( Web Page ) کنترل داشت و معیین کرد که عنصرها در مقابل رفتارهای کاربر چه واکنشی را از خو نشان دهد. - جداول :
از دیگر کاربرد های آن میتوان بکارگیری جدول ها اشاره نمود که برای نظم دهی و قالب بندی اطلاعات مورد استفاده قرار میگیرد.
HTML5
این نسخه یک زبان نشانه گذاری است و امکاناتی که در نسخه قبلی موجود بود در این نسخه بهبود یافته است و همچنین API های اسکریپت نویسی جدیدی نیز به آن اضافه گردیده
و این نسخه شامل تمامی عنصرهای HTML4 و ۱.۰ میباشد که اصول پایه ایی مدنظر گرفته شده است تا با تمامی پلتفرم ها به خوبی کار کند. وبسایتهای امروزی شبیه به یک نرم افزار عمل می کنند و بسیاری از توسعه دهندگان وب نیز به سمت وب سایت با این اصول پیش میروند.
از این رو سمت و سوی HTML5 نیز در راستای همین خواسته هاست که در نهایت این سند با هم ادغام شدند تا چیزی ایجاد شود که ما در حال حاضر آن را با نام HTML5 میشناسیم.
از ویژگیهای HTML5 میتوان به راحتی استفاده اینترنت در گوشی و تبلت ها توسط کاربران ، استفاده از ویدئو و صوت در سایت و… را نام برد.
در سری آموزش های بعدی که در خصوص HTML خواهد بود بیشتر تلاشمان این است که بروی آخرین تکنولوژی موجود یعنی HTML5 تمرکز کنیم و موارد و نکات کلیدی استفاده از آن را ارایه خواهیم کرد.
HTML چطور کار می‌کند؟
HTML با استفاده از عناصر مختلف مانند پاراگراف، لیست، عکس، صوت و غیره، چهارچوب اصلی صفحات وب را ایجاد می‌کند. به زبان ساده، HTML مانند بدنه اصلی یک صفحه وب است. حالا که با وظیفه اصلی HTML آشنا شدیم، بیایید به بررسی یک مثال بپردازیم.
اگر HTML را مانند یک ساختمان در حال ساخت تصور کنیم، میتوان گفت مهندس عمران پی ساختمان را بنا می‌کند و اسکلت آن را می‌سازد. همچنین، مهندس معماری مسئول زیباسازی ساختمان است و همانند کسی که با استفاده از CSS به طراحی ظاهری ساختمان می‌پردازد.
در دنیای وب، عموماً کدنویسی HTML و CSS به عهده یک فرد قرار میگیرد. فایل‌های HTML با پسوند .htm یا .html ذخیره می‌شوند. این فایل‌ها تقریباً توسط همه مرورگرهای وب پشتیبانی می‌شوند و به راحتی قابل نمایش هستند. زمانی که یک صفحه HTML را رندر می‌کنیم، عناصر داخل آن شامل کدها، تصاویر، انیمیشن‌ها، ویدئوها و غیره به صورت قابل مشاهده برای کاربران تبدیل می‌شوند.
تگ چیست؟
HTML با استفاده از برچسب‌ها (Tags) عناصر مختلف را در کنار هم قرار می‌دهد و هر کاربر می‌تواند با توجه به نیاز خود، از آنها استفاده کند. شاید بپرسید که تگ چیست؟ تگ‌ها عناصری هستند که وظایف متفاوتی دارند و با استفاده از آنها کارهای مختلف را آغاز و به پایان می‌رسانیم. به عنوان مثال، برای نوشتن پاراگراف‌ها در زبان HTML از تگ p استفاده میشود و زمانی که پاراگراف به پایان می‌رسد، تگ نیز بسته میشود. همچنین، برای نمایش لینک‌ها در صفحات وب از تگ a استفاده میشود.
ساختار یک صفحه وب ساده
یک صفحه وب ساده متشکل از تگ هایی (Tag) برای قرار گیری عناصر سازنده صفحه وب می باشد. تگ های اصلی وب عبارتند از: تگ عنوان (HTML Headings)، تگ پاراگراف (HTML Paragraphs)، تگ لینک (HTML Links)، تگ تصویر (HTML Images).
– تگ ها با علامت <Key words> تعریف می شوند. تگ ها شامل تگ آغازی و تگ پایانی می باشند. تگ آغازی به صورت <Key words> و تگ پایانی <Key words/> به صورت می باشد. در تگ پایانی علامت / قبل از کلمه کلیدی تگ نشان دهنده پایان تگ می باشد.
تگ عنوان (HTML Headings)
از این تگ برای نمایش عناوین در سایزهای مختلف استفاده میشود. این تگ شامل ۶ سایز مختلف از <h1> تا <h6> می باشد.
مثال:
| ۱ ۲ ۳ | <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> |
تگ پاراگراف (HTML Paragraphs)
تگ آغازین یک پاراگراف <p> می باشد. تگ پایان <p/> است.
مثال:
| ۱ ۲ | <p>This is a paragraph.</p> <p>This is another paragraph.</p> |
تگ لینک (HTML Links)
تگ آغازین لینک : <a>
تگ پایان لینک: </a>
مثال:
| ۱ | <a href=“http://www.pjmi.ir/”>This is a link</a> |
تگ تصویر (HTML Images)
تگ: <img>
نکته: تگ تصویر بر خلاف تگ های قبلی تنها دارای یک تگ <img> می باشد.
مثال:
| ۱ | <img src=“/logo.jpg” width=“۱۰۴” height=“۱۴۲”> |
دسترسی یکجا به لیست کامل تگ‌های HTML
برنامه‌نویسی نیازمند تمرین و تمرین است و زمانی که از کدنویسی استفاده می‌کنید، باید این مسیر را بدون انتقال مستقیم طی کرده و به تقویت مهارت‌های خود ادامه دهید. فقط خواندن لیست کامل تگ‌های HTML به تنهایی کافی نیست، زیرا پس از شناخت تگ‌ها، شما باید هر تگ را تست کرده و با یکدیگر ترکیب کنید تا ببینید چگونه در کنار هم عمل می‌کنند. بنابراین، زمانی که شروع به یادگیری می‌کنید، مناسب است لیست تگ‌های HTML را در دسترس خود قرار دهید تا بتوانید آنها را به خاطر بسپارید و به صورت عملی از آنها استفاده کنید.
مزایا و معایب HTML چه هستند ؟
HTML دارای مزایا و معایبی است که در زیر به آنها اشاره می‌کنم:
مزایا HTML:
۱. سادگی: HTML یک زبان ساده و آسان برای یادگیری و استفاده است. این زبان از قواعد ساده تشکیل شده است و برای شروع یادگیری برنامه‌نویسی وب بسیار مناسب است.
۲. سازگاری: صفحات HTML تقریباً توسط همه مرورگرها به خوبی پشتیبانی می‌شوند. این به معنی این است که صفحات وب شما قابل دسترسی و مشاهده بر روی انواع دستگاه‌ها و مرورگرها خواهند بود.
۳. ساختار سلسله مراتبی: HTML مبتنی بر ساختار سلسله مراتبی است که به شما اجازه می‌دهد عناصر را به شکل منطقی و سازمان‌دهی شده در صفحه قرار دهید. این ساختار سلسله مراتبی به موتورهای جستجو کمک می‌کند تا محتوای صفحه را بهتر فهرست‌بندی کنند.
۴. انعطاف‌پذیری: HTML قابلیت انعطاف‌پذیری بالا دارد و به شما امکان می‌دهد ساختار و محتوای صفحات را به دلخواه خود تعریف کنید و سبک‌بندی‌های مختلفی را اعمال کنید.
معایب HTML :
۱. محدودیت‌های ظاهری: HTML به تنهایی قادر به ایجاد طرح‌بندی و ظاهر پیچیده‌ای نیست. برای طراحی بصری پیشرفته‌تر نیاز به استفاده از CSS و فنون دیگر مانند JavaScript دارید.
۲. کدنویسی دستی: برای ایجاد صفحات HTML پیچیده، نیاز به کدنویسی دستی و تایپ دقیق تگ‌ها و ویژگی‌ها دارید. این ممکن است زمان‌بر و خسته‌کننده باشد، به ویژه برای صفحات بزرگ و پیچیده.
۳. عدم پشتیبانی از عملکردهای پیشرفته: HTML تنها زبان متنی است و قادر به انجام عملکردهای پیچیده مانند پردازش داده‌ها و تعامل با کاربر نیست. برای این کار نیاز به استفاده از زبان‌ها و فنون برنامه نویسی دیگر مانند JavaScript دارید.
۴. عدم ذخیره‌سازی وضعیت: HTML به طور پیش فرض اطلاعات وضعیت صفحه را در حافظه نگه نمی‌دارد.
