دنياي برنامه نويسی World of Programming

همكاري، همفكري و آموزش برنامه نويسي

آموزش HTML

آموزش طراحي صفحات وب

HTML

نوشته شده در دوشنبه بیست و هفتم فروردین 1386ساعت 13:6 توسط محمدرضا فتحي

مقدمه اي بر وب و زبان HTML

منظور از وب چيست؟

وب شبکه ای است متشکل از تمامی کامپيوترهای دنيا، شبکه ای از شبکه ها.
اينترنت، وب، WWW ، web يا World Wide Web همگی يک چيزند.
تمامی کامپيوترهای وب ميتوانند با هم ارتباط داشته باشند.
کامپيوترهای موجود در وب با کمک استاندارد ارتباطی يا پروتوکل HTTP با هم ارتباط برقرار ميکنند .

نحوه کارکرد وب چگونه است؟

اطلاعات وب داخل فايلهائی به نام Web Pages و يا صفحات وب قرار دارند.
اين فايلها يا صفحات روی Web Server يا کامپيوترهای سرويس دهنده وب ذخيره شده اند.
برای ديدن صفحات وب از نرم افزاری به نام مرورگر و يا Web Browser استفاده ميشود.
دو مرورگر Internet Explorer و Netscape Navigator جزو معروفترين مرورگرها حساب ميشوند.
مرورگر Internet Explorer متعلق به شرکت مايکروسافت و مرورگر Netscape Navigator متعلق به شرکت نت اسکيپ ميباشد.

مرورگرها چگونه به خواندن صفحات وب ميپردازند؟

يک مرورگر با کمک يک Request درخواستی برای خواندن يک صفحه از وب سرور ميکند.
اين Request يا درخواست بر اساس استاندارد ارتباطی يا پروتوکل HTTP بوده و شامل آدرس صفحه مورد نظر ميباشد.
آدرس يک صفحه وب چيزی شبيه http://www.internet.com/faq.html است. بخش //:http نوع پروتوکل و يا استاندارد ارتباطی را تعيين ميکند، www.internet.com نام دومين يا Domain است و faq.html نام صفحه ای است که بايد خوانده شود.

مرورگرها چگونه صفحات وب را نمايش ميدهند؟

چگونگی نمايش يک صفحه وب بصورت مستتر در آن وجود دارد.
مرورگرها از روی دستورالعملهای داخل صفحات وب و با کمک تگ ها به نمايش صفحات ميپردازند.
وظيفه اصلی تگ های اچتمل ( HTML tags ) بيان چگونگی نمايش اطلاعات ميباشد.
يک تگ اچتمل چيزی شبيه <p> اين تگ پاراگراف است! p> است.

چه کسانی استاندارد های وب را تعيين ميکند؟

تعيين استاندارد های وب ربطی به شرکتهای مايکروسافت و يا نت اسکيپ ندارد.
World Wide Web Consortium يا W3C متولی تعيين استانداردهای وب است.
HTML, CSS and XML از مهمترين استانداردهای تصويب شده وب ميباشند.
آخرين استاندارد HTML استاندارد XHTML 1.0 ميباشد .

http://www.aviny.com :منبع

نوشته شده در دوشنبه بیست و هفتم فروردین 1386ساعت 13:4 توسط محمدرضا فتحي |

آموزش زبان طراحي صفحات وب HTML

مقدمه :

همانطور كه ميدانيد صفحات وب صفحاتي هستند كه در اينترنت به كاربرده مي شوند.HTML يك زبان برنامه نويسي براي طراحي صفحات وب مي باشد. در حقيقت تمامي صفحات وب با اين زبان برنامه نويسي نوشته ميشوند. كلمه HTML مخفف كلمات Hyper Text Markup Language است.زبان برنامه نويسي HTML به شما توانايي فرمت متن ، اضافه كردن تصوير ، صدا و ويدئو و ... را در صفحات اينترنتي ميدهد.

تگها در HTML :

تگ در زبان برنامه نويسي HTML به كليدهاي مربوط به برنامه نويسي توسط HTML گفته ميشود تگها داخل دو علامت كوچكتر "<" و بزرگتر ">" قرار مي گيرند.

تگها در HTML به سه صورت مورد استفاده قرار مي گيرند دسته اول اين تگها تگهايي هستند كه به سادگي در هر جايي نوشته ميشوند مانند تگ <HR> كه باعث رسم خط ميشود.

مثال :

<html>

<body>

welcome to our website

<HR>

</body>

</html>

