آرشیو ماهانه: ژانویه 2017

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>