طراحی وب سایت

سخن پایانی دوره آموزش زبان طراحی وب سایت اچ تی ام ال

در این سری از آموزش ها سعی نمودیم تا با زبانی ساده مفاهیم اصلی اچ تی ام ال (HTML) را به علاقمندان منتقل نماییم و در اینجا دوره آموزش رایگان اچ تی ام ال (HTML) در سایت نت شهر به پایان می رسد اما این بدان معنا نیست که مفاهیم اچ تی ام ال (HTML) به طور کامل بیان شده اند بلکه در این سری از آموزش ها حداقل های مورد نیاز برای شروع کار طراحی سایت آموزش داده شد. از جمله وب سایت های آموزشی انگلیسی زبان در زمینه طراحی سایت به خصوص زبان های اچ تی ام ال و سی اس اس می توان به موارد زیر اشاره کرد: http://www.w3schools.comhttp://www.htmldog.comhttp://html.net/http://www.w3.org/TR/html401 http://www.w3.org https://developer.mozilla.org/en-US در حقیقت چنانچه بخواهیم از وب سایت های فوق الذکر استفاده کنیم، برخورداری از دانش زبان انگلیسی ضروری است. از سوی دیگر نکات مهم برخی وب سایت های فوق الذکر در این سری آموزش ها گنجانده شده اند. بنابراین سعی شده تا حد ممکن کاربران سایت نت شهر بی نیاز از رجوع به دیگر سایت ها گردند. علاوه بر این با استفاده از سایت validator.w3.org خواهیم توانست آدرس وب سایت طراحی شده خود را در بخش مربوطه وارد کرده و کلیه کدها، لینک ها و ... سایت خود را بر اساس اصول طراحی استاندارد چک کنیم. در واقع با اینکار چنانچه سایت ما دچار مشکلی باشد، نوع مشکل و جایگاه آن در سایت برای ما مشخص خواهد شد تا بتوانیم آن را اصلاح نماییم. در ضمن سایت https://www.google.com/webmasters که زیر مجموعه سایت گوگل است این امکان را به ما می دهد تا بتوانیم سایت خود را به موتور جستجوی گوگل بهتر معرفی کنیم. در این سایت علاوه بر مقالات آموزشی، امکان ثبت نام نیز وجود دارد بطوریکه پس از ثبت نام می توان آدرس سایت خود را وارد نموده و از این پس کلیه تحلیل های آماری در مورد سایت در اختیار ما قرار خواهند گرفت. با آرزوی پیروزی و سربلندی تیم تولید محتوای نت شهر
آشنایی با تگ iframe در اچ تی ام ال (HTML)