دسته دوم تگهايي هستند كه بايد ابتدا و انتهاي مشخصي داشته باشند مثلا اگر تگ <B> در قسمتي از كد HTML مورد استفاده قرار گرفت ، بايد انتهاي اين تگ توسط </B> مشخص گردد توجه نماييد متني كه بين اين دو تگ قرار ميگيرد درشت نشان داده ميشود.

مثال:

<html>

<body>

<b>Welcome to our website</b>

</body>

</html>

دسته سوم تگهايي هستند كه ضمن آنكه بايد ابتدا و انتهاي مشخصي داشته باشند شامل چند پارامتر نيز مي باشند. به عنوان مثال تگ FONT :

در مثال بالا نام تگ FONT ميباشد و Face از پارامترهاي اين تگ است."Arial" هم مقدار انتخاب شده براي پارامتر Face است.

مثال :

<html>

<body>

<b>welcome to our website</b>

</body>

</html>

در درسهاي آينده با انواع بيشتر تگها آشنا خواهيد شد.

ويرايشگر HTML:

براي ويرايش يا ايجاد صفحات وب ساده ترين برنامه ممكن برنامه Notepad ويندوز است البته برنامه هاي ديگري نظير Frontpage نيز وجود دارند ولي براي آغاز كار استفاده از Notepad ميتواند بهتر باشد. بايد توجه داشته باشيد كه پس از نوشتن كدهاي HTML در داخل برنامه Notepad در آخر بايد آنها را با پسوندهاي *.htm - *.html ذخيره نماييد.

ساختار صفحات وب :

يك صفحه وب شامل دو بخش كلي سر و بدنه ميباشد در قسمت سر يا <Head> تيتر صفحه وب كه در كاوشگر اينترنت نمايش داده ميشود نوشته ميشود همچنين در اين قسمت علاوه بر تيتر صفحه فرمتها و اسكريپتهاي برنامه نويسي نيز نوشته ميشوند.

اما در بخش بدنه يا <Body> قسمتي كه توسط بينندگان صفحه مشاهده مي گردد نوشته مي شود . اگر متني در اين قسمت نوشته شود توسط كاوشگر اينترنت نشان داده خواهد شد.

مثال :

<Html>

<head>

</Head>

<Body>

</Body>

</Html>

ايجاد يك فايل HTML :

براي ايجاد يك فايل HTML شما بايد در ابتدا ، ابتدا و انتهاي آنرا مشخص نماييد. براي اين كار از دو تگ <html></html> استفاده مي گردد. بقيه كدها و عبارات HTML‌ بايد داخل اين دو تگ قرار گيرد.

براي مشخص كردن قسمت سر فايل از دو تگ <Head></Head> استفاده مي گردد كه اين دوتگ بايد بين دو تگ قبلي قرار گيرد.

و در نهايت براي مشخص كردن قسمت بدنه از دو تگ <Body></Body> استفده مي گردد. با استفاده از اين تگ ميتوان مشخصات ظاهر صفحه وب مانند رنگ متن ، رنگ زمينه و ... انتخاب نمود.

پارامترهاي تگ <Body> :

اين تگ جزء دسته سوم تگها ميباشد يعني علاوه بر مشخص بودن آغاز و پايان داراي چند پارامتر نيز مي باشد يكي از اين پارامترها پارامتر TEXT مي باشد كه با استفاده از آن شما مي توانيد رنگ متن صفحه را تعيين نماييد پارامتر ديگر اين تگ پارامتر BGColor است با استفاده از اين پارامتر شما ميتوانيد رنگ زمينه را مشخص نماييد.

مثال:در مثال زير ما يك فايل HTML ايجاد كرده ايم و همانطور كه مي بينيد براي تگ Body پرامترهايي نيز قرار داده ايم.

<html>

<head>

</head>

</body>

</html>

تگ <Title> :

هر كدام از صفحات وب مي توانند يك تيتر داشته باشند.كه اين تيتر در قسمت نوار عنوان كاوشگر اينترنت نشان داده مي شود.براي ايجاد تيتر صفحه وب از تگ <Title> استفاده ميشود اين تگ بين دو تگ <head></head> قرار داده مي شود.

مثال:

<html>

<head>

<Title>Computer Site</Title>

</head>

<Body>

</Body>

</Html>

http://dev.ir :منبع

نوشته شده در دوشنبه بیست و هفتم فروردین 1386ساعت 13:3 توسط محمدرضا فتحي |

متاتگ چيست؟

متاتگ ها راهی برای شناساندن وب سایت شما به جهان خارج است . عنوان تگ هایی که برای صفحات سایت خود تعریف میکنید موتور های جستجوگر را در شناختن مطالب داخل سایت شما یاری میکند .

