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

سایت الکسا

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







معرفی سایت alexa
رتبه بندی صفحات وب  قبلا توسط گوگل و ابزار page rank آغاز شد که برای رتبه بندی سایت ها و وبلاگ ها و حتی صفحات مختلف هر پایگاه اینترنتی ، امتیازی بین ۰ تا ۱۰ داده می شد و سایت های با رنک بالاتر از مزایایی در موتور جستجوی گوگل برخوردار هستند و به نوعی اعتبار یک سایت یا وبلاگ محسوب میشود.
چند سالی است که سایت alexa.com اقدام به انتشار آمار و ارقامی برای رتبه بندی سایت ها و اخیرا برای وبلاگ ها نموده که قابلیت نمایش رتبه سایت یا وبلاگ شما را در بین کل سایت های موجود در اینترنت و یا در بین سایت های یک کشور را دارا می باشد.
این سایت طی فعالیت های خود توانسته جایگاه مناسبی برایرتبه بندی پایگاه های اینترنتی اخذ و آمار قابل اعتمادی را ارائه دهد که کاربران معمولا برای نشان دادن اعتبار سایت خود ، از آمار خود در الکسا استفاده می کنند.




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


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




آنچه مسلم است ، اطلاعات ارائه شده در الکسا برای رتبه بندی، ۱۰۰درصد دقیق نیست اما این



  • ۰
  • ۰

HTML

ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.

 

 

[caption id="attachment_3063" align="aligncenter" width="255"]HTML HTML[/caption]

 

 

id ها و کاربرد آن ها

در زبان HTML دسته ای از attribute ها را داریم که id نام دارند. id ها، همانطور که از نامشان مشخص است، آیدی (id) منحصر به فردی را برای عنصری در HTML تعیین می کند. برخلاف کلاس ها، id ها باید منحصر به فرد و غیر تکراری باشند؛ به طور مثال نمی توانیم در یک صفحه 2 عنصر با آیدی یکسان داشته باشیم.(ایران گستر)

سوال: اگر id دو عنصر را یکی کنیم چه می شود؟(ایران گستر)

پاسخ: یکی کردن id دو یا چند عنصر باعث توقف برنامه تان نمی شود اما دو مشکل کلی را به وجود می آورد: اول اینکه کار id ها تعیین آیدی و مشخص کردن یک عنصر خاص است. اگر قرار است چند عنصر را مشخص کنیم باید از همان کلاس ها استفاده کنیم. دوم اینکه این کار از نظر HTML غیر معتبر است بنابراین در سئو و رتبه بندی ضرر خواهید کرد.(ایران گستر)

معمولا از id ها برای هدف گرفتن یک عنصر خاص در صفحه استفاده می شود تا بعدا در جاوا اسکریپت یا CSS مورد استفاده قرار گیرد. در مثال زیر می خواهیم عنصری که id اش برابر با myHeader را تغییر دهیم:(ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!DOCTYPE html>

<html>

<head>

<style>

#myHeader {

  background-color: lightblue;

  color: black;

  padding: 40px;

  text-align: center;

}

</style>

</head>

<body>

 

<h2>The id Attribute</h2>

<p>Use CSS to style an element with the id "myHeader":</p>

 

<h1 id="myHeader">My Header</h1>

 

</body>

</html>

مشاهده ی خروجی در JSBin

 

نکات مهم در مورد id:(ایران گستر)

  • id ها می توانند روی هر عنصری استفاده شوند و از Attribute های عمومی هستند.
  • id ها case sensitive هستند؛ یعنی نسبت به بزرگی و کوچکی حروف انگلیسی حساس اند.
  • مقدار id ها باید حداقل یک کاراکتر داشته باشد و نباید خالی (اسپیس و …) گذاشته شود.

 

تفاوت id با class چیست؟

id ها برای تشخیص دادن یک عنصر خاص مورد استفاده قرار می گیرند و غیر تکراری اند اما کلاس ها برای شناسایی بیشتر از یک عنصر هستند و تکراری نیز می باشند.(ایران گستر)

بگذارید برایتان مثالی بزنم. در قسمت های قبل گفتیم برای درک بهتر، class را به عنوان کلاس درس و عناصر داخل آن را به عنوان دانش آموزان کلاس در نظر بگیرید. دانش آموزان خاص هستند اما دانش آموزانی که داخل یک کلاس هستند علاوه بر تفاوت هایشان، دارای شباهت های پایه ای و مهم هستند (یک مجموعه درس را می خوانند، هم سن هستند، یک هدف دارند و …). عناصر داخل کلاس نیز شباهت های پایه ای دارند.(ایران گستر)

حالا هر کدام از این دانش آموزان چیزی به نام «شماره ی دانش آموزی» دارند که برای هر کدامشان متفاوت است و از سمت اداره ی آموزش پرورش تعیین می شود. این شماره ی دانش آموزی مانند همان id است! اگر بخواهید تمام دانش آموزان را در سیستم وارد کنید، می نویسید بچه های کلاس فلان… اما اگر بخواهید یک دانش آموز را وارد سیستم کنید، از شماره ی دانش آموزی اش استفاده می کنید.(ایران گستر)

این مسئله را در مثال زیر مشاهده می کنید:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

<!DOCTYPE html>

<html>

<head>

<style>

/* Style the element with the id "myHeader" */

#myHeader {

  background-color: lightblue;

  color: black;

  padding: 40px;

  text-align: center;

}

 

/* Style all elements with the class name "city" */

.city {

  background-color: tomato;

  color: white;

  padding: 10px;

}

</style>

</head>

<body>

 

<h2>Difference Between Class and ID</h2>

