آرشیو ماهانه: دسامبر 2016

تگ های 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 می پردازیم.

خاصیت های  margin  و padding  در css
21 Dec

خاصیت های margin و padding در css

در این قسمت از آموزش html  به بررسی خاصیت های  margin  و padding  در css  می پردازیم.

خاصیت  margin  در   css :

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

margin-top , margin-right , margin-bottom , margin-left

به چند طریق می توان به margin  مقدار داد.

مقداردهی با پیکسل : واحد  px رایج ترین واحد اندازه گیری در وب می باشد.(10px)

مقداردهی با point : واحد pt  بیشتر برای کارهای چاپی است.(10pt)

مقدار دهی با Ems :  واحد em در طراحی وب سایت برای گوشی ها و اینگونه وسایل می باشد. (10em)

مقداردهی با سانتی متر :  این واحد اندازه گیری در طراحی صفحات وب سایت رایج نیست.(10cm)

مقداردهی درصدی ، این نوع واحد اندازه گیری برای صفحات وب رایج است ولی بیشتر برای طراحی صفحه سایت برای گوشی های موبایل و این گونه وسایل استفاده می شود. (10%)

مقدار دهی autoauto مقداردهی به صورت انوماتیک و خودکار می باشد.

مقدار دهی inherit : inherit مقدار دهی به صورت وراثتی است و از بلاک والد به ارث می برد .

برای مختصر نوشتن خاصیت margin می توان آن را به صورت یک خطی نوشت margin: 150px 140px 130px 120px;

خاصیت  padding  در  css :

خاصیت  padding  در  css  برای ایجاد فاصله بین محتوای المنت و اطراف المنت است . برخلاف  margin که بیرون از المنت فاصله ایجاد می کند padding داخل المنت است و مقداردهی آن مانند margin است که در بالا کامل توضیح داده شده است. padding در هر چهار سمت المنت مقدار می گیرد.

padding-top , padding-right , padding-bottom , padding-left

برای مختصر نوشتن دستور padding می توان آن را به صورت یک خطی مقدار دهی کرد. padding: 50px 30px 50px 80px;

به بررسی چند مثال از padding می پردازیم.

padding:25px;

یعنی فاصله از هر چهار جهت المنت 25px  است.

padding: 25px 50px;

یعنی در سمت بالا و پایین مقدار padding  برابر 25px  می باشد و در راست و چپ مقدار padding برابر  50px است.

padding: 25px 50px 25px 50px;

مقدار padding در بالا و پایین 25px  و در راست و چپ 50px است.

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

 

نحوه نوشتن کدهای html
20 Dec

نحوه نوشتن کدهای html

در این قسمت از آموزش اچ تی ام ال به نحوه نوشتن کدهای  html می پردازیم.

نحوه نوشتن کدهای html

برای نوشتن کدهای اچ تی ام ال نیاز به یک ادیتور مثل notepad , notepad++ , Dreamweaver ,… و یک مرورگر برای مشاهده خروجی هستیم.
در اینجا با نوت پد شروع می کنیم ، که در دسترس همه کاربران هست. وقتی کدهای اچ تی ام ال را در نوت پد نوشتیم باید آن را به صورت فایل  html ذخیره کنیم تا بتوانیم خروجی را ببینیم.کد های اچ تی ام ال شامل المنت ها و متا تگ ها و … می باشد. قسمت هایی که در همه صفحات وب باید وجود داشته باشند تا صفحه به درستی نمایش داده شود عبارتند از:

<!DOCTYPE html> , <html> , <head> , <title> , <body>

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

نحوه ذخیره کردن کدهای html :

برای این کار از قسمت file -> save asرا می زنیم پنجره ای باز می شود ، که باید اطلاعات آن را پر کنیم. filename را با پسوند  html  می گذاریم و encoding را هم روی utf-8 تنظیم می کنیم.

آموزش html

آموزش html

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

از این قسمت به بعد آموزش html  در مورد المنت ها و نحوه به کارگیری آن ها در سند  html  توضیح می دهیم.

سئو چیست؟
18 Dec

سئو چیست؟

کلمه سئو SEO برگرفته از Search Engine Optimization به معنای بهینه سازی سایت برای موتورهای جستجو است و شامل تکنیک‌های است که باعث می شود به افرادی که به دنبال محصول یا خدمات شما از طریق موتورهای جستجو مانند بینگ و یاهو و گوگل هستند معرفی شوید. قرار گرفتن نام سایت شما در رتبه‌های بالا در صفحات نتایج موتور‌های جستجو (SERPs) بسیار ارزشمند است ، در واقع این یک تبلیغ رایگان در بهترین فضای تبلیغاتی جهان است. این فرآیند باعث می شود ترافیک رایگان و طبیعی از سمت موتورهای جستجو مانند گوگل به سمت سایت شما هدایت شود.

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

