آرشیو نویسنده : admin

22 Jan

قرار دادن عکس در صفحات وب

در html عکس با تگ <img> تعریف می شود.برای این تگ یک سری اتریبیوت مشخص شده است. با اتریبیوت src مسیر عکس مورد نظر را مشخص می کنیم.

<img src="url" alt="some_text" style="width:width;height:height;">

 

اتریبیوت alt در html:

با این اتریبیوت برای عکس ها یک متن قرار می دهیم در صورتی عکس در مسیری که با src مشخص شده وجود نداشته باشد و مرورگر نتواند عکس را نمایش دهد به جای آن متنی که به عکس اختصاص داده شده را نمایش می دهد.اگر این اتریبیوت برای عکس های صفحه وب سایت قرار داده نشود آن صفحه اعتبار ندارد.

لیست در css
18 Jan

لیست در css

در این بخش از آموزش css به بررسی لیست د css می پردازیم.دو نوع لیست در css وجود دارد. لیست های مرتب و لیست های نامرتب.

لیست های نامرتب <ul> :

این لیست ها با یک دایره توپر نمایش داده می شوند.

لیست های مرتب <ol> :

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

لیست مرتب و نامرتب

لیست مرتب و نامرتب

خاصیت  list-style-type:

این خاصیت برای انواع لیست ها bullet تعریف می کند یعنی مشخص می کند کنار آیتم های لیست علامتی نمایش دهد .

مقدار هایی که برای این خصوصیت مشخص شده اند عبارتند از:

disc , none , square , lower-greek , decimal , decimal-leading-zero , armenian , upper-roman , lower-latin , upper-latin , georgian , circle , lower-roman ,

 

به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>

<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

</body>
</html>

مقدار پیشفرض برای لیست های نامرتب disc وبرای لیست های مرتب decimal می باشد.
نشانگر آیتم های لییست یا بالت ها برای برای لیستهای نامرتب square ،  circle و disc و none می باشد و بقیه برای لیست های مرتب می باشند.

خاصیت list-style-image :

برای نشانه گذاری آیتم های لیست از عکس هم می توان استفاده کرد.
به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

</body>
</html>

خروجی:
list2

خاصیت list-style-position:

این خاصیت موقعیت بالت ها را در لیست ها مشخص می کند که دو مقدار تعریف شده دارد.
Inside : با این مقدار بالت در آیتم های لیست نمایش داده می شود.
Outside : با این مقدار بالت در خارج آیتم های لیست نمایش داده می شود.
به مثال زیر توجه کنید.

<!DOCTYPE html>
<html>
<head>
<style>
.inside {
list-style: square inside url("sqpurple.gif");
}
.Outside {
list-style: square Outside url("sqpurple.gif");
}
</style>
</head>
<body>

<ul class="inside">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="Outside">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

</body>
</html>

خروجی:

خاصیت list-style-position

خاصیت list-style-position

آموزش html | لینک در html
11 Jan

آموزش html | لینک در html

در این بخش از آموزش html به طور کامل با تگ لینک و کاربرد آن آشنا می شویم. شما با لینک در html می توانید بین صفحات سایت ارتباط برقرار کنید.ایجاد لینک داخلی در html بسیار مهم است.لینک فقط متن نیست ،‌لینک می تواند عکس یا هر المنت دیگر html  باشد.
لینک با تگ <a> تعریف می شود.ساختار کلی لینک به صورت زیر است.

 <a href="url">link text</a>

اتریبیوت href  در لینک

این اتریبیوت،‌ آدرس صفحه ی مقصد می باشد.در ساختار بالا تنها چیزی که برای کاربر نمایش داده می شود متن لینک است.با کلیک روی متن کاربر به آدرس صفحه موردنظر هدایت می شود.

رنگ لینک در html

مرورگر ها به صورت پیش فرض استایل هایی برای حالت های مختلف لینک در نظر گرفته اند که در همه مرورگر ها یکسان می باشد.

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

اتریبیوت target در html

این اتریبیوت مشخص می کند که سند مورد نظر کجا نمایش داده شود.مقدار هایی که می توان به target اختصاص داد عبارتند از:

_blank
_self
_parent
_top

 

باز شدن لینک در صفحه جدید

برای باز شدن لینک در تب جدید باید اتریبیوت  target=”_blank”  باشد.

باز شدن لینک در همان پنجره یا قاب

