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



HTML

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

HTML مارا دنبال کنید.

 

 

HTML

تگ <script>

تگ <script> متعلق به زبان HTML بوده و زمانی استفاده می شود که بخواهیم در سند HTML از کدهای جاوا اسکریپتی استفاده کنیم؛ چه این کدها به صورت دستی درون این

تگ وارد شوند و چه شامل آدرسی باشند که به یک فایل خارجی جاوا اسکریپت اشاره می کنند.(

ایران گستر)

بیشترین استفاده از جاوا اسکریپت در این موارد اتفاق می افتد:(

ایران گستر)

  • manipulation: همان دستکاری و تغییر دادن عناصر HTML و محتوای آن است.
  • form validation: همان اعتبارسنجی فرم ها می باشد. به طور مثال اگر از کاربر بخواهید سن خود را وارد کند، باید کاراکترهای حرفی (الفبا) را توسط جاوا اسکریپت غیرمجاز کنیم.(

    ایران گستر)

  • dynamic changes: جاوا اسکریپت می تواند محتوای صفحه را پویا کند؛ به طور مثال یک ساعت دیجیتال را در صفحه نمایش دهد که هر یک ثانیه بروزرسانی می شود.(

    ایران گستر)

1- ممکن است بگویید مگر نمی توان این موارد را در سمت سرور چک کرد؟ حرفتان اشتباه نیست و قطعا اعتبارسنجی در سمت سرور هم انجام می گیرد اما اگر ابتدا یک بار با جاوا اسکریپت

اعتبار سنجی کنیم دیگر نیازی نیست از سرور های خود کار بکشیم و بیخودی روی آن ها بار پردازشی قرار دهیم.(

ایران گستر)

اگر بخواهیم یکی از عناصر HTML را با جاوا اسکریپت بگیریم می توانیم از تابع ()document.getElementById استفاده کنیم. این تابع در واقع عنصر خاصی را بر اساس مقدار

id اش می گیرد. مثال:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html>

<html>

<body>

 

<h2>Use JavaScript to Change Text</h2>

<p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p>

 

<p id="demo"></p>

 

<script>

document.getElementById("demo").innerHTML = "Hello JavaScript!";

</script>

 

</body>

</html>

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

در مثال بالا یک عنصر <p> داشتیم که id آن برابر با demo بود اما محتوایی نداشت. سپس با جاوا اسکریپت آن را دریافت کردیم و به آن محتوا (عبارت Hello JavaScript) دادیم.(

ایران گستر)

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

CSS را نیز به همراه HTML تغییر دهیم:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<html>

<body>

 

<h1>My First JavaScript</h1>

 

<p id="demo">JavaScript can change the style of an HTML element.</p>

 

<script>

function myFunction() {

  document.getElementById("demo").style.fontSize = "25px";

  document.getElementById("demo").style.color = "red";

  document.getElementById("demo").style.backgroundColor = "yellow";        

}

</script>

 

<button type="button" onclick="myFunction()">Click Me!</button>

 

</body>

</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

<!DOCTYPE html>

<html>

<body>

<script>

function light(sw) {

  var pic;

  if (sw == 0) {

    pic = "https://www.w3schools.com/html/pic_bulboff.gif"

  } else {

    pic = "https://www.w3schools.com/html/pic_bulbon.gif"

  }

  document.getElementById('myImage').src = pic;

}

</script>

 

<img id="myImage" src="https://www.w3schools.com/html/pic_bulboff.gif" width="100" height="180">

 

<p>

<button type="button" onclick="light(1)">Light On</button>

<button type="button" onclick="light(0)">Light Off</button>

</p>

 

</body>

</html>

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

در این کد با تغییر دادن دو تصویر متفاوت، تصور می کنیم که با فشار دادن دکمه ها چراغ را خاموش یا روشن می کنیم!

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

ایران گستر)

 

تگ <noscript>

تگ <noscript> که یکی از

تگ های HTML می باشد کار جالبی دارد؛ اگر کاربری که از

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

ایران گستر)

سوال: چه محتوایی باید درون <noscript> بنویسیم؟

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

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!DOCTYPE html>

<html>

<body dir='rtl'>

 

<p id="demo"></p>

 

<script>

document.getElementById("demo").innerHTML = "Hello JavaScript!";

</script>

 

<noscript>متاسفانه مرورگر شما از جاوا اسکریپت پشتیبانی نمی کند بنابراین نمیتوانید محتوای وب سایت را ببینید.</noscript>

 

<p>اگر مرورگری جاوا اسکریپت خود را غیر فعال کرده باشد، متن داخل  تگ noscript را خواهد درد.

  در غیر این صورت همین متنی را که در حال حاضر می خوانید، خواهد خواند!

  

  </p>

  

  <p>

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

  </p>

 

</body>

</html>

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

آدرس دهی فایل ها

آدرس دهی فایل ها در دنیای وب (چه HTML باشد، چه جاوا اسکریپت، چه PHP و …) معمولا از یک قانون پیروی می کنند. file path به معنی مسیر فایل» است و آدرس یک فایل را بر اساس ساختار پوشه های یک سایت مشخص می کند. ما زمانی از file path استفاده می کنیم که بخواهیم از عناصر خارجی استفاده کنیم، مانند:(

ایران گستر)

  • صفحات وب دیگر
  • تصاویر
  • ویدیوها
  • صفحات استایل CSS
  • فایل های جاوا اسکریپت
  • و …

نکته: باید توجه داشته باشید، زمانی که می گوییم عناصر خارجی منظورمان خارج از سورس کد است، نه وما خارج از سرور شما!(

ایران گستر)

 

آدرس مطلق یا کامل (Absolute File Path)

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

ایران گستر)

 

1

2

3

4

5

6

7

8

9

<!DOCTYPE html>

<html>

<body>

 

<h2>Using a Full URL File Path</h2>

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" alt="Mountain" style="width:300px">

 

</body>

</html>

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

 

آدرس نسبی (Relative File Path)

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

ایران گستر)

 

1

<img src="/images/picture.jpg" alt="HTML">

آدرسی که در کد بالا داده ایم با یک اسلش (علامت /) شروع شده است:

/images/picture.jpg

این اسلش می گوید به root (فولدر اصلی) برو و از آنجا دنبال پوشه ی images بگرد و از داخل آن تصویر picture.jpg را پیدا کن!

یک حالت دیگر به این شکل است:(

ایران گستر)

 

1

<img src="images/picture.jpg" alt="HTML">

در این شکل آدرس دهی، از هیچ علامت اسلشی در ابتدای آدرس استفاده نکرده ایم:

images/picture.jpg

این یعنی به پوشه ی images برو و فایل picture.jpg را پیدا کن. البته یادتان باشد زمانی می توانید اینطور آدرس بدهید که فایل سورس کدتان (فایلی که کد بالا را در آن نوشته اید) به همراه images در یک پوشه باشند! به طور مثال اسم فایل سورس کد index.html باشد و به همراه پوشه ای به نام images هر دو در یک پوشه ی دیگر (مثلا My HTML Files) باشند. به همین دلیل این نوع آدرس دهی نسبی» نام دارد؛ فایل هایتان را نسبت به سورس کد آدرس دهی می کنید.(

ایران گستر)

روش دیگر آدرس دهی نسبی به این صورت است:

 

1

<img src="/images/picture.jpg" alt="HTML">

آدرسی که در این کد مشخص کرده ایم با دو علامت نقطه و یک اسلش شروع می شود:

/images/picture.jpg

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

ایران گستر)

 

بهترین روش آدرس دهی

پاسخ این سوال در موقعیت های مختلف متفاوت خواهد بود اما در حالت کلی آدرس دهی نسبی بسیار بهتر است چرا که file path های شما به آدرس URL تان وابسته نمی شوند و با تغییر آن مجبور نیستید همه را دوباره تغییر دهید. همچنین لینک ها و منابعی که آدرس دهی دارند در localhost (کامپیوتر خود) نیز کار می کنند و می توانید هنگام توسعه دادن یک برنامه در سیستم خود نیز کارکرد آن را ببینید.(

ایران گستر)

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

ایران گستر)


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

 


HTML

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

HTML مارا دنبال کنید.

 

 

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

 

عناصر Block

تمام عناصر HTML به صورت پیش فرض دارای مقداری برای خاصیت display خود هستند که به نوع عنصر بستگی دارد. این مقادیر پیش فرض یا

block هستند و یا inline.(

ایران گستر)

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

ایران گستر)

به طور مثال به کد زیر و خروجی آن دقت کنید:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE html>

<html>

<body>

 

<div>Hello</div> <div>World</div>

 

<p>The DIV element is a block element, and will start on a new line.</p>

 

</body>

</html>

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

همانطور که می بینید عنصر div در یک خط جدید شروع به کار کرده است! اگر به آن یک رنگ پس زمینه بدهیم بهتر مشخص می شود:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html>

<html>

  <style>

    #first {

      background-color: red;

    }

    

    #second {

      background-color: purple;

    }

  </style>

<body>

 

<div id="first">Hello</div> <div id='second'>World</div>

 

<p>The DIV element is a block element, and will start on a new line.</p>

 

</body>

</html>

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

در

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

ایران گستر)

نکته: عنصر

div معمولا به عنوان نگه دارنده ی دیگر عناصر مورد استفاده قرار می گیرند و به تنهایی کاربرد خاصی ندارد:

 

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html>

<body>

 

<div style="background-color:black;color:white;padding:20px;">

  <h2>London</h2>

  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>

  <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>

</div>

 

</body>

</html>

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

عناصر Block شامل تمام تگ های زیر می شوند:(

ایران گستر)

<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>

عناصر Inline

عناصر

inline در خط جدید ایجاد نمی شوند و تمام عرض صفحه را نیز نمی گیرند بلکه تنها فضایی را که نیاز داشته باشند اشغال می کنند.(

ایران گستر)

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

 

1

2

3

4

5

6

7

8

9

10

11

<!DOCTYPE html>

<html>

<body>

 

<span>Hello</span>

<span>World</span>

 

<p>The SPAN element is an inline element, and will not start on a new line.</p>

 

</body>

</html>

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

حالا مانند مثال قبلی یک رنگ پس زمینه اضافه می کنیم تا بهتر مشخص شود:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!DOCTYPE html>

<html>

  

  <style>

    #first {

      background-color: red;

    }

    

    #second {

      background-color: purple;

    }

  </style>

  

<body>

 

<span id='first'>Hello</span>

<span id='second'>World</span>

 

<p>The SPAN element is an inline element, and will not start on a new line.</p>

 

</body>

</html>

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

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

نکته: تگ span معمولا به عنوان نگه دارنده ی قسمتی از متن به کار برده می شود:(

ایران گستر)

 

1

2

3

4

5

6

7

8

<!DOCTYPE html>

<html>

<body>

 

<h1>My <span style="color:red">Important</span> Heading</h1>

 

</body>

</html>

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

عناصر inline در زبان HTML شامل تمام موارد زیر می شوند:

<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

کلاس ها

همانطور که می دانید attribute ای به نام class وجود دارد. class برای تعیین استایل های مشابه در عناصری به کار می رود که نام کلاسشان یکی باشد. برای راحت تر شدن موضوع، class را مانند کلاس های درس واقعی تصور کنید که هر عنصر در آن مانند یک دانش آموز در کلاس واقعی است. درست است که دانش آموزان یک کلاس با یکدیگر تفاوت دارند اما شباهت های بسیاری نیز دارند! در زبان HTML این شباهت، استایل های

CSS است.(

ایران گستر)

در مثال زیر 3 تگ div داریم که برای همه شان یک استایل و کلاس تعریف کرده ایم:

 

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

<!DOCTYPE html>

<html>

<head>

<style>

.cities {

  background-color: black;

  color: white;

  margin: 20px;

  padding: 20px;

}

</style>

</head>

<body>

 

<div class="cities">

<h2>London</h2>

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

</div>

 

<div class="cities">

<h2>Paris</h2>

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

</div>

 

<div class="cities">

<h2>Tokyo</h2>

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

</div>

 

</body>

</html>

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

به این صورت می توانیم کدهای تکراری CSS را حذف کنیم و هر سه div را یک جا استایل دهی کنیم. همچنین همانطور که از کد بالا فهمیده اید برای هدف قرار دادن یک کلاس در زبان CSS باید از نقطه استفاده کنیم. به طور مثال:(

ایران گستر)

 

1

2

3

4

5

6

7

<style>

.city {

  background-color: tomato;

  color: white;

  padding: 10px;

}

</style>

نکته: کلاس های HTML می توانند روی هر عنصر و تگی استفاده شوند (inline یا block و …) اما باید توجه داشته باشید که case sensitive (حساس به حروف بزرگ و کوچک انگلیسی) هستند.(

ایران گستر)

 

کلاس های چندگانه

شما می توانید به عناصر 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

<!DOCTYPE html>

<html>

<style>

.city {

  background-color: tomato;

  color: white;

  padding: 10px;

}

 

.main {

  text-align: center;

}

</style>

<body>

 

<h2>Multiple Classes</h2>

<p>All three headers have the class name "city". In addition, London also have the class name "main", which center-aligns the text.</p>

 

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

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

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

 

</body>

</html>

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

همانطور که می بینید، در استایل ها ابتدا گفته ایم کلاس city را قرمز رنگ کن و غیره. سپس گفته ایم آن هایی که کلاس main دارند باید وسط چین باشند. نتیجه ی ادغام این دو استایل همان London است که در خروجی مشاهده می کنید.

با اینکه ما در مثال بالا فقط از تگ های h2 استفاده کردیم اما باید بدانید که می توانید یک کلاس را روی تگ های مختلف نیز پیاده سازی کنید. مثال:(

ایران گستر)

 

1

2

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

<p class="city">Paris is the capital of France</p>

 

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

 

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

<!DOCTYPE html>

<html>

<body>

 

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

<p>Click the button, to hide all elements with the class name "city", with JavaScript:</p>

 

<button onclick="myFunction()">Hide elements</button>

 

<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>

 

<script>

function myFunction() {

  var x = document.getElementsByClassName("city");

  for (var i = 0; i < x.length; i++) {

    x[i].style.display = "none";

  }

}

</script>

 

</body>

</html>

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

اگر به خروجی کد بالا مراجعه کنید، می بینید که با فشرده دکمه ی Hide elements تمام div ها ناپدید می شوند(

ایران گستر)


HTML

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

HTML مارا دنبال کنید.

 

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

 

لیست های غیر ترتیبی

لیست های غیر ترتیبی (در انگلیسی: unordered list) با استفاده از تگ <ul> مشخص شده و سپس درون این

تگ از تگ های <li> برای مشخص کردن هر گزینه استفاده می کنیم. (

ایران گستر)

در حالت پیش فرض این نوع از لیست ها با bullet مشخص می شوند. bullet در لغت به معنی گلوله» است اما منظور از آن در لیست ها همان دایره های سیاه رنگ کنار هر گزینه هستند.(

ایران گستر)

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

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!DOCTYPE html>

<html>

<body>

 

<h2>An unordered HTML list</h2>

 

<ul>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>  

 

</body>

</html>

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

دایره های سیاه کنار هر مورد را به سادگی می توان دید. همچنین به راحتی متوجه می شویم که بین Coffee (قهوه)، Tea (چای) و Milk (شیر) ترتیبی وجود ندارد؛ چه شیر را اول بیاوریم و چه قهوه را، هیچ تفاوتی به حال ما و یا بحث اصلی ندارد (قبل از نتیجه گیری، قسمت لیست های ترتیبی را نیز ببینید).(

ایران گستر)

سوال: چطور می توانیم شکل bullet ها را تغییر دهیم؟(

ایران گستر)

پاسخ: همانطور که دیگر اجزای HTML را تغییر می دهیم! با استفاده از CSS. به جدول زیر نگاه کنید:(

ایران گستر)

مقدار توضیحات
disc این حالت همان bullet های پیش فرض و سیاه رنگ است
circle این حالت دایره ها را به صورت توخالی نمایش می دهد
square این حالت به جای دایره از مربع استفاده می کند
none در این حالت، موارد یک لیست بدون شکل خواهند بود

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