بعد از اينکه سئوبراي بهبود رتبه‌بندي سايت‌ها در نتايج جستجوي طبيعي کار خود را شروع کرد، اين فرآيند نيازمند دانش و زمان براي پياده‌سازي روش‌هاي خود شد. زمان، بزرگ‌ترين سرمايه‌گذاري اوليه براي بهينه شدن سايت و يا يک صفحه است.

سئو

بسته به اينکه چگونه کلمات کليدي رقابتي در بهينه سازي مورد استفاده قرار مي‌گيرند، سئو هفته‌ها يا ماه‌ها طول مي‌کشد تا به نتيجه برسد. اگر چه ممکن است نتايج بهينه‌سازي جستجو به سرعت ديده نشود ولي در دراز مدت مزاياي سئو باعث افزايش رتبه‌بندي سايت و افزايش بازديدکنندگان است. براي وب سايت‌ها خيلي مهم است که در صفحه اول نتايج جستجو گوگل به خصوص جزو سه تا نتيجه طبيعي اول که 58.4 درصد کليک‌ها را شامل مي‌شود، قرار گيرند.

اين جاي تعجب نيست که وب سايت‌ها با محصولات و خدماتي که بفروش مي‌رسانند بر سر رسيدن به رتبه يک نتايج جستجو رقابت کنند. به عنوان مثال کلمه کليدي رقابتي “بيمه خودکار” 1.5 ميليون جستجوي گوگل را در ماه به خود اختصاص مي‌دهد، اين بدين معني است که 3 جايگاه اول 58.4 درصد بازديدکنندگان و خود جايگاه اول 36.4 درصد بازديدکنندگان را به خود اختصاص مي‌دهد. اين مسئله براي خيلي از سايت‌ها سودمند است که در بالاي نتايج جستجو قرار گيرند به خصوص آنهايي که با افزايش ترافيک سايت به تعداد مشتريانشان اضافه مي‌شود.
يک مطالعه ديگر نشان مي‌دهد جستجو کنندگان خيلي دوست دارند روي پيوندهاي طبيعي نتايج جستجو کليک کنند؛ اين مطالعه مشخص مي‌کند 72.3 درصد کاربران گوگل روي پيوندهاي طبيعي نتايج جستجو کليک مي‌کنند و تنها 27.3 درصد کاربران روي پيوندهاي ليستهاي پرداخت شده کليک مي‌کنند. اين يکي ديگر از دلايلي است که شرکت‌ها تاثير سئو را دانسته و حاضر هستند براي آن زمان و هزينه صرف کنند.
بطور کلی اهداف سئو را می توان بصورت زیر خلاصه نمود:

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

اصول نوشتن کدهای  css
18 Dec

اصول نوشتن کدهای css

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

قوانین یا اصول نوشتن کدهای CSS:

-نام فایل سی اس اس را با حروف کوچک بنویسید و حتما باید با یک حرف شروع شود.
-نام فایل کوتاه باشد و پسوند آن فراموش نشود
– از گذاشتن فاصله مقدار و واحد اندازه گیری آن ها خوداری کنید.
– در سلکتور از گذاشتن فضای خالی بین کاراکتر ها استفاده نکنید.

خاصیت  Color در CSS :

رنگ متن با این خاصیت مشخص می شود که به سه طریق می توان به آن مقدار داد
– با نام رنگ مانند Red , Green , …
– کد RGB مانند rgb(255, 0, 0)
-کد HEX  مانند #ffffff

خاصیت Background-Color در CSS :

این خاصیت برای تغییر رنگ بک گراند المنت های  html  است که مانند  color  به سه طریق مقدار می گیرد.

p {
background-color: yellow;
}

 

خاصیت Background Image در CSS:

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

body {
background-image: url("paper.gif");
}

 

برای تکرار عکس بک گراند به صورت افقی background-repeat: repeat-x; و برای تکرار عکس به صورت عمودی background-repeat: repeat-y; و برای اینکه عکس تکرار نشود background-repeat: no-repeat; از این خاصیت استفاده می کنیم.

خاصیت background-position در CSS:

برای مشخص کردن محل قرار گیری عکس بک گراند از background-position استفاده می کنیم.

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

 

می توانیم به جای استفاده تک تک از کدها ،‌ آن ها را به صورن یک دستور بنویسیم.