دو نوع اصلی متاتگ وجود دارد :

این متاتگ باعث میشود که اطلاعات اضافی ای همراه صفحه وب درخواستی شما در http header به مرورگر ارسال شود . مثلا میتوانید تاریخ انقضای اطلاعات را تعیین کنید یا میتوانید صفحه وب را با یک متا تگ خاص پس از چند ثانیه به صفحه دیگری بفرستید بدون دخالت کاربر !

HTTP-EQUIV

این نوع از متاتگ برای تعیین اطلاعات داخل صفحه وب استفاده میشود که باعث میشود صفحه وب شما با راحتی بیشتری برای موتورهای جستجوگر شناخته شود ... مثلا زبان این صفحه ، نام طراح ، کلمات کلیدی این صفحه و ...

NAME

متاتگ ها کجای صفحه وب نوشته میشوند ؟

متاتگ ها را باید داخل تگ head نوشت . در صفحه هایی که از چند فریم درست شده باید در تمام صفحات متاتگ را نوشت.

به مثال های زیر دقت کنید : content در متاتگ کارش معرفی مقداری هست که متاتگ با یکی از دو صفت name و HTTP-EQUIV در خود دارد .

مثال : NAME="keywords" CONTENT=" persian macromediax dreamweaver">

تگ بالا را یه نگاه کنید . از نوع name است . مقدار name مساوی با keywords است . یعنی این متاتگ کارش شناساندن کلمات کلیدی سایت به موتور های جستجوگر است ... اگر میخواهید موتور های جستجو مانند گوگل سایت شما را بهتر بشناسند این تگ را به قالب سایت یا وبلاگ خود بیفزایید و در جلوی content کلمات کلیدی سایت خود را بنویسید .

مثال : NAME="description" CONTENT=" persian web design center">

تگ بالا کارش افزودن توضیحات سایت شما به موتور های جستجوگر است . اگر این تگ را به وب سایت یا وبلاگ خود اضافه کنید از ماه آینده اگر کسی بصورت تصادفی در گوگل به سایت شما بر بخورد توضیحات داخل این متا تگ را بجای توضیحات میبیند . یعنی گوگل دقیقا از این متاتگ برای ذخیره اطلاعات درباره سایت شما استفاده میکند . پس بکاربردن این متا تگ ها خیلی مهمه !

مثال :<META HTTP-EQUIV="Expires" CONTENT="Tue, 04 Dec 1993 21:29:02 GMT">

تگ بالا تاریخ انقضای این صفحه وب را تعیین میکند . یعنی اگر کسی این صفحه وب را یکبار دیده باشد وقتی این زمان فرا برسد و او دوباره آدرس این سایت را در مرورگرش بزند این صفحه از داخل cache لود نمیشود بلکه از سرور دانلود میشود .

http://www.macromediax.com :منبع

نوشته شده در دوشنبه بیست و هفتم فروردین 1386ساعت 13:2 توسط محمدرضا فتحي |

معرفي تگ هاي اوليه در HTML

تگ <BR> :

این تگ در زبان برنامه نویسی HTML مانند کلید ENTER عمل میکند یعنی باعث میشود که متن یا هر چیز دیگری به سطر بعد منتقل شود.به مثال زیر توجه نمایید.

<Html>

<Body>

Welcome to our WebSite<BR>

Thank you for this visit <BR>

</Body>

</Html>

تگ <CENTER> :

این تگ موجب این میشود که متن یا موارد دیگر برنامه نویسی مانند تصاویر ، کلیدها و ... در وسط صفحه قرار گیرد برای درک بهتر این موضوع به مثال زیر توجه نمایید.

<Html>

<Body>

Welcome to our website

</Center>

</Body>

</Html>

تگ <IMG> :

میتوان گفت که این تگ یکی از تگهای پرکاربرد میباشد از این تگ به منظور قرار دادن تصاویر در صفحه وب استفاده میشود.این تگ دارای پارامترهای بسیاری میباشد که برای بهتر عمل کردن این تگ مورد استفاده قرار می گیرند.

اولین پارامتر این تگ پارامتر Src میباشد که محل قرار گیری آدرس فایل تصویری میباشد.

پارامتر دیگر این Border میباشد . بوسیله این پارامتر میتوان حاشیه دور تصویر موردنظر را تنظیم نمود.در مثال زیر N مقدار یک عدد دلخواه شما میباشد.

و در نهایت بوسیله پارامترهای Width و Height میتوان طول و عرض تصویر را تنظیم نمود.در مثال زیر N مقدار عدد دلخواه شما برای تنظیم تصویر میباشد.