زمانیکه بخواهیم یک صفحه اچ تی ام ال (HTML) دیگر را داخل صفحه اصلی خود به نمایش در آوریم می بایست از تگ هایی تحت عنوان <iframe> و <iframe/> استفاده کنیم. برای درک این موضوع ابتدا یک فایل جدید تحت عنوان second-page.html می سازیم و آن را به صورت زیر تکمیل می کنیم:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>صفحه دوم</title> </head> <body> <h1>صفحه دوم</h1> <p>قرار است این صفحه را داخل صفحه اصلی نمایش دهیم</p> </body> </html> پس از اجرای کد فوق در مرورگر خروجی زیر را مشاهده خواهیم کرد: حال فایل اصلی خود تحت عنوان index.html را به صورت زیر تکمیل می کنیم:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Netshahr</title> </head> <body> <iframe src="second-page.html" width="400" height="200"></iframe> </body> </html> همانطور که در کد فوق ملاحظه می شود داخل تگ <body> از تگی تحت عنوان <iframe> استفاده کرده ایم. Attribute یی تحت عنوان src این وظیفه را دارا است تا مسیر فایلی که می خواهیم داخل تگ <iframe> به نمایش در آید را مشخص سازد. علاوه بر این با استفاده از دستورات width و height می توان ابعاد این تگ را مشخص ساخت. حال با ذخیره کردن فایل خود آن را در مرورگر به اجرا می کنیم: چنانچه بخواهیم حاشیه دور تگ <iframe> از بین رود، کد فوق را به صورت زیر تکمیل می کنیم: <body> <iframe src="second-page.html" width="400" height="200" frameborder="0"></iframe> </body> مجدد مرورگر را به روز رسانی می کنیم: می بینیم که حاشیه تگ <iframe> از بین رفته است.چنانچه بخواهیم یک وب سایت دیگر داخل تگ <iframe> به نمایش در آوریم می بایست کد فوق را به صورت زیر بازنویسی نماییم:<body> <iframe src="http://www.w3schools.com" width="300" height="200" frameborder="no"></iframe> </body> مجدد مرورگر را به روز رسانی می کنیم: حال قصد داریم کدی بنویسیم تا با کلیک بر روی یک لینک، آدرس سایت مرتبط با لینک داخل تگ <iframe> باز شود. برای این منظور کد فوق را به صورت زیر بازنویسی می کنیم:<body> <iframe src=" " width="300" height="200" name="test-frame"></iframe> <p> <a href="http://www.w3school.com/" target="test-frame">لینک</a> </p> </body> ابتدا کد فوق را اجرا کرده سپس به توضیح پیرامون آن خواهیم پرداخت: با کلیک روی عبارت لینک خواهیم دید که داخل تگ <iframe> آدرس مرتبط با لینک باز خواهد شد: اولین کاری که در تگ <iframe> انجام داده ایم این است که با استفاده از Attribute یی تحت عنوان name نامی همچون test-frame در نظر گرفته ایم. از آنجا که قرار نیست خود تگ <iframe> مسیری را برای نمایش دادن دنبال کند، از اینرو هیچ چیزی مقابل Attribute یی تحت عنوان src نمی نویسیم. سپس در تگ <a> مقدار target را برابر با نام تگ <iframe> یا همان test-frame قرار داده ایم. اگر خاطرمان باشد دیدیم زمانیکه می خواستیم یک لینک در Tab جدید در مرورگر باز شود از دستور blank_ استفاده می کردیم. در این مثال به جای آنکه از دستور blank_ استفاده کنیم فقط کافی است تا نامی که برای <iframe> در نظر گرفتیم را مقابل target بنویسیم.
آشنایی با تگ code در زبان اچ تی ام ال (HTML)

در وب سایت های آموزش زبان های برنامه نویسی به کرات دیده می شود که در توضیحات خود بخش هایی از کد را داخل متن آورده و سپس پیرامون آن به توضیح می پردازند. برای استفاده از چنین قابلیتی می بایست از تگی تحت عنوان <code> و <code/> استفاده کرد.برای روشن شدن این موضوع کد زیر را وارد ویرایشگر متن خود می کنیم: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Netshahr</title> </head> <body> <p>This is a piece of Java code <code>String="Text"</code> </p> </body> </html> همانطور که در کد فوق می بینیم داخل تگ <body> ابتدا یک تگ <p> قرار داده و داخل آن عبارت This is a piece of Java code به معنی "این یک بخش از کد زبان برنامه نویسی جاوا است" را نوشته ایم. سپس با استفاده از تگ <code> دستور"String="Text را نوشته ایم.حال کد خود را داخل مرورگر اجرا می کنیم: همانطور که در تصویر فوق مشخص است بخشی که با یک بیضی قرمز رنگ به نمایش در آمده است با فونتی به نمایش در آمده که معمولاً با آن کد نویسی می کنیم و تحت عنوان Mono Spaced Font شناخته می شود.
آشنایی با تگ های div و span در زبان اچ تی ام ال (HTML)

