طراحی سایت HTML , CSS قسمت دوم
طراحی سایت HTML , CSS قسمت دوم
ابزارهای مورد نیاز برای طراحی وب :
1- textEditor یا ویرایشگر متن:
برای نوشتن کدها و برچسب های html و css نیاز به محیطی داریم که در آن
کدها را وارد کرده و ذخیره کنیم. به این محیط ها textEditor یا ویرایشگر
متن می گویند. ویرایشگرهای زیادی برای این منظور به صورت رایگان و غیر
رایگان عرضه شده است. اما به این نکته توجه کنید که برای شروع کار به هیچ
عنوان از ویرایشگرهای حرفه ای استفاده نمی کنیم . چون این ویرایشگرها
هوشمند بوده و به محض وارد کردن ابتدای یک کد ادامه کد خواسته شده را برای
شما می نویسد. بنابراین قدرت کد نویسی را از شما گرفته و شما در کد نویسی
تنبل می شوید.
پس در این آموزش از ساده ترین و در دسترس ترین ویرایشگر متن یعنی notepad که به صورت پیشفرض در ویندوز موجود است استفاده می کنیم.
شما می توانید از منوی start موجود در ویندوز notepad را جستجو کنید.
تصویری از محیط notepad
2- مرورگر (browser) :
برای اجرای کدهای html و css از مرورگرهای وب استفاده می کنیم . مرورگرهای
مطرح و قدرتمند و رایگان زیادی وجود دارد که معروفترین آنها IE (ویندوز)،
firefox و chrome هستند. در این آموزش از مرورگر پیشفرض ویندوز IE به علت
ضعف های موجود استفاده نمی کنیم و پیشنهاد می کنم برای اجرای کدها از
firefox و chrome استفاده کنید. این مرورگرها رایگان بوده و به راحتی می
توانید آنها را دانلود کنید. (نام آنها را در گوگل جستجو کنید)
مفهوم برچسب یا تگ (Tag) :
برای اینکه کمی با ساختار برچسب های HTML آشنا شوید کمی در مورد برچسب ها و انواع آنها فقط برای آشنایی صحبت می کنم.
همانطور که در گذشته گفته شد، HTML یک زبان برچسب گذاری ست و متشکل از
مجموعه ای از برچسب ها (tags) می باشد که هر کدام عناصر صفحه را تحت تاثیر
خود قرار می دهند.
مثلا یک برچسب وظیفه ایجاد پاراگراف در صفحه را دارد و برچسب دیگر وظیفه
پر رنگ کردن یا Bold کردن متن را به عهده دارد یا برچسبی وجود دارد که
امکان درج جدول در صفحه را برای شما فراهم می کند و برچسب دیگر تصاویر را
نمایش میدهد.
هر برچسب با علامت < شروع و با علامت > پایان می یابد.
برچسب ها دو نوع هستند.
1- برچسب هایی که علاوه بر برچسب شروع دارای برچسب پایانی هم هستند
2- برچسب هایی که فقط دارای برچسب شروع هستند.
برای مثال برچسب <b> وظیفه Bold یا پر رنگ کردن متن را بر عهده دارد و
دارای برچسب پایانی می باشد. یعنی متن مورد نظر بین شروع و پایان این
برچسب قرار می گیرد در صفحه وب به صورت پررنگ یا bold نمایش داده می شود.
نکته : در نظر داشته باشید که بر چسب پایانی دارای یک کاراکتر / قبل از نام برچسب می باشد.
برخی از برچسب ها علاوه بر نام برچسب دارای attribute یا خصوصیاتی هستند که این خصوصیات با value ها یا مقدارهایی که می گیرند ویژگی های برچسب را تعیین می کنند. مثلا برچسب <a> که برای لینک دار کردن متن به کار می رود دارای خصوصیتی به نام href است که مقدار آن آدرس لینک مورد نظر را مشخص می کند.
نگران نباشید. در جلسات آینده به معرفی کامل این برچسب ها می پردازیم.
پسوند ذخیره سازی .html و .htm :
پس از نوشتن برچسب ها در ویرایشگر notepad، سند ایجاد شده بایستی با یک
نام و با یکی از پسوند های html یا htm ذخیره شوند تا بتوانید سند ذخیره
شده را توسط مرورگر اجرا کنید. در این آموزش ما سند ها را با پسوند html
ذخیره می کنیم.
تمرین:
درباره تفاوت جزیی پسوندهای .html و .htm تحقیق کنید.
شروع کد نویسی:
بسیار عالی تا به اینجای کار نکات و مفاهیم جدیدی یاد گرفتیم. اگر درک
مطالب گفته شده برای شما کمی سخت است اصلا نگران نباشید. در ادامه کار
آنقدر تمرین و تکرار می کنیم تا مطالب خوب روشن شوند.
در این قسمت یک سند html ایجاد می کنیم و کدی ساده می نویسیم، ذخیره و بعد از آن اجرا می کنیم.
1- ویرایشگر notpad را از طریق منوی start ویندوز جستجو کرده و اجرا کنید.
2- کدهای زیر را داخل ویرایشگر بنویسید. (کاری به جزییات نداشته باشید فقط سعی کنید خودتون کدها را بنویسید)
<html>
<head>
<title> اولین صفحه وب </title>
</head>
<body>
<p>
<b> this is bold text </b>
<br>
<i> this is italic text </i>
</p>
</body>
</html>کدها رو کپی نکنید. تمرین کنید و بنویسید
3- پس از وارد کردن کدها از طریق منوی file در بالای پنجره گزینه save را انتخاب کرده تا پنجره ذخیره سازی نمایان شود. (می توانید از کلید ترکیبی ctrll +s نیز استفاده کنید)4- در پنجره باز شده ابتدا محل ذخیره سازی را مشخص کنید. (سعی کنید پوشه ای ایجاد کنید و تمام سند ها را آنجا ذخیره کنید)
5- از لیست save as type گزینه All files را انتخاب کنید.
6- در لیست Encoding گزینه uft8 را انتخاب کنید. ( در آینده درباره این گزینه صحبت خواهیم کرد. در این حد بدانید که برای نمایش کاراکترهای فارسی از آن استفاده می کنیم)
7- در قسمت file name نامی را برای سند انتخاب سپس یک نقطه . و پس از آن پسوند html را وارد کنید. در اینجا ما از نام index استفاده می کنیم که به اینصورت همراه پسوند می نویسیم
Index.html
8- روی دکمه save کلیک کنید
9- به محل ذخیره فایل بروید و با یکی از مرورگرهای ذکر شده فایل رو اجرا کنید. (معمولا به طور پیشفرض یکی از مرورگرها برای اجرای فایل html انتخاب شده و شما کافی ست فقط فایل رو اجرا کنید.)