حالت اول: تنظیم روی مقدار disc (

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!DOCTYPE html>

<html>

<body>

 

<h2>Unordered List with Disc Bullets</h2>

 

<ul style="list-style-type:disc;">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>  

 

</body>

</html>

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

حالت دوم: تنظیم روی مقدار Circle (

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!DOCTYPE html>

<html>

<body>

 

<h2>Unordered List with Disc Bullets</h2>

 

<ul style="list-style-type:disc;">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>  

 

</body>

</html>

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

حالت سوم: تنظیم روی مقدار Square (

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!DOCTYPE html>

<html>

<body>

 

<h2>Unordered List with Square Bullets</h2>

 

<ul style="list-style-type:square;">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

 

</body>

</html>

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

حالت چهارم: تنظیم روی مقدار none (

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!DOCTYPE html>

<html>

<body>

 

<h2>Unordered List without Bullets</h2>

 

<ul style="list-style-type:none;">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>  

 

</body>

</html>

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

لیست های ترتیبی

لیست های ترتیبی (به انگلیسی: ordered list) با تگ <ol> مشخص می شود و برای اضافه کردن هر مورد جدید به

لیست باید از همان <li> استفاده کنید. در این نوع از لیست ها، ترتیب اهمیت دارد.(

ایران گستر)

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

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!DOCTYPE html>

<html>

<body>

 

<h2>An ordered HTML list</h2>

 

<ol>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>  

 

</body>

</html>

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

سوال: مگر در قسمت قبل همین مثال را به صورت غیر ترتیبی نیاوردیم و نگفتیم که ترتیب موارد آن اهمیتی ندارد؟

پاسخ: بله! در واقع اهمیت داشتن یا نداشتن ترتیب به دو مورد اصلی بستگی دارد:(

ایران گستر)

  • سلیقه ی شما به عنوان نویسنده
  • زمینه و موضوع بحث

از نظر زمینه و موضوع بحث: بگذارید با مثال برایتان توضیح دهم؛ اگر بحث شما در مورد مقدار پروتئین و میزان کالری شیر، قهوه و چای باشد، ترتیب اهمیت پیدا می کند! تصور کنید می خواهید لیستی به مخاطب ارائه کنید که در آن نوشیدنی ها بر اساس میزان کالری شان لیست شده اند. در این حالت ترتیب اهمیت دارد اما زمانی که می خواهید چند مورد از نوشیدنی های محبوب جهان را نام ببرید آیا باز هم مهم است کدام را اول بیاوریم؟ خیر.(

ایران گستر)

از نظر سلیقه ی نویسنده: سلیقه ی شما ممکن است چنین چیزی را قبول نکند! به طور مثال برای شما (به هر دلیل شخصی که دارید) مهم است ابتدا شیر بیاید یا قهوه یا چای! در این حالت این لیست تغییر می کند. مسئله ی عکس آن نیز صادق است.(

ایران گستر)

بنابراین می توان به عنوان قانونی کلی گفت: زیاد در مورد جزئیات لیست ها، فنی رفتار نکنید چرا که تعیین ترتیب داشتن یا نداشتن موارد یک لیست به این سادگی ها نیست. علاوه بر آن اهمیت آنچنانی نیز ندارد و مسئله ای بین شما و کاربرانتان محسوب می شود.

لیست های ترتیبی انواع مختلفی دارند. به جدول زیر نگاه کنید:(

ایران گستر)

نوع توضیحات
type=”1″ موارد لیست با عدد شماره گذاری می شوند (حالت پیش فرض)
type=”A” موارد لیست با حروف بزرگ انگلیسی علامت گذاری می شوند (A و B و C و …)
type=”a” موارد لیست با حروف کوچک انگلیسی علامت گذاری می شوند (a و b و c و …)
type=”I” موارد لیست با اعداد بزرگ رومی علامت گذاری می شوند (I و II و III و …)
type=”i” موارد لیست با اعداد کوچک رومی علامت گذاری می شوند (i و ii و iii و …)

بیایید هر کدام را بررسی کنیم:

حالت اول: تنظیم روی مقدار Numbers (

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!DOCTYPE html>

<html>

<body>

 

<h2>Unordered List without Bullets</h2>

 

<ul style="list-style-type:none;">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>  

 

</body>

</html>

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

حالت دوم: تنظیم روی حروف بزرگ (

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!DOCTYPE html>

<html>

<body>

 

<h2>Ordered List with Letters</h2>

 

<ol type="A">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>  

 

</body>

</html>

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

حالت سوم: تنظیم روی حروف کوچک (

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!DOCTYPE html>

<html>

<body>

 

<h2>Ordered List with Lowercase Letters</h2>

 

<ol type="a">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>  

 

</body>

</html>

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

حالت چهارم: تنظیم روی حروف رومی بزرگ (

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!DOCTYPE html>

<html>

<body>

 

<h2>Ordered List with Roman Numbers</h2>

 

<ol type="I">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>  

 

</body>

</html>

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

حالت پنجم: تنظیم روی حروف رومی کوچک

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!DOCTYPE html>

<html>

<body>

 

<h2>Ordered List with Lowercase Roman Numbers</h2>

 

<ol type="i">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>  

 

</body>

</html>

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

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

پاسخ: برای این کار از 

attribute ای به نام start شروع می کنیم. به طور مثال کد زیر را طوری نوشته ایم که شمارش در آن ها از عدد 50 شروع شود:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!DOCTYPE html>

<html>

<body>

 

<h2>The start attribute</h2>

<p>شمارش به صورت پیش فرض از عدد 1 شروع می شود اما میتوانیم کاری کنیم که شمارش از عدد دلخواه ما شروع شود:</p>

 

<ol start="50">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

 

<ol type="I" start="50">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

 

</body>

</html>

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

لیست توضیحات

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

ایران گستر)

این نوع از لیست ها با تگ <dl> تعریف شده و برای اضافه کردن هر مورد به آن باید از تگ های زیر استفاده کرد: (

ایران گستر)

  • تگ های <dt> اصطلاح را مشخص می کنند.
  • تگ های <dd> نیز شامل تعریف فنی آن هستند.

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

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html>

<html>

<body>

 

<h2>A Description List</h2>

 

<dl>

  <dt>Coffee</dt>

  <dd>- black hot drink</dd>

  <dt>Milk</dt>

  <dd>- white cold drink</dd>

</dl>

 

</body>

</html>

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

نکته: شما می توانید لیست های HTML را به صورت تو در تو (nested) بنویسید: (

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<html>

<body>

 

<h2>A Nested List</h2>

<p>List can be nested (lists inside lists):</p>

 

<ul>

  <li>Coffee</li>

  <li>Tea

    <ul>

      <li>Black tea</li>

      <li>Green tea</li>

    </ul>

  </li>

  <li>Milk</li>

</ul>

 

</body>

</html>

البته باید توجه داشت که لیست های HTML می توانند تصاویر، لینک ها و دیگر عناصر HTML را نیز در خود جای دهند و اامی در متنی بودنشان نیست. (

ایران گستر)


HTML

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

HTML مارا دنبال کنید.

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

 

جدول ها

Country Contact Company
Germany Maria Anders Alfreds Futterkiste
Mexico Francisco Chang Centro comercial Moctezuma
Austria Roland Mendel Ernst Handel
UK Helen Bennett Island Trading
Canada Yoshi Tannamuri Laughing Bacchus Winecellars
Italy Giovanni Rovelli Magazzini Alimentari Riuniti

 

جدولی که در بالا می بینید نمونه ای از جدول در زبان HTML است، البته جدول های HTML به دلیل وجود زبان CSS می توانند ظاهر بسیار متفاوتی داشته باشند و بستگی به کدهای CSS شما دارند.(

ایران گستر)

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

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

ایران گستر)

برای ساختن جدول ها از تگ  <table> استفاده می کنیم. این

تگ به مرورگر اعلام می کند ما قصد ساخت یک جدول را داریم. سپس در داخل این تگ، برای هر ردیف از جدول‌تان باید از تگ <tr> استفاده کنید که مخفف table row (ردیف جدول) است. اگر ردیف اول شما دارای عنوان برای داده ها است و می خواهید پر رنگ تر باشد باید درون <tr> اول، از تگ <th> استفاده کنید. حالا برای هر خانه ی جدول باید از تگ <td> (مخفف table data) استفاده کنید.(

ایران گستر)

بیایید به یک مثال نگاهی بیندازیم:(

ایران گستر)

 

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

<!DOCTYPE html>

<html>

<body>

 

<h2>Basic HTML Table</h2>

 

<table style="width:100%">

  <tr>

    <th>Firstname</th>

    <th>Lastname</th>

    <th>Age</th>

  </tr>

  <tr>

    <td>Jill</td>

    <td>Smith</td>

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>

    <td>80</td>

  </tr>

</table>

 

</body>

</html>

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

نکته:ها به طور پیش فرض به صورت Bold (پررنگ) و centered (وسط چین) هستند، به همین دلیل خروجی را به این شکل مشاهده می کنید.(

ایران گستر)

باید بدانید <td> ها که خانه های جدول شما را می سازند می توانند هر عنصر HTML ای مانند تصویر، لیست، متن و … را در خود نگه دارند.(

ایران گستر)

 

حاشیه در جدول

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

37

38

39

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

  border: 1px solid black;

}

</style>

</head>

<body>

 

<h2>Bordered Table</h2>

<p>Use the CSS border property to add a border to the table.</p>

 

<table style="width:100%">

  <tr>

    <th>Firstname</th>

    <th>Lastname</th>

    <th>Age</th>

  </tr>

  <tr>

    <td>Jill</td>

    <td>Smith</td>

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>

    <td>80</td>

  </tr>

</table>

 

</body>

</html>

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

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

ایران گستر)

اگر بخواهیم خاصیت دو خطی بودن حاشیه را حذف کنیم می توانیم از دستور border-collapse در زبان CSS استفاده کنیم:(

ایران گستر)

 

1

2

3

4

table, th, td {

  border: 1px solid black;

  border-collapse: collapse;

}

اگر این کار را بکنید کد بالا به این شکل در می آید.

 

اضافه کردن Padding

padding در هر خانه ی جدول، فضایی خالی را بین داده های جدول و حاشیه های آن مشخص می کند. در حالت پیش فرض خانه های جدول ها در HTML هیچ padding ای ندارند. بیایید به جدول خودمان padding اضافه کنیم تا متوجه تغییر آن بشویم:(

ایران گستر)

 

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

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

  border: 1px solid black;

  border-collapse: collapse;

}

th, td {

  padding: 15px;

}

</style>

</head>

<body>

 

<h2>Cellpadding</h2>

<p>Cell padding specifies the space between the cell content and its borders.</p>

 

<table style="width:100%">

  <tr>

    <th>Firstname</th>

    <th>Lastname</th>

    <th>Age</th>

  </tr>

  <tr>

    <td>Jill</td>

    <td>Smith</td>

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>

    <td>80</td>

  </tr>

</table>

 

<p dir='rtl'>سعی کنید مقدار padding را به 5 پیکسل تغییر دهید.</p>

 

</body>

</html>

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

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

 

خصوصیت های border-spacing و text-align

در ضمن همانطور که گفتیم <th> ها به طور پیش فرض به صورت Bold (پررنگ) و centered (وسط چین) هستند اما اگر بخواهیم آن ها را سر جایشان برگردانیم چه کار کنیم؟ می توانیم از text-align استفاده کنیم. این خصوصیت CSS به ما اجازه می دهد راست چین، چپ چین و وسط چین بودن داده های جدول را تعیین کنیم. به طور مثال می خواهیم <th> ها را به سمت چپ ببریم بنابراین کد زیر را به استایل ها اضافه می کنیم:(

ایران گستر)

 

1

2

3

th {

  text-align: left;

}

با اضافه کردن این کد، جدول ما به این شکل در می آید (تمام داده ها به سمت چپ می روند)

از طرفی خصوصیتی به نام border-spacing وجود دارد که مانند نامش، کارش ایجاد فاصله بین حاشیه های خانه های جدول است. بیایید مثالی از آن را ببینیم:(

ایران گستر)

 

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

  <!DOCTYPE html>

  <html>

  <head>

  <style>

  table, th, td {

    border: 1px solid black;

    padding: 5px;

  }

  table {

    border-spacing: 15px;

  }

  </style>

  </head>

  <body>

 

  <h2>Border Spacing</h2>

  <p>Border spacing specifies the space between the cells.</p>

 

  <table style="width:100%">

    <tr>

      <th>Firstname</th>

      <th>Lastname</th>

      <th>Age</th>

    </tr>

    <tr>

      <td>Jill</td>

      <td>Smith</td>

      <td>50</td>

    </tr>

    <tr>

      <td>Eve</td>

      <td>Jackson</td>

      <td>94</td>

    </tr>

    <tr>

      <td>John</td>

      <td>Doe</td>

      <td>80</td>

    </tr>

  </table>

 

  <p dir='rtl'>  مقدار فاصله را به 5 پیکسل تغییر دهید و خروجی را دوباره مشاهده کنید.</p>

 

  </body>

  </html>

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

نکته: اگر حاشیه های جدول شما دارای border-collapse باشند، دستور border-spacing کار نکرده و هیچ تاثیری روی آن ها ندارد. چرا؟ چون گفته نباید حاشیه های دو خطی داشته باشیم (حاشیه های تک خطی) و یک خط هم نمی تواند از خودش فاصله بگیرد! چطور می شود از نظر منطقی یک شیء از خودش فاصله بگیرد؟!(

ایران گستر)

 

خانه های مشترک

حتما شما هم دیده اید که برخی از جدول ها طوری طراحی شده اند که یک خانه متعلق به دو یا چند ستون است و به عبارتی بین آنها مشترک است. این اتفاق معمولا به این دلیل می افتد که مقدار آن خانه مساوی و یا مرتبط به هر دو ستون است. برای ایجاد این نوع خانه ها باید از یک attribute به نام colspan استفاده کنیم:(

ایران گستر)

 

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

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

  border: 1px solid black;

  border-collapse: collapse;

}

th, td {

  padding: 5px;

  text-align: left;    

}

</style>

</head>

<body>

 

<h2>Cell that spans two columns</h2>

<p>To make a cell span more than one column, use the colspan attribute.</p>

 

<table style="width:100%">

  <tr>

    <th>Name</th>

    <th colspan="2">Telephone</th>

  </tr>

  <tr>

    <td>Bill Gates</td>

    <td>55577854</td>

    <td>55577855</td>

  </tr>

</table>

 

</body>

</html>

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

در مثال بالا از آن جایی که شماره تلفن خانه و شماره تلفن همراه هر دو زیر مجموعه ی شماره تلفن یا Telephone قرار می گیرند می توانیم آن ها را ادغام کنیم.(

ایران گستر)

حالت دیگر این است که یک خانه از جدول، شامل چندین ردیف شود. در این حالت از attribute دیگری به نام rowspan استفاده می کنیم. به مثال زیر توجه کنید:(

ایران گستر)

 

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

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

  border: 1px solid black;

  border-collapse: collapse;

}

th, td {

  padding: 5px;

  text-align: left;    

}

</style>

</head>

<body>

 

<h2>Cell that spans two rows</h2>

<p>To make a cell span more than one row, use the rowspan attribute.</p>

 

<table style="width:100%">

  <tr>

    <th>Name:</th>

    <td>Bill Gates</td>

  </tr>

  <tr>

    <th rowspan="2">Telephone:</th>

    <td>55577854</td>

  </tr>

  <tr>

    <td>55577855</td>

  </tr>

</table>

 

</body>

</html>

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

در اینجا هم همان بحث شماره تلفن پیش می آید اما طراحی جدول به طوری است که داده ها به صورت ستونی دریافت می شوند بنابراین می توانیم به این شکل آن ها را به هم مرتبط کنیم.(

ایران گستر)

 

تگ <caption>

تگ <caption> به معنی زیرنویس» یا توضیحات» است و آن را می توانید به جدول هایتان اضافه کنید تا توضیح مختصری را به مخاطب ارائه دهید. به طور مثال:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<table style="width:100%">

  <caption>Monthly savings</caption>

  <tr>

    <th>Month</th>

    <th>Savings</th>

  </tr>

  <tr>

    <td>January</td>

    <td>$100</td>

  </tr>

  <tr>

    <td>February</td>

    <td>$50</td>

  </tr>

</table>

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

Monthly savings (به معنی پس اندازهای ماهانه») توضیح این جدول است و مخاطب را سریعا با محتوای آن آشنا می کند.

نکته: تگ <caption> باید بلافاصله بعد از تگ <table> نوشته شود.(

ایران گستر)

سوال: اگر چندین جدول داشته باشیم اما بخواهیم هر کدام را به شکلی خاص استایل دهی کنیم چطور؟

پاسخ: این سوال در دوره ی CSS پاسخ داده شده است. می توانید برای جدول یک id خاص تعیین کنید و در زمان

استایل دهی با CSS فقط آن id را هدف بگیرید. یک مثال را در این لینک برایتان نوشته ام.(

ایران گستر)

از آنجا که این دوره مربوط به HTML است همین مقدار برایتان کافی است و از نظر 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

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

78

79

80

<!DOCTYPE html>

<html>

<head>

<style>

table {

  width:100%;

}

table, th, td {

  border: 1px solid black;

  border-collapse: collapse;

}

th, td {

  padding: 15px;

  text-align: left;

}

table#t01 tr:nth-child(even) {

  background-color: #eee;

}

table#t01 tr:nth-child(odd) {

background-color: #fff;

}

table#t01 th {

  background-color: black;

  color: white;

}

</style>

</head>

<body>

 

<h2>Styling Tables</h2>

 

<table>

  <tr>

    <th>Firstname</th>

    <th>Lastname</th>

    <th>Age</th>

  </tr>

  <tr>

    <td>Jill</td>

    <td>Smith</td>

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>

    <td>80</td>

  </tr>

</table>

<br>

 

<table id="t01">

  <tr>

    <th>Firstname</th>

    <th>Lastname</th>

    <th>Age</th>

  </tr>

  <tr>

    <td>Jill</td>

    <td>Smith</td>

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>

    <td>80</td>

  </tr>

</table>

 

</body>

</html>

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


HTML

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

HTML مارا دنبال کنید.

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

 

تصاویر و عنصر <img>

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

ایران گستر)

 

1

2

3

4

5

6

7

8

9

<!DOCTYPE html>

<html>

<body>

 

<h2>HTML Image</h2>

<img src="https://s1.1zoom.me/big0/715/Blonde_girl_Snow_Hair_447971.jpg" alt="Girl blowing snow" width="500" height="333">

 

</body>

</html>

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

همانطور که مشاهده می کنید نکاتی در مورد

تگ <img> وجود دارد:(

ایران گستر)

  • این تگ از دسته تگ های خالی است بنابراین هیچ محتوای متنی نمی گیرد.
  • این تگ، تگ های آغازین و پایانی ندارد.
  • این تگ تنها شامل

    attribute های مختلف می شود که مهم ترین آن ها src (مخفف source و به معنی منبع») می باشد.

با این توضیحات متوجه می شویم که ساختار حداقلی تگ img به این شکل است:(

ایران گستر)

 

1

<img src="url">

بیایید تک تک attribute های این تگ را بررسی کنیم:

ویژگی alt

در تصاویری که در دنیای وب هستند، attribute ای به نام alt وجود دارد. کار این attribute ارائه ی متنی جایگزین برای تصویر ما است تا اگر زمانی تصویر ما به کاربر نمایش داده نشود (به طور مثال تصویر به صورت اتفاقی از سرور ما حذف یا فیلتر شده باشد، آدرس دهی ما به src اشتباه باشد و …) به جای آن متنی نمایش داده شود که به کاربر بگوید این تصویر در مورد چه چیزی بوده است.(

ایران گستر)

استفاده ی دیگر این تگ نیز برای افراد نابینا یا کم بینا است که از دستگاه های screen reader استفاده می کنند. screen reader ها می توانند alt را بخوانند تا فرد متوجه تصویر شود.(

ایران گستر)

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

مثال:

 

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html>

<body>

 

<h2>Alternative text</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://s1.1zoom.me/big0/715/Blonde_girl_Snow_Hair_447971.jpg" alt="دختری با لباس های زمستانی در هوای سرد" width="500" height="333">

 

</body>

</html>

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

هشدار: بسیاری از attribute ها در زبان HTML دلخواه هستند اما alt اجباری است و اگر صفحه ی شما تصاویر بدون alt داشته باشد، از نظر HTML غیر معتبر تلقی شده و می تواند به رتبه بندی و سئوی شما ضربه بزند.(

ایران گستر)

 

ویژگی های Width و Height

قبلا به صورت کوتاه اشاره کرده بودیم که می توانید از style استفاده کنید تا width (عرض یا پهنا) و height (طول یا ارتفاع) یک تصویر را مشخص کنید:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html>

<body>

 

<h2>Alternative text</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://s1.1zoom.me/big0/715/Blonde_girl_Snow_Hair_447971.jpg" alt="دختری با لباس های زمستانی در هوای سرد" style="width:500px;height:350px;>

 

</body>

</html>

خروجی این کد در JSBin

اما این روش آنچنان چنگی به دل نمی زند. چرا که باز هم inline (درون‌خطی) است. اگر نمی دانید استایل های inline چه هستند به 

دوره ی CSS ما سری بزنید.(

ایران گستر)

بنابراین راه بهتر چیست؟ راه بهتر این است که اصلا از CSS استفاده نکنیم چرا که خود زبان HTML برای ما attribute هایی را به همین اسم فراهم کرده است:(

ایران گستر)

 

1

<img src="https://s1.1zoom.me/big0/715/Blonde_girl_Snow_Hair_447971.jpg" alt="دختری با لباس های زمستانی در هوای سرد" width="500" height="350">

واحد کار با تصاویر در زبان HTML پیکسل است بنابراین ‘width = ‘500 یعنی عرض تصویر 500 پیکسل باشد.

سوال: اگر کد های CSS را به صورت inline ننویسیم چطور؟

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

ایران گستر)

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

ایران گستر)

 

آدرس دهی src

حتما متوجه شده اید که تا به حال برای src از آدرس کامل (full path) استفاده کرده ام، دلیل آن هم این است که تصویر مورد نظر خود را از سرور دیگری برداشته ام. اگر تصویر شما روی سرور خودتان وجود دارد می توانید از آدرس دهی نسبی (relative path) استفاده کنید. مثال:(

ایران گستر)

 

1

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

تصاویر متحرک

شما مجاز هستید در زبان HTML از تصاویر متحرک GIF نیز استفاده کنید. به طور مثال میخواهیم GIF زیر را به کد هایمان اضافه کنیم:(

ایران گستر)

