مفهوم وب، در سال 1962 توسط تیم برنزلی ابداع شد و هدف آن ایجاد بستری جهت نمایش اطلاعات بدون در نظر گرفتن محدودیت جغرافیایی بود. پیشرفت وب به قدری سریع و غیر قابل پیش بینی بود که امروزه زندگی بدون در نظر گرفتن آن امری محال می باشد. با گسترش روز افزون اینترنت، امروزه داشتن یک وبسایت برای کسب و کارهای کوچک و بزرگ امری ضروری بوده و یادگیری دانش طراحی صفحات اینترنتی به شغلی محبوب و پر درآمد تبدیل شده است.
مفاهیم اولیه
طراحی وب سایت های اینترنتی یکی از مشاغل و تخصص های مهم در حوزه کامپیوتر می باشد که با یادگیری آن می توانید علاوه بر کسب درآمد خوب، موقعیت شغلی مناسبی را نیز برای خود فراهم کنید و حتی پا را فراتر گذاشته و اقدام به ساخت یک وبسایت خلاقانه برای پیاده سازی ایده های خود نمایید. برای شروع به کار می بایست تعاریف اولیه ای وبسایت را بدانیم.
Web page (صفحه وب): به هر صفحه اینترنتی که می تواند شامل متن، تصویر، ویدئو، فایل صوتی و ... باشد، web page گفته می شود.
Website (وبسایت): به مجموعه ای از web page های متصل و مرتبط به یکدیگر، وبسایت گفته می شود.
Link (لینک): پیوند میان یک صفحه و بخش دیگری از همان صفحه، یا صفحه ای دیگر، لینک (یا hyperlink) نامیده می شود.
URL: هر منبع اینترنتی (صفحه وب، عکس، ویدئو و ...) دارای آدرس منحصربفرد می باشد که به آن url گفته می شود. هر url از چهار بخش زیر تشکیل شده است.
پروتکل: مجموعه ای از قوانین و مقررات می باشد که بر نحوه انتقال اطلاعات نظارت می کند. برای مشاهده صفحات اینترنتی از پروتکل http یا https استفاده می شود. دو قانون مهم این پروتکل عبارتند از:
برای مشاهده یک صفحه اینترنتی می بایست از یک مروگر (مانند فایرفاکس، کروم و ...) استفاده کرد.
فرمت اطلاعات می بایست به شکل html باشد.
از این رو برای طراحی یک صفحه وب، می بایست با ساختار زبان html آشنا باشیم.
www: مخفف عبارت world wide web می باشد.
Domain: نام دامنه (نام سایت)
Top Level Domain: پسوند سایت که پسوندهای .com, .net, .org و ... از معروفترین آنها می باشند.
html یک زبان نشانه گذاری (نه یک زبان برنامه نویسی) می باشد که متشکل از تعدادی tag (تگ) بوده و توسط آن می توان تعیین نمود چه عناصری در صفحه وجود داشته باشند. برای شروع به کار با html پیشنهاد می شود مقالات مربوط به مبانی شبکه را مطالعه فرمایید.
تگ ها در html بین علامت های < > قرار می گیرند. اکثر تگ ها بصورت زوج تگ (تگ باز و بسته) و تعداد کمی از آنها به صورت تکی مورد استفاده قرار می گیرند. تگ بسته همانند تگ باز می باشد با این تفاوت که یک علامت / قبل از نام تگ قرار می گیرد.
<html>
</html>
در صورتی که تگ بصورت تکی باشد، به شکل زیر نوشته می شود.
<br />
نرم افزارها و برنامه های متعددی برای کد نویسی به زبان html ارائه شده است که به کمک آنها می توانید به راحتی فایل های html را ایجاد، ویرایش و حذف نمایید. خوشبختانه تمامی نرم افزارهای ویرایش کد (Code Editor) دارای حجم کم و سرعت اجرای بالایی می باشند و کار با آنها بسیار ساده می باشد.
Notepad
ساده ترین برنامه ای که می توانید با استفاده از آن یک فایل html را ایجاد و ویرایش نمایید برنامه notepad می باشد که بصورت پیش فرض در سیستم عامل ویندوز وجود دارد.
++Notepad
همانطور که از نام آن پیداست نسخه ارتقا یافته Notepad می باشد که می بایست آن را جداگانه نصب کنید و در عین کم حجم بودن، امکانات مناسبی از جمله: انتخاب زبان کد نویسی، مرتب سازی کدها و تفکیک رنگی آنها انجام می دهد تا کدنویسی برای شما کمی آسانتر شود.
Visual Studio Code
یک محیط کدنویسی بسیار حرفه ای که ارائه آن از طرف مایکروسافت باعث تنگ شدن عرصه برای محصولات مشابه گردید و امروزه طیف بسیار گسترده ای از برنامه نویسان (حتی برنامه نویسان لینوکس و مک) از این محصول برای کد نویسی استفاده می نمایند.
نکته مهمی که وجود دارد، این برنامه را نباید با Visual Studio مایکروسافت اشتباه بگیرید!
همانطور که پیش تر گفته شد، هر صفحه html دارای تعدادی تگ می باشد که برخی از آنها الزامی و برخی دیگر بنا به نیاز برنامه نویس به صفحه افزوده می شود.
تگ های اولیه
اولین تگ مورد استفاده <!DOCTYPE html> می باشد که توسط آن نسخه ای که قصد دارید از html استفاده کنید را مشخص می کنید. نوشتن این تگ، به شکل ذکر شده بیانگر استفاده از نسخه 5 می باشد.
تگ بعدی <html> می باشد که اصلی ترین تگ در صفحات وب بوده و سایر تگ ها درون آن قرار می گیرند. صفحه html به دو بخش کلی تقسیم می شود.
head: در این تگ کلیه تنظیمات از جمله، عنوان صفحه، دستورات css، لینک های css و جاوا اسکریپت و ... قرار می گیرد.
body: هر آنچه که قرار است به کاربر نمایش داده شود، درون تگ body قرار می گیرد.
یکی از تنظیماتی که در قسمت head می توان قرار داد، عنوان صفحه(سند) می باشد که درون تگ title قرار می گیرد. بنابراین یک سند html به شکل زیر خواهد بود.
<!DOCTYPE html>
برنامه Notepad را باز کرده و دستورات فوق را درون آن تایپ کنید.
<!DOCTYPE html>
<html>
<head>
<title>آکادمی بنو</title>
</head>
<body>
</body>
</html>
جهت خوانایی بیشتر بهتر است هر عنصری که درون عنصر دیگر قرار می گیرد(بین تگ باز و بسته) نسبت به پدر خود، به اندازه یک tab فاصله قرار گیرد. همانطور که در کدهای فوق نیز مشخص است، تگ head و body نسبت به پدر خود که html می باشد به اندازه یک tab فاصله گرفته است و به همین ترتیب تگ ttitle نسبت به تگ head.
پس از نوشتن دستورات، از منوی File گزینه Save As را انتخاب کنید.
ابتدا محل ذخیره سازی را مشخص کرده و سپس در کادر File Name نامی برای صفحه خود تعیین کنید. در انتها از کادر Encoding گزینه، UTF-8 را انتخاب کنید، اگر مرحله آخر انجام نشود، نوشته های فارسی به شکل صحیحی نمایش داده نخواهند شد. پس از انجام تنظیمات، روی دکمه Save کلیک کنید تا فایل مورد نظر ذخیره گردد و برنامه Notepad را ببندید.
جهت اجرای صفحه ایجاد شده، به محل ذخیره سازی آن مراجعه کرده و روی فایل مورد نظر دابل کلیک کنید.
ویرایش فایل
در صورتیکه قصد داشته باشید فایل ایجاد شده را ویرایش نمایید، روی صفحه مورد نظر کلیک راست کرده و از منوی Open whith گزینه Notepad را انتخاب کنید.
توجه داشته باشید که پس از اعمال تغییرات، کافی است کلید ترکیبی Ctrl + S را فشرده یا از منوی File گزینه Save را انتخاب نمایید.