اگر مقدار تارگت برابر target=”- self” باشد لینک در همان پنجره یا قابی که کلیک شده باز خواهد شد.

باز شدن لینک در قاب اصلی

اگر مقدار تارگت برابر target=”-parent” باشد لینک در قاب مادر یا اصلی باز می شود.

باز شدن لینک در پنجره ای که کلیک شده

اگر مقدار تارگت برابرtarget=”-top”  باشد لینک در همان پنجره ای که کلیک شده به صورت کامل باز می شود.

ساخت عکس لینک دار

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

<a href="default.html">
<img src="smiley.gif" alt="عنوان عکس" style="width:42px;height:42px;border:0;">
</a>

 

لینک در css
09 Jan

لینک در css

می توان به لینک در css استایل های متفاوتی داد ، با  color, font-family, background و … ظاهر لینک از متن عادی متمایز می شود. در مثال زیر با دستور color  رنگ لینک را تغییر دادیم.

<!DOCTYPE html>
<html>
<head>
<style>
a {
color: hotpink;
}
</style>
</head>
<body>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

</body>
</html>

 

علاوه بر این می توان استایل لینک را در وضعیت های مختلف تغییر داد .
a:link  استایل لینک در وضعیت عادی
a:visited  استایل لینک وقتی که توسط کاربر مشاهده شده است
a:hover  استایل لینک زمانی که موس روی لینک قرار می گیرد.
a:active  استایل لینک در لحظه ای که روی آن کلیک  و انتخاب می شود.

دستور  Text Decoration برای لینک :

از خصوصیت Text Decoration معمولا زمانی استفاده می شود که می خواهیم خط زیر لینک در css حذف شود .به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<a href="default.asp" target="_blank">لینک </a>
</body>
</html>

 

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

دستور Background Color برای لینک :

می توان برای وضعیت های مختلف لینک در css استایل های متفاوتی تعیین کرد.

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
background-color: yellow;
}

a:visited {
background-color: cyan;
}

a:hover {
background-color: lightgreen;
}

a:active {
background-color: hotpink;
}
</style>
</head>
<body>

a href="default.asp" target="_blank">This is a link</a>

</body>
</html>

 

با توجه نیاز قالب می توان استایل لینک را را تغییر دهیم مثلا لینک را به صورت باکس یا دکمه درست کنیم.

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>

<a href="default.asp" target="_blank">لینک به صورت دکمه</a>

</body>
</html>

 

تولید محتوا برای سئو بهتر
08 Jan

تولید محتوا برای سئو بهتر

در این مقاله مهمترین نکات تولید محتوا برای سئو که باعث بهبود جایگاه سایت شما در موتور های جستجوگر می شود را بیان میکنیم:
پیوندهای داخلی

بر اساس اینکه دسترسی به مطالب سایت شما پس از ورود وی به صفحه‌ی اصلی سایت چه مقدار آسان و سریع باشد، اثرگذاری سئوی سایت شما نیز افزایش خواهد یافت. به این معنی که کاربر با کمترین تعداد کلیک می‌بایست بتواند به عمیق‌ترین صفحات داخلی شما دسترسی پیدا کند. برای انجام این کار، ایجاد پیوندهای داخلی بین صفحات سایت یک روش کارآمد و موثر به شمار می‌رود. برای مثال در صفحات داخلی «طراحی سایت» می‌توانید پیوندهای مرتبطی به «طراحی سایت با وردپرس» و «طراحی سایت با php» قرار دهید. اگر از سیستم‌های مدیریت محتوا استفاده می‌کنید، کمک گرفتن از افزونه‌هایی که به صورت خودکار مطالب مرتبط را به کاربران پیشنهاد می‌دهند می‌تواند حرکت در این مسیر را برای شما آسان‌تر نماید.

همچنین طبقه‌بندی دقیق و علمی مطالب سایت در «دسته‌ها» و اضافه کردن تعداد منطقی «برچسب‌ها» یا «Tag»ها ابزاری است که دستیابی به این هدف را بیش از پیش آسان می‌کند.

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

seo-content
آدرس URL را طوری انتخاب کنید که در جهت بهینه سازی سایت باشد