<p>An HTML page can only have one unique id applied to one specific element, while a class name can be applied to multiple elements.</p>

 

<!-- A unique element -->

<h1 id="myHeader">My Cities</h1>

 

<!-- Multiple similar elements -->

<h2 class="city">London</h2>

<p>London is the capital of England.</p>

 

<h2 class="city">Paris</h2>

<p>Paris is the capital of France.</p>

 

<h2 class="city">Tokyo</h2>

<p>Tokyo is the capital of Japan.</p>

 

</body>

</html>

مشاهده ی خروجی در JSBin

 

bookmark چیست؟

bookmark های HTML با bookmark های مرورگرتان متفاوت هستند اما مفهوم یکسانی دارند. در مرورگر ها اگر صفحه ای را bookmark (در فارسی نام های «نشانک»، «چوب الف» و … برایش انتخاب شده است) کنید، آدرس آن را برای بعد ذخیره کرده اید اما در HTML اگر قسمتی از صفحه را bookmark کنید به کاربر اجازه می دهید که سریعا به آن قسمت منتقل شود. اگر صفحه یا صفحات شما بسیار طولانی هستند و دارای عناوین متعددی می باشند، bookmark ها می توانند به کاربران شما کمک زیادی بکنند.(ایران گستر)

برای ایجاد یک bookmark باید قسمتی را انتخاب کنید و سپس لینکی به آن اضافه کنید. زمانی که کاربر روی آن لینک کلیک کند به قسمت مورد نظر منتقل می شود. به مثال زیر توجه کنید:(ایران گستر)

ابتدا یک عنصر (معمولا تگ های h1 و …) با id خاصی می سازیم:(ایران گستر)

 

1

<h2 id="C4">Chapter 4</h2>

سپس برایش لینک تعیین می کنیم:(ایران گستر)

 

1

<a href="#C4">Jump to Chapter 4</a>

نتیجه ی نهایی مثال زیر می شود:(ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

<!DOCTYPE html>

<html>

<body>

 

<p><a href="#C4">Jump to Chapter 4</a></p>

 

<h2>Chapter 1</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 2</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 3</h2>

<p>This chapter explains ba bla bla</p>

 

<h2 id="C4">Chapter 4</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 5</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 6</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 7</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 8</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 9</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 10</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 11</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 12</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 13</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 14</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 15</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 16</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 17</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 18</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 19</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 20</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 21</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 22</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 23</h2>

<p>This chapter explains ba bla bla</p>

 

</body>

</html>

مشاهده ی خروجی در JSBin

اضافه کردن chapter های اضافی به خاطر این است که صفحه طولانی شود تا بتوانیم اسکرول انجام دهیم.(ایران گستر)

 

استفاده از id در زبان جاوا اسکریپت

برای دسترسی داشتن به id ها در زبان جاوا اسکریپت می توانید از روش های مختلفی استفاده کنید. ساده ترین آن ها استفاده از دستور ()getElementById است:(ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<body>

 

<h2>Using The id Attribute in JavaScript</h2>

<p>JavaScript can access an element with a specified id by using the getElementById() method:</p>

 

<h1 id="myHeader">Hello World!</h1>

<button onclick="displayResult()">Change text</button>

 

<script>

function displayResult() {

  document.getElementById("myHeader").innerHTML = "Have a nice day!";

}

</script>

 

</body>

</html>

مشاهده ی خروجی در JSBin

در این خروجی باید روی دکمه ی موجود در سمت راست (قسمت خروجی) کلیک کنید تا متوجه تغییر صفحه و نحوه ی دسترسی به myHeader بشوید.(ایران گستر)

 

Iframe چیست؟

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

برای تعریف آن باید از تگ <iframe> استفاده کنید:

 

1

<iframe src="URL"></iframe>

باید آدرس صفحه ی وبی که می خواهید در صفحه ی خود نمایش دهید را به src بدهید.

همچنین می توانید برای iframe ها طول و عرض (width و height) تعریف کنید.

به مثال زیر توجه فرمایید:(ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

<!DOCTYPE html>

<html>

<body>

 

<h2>HTML Iframes</h2>

<p>You can use the height and width attributes to specify the size of the iframe:</p>

 

<iframe src="https://www.roxo.ir/best-code-editors/" height="300" width="600"></iframe>

 

</body>

</html>

مشاهده ی خروجی در JSBin

البته می توانید تعیین اندازه را از طریق CSS نیز انجام دهید:(ایران گستر)

 

1

<iframe src="https://www.roxo.ir/best-code-editors/" style="height:200px;width:300px;"></iframe>

اگر بخواهید حاشیه ی دور iframe را حذف کنید می توانید border را اینطور بنویسید:(ایران گستر)

 

1

<iframe src="https://www.roxo.ir/best-code-editors/" style="border:none;"></iframe>

یکی از نکات جالب این است که شما می توانید در عناصر لینک، attribute ای به نام target را با attribute ای به نام name یکی کنید تا با کلیک روی لینک، iframe باز شود:(ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html>

<body>

 

<h2>Iframe - Target for a Link</h2>

 

<iframe height="300px" width="100%" src="https://www.roxo.ir/plus" name="iframe_a"></iframe>

 

<p dir='rtl' align='center'><a href="https://www.roxo.ir/best-code-editors/" target="iframe_a">بهترین ویرایشگر برنامه نویسی کدام است؟</a></p>

 

</body>

</html>

مشاهده ی خروجی در JSBin

 

  • ۹۸/۰۷/۲۳
  • fateme feysali

نظرات (۰)

هیچ نظری هنوز ثبت نشده است

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی