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

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

سایت الکسا

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







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




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


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




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



کلمات کلیدی

وبلاگ نویسی حرفه ای

وبلاگ نویسی

وبلاگ

بیان

بلاگ بیان

بلاگ

blog.ir

بایگانی
آخرین مطالب
پیوندهای روزانه
پیوندها
  • ۰
  • ۰

آموزش گام به گام و تصویری HTML قسمت دهم (ایران گستر)

۲۱ مهر۹۸

HTML

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

 

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

 

لینک دادن در html

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

تصور اشتباهی از لینک ها بین عموم مردم جا افتاده است: لینک ها، متنی هستند! لینک ها می توانند متن، تصویر یا هر عنصر دیگر HTML باشند و تنها محدود به متن نمی شوند.(ایران گستر)

ساختار کلی لینک ها در زبان HTML از این قرار است:

 

1

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

همانطور که می بینید برای ایجاد لینک ها از تگی به نام <a> استفاده می شود. مثال زیر را ببینید:(ایران گستر)

 

1

2

3

4

5

6

7

8

9

<!DOCTYPE html>

<html>

<body>

 

<h2>HTML Links</h2>

<p dir='rtl' align='center'><a href="https://www.roxo.ir/series/html-tutorials/"> دوره ی آموزشی صفر تا صد HTML</a></p>

 

</body>

</html>

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

لینکی که در مثال بالا ساختیم، شما را مستقیما به صفحه ی دوره ی آموزشی HTML در وب سایت روکسو می برد؛ attribute ای به نام href وجود دارد که آدرس لینک مورد نظرتان را باید در آن قسمت قرار دهید و متنی که بین دو تگ آغازی و پایانی <a> نوشته می شود قسمتی از متن است که کاربر مشاهده می کند.(ایران گستر)

 

توجه: اگر در پایان آدرس لینک ها از علامت forward slash (یعنی /) استفاده نکنید، ممکن است 2 درخواست به سمت سرور ارسال کنید! البته بسیاری از سرورها به طور خودکار علامت slash را به آخر آدرس لینک اضافه می کنند و سپس درخواست را پردازش می کنند اما کار از محکم کاری عیب نمی کند.(ایران گستر)

 

نکته: ما دو علامت slash داریم؛ یکی از آن ها forward slash است (این علامت -> /) و دیگری back slash است (این علامت -> \). دلیل نام گذاری آن ها به forward (جلو) و back یا backwards (عقب) از این جهت است که سر علامت اول رو به جلو بوده و سر دومی رو به عقب است!(ایران گستر)

مثال بالا از absolute path یا full path استفاده می کند که در فارسی با نام های آدرس مطلق و آدرس کامل شناخته می شوند. در این نوع آدرس دهی ها، آدرس کامل یک لینک به href داده می شود اما اگر لینک های شما به وب سایت خودتان برمی گردد، می توانید قسمت اول آدرس را به آن ندهید. مثال:(ایران گستر)

 

1

2

3

4

5

6

7

8

9

<!DOCTYPE html>

<html>

<body>

 

<h2>HTML Links</h2>

<p dir='rtl' align='center'><a href="series/html-tutorials/"> دوره ی آموزشی صفر تا صد HTML</a></p>

 

</body>

</html>

آدرس وب سایت (نام دامنه ی اصلی) به صورت خودکار به لینک اضافه خواهد شد.

 

ظاهر لینک ها

در تمام مرورگرها ظاهر پیش فرض لینک ها از این قرار است:(ایران گستر)

  • لینک هایی که تا به حال باز نشده باشند زیرخط (underline) دارند و به رنگ آبی هستند.
  • لینک هایی که حداقل یک بار باز شده باشند زیرخط داشته و بنفش هستند.
  • لینک های active (به معنی «فعال») نیز زیرخط داشته و به رنگ قرمز هستند.

لینک های active به معنی لحظه ای است که کلیک چپ را روی لینک نگه داشته اید، اما هنوز رهایش نکرده اید تا به صفحه ی مورد نظر منتقل شوید. می توانید به خروجی مثال قبلی مراجعه کنید و روی لینک مورد نظر کلیک چپ را نگه دارید تا متوجه تغییر رنگ لینک ها بشوید.(ایران گستر)

شما می توانید این ظاهر را با استفاده از CSS تغییر دهید:

 

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

<!DOCTYPE html>

<html>

<head>

<style>

a:link {

  color: green;

  background-color: transparent;

  text-decoration: none;

}

a:visited {

  color: pink;

  background-color: transparent;

  text-decoration: none;

}

a:hover {

  color: red;

  background-color: transparent;

  text-decoration: underline;

}

a:active {

  color: yellow;

  background-color: transparent;

  text-decoration: underline;

}

</style>

</head>

<body>

 

<h2>Link Colors</h2>

 

<p>You can change the default colors of links</p>

 

<a href="html_images.asp" target="_blank">HTML Images</a>

 

</body>

</html>

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

اگر به خروجی این کد مشاهده کنید، متوجه می شوید تمام رفتارهای لینک را تغییر داده ایم. اگر متوجه کدهای CSS نمی شوید جای نگرانی نیست، کافی است دوره ی آموزشی CSS ما را دنبال کنید. این مثال ها تنها برای این آورده شده اند که شما با قدرت CSS و همکاری اش با HTML آشنا شوید.(ایران گستر)

حالا که بحث از قدرت CSS شد، خوب است بدانید که می توانید لینک ها را به شکل دکمه در بیاورید!.به مثال زیر نگاه کنید:(ایران گستر)

 

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

<!DOCTYPE html>

<html>

<head>

<style>

a:link, a:visited {

  background-color: #f44336;

  color: white;

  padding: 15px 25px;

  text-align: center;

  text-decoration: none;

  display: inline-block;

}

 

a:hover, a:active {

  background-color: red;

}

</style>

</head>

<body>

 

<h2>Link Button</h2>

<p>A link styled as a button:</p>

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

 

</body>

</html>

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

زمانی که به خروجی کد بالا مراجعه کنید، متوجه می شوید که با استفاده از کدهای CSS یک لینک عادی را به شکل یک دکمه در آورده ایم(ایران گستر)

 

نحوه ی باز شدن لینک ها

شما با استفاده از Attribute ای به نام target می توانید تعیین کنید که لینک مورد نظر چطور باز شود:(ایران گستر)

  • اگر به target مقدار blank_ را بدهید، کاربر با کلیک روی لینک به یک tab جدید در مرورگر منتقل شده و لینک در آن tab برایش باز می شود.
  • اگر به target مقدار self_ را بدهید، لینک در صفحه ی فعلی باز می شود که حالت پیش فرض مرورگر ها است.
  • اگر به target مقدار parent_ را بدهید، لینک در frame پدر باز می شود.
  • اگر به target مقدار top_ را بدهید، کاربر با کلیک روی لینک به یک پنجره ی جداگانه (window و نه tab) منتقل شده و لینک در آنجا برایش باز می شود.
  • اگر به target مقدار framename را بدهید، لینک در یک frame نام گذاری شده باز می شود.