یک مثال کلی :

<Html>

<Body>

<Center>

Welcome to our Website<BR><BR>

<Img Src="/Image/1.Gif " Border=2 width=200 height=200>

</Center>

</Body>

</Html>

تگ <A> :

از این تگ برای ایجاد ÷یوند یا همان لینک در صفحات وب استفاده میشود.بوسیله پیوندها یا همان لینکها میتوان به صفحات دیگر رفت و یا کارهای دیگری را انجام داد. به مثال زیر توجه نمایید.بوسیله کد زیر شما یک پیوند ایجاد میکنید در قسمت مقابل پارامتر Herf آدرس فایل مقصد یا هر چیز دیگر نوشته میشود و در قسمت بعد همانطور که میبینید متن پیوند نوشته میشود.

<A Herf="/Html/Contact.asp> Click Here </A>

http://html1985.blogfa.com :منبع

نوشته شده در دوشنبه بیست و هفتم فروردین 1386ساعت 13:0 توسط محمدرضا فتحي |

تگ های HTML

تگ های اچتمل (HTML Tags)

با کمک تگ های اچتمل عناصر و يا Elements ساخته ميشوند.
در زبان اچتمل حدود 80 عنصر تعريف شده است.
تگ های اچتمل بوسيله دو نويسه (char) > و < ساخته ميشوند.
تگ های اچتمل معمولا بصورت زوج ظاهر ميشوند، مانند <b>testb>
تگ اول در يک زوج تگ مثلا <b> تگ شروع و تگ دوم مثلا <b/> تگ پايانی نام دارد.
متن بين تگ اول و تگ دوم در يک زوج تگ محتوای عنصر يا element content ناميده ميشود، مثلا "test"
تگ های اچتمل را ميتوانيد بوسيله حروف لاتين کوچک (lower case) و يا بزرگ (upper case) بنويسيد و case sensitive نيستند. برای مثال دو تگ <b> و <B> معادل هم هستند ولی شديدا توصيه ميشود که به خاطر سازگاری با XHTML از حروف کوچک استفاده شود.

عناصر اچتمل (HTML Elements)

مثال بخش مقدمه را در نظر بگيريد:

<html>

<head>

<title>Title of page</title>

</head>

<body>

This is my first html page. <b>This text is bold</b>

</body>

</html>

*** نمونه ای از يک عنصر اچتمل:

This text is bold

عنصر اچتمل بالا با تگ <b> شروع شده و با تگ <b/> پايان می يابد. محتوای اين عنصر عبارت "This text is bold" است. لازم به ذکر است که کاربرد تگ <b> نمايش توپر يا bold متون است.

*** مثال دوم يک عنصر اچتمل (معلوم الحال) :

This is my first homepage. This text is bold

عنصر اچتمل بالا با تگ <body> شروع شده و با تگ <body/> پايان می يابد. همانطور که ميبينيد گاهی يک عنصر حاوی يک يا چند تگ ديگر ميباشد.وظيفه تگ <body> تعيين بدنه اصلی يا body يک متن اچتمل است.لازم به يادآوری است که تنها اطلاعات بخش <body> يک فايل اچتمل در صفحه مرورگر نمايش داده خواهد شد.

شناسه های يک تگ (Tag Attributes)

تگ ها ميتوانند حاوی اطلاعات اضافی ديگر باشند، به اين اطلاعات شناسه يا Attribute ميگويند و وظيفه آنها بيان ديگر اطلاعات يک عنصر يا Element ميباشد. مثلا در مورد تگ <body> شناسه ای به نام bgcolor وجود دارد که رنگ زمينه متن (background) را تعيين ميکند برای نمونه اگر ميخواهيد که رنگ زمينه صفحه اچتملتان سياه باشد کافی است که به شکل زير عمل کنيد :

در مثال زير تگ <body> دارای چهار شناسه مختلف با نامهای width، height ، align و border و مقادير center، 60، 100 و 0 ميباشد.

......

شناسه ها به صورت کلی "مقدار=نام" يا "name=value" نوشته ميشوند و هميشه به تگ شروع يک عنصر يا Element اضافه ميشوند و نهايتا اگر در يک عنصر يا Element شناسه ها قيد نشوند از مقادير قراردادی يا default آنها استفاده خواهد شد مثلا در تگ body اگر شناسه bgcolor نوشته نشود از رنگ سفيد برای زمينه صفحه استفاده خواهد شد.
مقدار يک شناسه را ميتوانيد داخل نويسه های " و يا ' بنويسيد و اختيار دست شما است فقط در مواردی که مقدار يک شناسه شامل نويسه " هم ميشود بايد از نويسه ' استفاده شود.