در زبان اچ تی ام ال (HTML) زمانیکه بخواهیم گروهی از تگ ها را در کنار یکدیگر قرار دهیم می بایست از تگ <div> استفاده کنیم. به عبارت دیگر تگ <div> به عنوان ظرفی مورد استفاده قرار می گیرد که می توان دیگر تگ های اچ تی ام ال را داخل آن قرار داد.تگ <div> از دید یک مرورگر حاوی معنی خاصی نیست اما از آنجایی که تگ <div> تگی از جنس Block Element است و گروهی از تگ های اچ تی ام ال را در خود جای می دهد، مرورگر در حین Parse کردن این تگ یک فاصله قبل و یک فاصله بعد از این تگ قرار می دهند. پیش از این گفتیم که در گذشته برای ساخت Layout یک سایت از جداول استفاده می شد که کار صحیحی نبود چرا که تگ های <table>و<table/> برای نمایش داده ها، اعداد و ارقام و ... بایستی مورد استفاده قرار گیرند. امروزه برنامه نویسان وب برای ایجاد ساختار کلی سایت های خود از تگ <div> استفاده می کنند.چیزی که تاثیر به کارگیری تگ <div> را دوچندان می کند استفاده از CSS است. در حقیقت با به کارگیری تگ های <div> به همراه کدهای CSS می توان Layout هایی بسیار کاربردی و در عین حال جذاب ایجاد کرد.پیش از توضیح پیرامون تگ دیگری تحت عنوان <span> می بایست با دو مفهوم Block Element و Inline Element آشنا شویم.به طور کلی منظور از Block Element تگ هایی همانند <p>و <h1>و <table> و ... است که در مرورگر در یک خط مختص به خود به نمایش در می آیند. تگی همچون <div> هم Block Level محسوب می شود چرا که در یک خط مجزا به نمایش در می آید.در مقابل Element هایی از جنس Block چیزی تحت عنوان Inline Element وجود دارد که به تگ هایی اطلاق می شود که با استفاده از آن ها مرورگر آن ها را در یک خط جدید به نمایش در نمی آورد که از آن جمله می توان به تگ های <a>و <img>و <strong> و ... اشاره کرد. علاوه بر مواردی که اشاره شد تگ دیگری هم به کرات در طراحی صفحات وب مورد استفاده قرار می گیرد که <span> نام دارد. این تگ هم همانند تگ <div> به عنوان یک ظرف مورد استفاده قرار می گیرد اما این در حالی است که این ظرف برای بخش های کوچک تری از اچ تی ام ال مثل یک عبارت یا جمله مورد استفاده قرار می گیرد.حال با توضیحی مختصر پیرامون تگ های <div> و <span>، در ادامه این ماژول خواهیم دید که به چه شکل می توان آن ها را به طور عملی مورد استفاده قرار داد (برای روشن تر شدن عملکرد این دو تگ از تعدادی کد سی اس اس هم استفاده خواهیم کرد اما از آنجا که در فصل مرتبط با سی اس اس به طور کامل به توضیح کدهای سی اس اس خواهیم پرداخت از توضیحات تکمیلی در این آموزش خودداری خواهیم کرد): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Netshahr</title> </head> <body> <div style="background:#000; width:400px; height:100px; color:#fff">هدر</div> <div style="background:#ffde57; width:200px; height:300px">منوی سمت چپ</div> <div style="background:#ffdeff; width:400px; height:50px">فوتر</div> </body> </html> همانطور که در کد فوق مشخص است، از سه تگ <div> استفاده کرده ایم تا برای سایت خود یک Header و Footer و همچنین فضایی برای منوی سمت چپ ایجاد کنیم. سپس با استفاده از تعداد محدودی کدهای سی اس اس ابعاد و همچنین رنگ مرتبط با هر یک از تگ های <div> را مشخص می سازیم. اکنون این فایل را در مرورگر اجرا می کنیم: در واقع به همان ترتیبی که تگ های <div> را داخل تگ <body> و </body> نوشته ایم، به همان ترتیب در مرورگر به نمایش در می آیند. ابتدا تگی مرتبط با Header به رنگ سیاه سایت ایجاد کرده ایم سپس یک تگ <div> را به منوی سمت چپ اختصاص داده و رنگ آن را زرد کرده ایم و در نهایت تگی را به Footer اختصاص داده و رنگ آن را صورتی کرده ایم.برای آشنایی بیشتر با تگ <span> ابتدا نوشته ای طولانی تر داخل Footer می نویسیم سپس بخشی از آن را با استفاده از تگ <span> تحت تاثیر قرار می دهیم: <body> <div style="background:#000; width:400px; height:100px; color:#fff">هدر</div> <div style="background:#ffde57; width:200px; height:300px">منوی سمت چپ</div> <div style="background:#ffdeff; width:400px; height:50px">All <span style="font-weight:bold;">rights</span>reserved.</div> </body> همانطور که در کد فوق می بینیم عبارت All rights reserved. به معنی "حق چاپ محفوظ است." را وارد تگ <div> مرتبط با Footer کرده ایم و با استفاده از تگ های <span> و </span> استایل خاصی را فقط برای واژه rights در نظر گرفته ایم. با اجرای کد فوق در مرورگر نتیجه را بهتر متوجه خواهیم شد: همانطور که می بینیم با استفاده از تگ <span> فقط استایل خاصی را برای واژه rights در نظر گرفته ایم (در پروژه عملی پایان دوره به طور کاربردی از این تگ ها استفاده خواهیم کرد).
آشنایی با Attribute های placeholder و name در فرم های اچ تی ام ال (HTML)