در عنوان نویسی آدرس های URL استفاده شده در طراحی سایت خود دقت کنید. آدرسهای URL خود را هر چه می توانید کوتاه و گویا و در عین حال مرتبط با موضوع بنویسید. گوگل برای 3-5 کلمه نخست آدرس URL ارزش زیادی را در جهت رتبه بندی سایت در نظر می گیرد. به مطلب بهینه سازی نشانی اینترنتی به منظور بهینه سازی سایت نیز نگاهی بیندازید.
شروع عنوان مطلب با واژه کلیدی

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

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

واژه های کلیدی موجود در طراحی سایت شما باید در 100-150 واژه نخست مطلب شما نوشته شود.
بالا بردن سرعت بارگذاری صفحه طراحی سایت

گوگل سرعت بارگذاری صفحه را به منزله عامل اصلی در بهینه سازی سایت ارزیابی می کند. سرعت بارگداری صفحه هایی که بیش از چهار ثانیه باشد کاربران تمایلی برای ورود به آن صفحه نشان نخواهند داد و آنجا را ترک خواهند کرد. می توانید سرعت بارگذاری صفحه های سایت تان را از سایت http://gtmetrix.com/ بسنجید.

رنگ در  html
07 Jan

رنگ در html

در طراحی صفحات وب سایت لازم است که برای رنگ متن و بک گراند و …. رنگ تعیین کرد.به سه روش می توان از رنگ در  html استفاده کرد.

– نام رنگ در html

در این روش کافی است از نام رنگ ها استفاده کرد .به عنوان مثال red , blue , pink

رنگ در html

رنگ در html

نحوه استفاده از نام رنگ در html با یک مثال :

<html>
<head>
</head>

<body bgcolor="pink">

<p>
this is a paragraph .
</p>

</body>
</html>

 

– رنگ با کد  rgb

این کد از سه رنگ اصلی قرمز و سبز و آبی تشکیل شده است که با تغییر میزان آن ها رنگ ای متفاوت ایجاد می شود. rgb(red, green, blue)  عددی که برای هر سه رنگ در نظر گرفته شده است از 0 تا 255 می باشد.
به عنوان نمونه:
rgb(255,0,0)
این کد رنگ قرمز را نمایش می دهد.
rgb(0,0,0)
این کد رنگ سیاه را نمنایش می دهد.
rgb(255,255,255)
این کد رنگ سفید را نمایش می دهد.
برخی از رنگ ها در تصویر زیر نمایش داده شده است.

رنگ در html

رنگ در html

نحوه استفاده از کد rgb رنگ در html با یک مثال :

<!DOCTYPE html>
<html>
<body>

<h2 style="background-color:rgb(0,255,0)">
Background-color set by using rgb(0,255,0)
</h2>

</body>
</html>

 

– رنگ با کد  HEX

در این روش برای هررنگ یک کد شش رقمی در نظر گرفت شده است که این کد از 0 تا 9 و از A تا F می باشد.

رنگ در html

رنگ در html

نحوه استفاده از کد HEX رنگ در html با یک مثال :

<!DOCTYPE html>
<html>
<body>

<h2 style="background-color:#808080;color:white">
Background-color set by using #808080
</h2>

</body>
</html>

 

تگ های Heading  و قالب بندی متن در html
28 Dec

تگ های Heading و قالب بندی متن در html

در این بخش آموزش html  به بررسی تگ های  heading  و قالب بندی متن در html  و بررسی تگ های کاربردی برای قالب بندی متن می پردازیم

تگ های Heading

تگ های heading بسیار مهم هستند ، موتور های جستجو با توجه به عنوان تگ های heading محتوا را ایندکس می کنند.
کاربران صفحات را با توجه به عنوان آن ها می خوانند.
تگ های heading ابه ترتیب اولویتشان از 1 تا 6 هستند.
که مهم ترین تگ h1 می باشد و کم اهمیت ترین h6 است.

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

 

ایجاد خط در html :

برای ایجاد خط از تگ <hr> استفاده می شود.

پاراگراف در html :

برای ایجاد پاراگراف در اچ تی ام ال از تگ <p>……</p> استفاده می شود.

<br> در html:

برای رفتن به خط بعدی و ایجاد شکستگی در خط از تگ
<br>
استفاده می شود.

تگ <pre> در html

تگ <pre> برای نمایش همان گونه که در کد نوشته شده است نمایش داده می شود.مثلا اگر در کدها فاصله ای وجود داشته باشد یا به خط دیگه رفته باشد در مرورگر هم همانگونه نمایش داده می شود.

