• 6 تیر 1395
  • 11,754 نفر
  • 11 دیدگاه

چگونه روی عکس متن بنویسیم ؟

پیشگفتار : با سلام و عرض ادب ؛ امروز مطلبی جالب و مفید را به شما عزیزان در طراحی سایت آموزش خواهیم داد که میتواند به شما در طراحی سایت کمک زیادی بکند، در این آموزش قصد داریم نوشتن یک متن روی تصویر را توسط زبان html به شما دوستداران وب یاد دهیم.همچنان نوشتن متن روی تصویر میتوانید مزایا زیادی برای شما در طراحی سایت داشته باشد که از جمله طراحی یک تصویر ثابت و استفاده آن در تمام مکان های مختلف وب سایت خود و تنها با اضافه کردن چند خط کد نویسی اچ تی ام ال میتوانید از طراحی تعداد زیادی تصویر برای وب سایت خود صرفه جویی کنید . ( با ما همراه باشید )

آموزش نوشتن متن روی عکس توسط زبان html

هدف ما از این آموزش نوشتن متن روی عکس توسط زبان html میباشد که در طراحی سایت بهینه کاربرد زیادی دارد، همواره بدون اتلاف وقت و مقدمه سراغ کد نویسی و اصل مطلب میرویم ! از طریق کد زیر شما به راحتی میتوانید یک عکس را در سند html فراخوانی کنید و بر روی تصویر فراخوانی شده متن دلخواه و مورد نیاز خود را با فونت، سایز و مشخصات بسیاری اضافه کنید :

<!DOCTYPE html>
<html>
<head>
<style type="text/css"> 
.onvan{ 
text-align:center;
line-height: 13;
color:#FFFFFF;
 background-image:url('image.jpg'); 
 width:212px;
height:200px;
}
</style>
</head>
<body>
<div class="onvan"> متن شما </div>
</body>
</html>

راهنمای استفاده از کد فوق در کد نویسی های طراحی سایت :

  • از مقدار text-align برای تعیین موقعیت متن در تصویر استفاده میکنیم ، مقادیر قابل استفاده :

Center = موقعیت وسط عکس , Right = موقعیت سمت راست عکس , Left = موقعیت سمت چپ عکس , Top = موقعیت بالا عکس

  • از مقدار color برای تغییر رنگ متن خود استفاده کنید و مقادیر قابل استفاده :

رنگ مشکی = 2c3e50 # , رنگ سفید = ecf0f1 # , رنگ آبی = 1784d9 # , رنگ قرمز = ff5959 # , رنگ زرد =  f1c40f #

لول رنگ = مرجع کد رنگ برای طراحی سایت، کلیک کنید

  • از مقدار background-image برای فراخوانی تصویر در طراحی سایت استفاده میکنیم، مقادیر قابل استفاده :

در کد بالا به جای نام image.jpg میتوانید هر آدرس تصویر دیگری را قرار دهید .

  • از مقدار width برای تغییر سایز عرض استفاده میشود ، مقادیر مورد استفاده :

مقادیر مورد استفاده از 1px تا بینهایت میتواند باشد که بر حسب پیکسل محاسبه میشود و نسبت به نیاز خود میتوانید سایز را تنظیم کنید!

  • از مقدار height برای تغییر سایز ارتفاع استفاده میشود ، مقادیر مورد استفاده :

مقادیر مورد استفاده از 1px تا بینهایت میتواند باشد که بر حسب پیکسل محاسبه میشود و نسبت به نیاز خود میتوانید سایز را تنظیم کنید!

  • از قسمت “متن شما” میتوانید نام یا متن دلخواه خود را بنویسید.

امیدوارم از آموزش نوشتن متن روی عکس توسط زبان HTML ما راضی بوده باشید .

شاد و پیروز باشید

 
  • 15 فروردین 1395
  • 1,630 نفر
  • بدون دیدگاه

پیشگفتار مزایا بهینه سازی سایت : بهینه سازی سایت چگونه میتواند به رشد وب سایت ما و همچنین بالا رفتن بازدید و رتبه ما کمک کند ؟ آیا  امری اجباری است ؟ چگونه سایت خود را سئو ( بهینه سازی سایت ) کنیم ؟ برای آشنایی با سئو یا همان مزایا بهینه سازی سایت و آموزش سئو استاندار سایت ها با ما همراه باشید.

