تبلیغات
مقالات آموزشی برنامه نویسی و شبکه - مطالب آموزش HTML و XHTML

آموزش درج فایل فلش (swf) در وب سایت

تحرک در وب سایت ها یکی از جاذبه های هر وب سایت است که می تواند هر بیننده را مات و مبهوت خود سازد، حرکت در وب سایت می تواند سایت را از یکنواختی در بیاورد و از خستگی و کسلی بیننده جلوگیری نماید.
در این راستا فایل های فلش قدرتی وصف ناپذیر در نمایش افکت های حرکتی دارند که به همراه تصاویر با کیفیت یک جلوه بصری شکیل و جذاب را به بینندگان وب سایت تقدیم می کنند.
امروزه حتی با وجود HTML5 و CSS3 و افکت های حرکتی آنها ، باز هم استفاده از فایل های فلش در وب سایت ها زواج زیادی دارد.
حتی با وجود نقص زیاد فلش در عدم پشتیبانی از تاچ (صفحات لمسی) ، باز هم استفاده از فایل های فلش در وب سایت ها کاملا منسوخ نشده است.
سایت نت نیک|آموزش درج فایل فلش (swf) در وب سایت
برای نمایش یک فایل فلش در وب سایت می بایست از کد زیر استفاده نماییم:


در کد html بالا کافی است مسیر فایل swf خود را در دو قسمت data , value  تنظیم نمایید و در بخش height و width نیز اندازه نمایش فایل فلش خود را بر مبنای پیکسل ست نمایید.
حتما این نکته را در نظر داشته باشید که کد بالا فقط برای فایل های با پسوند swf است و همچنین این نکته را نیز در نظر داشته باشید که کد بالا را در هر کجای وب سایت خود که می خواهید فایل فلشتان در آنجا نمایش یابد می توانید قرار دهید.
تا آموزشی دگر بدرود.

نوشته شده در تاریخ یکشنبه 10 شهریور 1392    | توسط: ح.م    | طبقه بندی: آموزش HTML و XHTML،     | نظرات()


فرق html و xhtml

همیشه لغات HTML و XHTML اصطلاحات گنگی برای عموم مردم بوده است.
همیشه با شنیدن این اصطلاحات یک علامت سوال خیلی بزرگ بر روی سر آدم ایجاد میشه!

حتما تا به حال خیلی با عناوین html و xhtml برخورد کرده اید و همیشه این سوال براتون پیش اومده که اینا چین و آیا هر دو یکی هستند ؟


چرا در برخی موارد اینا به جای یکدیگر استفاده میشن ؟


در جواب باید خدمتتون عرض کنم :


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


شرکت های ارائه دهنده مروگر هم که در اون زمان گمونم فقط مایکروسافت بود!


خلاصه به همین صورت گذشت و گذشت ، تا اینکه یهو مایکروسافت به خودش اومد ، دید هر کس داره به سلیقه و سبک خودش از کدهای html استفاده می کنه!


حال اینکه مرورگر بدبخت مایکروسافت باید با کدوم سلیقه خودش رو منطبق می کرد ؟

سایت نت نیک
مشکل بزرگ html این بود که هیچ قاعده و قانونی نداشت !

وقتی هم که قانون نباشه ، هرج و مرج ایجاد میشه ...

نوشته شده در تاریخ شنبه 31 فروردین 1392    | توسط: ح.م    | طبقه بندی: آموزش HTML و XHTML،     | نظرات()


یک ابزار ضروری برای طراحان قالب

سلام

شاید براتون اتفاق افتاده باشه که یک صفحه وب و یا یک سایت کامل طراحی کرده باشین و بخواین اون رو روی همه نسخه های IE تست بگیرین ؟

بنده خودم به شخصه روی سیستمم مرورگر فایرفاکس ، گوگل کروم و IE 8 رو دارم و همیشه هر چیزی که طراحی می کنم ، توی هر سه تای این مرورگر ها تست میگیرم تا مطمئن بشم که صفحه هایی که طراحی کردم توی همه این مروگر ها stable است و مشکلی نداره.

ولی آیا کاربری که با IE 6 یا IE 7 یا IE 9 سایت منو می بینه ، بازم همین چیزی رو می بینه که من می بینم ؟

آیا صفحات بصورت سالم براش لود میشه ؟

بزرگترین ترس یک طراح سایت اینه که 100% مطمئن بشه که سایتی که طراحی کرده توی همه نوع مروگری درست لود میشه و کاملا stable است

اما من که نمی تونم همزمان تمام نسخه های IE رو توی سیستمم نصب کنم.

پس چکار کنم ؟!


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

این نرم افزار IE  Tester نام داره.

به چه دردی می خوره ؟

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

نکته جالب دیگه این نرم افزار اینه که از IE 5 تا IE 9 رو داره ...

خلاصه نرم افزار خیلی خوبیه و باهاش می تونین اشکالات سایتتون رو تو نسخه های مختلف IE ببینین و برطرفشون کنین.

این نرم افزار رو می تونین از اینجا دانلود کنین


یکی از بهترین روش های رفع مشکل سایت ، استفاده از "عبارات شرطی" است

پیشنهاد می کنم مقاله بنده در زمینه عبارات شرطی رو مطالعه کنین.



نوشته شده در تاریخ چهارشنبه 17 خرداد 1391    | توسط: ح.م    | طبقه بندی: آموزش HTML و XHTML، آموزش نرم افزارهای تخصصی متفرقه،     | نظرات()


نحوه ایجاد CSS های اختصاصی برای مرورگر اینترنت اکسپلورر(IE)

چگونه برای مرورگرهای اینترنت اکسپلورر سی اس اس اختصاصی بنویسیم ؟

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