http://www.aviny.com :منبع

نوشته شده در دوشنبه بیست و هفتم فروردین 1386ساعت 12:59 توسط محمدرضا فتحي |

تگ Anchor و شناسه href

برای ايجاد پيوند به صفحات ديگر از تگ <a> استفاده ميشود. پيوندها ميتوانند به بخش ديگری از همان صفحه، صفحات ديگر وب، تصاوير، فايلهای صوتی يا حتی فيلم ها و ... اشاره کنند.
فرم کلی يک پيوند به قرار زير است:

<a href="url">Some Text</a>

در مثال بالا تگ <a> برای ايجاد پيوندی به صفحه ای ديگر که آدرس اينترنتی آن url ميباشد بکار رفته است. برای تعيين مقصد و يا آدرس صفحه جديد از شناسه ای به نام href که همان hyerlink reference ميباشد، استفاده ميشود و مقدار اين شناسه در واقع همان آدرس اينترنتی صفحه مقصد است. بخش قابل رويت پيوند و در واقع متــنــی (و يا تصويری ) که توسط مرورگر نمايش داده خواهد شد و بازديدکننده روی آن کليک خواهد کرد ميان تگهای <a> و </a> قرار داده ميشود و هر چند که در مثال بالا اين بخش متن "Some Text" است ولی ميتواند حتی يک تصوير باشد.

برای نمونه کد اچتمل زير پيوندی به سايت google.com ايجاد خواهد کرد:

<a href="http://www.google.com/">Visit Google Site</a>

و مرورگر پيوند بالا را به شکل زير نمايش داده و در اثر کليک روی پيوند توسط بازديدکننده، مرورگر به سايت Google خواهد رفت.

http://www.khaterat.com/www/ :منبع

نوشته شده در دوشنبه بیست و هفتم فروردین 1386ساعت 12:53 توسط محمدرضا فتحي |

قرار دادن تصوير در صفحات و کد جدول

پیوند دادن یک تصویر:

امروز یک کدی رو به شما معرفی کنم که بوسیله اون میتونید از ترکیب کردن دو تگ <A> و <IMG> برای یک تصویر ÷یوند ایجاد کنید یعنی با کلیک کردن روی تصویر به صفحه دلخواه برید یا کار دلخواه خودتون رو انجام بدید.

<A Herf="/html/about.htm"><Img Src="/image/01.gif"></A>

اگر کد بالا رو درون طراحی خودتون قرار بدید و آدرس صفحه و همچنین آدرس تصویر رو درست تنظیم بکنید تصویری که انتخاب کردید به یک لینک تصویری تبدیل میشه.

تگ <Table> :

این تگ یکی از مهمترین تگهای زبان HTML میباشد که بوسیله این تگ و پارامترهایی که داره شما میتونید در صفحات وب خودتون جدول نیز رسم کنید.ابتدا تگ و پارامترهاش رو معرفی میکنم بعد یک مثال میزنم.

حالت کلی:

<Table>

</Table>

پارامترها :

از پارامتر اول جهت رسم ردیف استفاده میشود و از پارامتر دوم جهت رسم یک ستون مورد استفاده قرار می گیرد.

پرامتر سوم مشخص میکند که خطهای جدول چه مقدار ضخامتی داشته باشند که N برابر با یک عدد میشود.

نهایت پارامترچهارم برای تعیین اندازه سطر یا ستونهای جدول استفاده میشود.

در نهایت پارامتر آخر جهت قرار دادن جدول در یک سمت از صفحه نمایش مورد استفاده قرار میگیرد.

Border = N

Width – Heigh

Align = "Left – Right – Center"

یک مثال کلی :

<Html>

<Body>

<center><h1><b>Create The table</Center></b></h1><Br>

<"Table border=1 align="center>

<Tr>

<Td>Click</Td>

<Td>Register</Td>

</Tr>

<Tr>

<Td>Click</Td>

<Td>Register</Td>

</Tr>

<Tr>

<Td>Click</Td>

<Td>Register</Td>

</Tr>

<Tr>

<Td>Part-4</tdT

<Td>Click</Td>

<Td>Register</Td>

</Tr>

</Body>

</Html>

در این قسمت شما با یکی دیگه از تگهای زبان HTML آشنا شدید که کار اون رسم جدول بود که فکر کنم خیلی در طراحی صفحات وب کاربرد داشته باشه.فکر کنم طریقه دیدن مثال بالا رو هم بلد باشید.اول اون رو تو محیط NOTEPAD کپی کنید بعد اون رو با پسوند *.HTM ذخیره کنید بعدش هم ببینید.