در این بخش قصد داریم تا در ادامه مبحث فرم های اچ تی ام ال (HTML) به بررسی دو Attribute دیگر بپردازیم. برای این منظور کد زیر را وارد ویرایشگر متن خود می کنیم: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Netshahr</title> </head> <body> <form action="send-form-information.php" method="post"> <input type="text" name="firstName" placeholder="نام شما"> <input type="text" name="lastName" placeholder="نام خانوادگی شما"> </form> <//body> </html> در برخی از فرم های اینترنتی می بینیم که متنی معمولاً به رنگ خاکستری داخل فیلدهای فرم قرار می گیرد که به کاربر نشان دهد که در آن فیلد چه چیزی بایستی وارد شود. نکته اینجا است که برای خلاف Attribute یی به نام value که مقداری واقعی را برای هر خانه از فرم در نظر می گرفت، placeholder فقط کلمه یا عبارتی را به کاربر نشان می دهد و به محض شروع به تایپ کردن روی خانه ای از فرم که حاوی Attribute یی به نام placeholder است، عبارت داخل خانه از بین خواهد رفت. برای روشن شدن این موضوع فایل را داخل مرورگر اجرا می کنیم:
نحوه ایجاد Drop-down Menu در فرم های اچ تی ام ال (HTML)

لیست هایی تحت عنوان Drop-down Menu در طراحی صفحات وب مورد استفاده قرار می گیرند که در آن واحد یک گزینه بیشتر نمایش داده نمی شود اما به محض کلیک کردن روی آن به کلیه گزینه های بیشتری می توان دست پیدا نموده و یکی از آنها را انتخاب کرد. برای ایجاد چنین قابلیتی از تگی تحت عنوان <select> بایستی استفاده کرد. برای روشن شدن این موضوع کد زیر را وارد ویرایشگر متن خود می کنیم: Netshahr کرج اراک تبریز ]]> همانطور که در کد فوق مشخص است داخل تگ مرتبط با فرم از تگی هایی تحت عنوان <select> و </select> استفاده کرده و داخل این تگ ها هم از تگی تحت عنوان <option> و </option> استفاده کرده ایم. کاری که تگ <option> انجام می دهد این است که تعداد گزینه های این منو را مشخص می سازد. حال برای مشاهده خروجی این فایل ابتدا آن را ذخیره نموده و آن را داخل مرورگر اجرا می کنیم: با انتخاب گزینه مد نظر، متن آن گزینه برای وب سرور ارسال خواهد شد. حال ممکن است که این منو حاوی اطلاعات بسیاری باشد و برای آنکه کاربر سر در گم نشود می خواهیم گزینه ای به آن اضافه نموده تحت عنوان "لطفاً شهر محل سکونت خود را انتخاب نمایید" که به کاربر نمایش داده شود. برای این منظور کد فوق را بازنویسی می کنیم:<body> <form action="send-form-information.php" method="post"> <select> <option>کرج</option> <option>اراک</option> <option>تبریز</option> <option selected>لطفاً شهر محل سکونت خود را انتخاب نمایید</option> </select> </form> </body> می بینیم که یک بار دیگر تگ های <option> و </option> را نوشته و عبارت "لطفاً شهر محل سکونت خود را انتخاب نمایید" را داخل آن وارد کرده ایم. علاوه بر این داخل تگ آغازین <option> از دستوری تحت عنوان selected به معنی "انتخاب شده" استفاده کرده ایم که علیرغم قرار گرفتن این تگ پس از مابقی تگ های <option>، به محض نمایش صفحه در مرورگر کاربران به عنوان گزینه اول نمایش داده می شود:
به کارگیری از تگ textarea در فرم های اچ تی ام ال (HTML)