(بیشتر…)

 
  • 27 شهریور 1394
  • 4,914 نفر
  • 5 دیدگاه

استاندارد های بهینه سازی سایت چیست ؟

پیشگفتار : با سلام و عرض ادب، در این پست قصد دارم به شما آموزش بدهم چگونه رتبه سایت خود را افزایش دهید (آموزش سئو سایت) و بازدید کنندگان بیشتری داشته باشید.

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

مواردی که در سئو قالب سایت (طراحی سایت بهینه و استاندارد) تاثیر زیادی دارد :

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

  1. نام سایت ( لاتین : username.com )
    هر چه تعداد کاراکتر (حروف) های نام دامنه شما کمتر باشد ارزش بیشتری دارد.
  2. عنوان سایت
    بهترین تعداد نام گذاری 60 کاراکتر است و حداکثر نیز تا 70 کاراکتر میتوانید وارد کنید که بهتر است در 60 کاراکتر از بهترین عنوان با استفاده از بکار بردن کلمات کلیدی مربوط به سایت خود عنوان را انتخاب کنید.
  3. متا توضیحات سایت ( لاتین : Description )
    بهترین تعداد کاراکتر برای انتخاب توضیحات سایت 150 کاراکتر میباشد که میتوان گفت این یک بخش مهم است که باید آن را با کلمات کلیدی مهم خود بسازید.
  4. کلمات کلیدی ( لاتین: keywords )
    کلمات کلیدی باید به نحوی تعیین گردد که متناسب با عنوان و موضوع فعالیت شما باشد و تعداد آن کم نباشد! (مثلا : 5 کلمه کلیدی کم است)
  5. تگ عنوان ( لاتین: Headings )
    برای عنوان های خود حتمأ از تگ های h1 تا h6 استفاده کنید { در صورت لزوم }، حواستون باشه که در یک صفحه تنها فقط یک عنوان با تگ h1 باید وجود داشته باشد و بیشتره آن باعث سئو منفی میشود و زحمت های شما را خراب میکند چون تگ h1 در دسته عنوان سر قرار میگیرد و در هر صفحه یکبار بیشتر نباید استفاده شود و تگ h2 بهتر است دوبار بیشتر استفاده نشود و تگ های بعدی نیز به ترتیب استفاده شود.
  6. وضعیت عکس ها ( لاتین : image alt tag )
    توجه کنید در صفحات سایت خود هر تصویری (عکس) قرار دادید از تگ alt استفاده کنید اینکار در سئو مثبت سایت ( طراحی سایت بهینه و استاندارد ) شما تاثیر بسیار زیادی دارد و کاره این تگ این است که توضیح مختصری از عکس به کاربر میده که شما حتمأ باید از آن استفاده کنید.
  7. پیوند و لینک به شما ( لاتین : Backlink )
    بکلینک چیست ؟ همان پیوند یا لینک است که از سایت دیگری میگیرید در اصل به زبان ساده تر میشه گفت وقتی سایت دیگه ای لینک شما را در سایتش قرار بده بکلینک شما میشه اون سایت! نکته مهم در این بخش این است که بکلینک شما باید از یک سایت قدرتمند با رتبه گوگل (پیج رنک – Page Rank) و الکسا ( لاتین : Alexa ) بالا باشد که در رتبه شما نیز تاثیر مثبت داشته باشد.
  8. زمان بارگزاری صفحه (لاتین : Load Page )
    برای اینکه بتوانید باید حجم سایت شما تا آنجایی که میشود کم کنید و سعی کنید اگر مطلبتان حجیم شد مطالب را در پست های بعدی و به صفحات بعدی واگذار کنید.
  9. ویرایشگر ( لاتین : Encoding)
    نسبت به نیاز خود از Encoding مناسب استفاده کنید (مثال : برای زبان فارسی Utf-8 مناسب است )
  10. نقشه سایت ( لاتین : Site Map )
    هر سایت باید یک نقشه سایت داشته باشد.
  11. موارد حرفه ای تر را در مطلب بعدی منتشر خواهم کرد.
  • اکنون اگر تا مرحله 10 را انجام دادید میتوانید سایت خود را در یکی از سایت های بررسی سئو مشاهده کنید و رتبه خود را مشاهده و لذت ببرید.
  • آیا این مطلب برای طراحی سایت بهینه و استاندارد  به شما کمک کرد ؟ لطفأ ما در ارسال نظرات خود مطلع کنید.

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