http://HTML1985.blogfa.com :منبع

نوشته شده در دوشنبه بیست و هفتم فروردین 1386ساعت 12:51 توسط محمدرضا فتحي |

نمايش عكسي به دنبال نشانگر ماوس

اين يكي ديگه از آموزش هايي است كه با استفاده از اون مي تونيد مثل مقاله قبلي يه چيزي رو به دنبال موس به حركت در بيارين , اما با اين تفاوت كه به جاي متن شما مي تونيد عكس يا عكس هايي رو به دنبال موس به حركت در بياريد.

شما براي اين كار بايد دقيقا" بعد از <Body> اين سورس را به فرم خود اضافه كنيد :

خوب حالا توضيحات :

احتمالا" اگرحالا شما صفحه را Refresh كنيد مي بينيد كه چيزهايي شبيه عكس به دنبال موس در حركت مي باشد .

براي اينكه شما عكس هاي خودتان را جاي گزين كنيد بايد در اون پوشه اي كه اي page را قرار داديد 4 فايل عكس به انشعاب gif به نام هاي pic1.gif , pic2.gif , pic3.gif , pic4.gif را در اون پوشه قرار بديد.

البته در خود سورس هم توضوحاتي نوشتم كه اگه كسي خواست اين كار رو سفارشي تر انجام بده مي تونه اون ها رو هم تغييير بده به عنوان مثال در اول سورس يه چيزي مثل اين هست var imgwidth=40; // Image width كه با تغيير اون 40 به عددي ايگه مي تونيد ارتفاع عكس هايي رو كه به دنبال موس هستند رو عوض كنيد.

http://www.majidonline.com :منبع

نوشته شده در دوشنبه بیست و هفتم فروردین 1386ساعت 12:50 توسط محمدرضا فتحي |

دو نکته بسيار مهم در مورد فارسی نويسی

روش کدگزاری UTF-8
اکيدا توصيه ميشود که برای تايپ و تمايش متون فارسی از استاندارد يونيکد و روش کدگزاری UTF-8 اسنفاده شود و اين روشی است که مطالب اين سايت و اديتور آنلاينش از آن استفاده ميکند.نکته مهم در نمايش صحيح متون فارسی تعيين نوع کدگزاری يا encoing صفحات فارسی است که برای اينکار بايد از متاتگ خاصی به نام http-equiv در بخش head صفحات اچتمل به شکل زير استفاده شود:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

در اينصورت مرورگر يا Browser قبل از نمايش صفحه از روی متاتگ فوق نوع کدگزاری (Encoding) را تشخيص داده و ديگر مثلا نيازی به تعيين دستی (دراکسپلورور 5 : View/Encoing/Unicode / UTF-8 ) نوع Encoing توسط بازديدکننده سايت نخواهد بود.

 شناسه يا attribute ی به نام dir
جهت نمايش متون لاتين به صورت پيش فرض و default از چپ به راست (ltr) ميباشد.در مورد متون و جملات فارسی بايد با کمک روشی جهت نمايش پيش فرض را به "راست به چپ" تغيير دهيد. شناسه يا attribute ی به نام dir يا همان direction اين کار را برای شما انجام ميدهد. اين شناسه دارای دو مقدار ممکن ميباشد :

dir="ltr" , Left-to-right text. - چپ به راست
dir="rtl" , Right-to-left text. - راست به چپ

مثلا برای نمايش جمله فارسی "سلام بر دنيای وب!" با کمک عناصر p يا div کافی است که به يکی از شکلهای زير عمل شود:

<p dir="rtl"> سلام بر دنيای وب </p>
<div dir="rtl"> سلام بر دنيای وب </div>

در بسياری از عناصر و تگ های اچتمل امکان استفاده از شناسه dir ميسر بوده و به عنوان نمونه ميتوان از عناصر زير نام برد:

<p> , <div> , <html> , <body> , <table> , <tr> , <td> , <h1 ... h6> , <input> , <pre> , <select> , <span> , ...

http://www.khaterat.com/www/ :منبع

نوشته شده در دوشنبه بیست و هفتم فروردین 1386ساعت 12:48 توسط محمدرضا فتحي |

سایت خود را مطابق تکنولوژی جستجوگر ها طراحی کنید