دو مثال از موارد بالا میزنیم. لینک زیر در یک tab جداگانه باز خواهد شد:(ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html>

<body>

 

<h2>The target Attribute</h2>

 

<a href="https://www.roxo.ir/plus/" target="_blank">انتقال به صفحه ی اصلی روکسو پلاس</a>

 

<p>If you set the target attribute to "_blank", the link will open in a new browser window or tab.</p>

 

</body>

</html>

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

اما در مثال بعدی میخواهیم لینک را در همان صفحه باز کنیم:(ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html>

<body>

 

<h2>The target Attribute</h2>

 

<a href="https://www.roxo.ir/plus/" target="_self">انتقال به صفحه ی اصلی روکسو پلاس</a>

 

<p>If you set the target attribute to "_blank", the link will open in a new browser window or tab.</p>

 

</body>

</html>

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

اگر در این مثال روی لینک کلیک کنید، دیگر به Tab جدیدی منتقل نمی شوید بلکه لینک در همان صفحه برایتان باز می شود.

سوال: frame چیست؟ مقدار top_ که به آن مربوط می شود چه کاری انجام می دهد؟(ایران گستر)

پاسخ: هنوز به مبحث frame ها در HTML نرسیده ایم اما اگر بخواهم به صورت کوتاه توضیح دهم همان JSBin را برایتان مثال می زنم. اگر به خروجی مثال قبل  سر زده باشید، متوجه می شوید صفحه ی ما به 2 قسمت تقسیم شده است؛ قسمت سمت چپ حاوی کد ها است و قسمت سمت راست حاوی خروجی آن ها. به هر کدام از این قسمت ها یک frame (به معنی «قاب») می گویند.

زمانی که روی لینکِ موجود در سمت راست کلیک کنید می بینید که سایت  در همان frame سمت راست باز می شود. اگر کد قبل را ویرایش کنیم و به target مقدارِ top_ را بدهیم، صفحه ی JSBin کاملا از بین می رود و لینک جدید تمام صفحه را می گیرد.(ایران گستر)

 

تصاویر لینک دار

همانطور که گفتیم لینک ها به متن محدود نیستند و می توانند از نوع تصویر باشند. به مثال زیر توجه کنید:(ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!DOCTYPE html>

<html>

<body>

 

<h2>Image Links</h2>

 

<p>The image is a link. You can click on it.</p>

 

<a href="https://www.roxo.ir/plus/">

  <img src="https://www.roxo.ir/wp-content/uploads/2019/03/roxo-plus-new.png" alt="Roxo Plus" style="border:0">

</a>

 

<p dir='rtl'>ما از "border:0" استفاده کرده ایم تا جلوی اینترنت اکسپلورر نسخه ی 9 و نسخه های قدیمی ترش را بگیریم تا دور تصویر ما دورگیری نکنند.

  </p>

 

</body>

</html>

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

اگر در خروجی، روی لوگوی روکسو پلاس کلیک کنید، به صفحه ی روکسو پلاس منتقل خواهید شد؛ تنها کاری که کردیم قرار دادن تصویر (تگ <img>) درون تگ <a> بود.(ایران گستر)

نکته: شما می توانید به لینک های خود، attribute ای به نام title بدهید. هر مقداری به title بدهید به عنوان توضیحات اضافی آن لینک محسوب می شود و اگر کاربر موس خود را روی لینک نگه دارد، این توضیحات نمایان می شوند.(ایران گستر)

مثال:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!DOCTYPE html>

<html>

<body>

 

<h2>Image Links</h2>

 

<p>The image is a link. You can click on it.</p>

 

<a href="https://www.roxo.ir/plus/" title="این لینک شما را به صفحه ی روکسو پلاس خواهد برد">

  <img src="https://www.roxo.ir/wp-content/uploads/2019/03/roxo-plus-new.png" alt="Roxo Plus" style="border:0">

</a>

 

<p dir='rtl'>ما از "border:0" استفاده کرده ایم تا جلوی اینترنت اکسپلورر نسخه ی 9 و نسخه های قدیمی ترش را بگیریم تا دور تصویر ما دورگیری نکنند.

  </p>

 

</body>

</html>

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

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

 

ایجاد bookmark ها

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

ابتدا به عنصر دلخواه خود attribute ای به نام id میدهیم:

 

1

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

سپس لینکی در همان صفحه ایجاد می کنیم و به href آن مقدار id عنصر اولیه را به همراه علامت # می دهیم:

 

1

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

حالا اگر روی آن لینک کلیک کنیم به قسمت مورد نظر (در این مثال همان chapter 4) منتقل می شویم:(ایران گستر)

 

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 4 می برد و دیگر نیازی به اسکرول کردن های متوالی نیست. این قابلیت باعث می شود کاربر راحت تر به مطالب سایت شما دسترسی پیدا کند (البته اگر مقاله ی شما آنچنان حجیم و طولانی باشد که پیدا کردن قسمت های خاص در آن سخت باشد). همچنین کار رفرنس یا ارجاع دادن دیگر سایت ها به سایت خود را راحت تر می کنید، چرا که دیگر سایت ها می توانند به قسمتی از سایت شما که مد نظر دارند ارجاع دهند نه تمام مقاله‌تان.(ایران گستر)

یکی از مثال های عملی آن را در صفحه ی توضیحات تگ <a> از توسعه دهندگان Mozilla می بینید. اگر روی این لینک کلیک کنید شما را مستقیما به صفحه ی تگ <a> می برد اما اگر روی این لینک کلیک کنید شما را به قسمت Accessibility concerns از همان صفحه می برد (اسکرول برای شما انجام شده است و دیگر در ابتدای صفحه نخواهید بود.(ایران گستر)

  • fateme feysali
  • ۰
  • ۰

آموزش گام به گام و تصویری HTML قسمت نهم (ایران گستر)

۲۱ مهر۹۸

HTML

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

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

 

نقل قول و استناد

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

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html>

<html>

<body>

 

<p>Here is a quote from WWF's website:</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">

For 50 years, WWF has been protecting the future of nature.

The world's leading conservation organization,

WWF works in 100 countries and is supported by

1.2 million members in the United States and

close to 5 million globally.

</blockquote>

 

</body>

</html>

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

گروه WWF یکی از گروه های فعال محیط زیستی است که با کمک مردم دنیا سعی در حفظ طبیعت این کره ی خاکی را دارد و متن بالا قسمتی از توضیح وب سایت خودشان در این مورد است. از آن جایی که ما عیناً نوشته ی وب سایت آن ها را برداشته و کپی کرده ایم باید آن را به صورت نقل قول بیاوریم تا مشخص شود که متعلق به ما نیست. اگر به خروجی این کد دقت کنید متوجه می شوید که قسمت نقل قول شده کمی جلوتر از قسمت های دیگر است و این استایل پیش فرض HTML در مورد نقل قول ها است.(ایران گستر )

بیایید تگ های آن را بررسی کنیم.

تگ <q>

تگ <q> مخفف quotation یا نقل قول است و وظیفه اش مشخص کردن نقل قول های مختصر و کوتاه است. اگر از این تگ استفاده کنید معمولا مرورگرها محتوایش را بین دو علامت Quotation (“) قرار می دهند. مثال:(ایران گستر )

 

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE html>

<html>

<body>

 

<p>Browsers usually insert quotation marks around the q element.</p>

 

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

 

</body>

</html>

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

معمولا نقل قول هایی که از این قبیل هستند بسیار کوتاهند (در حد یک جمله یا کمتر) اما اگر بخواهیم قسمت طولانی تری را نقل کنیم چطور؟(ایران گستر )

تگ <blockquote>

تگ <blockquote> در زبان HTML وظیفه ی استناد و نقل قول قسمت کاملی از متن را دارد و مرورگرها معمولا آن را indent (جلوتر قراردادن نسبت به بقیه ی متن) می کنند. مثال:(ایران گستر )

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!DOCTYPE html>

<html>

<body>

 

<p>Browsers usually indent blockquote elements.</p>

 

<blockquote cite="http://www.worldwildlife.org/who/index.html">

For 50 years, WWF has been protecting the future of nature.

The world's leading conservation organization,

WWF works in 100 countries and is supported by

1.2 million members in the United States and

close to 5 million globally.

</blockquote>

 

</body>

</html>

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

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

نکته: شما می توانید با استفاده از CSS ظاهر انواع نقل قول ها را تغییر دهید بنابراین نگران ظاهر آن ها نباشد. دلیل اصلی استفاده از این تگ ها، مبحث semantic (کدنویسی معنایی) است که برای موتورهای جستجو اهمیت دارد.(ایران گستر )

 

تگ <abbr>

تگ <abbr> مخفف abbreviation و به معنی کلمات مخفف است. به طور مثال کلماتی که شکل اختصاری آن ها به کار می رود و یا سرواژه ها در این دسته قرار می گیرند. شما می توانید با استفاده از این تگ اعلام کنید که فلان کلمه ی متن یک سرواژه است یا مخفف عبارت خاصی است:(ایران گستر )

 

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE html>

<html>

<body>

 

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

 

<p>Marking up abbreviations can give useful information to browsers, translation systems and search-engines.</p>

 

</body>

</html>

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

نکته: همانطور که در کد بالا مشاهده می کنید ما به این تگ attribute ای به نام title داده ایم تا اگر کاربر معنی مخفف را ندانست، موس خود را روی آن نگه دارد و معنی برایش نمایش داده شود.

سوال: چرا متن را به صورت عادی ننویسیم؟ آیا لازم است از این تگ استفاده کنیم؟(ایران گستر )

پاسخ: از نظر فنی خیر اما با استفاده از این تگ به موتورهای جستجو کمک می کنید تا آنها بهتر متن سایتتان را درک کنند و سایت اصولی تری خواهید داشت. همچنین در صورت استفاده از این تگ، اگر کاربری از سیستم های ترجمه (مانند افزونه google translate و …) استفاده کند، می تواند ترجمه ی بهتری دریافت کند.(ایران گستر )

تگ <address>

تگ <address> در زبان HTML اطلاعات تماس نویسنده ی صفحه و یا صاحب وب سایت را به کاربر ارائه می کند. محتوای این نوع تگ ها معمولا به صورت مورب (italic) به نمایش در می آیند. همچنین اکثر مرورگرها قبل و بعد از آن، یک line break (اینتر) اضافه می کنند:(ایران گستر )

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!DOCTYPE html>

<html>

<body>

 

<p>The HTML address element defines contact information (author/owner) of a document or article.</p>

 

<address>

Written by John Doe.<br>

Visit us at:<br>

Example.com<br>

Box 564, Disneyland<br>

USA

</address>

 

</body>

</html>

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

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

تگ <cite>

تگ <cite> در هنگام نقل قول معمولا عنوان یک اثر را مشخص می کند. به طور مثال:(ایران گستر )

 

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html>

<body>

 

<p>The HTML cite element defines the title of a work.</p>

<p>Browsers usually display cite elements in italic.</p>

 

<img src="https://www.w3schools.com/html/img_the_scream.jpg" width="220" height="277" alt="The Scream">

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

 

</body>

</html>

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

در مثال بالا نقاشی معروف ادوارد مانچ به نام “The Scream” را آورده ایم و از آنجا که The Scream نام اثر است آن را در cite قرار داده ایم.(ایران گستر )

تگ <bdo>

تگ <bdo> مخفف bi-directional override (به معنی «باطل کردن دو طرفه») می باشد. دلیل استفاده از آن باطل کردن یا نادیده گرفتن text direction فعلی است. text direction یعنی نوشته ی ما از راست به چپ نوشته می شود (مانند فارسی) یا از چپ به راست (مانند انگلیسی) و با استفاده از این تگ می توانید در وسط یک جمله این جهت را عوض کنید:(ایران گستر )

 

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE html>

<html>

<body>

 

<p>If your browser supports bi-directional override (bdo), the next line will be written from right to left (rtl):</p>

 

<bdo dir="rtl">This line will be written from right to left</bdo>

 

</body>

</html>

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

اگر به خروجی کد بالا بروید می بینید که جمله ی This line will be written from right to left کاملا برعکس شده است.(ایران گستر )

  • fateme feysali
  • ۰
  • ۰

آموزش گام به گام و تصویری HTML قسمت هشتم (ایران گستر)

۲۰ مهر۹۸

HTML

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

 

 

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

 

ویژگی Style

در جلسه ی قبل در مورد attribute ای به نام style صحبت کردیم و با هم دیدیم که می توان با آن شکل ظاهری عناصر را در HTML تغییر داد اما وقتی صحبت از متون عادی می شود، HTML موارد خاصی را برای تغییر چهره شان دارد!(ایران گستر)

  • <b> متون را bold (پررنگ) می کند.
  • <strong> نشان دهنده ی یک متن مهم است.
  • <i> متون را italic (مورب) می کند.
  • <em> بر متن تاکید می کند.
  • <mark> متن را علامت گذاری می کند.
  • <small> متن را کوچک می کند.
  • <del> نشان دهنده ی متن حذف شده است.
  • <ins> نشان دهنده ی متن اضافه شده است.
  • <sub> نشان دهنده ی متن زیروند است.
  • <sup> نشان دهنده ی متن بالاوند است.

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

پاسخ: استفاده ی صحیح از این تگ ها بسیار مهم است! اگر بنا بر تغییر ظاهر متن بود، می توانستیم از همان style و زبان CSS استفاده کنیم اما اینجا بحث بر سر برنامه نویسی semantic (معنایی) است. هر کدام از این تگ ها علاوه بر نمایش دادن متن به شکل متفاوت، معنی متفاوتی برای موتورهای جستجو دارند. در ادامه ی این دوره بیشتر در مورد آن ها صحبت می کنیم.ایران گستر

 

تگ های <b> و <strong>

حتما متوجه شده اید که هر دوی این تگ ها متن را bold و پررنگ می کنند و در ذهنتان سوال می کنید که فرقشان چیست؟ باید بگویم که <b> تنها متن را پررنگ می کند و هیچ معنایی فراتر از آن ندارد:ایران گستر

 

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE html>

<html>

<body>

 

<p>This text is normal.</p>

 

<p><b>This text is bold.</b></p>

 

</body>

</html>

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

 

اما تگ <strong> علاوه بر پررنگ کردن متن یا کلمه، معنی strong (قوی یا مهم) را به آن متن اضافه می کند. شما در عمل و در کدهایتان هیچ تفاوتی را متوجه نمی شوید اما موتورهای جستجو بین این تگ ها و معانی فرق قائل می شوند. مثالی از تگ strong:ایران گستر

 

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE html>

<html>

<body>

 

<p>This text is normal.</p>

 

<p><strong>This text is strong.</strong></p>

 

</body>

</html>

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

 

تگ های <i> و <em>

دقیقا مانند تفاوت تگ های قبلی، تگ <i> در زبان HTML متن مورد نظرتان را مورب می کند و هیچ اهمیت خاص یا معنی دیگری به آن اضافه نمی کند:ایران گستر

 

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE html>

<html>

<body>

 

<p>This text is normal.</p>

 

<p><i>This text is italic.</i></p>

 

</body>

</html>

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

 

اما تگ <em> جدا از مورب کردن متن، به آن معنی و اهمیت خاصی نیز می دهد. مثال استفاده از این تگ را در کد زیر می بینید:ایران گستر

 

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE html>

<html>

<body>

 

<p>This text is normal.</p>

 

<p><em>This text is emphasized.</em></p>

 

</body>

</html>

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

 

اگر بخواهم به طور خلاصه بگویم:

مرورگرها تگ های <strong> و <b> و تگ های <em> و <i> را به یک شکل نمایش می دهند اما تگ های <b> و <i> تنها کارکرد نمایشی دارند در حالی که <strong> و <em> به موتورهای جستجو می گویند فلان متن مهم است و معنی خاصی را همراهشان دارند.ایران گستر

 

تگ <small>

تگ <small> متن مورد نظر شما را به شکل بسیار کوچک نمایش می دهد. به این مثال توجه کنید:

 

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE html>

<html>

<body>

 

<h2>HTML <small>Small</small> Formatting</h2>

  

<p>This is a paragraph and <small>smaller text goes here</small></p>

 

</body>

</html>

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

 

تگ <mark>

تگ <mark> در زبان HTML متون مورد نظر شما را به حالت هایلایت شده (ماژیک فسفری) نمایش می دهد تا به مخاطب بفهماند فلان قسمت از متن اهمیت خاصی دارد:ایران گستر

 

1

2

3

4

5

6

7

8

<!DOCTYPE html>

<html>

<body>

 

<h2>HTML <mark>Marked</mark> Formatting</h2>

 

</body>

</html>

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

 

تگ های <del>

در ابتدای مقاله در مورد تگ <del> به طور خلاصه نوشتم «نشان دهنده ی متن حذف شده است.» احتمالا این توضیح بیشتر شما را گیج کرده است! بگذارید واضح تر بگویم؛ برخی اوقات مطلبی را روی سایت خود منتشر می کنید اما پس از مدتی متوجه می شوید آن مطلب دیگر صحیح نیست. آنجاست که از تگ <del> استفاده می کنیم.ایران گستر

سوال: چرا از اول آن نوشته را حذف نکنیم و این همه به خودمان دردسر بدهیم؟

پاسخ: این تگ نوشته را حذف نمی کند بلکه نشان دهنده ی متن حذف شده است. یعنی دانستن این موضوع که قبلا این متن در وب سایت ما بوده است اهمیت دارد. به طور مثال ما در آموزش برنامه نویسی جاوا اسکریپت می گوییم از فلان دستور جاوا اسکریپت برای دریافت خصوصیات یک شیء استفاده می شود. بعد از گذشت یک سال یا دو سال یا هر مقدار زمان دیگر، نسخه ی جدیدی از جاوا اسکریپت معرفی شده و دستور ما منسوخ می شود. حالا می توانیم از تگ <del> استفاده کنیم تا به مخاطب بفهمانیم دستور جدید این است اما فلان دستور قدیمی نیز وجود داشته است تا اگر کنجکاو بود در مورد آن تحقیق کند. این تنها یک مثال از مثال های عملی بسیار برای این تگ بود.ایران گستر

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

 

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE html>

<html>

<body>

 

<p>The del element represents deleted (removed) text.</p>

 

<p>My favorite color is <del>blue</del> red.</p>

 

</body>

</html>

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

 

تگ <ins>

تگ <ins> نشان دهنده ی متن اضافه شده است. این یعنی چه؟

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

مثال:

 

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE html>

<html>

<body>

 

<p>The ins element represent inserted (added) text.</p>

 

<p>My favorite <ins>color</ins> is red.</p>

 

</body>

</html>

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

 

تگ <sub>

تگ <sub> در زبان HTML، متون زیروند را مشخص می کند. استفاده از این حروف در موقعیت های مختلفی امکان دارد که یکی از آن ها فرمول های شیمیایی است! فرمول شیمیایی زیر نحوه ی تبدیل کربن دی اکسید (co2) به کربن مونو اکسید (co) را نشان می دهد:ایران گستر

CO2 + 2 e− + 2H+ → CO + H2O

می بینید که می توانیم به سادگی از این تگ برای نمایش زیروند ها استفاده کنیم. تصور کنید که انجام این کار با CSS و تگ Style چقدر زمان بر خواهد بود!ایران گستر

 

تگ <sup>

تگ <sup> دقیقا بر خلاف تگ  <sub> عمل می کند و برای بالاوند کردن متون استفاده می شود. از مثال های کاربردی آن باز هم می توان به سراغ مثال های علمی رفت؛ بیایید فرمول معروف آلبرت انیشتین را در رابطه با «هم ارزی جرم و انرژی» بنویسیم:ایران گستر

E=mc2

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

 

  • fateme feysali
  • ۰
  • ۰

آموزش گام به گام و تصویری HTML قسمت ششم (ایران گستر)

۲۰ مهر۹۸

HTML

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

 

 

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

 

المان یا تگ <p>

عنصر <p> در زبان HTML یک پاراگراف را تعریف می کند:(ایران گستر )

 

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE html>

<html>

<body>

 

<p>این یک پاراگراف است</p>

<p>این یک پاراگراف است</p>

<p>این یک پاراگراف است</p>

 

</body>

</html>

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

اگر به لینک بالا رفته و خروجی را مشاهده کنید، متوجه می شوید که مرورگرها به طور پیش فرض قبل و بعد از هر پاراگراف، کمی فضای خالی (white space) اضافه می کنند تا پاراگراف ها به عناصر پیرامون خود نچسبند.(ایران گستر )

مسئله ی جالبی که در زبان HTML به آن برمیخوریم مسئله ی حذف شدن فضاهای خالی است. اگر شما به پاراگراف های خود فضای خالی اضافه کنید (به طور مثال استفاده از اینتر و رفتن به خط بعد و یا استفاده از چندین اسپیس) مرورگر تمام این فضاها را حذف می کند و نمایش نخواهد داد.(ایران گستر )

به مثال زیر توجه کنید (در این مثال توضیحاتی نوشته ام بنابراین خود مثال را نیز مطالعه کنید):(ایران گستر )

 

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

<!DOCTYPE html>

<html>

<body dir = 'rtl'>

 

<p>

این یک پاراگراف است

که شامل خطوط زیادی می شود

این خطوط و فاصله ها در سورس کد قرار دارند

اما مرورگر ها

آن را حذف می کنند.

</p>

 

<p>

این یک پاراگراف است

که شامل             فضاهای خالی زیادی است

که      در سورس کد       قرار دارند

اما در    مرورگر

نادیده گرفته می شوند.

</p>

 

<p>

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

</p>

 

</body>

</html>

اگر دقیقا به این کد دقت کنید متوجه می شوید فضاهای خالی و اینترهای متعددی در آن استفاده شده است. حالا بیایید خروجی آن در JSBin را ببینیم.(ایران گستر )

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

توجه داشته باشید که اگر تگ پایانی <p> را فراموش کنید باز هم خروجی به شکل صحیح نمایش داده می شود:

 

1

2

<p>This is a paragraph.

<p>This is another paragraph.

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

نکته: من در مثال های مختلف چینش صفحات را «راست چین» می کنم تا متن های فارسی بهتر نمایش داده شوند ('dir = 'rtl). اگر متوجه آن نمی شوید نگران نباشید در آینده با آن آشنا می شویم.(ایران گستر )

 

المان یا تگ <br>

حتما با خود می گویید اگر مرورگرها فضای خالی در زبان HTML را نادیده می گیرند، پس چطور این فضا را در متون خود ایجاد کنیم؟ اگر بخواهم به خط بعد بروم باید چکار کنم؟ نگران نباشید این کار بسیار ساده است؛ از عنصر <br> استفاده می کنیم! در برنامه نویسی به مفهوم اینتر زدن و به خط بعد رفتن line break می گوییم که یعنی شکستن خط. بنابراین در طول این دوره نیز از همین مفهوم به جای اینتر استفاده می کنیم.(ایران گستر )

حتما خودتان متوجه شده اید که استفاده از <br> بسیار آسان است:

 

1

2

3

4

5

6

7

8

<!DOCTYPE html>

<html>

<body dir = 'rtl'>

 

<p>این خط شامل<br>یک پاراگراف<br>می باشد که در خط جداگانه قرار دارد</p>

 

</body>

</html>

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

حالا می بینید با اینکه تمام این متن در سورس کد (HTML) در یک خط نوشته شده است اما به خاطر استفاده از <br> در حالت خروجی خود دارای چندین خط می باشد.(ایران گستر )

نکته: اگر از قسمت قبل یادتان باشد به تگ هایی مانند <br> تگ پوچ یا تگ خالی می گفتیم؛ این تگ ها، تگ پایانی ندارند.

سوال: اما اگر من بخواهم مطلبی بنویسم که line break های زیادی داشته باشد چطور؟ به عنوان مثال اگر بخواهم یک شعر بنویسم (که دارای فضاهای خالی زیادی است) نمی توانم از <br> استفاده کنم چرا که باید صد ها مورد تگ <br> بنویسم!(ایران گستر )

پاسخ: برای چنین حالت هایی باید از <pre> که مخفف preformatted (به معنی «از پیش قالب بندی شده») است، استفاده کنید. در واقع هر متنی که داخل <pre> قرار بگیرد دقیقا به شکلی نمایش داده می شود که در سورس کد نوشته شده باشد.(ایران گستر )

استفاده از این تگ، فونتِ متن داخلش را تغییر می دهد که می توانید آن را بعدا با کمک CSS تغییر دهید. مثال:(ایران گستر )

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<body>

 

<p>The pre tag preserves both spaces and line breaks:</p>

 

<pre>

   گر مرد رهی میان خون باید رفت

 

   از پای فتاده، سرنگون باید رفت

 

   تو پای به راه نه و هیچ مپرس

  

   خود راه بگویدت که چون باید رفت  

</pre>

 

</body>

</html>

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

هنوز دوره ی CSS را برگزار نکرده ایم اما اگر از قبل با CSS آشنایی دارید می توانم به شما کد های پیش فرض تگ pre را معرفی کنم:(ایران گستر )

 

1

2

3

4

5

6

pre {

  display: block;

  font-family: monospace;

  white-space: pre;

  margin: 1em 0;

}

دلیل عجیب بودن شکل متن داخل این تگ همین کد CSS است. واضح است که شما می توانید این کد را تغییر دهید تا شکل متن تان نیز تغییر کند.(ایران گستر )

به طور مثال شعر بالا را می توان اینگونه نمایش داد:

 

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

<!DOCTYPE html>

<html>

<head>

<style>

pre {

  display: block;

  font-family: calibri;

  white-space: pre;

  margin: 1em 0;

}

</style>

</head>

<body>

 

<p>The pre tag preserves both spaces and line breaks:</p>

 

<pre>

   گر مرد رهی میان خون باید رفت

 

   از پای فتاده، سرنگون باید رفت

 

   تو پای به راه نه و هیچ مپرس

  

   خود راه بگویدت که چون باید رفت  

</pre>

 

</body>

</html>

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

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

  • fateme feysali
  • ۰
  • ۰

آموزش گام به گام و تصویری HTML قسمت پنجم (ایران گستر)

۲۰ مهر۹۸

HTML

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

 

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

 

Heading چیست؟

Heading ها در واقع تیترهایی هستند برای قسمت های مختلف یک صفحه و از <h1> شروع شده و تا <h6> ادامه پیدا می کنند. به صورتی که <h1> مهم ترین عنوان یا تیتر و <h6> کم اهمیت ترین عنوان را مشخص می کند.(ایران گستر)

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

 

1

2

3

4

5

6

7

8

9

10

11

12

13

<!DOCTYPE html>

<html>

<body>

 

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

 

</body>

</html>

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

همانطور که در خروجی مشاهده کردید، این تگ ها در ظاهر نیز با هم متفاوت هستند و هر چه اهمیتشان بیشتر باشد، بزرگتر می شوند اما اهمیت اصلی آن ها در ظاهرشان نیست چرا که ظاهر را می توان با CSS نیز تغییر داد. اهمیت اصلی در مسئله ی سئو است؛ موتورهای جست و جو از heading ها استفاده می کنند تا ساختار یک صفحه ی وب را ایندکس کنند. بنابراین نباید از ساختار صفحات وب خود غافل شوید.(ایران گستر)

برای ساختاربندی صحیح توجه کنید که <h1> همیشه باید عنوان اصلی تمامِ صفحه باشد بنابراین نباید در هر صفحه بیشتر از یک عدد <h1> داشته باشیم. سپس به ترتیب اهمیت از تگ های <h2>  و <h3> و … استفاده کنید. برای مشاهده ی ساختار HTML صفحه ی خود می توانید از وب سایت هایی مانند HTML 5 Outliner استفاده کنید. برای مثال ما سایت روکسو را به آن دادیم و نتیجه به شکل زیر بود:(ایران گستر)

 

 

این ساختار، ساختار صحیح و درستی است. همانطور که می بینید هر دسته به همراه زیر مجموعه هایش و بر اساس اهمیت جداسازی شده اند اما اگر شما در سایتتان از heading های صحیح استفاده نکنید دیگر با چنین ساختار مرتبی مواجه نخواهید شد. همیشه به این فکر کنید که کدام مطلب زیر مجموعه ی کدام مطلب دیگر است.(ایران گستر)

همچنین کاربران سایت نیز صفحات شما را بر اساس heading ها بررسی می کنند تا مطالب مورد نظرشان را پیدا کنند.

نکته: مرورگرها به طور خودکار قبل و بعد از یک heading، مقداری فضای خالی اضافه می کنند تا بین عنوان و مطالب مربوطه فاصله ایجاد شود.(ایران گستر)

 

نکته: هیچ گاه از heading ها برای بزرگتر کردن نوشته ها و پررنگ کردنشان استفاده نکنید. برای این کار باید از CSS استفاده کنیم که در جلسات بعد با آن آشنا خواهیم شد. تنها مورد استفاده ی heading ها عناوین و تیترها هستند!(ایران گستر)

سوال: اگر بخواهیم heading من اندازه ی بزرگتری داشته باشد چکار کنم؟(ایران گستر)

پاسخ: همانطور که گفتیم تمام این موارد در CSS نوشته می شود اما برای مثال این مورد را برایتان توضیح میدهم. شما می توانید از font-size استفاده کنید:(ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE html>

<html>

<body>

 

<h1 style="font-size:60px;">Heading 1</h1>

 

<p>You can change the size of a heading with the style attribute, using the font-size property.</p>

 

</body>

</html>

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

من سایز این heading را روی 60 پیکسل گذاشته ام. شما می توانید به JSBin بروید و این مقدار را تغییر دهید تا ببینید چطور کوچک و بزرگ می شود.(ایران گستر)

استفاده از <hr>

تگ <hr> در زبان HTML هنگامی استفاده می شود که بخواهیم یک قسمت از صفحه را از قسمتی دیگر جدا کنیم. معمولا زمانی که قسمتی از مطلب ما از مطالب دیگر جدا است از این تگ استفاده می کنیم. خروجی این تگ به صورت یک خط افقی در صفحه است:(ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!DOCTYPE html>

<html>

<body>

 

<h1>This is heading 1</h1>

<p>This is some text.</p>

<hr>

 

<h2>This is heading 2</h2>

<p>This is some other text.</p>

<hr>

 

<h2>This is heading 2</h2>

<p>This is some other text.</p>

 

</body>

</html>

اگر می خواهید خروجی این تگ را ببینید باید آن را در JSBin مشاهده کنید.

برچسب <head> چیست؟

بسیاری از طراحان مبتدی تگ <head> را با heading ها اشتباه می گیرند اما واقعیت این است که این دو تگ هیچ ارتباطی با هم ندارند. در واقع عنصر <head> نگهدارنده ی اطلاعات metadata است و بین تگ های <html>  و <body>  قرار می گیرد. metadata اطلاعاتی است که در مورد خودِ سند HTML است و هیچ گاه به نمایش در نمی آیند. بگذارید مثالی را ببینیم:(ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

<!DOCTYPE html>

<html>

<head>

  <title>My First HTML</title>

  <meta charset="UTF-8">

</head>

<body>

 

<p>The HTML head element contains meta data.</p>

<p>Meta data is data about the HTML document.</p>

 

</body>

</html>

به غیر از عناصر p در کد بالا چیز دیگری به نمایش در نمی آید. یکی از metadata هایی که در کد بالا استفاده کرده ایم meta charset است که مشخص می کند سند ما از چه نوع encoding ای پشتیبانی می کند. برای زبان فارسی باید UTF-8 را به کار ببرید اما امروزه پیشنهاد می شود به طور کلی از هر زبانی استفاده کردید این مقدار را روی UTF-8 تنظیم کنید. در مورد این تگ ها نیز بعدا به طور مفصل صحبت خواهیم کرد.(ایران گستر)

 

  • fateme feysali
  • ۰
  • ۰

آموزش گام به گام و تصویری HTML قسمت چهارم (ایران گستر)

۱۹ مهر۹۸

HTML

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

 

[caption id="attachment_3063" align="aligncenter" width="300"]هر عنصر HTML می تواند Attribute هایی داشته باشد هر عنصر HTML می تواند Attribute هایی داشته باشد[/caption]

 

Attribute ها چه کار می کنند؟

همانطور که می دانید هر عنصر HTML می تواند Attribute هایی (به معنی «ویژگی») داشته باشد. کار این Attribute ها ارائه ی اطلاعات بیشتر به این عناصر است و همیشه در تگ آغازین حاضر می شوند. در اکثر مواقع این Attribute ها دارای جفت های “name=”value هستند که در ادامه با مهم ترین آن ها آشنا می شویم.(ایران گستر)

 

ویژگی href

لینک ها در زبان HTML با تگ <a> تعریف می شوند و برای آدرس دهی این لینک ها از Attribute ای به نام href استفاده می شود. مثال:(ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

<!DOCTYPE html>

<html>

<body>

 

<h2>The href Attribute</h2>

<p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p>

 

<a href="https://roxo.ir/plus">This is a link</a>

 

</body>

</html>

همانطور که می بینید آدرس لینک را توسط href به تگ <a> داده ایم. در مورد لینک ها و تگ <a> بعدا به شکل مفصل صحبت خواهیم کرد.(ایران گستر)

 

ویژگی src

تصاویر در زبان HTML با تگ <img> تعریف می شوند اما این تگ تنها تعریف کننده ی یک تصویر است. اینکه کدام تصویر به نمایش در بیاید به عهده ی src می باشد. این Attribute آدرس فایل تصویری مورد نظر را به تگ <img>  می دهد. به مثال زیر توجه کنید:(ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

<!DOCTYPE html>

<html>

<body>

 

<h2>The src Attribute</h2>

<p>HTML images are defined with the img tag, and the filename of the image source is specified in the src attribute:</p>

 

<img src="https://www.roxo.ir/wp-content/uploads/2019/03/HTML-define-element.jpg" width="800" height="500">

 

</body>

</html>

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

 

اگر به مثال بالا دقت کنید، دو Attribute دیگر نیز می بینید؛ width (به معنی «عرض») و height («طول»). در واقع اینها دو Attribute دیگر هستند که در واحد پیکسل نوشته می شوند بنابراین در تصویر بالا که “width=”800 است منظور این است که عرض تصویر 800 پیکسل باشد.(ایران گستر)

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

 

ویژگی alt

alt متنی را مشخص می کند تا اگر به هر دلیلی تصویر ما به کاربر نمایش داده نشد (مانند حذف شدن تصویر از سرور ما، تحریم شدن تصویر در ایران، ناسازگار بودن مرورگر کاربر با سایت ما و …) به جای آن متنی نمایش داده شود تا کاربر بداند آن عکس چه بوده است. همچنین این نوشته می تواند توسط screen reader ها خوانده شود (دستگاه هایی که محتوای صفحه را برای افراد نابینا می خوانند) تا افراد نابینا یا کسانی که نمی توانند صفحه را ببینند بتوانند آن را بخوانند.(ایران گستر)

از دیگر فایده های این Attribute کمک کردن به طراحی سایت است. تصور کنید در src آدرس اشتباه یک تصویر را بدهید. زمانی که سایتتان بالا می آید دیگر تصویری در کار نیست و اگر برایش alt تعریف نکرده باشید، ممکن است یادتان رفته باشد که این تصویر چه بوده است. حالا باید بگردید و ببینید این تصویر مربوط به چه پست یا مطلبی بوده اما با alt می توانید به راحتی بفهمید کدام تصویر مد نظر بوده است.(ایران گستر)

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

 

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html>

<body>

 

<h2>The alt Attribute</h2>

<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>

 

<img src="https://www.roxo.ir/wp-content/uploads/2019/03/HTML-define-element.jpg" alt="HTML5 Tutorials from Roxo.ir" width="800" height="500">

 

 

</body>

</html>

 

اگر خروجی این این کد را در JSBin مشاهده کنید

متوجه می شوید که در ظاهر هیچ تفاوتی ایجاد نشده است. همین مسئله باعث می شود که بسیاری از طراحان سایت آن را نادیده بگیرند اما باید بدانید این Attribute از مهم ترین Attribute هایی است که باید برای تک تک عناصر تصویری تان تعریف کنید چرا که علاوه بر حرفه ای کردن صفحه تان، در موتورهای جست و جو و مسائل سئو اهمیت ویژه ای پیدا می کند.(ایران گستر)

 

ویژگی style

این Attribute مربوط به استایل (همان سبک و سیاق ظاهری عناصر) می باشد مانند رنگ متن، اندازه ی فونت ها و … . مثال:

 

1

2

3

4

5

6

7

8

9

10

11

<!DOCTYPE html>

<html>

<body>

 

<h2>The style Attribute</h2>

<p>The style attribute is used to specify the styling of an element, like color:</p>

 

<p style="color:red">I am a paragraph.</p>

 

</body>

</html>

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

 

با استفاده از این روش ساده، متن خود را قرمز رنگ کرده ایم! این Attribute مربوط به زبان CSS است که همیشه در کنار زبان HTML می‌باشد. ما در این دوره و در قسمت های آینده به صورت خلاصه در مورد CSS صحبت خواهیم کرد و در آینده ای نزدیک یک دوره ی جداگانه برای آن خواهیم داشت.(ایران گستر)

 

ویژگی lang

شما می توانید زبان یک سند را در تگ <html> تعریف کنید. این کار از طریق lang (مخفف language به معنی «زبان») انجام می شود. مثال:(ایران گستر)

 

1

2

3

4

5

6

7

8

<!DOCTYPE html>

<html lang="en-US">

<body>

 

...

 

</body>

</html>

مشخص کردن زبان صفحه تان برای موتور های جست و جو ضروری است. اگر به کد بالا نگاه کنید میبینید که زبان صفحه را en-US گذاشته ایم. دو حرف اول (یعنی en که مخفف English یا همان زبان انگلیسی است) مشخص کننده ی زبان است و دو حرف دوم (یعنی US یا همان آمریکا) تنها در صورتی می آیند که زبان ما چندین گویش داشته باشد. به طور مثال زبان انگلیسی گویش های آمریکایی، استرالیایی، بریتانیایی و … دارد. ما اینجا گویش آمریکایی را انتخاب کرده ایم.

برای زبان فارسی باید از عبارت fa استفاده کنید. برای کامل تر بودن بهتر است آن را به شکل fa-IR بنویسید تا با فارسی کشورهای اطرافمان تمایز پیدا کند.(ایران گستر)

 

ویژگی title

در واقع title متنی را مشخص می کند که به آن tooltip میگوییم. tooltip ها همان متن هایی هستند که اگر موس را روی عنصر خاصی نگه دارید ظاهر می شوند. حتما با آن ها در اینترنت آشنا هستید. به طور مثال اگر به سایتی بروید و موس را روی عنصری که title را به عنوان attribute داشته باشید نگه دارید، نوشته ای ظاهر می شود که معمولا شامل توضیحات اضافی در مورد آن عنصر است. در مثال زیر ما یک title را به تگ <p> اضافه کرده ایم:(ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html dir='rtl' align='middle'>

<body>

 

<h2 title="من یک تیتر هستم">The title Attribute</h2>

 

<p title="هستم tooltip من یک">

موس خود را روی این متن بیاورید و تکان ندهید تا توضیحات را ببینید.

</p>

 

</body>

</html>

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

زمانی که به JSBin رفتید، موس خود را روی پاراگرافی که میبینید نگه دارید تا متن tooltip به نمایش در بیاید.(ایران گستر)

 

حروف بزرگ یا کوچک؟

همانطور که می دانید در attribute های زبان HTML و تگ های مختلف آن الزامی به نوشتن حروف به صورت بزرگ یا کوچک نیست. شما می توانید title را به صورت title و یا TITLE بنویسید و تفاوتی در کد هایتان ایجاد نمی شود اما کنسرسیوم جهانی وب (W3C) پیشنهاد می کند در اسناد HTML از حروف کوچک استفاده کنید اما در اسنادی که قوانین سخت گیرانه تری دارند (مانند XHTML) مجبور هستید از حروف کوچک استفاده کنید. تقریبا در تمام دنیا HTML را با حروف کوچک می نویسند بنابراین ما نیز همین کار را می کنیم.(ایران گستر)

در مورد دیگر استاندارد ها نیز باید بگوییم در HTML5 نیازی به قرار دادن attribute ها در quotation نیست اما سعی کنید همیشه از چنین کاری دوری کنید چرا که استاندارد نیست و به سئوی شما ضربه می زند.

مثال بد و غیر استاندارد:

 

1

<a href=https://roxo.ir>

مثال صحیح و استاندارد:

 

1

<a href="https://roxo.ir">

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

 

1

<p title=About roxo.ir>

از آن جایی که این attribute دارای اسپیس است اگر quotation ها را حذف کنید، دیگر اجرا نخواهد شد.

  • fateme feysali
  • ۰
  • ۰

آموزش گام به گام و تصویری HTML قسمت سوم (ایران گستر)

۱۹ مهر۹۸

HTML

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

 

[caption id="attachment_3063" align="aligncenter" width="300"]شیوه تعریف عناصر HTML شیوه تعریف عناصر HTML[/caption]

 

ساختار عناصر HTML

شیوه تعریف عناصر HTML به صورت زیر می باشد:(ایران گستر )

<tagname> محتوا در این قسمت قرار می‌گیرد </tagname>

بنابراین هر عنصر HTML برابر است با تگ آغازین + محتوا + تگ پایانی. مثال:(ایران گستر )

 

<p>My first paragraph.</p>

نکته: عناصر HTML ای که دارای محتوا نباشند «عناصر خالی» یا empty element نام دارند و دارای تگ پایانی نیز نیستند. یکی از مثال های بارز این تگ ها، تگ <br> است که معادل اینتر زدن و به خط بعد رفتن در هنگام نوشتن است.(ایران گستر )

«به خط جدید رفتن» اصطلاح خاص خودش را دارد؛ line break. به مثال زیر توجه کنید:

 

1

2

3

4

5

6

7

8

<!DOCTYPE html>

<html>

<body>

 

<p>This is a <br> paragraph with a line break.</p>

 

</body>

</html>

برای مشاهده ی خروجی این کد در مرورگتان روی این لینک کلیک کنید.

در HTML5 نیازی به بستن عناصر خالی ندارید اما اگر دوست دارید کدهایتان را در نهایت استاندارد بنویسید و همچنین کد هایتان توسط تجزیه کنندگان XML قابل خواندن باشد می توانید آن ها را به این شکل ببیندید:(ایران گستر )

<br />

توجه کنید که در این حالت، تگ ها دو عدد (تگ آغازین و پایانی) نمی شوند بلکه همان تگ اول تغییر شکل پیدا می کند.

عناصر تو در تو (nested)

عناصر HTML می توانند به صورت تو در تو یا nested قرار بگیرند؛ این یعنی یک عنصر داخل عنصر دیگری باشد.

به طور مثال در کد زیر چهار عنصر HTML وجود دارد:(ایران گستر )

 

1

2

3

4

5

6

7

8

9

<!DOCTYPE html>

<html>

<body>

 

<h1>My First Heading</h1>

<p>My first paragraph.</p>

 

</body>

</html>

اگر به کد بالا نگاه کنید متوجه می شوید عنصر <html> تمام سند HTML را تعریف می کند و دارای تگ های آغازین و پایانی است. محتوای درون این تگ، یک تگ دیگر به نام <body> است. این عنصر بدنه ی سند را تعریف می کند و مشخصا دارای تگ های آغازین و پایانی است. حالا محتوای خود عنصر  <body> شامل دو تگ <h1> و <p> است، یعنی این قسمت:(ایران گستر )

 

1

2

3

4

5

6

<body>

 

<h1>My First Heading</h1>

<p>My first paragraph.</p>

 

</body>

حالا تگ <h1> یک تیتر را تعیین می کند و دارای تگ های <h1> و <h1/> می باشد. تگ <p> نیز تعریف کننده ی یک پاراگراف است که شامل تگ های <p> و <p/> می شود. این توضیح ساختار تو در توی بالا بود. حالا می فهمیم معنی تو در تو بودن چیست.(ایران گستر )

 

تگ های پایانی

زبان HTML مانند دیگر زبان ها آنچنان قوانین سفت و سختی ندارد. منظور من از این حرف چیست؟ منظور من این است که در بسیاری از زبان های برنامه نویسی با جا انداختن کوچک ترین علامت و نوشتار، در اکثر اوقات برنامه از کار می افتد اما در زبان HTML مسئله به شکل دیگری است.(ایران گستر )

در زبان HTML اگر برخی از قسمت ها را جا بیندازید صفحه تان هنوز هم نمایش داده می شود! به طور مثال:

 

1

2

3

4

5

6

7

8

9

<!DOCTYPE html>

<html>

<body>

 

<p>This is a paragraph.

<p>This is a paragraph.

 

</body>

</html>

در مثال بالا تگ های پایانی عنصر  <p> را قرار نداده ایم اما هنوز هم صفحه ی ما نمایش داده می شود. برای اجرای این کد در مرورگرتان روی این لینک کلیک کنید.(ایران گستر )

در واقع تگ آغازین در مثال بالا دلخواه فرض شده است اما جدا هشدار می دهیم که هیچ گاه به این شکل کدنویسی نکنید چرا که:

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

 

بزرگی و کوچکی حروف

در زبان HTML بزرگی و کوچکی حروف اهمیتی ندارد بنابراین <P> با <p> یکی است اما تقریبا در تمام دنیا شیوه ی کدنویسی HTML به صورت حروف کوچک است. شما می توانید همین الان به هر سایتی که دوست دارید سر بزنید و کد های HTML آن را مشاهده کنید. 99 درصد سایت های جهان به حروف کوچک HTML می نویسند. همچنین سندهایی که سخت گیری های بیشتری از HTML دارند (مانند XHTML) حروف بزرگ را قبول نمی کنند. بر همین اساس ما در تمام کدنویسی ها و پروژه های آینده از حروف کوچک استفاده می کنیم.(ایران گستر )

 

XHTML چیست؟

زبان XHTML مخفف EXtensible HyperText Markup Language (به معنای «زبان امتدادپذیر نشانه‌گذاری فرامتنی») است. در واقع این زبان دقیقا با زبان HTML یکی است و تنها تفاوت آن با HTML در این است که دارای قوانین سخت گیرانه تری می‌باشد.

به عبارت دیگر می توانیم بگوییم XHTML همان HTML است که به عنوان یک برنامه ی XML تعریف شده است. از نظر پشتیبانی نیز خیالتان راحت باشد، XHTML توسط تمام مرورگر های جدید پشتیبانی می شود.(ایران گستر )

سوالی که پیش می آید این است که چرا باید از این زبان استفاده کنیم؟ پاسخ ساده است. اگر به کد زیر نگاه کنید، می فهمیم که دارای نقص هایی است:

 

1

2

3

4

5

6

7

8

<html>

<head>

  <title>This is bad HTML</title>

 

<body>

  <h1>Bad HTML

  <p>This is a paragraph

</body>

مانند مثال قبلی ما، تگ های پایانی اش جا افتاده اند.

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

حتما با خودتان می گویید من هیچ گاه چنین کاری انجام نمی دهم و حواسم به تگ های پایانی هست. مشکل آن جاست که مسئله فقط تگ های پایانی نیست، زبان HTML اجازه می دهد بسیاری از موارد غیر استاندارد را اجرا کنید و زمانی که کد هایتان تبدیل به 800 خط، 1000 خط و بیشتر شد احتمال خطا بسیار بالا می رود.(ایران گستر )

 

  • fateme feysali
  • ۰
  • ۰

آموزش گام به گام و تصویری HTML قسمت دوم (ایران گستر)

۱۹ مهر۹۸

HTML

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

 

محیط کد نویسی HTML

برای یادگیری HTML و کدنویسی آن می توانید از ادیتور های پیشرفته مانند PHPStorm یا Visual Studio Code استفاده کنید اما در ابتدای کار بهتر است از ادیتور های متنی ساده مانند notepad خودِ ویندوز استفاده کنید.(ایران گستر)

دلیل این مسئله آن است که ادیتورهای پیشرفته به شما در کدنویسی کمک می کنند و شما مطلب را از خودتان نمی نویسید و فراموشش می کنید.(ایران گستر)

برای کد نویسی به شکل ساده در notepad ابتدا باید آن را باز کنید و سپس به صورت ساده عناصر زیر را در آن بنویسید:

 

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE html>

<html>

<body>

 

<h1>My First Heading</h1>

 

<p>My first paragraph.</p>

 

</body>

</html>

این عناصر تنها یک نمونه هستند تا با کدنویسی در notepad آشنا شویم، بعدا می توانید آن را تغییر دهید. کد هایتان در notepad به این شکل خواهند بود:(ایران گستر)

کدنویسی ساده HTML در notepad
کدنویسی ساده HTML در notepad

حالا برای ذخیره سازی این فایل به شکل یک سند HTML باید به این شکل عمل کنید:(ایران گستر)

  • ابتدا از سمت بالا و چپ پنجره، گزینه ی File را انتخاب کنید.
  • سپس گزینه ی Save as را انتخاب کنید.
  • در پنجره ای که برایتان باز می شود نام فایل را index.html یا index.htm بگذارید
  • و در آخر نیز Encoding را روی مقدار UTF-8 قرار دهید.

این مراحل را در تصویر زیر می بینید:(ایران گستر)

ذخیره ی فایل notepad به شکل یک سند HTML
ذخیره ی فایل notepad به شکل یک سند HTML

نکات مربوط به مراحل بالا:(ایران گستر)

  • شما می توانید پسوند فایل را html یا htm بگذارید و باید بدانید این دو هیچ تفاوتی با هم ندارند. دلیل وجود htm این است که بعضی از سرور ها فایل هایی با پسوند چهار حرفی را قبول نمی کنند. بنابراین htm یک جایگزین برای html است و انتخاب پسوند با شما است.(ایران گستر)
  • دلیل اضافه کردن نام index به فایل HTML این است که وب سرور ها فایل هایی با نام index.html و index.htm و … را به عنوان صفحه ی پیش فرض حساب می کنند و آن را خودکار اجرا می کنند. بنابراین معمولا صفحات اصلی سایت ها را به شکل index نام گذاری می کنند تا وب سرور به صورت خودکار آن را برای کاربر اجرا کند.(ایران گستر)
  • قرار دادن encoding روی utf-8 به این دلیل است که ما ممکن است از زبان فارسی، شکلک ها و یا کاراکتر های غیر معمول نیز استفاده کنیم. اگر چنین تصمیمی بگیریم (مثلا وب سایت ما فارسی باشد) اما به عنوان utf-8 تنظیم نشده باشد تمام کاراکتر ها بهم خواهند ریخت. البته مسئله فقط زبان فارسی نیست و ممکن است بعضی از کاراکتر ها نیز بدون utf-8 پشتیبانی نشوند بنابراین توصیه می کنیم همیشه تمام فایل هایتان را روی utf-8 قرار دهید.(ایران گستر)

پس از اینکه فایل را ذخیره کردید می توانید آن را در مرورگر خود باز کنید:

باز کردن فایل ساده ی HTML در مرورگر کروم
باز کردن فایل ساده ی HTML در مرورگر کروم

اما برای دوره ی ما استفاده از ادیتور هایی مثل notepad ممکن نیست چرا که قرار است همه با هم یاد بگیریم. بنابراین از همان ادیتور آنلاین جاوا اسکریپت استفاده می کنیم , به طور مثال کد زیر را در ادیتور آنلاین اجرا می کنیم:(ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html dir='rtl' align='center'>

<head>

<title>این عنوان کل صفحه است</title>

</head>

<body>

 

<h1>این یک تیتر است!</h1>

<p>این یک پاراگراف است.</p>

 

</body>

</html>

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

 

عناصر پایه ای HTML

اگر در این قسمت با تگ هایی آشنا شدید که قبلا آن ها را یاد نگرفته اید، جای نگرانی نیست. فعلا می خواهیم با عناصر پایه ای HTML آشنا شویم و در جلسات بعد تمام این تگ ها را توضیح خواهیم داد.(ایران گستر)

 

ساختار اسناد HTML

همه می دانیم که تمام اسناد HTML با یک declaration (به معنی «اعلان») شروع می شود: <DOCTYPE html!>. پس از آن تگ های <html> و <html/> را داریم که تمام تگ های دیگر در آن ها نوشته می شوند. البته از بین این تگ ها، تنها تگ هایی که بین <body> و <body/> قرار می گیرند برای کاربر قابل مشاهده هستند. مثال زیر را ببینید:(ایران گستر)

 

1

2

3

4

5

6

7

8

9

<!DOCTYPE html>

<html>

<body>

 

<h1>My First Heading</h1>

<p>My first paragraph.</p>

 

</body>

</html>

 

Heading ها در HTML

heading ها در واقع تیتر قسمت های مختلف صفحات هستند.

این تیتر ها از <h1> شروع می شوند و تا <h6> ادامه دارند. این تگ ها به ترتیب اهمیت نام گذاری شده اند بنابراین <h1> یعنی مهم ترین و اصلی ترین تیتر و <h6> یعنی فرعی ترین تیتر. به مثال زیر دقت کنید:(ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

<!DOCTYPE html>

<html>

<body>

 

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

 

</body>

</html>

ما یک سری نوشته را با heading های مختلف نوشته ایم. حالا روی این لینک کلیک کنید تا خروجی را در مرورگرتان ببینید. همانطور که مشاهده کردید، بزرگی و bold بودن این نوشته ها متفاوت است. بگذارید یک مثال عملی برایتان بزنم. به صفحه ی Iran System encoding در ویکی پدیا بروید.

صفحه ی مربوط به encoding در ایران از ویکی پدیا
صفحه ی مربوط به encoding در ایران از ویکی پدیا

در این عکس که قسمتی از همان صفحه است متوجه دو عدد heading می شویم؛ heading اول “Iran System encoding” و heading دوم “Character set” است. همانطور که می بینید، یکی از دیگری بزرگتر است. heading اول در تگ h1 و heading دوم در تگ h2 قرار دارد. آیا می دانید چرا؟(ایران گستر)

مسئله مربوط به کدنویسی نیست، بلکه کاملا منطقی و انسانی است. اگر مقاله ای داشته باشیم که در مورد encoding در ایران باشد، مشخص است که Iran System encoding (به معنی «سیستم کدگذاری ایران») باید تگ h1 باشد چرا که کل مقاله در مورد آن است. سپس متوجه می شویم که لیست کاراکتر ها یا همان Character set یک شاخه ی فرعی یا یک موضوع فرعی است اما هنوز هم تیتر محسوب می شود. بنابراین آن را در تگ h2 قرار می دهیم. حالا اگر تیتر دیگری داشتیم که در مورد برخی از Character set ها بود، باید به آن h3 می دادیم و الی آخر.(ایران گستر)

 

پاراگراف ها

در زبان HTML پاراگراف ها با <p> مشخص می شوند:(ایران گستر)

 

 

1

2

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

<p>This is another paragraph.</p>

 

لینک ها

لینک ها در این زبان با استفاده از تگ <a> مشخص می شوند:(ایران گستر)

 

1

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

همانطور که میبینید این تگ دارای مقداری به نام href است که تگ آغازین اش چسبیده است. به href و امثال آن attribute می گوییم که در جلسات بعد با آن ها آشنا خواهیم شد. کار این attribute ها این است که اطلاعات بیشتری به تگ ضمیمه کنند.

 

تصاویر

برای استفاده از تصاویر در زبان HTML باید از تگ <img> استفاده کنید:(ایران گستر)

 

1

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

 

دکمه ها

برای نمایش دکمه ها (مانند دکمه ی «ورود به حساب کاربری» و …) از تگ <button> استفاده می کنیم:(ایران گستر)

 

1

<button>Click me</button>

 

لیست ها

برای استفاده از لیست ها در زبان HTML از دو تگ <ul> (مخفف unordered list به معنی «لیست بدون ترتیب») یا <ol> (مخفف ordered list به معنی «لیست مرتب») استفاده می شود:(ایران گستر)

 

1

2

3

4

5

<ul>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

از <ul> ها زمانی استفاده می شود که ترتیب موارد لیست اهمیتی نداشته باشد و از <ol> نیز زمانی استفاده می شود که ترتیب اهمیت داشته باشد. در مثال بالا مهم نیست که اول coffee (قهوه) بیاید یا tea (چای) یا milk (شیر). بنابراین از <ul> استفاده کرده ایم.

  • fateme feysali
  • ۰
  • ۰

آموزش گام به گام و تصویری HTML قسمت اول (ایران گستر)

۱۹ مهر۹۸

HTML

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

 

HTML یک زبان برنامه نویسی نیست

باید بدانید که HTML یک زبان برنامه نویسی نیست، بلکه یک زبان نشانه گذاری است و طبق برخی گفته ها دلیل استفاده از کلمه ی نشانه‌گذاری این است که این زبان اعضا و عناصر صفحات وب را با نشانه گذاری به مرورگر می شناساند. به طور مثال از تگ <p> به عنوان یک نشانه استفاده می کند تا به مرورگر بگوید فلان متن یک پاراگراف است. در ضمن باید بدانید که تگ های HTML در مرورگر به نمایش در نمی آیند بلکه روی نحوه ی نمایش محتوا و درک ربات ها از متن و … اثر می گذارند. (ایران گستر)

 

مثالی از یک سند HTML

بیایید نگاهی به یک سند ساده ی HTML بیندازیم:(ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

 

<h1>My First Heading</h1>

<p>My first paragraph.</p>

 

</body>

</html>

نمایش کد بالا در ادیتور آنلاین JSbin

به عناصر کد بالا دقت کنید:

  • <DOCTYPE html!> به مرورگر ها/ ربات ها و … اعلام می کند که این سند، از نوع HTML5 است. در طول سال های اخیر نسخه های مختلفی از HTML معرفی شده اند که آخرین نسخه ی آن HTML 5 است و مبنای کار ما در این دوره قرار می گیرد.(ایران گستر)

 

  • عنصر <html> عنصر اصلی و ریشه ی HTML در هر صفحه ی اچ تی ام ال است.
  • عنصر <head> دارای اطلاعات meta در مورد سند مربوطه است.
  • عنصر <title> برای سند ما یک عنوان تعیین می کند.
  • عنصر <body> شامل محتوای قابل مشاهده توسط کاربر می باشد.
  • عنصر <h1> یک heading بزرگ را تعریف می کند (در آینده با heading ها آشنا می شویم).
  • عنصر <p> یک پاراگراف را تعیین می کند.

1- در انتهای این مقاله با نسخه های آن بیشتر آشنا می شویم.(ایران گستر)

 

ساختار تگ ها

تگ های اچ تی ام ال بین دو عدد angle bracket قرار می گیرند. angle bracket ها همان علامت های کمتر و بیشتری هستند (> یا <). مثال:

<tagname> محتوا در این قسمت قرار می گیرد… </tagname>

تگ های HTML در اکثر مواقع به صورت یک جفت حاضر می شوند مانند <p> و <p/> که به تگ اول start tag یا تگ آغازین و به دومی end tag یا تگ پایانی می گوییم. اگر دقت کنید متوجه می شوید که تگ پایانی دقیقا مانند تگ آغازین نوشته می شود با این تفاوت که یک forward slash (علامت /) نیز دارد.(ایران گستر)

نکته: ممکن است در اینترنت این تگ ها را با نام های opening tag و closing tag نیز ببینید. این نام ها نیز صحیح هستند.

 

مرورگرها

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

[caption id="attachment_64459" align="aligncenter" width="635"]مثالی از یک صفحه ی HTML خالی و ساده در مرورگر Chrome مثالی از یک صفحه ی HTML خالی و ساده در مرورگر Chrome[/caption]
 

در واقع ساختار HTML در مرورگر ها به این شکل است:

ساختار HTML در مرورگر های مختلف

ساختار HTML در مرورگر های مختلف

تنها قسمتی از تصویر بالا که سفید است (یعنی داخل تگ <body>) در مرورگر به نمایش در می آید و دیگر قسمت ها مخصوص مسائل دیگری هستند که در آینده با آن ها آشنا می شویم.(ایران گستر)

 

اعلان <DOCTYPE!>

همانطور که گفته شد، اعلان <DOCTYPE!> نوع سند HTML و نسخه ی آن را مشخص می کند تا مرورگر ها بتوانند صفحات وب را به شکل بهتری نمایش دهند. این اعلان تنها یک بار و آن هم بالای صفحه (قبل از تمام تگ های دیگر) نوشته می شود و نسبت به بزرگی و کوچکی حروف نیز غیر حساس است اما به صورت یک قرارداد همه جا به حروف بزرگ نوشته می شود (البته نسخه ی 5). این اعلان در نسخه ی 5 از HTML به شکل زیر نوشته می شود:(ایران گستر)

 

1

<!DOCTYPE html>

ما در طول این دوره بر اساس HTML 5 کار می کنیم اما جهت آشنایی شما با دیگر declaration ها چند مورد دیگر را نیز آورده ایم:(ایران گستر)

HTML 4.01

Strict:

 

1

2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

   "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0

Strict:

 

1

2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

اگر می خواهید بقیه ی این declaration ها را ببینید به این صفحه از کنسرسیوم جهانی وب مراجعه کنید. همچنین می توانید زمان انتشار نسخه های مختلف را در جدول زیر مشاهده کنید:(ایران گستر)

نسخه سال انتشار
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014

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

HTML 2.0 – DTD:

 

1

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

HTML 3.2 – DTD:

 

1

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

XHTML Basic 1.0 – DTD:

 

1

2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"

    "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
  • fateme feysali
  • ۰
  • ۰

7 ویژگی بارز سیستم عامل مک او اس Catalina (ایران گستر)

۱۸ مهر۹۸

macOS

ایران گستر در صدد آن است تا  اخبار و تکنولوژی های روز IT , اخبار گوگل ,اپلیکیشن های کاربردی (بدافزار ها) یا مفید  را در اختیار شما عزیزان قرار دهد تا شما عزیزان با مطالعه آنها وارد این دنیای شیرین و پر چالش شوید و آنها را در کسب و کار و زندگی خود به کار گیرید.

 

 

سیستم عامل مک او اس Catalina

اپل رسما عرضه سیستم عامل مک او اس Catalina را آغاز کرد. از کاتالینا به عنوان یکی از مهم‌ترین بروزرسانی‌های macOS یاد می‌شود چرا که ویژگی‌های جدیدی را در خود جای داده و می‌تواند تجربه لذت‌بخشی از کار با محصولات مجهز به این سیستم عامل را برای کاربران به ارمغان آورد.(ایران گستر)

در مک او اس Catalina آی‌تیونز به چندین برنامه تجزیه شده و اپل Arcade نیز با بیش از 100 بازی در این نسخه جای گرفته است. با قابلیت Sidebar نیز این امکان برای کاربران فراهم می‌شود تا بتوانند آیپد خود را به نمایشگر ثانویه مک تبدیل کنند. در ادامه به طور مفصل‌تر به این ویژگی‌ها اشاره خواهیم کرد.(ایران گستر)

 

  • اپلیکیشن‌های جداگانه‌ای برای Music، TV و Podcasts

آی‌تیونز بعد از چند سال گنجاندن انواع محتوا در خود، بالاخره به چندین برنامه تقسیم شد. حال آی‌تیونز در مک او اس Catalina به اپلیکیشن‌های مستقل Music، TV و Podcasts تجزیه شده است. قابلیت Finder نیز به گونه‌ای طراحی شده که از مدیریت دستگاه‌های iOS نیز پشتیبانی می‌کند. این امکان برای کاربران فراهم شده تا از طریق سایدبار Finder بتوانند آیفون یا آیپد خود را با کمک قابلیت Locations پیدا کنند.(ایران گستر)

 

  • Sidecar

نگاهی به 7 ویژگی بارز سیستم عامل مک او اس Catalina

یکی از ویژگی‌های جدیدی که در مک او اس Catalina تعبیه شده، امکان استفاده از آیپد به عنوان نمایشگر ثانویه برای دستگاه‌های مک است. از این قابلیت می‌توان به صورت سیمی‌و یا بدون‌سیم (وایرلس) استفاده و ارتباط میان دستگاه‌ها را برقرار کرد.(ایران گستر)

 

  • Screen Time

نگاهی به 7 ویژگی بارز سیستم عامل مک او اس Catalina

این ویژگی برای اولین بار در iOS 12 برای مدیریت میزان استفاده از دستگاه‌های آیفون و آیپد طراحی شد و اکنون راه خود را به دستگاه‌های مک باز کرده است.(ایران گستر)

 

  • اپل آرکید

نگاهی به 7 ویژگی بارز سیستم عامل مک او اس Catalina

سرویس آرکید که به همراه نسخه iOS 13 و iPadOS 13 در اختیار کاربران آیفون و آیپد قرار گرفت. اما در نسخه کاتالینا، بیش از 100 بازی به  سرویس Arcade در مک اضافه شده که کاربر می‌تواند کنترلرهای وایرلس ایکس‌باکس و پلی استیشن 4 Dual Shockرا به آن متصل و استفاده کند.(ایران گستر)

 

  • Find My

اپلیکیشن جدید Find My تلفیقی از اپلیکیشن‌های Find My Friends و Find My Phones است. با این قابلیت کاربران می‌توانند دستگاه‌های خود را پیدا کنند حتی اگر خاموش باشند.(ایران گستر)

 

  • اپلیکیشن‌های بروزرسانی‌شده

اپل در مک او اس Catalina اپلیکیشن‌هایی همچون Photos، Reminders، Notes، Mail و Safari را برزورسانی کرده که ارتقای قابلیت‌های آن‌ها را به دنبال داشته است. همچنین تغییراتی نیز در قابلیت‌های امنیتی این سیستم عامل ایجاد شده که از جمله آن‌ها می‌توان به ارتقای عملکرد Gatekeeper و Activation Lock به لطف استفاده از تراشه T2 اشاره کرد.(ایران گستر)

 

  • دسترسی سریع‌تر

اپل در مک او اس Catalina ویژگی جدیدی را تحت عنوان Voice Control اضافه کرده که با کمک آن، کاربر می‌تواند هدایت دستگاه‌های مک خود را از طریق فرامین صوتی در دست بگیرد.(ایران گستر)

  • fateme feysali
ساخت وبلاگ در بلاگ بیان، رسانه متخصصان و اهل قلم