10 تگ و صفت پرکاربرد در HTML5 که باید بدانید

10 تگ و صفت پرکاربرد در HTML5 که باید بدانید
تا پیش از ظهور HTML5 بسیاری از موارد در طراحی و پیاده سازی صفحات وب یا ناممکن بود و یا نیازمند صرف ساعت ها زمان. در HTML5 امکانات بسیار کاربردی و جالبی وجود دارد که به شما کمک می کند تا وبسایتهایی جذاب و قدرتمند طراحی کنید. در برخی موارد استفاده از این قابلیت ها بسیار ساده است؛ تا حدی که تنها با افزودن یک تگ یا صفت قابل پیاده سازی هستند. عدم اطلاع از این تگ ها، صفات و خاصیت های کاربردی می تواند به بهای اتلاف ساعت ها وقت با ارزش یک طراح وب تمام شود. در این آموزش 10 مورد از پرکاربردترین عناصر موجود در HTML5 را معرفی خواهم کرد که استفاده از برخی از آنها در هر وبسایتی که طراحی میکنید اجتناب ناپذیر است. [بیشتر]

راه راه کردن سطرهای جدول با استفاده از CSS3

راه راه کردن سطرهای جدول با استفاده از CSS3
از آنجا که جداول اطلاعات زیادی را در سطرهای نزدیک به هم نشان میدهند، ممکن است کاربر هنگام دنبال کردن محتوا در سطرهای مختلف درچار اشتباهاتی در برداشت اطلاعات شود. از این رو برای ایجاد تفاوت بین سطرها و قابلیت تمایز برای چشم هایی که سطر های نزدیک به هم را مشاهده میکنند، سطرهای جداول را به صورت یکی درمیان با رنگ های متفاوت نشان میدهند. اینکار از طریق تکنیک های مختلفی صورت میگیرد اما امروزه با ظهور CSS3 به سادگی توسط چند خط کد CSS و بدون نیاز به هیچگونه کد جاوااسکریپت و غیره می توان این قابلیت را به جداول نمایش داده شده در وبسایت خود اضافه کنید. [بیشتر]

افزودن قابلیت پرینت به صفحات وب سایت

افزودن قابلیت پرینت به صفحات وب سایت
دکمه چاپ صفحات وب سایت یکی از قابلیت هایی است که بر حسب نیاز و نوع محتوا می تواند به وب سایت شما افزوده شود. شاید برخی از کاربران از نحوه پرینت گرفتن توسط امکانات پیش فرض مرورگر خود بی اطلاع باشند و نتوانند محل دکمه Print (کلید میانبر Ctrl+P) را به راحتی پیدا کنند و یا اینکه دکمه چاپ پیش فرض در مرورگر علاوه بر متن اصلی مورد نظر آنها، عناصر غیر ضروری دیگری مانند منوها، تبلیغات و غیره را در نسخه پرینت نشان میدهد. در این شرایط وجود یک دکمه پرینت که محتوای اصلی صفحه را تمیز و مرتب برای چاپ در اختیار آنها قرار دهد، کاربر را از سردرگمی و یا کارهای زمانبر نجات خواهد داد. در این آموزش چگونگی انجام اینکار توسط کدهای CSS و جاوااسکریپت نشان خواهم داد. [بیشتر]

نمایش یک عکس بصورت پاپ آپ هنگام بردن ماوس روی لینک

نمایش یک عکس بصورت پاپ آپ هنگام بردن ماوس روی لینک
در این آموزش به شما یاد میدهم که چطور تنها با استفاده از تکنیک های CSS لینک هایی داشته باشید که با بردن نشانگر ماوس روی آنها، یک عکس دلخواه به صورت پاپ آپ یا تولتیپ ظاهر شود. توجه کنید که این روش در همه مرورگرها و پلت فرم های مختلف بدون مشکل کار میکند چراکه در ساخت این بالون ها فقط از CSS و HTML استفاده خواهیم کرد و از کدهای جاوااسکریپ، جی کوئری و غیره هیچ خبری نیست! [بیشتر]

ساخت منوی افقی استاندارد با استفاده از لیست

ساخت منوی افقی استاندارد با استفاده از لیست
برای ساختن منوی های افقی به صورت غیر اصولی راه های زیادی وجود دارد که معمولا توسط افراد مبتدی بکار گرفته میشود. ساخت منوی غیر استاندارد علاوه بر اینکه ممکن است در مرورگرهای مختلف پایایی کافی نداشته و ظاهر اصلی خود را از دست بدهد، از نظر HTML معنایی نیز برای مرورگرها و موتورهای جستجو قابل درک نیست. در طراحی صفحات وب، منوی افقی یک لیست محسوب می شود و باید با عناصر مخصوص ایجاد لیست پیاده سازی شود. در این ارسال چگونگی ساخت یک منوی استاندارد توسط HTML و CSS را شرح خواهم داد. [بیشتر]

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

شکستن متن طولانی دکمه های دراز و بدقواره به چند خط زیرهم
شاید در طراحی فرم ها مجبور شوید از دکمه ای استفاده کنید که عبارت نوشته شده در آن طولانی تر از حد معمول است. بنابراین ممکن است این دکمه دراز و بدقواره باعث ناهماهنگی در ظاهر فرم شما شود. در این حالت یکی از مناسبترین راه حل ها شکستن متن دکمه به چند خط و تبدیل دکمه افقی و بدشکل به یک دکمه جمع و جور است. اما همانطور که میدانید متنی که میخواهیم روی دکمه نمایش داده شود، باید در داخل خاصیت Value دکمه مورد نظر نوشته شود، پس چگونه می توان این متن طولانی را در خاصیت Value طوری نوشت که از هر کجا که ما میخواهیم کلمه و یا جمله بعدی شکسته شده و به خط بعد برود؟ [بیشتر]

8 اشتباه در استفاده از تگ های HTML

8 اشتباه در استفاده از تگ های HTML
پیشتر در ارسالی با عنوان 10 اشتباه در کدنویسی HTML که نباید مرتکب شوید مواردی را برای استفاده صحیح از نمادها در HTML بررسی کردیم. در این ارسال کلکسیونی از رایجترین اشتباهات در نحوه استفاده از تگ هایHTML را مورد بررسی قرار میدهم و در مورد هرکدام نحوه استفاده درست را با رعایت اصول و معنای تگ مورد نظر شرح خواهم داد. خطاهای مشترکی که در سورس کد اکثر وب سایت ها مشاهده و بارها و بارها تکرار شده اند و بسیاری از این اشتباهات، دیگر به عادت هایی تبدیل شده اند که ما در روزهای اول کدنویسی خود کسب کرده ایم. [بیشتر]

تفاوت بین HTML و XHTML چیست ؟

تفاوت بین HTML و XHTML چیست ؟
شاید این سوال برای شما هم مطرح شده باشد که به راستی تفاوت HTML و XHTML در چیست؟ اگر بخواهیم در یک جمله به این سوال پاسخ دهیم، می توان گفت XHTML نسخه بهبود یافته HTML است. ابتدا HTML برای ساخت صفحات وب عرضه شد و همزمان با پیشرفت های وب این زبان نیز تا نسخه HTML 4.0 ارتقا داده شد. با عرضه نسخه HTML 4.01 این زبان با قواعد XML ترکیب و در نهایت XHTML عرضه شد. بنابراین تفاوت میان HTML 4.01 و XHTML بسیار ناچیز است و خوب است بدانید عمده تفاوت بین HTML و XHTML قوانینی است که در نوشتن کدها باید مورد توجه قرار دهید تا صفحه وب شما بر پایه XHTML پیاده سازی شده باشد. در این ارسال تفاوت های اندک و ساده بین کدهای HTML و XHTML را شرح خواهم داد. [بیشتر]