بسياري از وب سايت ها هستند كه نميتوانند ترافيك كافي را براي سايت خود بدست آورند ، يكي از اين علت ها يك نكته ساده است : ” وب سايت براي موتور هاي جستجوگر بهينه نشده “ . در اين مقاله اعمالي كه براي بهينه سازي وب سايت در برخورد با موتور هاي جستجو بايد صورت گيرد شرح داده ميشود :

1. صفحات را مطابق ميل جستجوگر ها طراحي كنيد :

براي يك موتور جستجو گرافيك سايت شما يا فلش ها و كد هاي جاوا اسكريپت جذابي كه ساخته ايد اهميتي ندارد . بلكه چيزي كه يك موتور جستجو نياز دارد روان بودن كد نوشته شده در صفحات است . منظور من نوشتن كامنت در بين تگ ها يا رعايت كردن فاصله ها نيست بلكه استفاده از تگ هايي است كه جستجوگر ها از آنها استفاده ميكنند . تگ هاي مهم در يك صفحه وب عبارتند از : تگ title و description و Keywordsو Alt . ( اين روزها بعضي از موتور هاي جستجو فقط از تگ Keywords براي ارائه نتايج استفاده ميكنند ).

چند نكته :

· اگر از جدول ها براي ساخت صفحات سايتتان بهره گرفته ايد ، سعي كنيد از كد هاي ساده استفاده كنيد نه از تگ هاي تو در توي پيچيده .

· استفاده از فريم ها باعث سر گيجه موتور هاي جستجو ميشود كه به ضرر شماست . در ضمن استفاده از فريم ها ديگر در طراحي سايت ها متداول نيست .

· اگر از كد هاي جاوا اسكريپت استفاده كرده ايد براي فراخواني فايل هاي جاوا اسكريپت خارجي از كد هاي كوتاه استفاده كنيد .

· استفاده از تگ Alt در تگ تصاوير موتور هاي جستجو را در يافتن موضوع تصاوير كمك ميكند . حتما از اين تگ براي عكس ها استفاده كنيد .

· متن اصلي را قبل از عكس ها در صفحاتتان قرار دهيد و يا حداقل عكس ها را در ميان متن قرار دهيد .

2. كلمات كليدي Keywords :

استفاده از اين تگ بسيار اهميت داره و نوع كلمات استفاده شده در اون هم مهمه . سايت wordtracker كلمات كليدي خوبي را براي هر نوع سايتي پيشنهاد ميدهد كه ميتوانيد از آن بهره بگيريد . تعداد كلماتي كه ميتوان در اين تگ استفاده كرد محدوديت خاصي ندارد ، اما براي حصول نتيجه بهتر از 10 الي 15 كلمه برتر استفاده كنيد .

3. محتواي سايت :

بسياري از موتور هاي جستجو از متن اصلي صفحات براي يافتن كلمات كليدي استفاده شده در تگ keywords استفاده ميكنند . پس استفاده درست از كلمات كليدي و مطابقت آن كلمات با متن شما بسيار اهميت دارد. كلمات اصلي متن را در تگ heading و يا bold بگذاريد و يا آن را لينك كنيد تا جستجوگر ها به آن لغات اهيت ويژه اي دهند .

4. عنوان سايت :

تگ title يكي از مهم ترين بخش ها از ديد جستجوگر هاست . عنوان صفحات نيز بايد مانند كلمات كليدي درست و مطابق متن انتخاب شود . چون گاهي موتور هاي جستجوگر به عناوين صفحات بيش از كلمات كليدي اهميت ميدهند . تعداد كلماتي كه در عنوان صفحات استفاده ميكنيد نيز براي اينكه از حد استاندارد جستجوگر ها خارج نباشد بايد حداكثر 9 كلمه باشد .

5. تگ توضيحات :

موتور هاي جستجو هنگام نشان دادن نتايج جستجوي خود ، اطلاعات تگ متاي توضيحات هر صفحه را براي نمايش توضيحات آن سايت نمايش ميدهند .بنابراين نوشتن توضيحات جذاب و درست بيننده را به سوي سايت شما جذب ميكند . استاندارد تعداد كلمات اين تگ 20 الي 25 كلمه ميباشد .

6. گرافيك :

استفاده از عكس اگر چه زيبايي خاصي به سايت شما ميدهد اما حتي با تگ ALT نيز يك عكس به اندازه چند كلمه قدرت ندارد . چون موتور هاي جستجو فقط كلمات را ميشناسند و عكس ها را هم با تگ Alt آنها شناسايي ميكنند . بنا براين استفاده از عكس به جاي لينك و يا بجاي متن از خوانايي سايت شما براي چشم هاي يك موتور جستجوگر مي كاهد .