<pre>
*
****
*******
*********
</pre>

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

قالب بندی متن در html

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

تگ <b>:

متن را به صورت توپر نمایش می دهد.

تگ <em> :

برای متن تاکید شده استفاده می شود.

تگ <i>:

برای نمایش متن به صورت مورب است

تگ <small>:

برای نمایش متن به صورت کوچک تر استفاده می شود.

تگ <strong>:

برای نمایش متن های مهم و به صورت توپر از این تگ استفاده می شود.

تگ <sub> :

برای نمایش متن به صورت زیرنویس دار از این تگ استفاده می شود.

تگ <ins>:

برای تعریف متن درج شده استفاده شود.

تگ <del>:

برای تعریف متن حذف شده می باشد.

تگ <code> :

برای تعریف متن کد کامپیوتر است.

تگ <kbd> :

برای تعریف متن صفحه کلید است.

تگ <samp> :

برای تعریف نمونه کد کامپیوتر می باشد.

تگ <var> :

برای تعریف متغیر است.

 <p>Einstein wrote: <var>E</var> = <var>m</var><var>c</var><sup>2</sup>.</p>

نتیجه:
Einstein wrote: E = mc2.

تگ <pre> :

برای تعریف متن با چیدمان مشخص است.

تگ <abbr> :

برای تعریف مخفف یا سرنام می باشد به عنوان مثال برند یک شرکت از چند کلمه تشکیل شده با این تگ زمانی که موس روی مخفف هاور می شود کل متن نمایش داده می شود.

 <abbr title="World Health Organization">WHO</abbr>

 

تگ <address> :

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

تگ <blockquote>:

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

تگ <q>:

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

تگ های کاربردی قالب بندی متن در html  موارد بالا می باشند.

کامنت گذاشتن در html:

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

 <!-- Write your comments here -->
استفاده از تگ کنونیکال در محتوای تکراری
25 Dec

استفاده از تگ کنونیکال در محتوای تکراری

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

یکی از اشتباهات رایج در میان وبمستران، استفاده نادرست از تگ کنونیکال (rel= canonical) است که موجب اشتباه گوگل هنگام ایندکس مطالب سایت شده و برخی از صفحات را اشتباها به عنوان محتوای تکراری در نظر می گیرد. کاربرد اصلی تگ authorized در تعیین آدرس اصلی محتوا برای ایندکس گوگل است. استفاده نادرست از این تگ باعث می شود که سیگنال های رتبه گیری در نتایج گوگل میان این صفحات تقسیم شده و نهایتا رتبه خوبی نصیب صفحه اصلی محتوا نشود.

با گسترش بازاریابی محتوایی در جهان و ایران به عنوان ابزار کمکی برای سئو سایت، رقابت در تولید محتوا در برخی حوزه ها بشدت بالا گرفته است. حال استفاده نادرست از تگ authorized به معنای این است که شما رقیب خود در سئو شده اید و به تعداد رقبایتان در رسیدن به صدر نتایج گوگل افزوده شده است. با اینکه این نکات تکنیکال سئو ساده به نظر می رسد، اما بسیاری از سایت های مشهور نیز آن ها را به درستی اجرا نکرده و ترافیک ورودی شان از گوگل کاهش می یابد. یکی از عواملی که باعث تشدید ناخواسته محتوای تکراری برای سایت ها می شود، تغییر آدرس سایت از HTTP به HTTPS بود که در ادامه مفصلا در مورد آن بحث خواهیم کرد.

۷ دلیل عمده وجود محتوا با چندین آدرس URL
وجود چندین آدرس URL برای یک محتوا اصلا چیز عجیبی نیست. این مشکل می تواند به دلیل اشتباه در استفاده از نکات تکنیکال سئو در درون سایت و یا کپی مطالب سایت شما توسط افراد دیگر باشد. در ادامه ۷ دلیل رایج برای وجود محتوا با چندین آدرس URL ذکر شده است:

