آموزش زبان اچ تی ام ال ،  HTML چیست؟

آموزش زبان HTML یادگیری طراحی سایت مسیر پرفراز و نشیبی دارد. زمانی که علاقه زیادی برای یادگیری طراحی سایت داشتم سوالات زیادی در ذهن بنده خطور میکرد که مسیر یادگیری را دشوار و سخت کرده بود. هرچند هنوز ابتدای راه یادگیری در زمینه طراحی وب هستم اما سعی میکنم هرآنچه را که یاد میگیرم به مرور با شما دوستان عزیز به اشتراک بگذارم.در واقع دغدغه اصلی همه کسانی که می‌خواهند طراحی سایت را شروع کنند، نداشتن نقشه راه و ندانستن مسیر است. مهمترین سوالی که در ذهن بنده بدون جواب مانده بود و فکر کردن به آنها شروع کار را سخت کرده بود ، این بود که برا یادگیری طراحی سایت باید از کجا شروع کرد؟ مراحل یادگیری طراحی سایت چیست؟این سوال بسیار مهم است، بنابراین باید برای اولین سوالی که برای شروع آموزش طراحی سایت به ذهن افراد می رسد ، پاسخ و مسیر مشخصی پیدا کرد.شما برای قدم گذاشتن در زمینه یادگیری طراحی سایت می توانید از دو روش طراحی سایت استفاده کنید.در واقع در حال حاظر طراحی سایت با دو روش طراحی سایت با کد نویسی و طراحی سات بدون کد نویسی انجام می شود.اما اینکه کدام روش استانداردتر می باشد و کدام یکی بهتر خواهد بود؟ در مقاله دیگری به آن میپردازیم.اما در این آموزش ما قصد داریم طراحی سایت با کد نویسی را آموزش دهیم، که خود این مستلزم گذراندن چندین دوره خواهد بود. در این دوره های رایگان می‌توانید آموزش‌های طراحی سایت ما را دنبال کرده و یک طراح سایت حرفه‌ای شوید.HTMLاولین پروژه طراحی سایت در دنیا در سال 1991 میلادی به پایان رسید که این پروژه بزرگ ، معروف به world wide web که به صورت مختصر توسط تیم برنرز لی w3 نامیده شد.ابتدا باید بدانید که برنامه نویسان یا همان طراحان سایت به دو دسته تقسیم می شود که شما میتوانید هر دسته را جداگانه و به صورت تخصصی ادامه دهید.دسته اول را میتوان Front-End که به آن (Client-Side) برنامه نویسی سمت کاربر گفته می شود.دسته دوم را میتوان Back-End که به آن (Server-Side) برنامه نویسی سمت سرور گفته می شود.البته بعضی از برنامه‌نویسان می‌توانند در هر دو حوزه کار کنند که به آن‌ها برنامه نویسان Full Stack گفته می شود.قسمت ظاهری یک وبسایت یا همان فرانت‌اند، با استفاده از زبان نشانه‌گذاری HTML ایجاد می‌شود. از اچ تی ام ال برای ساختن صفحات استاتیک استفاده می‌شود و به وسیله آن میتوان صفحات وبی ساخت که شامل عکس ، فیلم ،موزیک ، پاراگراف ، جدول و … است، بنابراین اولین مرحله ای که برای طراحی وب باید یاد بگیرید ، فراگیری html است.اگر قصد دارید یک برنامه‌نویس تحت وب شوید کلید آن یادگیری زبان‌ HTML می‌باشد. بزرگترین برنامه نویسان وب، یک روز کار خودشان را با HTML شروع کردند.زبان HTML بسیار ساده و قابل فهم برای انسان می‌باشد و یادگیری آن آسان است، با این حال شما نیاز به تمرین دارید.توجه: زبان HTML در دسته زبان‌های برنامه‌نویسی قرار نمی‌گیرد، و شما با یادگیری این زبان تبدیل به یک برنامه‌نویس نخواهید شد.HTMLبرگرفته از حروف اول Hyper Text Markup Language است که یک زبان برنامه‌نویسی نیست بلکه یک زبان توصیف ساختار صفحات وب که، برای تدوین قالب و طراحی صفحه‌های وب به کار می‌برند. است. یک استانداری است برای ایجاد وب سایت که می توان با استفاده از آن صفحات وب را برای مرورگرها توصیف کرد تا مرورگر کدهای این زبان را به شکل گرافیکی و بصری برای کاربر به نمایش درآورند. مرورگر يا Browser از روي markup tag ها متوجه می شوند كه چگونه بايد صفحه را نمايش بدهند. ترجمه فارسی آن زبان برچسب‌گذاری ابر متن می باشد.تمامی صفحات وبی که شما در اینترنت مشاهده میکنید ، بدون استثنا همگی با html ساخته شده اند. در واقع ساختار اصلی هر سایتی راhtml تشکیل میدهد. البته کاربرد HTML فقط به طراحی صفحات وب خلاصه نمی شود و با آن می توانید اپلیکیشن های موبایل یا دسکتاپ نیز طراحی کنید.باید بدانید html از ابتدای ایجاد تا کنون دارای چند نسخه بوده که در حال حاظر جدیدترین نسخه آن html5 می باشد.به دوره رایگان اموزش HTML5 خوش آمدید. هدف این دوره آموزش مفاهیم مقدماتی در HTML5 است.HTML5 یک استاندارد جدید و نسخه تکامل یافته برای اچ تی ام ال است و هنوز در حال پیشرفت است که در تمام صفحات وب می توان از آن استفاده کرد. به طور کلی تفاوت HTML5 با نسخه های قبلی را می توان در موارد جدید اضافه شده و موارد حذف شده در این نسخه خلاصه کرد. در حال حاظر اکثر مرورگرهای اصلی، بیشتر عناصر و APIهای جدید در HTML5 را پشتیبانی می کنند.همانطور که می‌دانید HTML یک زبان برچسب یا نشانه گذاری است و برای استفاده از آن شما باید به یک مجموعه از تگ‌ها (tag) مراجعه کنید. محتوای یک صفحه وب با این تگ ها (برچسب ها) نشانه گذاری شده و نحوه نمایش آن صفحه برای مرورگرهای وب ، توصیف و تعریف می شود. تمام کدهای مربوط به فایل HTML در بین این تگ ها قرار می‌گیرند و هر کدام از تگ‌ها یک فضای کاری دارند ، یعنی یک سری محتوا را در خود قبول می‌کنند.تگ‌های HTML در دو حالت ارائه می‌شوند. تگ‌هایی که تگ بسته منحصر به فرد دارند و تگ‌هایی که خودشان، به تنهایی بسته می شوند.حالت اول ، تگ ها عناصر محصور شده توسط براکت زاویه < > هستند. تگ ها به صورت باز و بسته بکار میروند که اولین تگ ، تگ شروع و بعدی تگ پایان می باشد. در بین باز و بسته شدن تگ نیز محتوا قرار می‌گیرد.حالت دوم تگ‌ها، تگ‌هایی هستند که نیاز به تگ بستن ندارند. در واقع این تگ‌ها خودشان به صورت خودکار بسته می‌شوند. به این تگ‌ها Self Closing می‌گویند.اعلان <DOCTYPE!>در HTML5 (اچ تی ام ال 5) تنها یک اعلان <DOCTYPE!> وجود دارد و بسیار ساده است. اعلان <DOCTYPE!> قبل از تگ html> > باید اولین چیزی باشد که در سند html شما قرار می گیرد.<DOCTYPE!> یک تگ HTML نیست بلکه یک اعلان است به منظور راهنمایی مرورگر ها می باشد و به مرورگر می گوید از چه نسخه HTML در صفحه استفاده شده است. کنسرسیوم جهانی وب (W3C) به طور جدی توصیه می کند که در صفحات خود از این دستور استفاده کنیم. همیشه اعلان <DOCTYPE!> را به اسناد HTML خود اضافه کنید، تا مرورگر بداند با چه نوع سندی سر و کار دارد.آموزش کامل ساختار بندی یک سند HTMLهر صفحه وب یا هر سند HTML با یک تگ <html> شروع و به یک تگ بسته <html/> ختم می شود. کلا ساختار یک سند HTMLبدین صورت است که که تمامی کدها داخل دو تگ <html> </html> قرار می گیرند. محتوای خارج از این تگ به عنوان کد HTML شناخته نمی‌شود.ساختار صفحه html از دو قسمت تشکیل شده است.یکی تگ head که صفحه html و دیگری تگbody که بدنه صفحه html را تشکیل می دهد..تگ Headهمه ی صفحات یک وب سایت از یک قسمت به نام سر صفحه یا head تشکیل شده اند.این عنصر صفحه حاوی اطلاعات عمومی در مورد صفحه است که این اطلاعات را در اختیار مرورگرها ، موتورهای جستجو ، رباط ها و خزنده های موتور جستجو و .... قرار میدهد. این تگ حاوی المان‌های غیر بصری همچون عنوان صفحه ، کلمات کلیدی ، استایل های خارجی و داخلی ، جاوا اسکریپت های خارجی و داخلی ، آیکون صفحه ، توضیحاتی راجع به سازنده و ... می باشد که کاربران نمی توانند آنها را مشاهده کنند.تگ های که که سرایند head قرار میگیرند عبارتند از:تگ < title>متا تگ ها (Meta Tag)تگ < style>تگ < base>تگ < Script>تگ < noscript>تگ bodyو یک قسمت دیگر به نام body یا بدنه تشکیل شده است. در این نوشته با ساختار بندی سند HTML که به نوعی می توان آن را استخوان بندی کلیه صفحات وب نامید، آشنا می شوید.<Body>: این تگ بدنه وبسایت شما را تعیین می‌کند. در واقع هر چیزی که بین این دو تگ استفاده شود در مرورگر به شما نمایش داده می‌شود. در این قسمت است که ما تصاویر، متن‌ها، لیست‌ها و کلی عنصر دیگر را به وبسایت‌مان اضافه می‌کنیم. پس کار اصلی ما در این دوره پرداختن به این تگ و محتوای میان آن است.در داخل عنصر html دو عنصر اصلی صفحه وجود دارند:عنصر <body> : مشخص کننده بدنه صفحه است و در واقع حاوی اطلاعاتی است که قرار است در پنجره مرورگر نمایش داده شود. این قسمت از تگ <body> و تگ بسته <body/> و ھر چیزی که بین آنهاست تشکیل می شود.معمولا آنچه که در قسمت head صفحه قرار میگیرد در صفحه نمایش داده نمی شود اما ھر آنچه که در قسمت body قرار گیرد در صفحه نمایش داده خواھد شد.دقت داشته باشید که ھر تگی که باز میشود باید درجایی بسته شود. که البته استثنائاتی ھم وجود دارد که بعدا به معرفی آن ها خواهیم پرداخت .ساختار تگ ها:تگ ها از سه بخش تشکیل می شوند:1 . یک علامت کوچکتر (>)2 . نام تگ3 . یک علامت بزرگتر (<)تگ ها معمولا به صورت جفتی به کار می روند و ساختار جدیدی به نام عنصر (element) را تشکیل می دهندیک عنصر از سه قسمت اصلی تشکیل می شود: تگ آغازین، محتوای تگ (که می‌تواند یک متن ساده، یک عنصر دیگر و یا خالی باشد) و تگ پایانی.به ساختار تگ پایانی توجه کنید تفاوت آن با تگ آغازین فقط در “/” است که قبل از نام تگ در تگ پایانی می آید.تگ های پایه ایی HTMLبرای نمایش پاراگراف <p>نمایش پیوند (لینک) <a>تصویر <img>نمایش عنوان ها <h6 > ... <h1>لیست ها <ul> ... <li>نرم افزارهای مورد نیاز برای کدنویسی HTMLنوشتن کدهای HTML نیاز به محیطی داریم که بتوانیم کدهایمان را درون آن بنویسیم.نرم افزارها و ابزارهای بسیار زیاد و گوناگونی برای اینکار وجود دارد که هرکدام امکاناتی خاص را در اختیار شما قرار میدهد. نرم افزارهایی بسیار ساده با حجم چند کیلوبایت، تا گزینه‌های بسیار پیشرفته‌ی چندصد مگابایتی!برای شروع ما از یک ابزار بسیار ساده استفاده میکنیم که در دسترس همه‌ی ما قرار دارد، Notepad ویندوز. این نرم افزار بصورت پیشفرض روی تمام سیستم‌عامل‌های ویندوز از قبل نصب شده است. برای شروع کار فقط کافی است در منوی Start عبارت Notepad رو جستجو کنیم تا یک نرم افزار برای ما باز شود و شروع به استفاده از آن کنیم.اما ابزارهایی وجود دارد که میتوان به کمک آن از کدنویسی لذت برد و کدهایی زیبا و خوانا نوشت و از امکانات فوق العاده زیاد آن ابزارهای استفاده کرد.در هرحال، به بحث اصلی باز می گردیم. نرم افزارهای مورد نیاز برای برنامه نویسی کدهای مورد نیاز در یک طراحی وب سایت شامل موارد زیر می باشد:DreamWeaverFrontPageVisualStudioاینها مهمترین نرم افزارهای مورد نیاز در کد نویسی برای طراحی وب سایت هستند.ویرایشگر HTML چیست؟ویرایشگر HTML ابزاری است که به شما کمک می‌ کند کد HTML را ایجاد و ادیت کنید. ویرایشگر یک ابزار مبتنی بر متن است که به شما اجازه می ‌دهد تا کد منبع خود را مستقیما ویرایش کنید. ویرایشگرهای HTML بخش اصلی توسعه وب هستند و درک روشنی از کدها را به شما می‌دهند. بسیاری از توسعه دهندگان حرفه ‌ای وب به ویرایشگرهای HTML برای نگهداری و ایجاد وب سایت خود وابسته هستند.معروفترین ویرایشگر html می باشد. به شما قابلیت ویرایش صفحه وب سایت رو بدون رویت هیچ کدی می ده و همچنین می تونید در کد نویسی html کار نمایید و یا بین این دو انتخاب نمایید یا همچنین قابلیت ویرایش صفحه رو در هر دو حالت کد و نرم افزاری داره. این نرم افزار دارای پلاگین های بسیاری برای طراحی سایت می باشد.Bluefish++NotepadBluefishSublime TextAtomیک ویرایشگر کامل HTML دارای یک چک کننده املا، چک کننده تعداد خطوط، برجسته کردن و پر رنگ نمودن (highlight) خطاها، auto-complete، پیش نمایش صفحه شامل ویرایشگر تصویری و متن است. مطمئنا، این تنها چند مورد از مواردی است که یک ویرایشگر میتواند انجام دهد. از آنجا که ویرایشگرها انواع زیادی دارند (برای مثال متن، شی و WYSIWYG)، مهم ترین چیز این است که آن ویرایشگری را بیابید که متناسب با کار شما است.شاید بتوان گفت که ویرایشگرها یا همان editor ها دوستانِ جان در جانی برنامه نویسان هستند! چرا که هر برنامه نویس در طول روز بخش زیادی از وقت خود را با آن ها می گذراند. ویرایشگرهای کد نقش بسیار مهمی را در انجام پروژه ها و کدنویسی ها ایفا می کنند و حتی می توانند سرعت کدنویسی را افزایش دهند. در این مطلب سعی شده ۹ تا از بهترین ویرایشگرهای کد html و تحت وب را معرفی کنم.یکی از محبوب ترین و شناخته ترین ویرایشگرهای کد html، نوت پد++ است که ویرایشگر کد رایگان و منبع بازی است که برای کاربرانی که از ویندوز استفاده می کنند، طراحی شده است. این ادیتور کد، در عین حال که برای مبتدیان آسان است، برای حرفه ای ها، پیشرفته و قدرتمند است.انواع ویرایشگر های htmlHTML ویرایشگرهای زیادی دارد که به کمک این نرم افزارها شما به راحتی کدنویسی HTML را انجام می دهید.یکی از قدرتمندترین ویرایشگرهای HTML نرم افزار dreamweaver است. اما پیشنهاد ما این است که اگر مبتدی هستید از این نرم افزار استفاده نکنید و وقتی در html کار بلد شدید سراغ dreamweaver بروید.نرم افزارهای دیگری که کاربردی هستند:Sublime TextMicrosoft WebMatrixفعلا با نرم افزارهای فوق کاری نداشته باشید و پیشنهاد ما این است اگر با ویندوز کار می کنید از نرم افزار و اگر با mac کار می کنید از نرم افزار TextEdit استفاده کنید.با یک مثال نحوه استفاده از notepad رو برای نوشن کدهای html به شما خواهیم گفت:مرحله 1: باز کردن notepadبرای باز کردن notepad در ویندوز 7 یا 10 بر روی منوی start کلیک کنید سپس بر روی All Programs رفته و بعد Accessories و در اینجا notepad را مشاهده می کنید و روی آن کلیک کنید.یا اگر از ویندوز 8 به بالا استفاده می کنید کلمه ی notepad را در منوی start جستجو کنید.ذخیره یا save کردن فایلدر ابتدای مقاله عنوان کردیم که HTML یک سند مبتنی بر متن (Text–based) است که معمولاً با پسوند .htm یا .html نام‌گذاری می شود. و به وسیله برنامه های ویرایش متن، ایجاد یا ویرایش می‌شود. اما در نهایت به جای پسوند txt که مربوط به فایل های متنی ساده است، با پسوند html ذخیره می شود. در این مرحله باید فایل خود را ذخیره کنید بنابراین به منوی فایل notepad رفته سپس بر روی save as کلیک نمایید.تنظیمات را مانند تصویر انجام دهید. دقت کنید پسوند فایل را html قرار دهید برای مثال index .htmlدر صورتی که صفحه وب شما حاوی مطالب فارسی می باشد قسمت Encoding را بر روی Unicode UTF-8 قرار داده ، چون زبان فارسی را پشتیبانی می کند و سپس بر روی دکمه save کلیک نمایید.مرورگرهای وب، که قادر به درک و تفسیر برچسب‌های اچ‌تی‌ام‌ال هستند، تک‌تک آن‌ها را از داخل سند اچ‌تی‌ام‌ال خوانده و سپس محتوای آن صفحه را نمایان‌سازی (Render) می‌کنند. این نکته را هرگز فراموش نکنید که HTML یک زبان برنامه نویسی نیست بلکه یک زبان نشانه گذاری فرامتنی است. با توجه به این توضیحات به سراغ آموزش عملی HTMLدر ویرایشگر Notepad++ می‌رویم.