کامل ترین آموزش رایگان طراحی وب سایت در دنیا! – درس دوم: طراحی اولین صفحه وب
در درس اول کامل ترین آموزش رایگان طراحی وب سایت ، مفاهیم ابتدایی طراحی وب را یاد گرفتیم. در این درس به‌صورت عملی یک صفحه وب ساده را در کوتاه‌ترین زمان ممکن خواهیم ساخت.
فصل اول: تگ‌های HTML
قبل از اینکه شروع کنیم باید ابتدا چند تئوری مهم را یاد بگیرید.
برای ساخت صفحه وب ۳ راه وجود دارد:
از یک قالب طراحی استفاده کنید
حتما می‌پرسید قالب طراحی چیست؟ یک قالب طراحی سایت یک طرح از قبل آماده است که می‌تواند بر اساس شخصیت و قوانین برندتان سفارشی شود. قالب‌های طراحی سایت در فرمت‌های متنوعی مانند فتوشاپ و HTML وجود دارند. بسیاری از مواقع، این قالب‌ها با ویرایش گرهای HTML مانند GoLive، FrontPage و Dreamweaver سازگار هستند.
قالب‌های طراحی سایت خیلی مفید هستند و می‌توانند توسط طراح‌های باتجربه سایت هم استفاده شوند تا راه‌اندازی سایت سرعت پیدا کند. علاوه بر اینکه راهی هستند تا مردمی که دانش طراحی وب و HTML ندارند هم به‌سرعت سایت‌های زیبا بسازند.
از یک ویرایشگر HTML مانند NetObjects Fusion یا Dreamweaver استفاده کنید
ویرایشگر HTML ساخت وب‌سایت را تا حدودی شبیه ساخت یک مدرک ورد مایکروسافت می‌کند یعنی خیلی آسان است اما عیبش این است که مقداری از کنترل کار را از دست می‌دهید و شاید به برنامه وابسته شوید.
کد HTML سایت را به‌صورت دستی در ویرایشگر متنی مانند Notepad بنویسید
در این حالت کدHTML را خودتان تایپ می‌کنید. در این مقاله از این رویکرد استفاده می‌کنیم برای اینکه سریع‌ترین راه برای یادگیری طراحی وب است و قطعا بهترین راه برای داشتن بیشترین کنترل روی طراحی سایت است.
تگ HTML چیست؟
تگ‌های HTML متن اختصاصا فرمت شده‌ای هستند که «مارکرها» را برای مرورگر وب ایجاد می‌کنند تا بخواند و تفسیر کند. این مارکرها به مرورگر وب می‌گویند که چگونه هر عنصر را در یک صفحه وب نمایش دهد. تگ‌ها درون و اطراف متن و تصاویری قرار داده می‌شوند که می‌خواهید در صفحه سایت دیده شوند.
HTML تگ‌های زیادی دارد، درست مانند الفبا که حروف دارد. طراح وب می‌تواند از همه آنها استفاده کند تا یک سایت بسازد. تگ‌ها ساختار خاصی دارند که وقتی مرورگر یک صفحه HTML را می‌خواند، تگ‌ها را از متن معمولی تشخیص می‌دهد.
تگ‌ها معمولاً کلمات یا مخفف کلماتی هستند که در یک براکت قرار داده شده‌اند؛ مثلا، برای پررنگ یا بولد کردن متن، HTML تگ «بولد» دارد که شبیه زیر است:
<b>This text will be bolded</b> |
یک تگ دیگر که خیلی متداول است، تگ پاراگراف است:
.This is a paragraph of text
فصل دوم: نمودار تگ
شاید در مثال بالا متوجه شدید که تگ‌های HTML به‌صورت جفت نوشته می‌شوند که یعنی یک تگ آغازین (<tag name>) و یک تگ پایانی (</tag name>) دارند. تنها تفاوت آنها این است که تگ پایانی یک اسلش اضافه دارد.
برخی از تگ‌های متداول HTML موارد زیر هستند:
<b>…</b> برای بولد کردن متن
<i>…</i> برای ایتالیک کردن متن
<h1>…</h1> برای اعلام اهمیت متن به مرورگر و درشت‌تر کردن متن
<table>…</table> برای ایجاد جدولی مانند اکسل
تگ‌های HTML فقط برای جاگذاری و فرمت کردن متن نیستند؛ بلکه برای قرار دادن عناصری مانند انیمیشن، ویدئو، فلش، فایل صوتی و حتی برنامه‌های مولتی‌مدیا هم استفاده می‌شوند.
ساختار صفحه HTML
یک صفحه HTML به دو بخش اصلی تقسیم می‌شود:
- Head
بخش (<head>) شامل اطلاعات صفحه است که در صفحه وب نمایش داده نمی‌شود (به استثنا عنوان صفحه) اما روی نحوه نمایش صفحه تاثیر دارد.
- body
بخش (<body>) همه عناصری که روی صفحه سایت به کاربر نمایش داده خواهند شد را شامل می‌شود. منظور ما محتوای متنی، تصاویر و ویدئوی فلش است که بازدیدکنندگان سایت در مرورگرشان خواهند دید. تگ‌ها همه این عناصر را فرمت می‌کنند.
هر دو بخش head و body یک سایت در صفحه HTML با تگ‌های مخصوص خودشان علامت‌گذاری می‌شوند:
(<head> </head>) و (<body> </body>)
اگر تگ body، درواقع بدنه صفحه HTML را ایجاد می‌کند و تگ head هم عنوان صفحه HTML را ایجاد می‌کند پس خود صفحه چگونه ایجاد می‌شود؟
با استفاده از تگ:
<html></html> |
مادر همه تگ‌ها (<html>) است که مانند سایر تگ‌ها باید یک تگ آغازین و یک تگ پایانی داشته باشد. تنها تفاوت بین تگ آغازین و پایانی هم یک اسلش است که قبلا یاد گرفتید!
هر صفحه وبی باید با تگ HTML شروع شود و پایان یابد در غیر این صورت مرورگر وب نمی‌تواند صفحه را نمایش دهد. علاوه بر این دو، باید تگ هد و بدنه را هم داشته باشد؛ اما سایر تگ‌ها انتخابی هستند.
پس یک صفحه ساده HTML باید تگ‌ها را به ترتیب زیر داشته باشد:
<html> <head> <title>Title of your page</title> </head> <body> </body> </html> |
فصل سوم: کد نویسی
حالا باید اولین صفحه وب را به‌صورت دستی کد نویسی کنید.
یکی از بهترین راه‌ها برای یادگیری هر کاری، انجام دادنش است. پس نگران نباشید که الان همه این اطلاعات شفاف نیست، به‌محض اینکه صفحه وب را بسازید، همه‌چیز واضح می‌شود.
قدم اول: کد HTML بنویسید.
یک ویرایشگر متن مانند نوت پد را در ویندوز باز کنید و تگ زیر را بنویسید:
<html>
<head>
<title>Your first hand coded page</title>
</head>
<body>
<h2>Hand coding web pages is easy! </h2>
<p>I would like to thank everyone who helped me type
this page.</p>
</body>
</html>
|
قدم دوم: فایل را به‌عنوان HTML ذخیره کنید.
با استفاده از دکمه Save as در ویرایشگر متن، فایل را ذخیره کنید و نامش را webPage.html بگذارید.
البته می‌توانید هر نامی که می‌خواهید انتخاب کنید؛ اما باید ۴ قانون زیر را رعایت کنید:
- نام صفحات وب نمی‌توانند فاصله داشته باشند یعنی web page.html اشتباه است.
- نام باید با html. یا htm. تمام شود که به کامپیوتر بگوید که این فایل یک صفحه وب است و باید از مرورگر استفاده کند تا صفحه را بخواند.
- در نام صفحه وب نباید از نمادهایی مانند$, %, ^, & استفاده شود. فقط از اعداد و حروف استفاده کنید.
- در نوت پد فایل را به‌صورت UTF-8 ذخیره کنید.
قدم سوم: صفحه ذخیره شده را ببینید
در این مرحله باید بتوانید روی صفحه ذخیره شده دو بار کلیک کنید و با مرورگر بازش کنید. برای این کار در منو مرورگر File را باز کنید، Open file را بزنید و فایلتان را انتخاب کنید.
در این لحظه باید بتوانید اولین صفحه‌تان را با تمام زیبایی‌هایش ببینید. این اولین صفحه کد نویسی شده شماست! اگر چیزی نمی‌بینید، کد نوشته شده‌تان را با کد موجود در این مقاله مقایسه کنید و روند کار را تکرار کنید. اگر دقت کنید، می‌توانید صفحه را با موفقیت بسازید.
اگر مطمئن نیستید که صفحه را درست ایجاد کرده‌اید، آن را با تصویر صفحه نهایی که در بالا دیدید مقایسه کنید.
خلاصه درس دوم
یکی از راه‌های ایجاد صفحات وب، کدنوسی HTML است که زبان وب است که به‌صورت تگ‌های جفتی نوشته می‌شود. تگ آغازین، پایانی، Head و body ضروری هستند؛ اما سایر تگ‌ها به‌تناسب نیاز طرح انتخاب شده نوشته می‌شوند.
حالا که اولین صفحه سایتتان را ساخته‌اید، می‌توانیم یک‌قدم جلوتر برویم و اولین سایت را در درس سوم بسازیم!