آدرس های URL داینامیک مانند: http://example.com/?post=1var=2var=3
نسخه موبایل سایت با آدرسی مانند: m.example.com و www.example.com
سایت های بین المللی با مشخص نبودن هدف جغرافیایی‌شان
نوشتن یا ننوشتن www و مسائل مربوط به زیر دامنه سایت مانند: www.example.com یا example.com
تولید آدرس های URL مختلف توسط CMS (سیستم مدیریت محتوا) سایت
کپی یا بازنشر محتوای وبلاگ در سایت های دیگر
اجرا کردن سایت بر روی HTTP و HTTPS به طور همزمان
معمولا مشکلات فوق به صورت همزمان برای یک سایت پیش می آید و خطر افت رتبه سایت در گوگل را به دلیل محتوای تکراری چند برابر می کند. بدترین اتفاق وقتی می افتد که صفحه اصلی سایت دارای چندین آدرس URL باشد، برای مثال به صورت زیر باشد:

http://example.com/home

http://www.example.com/ home

https://example.com/ home

https://www.example.com/ home

72472_Untitled-11 تگ کنونیکال: کاربرد اشتباه و محتوای تکراری خطرناک !
چگونه تگ authorized را درست بکار ببریم؟
فرض کنید آدرس URL اصلی سایت شما به صورت https://www.example.com باشد. برای تعیین این آدرس URL به عنوان تگ authorized ، این کد را در هد HTML سایر ورژن ها قرار می دهید:

link rel=”canonical” href=”https://www.example.com” /

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

متاسفانه چیزی که در عمل از کاربرد تگ authorized در سایت ها مشاهده می شود، استفاده اختصاصی از آن برای هریک از URL ها است. یعنی در همه ی صفحات از تگ authorized استفاده شده است، اما هر کدام به URL خودشان آدرس داده اند ! به طور مثال:

http://example.com/page authorized = http://example.com/page

http://www.example.com/page authorized = http://www.example.com/page

https://example.com/page authorized = https://example.com/page

https://www.example.com/page authorized =https://www.example.com/page

چنین کاری مثل این است که هر صفحه به گوگل بگوید: “من صفحه اصلی هستم، من را ایندکس کن” و این کار موجب گیج شدن گوگل در ایندکس کردن و رتبه بندی نادرست سایت در نتایج جستجو می شود. مسائل این چنینی موجب کاهش اعتبار سایت شما از دیدگاه گوگل شده و رتبه سایت‌تان را در نتایج جستجو کاهش می دهد.

مشکلات کاربرد HTTP و HTTPS به طور همزمان
تغییر آدرس URL سایت از HTTP به HTTPS کار خوبی است که موجب بهبود امنیت و سرعت سایت شده و از نظر سئو نیز امتیاز مثبتی محسوب می شود. اما مشکل زمانی پیش می آید که سایتی به طور همزمان هر دوی این ها را داشته باشد. حتی در موارد زیادی در تگ authorized سایت ها هر آدرس با HTTP و HTTPS نیز وجود دارند. این اشتباه عموما به دو دلیل رخ می دهد:

سایت بر روی هر دو آدرس HTTP و HTTPS اجرا می شود و CMS (سیستم مدیریت محتوا) سایت نمی تواند یکی از آن ها را به عنوان آدرس authorized تعیین کند.
سئوکاران به دلیل رعایت استانداردهای سئو شروع به استفاده از تگ authorized کردند اما نحو صحیح استفاده از آن را نمی دانستند.
راه حل ساده برای رفع مشکل محتوای تکراری چیست؟
یکی از ساده ترین راه ها استفاده از دستور ریدایرکت 301 است، که سریع تر و راحت تر هم اجرا می شود. اما زمانی که استفاده از تگ authorized اهمیت داشته باشد، باید در هر صفحه آدرس URL اصلی را تعیین کنید که کمی زمان گیر و سخت تر است. افرادی که از CMS وردپرس برای سایتشان استفاده می کنند هم با بکارگیری پلاگین wpseo_canonical filter می توانند یکی از HTTP یا HTTPS را به عنوان URL اصلی سایت و زیر دامنه ها تعیین کنند.

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

متن در CSS
24 Dec

متن در CSS

در این بخش آموزش css  به بررسی ارتفاع و عرض درcss و outline  در  css ، خصوصیات متن در css  و  فاصله بین خطوط در css و راست چین در css و وسط چین در css و Text Alignment و Text Decoration  و Text Transformation و Text Indentation و Letter Spacing و Text Direction و Word Spacing و Text Shadow و Line Height و Text Color   و … در css  می پردازیم.

ارتفاع و عرض درcss

زمانی که بخواهیم پهنا و ارتفاع  یک المنت از صفحه را تغییر دهیم باید از دستور width و height استفاده کنیم که می توان به صورت پیکسل و درصد و سانتی متر و …. مقداردهی کرد.
یک مثال برای این دستور ها