از آنجایی که معمولا مشتریان و بازدید کنندگان وب سایت هنوز از IE استفاده می کنند ، باید به رفع باگ ها و ایرادات نمایش صفحات در این مرورگر بپردازیم.

قبلا در مورد استفاده از سی اس اس ریست – CSS Reset برای یکسان سازی و یکپارچه سازی کدهای سی اس اس در مرورگرهای متفاوت نیز مطالبی ارائه شده است که خواندن آن توصیه می شود .

یکی از بهترین شیوه ها برای خلاص شدن از دست این نا هماهنگی ها استفاده از کامنت های شرطی conditional comments است .


کامنت های شرطی IE conditional comments

کامنت گذاری به صورت HTML برای طراحان وب سایت شناخته شده است . کامنت ها به طراحان کمک میکند تا کدهای تمیز تری داشته باشند و کدها از خوانایی بیشتری برخوردار شوند .

به صورت معمول برای گذاشت کامنت در سورس کدهای HTML از کد زیر استفاده میشود.

توجه داشته باشید در اینجا از کامنت گذاری در کدهای اچ تی ام ال صحبت میشود و این کامنت ها در کدهای سی اس اس و … به صورت های دیگری مورد استفاده قرار میگیرند .

مرورگر اینترنت اکسپلورر دارای خصوصیت دستورهای شرطی است که در مرورگرهای دیگر پشتیبانی نمیشود و این مورد به طراحان وب سایت کمک خواهد کرد تا دستورات و کدهای HTML اختصاصی برای مرورگرهای IE را در کدهای اچ تی ام ال قرار دهند .

در این نوع از کامنت گذاری در صورت صحیح بودن شرط کدهای داخل کامنت که به صورت HTML نوشته شده اند خوانده و اجرا میشوند . این محتوا میتواند لینک یک Style خارجی و یا یک تگ باشد و یا دستورات سی اس اس داخلی و …

این کامنت ها در مرورگرهای دیگر به عنوان کامنت محسوب میشوند و دستورات شرطی نادیده گرفته خواهند شد .کامنت های شرطی برای مرور گر IE از متداول ترین راه های رفع باگ های نسخه های (IE6,IE7,IE8) می باشد. کامنت های شرطی به ما کمک خواهند کرد که نسخه مرورگر IE کاربر را مورد هدف قرار دهیم و برای رفع نا هماهنگی ها در آن نسخه ، دستورات سی اس اس به خصوصی بنویسیم .

در زیر نمونه کد هایی ارائه شده است و میبینید که هدف آنها نسخه های مختلف IE می باشد :


نوشته شده در تاریخ یکشنبه 14 خرداد 1391    | توسط: ح.م    | طبقه بندی: آموزش HTML و XHTML،     | نظرات()


چند لینک مهم برای طراحان قالب

چگونه حجم صفحمو کم کنم ؟



جواب :

Javascript Compression Services

CSS Compression Services

نوشته شده در تاریخ یکشنبه 3 اردیبهشت 1391    | توسط: ح.م    | طبقه بندی: آموزش طراحی وب و css، آموزش HTML و XHTML،     | نظرات()


30 نکته که بهتره در هنگام طراحی قالب با html و css رعایت کنید

سلام

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

نوشته شده در تاریخ یکشنبه 3 اردیبهشت 1391    | توسط: ح.م    | طبقه بندی: آموزش طراحی وب و css، آموزش HTML و XHTML،     | نظرات()


آموزش ساخت یک قالب معمولی برای سایت یا وبلاگ

با سلام

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

نت نیک این آموزش را آماده نموده است و می توانید ان را در ادامه مطلب بخوانید.

آموزش رو در ادامه مطلب بخوانید

نوشته شده در تاریخ دوشنبه 4 اردیبهشت 1391    | توسط: ح.م    | طبقه بندی: آموزش طراحی وب و css، آموزش HTML و XHTML،     | نظرات()


آموزش جابجایی بخش های یک قالب_بخش دوم

نکته 2 :
سوال : تو تگ div قالب بنده (یا هر تگ دیگه) خبری از کد css نیست ؟!!!

دستورات css رو به 3 صورت می تونن بنویسن :



1- بصورت inline و درون خود تگ ... مثل بالا و کاری که من در بالا انجام دادم و درون خود تگ و درون خصوصیت style کد هامو نوشتم
این روش باعث شلوغ شدن کد ها و سردرگمی در پروژه های بزرگ میشه

2- در تگ head : در این روش به بلوک ها (تگ هامون) یک آی دی میدیم و یا برای آن یک کلاس تعریف می کنیم و در داخل تگ head داریم :


درون تگ head تگ style ایجاد می کنین و توش کد css میزنین ...
# برای بلوکی که آی دی خاصی داره استفاده میشه
. (دات) برای بلوکی که کلاس خاصی داره ، استفاده میشه

نکته : کلاس رو میشه به چند تا بلوک داد (مثلا چند تا بلوک داریم که اندازه همشون باید 100 در 100 باشه ) خیلی راحت یک کلاس با هر نامی دوست دارین می سازین و با کد css سول و عرض رو 100 پیکسل قرار میدین و بعد به همه بلوک هایی که باید اندازشون 100 در 100 باشه ، این کلاس رو میدین


3- در این روش کد های css رو درون یک فایل با پسوند css. می نویسین و بعد با کد زیر این سند رو به صفحتون متصل می کنین ...



بهترین و حرفه ای ترین روش روش سوم است


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

نوشته شده در تاریخ یکشنبه 25 دی 1390    | توسط: ح.م    | طبقه بندی: آموزش HTML و XHTML، آموزش طراحی وب و css،     | نظرات()