قرار دادن 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 که میتونید ازش استفاده کنید : dynamicdrive.com
۶ ترفند HTML که در دیده شدن سایت شما کمک میکند شما یک سایت عالی طراحی کردید؛ اما چگونه میتوانید بازدیدکنندگان سایتتان را جذب کنید و کاری کنید که سایتتان بازدیدکننده بیشتری داشته باشد؟بهتر است بدون مقدمه برویم سر اصل مطلب:ترفندهای html زیر در این زمینه به شما کمک میکند تگ عنوان( Title Tag ) تگ عنوان بخش ضروری رنکینگ و رسیدن به مشتری است؛هر صفحه باید تگ خاص خودش را داشته باشد و در صورت امکان شامل کلماتی باشد که مشتری به احتمال زیاد در جعبه جستجو وارد میکند برای مثال اگر شما دستبند چرمی میفروشید عبارت”دستبند چرمی” باید در عنوان ذکر شود.سعی کنید تا حد امکان از تگ عنوان کوتاه و مختصر استفاده کنید. توضیحات صفحه (Meta Description) از همان ابتدا شما باید اطلاعات دقیق و درست از صفحه تان داشته باشید؛این توضیحات اغلب در نتایج جستجو دیده می شود و این فاکتور مهمی است برای اینکه مشتری را برای کلیک بر روی آن صفحه ترغیب کند.به جای تمرکز روی عبارات کلیدی در توضیحات این را در نظر بگیرید که شما برای فروش محصولاتتان نیاز دارید که آنها را متقاعد کنید تا اطلاعات بیشتر از آنچه عرضه میدهید کسب کنند. مجموعه کاراکتر(Charset) این صفت برای تفهیم مرورگر از بابت مجموعه کاراکتر های استفاده شده در صفحه می باشد تا صفحه به درستی نمایش داده شود. این گزینه را در داخل تگ مشخص می کنیم. Rich snippets اسنیپت ها به بهتر ایندکس شدن مطالب وب سایت کمک میکند و تاثیر بسیار در سئو وب سایت و رنکینگ در موتورهای جستجو دارد.ریچ اسنیپت ها میتوانند شامل رتیه بندی یک محصول,پیشنهادات ویژه,در دسترس بودن محصول,و مشخصات دیگر باشد.برای گذاشتن کد اسنیپت در اچ تی ام ال نیاز نیست که یک توسعه دهنده حرفه ای باشید. تگ هدر( Header Tags ) تگ های هدر روش اصولی برای شناسایی بخش کلیدی یک صفحه وب است؛اگر شما از کلماتی که میخواهید در جستجوی مرورگر پیداشوند در تگ ها استفاده کنید شانس شما افزایش می یابد.برخی افراد کل پاراگراف را در تگ قرار می دهند اما این کمک نمیکند.تگ هدر زمانی مفید هست که منعکس کننده کلیت مطلب صفحه وب باشد.تیتر اصلی را در تگ h1 و عناوین فرعی را در h2 قرار دهید.استفاده از این تگ ها رنکینگ و رتبه سایت شما را بالا می برد. تگ تصاویر ( Image Tags ) استفاده از تصاویر افراد را به خواندن متن ترغیب میکند و مهمتر اینکه نباید مشخصه alt و title را فراموش کنید.استفاده از این دو مشخصه کمک زیادی به بهبود سئو وب سایت شما میکند.مشخصه ALT آنچه که در تصویر است را توصیف می کند و به ویژه در فروشگاه های اینترنتی موجب فروش بیشتر می شود.
تغییر رنگ متن در حالت انتخاب شده ممکن نیست که این ترفند را بلد بوده باشید! شما به کمک CSS می توانید رنگ متن صفحات وب را در حالت انتخاب شده مشخص کنید. این ترفند دست کم در مرورگر های جدید نظیر safari و firefox کار می کند. HTML: /** * Safari and Opera */ ::selection { background: #c3effd; color: #000; } /** * Firefox */ ::-moz-selection { background: #c3effd; color: #000; } همانطور که می بینید، با استفاده از انتخابگر ::selection می توانید متن های انتخاب شده را هدف قرار دهید.
جلوگیری از جهش اسکرول فایرفاکس اگر سایز محتوا از سایز پنجره کمتر باشد، معمولا فایرفاکس اسکرول را مخفی می کند. مشکلی که گاها پیش می آید این است که در صورتی که به هر دلیل سایز محتوا تغییر کند یا سایز پنجره نسبت به محتوا تغییر کند، نوار اسکرول مجددا ظاهر می شود و باعث تولید جهش در صفحه می شود. در صورتی که می خواهید اسکرول همواره در فایرفاکس نمایان باشد، می توانید از دستور زیر استفاده کنید: HTML: html { overflow-y: scroll; }
شکستن صفحات و رفتن به صفحه ی بعد هنگام پرینت گرچه اکثر کاربران اینترنت ترجیح می دهند که صفحات وب را به صورت آنلاین مطالعه کنند، اما بعضی از کاربران شما ممکن است بخواهند متن مقاله را پرینت بگیرند و سپس مطالعه کنند. به کمک CSS می توانید محل شکسته شدن صفحات و رفتن به صفحه ی بعد در هنگام پرینت را کنترل کنید. فقط کافی است که کد CSS زیر را به استایل های خود اضافه کنید و سپس به هر تگی که می خواهید در صفحه ی بعد چاپ شود، کلاس page-break را انتساب دهید. HTML: .page-break { page-break-before: always; }
استفاده از دستور importanat! طراحان با تجربه، از کاربرد این دستور اطلاع دارند، اما معمولا تازه کارها، از این دستور importanat! در CSS بی اطلاع هستند و تعجب می کنند. با افزودن دستور importanat! به انتهای دستور css تان، اولویت دستور مورد نظر را نسبت به دستورات دیگر که با آن در تضاد هستند، افزایش می دهید. در کد زیر، رنگ زمینه، به دلیل وجود importanat! آبی خواهد بود (و نه قرمز) کد: .page { background-color: blue !important; background-color: red; } کاربرد روش فوق وقتی است که شما یک css rule می نویسید، اما متوجه می شوید که هیچ تاثیری ندارد! دلیل این مسئله احتمالا این است که یک دستور دیگر با اولویت بالاتر وجود دارد که اثر دستور شما را خنثی می کند. برای این که دستور شما اولویت بالا تری داشته باشد و اثر دستورات دیگر را خنثی کند، می توانید از importanat! استفاده کنید.
ارتفاع حداقل که در تمامی مرورگر ها کار می کند. متاسفانه مرورگر Internet Explorer دستور min-height در CSS را درک نمی کند و لذا نمی توان با دستور فوق، ارتفاع حد اقل را در IE مشخص نمود. برای حل این مشکلی می توانید از ترفند زیر استفاده کنید. کد: #container{ /* all browsers except ie6 will respect the !important flag */ height: auto !important; min-height: 500px; /* Should have the same value as the min height above */ height: 500px; }
مشخص کردن لینک هایی که در پنجره ی جدید باز می‌شوند. کد CSS زیر سبب می شود که لینک هایی که در پنجره ی جدید باز می شوند، را با استایل ویژه نمایان می کند. به این ترتیب، بازدیدکنندگان سایت، قبل از این که بر روی لینک کلیک کنند، می دانند که این لینک در یک پنجره یا تب جدید باز خواهد شد کد: a[target="_blank"]:before, a[target="new"]:before { margin: 0 5px 0 0; padding: 1px; outline: 1px solid #333; color: #333; background: #ff9; font: 12px "Zapf Dingbats"; content: "\279C"; } به انتخابگر a[target="_blank"] توجه کنید. در CSS می توان تگ های html را بر اساس مقادیر خواص آن ها فیلتر کرد. برای این منظور همانطور که می بینید، مقدار خواص را در درون [] قرار می دهیم. در این دستور لینک هایی که دارای خاصیت target="_blank" هستند را انتخاب کرده ایم. یعنی لینک هایی که در یک تب جدید باز می شوند. به کلاس کاذب :before و :after توجه کنید. این دو کلاس، تگ خاصی را هدف نمی گیرند، بلکه فقط یک نقطه ی خالی در قبل یا بعد تگ مربوطه را انتخاب می کنند. به دستور content در CSS توجه کنید. به کمک دستور content می توان یک کاراکتر یا یک متن را در قبل یا بعد از یک تگ قرار داد. توجه کنید که دستور content فقط زمانی قابل استفاده است که از کلاس کاذب :after و یا :before استفاده شده باشد. در کد فوق، ما یک علامت \279C که به صورت یک فلش نمایش داده می شود در قبل و بعد لینک ها قرار داده ایم.
استفاده از حروف بزرگ در اولین حرف مقاله شما می توانید حرف اول مقاله تان را همانند روزنامه ها و مجلات ، بزرگ کنید! برای ایجاد این جلوه، می توانید از کلاس کاذب: first-letter استفاده کنید. کد: p:first-letter { display: block; margin: 5px 0 0 5px; float: left; color: #FF3366; font-size: 3.0em; font-family: Georgia; }