[caption id="attachment_71273" align="aligncenter" width="248"]وقتی بعد از 100 بار ویرایش کد ها، باز هم چند تا باگ توی برنامه ات می بینی! وقتی بعد از 100 بار ویرایش کد ها، باز هم چند تا باگ توی برنامه ات می بینی.[/caption]

 

اضافه کردن این تصویر به یک صفحه ی HTML به سادگی کد زیر است:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

<!DOCTYPE html>

<html>

<body>

 

<h2>Animated Images</h2>

<p>The GIF standard allows moving images.</p>

 

<img src="https://undo.io/media/uploads/files/Frustrated_programmer.gif" alt="وقتی بعد از 100 بار ویرایش کد ها، باز هم چند تا باگ توی برنامه ات می بینی!" width="500" height="350">

 

</body>

</html>

خروجی این کد در JSBin

همچنین به یاد داشته باشید که تصاویر GIF از دیگر تصاویر جدا نیستند، بنابراین می توانید به راحتی آن ها را نیز به لینک تبدیل کنید! اگر از قسمت های قبلی به یاد داشته باشید برای این کار تنها کافی است تگ img را بین تگ های a قرار دهید:

(

ایران گستر)

 

1

2

3

<a href="roxo.ir">

  <img src="Programmer.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">

</a>

 

ویژگی float

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

ایران گستر)

 

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<html>

<body>

 

<h2>Floating Images</h2>

<p align ='center'><strong>کردن تصاویر به سمت راست نوشته float</strong></p>

 

<p>

<img src="https://www.w3schools.com/html/smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">

A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.

</p>

 

<p align ='center'><strong>کردن تصاویر به سمت چپ نوشته float</strong></p>

<p>

<img src="https://www.w3schools.com/html/smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">

A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.  

</p>

 

</body>

</html>

خروجی این کد در JSBin

البته این نکته پیچیده تر و به مبحث CSS مربوط می شود بنابراین توضیحات بیشتر آن را به 

دوره ی CSS واگذار می کنیم.(

ایران گستر)

 

عنصر <picture>

در HTML5 عنصر جدیدی به نام <picture> معرفی شده است تا به صفحات وب انعطاف پذیری بیشتری بدهد. تگ <picture> شامل چند تگ <source> می باشد که هر کدام از آن ها دارای attribute هایی هستند که به مرورگر می گویند در دستگاه های مختلف (با سایز صفحات مختلف) کدام تصویر بهتر نمایش داده می شود. به مثال زیر دقت کنید تا بهتر متوجه این موضوع شوید.(

ایران گستر)

 

در مثال زیر میبینید که با تغییر سایز پنجره ی مرورگر و یا تغییر سایز قسمت راست (قسمت مشاهده ی خروجی در JSBin) تصاویری که برای شما نمایش داده می شوند متفاوت هستند:(

ایران گستر)

 

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

 

<h2>The picture Element</h2>

 

<picture>

  <source media="(min-width: 650px)" srcset="https://www.w3schools.com/html/img_pink_flowers.jpg">

  <source media="(min-width: 465px)" srcset="https://www.w3schools.com/html/img_white_flower.jpg">

  <img src="https://www.w3schools.com/html/img_orange_flowers.jpg" alt="Flowers" style="width:auto;">

</picture>

 

</body>

</html>

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

صفحه ی نتایج (سمت راست) و یا پنجره ی مرورگر خود را کوچک و بزرگ کنید تا متوجه تغییر تصاویر بشوید! مرورگر با استفاده از media query ها سعی می کند بهترین تصویر را برای سایز صفحه ی شما پیدا کند. اگر دقت کنید می بینید که تگ آخر به جای آنکه از نوع <source> باشد، از نوع img است. باید بدانید که قرار دادن آخرین تصویر با تگ img اامی است و حتما باید انجام شود؛ دلیل آن این است که اگر مرورگری بسیار قدیمی بود و از تگ  <picture>  پشتیبانی نمی کرد،

وب سایت شما بدون تصویر نماند و همان تصویر img بارگذاری شود.(

ایران گستر)

 

نکته: این قابلیت در مرورگر IE12 و نسخه های قبل تر و همچنین در Safari 9.0 و نسخه های قبل تر پشتیبانی نمی شود.


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 از همان صفحه می برد (اسکرول برای شما انجام شده است و دیگر در ابتدای صفحه نخواهید بود.(

ایران گستر)


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 کاملا برعکس شده است.(

ایران گستر )


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 از این تگ استفاده کرده ایم. البته تمام کاربرد های این تگ و تگ قبلی محدود به متون علمی نیست بلکه اینها یک مورد از چندین مورد استفاده ی آن هستند.

ایران گستر

 


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

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

ایران گستر )


HTML

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

HTML مارا دنبال کنید.

 

 

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

 

نمایش کدهای کامپیوتری

 وقتی می گوییم کدهای کامپیوتری یعنی کدهایی که به یکی از زبان های برنامه نویسی یا نشانه گذاری یا … تعلق داشته باشد. اگر به کدهای کامپیوتری نگاه کرده باشید متوجه می شوید که از نظر ظاهری کمی با متون عادی متفاوت هستند. ما می خواهیم در این قسمت این حالت را در HTML به وجود بیاوریم.(

ایران گستر)

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

ایران گستر)

 

ورودی های صفحه کلید

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

تگ قرار بگیرند با فونت monospace نمایش داده خواهند شد. به این مثال توجه کنید:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

<!DOCTYPE html>

<html>

<body>

 

<h2>The kbd Element</h2>

<p>The kbd element represents user input:</p>

 

<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>

 

</body>

</html>

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

به خروجی بروید تا قسمت Ctrl و S را در فونت monospace مشاهده کنید.(

ایران گستر)

 

خروجی برنامه ها

معمولا برای نمایش خروجی یک کد

برنامه نویسی یا یک برنامه ی کامپیوتری از تگ <samp> استفاده می کنند. متنی که در این تگ نوشته شود نیز با فونت monospace مرورگر نمایش داده خواهد شد. مثال:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

<!DOCTYPE html>

<html>

<body>

 

<h2>The samp Element</h2>

<p>The samp element represents output from a program or computing system:</p>

 

<p>If you input wrong value, the program will return <samp>Error!</samp></p>

 

</body>

</html>

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

 

کد برنامه نویسی

کدهای برنامه نویسی مهم ترین و شایع ترین دلیل استفاده از این نوع فونت هستند و شکل کاملا متفاوتی دارند. اگر شما بخواهید قسمتی از کدی را در وب سایت خود نمایش دهید می توانید از تگ <code> استفاده کنید تا کدها در فونت monospace به نمایش در بیایند.(

ایران گستر)

در مثال زیر چند خط کد ساده را نوشته ایم:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html>

<html>

<body>

 

<h2>The code Element</h2>

<p>Programming code example:</p>

 

<code>

x = 5;

y = 6;

z = x + y;

</code>

 

</body>

</html>

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

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

x = 5; y = 6; z = x + y;

اما معمولا هنگام کدنویسی کسی اینطور کد نمی نویسد بنابراین راه حل چیست؟

تگ <code> مانند خود HTML کاری با اینترها و فضای خالی ندارد. برای آنکه اینترها (البته نحوه ی صحیح بیان آن line break است) را رعایت کنیم باید از تگ <pre> استفاده شود:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!DOCTYPE html>

<html>

<body>

 

<p>The code element does not preserve whitespace and line-breaks.</p>

<p>To fix this, you can put the code element inside a pre element:</p>

 

<pre>

<code>

x = 5;

y = 6;

z = x + y;

</code>

</pre>

 

</body>

</html>

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

همچنین برای نمایش متغیرها، چه در زبان های برنامه نویسی و چه در معادلات فیزیکی و ریاضی، می توانیم از <var> استفاده کنیم:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

<!DOCTYPE html>

<html>

<body>

 

<h2>The var Element</h2>

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

 

</body>

</html>

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

سوال: چه تفاوتی دارد که از کدام یک از این تگ ها استفاده کنیم؟ همه ی آن ها ظاهر یکسانی دارند.(

ایران گستر)

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

ایران گستر)

 

HTML Entities و کاراکترهای رزرو شده

برخی از کاراکترها در زبان های برنامه نویسی رزرو شده هستند؛ برخی کاراکترها نیز در زبان HTML رزرو شده هستند یعنی در 

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

ایران گستر)

  • زمانی که کاراکتر مورد نظر ما در زبان HTML رزرو شده باشد
  • زمانی که کاراکتر مورد نظر ما اصلا روی کیبورد وجود نداشته باشد

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

ایران گستر)

معمولا ساختار کلی entity ها به این شکل است:

 

1

2

3

4

&entity_name;

OR

 

&#entity_number;

به طور مثال برای حل مشکل استفاده از علامت کمتری باید از ;&lt یا ;&#60 استفاده کنیم! مزیت استفاده از entity ها آسان بودن حفظ و کار با آن ها است اما نکته ی منفی آن ها این است که برخی از مرورگر ها از تمام entity پشتیبانی نمی کنند و باید مواظب این مورد باشید.(

ایران گستر)

 

کاراکتر Non-breaking Space

کاراکتری در زبان HTML وجود دارد به نام Non-breaking Space (به معنی اسپیس غیر شکستنی») که به این شکل نوشته می شود: ;&nbsp  .(

ایران گستر)

ما از آن جهت به این کاراکتر اسپیس غیر شکستنی می گوییم که اگر دو کلمه با این اسپیس از هم جدا شوند دیگر در آخر خط شکسته نمی شوند و یکی از آن ها به خط بعد نمی رود بلکه همیشه به هم چسبیده اند. تصور کنید می خواهیم بگوییم 10 کیلومتر بر ساعت؛ باید آن را اینطور بنویسیم:(

ایران گستر)

10 km/h

مواردی مانند بالا (10 کیلومتر بر ساعت) نباید از هم جدا شوند چرا که قسمت عددی مقدار را نشان می دهد و قسمت حرفی نیز واحد آن را نشان می دهد، اما در عین حال باید بینشان اسپیس باشد و به هم نچسبند. در این حالت از Non-breaking Space استفاده می کنیم.(

ایران گستر)

اما استفاده ی اصلی از Non-breaking Space زمانی است که می خواهیم چندین اسپیس را در متن خود داشته باشیم اما همانطور که می دانید HTML اسپیس های بیشتر از یک عدد را حذف می کند و به آن ها اهمیت نمی دهد. اگر در سورس کد خود تنها اسپیس بزنید هیچ اتفاقی نمی افتد اما اگر از Non-breaking Space استفاده کنید اسپیس ها سر جایشان خواهند ماند.(

ایران گستر)

 

دیگر Entity ها

در اینجا لیست برخی از Entity های مختلف در زبان HTML را برایتان آورده ایم:

کد عددی Entity کد حرفی Entity نام یا توضیح نتیجه
  &nbsp; non-breaking space  
< &lt; کمتر از (در فارسی برعکس است) <
> &gt; بیشتر از (در فارسی برعکس است) >
& &amp; علامت ampersand &
&quot; علامت نقل قول double
&apos; علامت نقل قول single
&cent; سنت (پول)
£ &pound; پوند (پول) £
&yen; ین (پول)
&euro; یورو (پول)
© &copy; علامت کپی رایت (حق انتشار) ©
® &reg; علامت تجاری ثبت شده ®

هشدار: کد حرفی Entity ها نسبت به بزرگی و کوچکی حروف حساس است.(

ایران گستر)

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


HTML

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

HTML مارا دنبال کنید.

 

 

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

 

 

طراحی واکنش گرا چیست؟

طراحی واکنش گرا نوعی از

طراحی سایت بوده که در سال های اخیر باب شده است و هدف اصلی آن استفاده از HTML و CSS به طوری است که ظاهر و سایز صفحات را بر اساس نیازشان تغییر دهد.(

ایران گستر)

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

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

ایران گستر)

می خواهیم چند مورد از مواردی را که در این زمینه کاربرد دارند برایتان بازگو کنیم.(

ایران گستر)

 

تصحیح Viewport

اولین قدم برای واکنش گرا کردن یک سایت تنظیم viewport آن با استفاده از <meta> می باشد. در دو مثال زیر تفاوت استفاده از آن را متوجه می شوید:(

ایران گستر)

مثال اول

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!DOCTYPE html>

<html>

<body>

 

<p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>

 

<img src="https://www.w3schools.com/css/img_chania.jpg" alt="Chania" width="460" height="345">

 

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

</p>

 

</body>

</html>

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

اگر اندازه ی خروجی یا سایز پنجره تان را کوچک کنید متوجه می شوید که تصویر موجود در

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

ایران گستر)

مثال دوم

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<style>

img {

    max-width: 100%;

    height: auto;

}

</style>

</head>

<body>

<p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>

 

<img src="https://www.w3schools.com/css/img_chania.jpg" alt="Chania" width="460" height="345">

 

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

</p>

 

</body>

</html>

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

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

ایران گستر)

 

استفاده از تصاویر واکنش گرا

تصاویر واکنش گرا تصاویری هستند که با تغییر سایز صفحه، سایزشان تغییر می کند. اگر خاصیت width را برابر با 100 درصد گذاشته باشید، تصاویر از نوع واکنش گرا خواهند بود و سایزشان تغییر می کند.(

ایران گستر)

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

 

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<body>

 

<h2>Responsive Image</h2>

<p dir='rtl'>اگر خاصیت  width  را برابر با 100 درصد گذاشته باشید، تصاویر از نوع واکنش گرا خواهند بود و سایزشان تغییر می کند.</p>

 

<img src="https://www.w3schools.com/html/img_girl.jpg" style="width:100%;">

 

</body>

</html>

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

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

ایران گستر)

البته مشکلی وجود دارد؛ اگر سایز قسمت خروجی را بزرگتر از سایز عادی اش بکنید، تصویر نیز بزرگتر از سایز عادی اش می شود و صفحه را زشت می کند. برای آنکه به تصاویر اجازه ندهیم از سایز مشخصی بزرگتر شوند می توانیم به جای استفاده از خاصیت width از خاصیت max-width استفاده کنیم.(

ایران گستر)

در این صورت شاهد مثال زیر می شویم:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!DOCTYPE html>

<html>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<body>

 

<h2>Responsive Image</h2>

<p dir='rtl'>اگر خاصیت  max-width  را برابر با 100 درصد گذاشته باشید، تصاویر از نوع واکنش گرا خواهند بود و سایزشان تغییر می کند.

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

  </p>

 

<img src="https://www.w3schools.com/html/img_girl.jpg" style="max-width:100%;height:auto;">

 

</body>

</html>

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

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

استفاده از تصاویر متفاوت

برخی اوقات تغییر سایز تصویر راه حل خوبی نیست و به درستی کار نمی کند. برای چنین مواقعی می توانیم از عنصر <picture> استفاده کنیم. این عنصر به شما اجازه می دهد که چندین تصویر را برای یک قسمت قرار دهید که بر اساس سایز صفحه، کاربر تصویر مناسب اش را به او بدهیم. به این مثال نگاهی بیندازید:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!DOCTYPE html>

<html>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<body>

 

<h2>Show Different Images Depending on Browser Width</h2>

<p>Resize the browser width and the image will change at 600px and 1500px.</p>

 

<picture>

  <source srcset="https://www.w3schools.com/html/img_smallflower.jpg" media="(max-width: 600px)">

  <source srcset="https://www.w3schools.com/html/img_flowers.jpg" media="(max-width: 1500px)">

  <source srcset="https://www.w3schools.com/html/flowers.jpg">

  <img src="https://www.w3schools.com/html/img_flowers.jpg" alt="Flowers" style="width:auto;">

</picture>

 

</body>

</html>

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

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

ایران گستر)

نتها نکته ی منفی این دستور این است که با آپلود کردن چندین عکس برای هر قسمت از سایتتان، فضای زیادی از سرور را اشغال می کنید بنابراین پیشنهاد ما این است که از این قابلیت تنها در جاهایی استفاده کنید که با کدنویسی جواب نگرفته اید.(

ایران گستر)

 

متون واکنش گرا

با بزرگ و کوچک شدن یک صفحه، متون ما نیز باید کوچک و بزرگ شوند، در غیر این صورت یا صفحه ظاهر زشتی پیدا می کند و یا خواندن مطالب خیلی سخت می شود. برای واکنش گرا کردن یک متن باید سایز آن را با واحد vw تنظیم کنیم و از مقادیری مثل پیکسل و … دوری کنیم. به کد زیر نگاه کنید:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html>

<html>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<body>

 

<h1 style="font-size:10vw;">Responsive Text</h1>

 

<p dir='rtl' style="font-size:5vw;">با تغییر سایز این قسمت متوجه می شوید که اندازه ی فونت و نوشته ی ما نیز تغییر می کند.</p>

 

<p dir='rtl' style="font-size:5vw;">اگر از 10vw استفاده کنید اندازه ی فونت شما 10 درصد از کل viewport را خواهد گرفت.</p>

 

<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</p>

 

</body>

</html>

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

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

ایران گستر)

 

استفاده از Media Queries

media query ها دستور هایی متعلق به 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

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

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

* {

  box-sizing:border-box;

}

 

.left {

  background-color:#2196F3;

  padding:20px;

  float:left;

  width:20%; /* The width is 20%, by default */

}

 

.main {

  background-color:#f1f1f1;

  padding:20px;

  float:left;

  width:60%; /* The width is 60%, by default */

}

 

.right {

  background-color:#4CAF50;

  padding:20px;

  float:left;

  width:20%; /* The width is 20%, by default */

}

 

/* Use a media query to add a break point at 800px: */

@media screen and (max-width:800px) {

  .left, .main, .right {

    width:100%; /* The width is 100%, when the viewport is 800px or smaller */

  }

}

</style>

</head>

<body>

 

<h2>Media Queries</h2>

<p>Resize the browser window.</p>

 

<p dir = 'rtl'>قسمت خروجی را کوچکتر کنید تا به 800px برسد. آن موقع متوجه تغییر می شوید

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

  </p>

 

<div class="left">

  <p>Left Menu</p>

</div>

 

<div class="main">

  <p>Main Content</p>

</div>

 

<div class="right">

  <p>Right Content</p>

</div>

 

</body>

</html>

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

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

ایران گستر)

@media screen and (max-width:800px)

این دستور یک media query است و می گوید زمانی که عرض صفحه به 800 پیکسل رسید، استایل های قبلی را فراموش کن و استایل هایی که من می گویم را اعمال کن. به همین دلیل است که شاهد تغییر محتوا در عرض 800 پیکسل هستیم. در مورد media query ها در دوره ی آموزش زبان CSS بیشتر صحبت خواهیم کرد.(

ایران گستر)

 

استفاده از فریم ورک های CSS

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

ایران گستر)

 

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

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Bootstrap Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

 

<div class="container">

  <div class="jumbotron">

    <h1>My First Bootstrap Page</h1>

    <p>Resize this responsive page to see the effect!</p>

  </div>

  <div class="row">

    <div class="col-sm-4">

      <h3>Column 1</h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>

    </div>

    <div class="col-sm-4">

      <h3>Column 2</h3>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>

    </div>

    <div class="col-sm-4">

      <h3>Column 3</h3>        

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>

    </div>

  </div>

</div>

 

</body>

</html>

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

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

ایران گستر)


HTML

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

HTML مارا دنبال کنید.

 

 

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

 

طرح کلی صفحات HTML

صفحات وب مانند صفحات رومه ها و مجلات، محتوای خود را در ستون ها و طرح های خاصی نمایش می دهند. با معرفی HTML5 مبحث