body {
background: #ffffff url("img_tree.png") no-repeat right top;
}

 

خاصیت  Border  در CSS:

با این خاصیت می توانید برای المنت ها حاشیه بگذارید.

خاصیت Border Style   در CSS :

این خاصیت چندین مقدار می گیرد.

dotted: حاشیه نقطه چین

dashed: حاشیه خط چین

solid: حاشیه خط ساده

double: حاشیه دو خطی

و …

خاصیت Border Width   در CSS :

با این خاصیت اندازه حاشیه مشخص می شود. مثلا border-width: 5px;

خاصیت border-color در CSS:

با Border-color رنگ حاشیه تغیر داده می شود.

خاصیت border-radius در CSS :

با خاصیت border-radius می توان گوشه های المنت را منحنی کرد.

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

p {
border: 2px solid red;
border-radius: 5px;
}

 

در این بخش آموزش css , اصول نوشتن کدهای css توضیح داده شد ، از این  قسمت آموزش سی اس اس به بعد به بررسی خاصیت های دیگر می پردازیم.

css چیست ؟
16 Dec

css چیست ؟

در این بخش آموزش css متوجه می شویم که css چیست و کاربرد آن چگونه است.

css چیست ؟

css مخفف Cascading Style Sheets ، زبانی برای توصیف و زیبا سازی سند  اچ تی ام ال می باشد.css  نحوه نمایش المنت های html  مشخص می کند. یادگیری درست css  می تواند مشخص کننده یک طراح حرفه ای سایت و مبتدی باشد.همچنین می توان سایت را بدون css  و به وسیله  table  طراحی کرد که این روش منسوخ شده است.

css  باعث صرفه جویی در وقت برای طراحی سایت می باشد ، با css تغییرات مجدد روی html  راحت تر است .

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

1) inline

2) داخلی

3) خارجی

روش inline

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

<p style=”color:red;”>…… </p>

روش آدرس دهی داخلی

باعث می شود که استایل ها فقط در همان صفحه اجرا شوند ، این روش باعث بالا رفتن لود سایت می شود که برای استفاده از این روش باید تگ  <style>  را در  <head>  سایت قرار دهیم و کد های  css  در آن بنویسیم.مثال:

<head>
<style>

body{

color:#000;

}
</style>
</head>

روش آدرس دهی خارجی

رایج ترین نوع استفاده css  در سند به صورت خارج از سند است به این ترتیب که فایل  css  به صورت مجرا از فایل html  است و برای ارتباط بین html , css  باید فایل css  را ضمیمه سند کنیم .مثال:

<head>
<link rel=”stylesheet” type=”text/css” href=” stylesheet.css”>
</head>

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

با توضیحات بالا متوجه شده که سی اس اس چیست و چه کار بردی داردی در بخش های بعدی آموزش css با  نحوه کار با css آشنا می شویم

 

html چیست؟ و کاربرد آن
16 Dec

html چیست؟ و کاربرد آن

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

html چیست؟

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

html مخفف Hyper Text Markup   مخفف زبان نشانه گذاری فرا متنی است.

زبان نشانه گذاری است که تعیین می کند مرورگر چگونه صفحه را نمایش دهد.

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

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

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

یک  مثاال:

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

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

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

</body>

</html>

 

توضیحات برای مثال بالا:

<!DOCTYPE html>: نوع سند را مشخص می کند و باعث استاندارد شدن صفحه وب می شود.

<html> :این تگ عنصر اصلی سند html  است و به مرورگر می فهماند که فایل html  از این تگ شروع شد و با بسته شدن این تگ فایل  html  به پایان رسید.

<head> :این تگ شامل اطلاعات مربوط به سند  html  شما می باشد و در مرورگر نماسش داده نمی شوند. مانند عنوان سند، متا تگ ها و …

<title> :یک المنت برای نمایش عنوان سند می باشد.

<body>:شامل محتوای صفح که قابل مشاهده می باشد.

<h1> :المنتی برای نمایش تیر صفحه است.

<p>:المنتی برای تعریف پاراگراف است.

تگ html چیست؟

<tagname> قسمتی از صفحه .</tagname>

 

زمانی که بخواهییم یک جزء از صفحه را به عنوان یک قسمت از صفحه معرفی کنیم از تگ استفاده می شود.تگ ها به صورت جفت شروع و پایان هستند. در مثال بالا <tagname> شروع تگ است و </tagname>  پایان تگ.هر تگ کاربردی جداگانه دارد مثلا اگر بخواهیم در صفحه پاراگراف بگذاریم و یا جدول، عکس ، فرم و اجزای فرم و ….

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