7. نقشه سايت :

نقشه سايت كمك بسياري به جستكوگر ها ميكند تا تمام صفحات سايت شما را شناسايي كنند . ابزار هاي زيادي بر روي وب هست كه نقشه سايت شما را در چند كليك ميسازد .

8. لينك هاي هدايتگر :

لينك هايي كه به ديگر صفحات سايت ميدهيد بايد ساده باشد . استفاده از منوهاي pop up‌ و فلش و مانند آن از خوانايي لينك هاي شما مي كاهد .اگر مجبور به استفاده از لينك هاي پيچيده در طراحي سايت هستيد ميتوانيد از لينك هاي ساده در انتهاي صفحات استفاده كنيد تا موتور هاي جستجوگر نيز بتوانند لينك هاي شما را شناسايي كنند .

رعايت اصول فوق باعث ميشود تا سايت شما در نتيجه جستجوي جستجوگر هاي معروف رتبه بالاتري را بدست آورد .

http://www.macromediax.com :منبع

نوشته شده در دوشنبه بیست و هفتم فروردین 1386ساعت 11:36 توسط محمدرضا فتحي |

دريم ويور: روياباف طراحان وب

نام این نرم افزار به معنای رویاباف میباشد ، البته از نظر من ماکرومدیا در این مورد اصلا اقراق نکرده است . چون کار این نرم افزار آنچنان ظریف و استثنایی است که جز در رویای شما قابل تصور نیست . در این مقاله در مورد قابلیتهای نرم افزار Dreamweaver صحبت خواهد شد .

Dreamweaver MX 2004—Just Updated

کار دریم ویور چیست ؟

نرم افزار Dreamweaver از شرکت Macromedia در نگاه اول نرم افزار ساده ای جهت ساخت صفحات HTML (Hyper Text Markup Language) است . که به ما کمک میکند تا مجبور نشویم کدهای زبان HTML را حفظ کنیم و با چند حرکت و کلیک دستورات به زبان HTML انجام میشوند و در واقع باید بگوییم این نرم افزار Dreamweaver است که Tag های زبان HTML را کاملا حفظ کرده و برای ما انجام میدهد .

شاید اولین سوالی که برای شما پیش بیاید این است که چه اشخاصی به سوی نرم افزار Dreamweaver میروند و چرا از نرم افزار های رقیب Dreamweaver یعنی GoLive از شرکت Adobe و FrontPage از شرکت Microsoft استفاده نکنیم . جواب این است که نرم افزار Dreamweaver از شرکت Macromedia و همچنین نرم افزار GoLive از شرکت Adobe برای طراحان وبی است که کارهای گرافیکی میتوانند بکنند یا بهتر بگویم طراح گرافیکی هستند اما نرم افزار FrontPage از شرکت Microsoft برای کسانی بیشتر به درد میخورد که کار آنها اتوماسیون اداری است یعنی با مجموعه برنامه Office از شرکت Microsoft کار میکنند بهتر است . و ما چون زمینه کارمان گرافیک است از بین نرم افزارهای Macromedia Dreamweaver MX 2004 و Adobe GoLive CS نرم افزار Dreamweaver را انتخاب کردیم ، زیرا نرم افزار Dreamweaver با نرم افزار Fireworkes از همین شرکت Macromedia است به خوبی مکالمه میکند و نرم افزار GoLive با نرم افزار Adobe ImageReady به خوبی مکالمه میکند و ما نیز چون Target کارمان شرکت Macromedia است نرم افزار Dreamweaver MX 2004 را انتخاب کردیم .

Dreamweaver MX 2004 به جز ساخت صفحات HTML از نوع Static و Dynamic میتواند به ساخت صفحات با PHP و ASP و ASP.NET و JSP و ColdFusion نیز به ما کمک کند ، همچنین این برنامه فلش را بخوبی پشتیبانی میکند و همین امر در طراحی سرعت ما را افزایش و خطاهای ایجاد شده در فرانت پیج را در هنگام کار با فلش ها کاهش میدهد . این برنامه ساخت behavior ها را نيز بخوبي پشتيباني ميکنيد . امکانات ديگر آن در هنگام کار با برنامه چندان زياد است که گاهي از اينهمه ابزار به هيجان مي آييد . پس از اين پس براي بافتن روياهاي خود در وب يک روياباف داريد !

نوشته شده در دوشنبه بیست و هفتم فروردین 1386ساعت 11:35 توسط محمدرضا فتحي |

درآمد آسان، عالي و تضمين شده، ثبت نام كنيد و شوكه شويد