semantics وارد دنیای طراحی وب شد و حالا عناصری را داریم که semantic هستند.(

ایران گستر)

semantic در لغت به معنی معنایی» است و وقتی می گوییم عناصرِ semantic، منظورمان عناصری است که در HTML5 دیگر تنها یک عنصر نیستند، بلکه برای موتورهای جست و جو معنی خاصی دارند.(

ایران گستر)

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

ایران گستر)

  • <header> مسئول تعریف قسمت header در سایت ها است
  • <nav> مسئول تعریف منوی سایت ها (نوار navigation) است
  • <section> مسئول تعریف یک قسمت در سایت ما است
  • <article> مسئول تعریف قسمتی مستقل است که دارای مقاله ای از سایت ما است
  • <aside> مسئول تعریف قسمت کناری و جانبی سایت است
  • <footer> مسئول تعریف قسمت footer در سایت ها است
  • <details> مسئول تعریف جزئیات بیشتر در صفحات وب است
  • <summary> مسئول تعریف یک heading برای عنصر <details> است.(

    ایران گستر)

برای درک بهتر به تصویر زیر نگاه کنید:(

ایران گستر)

طرح کلی HTML5

طرح کلی HTML5

این نوع طرح، تنها طرحی نیست که شما می توانید برای

سایت خود انتخاب کنید بلکه طرح های بسیار زیادی وجود دارد اما ما می خواهیم در این قسمت در مورد این طرح صحبت کنیم چرا که یکی از قدیمی ترین و اصیل ترین طرح ها برای صفحات HTML است.(

ایران گستر)

برای ایجاد این نوع طرح چند ستونه 5 روش اصلی وجود دارد:(

ایران گستر)

  • استفاده از جداول HTML (این مورد منسوخ شده است و به هیچ عنوان پیشنهاد نمی شود.
  • استفاده از خاصیت float در CSS
  • استفاده از flexbox در CSS
  • استفاده از framework های زبان CSS
  • استفاده از grid ها در CSS (

    ایران گستر)

 

جداول HTML

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

ایران گستر)

استفاده از <table> برای شکل دادن به صفحات وب تان کاری بسیار طاقت فرسا و غیر استاندارد است که کاملا منسوخ شده و هیچ انسان عاقلی دیگر از آن استفاده نمی کند.(

ایران گستر)

 

فریم ورک های CSS

استفاده از framework های زبان

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

ایران گستر)

 

فریم ورک Bulma

[caption id="attachment_77302" align="aligncenter" width="750"]Bulma CSS Framework Bulma CSS Framework[/caption]
 

فریم ورک Bulma یکی از محبوب ترین فریم ورک های CSS است که قبلا با نام Scotch شناخته میشد. از مزیت های اصلی این فریم ورک این است که از CSS خالص تشکیل شده است و هیچ کد جاوا اسکریپتی ندارد؛ بنابراین تنها باید یک فایل css را درون پروژه ی خود import کنید و نیازی به فایل های js نیست.(

ایران گستر)

همچنین این فریم ورک بر اساس Flexbox طراحی شده است و بر پایه ی Sass می باشد بنابراین تنها از کدهایی استفاده خواهید کرد که به آن ها نیاز داشته باشید. طراحی با این فریم ورک کاملا واکنش گرا (responsive) بوده و اولویت خود را بر گوشی های موبایل قرار داده است.(

ایران گستر)

 

فریم ورک Bootstrap

[caption id="attachment_77313" align="aligncenter" width="750"]Bootstrap Framework Bootstrap Framework[/caption]
 

فکر نمی کنم Bootstrap نیاز به معرفی داشته باشد! Bootstrap یکی از بزرگترین فریم ورک های CSS در دنیا می باشد که تا امروز به نسخه ی چهارم خود رسیده است. این فریم ورک، فریم ورک پیش فرض اکثر توسعه دهندگان وب است و بر اساس SASS و LESS ساخته شده است. می توان به صورت خلاصه گفت که 

Bootstrap بزرگترین فریم ورک CSS محسوب می شود.(

ایران گستر)

فریم ورک های بسیار دیگری نیز وجود دارد اما ما نمی توانیم تمام آن ها را بررسی کنیم. این دو مورد از موارد مشهور در کنار فریم ورک Foundation هستند.(

ایران گستر)

 

استفاده از خاصیت float در CSS

استفاده از خصوصیت float برای نظم دهی به صفحات وب و طراحی چند ستونه از شایع ترین روش های طراحی است. از مزیت های کار با float این است که یادگیری آن بسیار آسان است؛ تنها کافی است با خصوصیت های float و clear آشنا باشید. اما نکته ی منفی آن اینجاست که عناصر float وابسته به document flow (جریان عناصر در سند 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

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

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

<!DOCTYPE html>

<html lang="en">

<head>

<title>CSS Template</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {

  box-sizing: border-box;

}

 

body {

  font-family: Arial, Helvetica, sans-serif;

}

 

/* Style the header */

header {

  background-color: #666;

  padding: 30px;

  text-align: center;

  font-size: 35px;

  color: white;

}

 

/* Create two columns/boxes that floats next to each other */

nav {

  float: left;

  width: 30%;

  height: 300px; /* only for demonstration, should be removed */

  background: #ccc;

  padding: 20px;

}

 

/* Style the list inside the menu */

nav ul {

  list-style-type: none;

  padding: 0;

}

 

article {

  float: left;

  padding: 20px;

  width: 70%;

  background-color: #f1f1f1;

  height: 300px; /* only for demonstration, should be removed */

}

 

/* Clear floats after the columns */

section:after {

  content: "";

  display: table;

  clear: both;

}

 

/* Style the footer */

footer {

  background-color: #777;

  padding: 10px;

  text-align: center;

  color: white;

}

 

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */

@media (max-width: 600px) {

  nav, article {

    width: 100%;

    height: auto;

  }

}

</style>

</head>

<body>

 

<h2>CSS Layout Float</h2>

<p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p>

<p>Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)</p>

 

<header>

  <h2>Cities</h2>

</header>

 

<section>

  <nav>

    <ul>

      <li><a href="#">London</a></li>

      <li><a href="#">Paris</a></li>

      <li><a href="#">Tokyo</a></li>

    </ul>

  </nav>

  

  <article>

    <h1>London</h1>

    <p>London is the capital city of England. It is the most populous city in the  United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>

    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>

  </article>

</section>

 

<footer>

  <p>Footer</p>

</footer>

 

</body>

</html>

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

در مثال بالا یک صفحه ی وب را به صورت ساده طراحی کرده ایم که از عناصر semantic در HTML5 استفاده کرده است.(

ایران گستر)

 

استفاده از Flexbox

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

دوره ی 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

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

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

<!DOCTYPE html>

<html lang="en">

<head>

<title>CSS Template</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {

  box-sizing: border-box;

}

 

body {

  font-family: Arial, Helvetica, sans-serif;

}

 

/* Style the header */

header {

  background-color: #666;

  padding: 30px;

  text-align: center;

  font-size: 35px;

  color: white;

}

 

/* Container for flexboxes */

section {

  display: -webkit-flex;

  display: flex;

}

 

/* Style the navigation menu */

nav {

  -webkit-flex: 1;

  -ms-flex: 1;

  flex: 1;

  background: #ccc;

  padding: 20px;

}

 

/* Style the list inside the menu */

nav ul {

  list-style-type: none;

  padding: 0;

}

 

/* Style the content */

article {

  -webkit-flex: 3;

  -ms-flex: 3;

  flex: 3;

  background-color: #f1f1f1;

  padding: 10px;

}

 

/* Style the footer */

footer {

  background-color: #777;

  padding: 10px;

  text-align: center;

  color: white;

}

 

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */

@media (max-width: 600px) {

  section {

    -webkit-flex-direction: column;

    flex-direction: column;

  }

}

</style>

</head>

<body>

 

<h2>CSS Layout Flexbox</h2>

<p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p>

<p>Resize the browser window to see the responsive effect.</p>

<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 and earlier versions.</p>

 

<header>

  <h2>Cities</h2>

</header>

 

<section>

  <nav>

    <ul>

      <li><a href="#">London</a></li>

      <li><a href="#">Paris</a></li>

      <li><a href="#">Tokyo</a></li>

    </ul>

  </nav>

  

  <article>

    <h1>London</h1>

    <p>London is the capital city of England. It is the most populous city in the  United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>

    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>

  </article>

</section>

 

<footer>

  <p>Footer</p>

</footer>

 

</body>

</html>

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

 

استفاده از Grid View

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

ایران گستر)

[caption id="attachment_77281" align="aligncenter" width="1944"]تفاوت صفحات طراحی شده با CSS Grid تفاوت صفحات طراحی شده با CSS Grid[/caption]
 

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

Grid استفاده کنید دیگر نیازی به استفاده از float و مدیریت فضای پیشرفته نخواهید داشت.(

ایران گستر)

نکته: خصوصیت Grid که به صورت پیش فرض در CSS وجود دارد در مرورگر Internet Explorer 15 و قبل تر کار نمی کند اما Grid هایی وجود دارند که توسط توسعه دهندگان به عنوان کدهای جداگانه ساخته شده اند. شما می توانید با دانلود کردن این نوع Grid ها از آن ها در هر مرورگری استفاده کنید.(

ایران گستر)


HTML

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

HTML مارا دنبال کنید.

 

 

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

 

 

عنصر <head> چیست؟

عنصر <head> در یک سند HTML وظیفه ی نگه داری از

metadata را دارد و بین <html> و <body> قرار می گیرد. metadata یعنی داده هایی که در مورد داده های دیگر» هستند! به طور مثال وقتی می گوییم metadata های سند HTML» یعنی اطلاعاتی درباره ی سند HTML (که خود اطلاعات است).(

ایران گستر)

واضح است که metadata نمایش داده نمی شود و شکل بصری ندارد بلکه مواردی مثل این موارد را شامل می شود:(

ایران گستر)

  • character set (مواردی مثل UTF-8)
  • document title (عنوان سند)
  • styles (استایل های CSS)
  • محل قرار گیری تگ های link و script
  • و دیگر اطلاعاتی که راجع به خودِ سند HTML باشد

بیایید تک تک این موارد را بررسی کنیم.(

ایران گستر)

 

تگ <title>

عنصر <title> عنوان و تیتر کل سند را انتخاب می کند و باید در تمام اسناد HTML وجود داشته باشد تا HTML شما غیر معتبر تلقی نشود.(

ایران گستر)

به عبارت دیگر 3 کار اصلی <title> از این قرار است:(

ایران گستر)

  • موضوع صفحه ی HTML را در تب مرورگر کاربر نمایش می دهد
  • اگر صفحه ای به favorites اضافه شود، عنوان آن همان محتوای <title> خواهد بود
  • تگ <title> همان چیزی است که در موتورهای جست و جو به عنوان

    لینک سایت شما می آید

به این مثال ساده نگاه کنید:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html>

<head>

  <title>Page Title</title>

</head>

<body dir = 'rtl'>

 

<p>محتوای body در صفحه ی مرورگر نمایش داده می شود</p>

<p>محتوای تگ title نیز در تب مرورگر، در favorites و در موتور های جست و جو به نمایش در می آید</p>

 

</body>

</html>

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

همانطور که می بینید این موضوع بسیار ساده بود.

 

تگ <style>

تگ <style> استایل های CSS را مشخص می کند.

ما در دوره ی CSS توضیح میدهیم که کدهای CSS به سه روش اصلی نوشته می شوند:

  • به صورت inline (به صورت attribute)
  • به صورت internal (در قسمت <head> از سند HTML)
  • به صورت external (در یک فایل جداگانه)

در واقع تگ <style> مورد دوم یا internal است. به مثال زیر توجه کنید:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!DOCTYPE html>

<html>

<head>

  <title>Page Title</title>

  <style>

    body {background-color: powderblue;}

    h1 {color: red;}

    p {color: blue;}

  </style>

</head>  

<body>

 

<h1>This is a Heading</h1>

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

  

</body>

</html>

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

استفاده از کدهای

CSS به این صورت ایده آل ترین حالت ممکن نیست اما ضربه ی جدی نیز به شما نمی زند. معمولا در یک

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

ایران گستر)

 

تگ <link>

از تگ <link> برای آدرس دهی به یک فایل خارجی استفاده می شود که معمولا جاوا اسکریپت و یا CSS است. با این کار فایل های خارجی خود را به سند HTML متصل کرده و می توانیم از کدهای داخلشان استفاده کنیم.(

ایران گستر)

مثال:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

<!DOCTYPE html>

<html>

<head>

  <title>Page Title</title>

  <link rel="stylesheet" href="https://www.w3schools.com/html/mystyle.css">

</head>

<body>

 

<h1>This is a Heading</h1>

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

  

</body>

</html>

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

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

ایران گستر)

 

عنصر <meta>

تگ <meta> کار مشخص کردن اطلاعات خاصی را دارد. به طور مثال اینکه character set استفاده شده در سند چیست؟ یا چه keyword هایی برای این صفحه تعیین شده است؟ author (نویسنده) ی این صفحه کیست؟ و الی آخر …(

ایران گستر)

مرورگرها به طور عمده از <meta> برای بهتر نمایش دادن محتوا و موتورهای جست و جو برای دریافت keyword ها استفاده می کنند.(

ایران گستر)

– برای تعیین character set از این کد استفاده می کنیم:(

ایران گستر)

 

1

<meta charset="UTF-8">

پیشنهاد تمام متخصصین حوزه ی وب این است که اگر هر جایی (چه پایگاه داده، چه اسناد HTML و …) مجبور به انتخاب نوع encoding یا همان character set شدید، آن را روی UTF-8 بگذارد چرا که بسیار از زبان ها را

پشتیبانی می کند. در غیر این صورت ممکن است برخی از کاراکتر های صفحه ی شما نمایش داده نشود. البته این موضوع اگر در پایگاه داده باشد، خسارات سنگین تری بر جای می گذارد؛ مانند اشتباه ذخیره شدن نام و اطلاعات مشتریان.(

ایران گستر)

– برای تعیین description (توضیحات در مورد صفحه ی وب خود) از این قالب استفاده کنید:(

ایران گستر)

 

1

<meta name="description" content="site description">

به طور مثال در سایت روکسو این توضیح را ارائه داده ایم:(

ایران گستر)

 

1

<meta name="description" content="دستیابی به هزاران مقاله آموزش رایگان برنامه نویسی و آموزش رایگان طراحی گرافیک در وب سایت روکسو. آموزش رایگان فتوشاپ و برنامه نویسی"/>

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

ایران گستر)

– برای تعیین کلیدواژه ها (keywords) از این قالب استفاده کنید:(

ایران گستر)

 

1

<meta name="keywords" content="HTML, CSS, XML, JavaScript">

– همچنین شما می توانید نویسنده ی صفحه یا همان author را به این شکل تعیین کنید:(

ایران گستر)

 

1

<meta name="author" content="Amir Zouerami">

نکته: این نوع اطلاعات بیشتر به درد موتور های جست و جو می خورد نه کاربران شما. وب سایت شما بدون این اطلاعات نیز به شکل صحیح کار می کند اما از نظر سئو ضربه خواهد خورد.(

ایران گستر)

– شما حتی می توانید صفحات خود را طوری تنظیم کنید که هر فلان ثانیه (مثلا اینجا 30 ثانیه) refresh شوند:(

ایران گستر)

 

1

<meta http-equiv="refresh" content="30">

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

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <meta name="description" content="Free Web tutorials">

  <meta name="keywords" content="HTML,CSS,XML,JavaScript">

  <meta name="author" content="Amir Zouerami">

</head>

<body>

 

<p dir='rtl'>تمام اطلاعات قسمت body که دیده می شوند در این قسمت قرار خواهند گرفت</p>

 

</body>

</html>

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

 

مبحث viewport

HTML5 روشی ارائه کرد تا طراحان وب سایت به viewport دسترسی پیدا کنند. viewport به معنای قسمتی از صفحه ی HTML است که کاربر مشاهده می کند. به طور مثال اگر صفحه طولانی باشد و اسکرول عمودی بخورد، در هر لحظه، آن قسمتی از صفحه که کاربر مشاهده می کند، viewport نام دارد.(

ایران گستر)

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

ایران گستر)

نکته: کد زیر باید برای تمام صفحات وب شما تعیین شده باشد:(

ایران گستر)

 

1

<meta name="viewport" content="width=device-width, initial-scale=1.0">

این کد به مرورگر کاربر می گوید که صفحه را چطور نمایش دهد و چطور با مقایس یک صفحه کار کند.(

ایران گستر)

قسمت width=device-width می گوید عرض صفحه (width) باید با عرض صفحه ی دستگاه کاربر (چه کامپیوتر، په تبلت، چه گوشی و …) هماهنگ باشد. از طرفی قسمت initial-scale=1.0 می گوید، مقدار بزرگنمایی اولیه ی یک صفحه چقدر باید باشد؛ وقتی به آن عدد 1.0 داده ایم یعنی 1 برابر بزرگنمایی داشته باشد و همانطور که می دانید 1 برابر بزرگنمایی یعنی همان سایز اصلی و بدون بزرگنمایی. اگر مقادیر بیشتری از 1 به آن بدهید، پس از بارگذاری صفحات برای کاربر، صفحه به همان اندازه بزرگنمایی (zoom) خواهد داشت که اصلا کار قشنگی نیست.(

ایران گستر)

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

ایران گستر)

ابتدا به کد زیر نگاه کنید:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!DOCTYPE html>

<html>

<body>

 

<p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>

 

<img src="https://www.w3schools.com/css/img_chania.jpg" alt="Chania" width="560" height="345">

 

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

</p>

 

</body>

</html>

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

در این کد از width=device-width و … استفاده نکرده ایم. اگر به خروجی این صفحه در JSBin بروید و صفحه ی مرورگرتان یا قسمت راست JSBin (یعنی قسمت مشاهده ی خروجی) را کوچک تر کنید میبینید که تصویر از کادر خارج می شود!

حالا به این کد نگاه کنید:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<style>

img {

    max-width: 100%;

    height: auto;

}

</style>

</head>

<body>

<p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>

 

<img src="https://www.w3schools.com/css/img_chania.jpg" alt="Chania" width="460" height="345">

 

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

</p>

 

</body>

</html>

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

در این صفحه از دستور زیر استفاده کرده ایم:(

ایران گستر)

 

1

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

اگر در JSBin، صفحه سمت راست را کوچک کنید و یا اندازه ی مرورگر خود را بسیار کوچک کنید، متوجه می شوید که اندازه ی تصویر متناسب با اندازه ی صفحه تغییر می کند و دیگر از کادر خارج نمی شود! دلیل استفاده از این دستور همین موضوع ساده اما بسیار کاربردی است.(

ایران گستر)

 

تگ <script>

تگ <script> برای اضافه کردن کدهای جاوا اسکریپت است (چه خارجی و چه داخلی).

به طور مثال در کد زیر میخواهیم عبارت Hello JavaScript را نمایش دهیم:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<head>

  <title>Page Title</title>

  <script>

  function myFunction() {

    document.getElementById("demo").innerHTML = "Hello JavaScript!";

  }

  </script>

</head>

<body>

 

<h1>My Web Page</h1>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

 

</body>

</html>

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

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

 

تگ <base>