در فرم های اینترنتی بسیار دیده می شود که فضایی در نظر گرفته می شود تا کاربران بتوانند متنی دلخواه به هر مقدار را وارد فرم کنند: همانطور که در تصویر فوق مشخص است، ناحیه بزرگ تری از مابقی فیلدهای فرم با تگ <textarea> ایجاد شده است. برای ایجاد چنین ناحیه ای کد زیر را وارد ویرایشگر متن خود می کنیم: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Netshahr</title> </head> <body> <form action="send-form-information.php" method="post"> <textarea rows="5" cols="50">نظر خود را اعلام فرمایید</textarea> </form> </body> </html> همانطور که در کد فوق می بینیم داخل تگ <form> و </form> تگ جدیدی تحت عنوان <textarea></textarea> ایجاد کرده ایم. داخل این دو تگ هر آنچه نوشته شود داخل این خانه از فرم نمایش داده می شود. برای آنکه ابعداد این ناحیه مشخص شود دو راه کار پیش رو داریم: راه کار اول اینکه همانطور که در کد فوق مشخص است از دو Attribute تحت عناوین rows و cols استفاده کنیم که در این مثال مقدار آن ها را به ترتیب برابر با 5 و 50 قرار داده ایم. (rows به معنی "ردیف ها" و cols مخفف واژه columns به معنی "ستون ها" است). راه کار دوم هم از طریق CSS است که در بخش آموزش CSS مورد بررسی قرار خواهد گرفت.پس از ذخیره کردن فایل خود، مرورگر را به روز رسانی می کنیم: می بینیم که خانه ای حاوی عبارت "نظر خود را اعلام فرمایید" در صفحه ایجاد شده است.
به کارگیری از دستور submit برای ارسال داده های فرم به سرور

یکی دیگر از مقادیری که می توان برای type در نظر گرفت submit است. در واقع با در نظر گرفتن مقدار submit می توان این فیلد از فرم را به دکمه ای تبدیل کرد که با فشردن آن کلیه اطلاعات فرم برای وب سرور ارسال خواهد شد. نکته ای که در ارتباط با submit وجود دارد این است که ظاهر این دکمه و متن داخل آن را به هر شکلی که تمایل داشته باشیم از طریق CSS می توانیم تغییر دهیم: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Netshahr</title> </head> <body> <form action="send-form-information.php" method="post"> <input type="submit" value="ارسال فرم"> </form> <//body> </html> همانطور که در کد فوق ملاحظه می شود علاوه بر Attribute یی به نام type یک Attribute دیگر تحت عنوان value هم برای تگ <input> در نظر گرفته ایم که مقدار آن برابر با "ارسال فرم" است که متن قرار گرفته روی دکمه را مشخص خواهد کرد. حال پس از ذخیره کردن فایل آن را در مرورگر به روز رسانی می کنیم: می بینیم دکمه ای روی صفحه قرار گرفته است که قابل کلیک کردن می باشد.
استفاده از دکمه های radio در فرم های اچ تی ام ال (HTML)

در برخی از فرم ها گروهی از دکمه ها هستند که فقط یکی از آنها را می توان در آن واحد انتخاب کرد که اصطلاحاً به آنها radio گفته می شود. در حقیقت نحوه به کارگیری از این نوع دکمه های فرم به این شکل است که بایستی گروهی از این دکمه ها را در کنار یکدیگر مورد استفاده قرار داد.در مورد آیتم های checkbox دیدیم که با استفاده از دستور checked توانستیم گزینه مد نظر را به صورت پیش فرض تیک دار کنیم. در مورد آیتم های radio هم قضیه به همین صورت است. برای روش شدن این مطلب کد زیر را وارد ویرایشگر متن خود می کنیم: <body> <form action="send-form-information.php" method="post"> <input type="radio" name="group" value="one">یک <br/> <input type="radio" name="group" value="two" checked=" checked">دو <br/> <input type="radio" name="group" value="three">سه</form> </body> می بینیم که از سه radio در کد فوق استفاده کرده ایم که آیتم های یک، دو و سه را شامل می شود. سپس Attribute یی تحت عنوان name که مقدار آن اختیاری است که در این مثال مقدار group برای آن در نظر گرفته شده است را به تگ خود اضافه می کنیم. علاوه بر این از Attribute دیگری هم تحت عنوان value در کد فوق استفاده کرده ایم. در واقع زمانیکه کاربر هر گزینه را انتخاب کد، مقدار مرتبط با value آن گزینه به وب سرور ارسال می شود. علاوه بر این گزینه دوم حاوی دستور checked است که این کار را انجام می دهد تا به صورت پیش فرض گزینه دوم انتخاب شده باشد:
قرار دادن تیک در فرم های اچ تی ام ال (HTML)

