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

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

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

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

جداول HTML

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

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

فریم ورک های CSS

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

فریم ورک Bulma

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

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

فریم ورک Bootstrap

فکر نمی کنم 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>

<head>

<title>CSS Template</title>

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

<h2>Cities</h2>

</header>

<nav>

<ul>

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

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

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

</ul>

</nav>

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

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

<head>

<title>CSS Template</title>

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

<h2>Cities</h2>

</header>

<nav>

<ul>

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

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

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

</ul>

</nav>

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

<p>Footer</p>

</footer>

</body>

</html>

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

استفاده از Grid View

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

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

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

۰ نظر

fateme feysali

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>

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

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

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

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

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

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

function myFunction() {

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

}

</script>

</head>

<body>

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

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

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

۰ نظر

fateme feysali

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>

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>

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>

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>

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

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

</script>

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

</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 های مطلق و کامل باعث بروز دردسر های زیادی می شوند به جز مواردی که راه دیگری نداشته باشیم (مثلا منابع ما روی یک سرور دیگر قرار داشته باشند).(ایران گستر)

۰ نظر

fateme feysali

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>

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

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

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>

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

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

</body>

</html>

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

۰ نظر

fateme feysali

HTML

ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های 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>

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

<h2>London</h2>

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

</div>

<h2>Paris</h2>

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

</div>

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

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 ها ناپدید می شوند(ایران گستر)

۰ نظر

fateme feysali

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>

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

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

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

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

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

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

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

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

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

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

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

<li>Coffee</li>

</ol>

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

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

</ul>

</body>

</html>

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

۰ نظر

fateme feysali

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>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

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

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

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

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

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

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

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

<tr>

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

</tr>

<tr>

<td>Bill Gates</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>

<tr>

<td>Bill Gates</td>

</tr>

<tr>

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

</tr>

<tr>

</tr>

</table>

</body>

</html>

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

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

تگ <caption>

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<caption>Monthly savings</caption>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

<tr>

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

</tr>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

</tr>

</table>

<br>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

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

۰ نظر

fateme feysali

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>

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

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

</body>

</html>

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

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

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

1	<img src="http://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 زیر را به کد هایمان اضافه کنیم:(ایران گستر)

وقتی بعد از 100 بار ویرایش کد ها، باز هم چند تا باگ توی برنامه ات می بینی!

اضافه کردن این تصویر به یک صفحه ی 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>

</body>

</html>

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

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

(ایران گستر)

1

2

3

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

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>

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>

</head>

<body>

<h2>The picture Element</h2>

</picture>

</body>

</html>

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

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

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

۰ نظر

fateme feysali

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>

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

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

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

</p>

</body>

</html>

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

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

ایجاد bookmark ها

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

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

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

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

<!DOCTYPE html>

<html>

<body>

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

<h2>Chapter 1</h2>

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

<h2>Chapter 2</h2>

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

<h2>Chapter 3</h2>

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

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

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

<h2>Chapter 5</h2>

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

<h2>Chapter 6</h2>

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

<h2>Chapter 7</h2>

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

<h2>Chapter 8</h2>

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

<h2>Chapter 9</h2>

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

<h2>Chapter 10</h2>

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

<h2>Chapter 11</h2>

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

<h2>Chapter 12</h2>

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

<h2>Chapter 13</h2>

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

<h2>Chapter 14</h2>

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

<h2>Chapter 15</h2>

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

<h2>Chapter 16</h2>

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

<h2>Chapter 17</h2>

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

<h2>Chapter 18</h2>

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

<h2>Chapter 19</h2>

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

<h2>Chapter 20</h2>

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

<h2>Chapter 21</h2>

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

<h2>Chapter 22</h2>

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

<h2>Chapter 23</h2>

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

</body>

</html>

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

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

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

۰ نظر

fateme feysali

HTML

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

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

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>

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>

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>

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

</body>

</html>

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

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

تگ <bdo>

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

1

2

3

4

5

6

7

8

9

10

<!DOCTYPE html>

<html>

<body>

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

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

</body>

</html>

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

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

۱ نظر

fateme feysali

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

۶۵ مطلب در مهر ۱۳۹۸ ثبت شده است

HTML

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

جداول HTML

فریم ورک های CSS

فریم ورک Bulma

فریم ورک Bootstrap

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

استفاده از Flexbox

استفاده از Grid View

HTML

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

تگ <title>

تگ <style>

تگ <link>

عنصر <meta>

مبحث viewport

تگ <script>

تگ <base>

HTML

تگ <script>

تگ <noscript>

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

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

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

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

HTML

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

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

bookmark چیست؟

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

Iframe چیست؟

HTML

عناصر Block

عناصر Inline

کلاس ها

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

HTML

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

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

لیست توضیحات

HTML

جدول ها

حاشیه در جدول

اضافه کردن Padding

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

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

تگ <caption>

HTML

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

ویژگی alt

ویژگی های Width و Height

آدرس دهی src

تصاویر متحرک

ویژگی float

عنصر <picture>

HTML

لینک دادن در html

ظاهر لینک ها

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

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

ایجاد bookmark ها

HTML

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

تگ <q>

تگ <blockquote>

تگ <abbr>

تگ <address>

تگ <cite>

تگ <bdo>