div {
height: 100px;
width: 500px;
background-color: powderblue;
}

می توانیم برای عنصر حداقل عرض و حداقل ارتفاع و حداکثر عرض و حداکثر ارتفاع تعریف کنیم.

min-height , min-width , max-height , max-width
مثال:

div.ex2 {
max-width: 500px;
}

 

CSS در Outline

خطی که بیرون المنت و دور بردر را می پوشاند.فرقی این خاصیت با بردر در این است که Outline
به عنوان بخشی از المنت نیست و بر ارتفاع و عرض آن تاثیر نمی گذارد.
Outline مانند border استایل های مختلفی دارد مثال:

.dotted {outline-style: dotted;}
.dashed {outline-style: dashed;}
.solid {outline-style: solid;}
.double {outline-style: double;}
.groove {outline-style: groove;}
.ridge {outline-style: ridge;}
.inset {outline-style: inset;}
.outset {outline-style: outset;}

برای تعیین رنگ outline از این خصوصیت استفاده می شود.

outline-color

برای تعیین رنگ outline از این خصوصیت استفاده می شود.

outline-width

برای تعیین عرض outline از این خصوصیت استفاده می شود.

به مثال زیر توجه کنید:

p.two {
outline-style: double;
outline-color: green;
outline-width: 3px;
}

در این مثال استایل از نوع دوخطی است به رنگ سبز و پهنای 3px است .

متن در css

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

Text Color در css

با این خصوصیت می توان به متن در css رنگ دلخواه داد که رنگ می تواند نام خود رنگ باشد با کد هگزا یا کد RGB باشد.

h1 {
color: green;
}

 

Text Alignment  در css

برای راست چین و چپ چین و وسط چین و تراز کردن متن در صفحه سایت استفاده می شود.
left ,  right , center, justify.

h3 {
text-align: right;
}

 

Text Decoration در css

برای نحوه نمایش متن به صورتی که زیر متن خط کشیده شده باشد یا روی آن خط کشیده شده باشد ،‌یا بالای متن باشد و یا اصلا خط نداشته باشد
مثال های زیرا را در سند اچ تی ام ال خود تست کنید تا به خوبی متوجه شوید.
در این مثال لینک بدون خط است

a {
text-decoration: none;
}

در این مثال خط بالای متن است.

h1 {
text-decoration: overline;
}

 
در این مثال خط روی متن است.

h2 {
text-decoration: line-through;
}

 
در این مثال خط زیر متن است.

h3 {
text-decoration: underline;
}

 

Text Transformation در  css

برای نحوه نمایش حروف است مثلا اگر بخواهیم متن مورد نظر با حروف بزرگ نمایش داده شود یا با حروف کوچک یا حرف اول بزرگ باشد.به مثال های زیر توجه کنید.
در این مثال همه حروف به صورت بزرگ نمایش داده می شود.

p.uppercase {
text-transform: uppercase;
}

 
در این مثال همه حروف به صورت کوچک نمایش داده می شود.

p.lowercase {
text-transform: lowercase;
}

 
در این مثال حرف اول به صورت بزرگ نمایش داده می شود.

p.capitalize {
text-transform: capitalize;
}

 

Text Indentation در css

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

p {
text-indent: 50px;
}

 
می توان مقدار منفی هم گذاشت که در این حالت متن نمایش داده نمی شود ولی فضایی که متن گرفته هست ولی خالی می باشد.

Letter Spacing در  css

برای تغییر فاصله بین حروف متن استفاده می شود.

h1 {
letter-spacing: 3px;
}

 

Line Height در  css

فاصله ی خطوط را مشخص می کند.

p.big {
line-height: 1.8;
}

 

Text Direction  در css

برای تعیین جهت نوشته استفاده می شود.
برای متن های فارسی از راست به چپ است و برای متن های انگلیسی از چپ به راست
rtl , ltr
به مثال زیر توجه کنید.

div {
direction: rtl;
}

 

Word Spacing  در css

این خاصیت فاصله کلمات  را مشخص می کند.

h1 {
word-spacing: 10px;
}

 

Text Shadow در css