چنانچه بخواهیم گزینه ای در اختیار کاربران قرار دهیم که بتوانند آن را تیک بزنند، می توان کد زیر را وارد ویرایشگر متن خود کرد: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Netshahr</title> </head> <body> <form action="send-form-information.php" method="post"> <input type="checkbox"> </form> </body> </html> پس از به روز رسانی مرورگر نتیجه زیر مشاهده خواهد شد: در واقع کاربران با تیک زدن این گزینه می توانند اطلاعات مرتبط با این گزینه را برای وب سرور ارسال کند. برای آنکه نوشته ای در کنار این checkbox به نمایش در آوریم دو راه کار پیش رو داریم. راه کار اول این است که متنی را در کنار checkbox به صورت زیر قرار دهیم: <body> <form action="send-form-information.php" method="post"> <input type="checkbox">گزینه اول</form> </body> مجدد مرورگر خود را به روز رسانی می کنیم: راه کار دوم استفاده از تگی تحت عنوان <lable> است. برای روشن شدن این مطلب کد فوق را به صورت زیر بازنویسی می کنیم: <body> <form action="send-form-information.php" method="post"> <lable for="firstCheckbox">گزینه اول</lable> <input type="checkbox" id="firstCheckbox"></form> </body> همانطور که در کد فوق می بینیم، ابتدا از تگ های <lable> و </lable> استفاده کرده و متن "گزینه اول" را مابین این دو تگ قرار داده ایم. داخل تگ آغازین از Attribute یی تحت عنوان for استفاده کرده و مقدار آن را برابر با firstCheckbox قرار داده ایم که در ادامه توضیحات دلیل آن را متوجه خواهیم شد.در تگ مربوط به <input> از Attribute یی تحت عنوان id که مخفف identification به معنی "هویت" است استفاده کرده ایم و مقدار آن را برابر با firstCheckbox قرار داده ایم. در واقع با این id هویتی برای تگ <input> تعریف کرده ایم که با استفاده از این id تگ <input> را به تگ <lable> معرفی کرده ایم. حال فرض کنیم که از این آیتم فرم های اچ تی ام ال (HTML) چندین بار استفاده کرده ایم و می خواهیم یکی از آن ها به صورت پیش فرض تیک خورده باشد. برای این منظور کد فوق را به صورت زیر تکمیل می کنیم: <body> <form action="send-form-information.php" method="post"> <lable for="firstCheckbox">گزینه اول</lable> <input type="checkbox" for="firstCheckbox" > <br/> <lable for="secondCheckbox">گزینه دوم</lable> <input type="checkbox" for="secondCheckbox"> <br/> <lable for="thirdCheckbox">گزینه سوم</lable> <input type="checkbox" for="thirdCheckbox" checked="checked"> </form> </body> می بینیم که سه checkbox تعریف کرده ایم و اگر به گزینه سوم خوب توجه کنیم، می بینیم که داخل تگ <input> از Attribute یی تحت عنوان checked به معنی "تیک خورده شده" استفاده کرده ایم و مقدار آن را برابر با checked قرار داده ایم. علاوه بر این از تگ </br> به منظور مجزا سازی checkbox ها از یکدیگر استفاده کرده ایم. حال با به روز رسانی مرورگر نتیجه را مشاهده خواهیم کرد: می بینیم که گزینه سوم بدون اینکه تعاملی با این صفحه از وب سایت داشته باشیم به صورت پیش فرض تیک خورده است.