تگ <base> در عمل URL یا آدرس اینترنتی پایه ی وب سایت شما را مشخص می کند تا تمام آدرس های اینترنتی دیگری که در صفحه ی ما موجود هستند با آن شروع شوند.(

ایران گستر)

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

 

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html>

<head>

  <title>Page Title</title>

  <base href="https://www.roxo.ir/plus/" target="_blank">

</head>

<body>

 

<p><a href="/react-loops/">تکرار عناصر (حلقه ها) در ری اکت</a></p>

 

</body>

</html>

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

هشدار: در استاندارد HTML5 گفته شده است که شما اجازه دارید تگ های <html> و <body> و <head> را حذف کنید. یعنی کد شما به این شکل باشد:(

ایران گستر)

 

1

2

3

4

5

<!DOCTYPE html>

<title>Page Title</title>

 

<h1>This is a heading</h1>

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

اما ما به شما پیشنهاد می کنیم تحت هیچ شرایطی چنین کاری را انجام ندهید. پاک کردن تگ های  <html> و <body> می تواند DOM یا نرم افزار 

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

ایران گستر)


HTML

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

HTML مارا دنبال کنید.

 

 

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

عناصر معنایی (Semantics)

Semantics به خودی خود و جدا از دنیای

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

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

ایران گستر)

عناصر غیر معنایی یا non-semantic مانند <div> و <span> معنا یا اطلاعاتی را در مورد محتوای خود به ما نمی دهند اما عناصر معنایی یا semantic مانند <form> و <table>و <article> مشخص می کنند که چه نوع محتوایی دارند.(

ایران گستر)

قبل از ارائه ی HTML5 برای مشخص کردن قسمت های مختلف صفحه از

کدهایی مثل <div id=”nav> یا <div class=”header> استفاده می کردیم اما امروزه چنین کاری منسوخ شده است (متاسفانه برخی از توسعه دهندگان هنوز هم این کار را می کنند). اجزای مختلف یک صفحه در HTML5 به این شکل است:(

ایران گستر)

طرح کلی HTML5

طرح کلی HTML5

بنابراین HTML5 عناصر معنایی جدیدی را برای پایه ریزی این طرح به ما می دهد:(

ایران گستر)

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

 

عنصر <section>

این عنصر وظیفه ی تعریف یک قسمت خاص را در سند شما بر عهده دارد. بر اساس documentation ارائه شده از سمت W3C، این عنصر:(

ایران گستر)

A section is a thematic grouping of content, typically with a heading.

یعنی عنصر <section> مجموعه ای از محتوا را که موضوع و مضمون مشابهی دارند در یک قسمت جمع می کند و معمولا یک heading نیز به آن ها می دهد. بنابراین صفحه ی اصلی سایت شما می تواند به <section> های مختلفی مانند مقدمه، محتوا، اطلاعات تماس و … تقسیم شود.(

ایران گستر)

مثال:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!DOCTYPE html>

<html>

<body>

 

<section>

  <h1>WWF</h1>

  <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>

</section>

 

<section>

  <h1>WWF's Panda symbol</h1>

  <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>

</section>

 

</body>

</html>

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

 

عنصر <article>

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

ایران گستر)

  • پست هایی که کاربران در یک فروم (انجمن اینترنتی) می گذارند.
  • پست هایی که در وبلاگ ها می گذاریم.
  • مقالات مختلف در سایت های خبری.

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

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

<!DOCTYPE html>

<html>

<body>

 

<article>

  <h1>What Does WWF Do?</h1>

  <p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p>

</article>

 

</body>

</html>

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

 

تو در تو سازی <article> در <section>

آیا تو در تو سازی <article> در <section> و یا بالعکس شدنی است؟ <article> مشخص کننده ی مقالات مستقل و جداگانه در صفحه ی ما بود. <section> نیز تعریف کننده ی یک قسمت خاص در صفحه ی ما بود.(

ایران گستر)

سوال اینجاست: آیا قانون خاصی برای ترکیب این عناصر معنایی به جز معنی شان وجود دارد؟ پاسخ شما خیر است!

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

ایران گستر)

 

عنصر <header>

این عنصر یک header (موضوع) برای کل سند شما و یا یک section در صفحه ی شما تعیین می کند. در واقع باید از <header> به صورت نگه دارنده ی اطلاعاتی مانند موضوع و … استفاده کرد و از آن جایی که می توان چند مقاله در یک صفحه داشت، می توانیم چندین <header> نیز در یک صفحه داشته باشیم.(

ایران گستر)

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

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!DOCTYPE html>

<html>

<body>

 

<article>

  <header>

    <h1>What Does WWF Do?</h1>

    <p>WWF's mission:</p>

  </header>

  <p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p>

</article>

 

</body>

</html>

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

 

عنصر <footer>

این عنصر برای صفحه ی شما یک footer (قسمت پایینی وب سایت یا یک مقاله که معمولا اطلاعات تکمیلی مانند اطلاعات تماس یا نام نویسنده در آن قرار می گیرد) تعیین می کند. بنابراین <footer> باید اطلاعاتی در مورد عنصر نگه دارنده اش داشته باشد و معمولا شامل این موارد می شود: نام نویسنده، اطلاعات مربوط به کپی رایت، شرایط و قوانین استفاده، اطلاعات تماس و …. . از آنجا که می توان چندین

مقاله در یک صفحه داشت، می توانیم چندین <footer> نیز در یک صفحه داشته باشیم.(

ایران گستر)

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

 

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html>

<body>

 

<footer>

  <p>Posted by: Amir Zouerami</p>

  <p>Contact information: <a href="mailto:Zouerami@gmail.com">

  Zouerami@gmail.com</a>.</p>

</footer>

 

</body>

</html>

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

 

عنصر <nav>

این عنصر لینک های navigation (مسیریابی – لینک هایی که در بالای سایت هستند مانند خانه» و تماس با ما» و …) را در بر می گیرد. نکته ای که باید به آن توجه کنید این است که لازم نیست هر لینکی داخل <nav> قرار بگیرد. <nav> ها تنها برای مجموعه ای از لینک ها هستند که قرار است کاربر را به قسمت خاصی منتقل کنند. مثال:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

<!DOCTYPE html>

<html>

<body>

 

<nav>

  <a href="https://www.roxo.ir/series/html-tutorials/">HTML</a> |

  <a href="https://www.roxo.ir/series/html-tutorials/">CSS</a> |

  <a href="https://www.roxo.ir/series/javascript-tutorials/">JavaScript</a> |

  <a href="https://www.roxo.ir/series/sql-language-tutorial/">MySQL</a>

</nav>

 

</body>

</html>

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

 

عنصر <aside>

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

ایران گستر)

مثال:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

<!DOCTYPE html>

<html>

<body>

 

<p>My family and I visited The Epcot center this summer.</p>

 

<aside>

  <h4>Epcot Center</h4>

  <p>The Epcot Center is a theme park in Disney World, Florida.</p>

</aside>

 

</body>

</html>

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

 

عنصر <figure>

هدف <figure> ارائه ی توضیحات متنی برای یک تصویر است. در HTML5 می توانیم این توضیح متنی را به همراه تصویر مورد نظر در <figure> قرار دهیم. بنابراین درون <figure> یک تگ img و یک تگ <figcaption> قرار دارد که حاوی توضیحات متنی است.(

ایران گستر)

مثال:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html>

<html>

<body>

 

<h2>Places to Visit</h2>

 

<p>Puglia's most famous sight is the unique conical houses (Trulli) found in the area around Alberobello, a declared UNESCO World Heritage Site.</p>

 

<figure>

  <img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Trulli" style="width:100%">

  <figcaption dir='rtl'>خانه های Trulli در ایتالیا</figcaption>

</figure>

 

</body>

</html>

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

 

چرا عناصر معنایی؟

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

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

ایران گستر)


HTML

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

HTML مارا دنبال کنید.

 

 

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

 

HTML5 چیست؟

برای درک HTML5 بهتر است تاریخچه ای کوتاه از زبان HTML را بدانیم. ما از سال 1991 تا سال 1999 شاهد عرضه ی نسخه های 1 تا 4 از HTML بوده ایم. سپس در سال 2000 کنسرسیوم جهانی وب (W3C) پیشنهاد استفاده از XHTML 1.0 را داد که توسعه دهندگان را مجبور به نوشتن کد های تمیز و دقیق می کرد. این مسئله تا جایی پیش رفت که در سال 2004 کنسرسیوم جهانی وب تصمیم گرفت که دیگر HTML را توسعه ندهد بلکه فقط به

XHTML بپردازد.(

ایران گستر)

سپس در سال 2004 نهاد و گروهی به نام WHATWG (مخفف Web Hypertext Application Technology Working Group) ایجاد شد که هدفشان توسعه ی HTML به صورت مرتب بود، به نحوی که با نسخه های قدیمی هم سازگاری داشته باشد. این گروه طی سال های 2004 تا 2006 توانست پشتیبانی اکثر شرکت های سازنده ی مرورگرهای اینترنتی مطرح را به دست آورد. سپس در سال 2006 کنسرسیوم جهانی وب اعلام کرد که از WHATWG پشتیبانی می کند.(

ایران گستر)

در نهایت در سال 2008 اولین نسخه ی آزمایشی HTML5 منتشر شد. سپس در سال 2012 گروه WHATWG و کنسرسیوم جهانی وب تصمیم گرفتند که از هم جدا شوند چرا که WHATWG میخواست زبان HTML را به صورتی توسعه دهد که مرتبا بروزرسانی و ویرایش شود، و در عین

بروزرسانی با قابلیت های قدیمی نیز سازگار باشد. به همین دلیل اولین نسخه ی ارائه شده توسط گروه WHATWG در سال 2012 ارائه شد. از طرفی کنسرسیوم جهانی وب قصد داشت استانداردی مشخص و قطعی برای HTML5 و XHTML بنویسد. بنابراین اولین نسخه ی پیشنهادی HTML5 طبق اعلام کنسرسیوم جهانی وب در 28 اکتبر سال 2014 ارائه شد. متعاقبا HTML5.1 و HTML5.2 نیز به ترتیب در 3 اکتبر 2017 و 14 دسامبر 2017 ارائه شدند.(

ایران گستر)

بنابراین همانطور که میدانید HTML5 نسخه ی جدیدتر HTML بوده و در صدد ارتقاء تجربه ی کاربری و کدنویسی افراد در دنیای وب تلاش هایی را انجام داده است. در این مقاله میخواهیم بیشتر با این نسخه از HTML آشنا شویم.(

ایران گستر)

 

DOCTYPE مورد نیاز برای تعریف HTML5 بسیار ساده است:

 

1

<!DOCTYPE html>

همچنین تعیین encoding مناسب نیز بسیار راحت شده است:(

ایران گستر)

 

1

<meta charset="UTF-8">

البته باید بدانید که

encoding پیش فرض در HTML5 همان UTF-8 است.(

ایران گستر)

بنابراین یک سند عادی به این شکل خواهد بود:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Page Title</title>

</head>

<body>

 

<h1>This is a Heading</h1>

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

 

</body>

</html>

در HTML5 عناصر جدیدی نیز معرفی شده اند:(

ایران گستر)

  • عناصر معنایی جدید مانند: <header> و <footer> و <article> و <section> و …
  • attribute های جدید برای فرم ها مانند: number و date و time و calendar و range و …
  • عناصر گرافیکی مانند: <svg> و <canvas>
  • عناصر چند رسانه ای جدید: <audio> و <video>

همچنین API جدیدی نیز معرفی شده است که عبارت اند از:(

ایران گستر)

  • HTML Geolocation
  • HTML Drag and Drop
  • HTML Local Storage
  • HTML Application Cache
  • HTML Web Workers
  • HTML SSE

بعدا با این موارد آشنا خواهیم شد.

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

ایران گستر)

عنصر منسوخ نسخه ی جدید آن
<acronym> <abbr>
<applet> <object>
<basefont> قوانین CSS
<big> قوانین CSS
<center> قوانین CSS
<dir> <ul>
<font> قوانین CSS
<frame>
<frameset>
<noframes>
<strike> قوانین CSS یا <s> یا <del>
<tt> قوانین CSS

 

ناسازگاری مرورگرهای قدیمی

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

مرورگر های قدیمی تر نکته ی جالبی وجود دارد؛ تمام مرورگرها، چه جدید و چه قدیمی، در برخورد با عنصری که آن را نشناسند، آن را یک عنصر inline در نظر می گیرند. به همین دلیل شما می توانید به مرورگرهای قدیمی یاد بدهید که چطور با عناصر HTML5 که برایشان ناشناخته است کنار بیایند. شما حتی می توانید به IE6 که متعلق به Windows XP 2001 است نیز یاد بدهید که چطور با HTML5 کار کند.(

ایران گستر)

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

ایران گستر)

 

1

2

3

header, section, footer, aside, nav, main, article, figure {

  display: block;

}

شما همچنین می توانید عناصر جدیدی را در HTML ایجاد کنید. به طور مثال در کد زیر یک عنصر جدید به نام <myHero> را به دلخواه خود ساخته ایم و سپس آن را استایل دهی کرده ایم:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<html>

<head>

<script>document.createElement("myHero")</script>

<style>

myHero {

  display: block;

  background-color: #dddddd;

  padding: 50px;

  font-size: 30px;

}  

</style>

</head>

<body>

 

<h1>A Heading</h1>

<myHero>My Hero Element</myHero>

 

</body>

</html>

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

