آموزش HTML و CSS و JS قسمت اول: مقدمه + ویدیو

قسمت اول

نوشته شده توسط: مهندس مهدی موسوی

بخش برنامه نویسی و نرم افزار|طراحی رابط کاربری وب

قسمت های دیگر این مطلب:

آموزش HTML و CSS و JS قسمت اول: مقدمه + ویدیو
آموزش HTML و CSS و JS قسمت دوم: شروع قدرتمند با HTML
آموزش HTML و CSS و JS قسمت سوم: شروع با CSS
آموزش HTML و CSS و JS قسمت چهارم: HTML و CSS پیشرفته
آموزش HTML و CSS و JS قسمت پنجم: آشنایی با برنامه نویسی JavaScript
آموزش HTML و CSS و JS قسمت ششم: شروع قدرتمند با JQuery

HTML و CSS و JavaScript را با هیتوس آسان فرا بگیرید. برای کامل شدن آموزش‌های هیتوس در این مطلب قصد داریم یک آموزش ساده و کاربردی از HTML و CSS و JavaScript ارائه دهیم. با هیتوس همراه باشید.

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

اگر می‌خواهید یک سایت برای خود ثبت کنید به سه مورد زیر نیاز دارید:

دامنه
صفحات وب
فضای وب

دامنه: آدرس‌های اینترنتی هستند که کاربران با وارد کردن آن‌ها در مرورگر می‌توانند وارد سایت شما شوند. دامنه‌ها را شرکت‌های ثبت دامنه برای شما ثبت می‌کنند فقط تنها کافی است شما از ثبت نبودن دامنه مورد نظر توسط فرد دیگر اطمینان حاصل کنید.

صفحات وب: صفحاتی که با html طراحی می‌شوند و به بازدید کنندگان سایت این امکان را می‌دهند در سایت به کسب اطلاعات و یا دریافت خدمات بپردازند. صفحات وب با html پیاده سازی می‌شوند و با css شکل و رنگ می‌گیرند و با javascript حرکت می‌کنند. (اصلا نگران نباشید در آینده شما را بیشتر با این مفاهیم آشنا می‌کنیم)

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

برای فهم موارد بالا یک مثال می‌آوریم: فرض کنید یک شرکت برای اطلاع رسانی قصد داشته باشد یک تلفن در اختیار مشتریان خود بگذارد. در اولین مرحله باید یک شماره تلفن برای خود ثبت کند، این طبیعی است که این شماره تلفن تنها به این شرکت اختصاص دارد و نمی‌توان شماره‌ای را در خواست کرد که به دو نفر اختصاص داشته باشد. شماره تلفن در مثال ما حکم دامنه را دارد.

در مرحله بعد باید شما یک اپراتور داشته باشید که به تلفن‌ها پاسخ دهد تا مشتریان بتوانند به پاسخ سوالات خود برسند که این اپراتور حکم صفحه وب را دارد.

در آخرین مرحله باید تلفن را در جایی نصب کنید و اپراتور با نشستن پشت تلفن به تماس‌های رسیده پاسخ دهد. مکانی که اپراتور در آن می‌نشیند در واقع همان فضای وب است.

حال اگر تا این جا مطالب را خوب خوانده اید می‌دانید برای راه اندازی خود به دامنه، برنامه نویسی صفحات وب و فضا نیازمندید.

در ادامه قصد داریم به مبحث اصلی این مطلب یعنی آموزش HTML بپردازیم.

HTML چیست؟

html و یا Hypertext Markup Language یک زبان نشانه گذاری متن است که برای طراحی صفحات وب استفاده می‌شود. html یک زبان خیلی ساده است و یادگیری آن زمان زیادی طول نمی‌کشد.

ساختار صفحات html به شکل زیر است:

<html>
   <head></head>
   <body></body>
</html>

اساسا اکثر المان‌های html درون دو تگ قرار می‌گیرند. مثلا ساختار صفحه فوق بین دو <html> و </html> قرار گرفته است.

کدهایی که بین <head> و </head> قرار می‌گیرند در صفحه وب قابل مشاهده نیستند ولی می‌توانند بر ساختار صفحه قرار بگیرند.

هر چیزی که بین <body> و </body> قرار بگیرد در صفحه وب مشاهده خواهد شد.

نکته: البته تگ‌هایی نیز داریم که از یک بخش ساخته شده اند.

برای ساخت یک صفحه ساده کدهای زیر را در یک فایل note می‌نویسیم:

<html>
<head></head>
  <body>Hello World!</body>
</html>

صفحه فوق را ذخیره کرده و پسوند فایل آن را به .html تغییر می‌دهیم. اگر پسوند فایل را مشاهده نمی‌کنید به مسیر Folder Option رفته و از برگه view تیک Hide extensions for known file types را بردارید.

روی فایلی که تولید کردیم دو بار کلیک کرده و صفحه‌ای مانند زیر مشاهده می‌کنیم:

آموزش html

