محل تبلیغات شما سرور ایران

  1. مهمان گرامی، جهت ارسال پست، دانلود و سایر امکانات ویژه کاربران عضو، لازم است که ثبت نام کنید.

(--(: ترفندهای HTML & CSS :)--!)

شروع موضوع توسط AftabGardoon ‏13/2/18 در انجمن Html

  1. کاربر فعال طراحی و برنامه نویسی کاربر ارزشمند

    تاریخ عضویت:
    ‏15/8/17
    ارسال ها:
    2,726
    تشکر شده:
    10,400
    امتیاز دستاورد:
    113
    حرفه:
    عابیاری عه گیاهان دریایی
    محل سکونت:
    شمال!
    [​IMG]
     
    DaniyaL از این پست تشکر کرده است.
  2. کاربر فعال طراحی و برنامه نویسی کاربر ارزشمند

    تاریخ عضویت:
    ‏15/8/17
    ارسال ها:
    2,726
    تشکر شده:
    10,400
    امتیاز دستاورد:
    113
    حرفه:
    عابیاری عه گیاهان دریایی
    محل سکونت:
    شمال!
    قرار دادن favicon
    منظور از favicon همون F خوشگلع روی tab های مربوط به تاپ فرومه مثلن:))
    حالا نحوه قرار دادن این آیکون

    برای اینکار باید کد زیر رو به قسمت <head> اضافه کنید :
    HTML:
    <link rel="shortcut icon" href="http://yoururl/favicon.ico" title="Favicon" />
    این هم یک نمونه کامل :

    HTML:
    <head>
    
        <title>your website title</title>
        <link rel="shortcut icon" href="http://example.com/favicon.ico" title="Favicon" />
        <link rel="stylesheet" href="http://example.com/style.css" type="text/css"/>
    </head>
    <body>
        can you see favicon ?
    </body>
    به نکات زیر هم توجه داشته باشید :

    • قبلا آیکون مورد نظرتون رو آپلود کرده باشید و مسیرش با مسیری که داخل کد نوشتید یکی باشه.
    • اگه از فرمت های دیگه به غیر از ico استفاده کنید امکان داره برخی مرورگرها نشون ندن.
    • معمولا بهتره فرمت آیکون رو ico و مسیرش رو root انتخاب کنید.
    اینم یه مبدل آنلاین خوب برای تبدیل عکس به favicon که میتونید ازش استفاده کنید : فقط کاربران عضو می توانند لینک ها را مشاهده کنند. برای عضویت اینجا کلیک کنید.
     
    DaniyaL و Shahab از این پست تشکر کرده اند.
  3. کاربر فعال طراحی و برنامه نویسی کاربر ارزشمند

    تاریخ عضویت:
    ‏15/8/17
    ارسال ها:
    2,726
    تشکر شده:
    10,400
    امتیاز دستاورد:
    113
    حرفه:
    عابیاری عه گیاهان دریایی
    محل سکونت:
    شمال!
    ۶ ترفند HTML که در دیده شدن سایت شما کمک میکند
    شما یک سایت عالی طراحی کردید؛ اما چگونه میتوانید بازدیدکنندگان سایتتان را جذب کنید و کاری کنید که سایتتان بازدیدکننده بیشتری داشته باشد؟بهتر است بدون مقدمه برویم سر اصل مطلب:ترفندهای html زیر در این زمینه به شما کمک میکند

    تگ عنوان( Title Tag )
    تگ عنوان بخش ضروری رنکینگ و رسیدن به مشتری است؛هر صفحه باید تگ خاص خودش را داشته باشد و در صورت امکان شامل کلماتی باشد که مشتری به احتمال زیاد در جعبه جستجو وارد میکند برای مثال اگر شما دستبند چرمی میفروشید عبارت”دستبند چرمی” باید در عنوان ذکر شود.سعی کنید تا حد امکان از تگ عنوان کوتاه و مختصر استفاده کنید.

    توضیحات صفحه (Meta Description)
    از همان ابتدا شما باید اطلاعات دقیق و درست از صفحه تان داشته باشید؛این توضیحات اغلب در نتایج جستجو دیده می شود و این فاکتور مهمی است برای اینکه مشتری را برای کلیک بر روی آن صفحه ترغیب کند.به جای تمرکز روی عبارات کلیدی در توضیحات این را در نظر بگیرید که شما برای فروش محصولاتتان نیاز دارید که آنها را متقاعد کنید تا اطلاعات بیشتر از آنچه عرضه میدهید کسب کنند.

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

    Rich snippets
    اسنیپت ها به بهتر ایندکس شدن مطالب وب سایت کمک میکند و تاثیر بسیار در سئو وب سایت و رنکینگ در موتورهای جستجو دارد.ریچ اسنیپت ها میتوانند شامل رتیه بندی یک محصول,پیشنهادات ویژه,در دسترس بودن محصول,و مشخصات دیگر باشد.برای گذاشتن کد اسنیپت در اچ تی ام ال نیاز نیست که یک توسعه دهنده حرفه ای باشید.

    فقط کاربران عضو می توانند لینک ها را مشاهده کنند. برای عضویت اینجا کلیک کنید.

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

    تگ تصاویر ( Image Tags )
    استفاده از تصاویر افراد را به خواندن متن ترغیب میکند و مهمتر اینکه نباید مشخصه alt و title را فراموش کنید.استفاده از این دو مشخصه کمک زیادی به بهبود سئو وب سایت شما میکند.مشخصه ALT آنچه که در تصویر است را توصیف می کند و به ویژه در فروشگاه های اینترنتی موجب فروش بیشتر می شود.
     
    Shahab و DaniyaL از این پست تشکر کرده اند.
  4. کاربر فعال طراحی و برنامه نویسی کاربر ارزشمند

    تاریخ عضویت:
    ‏15/8/17
    ارسال ها:
    2,726
    تشکر شده:
    10,400
    امتیاز دستاورد:
    113
    حرفه:
    عابیاری عه گیاهان دریایی
    محل سکونت:
    شمال!
    تغییر رنگ متن در حالت انتخاب شده
    ممکن نیست که این ترفند را بلد بوده باشید!
    شما به کمک CSS می توانید رنگ متن صفحات وب را در حالت انتخاب شده مشخص کنید. این ترفند دست کم در مرورگر های جدید نظیر safari و firefox کار می کند.

    HTML:
    /**
    * Safari and Opera
    */
    ::selection {
      background: #c3effd;
      color: #000; 
    }
    /**
    * Firefox
    */
    ::-moz-selection {
      background: #c3effd;
      color: #000;
    }
    همانطور که می بینید، با استفاده از انتخابگر ::selection می توانید متن های انتخاب شده را هدف قرار دهید.
     
    Shahab و DaniyaL از این پست تشکر کرده اند.
  5. کاربر فعال طراحی و برنامه نویسی کاربر ارزشمند

    تاریخ عضویت:
    ‏15/8/17
    ارسال ها:
    2,726
    تشکر شده:
    10,400
    امتیاز دستاورد:
    113
    حرفه:
    عابیاری عه گیاهان دریایی
    محل سکونت:
    شمال!
    جلوگیری از جهش اسکرول فایرفاکس
    اگر سایز محتوا از سایز پنجره کمتر باشد، معمولا فایرفاکس اسکرول را مخفی می کند.
    مشکلی که گاها پیش می آید این است که در صورتی که به هر دلیل سایز محتوا تغییر کند یا سایز پنجره نسبت به محتوا تغییر کند، نوار اسکرول مجددا ظاهر می شود و باعث تولید جهش در صفحه می شود.
    در صورتی که می خواهید اسکرول همواره در فایرفاکس نمایان باشد، می توانید از دستور زیر استفاده کنید:

    HTML:
    html {
      overflow-y: scroll;
    }
     
    Shahab و DaniyaL از این پست تشکر کرده اند.
  6. کاربر فعال طراحی و برنامه نویسی کاربر ارزشمند

    تاریخ عضویت:
    ‏15/8/17
    ارسال ها:
    2,726
    تشکر شده:
    10,400
    امتیاز دستاورد:
    113
    حرفه:
    عابیاری عه گیاهان دریایی
    محل سکونت:
    شمال!
    شکستن صفحات و رفتن به صفحه ی بعد هنگام پرینت
    گرچه اکثر کاربران اینترنت ترجیح می دهند که صفحات وب را به صورت آنلاین مطالعه کنند، اما بعضی از کاربران شما ممکن است بخواهند متن مقاله را پرینت بگیرند و سپس مطالعه کنند.
    به کمک CSS می توانید محل شکسته شدن صفحات و رفتن به صفحه ی بعد در هنگام پرینت را کنترل کنید. فقط کافی است که کد CSS زیر را به استایل های خود اضافه کنید و سپس به هر تگی که می خواهید در صفحه ی بعد چاپ شود، کلاس page-break را انتساب دهید.

    HTML:
    .page-break {
      page-break-before: always;
    }
     
    Shahab از این پست تشکر کرده است.