نرگس چنگیزی
مطالب مرتبط با طراحی صفحات وب
بسیاری از وب سایت ها هستند که نمی توانند ترافیک کافی را برای سایت خود بدست آورند ، یکی از این علت ها یک نکته ساده است "وب سایت برای موتورهای جستجو گر بهینه نشده". نکاتی در خصوص بهینه سازی وب سایت برای موتورهای جستجو: برای یک موتور جستجو گرافیک سایت شما یا فلش ها و کد های جاوا اسکریپت جذابی که ساخته اید اهمیتی ندارد. بلکه چیزی که یک موتور جستجو نیاز دارد ، روان بودن کد نوشته شده در صفحات است . منظور نوشتن کامنت در بین تگ ها یا رعایت کردن فاصله ها نیست بلکه استفاده از تگ هایی است که جستجوگرها از آنها استفاده می کنند. تگ های مهم در یک صفحه وب عبارتند از : تگ Title و Description و Keywords و Alt البته این روز ها بعضی از موتور های جستجو فقط از تگ Keywords برای ارائه نتایج استفاده می کنند! چند نکته کلیدی : استفاده از این تگ بسیار اهمیت دارد و نوع کلمات استفاده شده در آن هم مهم است. سایت Wordtrackerکلمات کلیدی خوبی را برای هر نوع سایتی پیشنهاد می دهد که می توانید از آن بهره بگیرید. تعداد کلماتی که می توان در این تگ استفاده کرد محدودیت خاصی ندارد ، اما برای حصول نتیجه بهتر است از ۱۰ الی ۱۵ کلمه برتر استفاده کنید. 3- محتوای سایت : بسیاری از موتور های جستجو از متن اصلی صفحات برای یافتن کلمات کلیدی استفاده شده در تگ Keywordsاستفاده می کنند. پس استفاده درست از کلمات کلیدی و مطابقت آن کلمات با متن شما بسیار اهمیت دارد. کلمات اصلی متن را در تگ Headingو یا Bold بگذارید و یا آن را لینک کنید تا جستجوگر ها به آن لغات اهیت ویژه ای دهند. 4- عنوان سایت : تگ Titleیکی از مهم ترین بخش ها از دید جستجوگر هاست. عنوان صفحات نیز باید مانند کلمات کلیدی درست و مطابق متن انتخاب شود. چون گاهی موتور های جستجوگر به عناوین صفحات بیش از کلمات کلیدی اهمیت می دهند. تعداد کلماتی که در عنوان صفحات استفاده می کنید نیز برای اینکه از حد استاندارد جستجوگر ها خارج نباشد باید حداکثر ۹ کلمه باشد. 5- تگ توضیحات : موتور های جستجو هنگام نشان دادن نتایج جستجوی خود ، اطلاعات تگ متای توضیحات هر صفحه را برای نمایش توضیحات آن سایت نمایش می دهند. بنابراین نوشتن توضیحات جذاب و درست بیننده را به سوی سایت شما جذب می کند. استاندارد تعداد کلمات این تگ ۲۰ الی ۲۵ کلمه می باشد. 6- گرافیک : استفاده از عکس اگر چه زیبایی خاصی به سایت شما می دهد اما حتی با تگ: نیز یک عکس به اندازه چند کلمه قدرت ندارد. چون موتور های جستجو فقط کلمات را می شناسند و عکس ها را هم با تگ آنها شناسایی می کنند. بنابراین استفاده از عکس به جای لینک و یا بجای متن از خوانایی سایت شما برای چشم های یک موتور جستجوگر می کاهد. 7- نقشه سایت : نقشه سایت کمک بسیاری به جستوگر ها می کند تا تمام صفحات سایت شما را شناسایی کنند. ابزار های زیادی بر روی وب هست که نقشه سایت شما را در چند کلیک می سازد. 8- لینک های هدایتگر : لینک هایی که به دیگر صفحات سایت می دهید باید ساده باشد. استفاده از منو های و فلش و مانند آن از خوانایی لینک های شما می کاهد. اگر مجبور به استفاده از لینک های پیچیده در طراحی سایت هستید می توانید از لینک های ساده در انتهای صفحات استفاده کنید تا موتور های جستجوگر نیز بتوانند لینک های شما را شناسایی کنند به عنوان پر مصرف ترين تگ مربوط به ورود اطلاعات بايد از تگ <input> نام برد. در اين تگ شناسه ای به نام type به تعيين نوع اطلاعات ورودی اختصاص دارد. مقادير ممکن برای اين شناسه به قرار زيرند: اگر ميخواهيد که بازديدکننده اطلاعاتی از قبيل متن، اعداد و ... را وارد کند از شناسه ای با مقدار "text" استفاده ميشود. برای تعيين مقصد ارسال اطلاعات بايد درون تگ form از شناسه ای به نام action استفاده کنيد. مقدار شناسه action آدرس يا url صفحه ای است که به دريافت و سپس پردازش اطلاعات دريافتی خواهد پرداخت. معمولا فايلهای بخش action برنامه ها و اسکريپت هائی نوشته شده با ربانهای cgi مانند ASP، Perl ، PHP و ... بوده و وظيفه آنها دريافت اطلاعات فرمها و سپس پردازش آنها ميباشد. ايجاد يک نقشه تصويری ( يک عکس با نواحی مختلف قابل کليک شدن ) : coords =left,top,right,bottom coords=center X, center Y ,radius coords = X1 Y1, X2 Y2, ... , Xn Yn nohref (true /false)m در صورتی که مقدار آن برابر true باشد ، آن ناحيه از عکس فعال و قابل کليک کردن بوده و در صورت false بودن غير فعال است . b_blank نحوه باز شدن و نمايش پنجره صفحه مقصد را تعيين می کند که دارای حالت های زير است: مثال: n<html> خروجی: Click on the sun or on one of the planets to watch it closer or or چنانچه در محيط کد نويسی صفحات وب ، بين متن های نوشته شده با کليد space فاصله ايجاد کرده یا با کليد Enter به خط بعدی برويد ، مرورگر اين مسئله را ناديده گرفته ، تمام فاصله ها را از بين برده و حداکثر به اندازه يک کاراکتر فاصله ايجاد می کند . برای جلوگيری از اين مسئله ، از تگ <pre> استفاده می کنيم . اين تگ باعث نمايش متن درون خود با همان شکل و ساختاری که در محيط کد نويسی صفحه وارد شده است ، می شود . همانطور که قبلا ذکر شد ، برای ايجاد فاصله بين حروف از کاراکتر ;nbsp& و رفتن به خط بعدی از تگ < br/ > استفاده می کنيم . مثال: خروجی This is a pre تگ اسکريپت اکنون اين فايل را با پسوند htm ذخيره کنيد و سپس آنرا در مرورگر اينترنت اکسپلورر اجرا کنيد که جمله Hello my friends را بايد در صفحه ببينيد. حالا خصوصيت type را حذف کنيد و دوباره فايل را ذخيره و مشاهده کنيد، هيچ متني در صفحه ديده نميشود که با تغيير نسخه 1.5 به 1.3 آن متن دوباره نمايان خواهد شد. نوشتن نسخه جاوااسکريپت اجباري نيست يعني مي توانيد آنرا ننويسيد.
1- طراحی صفحات مطابق میل موتورهای جستجو
- اگر از جداول برای ساخت صفحات سایت تان بهره گرفته اید ، سعی کنید از کد های ساده استفاده کنید نه از تگ های تو در توی پیچیده.
- استفاده از فریم ها باعث سر گیجه موتور های جستجو می شود که به ضرر شماست . در ضمن استفاده از فریم ها دیگر در طراحی سایت ها متداول نیست.
- اگر از کد های جاوا اسکریپت استفاده کرده اید برای فراخوانی فایل های جاوا اسکریپت خارجی از کدهای کوتاه استفاده کنید.
- استفاده از تگalt در تگ تصاویر موتور های جستجو را در یافتن موضوع تصاویر کمک می کند. حتما از این تگ برای عکس ها استفاده کنید.
- متن اصلی را قبل از عکس ها در صفحات تان قرار دهید و یا حداقل عکس ها را در میان متن قرار دهید.
2- کلمات کلیدی Keywords :
0 | 0
امتياز: 0 | نظر شما: 1 2 3 4 5
برچسب ها: موتور ,جستجو, کلمات, کلیدی, Keywords ,تگ , لینک , رنکینگ,ranking ,
text , checkbox , radio , password , hidden , submit , reset , button , file , image
اگر ميخواهيد که بازديدکننده فقط یک گزينه را از بين چند گزينه محدود انتخاب کند، از مقدار "radio" برای شناسه type استفاده کنيد
اگر ميخواهيد که بازديدکننده يک يا چند گزينه را از بين چندین گزينه محدود انتخاب کند، از مقدار "checkbox" برای شناسه type استفاده کنيد
در فرمها برای ارسال اطلاعات کسب شده از دکمه ای به نام ارسال يا Submit Button استفاده ميشود و در اثر کليک کاربر بروی اين دکمه "Submit" ، اطلاعات درون فرم توسط مرورگر به صفحه ای که شما تعیین میکنید ارسال خواهند شد.
تعيين مقدار "submit" برای شناسه type سبب نمايش دکمه Submit يا ارسال خواهد گرديد.
يكي از موارد كاربرد hidden ها اين است كه شما يک اطلاعاتي رو از يک صفحه دريافت ميكنيد و ميخواهيد اين اطلاعات رو در غالب تگ فرم، به همراه اطلاعات ديگري، به صفحه ديگر ارسال كنيد. به طوريكه كاربر متوجه آن hidden نشود. روش كار هم به اين ترتيب است كه با استفاده از يك زبان سمت سرور، آن اطلاعات را دريافت كرده و در value تگ hidden قرار ميدهيد. حالا براحتي ميتونيد آن را با فرم به صفحه ديگر (به همراه اطلاعات ديگر) بفرستيد.
استفاده فیلدهای hidden برای زمانی است که شما مقادیری دارید که میخواهید ازیک فرم به فرم های دیگر ارسال کنید بدون اینکه کاربر مجبور باشد اطلاعات را دوباره و دوباره تکرار کند!
1 | 0
امتياز: 0 | نظر شما: 1 2 3 4 5
برچسب ها: کاربرد, نوع ,hidden ,تگ, reset , button , file , imageinput ,form,Submit,
از تگ map برای ايجاد يک نقشه تصويری استفاده می شود . يک نقشه تصويری , عکسی است که ناحيه های متفاوت آن قابل کليک کردن بوده که می توان با کليک بر روی هر قسمت به يک صفحه يا فايل ديگر پيوند بر قرار کرد .
هر تگ area در درون تگ map ، می تواند تعيين کننده يک ناحيه مجزا قابل کليک شدن باشد که با تعيين مختصات آن بر روی عکس ، آن ناحيه مشخص می شود .
نکته مهم : ما ابتدا به وسيله تگ map و تگ های درونیarea يک نقشه تصويری با نواحی مختلف قابل کليک شدن ايجاد کرده ، سپس آن نقشه را به يک عکس بر روی صفحه پيوند می دهيم .
برای اين کار خاصيت usemap را در تگ img عکس مورد نظر برابر نام Name يا id ، نقشه تصويری ايجاد شده قرار می دهيم .
خواص مهم تگ map
name يا id : يک نام منحصر به فرد برای نقشه تصويری تعيين می کند .
خواص مهم تگ area
Coords :ابتدا به خاصيت shape توجه کنيد .مشخص کننده مختصات نقاط مختلف يک چند ضلعی (مربع ، مستطيل و ... ) برای تعيين ناحيه مورد نظر از عکس برای ايجاد پيوند است که دارای حالت های زير است :
rect : مربع . تعيين کننده مختصات چهار نقطه مختلف يک مربع يا مستطيل
circ : دايره . مشخص کننده نقطه مرکز و شعاع يک دايره
poly : چند ضلعی . مشخص کننده مختصات انواع نقاط مختلف يک چند ضلعی
href
مسير(URL) و نام فايل ،برای تعيين آدرس کامل صفحه يا فایل مقصد پيوند به کار می رود .
shape :
(rect،rectangle،circ،circle،poly,polygon)m
شکل ناحيه قابل کليک شدن از يک عکس يا نقشه تصويری را تعيين می کند ، که مختصات آن توسط خاصيت coords در همين تگ مقدار دهی می شود و. انواع اشکال ممکن عبارتند از :
rect , rectangle : مربع يا مستطيل
circ , circle : دایره يا بيضی
poly , polygon : چند ضلعی
target
_parent
_self
_top
- blank : لينک در يک پنجره جديد باز خواهد شد .
- self : لينک در همان پنجره يا قابی که کليک شده است باز خواهد شد .
-parent : لينک در قاب اصلی يا مادر باز خواهد شد .
-top : لينک در همان پنجره ای که کليک شده است به طور کامل باز خواهد شد .
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>
</body>
</html>n
کد
m <pre > This is a pre
formatted paragraph
it does not have any
space or linebrake < / pre > n
formatted paragraph
it does not have any
space or linebrake
جاوااسکريپت هم مانند زبان HTML از يکسري دستور و گرامر خاص خود پيروي مي کند. البته اين زبان به سادگي اچ تي ام ال نيست و بسيار هم حساس است، مثلاً در اچ تي ام ال فاصله بين تگها اهميتي ندارد و مرورگر آنرا ناديده مي گيرد اما در جاوااسکريپت فاصله بايد متناسب باشد که اگر رعايت نشود با پيغام خطا روبرو خواهيد شد. در قسمت بعد با چگونگي پيغامهاي خطا در جاوااسکريپت آشنا مي شويد. همانگونه که اطلاع داريد کدهاي جاوااسکريپت را بايد در ميان تگهاي HTML قرار دهيد. به همين دليل يک تگ براي آن در نظر گرفته شده است:
<script> ... </script>
که کليه دستورات جاوااسکريپت بايد مابين آنها قرار گيرد. اين تگهاي اچ تي ام ال به مرورگر مي فهمانند که در کجا اين زبان آغاز شده تا مفسر جاوااسکريپت مرورگر فعال شود و در کجا پايان مي پذيرد که برنامه مفسر هم کار خود را خاتمه دهد.
language
اما تگ script مانند بقيه تگها داراي خصوصياتي مي باشد، يکي از آنها language است که مقدار آنرا بايد برابر با javascript قرار دهيد،
k<script language="javascript">
</script>n
براي مقدار javascript مي توانيد نسخه آن را هم بنويسيد. اين زبان هم مانند اچ تي ام ال داراي نسخه هاي مختلفي است که هر کدام آنها با قابليتهاي جديدي در وب توسعه يافتند. نسخه هاي اين زبان عبارتند از 1.0 ، 1.1 ، 1.2 ، 1.3 ، 1.4 و آخرين نسخه حال حاضر هم 1.5 مي باشد که هم اکنون اين نسخه با مرورگر مايکروسافت يعني اينترنت اکسپلورر سازگاري ندارد. فعلاً مرورگر اينترنت اکسپلورر از نسخه 1.3 اين زبان پشتيباني مي کند.
type
تگ اسکريپت خصوصيت type هم دارد که براي اين زبان بايد آنرا برابر با text/javascript قرار دهيد. نکته قابل توجه اينست که اگر اين خصوصيت را به اين تگ اضافه کنيد، مرورگر اينترنت اکسپلورر نسخه 1.5 اين زبان را ناديده مي گيرد و کد را اجرا مي کند. شما مي توانيد با اجراي کد زير هم اولين اسکريپت خود را تجربه کنيد و هم خصوصيت type را در IE امتحان کنيد.
خب مانند زبان اچ تي ام ال مي توانيد از يک ويرايشگر متن مانند برنامه Notepad استفاده کرده و کد زير را در آن وارد کنيد:
n<html>
<head>
<title> My JavaScript </title>
</head>
<body>
<script language="javascript1.5" type="text/javascript">
document.write(" Hello my friends ")
</script>
</body>
</html>n
0 | 0
امتياز: 0 | نظر شما: 1 2 3 4 5
برچسب ها: تگ,اسکريپت,HTML,script,language,javascript,آغاز,اسکريپت,نويسی,
