برای شروع طراحی وب با HTML به چه ابزارهایی نیاز داریم؟

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

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

کدهای HTML خودمان را کجا بنویسیم؟

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

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

برای شروع ما از یک ابزار بسیار ساده استفاده میکنیم که در دسترس همه‌ی ما قرار دارد، Notepad ویندوز. این نرم افزار بصورت پیشفرض روی تمام سیستم‌عامل‌های ویندوز از قبل نصب شده است. برای شروع کار فقط کافی است در منوی Start عبارت Notepad رو جستجو کنیم تا یک نرم افزار برای ما باز شود و شروع به استفاده از آن کنیم.

ابزارهای پیشرفته کدنویسی چطور میتوانند به ما کمک کنند؟

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

اما ابزارهایی وجود دارد که میتوان به کمک آن از کدنویسی لذت برد و کدهایی زیبا و خوانا نوشت و از امکانات فوق العاده زیاد آن ابزارهای استفاده کرد.

به ابزارهای حرفه‌ای که در کدنویسی به ما کمک میکنند و ویژگی‌ها و امکانات زیاد و حرفه‌ای را در اختیار ما قرار میدهند، IDE یا Integrated development environment یا «محیط توسعه یکپارچه» میگویند. این محیط‌ها غالبا نرم‌افزارهایی هستند که به ما در بهتر نوشتن کدها کمک میکنند.

برخی از ویژگی‌هایی که این نرم افزارها در اختیار ما قرار میدهند:

• امکان رنگی کردن بخش‌های مختلف کد، برای درک و خوانایی بهتر کد‌ها
• نشان دادن خطاها و اشتباهات کدنویسی، در همان لحظه‌ی نوشتن کد
• کمک به افزایش سرعت کدنویسی با ویژگی تکمیل خودکار یا Auto Complete
• ایجاد فرورفتگی در کدها برای افزایش خوانایی آن

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

ما در این آموزش با Notepad ویندوز کار میکنیم، زیرا قرار نیست کدهایی که مینویسم طولانی یا خیلی پیچیده باشد. اما برای اطلاعات بیشتر در خصوص IDE ها میتوانید از آموزش تفاوت IDE و Text Edit استفاده کنید.

فرمت فایل‌های HTML چیست؟

بعد از اینکه کدهایمان را در Notepad نوشتیم، باید کدهایمان را ذخیره کنیم تا بتوانیم آن‌را اجرا کنیم.

فایل‌های HTML فرمت خاص خودشان را دارند. باید کدهایمان را با فرمت HTML ذخیره کنیم تا بتوانیم نتیجه و خروجی آن‌ها را ببنیم.

برای فایل‌های HTML، دو فرمت .html و .htm استفاده میشود. اما فرمت .html مرسوم‌تر است و در بیشتر جاها از این فرمت استفاده میشود. ما هم در ادامه از فرمت .html استفاده میکنیم تا بتوانیم خروجی کدهایمان را ببینیم و از نتیجه لذت ببریم.

ذخیره سازی فایل HTML و آماده سازی برای اجرا

برای شروع، فقط کافی است که بعد از باز کردن Notepad، خط زیر را در آن بنویسیم:

HTML Test Code From Yadify.com

سپس از منوی File، گزینه Save as رو انتخاب کنیم. سپس برای فایل‌مان یک نام (مثلا test) انتخاب میکنیم و در انتهای آن .html را اضافه میکنیم و در جایی که دسترسی به آن راحت است، مثلا دسکتاپ، فایل‌مان را ذخیره میکنیم.

الان در دسکتاپ خود فایلی با نام test.html داریم. اگر این فایل را با یک مرورگر، مثلا کروم یا فایرفاکس باز کنیم، میتوانیم محتویات اولین کدی که نوشتیم را ببینیم.

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

کدهای نوشته شده را چطور اجرا کنیم؟

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

روش کارمان هم به این صورت است که کدهایمان را در Notepad (و یا ویرایشگر متنی دیگری) مینویسیم، آن‌را با روشی که در بالاتر گفتیم ذخیره میکنیم و سپس فایل ذخیره شده را با مرورگر خودمان باز میکنیم.

کدام مرورگر را برای اجرای کدهای HTML انتخاب کنیم؟

اینکه کدام مرورگر را برای اجرای کدهایمان انتخاب کنیم، کاملا سلیقه‌ای است. برخی از گوگل کروم (Google Chrome) خوششان می‌آید و برخی دیگر با فایرفاکس (Firefox) ارتباط بهتری میتوانند برقرار کنند.

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

مرورگرهای بسیاری وجود دارند که میتوان از آن‌ها برای اجرای کدهای HTML استفاده کرد، اما پیشنهاد ما استفاده از یکی از این مرورگر معروف یعنی کروم یا فایرفاکس می‌باشد. زیرا مرورگرهای حرفه‌ای و ثابت شده‌ای هستند و همیشه درحال بروزرسانی و حرفه‌ا‌ی‌تر شدن می‌باشند. مرورگرهای متفرقه دیگر ممکن است کدهای شما را به درستی نمایش ندهند و برای شما در حین طراحی وب مشکل ساز باشند! مطالعه‌ی مقاله‌ی بهترین مرورگر اینترنتی برای طراحی و برنامه نویسی وب نیز میتواند بسیار مفید باشد.

اینترنت اکسپلورر (Internet Explorer) را فراموش کنید!

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

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

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

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

تا اینجا با مقدمات طراحی وب با HTML آشنا شدیم و یاد گرفتیم:

• کجا کدهای HTML خودمان را بنویسیم
• چطور و با چه فرمتی فایل‌های HTML را ذخیره کنیم
• چطور فایل‌های HTML خودمان را باز کنیم
• کدام مرورگر را برای نمایش کدهای HTML خود انتخاب کنیم

در ایستگاه بعدی بصورت بسیار جزئی در خصوص HTML صحبت میکنیم و معنی خط به خط کدهایی که در این آموزش نوشتیم را یاد میگیریم.