برای سایه دار کردن متن در صفحات وب سایت استفاده می شود.
برای درک بهتر این خاصیت یک مثال را کامل توضیح می دهیم.
text-shadow: 3px 2px 5px red;
مقدار اول:
میزان فاصله سایه از لبه سمت چپ متن
مقدار دوم:
میزان فاصله از لبه بالای متن
مقدار سوم :
برای مشخص کردن مقدار محو بودن سایه است.
مقدار چهارم:
برای رنگ سایه است.

در این بخش از آموزش  css  به بررسی متن در css  پرداختیم.

المنت و نقش Attribute ها در html
22 Dec

المنت و نقش Attribute ها در html

در این قسمت از آموزش html ، المنت و Attribute ها در html توضیح داده می شود. یک توضیح کلی در مورد المنت های اچ تی ام ال داده می شود و به طور مفصل در مورد Attribute های html توضیح داده می شود مثل lang Attribute , title Attribute , href Attribute  ,  Size Attributes ,  alt Attribute

المنت های  html

هر المنت html   با یک تگ شروع می شود و با یک تگ به پایان می رسد و محتوا بین تگ شروع و پایان قرار می گیرد.
<tagname> محتوای داخل تگ </tagname>

<!DOCTYPE html>

<html>

<head>

<title>آموزش html</title>

</head>

<body>

<h1>سلام دنیا</h1>

<p>اولین پاراگراف</p>

</body>

</html>

 

در مثال بالا چهار المنت اچ تی ام ال وجود دارد. html , body , h1 , p
این مثال در مقاله html  چیست به طور کامل توضیح داده شد. نوشتن تگ پایانی فراموش نشود.بعضی از عناصر اچ تی ام ال دارای تگ پایانی نیستند مثل <br> .

Attributes:

بعضی تگ های اچ تی ام ال  دارای Attribute  هستند .اتریبیوت ها اطلاعات اضافی به تگ اضافه می کنند.اتریبیوت ها  همیشه به تگ شروع اضافه می شوند.اتریبیوت ها دارای نام و مقدار می باشند.name=”value”

برخی از  Attribute ها در html  کاربرد های آن ها:

lang Attribute :

این Attribute  در تگ اچ تی ام ال قرار می گیرد و برای مشخص کردن زبان محتوای متن می باشند و همچنین زبان سایت را مشخص می کند.

title Attribute :

این Attribute  در تگ های  p , img , … قرار می گیرد برای نمایش تولتیپ وقتی موس روی آن قرار می گیرد.برای مشاهده تولتیپ می توانید کد زیر را در سند اچ تی ام ال خود قرار داده و نتیجه را مشاهده کنید.

<p title="I'm a tooltip">
براب نمایش تول تیپ موس را بر روی این پاراگراف قرار دهید.
</p>

 

href Attribute:

در اچ تی ام ال لینک با <a> تعریف می شود و آدرس لینک با این اتریبیوت مشخص می شود.

 <a href="http://www.w3schools.com">This is a link</a>

 
فعلا به بررسی اتریبیوت ها پرداختیم در قیمت های بعد توضیحات بیشتری در مورد تگ <a> داده می شود.

Size Attributes:

برای بعضی از تگ ها لازم است که طول و عرض تعیین شود.به عنوان مثال اگر بخواهیم در صفحه وب سایت عکس بگذاریم از تگ  <img> استفاده می شود. برای مشخص کردن طول عکس از اتریبیوت width و برای مشخص کردن ارتفاع عکس از اتریبیوت height استفاده می شود.
لازم به توضیح است که برای مشخص کردن نام و مسیر عکسی که می خواهیم در صفحه وب سایت بگذاریم باید از Attributes ، src استفاده کنیم.به مثال زیر توجه کنید.

 <img src="pic/logo.jpg" width="104" height="142">

 
طبق این مثال در پوشه ی pic  یک عکس با نام logo وجود دارد که طول آن 104px  و ارتفاع آن  142px می باشد.

alt Attribute:

اتریبیوت alt  یک دیگر از Attribute ها در html است و برای گذاشتن ، مثلا زمانی که به هر دلیلی عکس لود نشود متنی که در این اتربیوت قرارداده شده نمایش داده می شود.

<img src="pic/logo.jpg" width="104" height="142" alt="alt" >

 

در این قسمت از آموزش html ، المنت و نقش Attribute در html توضیح داده شد، در بخش بعدی آموزش اچ تی ام ال به بررسی مفصل المنت های html می پردازیم.