HTML چیست؟
HTML چیست؟
HTML مخفف Hyper Text Markup Language بوده و در فارسی به آن زبان نشانه گذاری ابرمتن می‌گویند.
دقت کنید که HTML یک زبان برنامه نویسی نیست، بلکه یک زبان نشان‌گذاری یا Markup language به حساب می‌آید.
کدنویسی با HTML قدم گذاشتن در جای پای بزرگان وب و شروع ساخت سایت‌های شگفت‌انگیز است.
زبان نشانه‌گذاری چه تفاوتی با زبان برنامه نویسی دارد؟
زبان برنامه نویسی ابزاری قدرتمند است که به وسیله آن می‌توانیم با کامپیوترها حرف بزنیم.
زبانهای برنامه نویسی به کمک دستورالعمل‌هایی که برای کامپیوتر قابل فهم هستند با آن‌ها ارتباط برقرار کرده
و به طور عمده از ساختارهای کنترلی و شرطی استفاده می‌کنند.
سخت افزار برای این که درست کار کند نیاز به یک سری دستورالعمل دارد.
این دستورالعمل‌ها توسط برنامه نویس و زبانی که برای کامپیوتر قابل فهم باشد، به سخت افزار داده می‌شود.
انواع مختلفی از زبان نشانه گذاری وجود دارد که معروف‌ترین آن 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://faraznetwork.ir">سایت فراز نتورک</a>
تگ‌های HTML در حقیقت همان دستورالعمل‌های این زبان هستند که به مرورگر می‌گویند صفحه مورد نظر از چه عناصری تشکیل شده است.
هر کدام از این Tag معنا و مفهوم خاصی دارند و به شما امکاناتی مانند تغییر شکل ظاهری متن‌ها،
ساخت لیست‌های مختلف و به هم متصل کردن صفحات را میدهند. همچنین از آن‌ها برای کار با صدا، تصویر و غیره استفاده می‌شود.
مزایا و معایب زبان HTML چیست؟
HTML در کنار css و js هسته اصلی وب را تشکیل می‌دهد و یک زبان بسیار مهم در دنیای وب حساب می‌شود.
این زبان مزیت‌ها و محدودیت‌هایی هم دارد که در ادامه به آن‌ها اشاره می‌کنیم و میبینیم دلیل اصلی ماندگاری HTML چیست
و چرا این زبان با تمام مشکلاتش هنوز زبان شماره یک وب به حساب می‌آید. برخی از مهمترین مزایا و معایب این زبان عبارتند از:
مزایای HTML :
- یادگیری آسان و لذت‌بخش
- قابلیت اجرا در تمام مرورگرها
- متن باز و رایگان بودن
- ادغام آسان با زبانهای سمت سرور مثل php
معایب HTML:
- استاتیک بودن و وابستگی به زبانهای سمت سرور برای تعامل با کاربر
- ضعف در پشتیبانی از مرورگرهای قدیمی
- نیاز به طراحی جداگانه هر صفحه به دلیل نبود قواعد منطقی برنامه نویسی
HTML چه رابطه‌ای با زبانهای css و javascript دارد؟
کمتر پیش می‌آید که از HTML صحبت کنیم و ذهنمان به سمت زبانهای css و JavaScript کشیده نشود.
تا اینجای کار فهمیدیم HTML چیست و چرا در طراحی سایت به آن نیاز خواهیم داشت.
اما به این نکته توجه داشته باشید که امروزه HTML به تنهایی کاربرد زیادی ندارد.
چون فقط ساختار صفحه را شکل داده و اجازه اضافه کردن جذابیت‌های ظاهری را نمی‌دهد.
صفحات HTML به تنهایی ارزشی برای انتشار ندارند اما زمانی که در کنار css و JavaScript قرار می‌گیرند،
زیبایی واقعی خود را در طراحی وب نشان میدهند.
به شما پیشنهاد می‌کنیم بعد از این‌که دانستید HTML چیست و به خوبی آن را تمرین کردید، سراغ css و جاوا اسکریپت بروید.
فرانت اند (Front End) به چه معناست؟
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>
<head>
</head>
<body>
</body>
</html>
تگ های html
کمی قبل‌تر درباره تگ‌ها صحبت کردیم و حالا می‌خواهیم به صورت عملی از این تگ‌های HTML استفاده می‌کنیم.
هر تگی که باز می‌کنیم با علامت / بسته می‌شود.
پس تا اینجا، کار پیچیده‌ای انجام نداده و فقط سه تگ HTML و head و body را باز کرده و دوباره بسته‌ایم.
doctype از آن دسته تگ‌ها است که نیاز به بسته شدن ندارد و فقط کافی است در ابتدای سند HTML استفاده شود.
حالا کافی است کدهایی را بنویسیم که خروجی ظاهری داشته تا بتوانیم خروجی کارمان را ببینیم.
می‌خواهیم در صفحه خود عنوان، یک تصویر و در آخر یک پاراگراف نشان دهیم.
کدها را باید داخل تگ body قرار دهیم. برای نشان دادن عناوین در صفحه وب، از تگ‌های H استفاده می‌کنیم.
همینقدر بدانید که شش تگ h وجود دارند و بر اساس اهمیت و اندازه از اعداد 1 تا 6 تقسیم می‌شوند.
برای مثال ما در این بخش از تگ H2 استفاده کنیم:
سرتیترها: تگ‌هایh1 تاh6
در واقع می توان گفت سر تیتر ها عامل بسیاری مهمی می باشند که با رعایت کردن آن ها می توان به سئو سایت کمک کرد.
0<h1>بزرگتر</h1>
1<h2>بزرگ</h2>
2<h3>کمی کوچک</h3>
3<h4>کوچک</h4>
4<h5>ریز</h5>
5<h6>بسیار ریز</h6>
می‌خواهیم آخر کار یک پاراگراف ساده به کاربر نشان دهیم. برای این کار از تگ <p> کمک می‌گیریم.
<p>
فراز نتورک منبعی کامل برای آموزش طراحی وب و زبانهای برنامه نویسی تحت وب
از جمله PHP ،HTML و CSS ، جاوا اسکریپت، Ajax و وردپرس و محلی برای پاسخگویی سوالات شماست
</p>
روش اجرای فایل های HTML
فایل های HTML برای اجرا شدن به هیچ تکنولوژی خاصی نیاز ندارد.
شما برای اجرای فایل های HTML فقط نیاز به یک مرورگر دارید که از HTML پشتیانی کند
و تمام مرورگرها این کار را برای شما انجام میدهند!
فرقی نمیکند از گوگل کروم استفاده میکنید یا فایرفاکس، شاید هم مرورگر شما سافاری یا اینترنت اکسپلورر باشد.
در هر صورت شما میتوانید کدهای HTML خود را بنویسید و آن‌ها را اجرا کنید.
جمع بندی
اگر طراحی وب شما را به وجد می‌آورد و دوست دارید برای این کار وقت و انرژی بگذارید، اولین قدم یادگیری HTML است.
شرط لازم برای تبدیل شدن به یک برنامه نویس خبره تمرین مداوم است.
فقط تمرین و تکرار که شما را با فوت و فن کار آشنا کرده و از شما یک برنامه نویس متخصص می‌سازد.
برنامه نویسی HTML شروع کار است و باید این قدم‌های اول را محکم بردارید تا زمانی که وارد مباحث پیشرفته وب شدید، به مشکل نخورید.
جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.
جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.
نویسنده: حانیه گل لاله کرمانی
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.