کد کوتاه جاوا اسکریپت در مثال بالا (("document.createElement("myHero) برای ایجاد عناصر در مرورگرهای IE 9 و قدیمی تر لازم است.(

ایران گستر)

شما می توانید از این راه حل برای تمام مرورگرها استفاده کنید اما متاسفانه مرورگرهای IE8 و نسخه های قدیمی تر آن اجازه ی استایل دهی به عناصر ناشناخته را نمی دهند. خوشبختانه آقای Sjoerd Visscher کد جاوا اسکریپتی به نام HTML5Shiv ساخته است که به مرورگرهایی مانند IE8 و نسخه های قدیمی تر اجازه ی این کار را می دهد.(

ایران گستر)

برای استفاده از HTML5Shiv باید آن را در قسمت <head> و درون تگ <script>  قرار دهید. شما می توانید آن را در صفحه ی گیت هاب HTML5Shiv دانلود کنید و یا کد زیر را به مرورگر خود اضافه کنید:(

ایران گستر)

 

1

2

3

4

5

<head>

  <!--[if lt IE 9]>

    <script src="/js/html5shiv.js"></script>

  <![endif]-->

</head>

بنابراین یک مثال کامل از HTML5Shiv به این شکل خواهد بود:(

ایران گستر)

 

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

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<!--[if lt IE 9]>

  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

<![endif]-->

</head>

<body>

 

<section>

 

<h1>Famous Cities</h1>

 

<article>

<h2>London</h2>

<p>London is the capital city of England. It is the most populous city in the United Kingdom,

with a metropolitan area of over 13 million inhabitants.</p>

</article>

 

<article>

<h2>Paris</h2>

<p>Paris is the capital and most populous city of France.</p>

</article>

 

<article>

<h2>Tokyo</h2>

<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,

and the most populous metropolitan area in the world.</p>

</article>

 

</section>

 

</body>

</html>

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

نکته: تمام این موارد فقط و فقط جهت اطلاع شما گفته شده است. در دنیای واقعی نیازی به این کار نیست؛ توجه کنید که ما (در زمان نگارش این مقاله) در سال 2019 هستیم و به هیچ عنوان نباید نگران سازگاری با مرورگرهای IE8 و غیره باشیم. این مرورگرهای قدیمی خیلی وقت است که از رده خارج شده اند و به توصیه ی تمام محققین و متخصصین باید پشتیبانی از آن ها را رها کرد.(

ایران گستر)


HTML

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

HTML مارا دنبال کنید.

 

 

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

ویژگی value

این ویژگی مقدار اولیه ی یک

input در فرم ما را مشخص می کند:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!DOCTYPE html>

<html>

<body>

 

<h2>The value Attribute</h2>

<p>The value attribute specifies the initial value for an input field:</p>

 

<form action="">

First name:<br>

<input type="text" name="firstname" value="John">

<br>

Last name:<br>

<input type="text" name="lastname">

</form>

 

</body>

</html>

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

ویژگی readonly

این ویژگی باعث می شود که input ما

read only شود یعنی هیچکس نتواند آن را تغییر دهد:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!DOCTYPE html>

<html>

<body>

 

<h2>The readonly Attribute</h2>

<p>The readonly attribute specifies that the input field is read only (cannot be changed):</p>

 

<form action="">

First name:<br>

<input type="text" name="firstname" value ="John" readonly>

<br>

Last name:<br>

<input type="text" name="lastname">

</form>

 

</body>

</html>

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

ویژگی disabled

این ویژگی باعث می شود که input ما غیرفعال شود. input ای که غیرفعال باشد، غیر قابل کلیک کردن و تغییر دادن است و همچنین مقدار آن در هنگام submit (ارسال نهایی) فرم به سرور ارسال نمی شود:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!DOCTYPE html>

<html>

<body>

 

<h2>The disabled Attribute</h2>

<p>The disabled attribute specifies that the input field is disabled:</p>

 

<form action="">

First name:<br>

<input type="text" name="firstname" value ="John" disabled>

<br>

Last name:<br>

<input type="text" name="lastname">

</form>

 

</body>

</html>

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

ویژگی size

این ویژگی سایز یک input را بر اساس تعداد کاراکتر تعیین می کند:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!DOCTYPE html>

<html>

<body>

 

<h2>The size Attribute</h2>

<p>The size attribute specifies the size (in characters) of the input field:</p>

 

<form action="">

First name:<br>

 

<input type="text" name="firstname" value="John" size="40">

<br>

Last name:<br>

<input type="text" name="lastname">

</form>

 

</body>

</html>

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

ویژگی maxlength

این ویژگی حداکثر طول مجاز یک input را برای کاربر تعیین می کند:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!DOCTYPE html>

<html>

<body>

 

<h2>The maxlength Attribute</h2>

<p>The maxlength attribute specifies the maximum allowed length for the input field:</p>

 

<form action="">

First name:<br>

<input type="text" name="firstname" maxlength="10">

<br>

Last name:<br>

<input type="text" name="lastname">

</form>

 

</body>

</html>

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

به طور مثال اگر مقدار maxlength را 5 بگذارید دیگر فرم اجازه ی تایپ بیشتر از 5 کاراکتر را به کاربر نمی دهد اما توجه داشته باشید که این ویژگی هیچ هشداری به کاربر نمیدهد بنابراین اگر میخواهید پیامی برای کاربر نمایش داده شود و به او بگوید که این فیلد محدود است و یا اینکه چرا این فیلد محدود است باید از کد های جاوا اسکریپت یا روش های دیگر استفاده کنید.(

ایران گستر)

هشدار: تمام روش های محدود سازی با HTML (مانند مثال بالا) و Javascript قابل دور زدن هستند و اصلا امن نیستند، بلکه تنها برای راحتی سرور شما و خود کاربران ایجاد شده اند. لازم است که حتما و حتما داده ها را در سمت سرور نیز چک کنید.(

ایران گستر)

 

ویژگی autocomplete

این ویژگی می گوید که آیا یک فرم قابلیت autocomplete (تکمیل خودکار) داشته باشد یا خیر. زمانی که autocomplete فعال باشد مرورگر به صورت خودکار مقادیر ورودی را بر اساس مقادیری که کاربر قبلا وارد کرده است پر می کند. autocomplete با عنصر <form> و <input> های متنی، جست و جو،

URL، تلفن، ایمیل، رمز عبور، datepicker ها، محدوده و رنگ ها کار می کند.(

ایران گستر)

نکته: شما می توانید autocomplete را برای کل فرم (<form>) فعال کرده و سپس برای برخی از input ها غیر فعالش کنید.(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<body>

 

<h2>The autocomplete Attribute</h2>

 

<form action="/action_page.php" autocomplete="on">

  First name:<input type="text" name="fname"><br>

  Last name: <input type="text" name="lname"><br>

  E-mail: <input type="email" name="email" autocomplete="off"><br>

  <input type="submit">

</form>

 

<p dir='rtl'>فرم را پر کرده و سپس ارسال کنید. حالا یک بار صفحه را refresh کنید تا ببینید قابلیت تکمیل خودکار چطور کار می کند.</p>

<p dir='rtl'>توجه کنید که قابلیت تکمیل خودکار برای email غیر فعال است.</p>

 

</body>

</html>

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

برای مشاهده ی خروجی در صفحه مورد نظر کلید Run را بزنید.

 

ویژگی novalidate

این ویژگی میگوید که داده های فرم در هنگام ارسال نباید Validate (اعتبار سنجی) شوند:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!DOCTYPE html>

<html>

<body>

 

<h2>The novalidate Attribute</h2>

<p>The novalidate attribute specifies that the form data should not be validated when submitted.</p>

 

<form action="/action_page.php" novalidate>

E-mail: <input type="email" name="user_email">

<input type="submit">

</form>

 

<p dir='rtl'><strong>هشدار:</strong> این قابلیت در مرورگر های internet explorer 9 و نسخه های قبل آن و همچنین در safari 10 و نسخه های قبل آن کار نمی کند.</p>

 

</body>

</html>

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

 

ویژگی autofocus

این ویژگی باعث می شود که پس از بارگذاری صفحه، یکی از input های ما (به انتخاب خودمان) focus بگیرد (یعنی بدون کلیک کاربر فعال شود):(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!DOCTYPE html>

<html>

<body>

 

<h2>The autofocus Attribute</h2>

<p>The autofocus attribute specifies that the input field should automatically get focus when the page loads.</p>

 

<form action="/action_page.php">

  First name:<input type="text" name="fname" autofocus><br>

  Last name: <input type="text" name="lname"><br>

  <input type="submit">

</form>

 

<p dir='rtl'><strong>هشدار:</strong>این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>

 

</body>

</html>

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

پس از ورود به صفحه ی خروجی دکمه ی RUN را بزنید و متوجه خواهید شد که فیلد اول انتخاب شده است و آماده ی تایپ کردن شماست! این همان حالت focus است.(

ایران گستر)

 

ویژگی form

این ویژگی مشخص می کند که فلان <input> متعلق به کدام فرم و یا چند فرم است:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!DOCTYPE html>

<html>

<body>

 

<h2>The form Attribute</h2>

<p>The form attribute specifies one or more forms an input element belongs to.</p>

 

<form action="/action_page.php" id="form1">

First name: <input type="text" name="fname"><br>

<input type="submit" value="Submit">

</form>

 

<p dir='rtl'>فیلد Last name که در زیر مشاهده می کنید خارج از form بالا است اما هنوز هم به آن تعلق دارد.</p>

Last name: <input type="text" name="lname" form="form1">

 

</body>

</html>

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

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

ایران گستر)

 

ویژگی formaction

این ویژگی مسیر فایلی را مشخص می کند که قرار است فرم ما را پردازش کند. این ویژگی action را باطل می کند و با "type="submit و "type="image استفاده می شود:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<body>

 

<h2>The formaction Attribute</h2>

<p>The formaction attribute specifies the URL of a file that will process the input control when the form is submitted.</p>

 

<form action="/action_page.php">

  First name: <input type="text" name="fname"><br>

  Last name: <input type="text" name="lname"><br>

  <input type="submit" value="Submit"><br>

  <input type="submit" formaction="/action_page2.php" value="Submit to another page">

</form>

 

<p dir='rtl'><strong>هشدار:</strong>این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>

 

</body>

</html>

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

 

ویژگی formenctype

این ویژگی encoding ارسال فرم را تعیین می کند (فقط برای فرم های method=”post) و attribute قبلی فرم یعنی enctype را باطل می کند. این ویژگی با "type="submit و "type="image استفاده می شود:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!DOCTYPE html>

<html>

<body>

 

<h2>The formenctype Attribute</h2>

<p>The formenctype attribute specifies how the form data should be encoded when submitted (only for forms with method="post").</p>

 

<form action="/action_page_binary.asp" method="post">

  First name: <input type="text" name="fname"><br>

  <input type="submit" value="Submit">

  <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data">

</form>

 

<p dir='rtl'><strong>هشدار:</strong>این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>

 

</body>

</html>

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

 

ویژگی formmethod

این ویژگی متد HTTP برای ارسال فرم ها به action را تعیین می کند و attribute قبلی فرم یعنی method را باطل می کند. این ویژگی با "type="submit و "type="image استفاده می شود:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<body>

 

<h2>The formmethod Attribute</h2>

<p>The formmethod attribute defines the HTTP method for sending form-data to the action URL.</p>

 

<form action="/action_page.php" method="get">

  First name: <input type="text" name="fname"><br>

  Last name: <input type="text" name="lname"><br>

  <input type="submit" value="Submit">

  <input type="submit" formmethod="post" value="Submit using POST">

</form>

 

<p dir='rtl'><strong>هشدار:</strong>این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>

 

</body>

</html>

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

 

ویژگی formnovalidate

این ویژگی، novalidate را باطل کرده و تغییر میدهد و با  "type="submit استفاده می شود:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!DOCTYPE html>

<html>

<body>

 

<h2>The formnovalidate Attribute</h2>

 

<form action="/action_page.php">

  E-mail: <input type="email" name="userid"><br>

  <input type="submit" value="Submit"><br>

  <input type="submit" formnovalidate value="Submit without validation">

</form>

 

<p dir='rtl'><strong>هشدار:</strong>این قابلیت در internet explorer 9 و نسخه های قبل تر آن و همچنین در safari 10 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>

 

 

</body>

</html>

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

 

ویژگی formtarget

این ویژگی مشخص می کند که مرورگر جواب دریافتی از سرور (پس از ارسال فرم) را کجا نمایش دهد. این ویژگی attribute قبلی فرم یعنی target را باطل می کند و این ویژگی با "type="submit و "type="image استفاده می شود:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html>

<html>

<body>

 

<h2>The formtarget Attribute</h2>

<p>The formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.</p>

 

<form action="/action_page.php">

  First name: <input type="text" name="fname"><br>

  Last name: <input type="text" name="lname"><br>

  <input type="submit" value="Submit as normal">

  <input type="submit" formtarget="_blank" value="Submit to a new window/tab">

</form>

 

 

<p dir='rtl'><strong>هشدار:</strong>این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>

 

</body>

</html>

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

 

ویژگی height و width

این دو ویژگی عرض و ارتفاع <"input type="image> را مشخص می کنند:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html>

<html>

<body>

 

<h2>The height and width Attributes</h2>

<p>The height and width attributes specify the height and width of an input type="image" element.</p>

 

<form action="/action_page.php">

  First name: <input type="text" name="fname"><br>

  Last name: <input type="text" name="lname"><br>

  <input type="image" src="https://www.w3schools.com/html/img_submit.gif" alt="Submit" width="48" height="48">

</form>

 

</body>

</html>

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

 

ویژگی list

این ویژگی به <datalist> اشاره می کند که گزینه های از پیش تعریف شده ای برای <input> دارد:(

ایران گستر)

 

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>

<body>

 

<h2>The list Attribute</h2>

<p>The list attribute refers to a datalist element that contains pre-defined options for an input element.</p>

 

<form action="/action_page.php" method="get">

 

<input list="browsers" name="browser">

<datalist id="browsers">

  <option value="Internet Explorer">

  <option value="Firefox">

  <option value="Chrome">

  <option value="Opera">

  <option value="Safari">

</datalist>

<input type="submit">

</form>

 

<p dir='rtl'><strong>هشدار:</strong>

 

این قابلیت در internet explorer 9 و نسخه های قبل تر آن  و همچنین در safari پشتیبانی نمی شود.

 

</p>

 

</body>

</html>

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

 

ویژگی min و max

این دو ویژگی حداقل و حداکثر مقادیر مجاز برای <input> را تعیین می کنند و با input های عددی، محدوده ای، تاریخ، datetime-local، ماه، زمان و هفته کار می کند (اگر با انواع input ها آشنا نیستید به قسمت های قبل از همین سری آموزشی مراجعه کنید):(

ایران گستر)

 

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

<!DOCTYPE html>

<html>

<body>

 

<h2>The min and max Attributes</h2>

<p>The min and max attributes specify the minimum and maximum values for an input element.</p>

 

<form action="/action_page.php">

 

  Enter a date before 1980-01-01:

  <input type="date" name="bday" max="1979-12-31"><br>

 

  Enter a date after 2000-01-01:

  <input type="date" name="bday" min="2000-01-02"><br>

 

  Quantity (between 1 and 5):

  <input type="number" name="quantity" min="1" max="5"><br>

 

  <input type="submit">

  

</form>

 

<p dir='rtl'><strong>هشدار:</strong>این دو ویژگی در مرورگر Internet Explorer 9 و نسخه های قبل تر آن کار نمی کنند</p>

 

<p dir='rtl'><strong>هشدار:</strong>این دو ویژگی اگر برای تاریخ و زمان به کار بروند در مرورگر Internet explorer 10 کار نمی کنند.</p>

 

 

</body>

</html>

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

 

ویژگی multiple

این ویژگی مشخص می کند که کاربر می تواند بیشتر از یک مقدار را در <input> وارد کند. این ویژگی با <input> های از نوع ایمیل و فایل کار می کند:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html>

<html>

<body>

 

<h2>The multiple Attributes</h2>

<p>The multiple attribute specifies that the user is allowed to enter more than one value in the input element.</p>

 

<form action="/action_page.php">

  Select images: <input type="file" name="img" multiple>

  <input type="submit">

</form>

 

<p>Try selecting more than one file when browsing for files.</p>

 

 

<p dir='rtl'><strong>هشدار:</strong>این دو ویژگی در مرورگر Internet Explorer 9 و نسخه های قبل تر آن کار نمی کنند</p>

 

</body>

</html>

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

 

ویژگی pattern

این ویژگی از regular expression (عبارات با قاعده) استفاده می کند تا محتوای فرم را چک کند و با انواع input های متنی، جست و جو، URL، تلفن، ایمیل و رمز عبور کار می کند:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!DOCTYPE html>

<html>

<body>

 

<h2>The pattern Attribute</h2>

<p>The pattern attribute specifies a regular expression that the input element's value is checked against.</p>

 

<form action="/action_page.php">

  Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

  <input type="submit">

</form>

 

<p dir='rtl'><strong>هشدار:</strong>این قابلیت در internet explorer 9 و نسخه های قبل تر آن و همچنین در safari 10 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>

 

</body>

</html>

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

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

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

attribute ای به نام title استفاده کنید.(

ایران گستر)

 

ویژگی placeholder

این ویژگی متنی کوتاه را در فیلد مورد نظر نشان می دهد تا به کاربر توضیحات خلاصه ای ارائه کند. به طور مثال اگر میخواهید به کاربر بگویید که در این قسمت با حروف انگلیسی تایپ کند می توانید از این ویژگی استفاده کنید. این ویژگی با input های متنی، جست و جو، URL، تلفن، ایمیل و رمز کاربری کار می کند:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!DOCTYPE html>

<html>

<body>

 

<h2>The placeholder Attribute</h2>

<p>The placeholder attribute specifies a hint that describes the expected value of an input field (a sample value or a short description of the format).</p>

 

<form action="/action_page.php">

  <input type="text" name="fname" placeholder="First name"><br>

  <input type="text" name="lname" placeholder="Last name"><br>

  <input type="submit" value="Submit">

</form>

 

<p dir='rtl'><strong>هشدار:</strong>این دو ویژگی در مرورگر Internet Explorer 9 و نسخه های قبل تر آن کار نمی کنند</p>

 

</body>

</html>

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

 

ویژگی required

این ویژگی تعیین می کند که فلان فیلد این فرم اجباری است و حتما باید پُر شود و با انواع فیلد های text, search, url, tel, email, password, date pickers, number, checkbox, radio, و file کار می کند.(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!DOCTYPE html>

<html>

<body>

 

<h2>The required Attribute</h2>

<p>The required attribute specifies that an input field must be filled out before submitting the form.</p>

 

<form action="/action_page.php">

  Username: <input type="text" name="usrname" required>

  <input type="submit">

</form>

 

<p dir='rtl'><strong>هشدار:</strong>این ویژگی در مرورگر Internet explorer 9 و نسخه های قبل تر آن و همچنین در Safari 10.1 و نسخه های قبل تر آن کار نمی کند.</p>

 

</body>

</html>

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

 

ویژگی step

این ویژگی بازه های مجاز برای یک <input> را تعیین می کنند. به طور مثال اگر این ویژگی برابر با 3 باشد (step=”3) اعداد مجاز 3- و 0 و 3 و 6 و … خواهند بود. همچنین می توانید از max و min هم به همراه آن استفاده کنید. این ویژگی با فیلد های umber, range, date, datetime-local, month, time و week کار میکند:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!DOCTYPE html>

<html>

<body>

 

<h2>The step Attribute</h2>

<p>The step attribute specifies the legal number intervals for an input element.</p>

 

<form action="/action_page.php">

  <input type="number" name="points" step="3">

  <input type="submit">

</form>

 

<p dir='rtl'><strong>هشدار:</strong>این ویژگی در مرورگر Internet explorer 9 و نسخه های قبل تر آن کار نمی کند.</p>

 

</body>

</htmlایران >

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


HTML

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

HTML مارا دنبال کنید.

 

 

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

Input های HTML5

همزمان با معرفی HTML5 انواع مختلفی از

input ها نیز به توسعه دهندگان معرفی شد تا بتوانند با استفاده از آن ها برنامه های کاربردی تر و راحت تری بنویسند. آن ها عبارت اند از:(

ایران گستر)

  • color
  • date
  • datetime-local
  • email
  • month
  • number
  • range
  • search

  • tel
  • time
  • url
  • week

نکته: از آن جایی که این نوع input ها نسبتا جدید تر هستند ممکن است در تمام مروگر ها کار نکنند. اگر input ای در مرورگری پشتیبانی نشود، به جای آن یک فیلد خالی از نوع <"input type="text> نمایش داده خواهد شد.(

ایران گستر)

 

Input های رنگی

این نوع از input ها به صورت <"input type="color> مشخص می شوند و کارشان ایجاد فیلد هایی است که رنگ خاصی را انتخاب کنند. اگر مرورگر کاربر از این input پشتیبانی کند یک color picker برای کاربر نمایش داده خواهد شد:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<body>

 

<h2>Color Picker</h2>

<p>The <strong>input type="color"</strong> is used for input fields that should contain a color.</p>

 

<p dir='rtl'>رنگ مورد نظرتان را انتخاب کنید</p>

 

<form dir='rtl' action="/action_page.php">

  <input type="color" name="favcolor" value="#ff0000">

  <input type="submit" value='ارسال رنگ'>

</form>

 

<p dir='rtl'>این قابلیت در internet explorer 11 و safari 9.1 و نسخه های قبلی این دو مرورگر پشتیبانی نمی شود.</p>

 

</body>

</html>

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

 

Input های تاریخ

input های نوع <"input type="date> فیلد هایی مخصوص نگه داری تاریخ می سازند. اگر مرورگر کاربر از آن پشتیبانی کند یک date picker نمایش داده خواهد شد:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<body>

 

<h2>Date Field</h2>

<p>The <strong>input type="date"</strong> is used for input fields that should contain a date.</p>

<p>Depending on browser support:<br>A date picker can pop-up when you enter the input field.<p>

 

<form dir='rtl' action="/action_page.php">

  تاریخ تولد:

  <input type="date" name="bday">

  <input type="submit" Value='ارسال فرم'>

</form>

 

<p dir='rtl'>این قابلیت در internet explorer 11 و نسخه های قبلی آن و همچنین در safari پشتیبانی نمی شود.</p>

 

</body>

</html>

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

شما همچنین می توانید از attribute های min  و max استفاده کنید تا محدودیت هایی را برای این تاریخ ایجاد کنید:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html>

<html>

<body>

 

<h2>Date Field Restrictions</h2>

<p>Use the min and max attributes to add restrictions to dates:</p>

 

<form dir='rtl' action="/action_page.php">

تاریخی قبل از سال 1980-01-01 را انتخاب کنید:<br>

<input type="date" name="bday" max="1979-12-31"><br><br>

تاریخی بعد از سال 2000-01-01 را انتخاب کنید:<br>

<input type="date" name="bday" min="2000-01-02"><br><br>

<input type="submit" value='ارسال فرم'>

</form>

 

<p dir='rtl'>این قابلیت در internet explorer 11 و نسخه های قبلی آن و همچنین در safari پشتیبانی نمی شود.</p>

 

</body>

</html>

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

 

Input های Datetime-local

این نوع از input ها با <"input type="datetime-local> مشخص شده و کار آنها دریافت ساعت و تاریخ (بدون هر گونه time zone – منطقه ی زمانی) می باشد:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<body>

 

<h2>Local Date Field</h2>

<p>The <strong>input type="datetime-local"</strong> specifies a date and time input field, with no time zone.</p>

<p>Depending on browser support:<br>A date picker can pop-up when you enter the input field.</p>

 

<form action="/action_page.php">

  Birthday (date and time):

  <input type="datetime-local" name="bdaytime">

  <input type="submit" value="Send">

</form>

 

<p dir='rtl'>این قابلیت در internet explorer 12 و نسخه های قبلی آن و همچنین در  safari و firefox پشتیبانی نمی شود.</p>

 

</body>

</html>

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

 

Input های ایمیل

این نوع input ها با <"input type="email> مشخص می شوند و کارشان دریافت ایمیل کاربران است. این نوع input ها معمولا از نظر ظاهری دقیقا شبیه به فیلدهای متنی ساده هستند و تنها تفاوتشان در این است که آدرس ایمیل کاربر را

validate می کنند؛ یعنی چک می کنند که آدرس ایمیل نامعتبر نباشد و از الگوی صحیح پیروی کند.(

ایران گستر)

همچنین برخی از تلفن های هوشمند می توانند این نوع input را تشخیص دهند و در کیبورد کاربر کلید com.” را اضافه کنند.(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<body>

 

<h2>Email Field</h2>

<p>The <strong>input type="email"</strong> is used for input fields that should contain an e-mail address:</p>

 

<form action="/action_page.php">

  E-mail:

  <input type="email" name="email">

  <input type="submit">

</form>

 

<p dir='rtl'>

<b>هشدار:</b>این قابلیت در Internet Explorer 9 و نسخه های قبل از آن پشتیبانی نمی شود.</p>

 

</body>

</html>

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

سعی کنید در خروجی بالا یک ایمیل نا معتبر (مانند example.com یا example یا example.com@me و …) وارد کنید. خواهید دید که فرم ثبت نخواهد شد و به جای آن یک هشدار به شما نمایش داده می شود.(

ایران گستر)

 

Input های فایل

کار این نوع input ها که با <"input type="file> مشخص می شوند دریافت فایل های کاربر است. در صورتی که نیاز باشد کاربر فایلی را روی سرور شما آپلود کند (مانند تصویر پروفایل) می توانید از این نوع input استفاده کنید:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!DOCTYPE html>

<html>

<body>

 

<h1>File upload</h1>

 

<p>Show a file-select field which allows a file to be chosen for upload:</p>

  <br>

<form dir='rtl' action="/action_page.php">

  یک فایل انتخاب کنید:

  <input type="file" name="myFile"><br><br>

  <input type="submit" Value='ارسال فرم'>

</form>

 

</body>

</html>

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

 

Input های ماه

نوع <"input type="month> به کاربر اجازه می دهد که یک ماه و سال را انتخاب کند:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<body>

 

<h2>Month Field</h2>

<p>The <strong>input type="month"</strong> allows the user to select a month and year.</p>

<p>Depending on browser support:<br>A date picker can pop-up when you enter the input field.</p>

 

<form action="/action_page.php">

  Birthday (month and year):

  <input type="month" name="bdaymonth">

  <input type="submit">

</form>

 

<p dir='rtl'><strong>هشدار:</strong> این قابلیت در internet explorer 11 و نسخه های قبلی آن و همچنین در safari و firefox پشتیبانی نمی شود.</p>

 

</body>

</html>

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

 

Input های عددی

این نوع input ها که به صورت <"input type="number> مشخص می شوند به کاربر اجازه میدهند که در یک فیلد تنها از اعداد استفاده کند. شما می توانید با min و max حداقل و حداکثر اعداد مجاز را نیز تعیین کنید.(

ایران گستر)

در مثال زیر به مرورگر گفته ایم که کاربر حق دارد یک عدد بین 1 و 5 را انتخاب کند:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<body>

 

<h2>Number Field</h2>

<p>The <strong>input type="number"</strong> defines a numeric input field.</p>

<p>You can use the min and max attributes to add numeric restrictions in the input field:</p>

 

<form action="/action_page.php">

  Quantity (between 1 and 5):

  <input type="number" name="quantity" min="1" max="5">

  <input type="submit">

</form>

 

<p dir='rtl'><b>هشدار:</b> این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>

 

</body>

</html>

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

 

Input های محدوده

این نوع input ها با <"input type="range> مشخص می شوند و کارشان تعیین عددی است که مقدار دقیق آن برای ما مهم نیست (مانند

slider ها). حد پیش فرض آن از 0 تا 100 است اما شما می توانید آن را تغییر دهید:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<html>

<body>

 

<h2>Range Field</h2>

<p>Depending on browser support:<br>The input type "range" can be displayed as a slider control.<p>

 

<form action="/action_page.php" method="get">

  Points:

  <input type="range" name="points" min="0" max="10">

  <input type="submit" value='ارسال فرم'>

</form>

 

<p dir='rtl'>

<b>هشدار:</b>

این قابلیت در internet explorer 9 و نسخه های قبل تر از آن پشتیبانی نمی شود.

</p>

 

</body>

</html>

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

 

Input های جست و جو

این نوع input ها با <"input type="search> مشخص می شوند و فیلدهایی برای قسمت جست و جو در سایت شما هستند:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html>

<html>

<body>

 

<h2>Search Field</h2>

<p>The <strong>input type="search"</strong> is used for search fields (behaves like a regular text field):</p>

 

<form action="/action_page.php">

  Search Google:

  <input type="search" name="googlesearch">

  <input type="submit">

</form>

 

</body>

</html>

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

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

 

Input های تلفن

این نوع input ها که با <"input type="tel> مشخص می شوند مسئولیت دریافت شماره تلفن کاربران را دارند:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html>

<html>

<body>

 

<h2>Telephone Field</h2>

<p>The <strong>input type="tel"</strong> is used for input fields that should contain a telephone number:</p>

 

<form action="/action_page.php">

Telephone: <input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required>

<input type="submit">

<span>Format: 123-45-678</span>

</form>

 

</body>

</html>

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

احتمالا متوجه قسمت "{pattern="[0-9]{3}-[0-9]{2}-[0-9]{3 نشده اید. از آنجا که هر کشوری الگوی شماره تلفن های مخصوص خودش را دارد شما می توانید این الگو را بر اساس شماره تلفن های کشور خودتان تنظیم کنید. در الگوی بالا گفته شده است {3}[0-9] که یعنی 3 رقم اول شماره تلفن می توانند شامل اعداد 0 تا 9 (همه ی اعداد) بشوند. سپس دو رقم بعدی و در آخر سه رقم بعدی را مشخص کرده ایم. شما می توانید سعی کنید این الگو را مطابق با ایران طراحی کنید.(

ایران گستر)

 

Input های زمان

این نوع input ها با <"input type="time> مشخص می شوند و به کاربر اجازه می دهند که بدون ذکر هیچ time zone یا منطقه ی زمانی، یک زمان خاص را انتخاب کند:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html>

<html>

<body>

 

<h2>Time Field</h2>

<p>The <strong>input type="time"</strong> allows the user to select a time (no time zone):</p>

 

<p>Depending on browser support:<br>A time picker might pop-up when you enter the input field.</p>

 

<form action="/action_page.php">

  Select a time:

  <input type="time" name="usr_time">

  <input type="submit">

</form>

 

<p dir='rtl'>این قابلیت در internet explorer 12 و نسخه های قبل تر آن و همچنین در safari پشتیبانی نمی شود.</p>

 

</body>

</html>

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

 

Input های URL

این نوع input ها به صورت <"input type="url> مشخص می شوند و مسئولیت دریافت یک آدرس اینترنتی (URL) را دارند. برخی از تلفن های هوشمند می توانند این نوع input را تشخیص دهند و در کیبورد کاربر کلید com.” را اضافه کنند:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!DOCTYPE html>

<html>

<body>

 

<h2>URL Field</h2>

<p>The <strong>input type="url"</strong> is used for input fields that should contain a URL address:</p>

 

<form action="/action_page.php">

  Add your homepage:

  <input type="url" name="homepage">

  <input type="submit">

</form>

 

<p dir='rtl'>این قابلیت در internet explorer 9 و نسخه های قبل آن پشتیبانی نمی شود.</p>

 

</body>

</html>

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

کار اصلی این نوع فیلد validate کردن داده ی کاربر است؛ یعنی چک می کند تا ببیند آیا آدرس

URL ای که کاربر وارد کرده است دارای الگوی صحیحی است یا خیر. می توانید این مورد را در خروجی بالا چک کنید.(

ایران گستر)

 

Input های هفته

این نوع input ها به صورت <"input type="week> نوشته می شوند و به کاربر اجازه می دهند تا یک هفته و یک سال را انتخاب کند:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<body>

 

<h2>Week Field</h2>

<p>The <strong>input type="week"</strong> allows the user to select a week and year:</p>

<p>Depending on browser support:<br>A date picker can pop-up when you enter the input field.</p>

 

<form action="/action_page.php">

  Select a week:

  <input type="week" name="year_week">

  <input type="submit">

</form>

 

<p dir='rtl'>این قابلیت در internet explorer 11 و نسخه های قبلی آن و همچنین در safari و firefox پشتیبانی نمی شود.</p>

 

</body>

</html>

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


HTML

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

HTML مارا دنبال کنید.

 

 

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

 

Input های رایج و قدیمی

همانطور که در دو قسمت قبلی دیدیم،

input ها قسمت مهمی از فرم های HTML هستند و ما می خواهیم در این قسمت انواع آن ها را بررسی کنیم. انواع input ها از این قرار هستند:(

ایران گستر)

  • <"input type="button>
  • <"input type="checkbox>
  • <"input type="color>
  • <"input type="date>
  • <"input type="datetime-local>
  • <"input type="email>
  • <"input type="file>
  • <"input type="hidden>
  • <"input type="image>
  • <"input type="month>
  • <"input type="number>
  • <"input type="password>
  • <"input type="radio>
  • <"input type="range>
  • <"input type="reset>
  • <"input type="search>
  • <"input type="submit>
  • <"input type="tel>
  • <"input type="text>
  • <"input type="time>
  • <"input type="url>
  • <"input type="week>

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

HTML5 معرفی شده اند؛ این input ها تقریبا جدید تر هستند و بعضی از آن ها ممکن است در تمام مرورگر ها پشتیبانی نشوند اما امکانات بیشتری به ما می دهند. پس ابتدا برویم سراغ input های اصلی و رایج(

ایران گستر)

 

Input های متنی

<"input type="text> به معنی این است که input ما از نوع متنی بوده و تبدیل به یک فیلد خالی برای تایپ کاربر می شود:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!DOCTYPE html>

<html>

<body>

 

<h2>Text field</h2>

<p>The <strong>input type="text"</strong> defines a one-line text input field:</p>

 

<form action="/action_page.php">

First name:<br>

<input type="text" name="firstname">

<br>

Last name:<br>

<input type="text" name="lastname">

<br><br>

<input type="submit">

</form>

 

<p dir='rtl'>توجه داشته باشید که خود تگ form نمایش داده نمی شود.</p>

<p dir='rtl'>عرض پیش فرض هر فیلد 20 کاراکتر است</p>

 

</body>

</html>

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

 

Input های رمز عبور

فیلد های رمز عبور دقیقا مانند فیلد های متنی هستند بنابراین <"input type="password> هنوز هم یک فیلد خالی برای تایپ به ما می دهد اما تفاوت اینجاست که برای حفظ حریم شخصی کاربر، ظاهر هر چیزی که در این قسمت بنویسید با دایره های سیاه جایگزین می شود و کسی نمی تواند رمز تایپ شده ی شما را ببیند:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html>

<html>

<body>

 

<h2>Password field</h2>

<p>The <strong>input type="password"</strong> defines a password field:</p>

 

<form action="">

User name:<br>

<input type="text" name="userid">

<br>

User password:<br>

<input type="password" name="psw">

</form>

 

<p dir='rtl'>کاراکتر هایی که در input های رمزی تایپ می شوند دیده نمی شوند. می توانید در قسمت راست این موضوع را امتحان کنید.</p>

 

</body>

</html>

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

 

Input های ارسال فرم

<"input type="submit> بدین معنا است که input مورد نظر می خواهد فرمی را ثبت و ارسال (submit) کند. این فرم سپس به یک form-handler ارسال می شود. همانطور که قبلا هم توضیح دادیم form-handler صفحات اسکریپتی در سمت سرور هستند که کار پردازش و ذخیره ی داده های ارسالی را بر عهده دارند و آدرسشان در قسمت action مشخص می شود:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!DOCTYPE html>

<html>

<body>

 

<h2>Submit Button</h2>

<p>The <strong>input type="submit"</strong> defines a button for submitting form data to a form-handler:</p>

 

<form action="/action_page.php">

First name:<br>

<input type="text" name="firstname" value="Mickey">

<br>

Last name:<br>

<input type="text" name="lastname" value="Mouse">

<br><br>

<input type="submit" value="Submit">

</form>

 

<p>If you click "Submit", the form-data will be sent to a page called "/action_page.php".</p>

 

</body>

</html>

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

نکته: اگر مقدار value را برای submit تعیین نکنید، یک مقدار پیش فرض برای آن تعیین می شود که معمولا همان کلمه ی submit است.(

ایران گستر)

 

Input های پاک کردن فرم

input هایی که به صورت <"input type="reset> نوشته می شوند، معمولا یک reset button (دکمه ی ریستارت یا شروع مجدد) را ایجاد می کنند و زمانی که کاربر روی این دکمه کلیک کند تمام محتوایی که در فیلد ها نوشته است پاک می شود.(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!DOCTYPE html>

<html>

<body>

 

<h2>Reset Button</h2>

<p>The <strong>input type="reset"</strong> defines a reset button that will reset all form values to their default values:</p>

 

<form action="/action_page.php">

First name:<br>

<input type="text" name="firstname" value="Mickey">

<br>

Last name:<br>

<input type="text" name="lastname" value="Mouse">

<br><br>

<input type="submit" value="Submit">

<input type="reset">

</form>

 

 

<p dir='rtl'>اگر در فیلد های بالا مقداری را بنویسید و تغییرشان دهید، سپس روی دکمه ی reset کلیک کنید تمام محتوای فرم به حالت اولیه ی آن بازمیگردد.</p>

 

</body>

</html>

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

 

Input های radio

در جلسات قبل با radio button ها آشنا شدیم؛ آن ها به هر کاربر اجازه می دهند تا از بین چند گزینه تنها یک گزینه را انتخاب کند:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<body>

 

<h2>Radio Buttons</h2>

<p>The <strong>input type="radio"</strong> defines a radio button:</p>

 

<p dir='rtl'>لطفا جنسیت خود را انتخاب کنید:</p>

 

<form dir='rtl' action="/action_page.php">

  <input type="radio" name="gender" value="male" checked> مرد<br>

  <input type="radio" name="gender" value="female"> زن<br>

  <input type="radio" name="gender" value="other"> نمیخواهم اعلام کنم<br><br>

  <input type="submit" Value='ارسال فرم'>

</form>

 

</body>

</html>

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

 

Input های Checkbox

input های checkbox به صورت <"input type="checkbox> ساخته می شوند؛ آن ها به کاربر اجازه می دهند که از بین چند گزینه صفر، یک، دو، سه و … یا همه را انتخاب کند:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!DOCTYPE html>

<html>

<body>

 

<h2>Checkboxes</h2>

<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>

  

<p dir='rtl'>مالک کدام موارد هستید؟</p>

 

<form dir='rtl' action="/action_page.php">

<input type="checkbox" name="vehicle1" value="Bike">من دوچرخه دارم

<br>

<input type="checkbox" name="vehicle2" value="Car">من ماشین دارم

<br>

<input type="checkbox" name="bus" value="Car">من اتوبوس دارم

<br><br>

<input type="submit" Value='ارسال فرم'>

</form>

 

</body>

</html>

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

 

Input های دکمه ای

این نوع از input ها به صورت <"input type="button> تعریف می شوند. سوالی که در ابتدا پیش می آید این است که برخی از input های قبلی نیز دکمه می شدند. چرا به این نوع از input ها به طور خاص دکمه ای می گوییم؟ جواب این است که این نوع از input ها تنها یک دکمه هستند و کارکرد آن ها را شما و معمولا با جاوا اسکریپت مشخص می کنید. input های قبلی که تبدیل به یک دکمه شدند کارشان تعریف شده بود و از این نظر با input های دکمه ای متفاوت هستند:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE html>

<html>

<body>

 

<h2>Input Button</h2>

 

<input type="button" onclick="alert('سلام کاربر گرامی!')" value="!روی من کلیک کن">

 

</body>

</html>

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

تا اینجای کار با input های معروف HTML آشنا شدیم. در قسمت بعد به سراغ input هایی خواهیم رفت که در HTML5 معرفی شده اند، یعنی:(

ایران گستر)

  • color
  • date
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

HTML

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

HTML مارا دنبال کنید.

 

 

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

 

عنصر <input>

در جلسه ی قبل به صورت خلاصه اشاره ای به این عنصر داشتیم اما در این قسمت کمی مفصل تر صحبت خواهیم کرد. مهم ترین عنصر یک فرم <input> است که بر اساس مقدار type میتواند به انواع و اشکال مختلفی ظاهر شود:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html>

<html>

<body>

 

<h2>The input Element</h2>

 

<form action="/action_page.php">

  Enter your name:

  <input name="firstname" type="text">

  <br><br>

  <input type="submit">

</form>

 

</body>

</html>

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

نکته: اگر مقدار type را خالی بگذارید، مقدار پیش فرض که همان text است برایش تعیین می شود.(

ایران گستر)

عنصر <select>

این عنصر یک لیستِ drop-down را می سازد. لیست های drop-down لیست هایی هستند که با کلیک روی آن ها می توانید از بین گزینه هایشان که نمایان می شود انتخاب کنید. به مثال زیر توجه کنید:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<html>

<body>

 

<h2>The select Element</h2>

<p>The select element defines a drop-down list:</p>

 

<form action="/action_page.php">

  <select name="cars">

    <option value="volvo">Volvo</option>

    <option value="saab">Saab</option>

    <option value="fiat">Fiat</option>

    <option value="audi">Audi</option>

  </select>

  <br><br>

  <input type="submit">

</form>

 

</body>

</html>

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

نکته: این خروجی ها تنها برای نمایش ظاهر این عناصر هستند و فاقد قدرت پردازشی می باشند، بنابراین با کلیک روی

submit اتفاقی نمی افتد اما در حالت واقعی داده ها پردازش خواهند شد.(

ایران گستر)

هر کدام از <option> های بالا یکی از گزینه های لیست ما می باشد و در حالت پیش فرض اولین <option> بدون کلیک و در فیلد ما نمایان خواهد بود. اگر می خواهید این موضوع را تغییر دهید و <option> مورد نظر خود را گزینه ی پیش فرض کنید از selected استفاده کنید:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<html>

<body>

 

<h2>Pre-selected Option</h2>

<p>You can preselect an option with the selected attribute.</p>

 

<form action="/action_page.php">

  <select name="cars">

    <option value="volvo">Volvo</option>

    <option value="saab">Saab</option>

    <option value="fiat" selected>Fiat</option>

    <option value="audi">Audi</option>

  </select>

  <br><br>

  <input type="submit">

</form>

 

</body>

</html>

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

همچنین اگر می خواهید تعداد گزینه هایی که نمایان هستند افزایش پیدا کنند، می توانید از size استفاده کنید:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<html>

<body>

 

<h2>Visible Option Values</h2>

<p>Use the size attribute to specify the number of visible values.</p>

 

<form action="/action_page.php">

  <select name="cars" size="3">

    <option value="volvo">Volvo</option>

    <option value="saab">Saab</option>

    <option value="fiat">Fiat</option>

    <option value="audi">Audi</option>

  </select>

  <br><br>

  <input type="submit">

</form>

 

</body>

</html>

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

در آخر اگر می خواهید کاربر بتواند چندین گزینه را انتخاب کند از multiple استفاده می کنید:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!DOCTYPE html>

<html>

<body>

 

<h2>Allow Multiple Seletcions</h2>

<p>Use the multiple attribute to allow the user to select more than one value.</p>

 

<form action="/action_page.php">

  <select name="cars" size="4" multiple>

    <option value="volvo">Volvo</option>

    <option value="saab">Saab</option>

    <option value="fiat">Fiat</option>

    <option value="audi">Audi</option>

  </select>

  <br><br>

  <input type="submit">

</form>

 

<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>

 

</body>

</html>

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

برای این کار کاربر باید کلید کنترل (Ctrl) را نگه دارد و سپس گزینه های مورد نظرش را انتخاب کنید. بدین ترتیب می توان چندین گزینه را انتخاب نمود. می توانید این مورد را در مثالا بالا امتحان کنید.(

ایران گستر)

 

عنصر <textarea>

عنصر <textarea> یک فیلد متنیِ چند خطی را ایجاد می کند. به مثال زیر توجه کنید:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<!DOCTYPE html>

<html>

<body>

 

<h2>Textarea</h2>

<p>The textarea element defines a multi-line input field.</p>

 

<form action="/action_page.php">

  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>

  <br>

  <input type="submit">

</form>

 

</body>

</html>

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

در کد بالا rows مسئول مشخص کردن تعداد خطوط قابل رویت در text area و cols مسئول مشخص کردن عرض قابل رویت آن هستند. البته می توانید این اندازه ها را با CSS نیز تعیین کنید:(

ایران گستر)

 

1

2

3

<textarea name="message" style="width:200px; height:600px;">

The cat was playing in the garden.

</textarea>

 

عنصر <button>

عنصر <button> یک دکمه را تعریف می کند:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE html>

<html>

<body>

 

<h2>The button Element</h2>

 

<button type="button" onclick="alert('سلام کاربر گرامی')">روی من کلیک کن</button>

 

</body>

</html>

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

همانطور که می بینید دکمه ها به خودی خود کاری نمی کنند و ما باید برایشان تعریف کنیم که قرار است چه کار کنند.

نکته: مرورگر های مختلف ممکن است از مقادیر مختلفی برای حالت پیش فرضِ 

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

ایران گستر)

 

عناصر HTML5

با معرفی HTML5 دو عنصر دیگر نیز به عناصر بالا اضافه شدند:(

ایران گستر)

  • <datalist>
  • <output>

این عناصر جدید هستند بنابراین در مرورگر های قدیمی نمایش داده نمی شوند و جای آنها خالی گذاشته می شود.(

ایران گستر)

عنصر <datalist> لیستی از گزینه های از پیش تعیین شده را برای <input> ایجاد می کند و کاربران هنگام کار با آن با یک لیست drop-down سر و کار دارند. همچنین list مربوط به <input> باید به id مربوط به <datalist> اشاره کند.(

ایران گستر)

مثال:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!DOCTYPE html>

<html>

<body>

 

<h2>The datalist Element</h2>

<p>The datalist element specifies a list of pre-defined options for an input element.</p>

 

<form action="/action_page.php">

  <input list="browsers" name="browser">

  <datalist id="browsers">

    <option value="Internet Explorer">

    <option value="Firefox">

    <option value="Chrome">

    <option value="Opera">

    <option value="Safari">

  </datalist>

  <input type="submit">

</form>

 

<p dir='rtl'><b>هشدار:</b> این قابلیت در مرورگر های سافاری و اینترنت اکسپلورر 9 و قبل تر پشتیبانی نمی شود</p>

 

</body>

</html>

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

عنصر <output> نیز نماینده ی یک محاسبه است (معمولا محاسبه هایی که با اسکریپت و در سمت سرور انجام می شوند):(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!DOCTYPE html>

<html>

<body>

 

<h2>The output Element</h2>

<p>می توانید مقدار جمع این دو عدد را به راحتی پیدا کنید</p>

 

<form action="/action_page.php"

oninput="x.value=parseInt(a.value)+parseInt(b.value)">

  0

  <input type="range" id="a" name="a" value="50">

  100 +

  <input type="number" id="b" name="b" value="50">

  =

  <output name="x" for="a b"></output>

  <br><br>

  <input type="submit">

</form>

 

<p dir='rtl'><strong>هشدار:</strong> این قابلیت در Edge 12 و IE و مرورگر های قدیمی پشتیبانی نمی شود</p>

 

</body>

</html>

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

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

ایران گستر)


HTML

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

HTML مارا دنبال کنید.

 

 

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

عنصر <form>

عنصر <form> فرمی را تعریف می کند که برای دریافت داده های کاربر مورد استفاده قرار می گیرد و به طور کل به این شکل است:(

ایران گستر)

 

1

2

3

4

5

<form>

.

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

.

</form>

هر

فرم HTML ای دارای عناصر فرم (form elements) است و به خودی خود هیچ کاری را نمی تواند انجام دهد. این

عناصر فرم در واقع انواع مختلف دریافت داده ها هستند؛ به طور مثال text field (مانند فیلد دریافت نام و نام خانوادگی کاربر)، 

checkbox (فیلد هایی که کاربر آن ها را تیک می زند) و … . ما می خواهیم با این عناصر به صورت خلاصه آشنا شویم.(

ایران گستر)

 

عنصر <input>

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

attribute ای به نام type تغییر می کند و بستگی دارد که ما به این attribute چه مقداری داده باشیم:(

ایران گستر)

Type توضیحات
<input type=”text”> یک فیلد متنی خالی به ما می دهد
<input type=”radio”> یک radio button به ما می دهد (انتخاب یک گزینه بین چند گزینه)
<input type=”submit”> یک submit button به ما می دهد (برای ثبت نهایی و ارسال فرم)

حالت <"input type="text>

نوع text یک فیلد متنی خالی به ما می دهد:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<html>

<body>

 

<h2>Text Input</h2>

 

<form>

  نام:<br>

  <input type="text" name="firstname">

  <br>

  نام خانوادگی:<br>

  <input type="text" name="lastname">

</form>

 

<p dir='rtl'>توجه داشته باشید که خود تگ form قابل مشاهده نیست.</p>

 

<p>همچنین باید بدانید که عرض پیشفرض این فیلد 20 کاراکتر است</p>

 

</body>

</html>

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

نکته: در مورد این فرم باید به دو مورد توجه کرد؛ اولا خود

تگ form قابل مشاهده نیست و ثانیا عرض پیشفرض فیلدهای text برابر با 20 کاراکتر است.(

ایران گستر)

حالت <"input type="radio>

این نوع از type یک radio button را تعریف می کند. این نوع دکمه ها به کاربر اجازه می دهند که از بین چند گزینه تنها یک گزینه را انتخاب کند. در مثال زیر از کاربر خواسته ایم که جنسیت خود را به ما بگوید:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<!DOCTYPE html>

<html>

<body>

 

<h2>Radio Buttons</h2>

 

<form>

  <input type="radio" name="gender" value="male" checked> مرد<br>

  <input type="radio" name="gender" value="female"> زن<br>

  <input type="radio" name="gender" value="other"> نمیخواهم اعلام کنم  

</form>

 

</body>

</html>

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

حالت <"input type="submit>

در این نوع type، دکمه ای برای ارسال نهایی فرم به form-handler ایجاد می شود. form-handler ها در اکثر اوقات صفحات اسکریپت نویسی شده ای هستند که اطلاعات کاربر را پردازش می کنند. این صفحات در attribute ای به نام action آدرس دهی می شوند. به مثال زیر نگاه کنید:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<html>

<body>

 

<h2>HTML Forms</h2>

 

<form action="https://www.w3schools.com/action_page.php">

  First name:<br>

  <input type="text" name="firstname" value="Mickey">

  <br>

  Last name:<br>

  <input type="text" name="lastname" value="Mouse">

  <br><br>

  <input type="submit" value="Submit">

</form>

 

<p dir='rtl'>اگر بر روی دکمه ی submit کلیک کنید اطلاعات فرم به صفحه ی "https://www.w3schools.com/action_page.php" ارسال می شود</p>

 

</body>

</html>

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

پیامی که پس از ثبت فرم به شما نشان داده می شود توسط سرور و پس از بررسی داده ها تولید شده است.(

ایران گستر)

 

وظیفه ی action

attribute ای به نام action در تمام فرم ها وجود دارد (به غیر از موارد معدودی که استثناء هستند) و تعیین می کند که پس از ثبت نهایی فرم و ارسال آن چه اتفاقی بیفتد. البته خودِ action کاری انجام نمی دهد بلکه فرم و اطلاعاتش را به صفحه ی اسکریپتی هدایت می کند تا پردازش شود و عکس العملی نشان دهد.(

ایران گستر)

در مثال بالا، فرم به صفحه ای به نام action_page.php ارسال شد که شامل اسکریپت های server-side (مانند PHP یا ASP.NET و …) است:(

ایران گستر)

 

1

<form action="/action_page.php">

نکته: اگر action را کاملا حذف کنید، فرم به همان صفحه ای که در آن هستید ارسال می شود.(

ایران گستر)

 

وظیفه ی target

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

ایران گستر)

مثال:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html>

<html>

<body>

 

<h2>The target Attribute</h2>

<p>When submitting this form, the result will be opened in a new browser tab:</p>

 

<form action="https://www.w3schools.com/action_page.php" target="_blank">

  First name:<br>

  <input type="text" name="firstname" value="Mickey">

  <br>

  Last name:<br>

  <input type="text" name="lastname" value="Mouse">

  <br><br>

  <input type="submit" value="Submit">

</form>

 

</body>

</html>

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

مقادیر مجاز دیگر parent_ و top_ و یا نام یک iframe هستند.(

ایران گستر)

 

وظیفه ی method

در فرم ها یک attribute بسیار مهم دیگری به نام method (به معنی روش») وجود دارد. در واقع این attribute روش یا متد ارسال اطلاعات را مشخص می کند که یا می تواند GET باشد و یا POST.(

ایران گستر)

مثالی از متد GET:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!DOCTYPE html>

<html>

<body>

 

<h2>The method Attribute</h2>

<p>This form will be submitted using the GET method:</p>

 

<form action="https://www.w3schools.com/action_page.php" target="_blank" method="GET">

  First name:<br>

  <input type="text" name="firstname" value="Mickey">

  <br>

  Last name:<br>

  <input type="text" name="lastname" value="Mouse">

  <br><br>

  <input type="submit" value="Submit">

</form>

 

<p>پس از ثبت فرم به نوار آدرس مرورگر نگاه کنید. اطلاعات ثبت شده را در آنجا می بینید</p>

 

</body>

</html>

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

مثالی از متد POST:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!DOCTYPE html>

<html>

<body>

 

<h2>The method Attribute</h2>

<p>This form will be submitted using the GET method:</p>

 

<form action="https://www.w3schools.com/action_page.php" target="_blank" method="POST">

  First name:<br>

  <input type="text" name="firstname" value="Mickey">

  <br>

  Last name:<br>

  <input type="text" name="lastname" value="Mouse">

  <br><br>

  <input type="submit" value="Submit">

</form>

 

<p>پس از ثبت فرم به نوار آدرس مرورگر نگاه کنید. هیچ اطلاعاتی در آنجا دیده نمی شود</p>

 

</body>

</html>

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

 

تفاوت GET و POST چیست؟

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

ایران گستر)

 

1

/action_page.php?firstname=Mickey&lastname=Mouse

نکاتی در مورد GET:(

ایران گستر)

  • داده های فرم را به صورت جفت های name/value در URL قرار می دهد
  • طول این

    URL محدود است (حدود 3000 کاراکتر)

  • هیچ گاه برای ارسال اطلاعات حساس مانند رمز عبور از GET استفاده نکنید چرا که در نوار آدرس مرورگر قابل مشاهده خواهد بود
  • مناسب برای کاربرانی که می خواهند نتایج را Bookmark کنند
  • GET معمولا مناسب موقعیت هایی است که هیچ اطلاعات حساسی در آن رد و بدل نمی شود، مانند query string های گوگل زمانی که چیزی را در آن سرچ می کنید

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

نکاتی در مورد POST:

  • POST هیچ محدودیت اندازه ای ندارد و می توانید از طریق آن حجم بزرگی از داده ها را ارسال کنید
  • نتایجی که با POST ارسال شوند قابل bookmark شدن نخواهند بود

 

وظیفه ی name

هر فیلد ورودی (input) باید یک name داشته باشد و اگر فیلدی آن را نداشته باشد، داده های درون آن فیلد اصلا ارسال نمی شوند.(

ایران گستر)

در مثال زیر می توانید ببینید که تنها Last name ثبت و ارسال می شود:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<body>

 

<h2>The name Attribute</h2>

 

<form action="https://www.w3schools.com/action_page.php">

  First name:<br>

  <input type="text" value="Mickey">

  <br>

  Last name:<br>

  <input type="text" name="lastname" value="Mouse">

  <br><br>

  <input type="submit" value="Submit">

</form>

 

</body>

</html>

جمع کردن داده در فرم ها

عنصر <fieldset> داده های مرتبط با هم را در یک گروه جمع می کند. تگ <legend> نیز توضیحی درباره ی <fieldset> ارائه می کند. به مثال زیر دقت کنید:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!DOCTYPE html>

<html>

<body>

 

<h2>Grouping Form Data with Fieldset</h2>

<p>The fieldset element is used to group related data in a form, and the legend element defines a caption for the fieldset element.</p>

 

<form action="/action_page.php">

  <fieldset>

    <legend>Personal information:</legend>

    First name:<br>

    <input type="text" name="firstname" value="Mickey">

    <br>

    Last name:<br>

    <input type="text" name="lastname" value="Mouse">

    <br><br>

    <input type="submit" value="Submit">

  </fieldset>

</form>

 

</body>

</html>

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


HTML

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

HTML مارا دنبال کنید.

 

 

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

 

 

آشنایی با XHTML

به زبان ساده، 

XHTML همان HTML است که به صورت XML نوشته شده باشد.(

ایران گستر)

 XHTML مخفف EXtensible HyperText Markup Language و به معنی زبان امتدادپذیر نشانه‌گذاری فرامتنی» است اما نگذارید این اسم های قلمبه و سلمبه شما را فریب دهد! XHTML دقیقا مانند HTML نوشته می شود اما قوانین سخت گیرانه تری دارد و همانطور که گفتیم انگار می خواهیم HTML را به صورت یک برنامه ی XML بنویسیم. همچنین قابل ذکر است که XHTML توسط تمام مرورگر های مطرح پشتیبانی می شود.(

ایران گستر)

 

چرا XHTML ؟

بسیاری از

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

ایران گستر)

 

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>

به نظر شما مشکل کد بالا چیست؟

کد بالا در وهله ی اول هیچ DOCTYPE ای ندارد و مشخص نکرده است که از چه ورژنی از HTML استفاده می کند. همچنین تگ <html> را در آخر سند بسته نشده است و هیچ تگ پایانی را مشاهده نمی کنیم. این اتفاق برای

تگ های <head> و <h1> و <p> نیز اتفاق افتاده است.(

ایران گستر)

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

ایران گستر)

از طرفی XML نوعی زبان نشانه گذاری است که در آن باید قوانین نشانه گذاری را به طور کامل رعایت کرد. همانطور که حدس می زنید ترکیب XML و HTML همان XHTML می باشد.(

ایران گستر)

 

خصوصیات XHTML

برخی از مهم ترین خصوصیات زبان XHTML از این قرار اند:(

ایران گستر)

  • تعریف 

    DOCTYPE در این زبان اجباری است

  • تعریف attribute ای به نام xmlns در <html> اجباری است
  • وجود داشتن تگ های <html> و <head> و <title> و <body> در یک سند اجباری است
  • عناصر XHTML باید به صورت کاملا صحیح nest شوند (تو در تو قرار بگیرند)
  • تمام عناصر XHTML باید همیشه بسته شوند (تگ پایانی)
  • تمام عناصر XHTML باید با حروف کوچک نوشته شوند
  • اسناد XHTML باید حتما یک عنصر root (ریشه ای) داشته باشند
  • نام attribute ها باید همیشه با حروف کوچک نوشته شود
  • مقدار 

    attribute ها باید در Quotation قرار بگیرد

  • خلاصه سازی attribute ها غیر مجاز است.

1- خلاصه سازی attribute ها یعنی مواردی مثل مورد زیر:(

ایران گستر)

اگر به جای نوشتن <"option selected="selected> بنویسید <option selected> می گوییم attribute (در اینجا selected) را خلاصه کرده اید.

می خواهیم این موارد را به صورت خلاصه بررسی کنیم.(

ایران گستر)

 

اعلام DOCTYPE

یک سند XHTML باید علاوه بر DOCTYPE شامل تگ های <html> و <head> و <title> و <body> باشد.

یک نمونه سند صحیح به این شکل است:(

ایران گستر)

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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

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

 

<html xmlns="http://www.w3.org/1999/xhtml">

 

<head>

  <title>Title of document</title>

</head>

 

<body>

  some content

</body>

 

</html>

DOCTYPE ای که در بالا می بینید، نحوه ی اعلام DOCTYPE به عنوان XHTML است.

 

تو در تو بودن (nesting)

در زبان HTML بعضا می توانیم اشتباها عناصر را nest کنیم:(

ایران گستر)

 

1

<b><i>This text is bold and italic</b></i>

در این کد تگ های پایانی جا به جا بسته شده اند.

اما در XHTML باید کاملا صحیح nest شوند:

 

1

<b><i>This text is bold and italic</i></b>

 

تگ های پایانی

در HTML این کد غلط است:(

ایران گستر)

 

1

2

<p>This is a paragraph

<p>This is another paragraph

و این حالت صحیح است:(

ایران گستر)

 

1

2

<p>This is a paragraph</p>

<p>This is another paragraph</p>

حتی تگ هایی که در HTML تگ پایانی ندارند باید در XHTML بسته شوند. در HTML این تگ ها به این صورت هستند:(

ایران گستر)

 

1

2

3

A break: <br>

A horizontal rule: <hr>

An image: <img src="happy.gif" alt="Happy face">

اما در XHTML باید به این شکل نوشته شوند:

 

1

2

3

A break: <br />

A horizontal rule: <hr />

An image: <img src="happy.gif" alt="Happy face" />

همچنین همیشه باید تگ هایتان با حروف کوچک باشند بنابراین کد زیر غلط است:(

ایران گستر)

 

1

2

3

<BODY>

<P>This is a paragraph</P>

</BODY>

حالت صحیح این کد به این صورت است:(

ایران گستر)

 

1

2

3

<body>

<p>This is a paragraph</p>

</body>

 

Attribute ها

کوچک بودن حروف برای attribute ها نیز صدق می کند، بنابراین کد زیر غلط است:(

ایران گستر)

 

1

<table WIDTH="100%">

و شکل صحیح آن بدین صورت است:

 

1

<table width="100%">

همچنین باید مقدار این attribute ها در quotation باشد. کد زیر غلط است:(

ایران گستر)

 

1

<table width=100%>

و شکل صحیح آن بدین صورت است:

 

1

<table width="100%">

خلاصه سازی attribute ها نیز غیر مجاز است. به نمونه های صحیح و غلط زیر نگاه کنید.(

ایران گستر)

کد غلط:

 

1

<input type="checkbox" name="vehicle" value="car" checked />

حالت صحیح آن:(

ایران گستر)

 

1

<input type="checkbox" name="vehicle" value="car" checked="checked" />

کد غلط:(

ایران گستر)

 

1

<input type="text" name="lastname" disabled />

حالت صحیح آن:(

ایران گستر)

 

1

<input type="text" name="lastname" disabled="disabled" />

 

سوال: چطور می توانیم از HTML به XHTML مهاجرت کنیم؟(

ایران گستر)

پاسخ: ابتدا باید یک DOCTYPE برای XHTML بنویسید و DOCTYPE قبلی را حذف کنید. سپس attribute ای به نام xmlns را به خودِ عنصر html اضافه کنید. سپس نام تمامی عناصر را با حروف کوچک بنویسید و این کار را با attribute ها نیز انجام دهید. در آخر تگ های خالی (تگ هایی که تگ پایانی ندارند) را ببندید و برای مقادیر attribute ها Quotation قرار دهید.(

ایران گستر)

یک مثال از یک سند XHTML برای شما آورده ام:

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title> Strict DTD XHTML Example </title>

</head>

<body>

<p>

Please Choose a Day:

<br /><br />

<select name="day">

<option selected="selected">Monday</option>

<option>Tuesday</option>

<option>Wednesday</option>

</select>

</p>

</body>

</html>

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

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

ایران گستر)


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

100 پرسش و پاسخ ابدومینوپلاستی و رفع تمامی ابهامات و سولاات شما در این زمینه.

ادامه مطلب


آخرین مطالب

آخرین ارسال ها

آخرین جستجو ها