تبریک می‌گم اولین صفحه وب خود را تولید کردید.

CSS چیست؟

css یا Cascading Style Sheets یک زبان برای دادن ویژگی‌های بصری به صفحات وب است. بدون css نمی‌توان به المان‌های موجود در صفحه رنگ، اندازه و جهت داد. به عنوان مثال داریم:

<html>
<head></head>
  <body style="color: red;">Hello World!</body>
</html>

اگر خوب دقت کنید به تگ body خاصیت style="color: red;" دادیم. style اعلام می‌کند که قصد داریم خصوصیت css به المان جاری بدهیم، color اعلام می‌کند که قصد داریم یک رنگ به المان جاری اختصاص دهیم. به جایگذاری علامت‌های = و " و : و ; دقت کنید.

نتیجه کد بالا را در پایین مشاهده کنید:

آموزش css

JavaScript چیست؟

کدهای html و css ایستا هستند و بعد از این که یک فایل صفحه را ایجاد می‌کنند نمی‌توان آن‌ها را تغییر داد. یک زبان به نام JavaScript پایه گذاری شد تا بتوان به صفحات خواص ویژه‌ای از قبیل تغییر رنگ، نمایش پیغام و یا حرکت داد. به عنوان مثال در مثال بالا و درون تگ‌های <head> و </head> از یک کد جاوا اسکریپت استفاده می‌کنیم:

<html>
<head><script>alert("Hello from JavaScript!")</script></head>
  <body style="color: red;">Hello World!</body>
</html>

اگر صفحه فوق را ذخیره و اجرا کنید خواهید دید حین اجرا پیغام Hello from JavaScript! برای شما نمایش داده می‌شود. مانند زیر:

آموزش javascript

محیط توسعه

تقریبا برای برنامه نویسی به هر زبانی نیاز به محیط توسعه اختصاصی دارید ولی HTML و CSS و JavaScript را می‌توانید بدون محیط توسعه اختصاصی و در NotePad نیز توسعه دهید.

البته نرم افزاری وجود دارد به نام Notepad++ که هم رایگان است و هم هنگام کد نویسی شما را راهنمایی می‌کند. برای دانلود این نرم افزار از لینک زیر استفاده کنید:

دانلود ویرایشگر notepad++

اصطلاحات ضروری

سورس کد: در برنامه نویسی به هر زبانی ابتدا یک سری دستورات برنامه نویسی نوشته می‌شود، سپس این دستورات برنامه نویسی در حین اجرا تبدیل به یک خروجی می‌شوند. اصطلاحا به این دستورات برنامه نویسی سورس کد یا به اختصار سورس گفته می‌شود. در مرورگرهای Firefox و Chrome و Explorer با استفاده از کلیدهای ترکیبی Ctrl+U می‌توانید سورس کد صفحه جاری و یا دستورات HTML مورد استفاده در آن صفحه را مشاهده کنید.

میزان فضا: وقتی یک هاست تهیه می‌کنید فضای آن را بر اساس نیاز خود تعیین می‌کنید. میزان فضای وب به معنای حجم اطلاعاتی است که قصد دارید در سایت خود بارگذاری کنید. اگر سایت شما تنها متن و عکس‌های کوچک داشته باشد برای شروع به چیزی بیشتر از 500 مگابایت نیاز ندارید.

پهنای باند: پهنای باند به معنای میزان دریافت اطلاعاتی است که کاربران از سایت شما انجام می‌دهند. توجه کنید که حتی مشاهده متن و عکس‌های سایت شما نیز از شما پهنای باند کم می‌کند. مثلا اگر صفحه شما ده عکس 100 کیلوبایتی دارد و حجم متن آن 10 کیلوبایت باشد هر کاربر حین بازدید از سایت شما 1010 کیلوبایت پهنای باند به خود اختصاص می‌دهد. همانطور که شما وقتی به اینترنت متصل می‌شوید شرکت ADSL و یا اپراتور سیم کارت پول فضایی که استفاده می‌کنید را از شما به عنوان پیش پرداخت دریافت می‌کند شرکت‌های فروشنده فضای وب نیز این پول را از شما می‌گیرند.

سرور: دستگاه بزرگی است که به تعداد زیادی سایت خدمات می‌دهد و در واقع فضایی که شما می‌خرید یک فضای اختصاصی از یک سرور بسیار بزرگ است.

کلاینت: به کاربرانی می‌گویند که قصد دارند از سرور خدمات دریافت کنند.

دامنه IR یا COM: حتما توجه کرده اید که در انتهای دامنه‌های اینترنت پسوندی به شکل ir یا com یا net وجود دارد. این پسوند‌ها تفاوت خاصی از نظر کارایی با هم ندارند، ولی اگر شما قصد راه اهدازی سایتی فقط برای مصارف داخل کشور دارید ترجیحا از ir استفاده کنید و اگر یک تجارت بین المللی دارید از دامنه‌هایی نظیر com و یا net و org استفاده کنید.

تگ ها: html css javascript