لینک ها در HTML

جلسه بعدی ❯❮ جلسه قبلی

---

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

---

لینک ها در HTML - لینک های ارتباطی یا Hyperlinks

لینک ها در HTML، به هایپرلینک معروف هستند و به این اسم شناخته می شوند.

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

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

نکته: یک لینک حتما نباید متن باشد، بلکه میتواند عکس و یا هر عنصر HTML دیگری باشد.

---

لینک ها در HTML - نحوه استفاده یا Syntax

لینک ها در HTML با تگ <a> تعریف می شوند:

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

مثال

<a href="https://learnhtml5.blog.ir/">Visit our site</a>

خودتان امتحان کنید »

صفت href آدرس مقصد (https://learnhtml5.blog.ir/) را برای لینک مشخص می کند.

متن لینک، قسمت قابل مشاهده برای کاربر است (visit our site).

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

نکته: بدون گذاشتن اسلش (/) در انتهای آدرس سایت، ممکن که شما دو درخواست برای سرور بفرستید یعنی لینک شما دوبار باز شود. بسیاری از سرورها به صورت خودکار یک اسلش (/) به انتهای آدرس اضافه می کنند، و سپس لینک مورد نظر شما را باز می کنند.

---

لینک های داخلی

در مثال بالا از یک URL مطلق (آدرس کامل وبسایت) استفاده شده است.

اما در یک لینک داخلی (لینکی به صفحات داخلی همان سایت) از URL نسبی (بدون https://www.) استفاده می شود.

مثال

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

خودتان امتحان کنید »

---

رنگ های یک لینک در HTML

به صورت پیشفرض، یک لینک به صورت زیر نمایش داده می شود (در همه ی مرورگرها):

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

شما با استفاده از CSS به صورت زیر می توانید رنگ های پیشفرض یک لینک را تغییر دهید:

مثال

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

خودتان امتحان کنید »

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

This is a link

مثال

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

خودتان امتحان کنید »

نکته: شما در آموزش CSS درباره ی لینک ها بیشتر یاد خواهید گرفت.

---

لینک ها در HTML - صفت target

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

صفت target می تواند دارای یکی از مقادیر زیر باشد:

• _blank - لینک مقصد را در یک پنجره یا تب جدید باز می کند
• _self - لینک مقصد را در همان پنجره یا تبی باز می کند که لینک در آن کلیک شده (این مقدار پیشفرض برای لینک ها است)
• _parent - لینک مقصد را در یک فریم پدر باز می کند
• _top - لینک مقصد را در تمام بدنه ی یک پنجره ی مرورگر باز می کند
• framename - لینک مقصد را در یک فریم نامگذاری شده باز می کند

در مثال زیر لینک مقصد در یک پنجره یا تب جدید مرورگر باز می شود:

مثال

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

خودتان امتحان کنید »

نکته: اگر صفحه ی وب سایت شما به یک فریم محدود شده است، شما می توانید با استفاده از target="_top" این محدودیت را از بین ببرید:

مثال

<a href="https://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a>

خودتان امتحان کنید »

---

لینک ها در HTML - استفاده از عکس به عنوان لینک

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

مثال

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>

خودتان امتحان کنید »

توجه: مقدار border:0; که به مثال بالا اضافه شده، به این دلیل است که در مرورگر IE9 (و نسخه های پایین تر) به صورت پیشفرض یک بوردر به عکس های لینک شده اضافه می گردد.

---

لینک ها در HTML - صفت title

صفت title اطلاعاتی اضافه را درباره یک عنصر تعریف می کند. این اطلاعات اغلب هنگامی که ماوس روی عنصر حرکت می کند در یک مستطیل کوچک (tooltip) نشان داده می شوند.

مثال

<a href="https://learnhtml5.blog.ir/" title="Go to LearnHtml5 HTML section">Visit our Site</a>

خودتان امتحان کنید »

---

لینک ها در HTML - ایجاد یک نشانک یا Bookmark

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

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

برای ساخت بوکمارک، ابتدا یک بوکمارک ایجاد کرده و سپس یک لینک به آن اضافه کنید.

با کلیک بر روی لینک، صفحه به محلی که بوکمارک در آن قرار گرفته پرش یا scroll می شود.

مثال

ابتدا با صفت id یک بوکمارک ایجاد کنید:

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

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

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

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

مثال

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

خودتان امتحان کنید »

---

لینک دهی به فایل های خارجی

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

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

مثال

<a href="https://learnhtml5.blog.ir">HTML tutorial</a>

خودتان امتحان کنید »

در مثال زیر به صفحه ای لینک داده شده است که در پوشه ی html وبسایت فعلی  قرار دارد:

مثال

<a href="/html/default.asp">HTML tutorial</a>

خودتان امتحان کنید »

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

مثال

<a href="default.asp">HTML tutorial</a>

خودتان امتحان کنید »

---

منبع

https://www.w3schools.com/html/html_links.asp

جلسه بعدی ❯❮ جلسه قبلی

استفاده از CSS در HTML

جلسه بعدی ❯❮ جلسه قبلی

---

استایل دهی HTML با CSS

CSS مخفف عبارت Cascading Style Sheet به معنی الگوهای آبشاری می باشد.

CSS نحوه نمایش عناصر HTML را روی صفحه کامپیوتر، کاغذ یا دیگر رسانه ها مشخص می کند.

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

همچنین CSS به یکی از سه روش زیر می تواند به عناصر HTML اضافه شود:

• Inline یا در خط - با استفاده از صفت style به طور مستقیم برای عناصر HTML استفاده شود.
• Internal یا داخلی - با استفاده از عنصر <style> در بخش <head>
• External یا خارجی - در این روش می توان با استفاده از یک فایل خارجی CSS عناصر HTML را استایل دهی کرد.

رایج ترین روش برای اضافه کردن CSS به عناصر HTML استفاده از روش External است. با این حال ما در این آموزش ها برای Style دهی به عناصر HTML از روش های Inline و Internal استفاده می کنیم به این دلیل که استفاده از این روش ها راحت تر است و آموزش های ما را برای شما قابل فهم تر میکند.

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

---

روش Inline

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

در روش Inline ما با استفاده از صفت style ویژگی مد نظرمان را بر روی عنصر مورد نظر اعمال می کنیم.

در مثال زیر با استفاده از این روش رنگ متن عنصر <h1> را به آبی تغییر داده ایم:

مثال

<h1 style="color:blue;">This is a Blue Heading</h1>

خودتان امتحان کنید »

---

روش Internal

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

در روش Internal کد های CSS در بخش <head> از صفحه ی HTML و در داخل عنصر <style> قرار می گیرند:

مثال

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

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

</body>
</html>

خودتان امتحان کنید »

---

روش External

از روش External برای دادن استایل به تعداد زیادی صفحه HTML استفاده می شود.

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

برای استفاده از روش External، ابتدا باید یک فایل با پسوند CSS. ایجاد کنید و سپس لینک این فایل را به صورت زیر در داخل بخش <head> از سند HTML تان قرار دهید:

مثال

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

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

</body>
</html>

خودتان امتحان کنید »

صفحه ی External که حاوی کدهای CSS است، می تواند توسط هر ویرایشگر متنی نوشته شود. این فایل نباید حاوی هیچ کد HTML ای باشد و همچنین باید با پسوند CSS. ذخیره شود.

صفحه ی External ای که حاوی کدهای CSS بوده و در مثال بالا لینک شده به شکل زیر است:

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

---

فونت ها در CSS

ویژگی color در CSS رنگ متن مورد استفاده را مشخص می کند.

ویژگی font-family در CSS  فونت متن مورد استفاده را مشخص می کند.

ویژگی font-size در CSS اندازه متن مورد استفاده را مشخص می کند.   

مثال

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p  {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

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

</body>
</html>

خودتان امتحان کنید »

---

ویژگی Border یا حاشیه در CSS

ویژگی border در CSS مشخص میکند که حاشیه دور یک عنصر HTML به چه شکلی باشد:

مثال

p {
  border: 1px solid powderblue;
}

خودتان امتحان کنید »

---

ویژگی padding در CSS

ویژگی padding در CSS مشخص میکند که فاصله متن تا border یا حاشیه ی یک عنصر HTML چه قدر باشد:

مثال

p {
  border: 1px solid powderblue;
  padding: 30px;
}

خودتان امتحان کنید »

---

ویژگی margin در CSS

ویژگی margin در CSS فاصله border یا حاشیه ی یک عنصر HTML را با دیگر عناصر HTML مشخص می کند:

مثال

p {
  border: 1px solid powderblue;
  margin: 50px;
}

خودتان امتحان کنید »

---

صفت id

برای تعریف یک استایل خاص برای یک عصر خاص، صفت id را به آن عنصر اضافه کنید:

<p id="p01">I am different</p>

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

مثال

#p01 {
  color: blue;
}

خودتان امتحان کنید »

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

---

صفت Class

برای استفاده از استایلی برای تعدادی عنصر خاص، صفت class را به آن عنصرها اضافه کنید:

<p class="error">I am different</p>

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

مثال

p.error {
  color: red;
}

خودتان امتحان کنید »

---

لینک دادن به فایل External در HTML

صفحات External یا خارجی حاوی استایل های CSS می توانند با یک URL کامل یا نسبی نسبت به صفحه HTML ارجاع داده شوند.

در مثال زیر از یک URL کامل برای آدرس دهی فایل خارجی CSS استفاده شده است:

مثال

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

خودتان امتحان کنید »

مثال زیر اشاره به فایل خارجی CSS ای دارد که در همان فولدر html ای قرار دارد که سند HTML سایت در آن قرار گرفته است:

مثال

<link rel="stylesheet" href="/html/styles.css">

خودتان امتحان کنید »

مثال زیر اشاره به فایل خارجی CSS ای دارد که در همان محلی قرار دارد که سند HTML سایت در آن قرار گرفته است:

مثال

<link rel="stylesheet" href="styles.css">

خودتان امتحان کنید »

---

منبع

https://www.w3schools.com/html/html_css.asp

جلسه بعدی ❯❮ جلسه قبلی

رنگ ها در HTML

جلسه بعدی ❯❮ جلسه قبلی

---

در HTML می توان رنگ ها را با استفاده از نام های از پیش تعریف شده برای رنگ ها، مقادیر RGB ، HEX ، HSL ، RGBA ، HSLA مقدار دهی کرد. در این فصل ما به آموزش رنگ ها در همهی حالت ها خواهیم پرداخت.

---

اسم رنگ ها

در HTML یک رنگ را می توان با اسم مخصوص به آن رنگ مشخص کرد:

نام فارسی	نام انگلیسی	رنگ
گوجه ای	Tomato
نارنجی	Orange
نیلی	DodgerBlue
خزه ای	MediumSeaGreen
خاکستری	Gray
آبی فولادی	SlateBlue
بنفش روشن	Violet
خاکستری روشن	LightGray

خودتان امتحان کنید »

---

رنگ پس زمینه

شما می توانید با استفاده از صفت background-color رنگ پس زمینه ای دلخواه برای عناصر HTML انتخاب کنید:

Hello World

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.

مثال

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

خودتان امتحان کنید »

---

رنگ متن

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

Hello World

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.

مثال

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

خودتان امتحان کنید »

---

رنگ حاشیه

شما می توانید با استفاده از صفت border رنگی دلخواه برای حاشیه عناصر HTML انتخاب کنید:

Hello World

Hello World

Hello World

مثال

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

خودتان امتحان کنید »

---

مقادیر رنگ ها در HTML

در HTML می توان رنگ ها را با استفاده از مقادیر RGB، مقادیر هگزادسیمال (HEX)، مقادیرHSL، مقادیر RGBA و مقادیر HSLA مشخص کرد:

در ادامه مثال هایی با رنگ یکسان گوجه ای برای هر یک از مقادیر بالا آورده شده است:

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

در مثال زیر از همان رنگ گوجه ای استفاده شده، اما 50 درصد شفاف تر:

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)

مثال

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

خودتان امتحان کنید »

---

مقدار RGB

در HTML یک رنگ را می توان با مقدار RGB با استفاده از این فرمول مشخص کرد: (rgb(red, green, blue.

به جای هر پارامتر (red, green, blue) عددی بین 0 تا 255 قرار می گیرد.

به عنوان مثال، (rgb(255, 0, 0 رنگ قرمز را نشان می دهد، زیرا رنگ قرمز روی بالاترین مقدار آن روی 255 تنظیم شده و مقدار بقیه پارامترها روی صفر قرار داده شده است.

برای نمایش رنگ سیاه باید تمام پارامترها با عدد 0 مقدار دهی شوند، اینگونه: (rgb(0, 0, 0.

برای نمایش رنگ سفید باید تمام پارامترها با عدد 255 مقدار دهی شوند، اینگونه: (rgb(255, 255, 255.

در مثال زیر چند رنگ با مقدار RGB مقدار دهی شده اند:

مثال

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

خودتان امتحان کنید »

سایه های خاکستری اغلب با قرار دادن مقادیر مساوی به جای هر سه پارامتر تعریف می شوند:

مثال

rgb(0, 0, 0)

rgb(60, 60, 60)

rgb(120, 120, 120)

rgb(180, 180, 180)

rgb(240, 240, 240)

rgb(255, 255, 255)

خودتان امتحان کنید »

---

مقدار هگزادسیمال

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

#rrggbb

که در آن rr (قرمز)، gg (سبز) و bb (آبی) مقادیر هگزادسیمالی بین 00 تا ff (به صورت تقریبی مشابه 255 حالت البته در مبنای 16) هستند.

مثال

#ff0000

         #0000ff         

#3cb371

#ee82ee

#ffa500

#6a5acd

خودتان امتحان کنید »

سایه های خاکستری اغلب با قرار دادن مقادیر مساوی به جای هر سه پارامتر تعریف می شوند:

مثال

         #000000         

#3c3c3c

#787878

#b4b4b4

#f0f0f0

#ffffff

خودتان امتحان کنید »

---

مقدار HSL

در HTML یک رنگ را می توان با مقدار HSL به این صورت تعریف کرد: 

hsl(hue, saturation, lightness)

hue درجه ای از چرخه رنگ از 0 تا 360 است. 0 رنگ قرمز، 120 رنگ سبز و 240 رنگ آبی است.

مقدار saturation از جنس درصد است، 0% به معنای سایه خاکستری و 100% به معنای رنگ کامل است.

مقدار lightness نیز از جنس درصد است، 0% سیاه، 50% نه روشن و نه تاریک و 100% به معنای سفید است.

مثال

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

خودتان امتحان کنید »

---

اشباع (saturation)

saturation را می توان به عنوان شدت یک رنگ توصیف کرد.

100% رنگ خالص است و سایه ای از خاکستری ندارد.

50% خاکستری است اما هنوز هم می توانید رنگ آن را ببینید.

0% کاملا خاکستری است و دیگر نمی توانید رنگ آن را ببینید.

مثال

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

خودتان امتحان کنید »

---

روشنایی (lightness)

شما می توانید از lightness برای تنظیم میزان روشنایی رنگتان استفاده کنید. 0% به معنای تاریکی (سیاه)، 50% به معنای نه روشن و نه تاریک و 100% بع معنای کاملا روشن (سفید) است.

مثال

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

خودتان امتحان کنید »

---

سایه های خاکستری غالبا با تنظیم hue و saturation روی عدد صفر مشخص می شوند و برای رسیدن به سایه های خاکستری تیره تر یا روشن تر lightness را از 0 تا 100 تنظیم می کنند:

مثال

hsl(0, 0%, 0%)

hsl(0, 0%, 24%)

hsl(0, 0%, 47%)

hsl(0, 0%, 71%)

hsl(0, 0%, 94%)

hsl(0, 0%, 100%)

خودتان امتحان کنید »

---

مقدار RGBA

مقدار رنگ RGBA از همان فرمت RGB است با این تفاوت که این فرمت حاوی پارامتر آلفا (alpha) نیز هست که برای تعیین شفافیت رنگ کاربرد دارد.

مقدار رنگ RGBA در HTML به صورت زیر تعریف می شود:

rgba(red, green, blue, alpha)

پارامتر آلفا (alpha) عددی بین 0.0 (کاملا شفاف) و 1.0 (بسیار کدر) است:

مثال

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)

خودتان امتحان کنید »

---

مقدار HSLA

مقدار رنگ HSLA از همان فرمت HSL است با این تفاوت که این فرمت حاوی پارامتر آلفا (alpha) نیز هست که برای تعیین شفافیت رنگ کاربرد دارد.

مقدار رنگ HSLA در HTML به صورت زیر تعریف می شود:

hsla(hue, saturation, lightness, alpha)

پارامتر آلفا (alpha) عددی بین 0.0 (کاملا شفاف) و 1.0 (بسیار کدر) است:

مثال

hsla(9, 100%, 64%, 0)

hsla(9, 100%, 64%, 0.2)

hsla(9, 100%, 64%, 0.4)

hsla(9, 100%, 64%, 0.6)

hsla(9, 100%, 64%, 0.8)

hsla(9, 100%, 64%, 1)

خودتان امتحان کنید »

---

منبع

https://www.w3schools.com/html/html_colors.asp

جلسه بعدی ❯❮ جلسه قبلی

کامنت ها در HTML

جلسه بعدی ❯ ❮ جلسه قبلی

---

تگ های کامنت در HTML برای قرار دادن توضیح یا نوشته ای در سورس کد HTML مورد استفاده قرار می گیرند.

---

تگ های کامنت در HTML

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

<!-- Write your comments here -->

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

نکته: کامنت ها توسط مرورگرها نشان داده نمی شوند، اما کامنت ها می توانند در سورس کد سند HTML مفید باشند.

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

مثال

<!-- This is a comment -->

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

<!-- Remember to add more information here -->

کامنت ها همچنین برای اشکال زدایی سند HTML بسیار عالی هستند، زیرا شما می توانید قسمتی از کدهای سند HTML خود را برای یافتن خطا کامنت کنید:

مثال

<!-- Do not display this image at the moment
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->

---

منبع

https://www.w3schools.com/html/html_comments.asp

جلسه بعدی ❯ ❮ جلسه قبلی

عناصر کوتیشن در HTML

جلسه بعدی ❯ ❮ جلسه قبلی

---

کوتیشن

متن زیر یک نقل قول از وبسایت WWF است:

به مدت 50 سال WWF از آینده طبیعت محافظت کرده است. WWF در 100 کشور فعالیت می کند و همچنین توسط 1.2 میلیون عضو در ایالات متحده و بیش از 5 میلیون نفر در سراسر جهان حمایت می شود.

---

عنصر q برای نقل قول های کوتاه

عنصر <q> در HTML نقل قول های کوتاه را تعریف کی کند.

مرورگرها معمولا در اطراف محتوای عنصر <q> علامت کوتیشن قرار می دهند.

مثال

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

---

عنصر blockquote برای نقل قولها

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

مرورگرها معمولا برای محتوای عنصر <blockquote> تو رفتگی ایجاد می کنند.

مثال

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

---

عنصر abbr برای کلمات مخفف شده

عنصر <abbr> برای تعریف کلمات مخفف یا مختصر شده استفاده می شود.

با مقدار دهی صفت title برای عنصر <abbr> با قرار گرفتن نشانگر موس روی محتوای این عنصر مقدار صفت title در یک تول تیپ کوچک نشان داده می شود.

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

مثال

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

---

عنصر address برای اطلاعات تماس

عنصر <address> اظلاعات تماس (مالک/نویسنده) یک سند یا مقاله را تعریف می کند.

محتوای داخل عنصر <address> به طور معمول به صورت ایتالیک نمایش داده می شوند. همچنین بیشتر مرورگرها یک خط خالی ابتدا و انتهای محتوای این عنصر اضافه می کنند.

مثال

<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

---

عنصر cite برای عنوان یک اثر

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

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

مثال

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

---

عنصر bdo برای عوض کردن جهت نوشتن یک متن

از عنصر <bdo> برای عوض کردن جهت نوشتن یک متن در HTML استفاده می شود.

در متن زیر از این عنصر استفاده شده تا جهت نوشته شدن حروف متن عوض شود:

مثال

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

---

منبع

https://www.w3schools.com/html/html_quotation_elements.asp

جلسه بعدی ❯ ❮ جلسه قبلی

فرمت بندی متن در HTML

جلسه بعدی ❯ ❮ جلسه قبلی

---

چند نمونه متن فرمت بندی شده

This text is bold

This text is italic

This is _subscript and ^superscript

---

عناصر فرمت بندی متن در HTML

در فصل قبلی، شما درباره ی صفت استایل یاد گرفتید.

همچنین در HTML عناصر ویژه ای برای دادن معنی خاصی به متن تعریف شده اند.

HTML از عناصری مانند <b> (بولد کردن متن) و <i> (ایتالیک کردن متن) برای فرمت بندی متون استفاده می کند.

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

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

---

عناصر b و strong در HTML

عنصر <b> متن را بولد می کند، بدون این که از نظر معنایی اهمیت بیشتری به متن بدهد.

مثال

<b>This text is bold</b>

ولی عنصر <strong> متن قوی را تعریف میکند. از نظر ظاهری متن قرار گرفته داخل این عنصر هیچ تفاوتی با متن بولد شده ندارد ولی از نظر معنایی اهمیت بسیار بیشتری دارد.

مثال

<strong>This text is strong</strong>

---

عناصر i و em در HTML

عنصر <i> یک متن ایتالیک (کج) تعریف می کند، بدون اینکه از نظر معنایی اهمیت بیشتری به متن بدهد.

مثال

<i>This text is italic</i>

ولی عنصر <em> یک متن تاکید شده را تعریف میکند. از نظر ظاهری متن قرار گرفته داخل این عنصر هیچ تفاوتی با متن ایتالیک ندارد ولی از نظر معنایی اهمیت بسیار بیشتری دارد.

مثال

<em>This text is emphasized</em>

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

---

عنصر small در HTML

عنصر <small> یک متن کوچک را تعریف می کند:

مثال

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

---

عنصر mark در HTML

عنصر <mark> یک متن مارک یا هایلایت شده را تعریف می کند:

مثال

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

---

عنصر del در HTML

عنصر <del> برای مشخص کردن متون حذف شده استفاده می شود:

مثال

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

---

عنصر ins در HTML

عنصر <ins> یک متن اضافه شده را تعریف میکند:

مثال

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

---

عنصر sub در HTML

عنصر <sub> یک متن زیرنویس شده را تعریف می کند:

مثال

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

---

عنصر sup در HTML

عنصر <sup>یک متن بالانویس شده را تعریف می کند:

مثال

<p>This is ^{superscripted} text.</p>

---

منبع

https://www.w3schools.com/html/html_formatting.asp

جلسه بعدی ❯ ❮ جلسه قبلی

استایل ها در HTML

جلسه بعدی ❯ ❮ جلسه قبلی

---

مثال

I am Red

I am Blue

I am Big

---

صفت style در HTML

با صفت style می توان تنظیمات مربوط به اندازه، فونت، رنگ و ... یک عنصر را در HTML مقدار دهی کرد.

شما می توانید به این صورت از صفت style در کدهای HTML خود استفاده کنید:

<tagname style="property:value;">

Property یک ویژگی از جنس CSS و value یک مقدار از جنس CSS است

توجه: شما در آموزش های بعدی درباره ی CSS بیشتر یاد خواهید گرفت

---

ویژگی background-color

ویژگی background-color رنگ پس زمینه را برای یک عنصر HTML تعریف می کند.

در این مثال رنگ پس زمینه صفحه با رنگ powderblue مقدار دهی شده است:

مثال

<body style="background-color:powderblue;">

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

</body>

---

ویژگی Color

color رنگ متن یک عنصر HTML تعریف می کند:

مثال

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

---

ویژگی font-family

ویژگی font-family فونت یک عنصر HTML را تعریف می کند:

مثال

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

---

ویژگی font-size

ویژگی font-size اندازه متن یک عنصر HTML را تعریف می کند:

مثال

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

---

ویژگی text-align

ویژگی text-alignترازبندی یک عنصر HTML را تعریف می کند:

مثال

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

---

منبع

https://www.w3schools.com/html/html_styles.asp

جلسه بعدی ❯ ❮ جلسه قبلی

پاراگراف ها در HTML

جلسه بعدی ❯ ❮ جلسه قبلی

---

پاراگراف ها در HTML

عنصر <p> در HTML یک پاراگراف را تعریف می کند:

مثال

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

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

---

نحوه نمایش صفحات HTML

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

در HTML، شما نمی توانید با اضافه کردن فضاهای خالی یا خط های اضافی در کدهای HTML خروجی کدهایتان در مرورگر را تغییر دهید.

مرورگر فضاهای اضافی و خطوط اضافی را وقتی صفحه نمایش داده می شود حذف می کند:

مثال

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser
ignores it.
</p>

---

تگ پایان را فراموش نکنید

با این حال اگر تگ پایان را فراموش کنید بیشتر مرورگرها صفحه HTML را بدرستی نمایش خواهند داد:

مثال

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

مثال فوق در بیشتر مرورگرها کار خواهد کرد، اما نباید به آن تکیه کنید.

نکته: به کار نبردن تگ پایان ممکن است که نتایج غیر منتظره ای به همراه داشته باشد و یا سبب ارورهای متعدد شود.

---

رفتن به خط بعد در HTML

عنصر <br> در HTML باعث رفتن به خط بعد میشود.

شما می توانید زمانی از <br> استفاده کنید که میخواهید بدون شروع یک پاراگراف جدید به خط بعدی بروید:

مثال

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

تگ <br> یک تگ خالی (empty) است، که بدان معنی است که تگ پایانی ندارد.

---

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

در خروجی کد زیر شعرها در یک خط نمایش داده می شوند:

مثال

<p>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</p>

---

عنصر pre در HTML

عنصر <pre> در HTML متنی را که از پیش فرمت بندی شده تعریف می کند.

متن داخل عنصر <pre> با یک فونت پیشفرض (معمولا courier) نمایش داده میشود، و همچنین فضاها و خطوط خالی اضافه شده داخل این عنصر حفظ می شوند.

مثال

<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>

---

منبع

https://www.w3schools.com/html/html_paragraphs.asp

جلسه بعدی ❯ ❮ جلسه قبلی

عنوان ها در HTML

جلسه بعدی ❯ ❮ جلسه قبلی

---

عنوان ها (Headings)

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

---

عنوان ها (Headings) در HTML

عنوان ها با تگ های <h1> تا <h6> تعریف می شوند.

<h1> مهمترین عنوان و <h6> کم اهمیت ترین عنوان را تعریف میکند.

مثال

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

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

---

عنوان ها (Headings) با اهمیت هستند

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

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

از تگ <h1> برای نشان دادن مهم ترین عنوان ها استفاده میشود، به دنبال آن از تگ <h2>، و بعد از آن از <h3> و غیره برای نشان دادن عنوان های کم اهمیت تر استفاده میشود.

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

---

عنوان های بزرگتر

هر عنوان در HTML دارای اندازه پیش فرض است. با این حال، شما می توانید برای هر عنوان با صفت style با استفاده از ویژگی font-size در CSS اندازه مورد نظر خود را مشخص کنید.

مثال

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

---

خط افقی در HTML

تگ <hr> یک تغییر موضوع (thematic break) را در صفحه HTML نشان می دهد و اغلب به عنوان یک خط افقی نمایش داده می شود.

عنصر <hr> برای جدا کردن محتوا (یا تعریف یک تغییر) در یک صفحه HTML استفاده می شود:

مثال

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

---

عنصر head در HTML

عنصر <head> در HTML فضایی برای قرارگیری metadata ها است. metadata ها حاوی داده هایی درباره سند HTML ما هستند که نمایش داده نمی شوند، اما برای نمایش درست صفحات وبسایت لازم هستند.

عنصر <head> بین تگ <html> و <body> قرار می گیرد:

مثال

<!DOCTYPE html>
<html>

<head>
  <title>My First HTML</title>
  <meta charset="UTF-8">
</head>

<body>
.
.
.

نکته: metadata ها معمولا عنوان سند، کاراکتر ست ، استایل ها، اسکریپت ها و دیگر متا اطلاعات تعریف می کنند.

---

چطور کدهای منبع (source) یک صفحه HTML را مشاهده کنیم؟

آیا تا به حال یک صفحه وب را مشاهده کرده اید و از خود بپرسید که "این صفحه چطور درست شده است؟"

مشاهده کد منبع (source code) صفحه HTML:

برای مشاهده کد منبع (source code) صفحه HTML روی صفحه مورد نظر کلیک راست کرده و گزینه ی "view page source" (در Chrome) یا "view sorce" (در Edge)  و یا شبیه به اینها را در دیگر مرورگرها انتخاب کنید. پنجره ای که باز خواهد شد حاوی کدهای منبع HTML آن صفحه است.

بازبینی (inspect) کردن بر روی یک عنصر HTML:

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

---

منبع

https://www.w3schools.com/html/html_headings.asp

جلسه بعدی ❯ ❮ جلسه قبلی

صفات در HTML

جلسه بعدی ❯ ❮ جلسه قبلی

---

صفات (attributes) در HTML اطلاعات اضافی را برای عناصر ارائه می دهند. در این فصل از آموزش HTML به بررسی برخی از این صفات می پردازیم.

---

صفات در HTML

• تمام عناصر HTML می توانند دارای صفات باشند
• صفات اطلاعات اضافی را درباره یک عنصر فراهم می کندد
• صفات همیشه در تگ شروع قرار می گیرند
• صفات معمولا به صورت نام/مقدار تعریف می شوند، به این صورت: "name="value

---

صفت href

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

مثال

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

خودتان امتحان کنید »

در آموزش های بعدی درباره ای لینک ها و تگ <a> بیشتر یاد خواهید گرفت.

---

صفت src

عکس ها در HTML با تگ <img> تعریف می شوند.

نام فایل منبع تصویر در صفت src مشخص می شود:

مثال

<img src="img_girl.jpg">

خودتان امتحان کنید »

---

صفات عرض (width) و ارتفاع (height)

عکس ها در HTML همچنین دارای صفات width و height هستند، که عرض و ارتفاع تصاویر را مشخص می کند:

مثال

<img src="img_girl.jpg" width="500" height="600">

خودتان امتحان کنید »

صفات عرض و ارتفاع به صورت پیشفرض با واحد پیکسل مقدار دهی می شوند، بنابراین "width="500 به معنای عرض 500 پیکسل است.

شما درباره تصاویر در فصل های بعدی بیشتر یاد خواهید گرفت.

---

صفت alt

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

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

مثال

<img src="img_girl.jpg" alt="Girl with a jacket">

خودتان امتحان کنید »

صفت alt همچنین برای زمانی که تصویر ما قابل نمایش نباشد نیز مفیداست (مثلا وقتی که تصویر وجود نداشته باشد).

مثال

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

<img src="img_typo.jpg" alt="Girl with a jacket">

خودتان امتحان کنید »

---

صفت style

صفت style برای مشخص کردن ظاهر یک عنصر در مواردی همچون رنگ، فونت، اندازه و غیره استفاده می شود.

مثال

<p style="color:red">This is a paragraph.</p>

خودتان امتحان کنید »

---

صفت lang

زبان سند را میتوان در تگ <html> مشخص کرد.

زبان با صفت lang مشخص می شود.

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

<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>

دو حرف اول، زبان (en) را مشخص می کند. اگر گویش خاصی مد نظرتان است دو حرف دیگر اضافه کنید (us).

---

صفت title

 در اینجا صفت title به عنصر <p> اضافه شده است. مقدار صفت title وقتی که موس روی پاراگراف قرار بگیرد در یک تول تیپ (tooltip) کوچک نمایش داده می شود:

مثال

<p title="I'm a tooltip">
This is a paragraph.
</p>

خودتان امتحان کنید »

---

پیشنهاد ما: صفات را با حروف کوچک تایپ کنید

در HTML5 استفاده از حروف کوچک برای نوشتن نام صفات اجباری نیست.

برای مثال نوشتن تگ title به دو صورت title و TILTLE صحیح است.

W3C استفاده از حروف کوچک را توصیه می کند.

---

پیشنهاد ما: ارزش (value) صفات را داخل نقل قول ("") قرار دهید

در HTML5 اجباری به استفاده از  نقل قول ("") در اطراف ارزش (value) صفات وجود ندارد.

صفت href  که در مثال های بالا استفاده شده بود می تواند بدون نقل قول ("") نوشته شود:

بد

<a href=https://www.w3schools.com>

خودتان امتحان کنید »

خوب

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

خودتان امتحان کنید »

با این حال W3C پیشنهاد می کند که از نقل قول ("") استفاده کنید.

گاهی لازم است که از نقل قول ("") استفاده شود، مثلا زمانی که بین دو کلمه از ارزش یک صفت فضای خالی (space) وجود دارد. مثال زیر ارزش صفت title را به درستی نشان نمی دهد زیرا دارای یک فضای خالی (space) است.

مثال

<p title=About W3Schools>

خودتان امتحان کنید »

---

استفاده از کوتیشن تکی (' ') یا دو تایی (" ")؟

استفاده از کوتیشن دوتایی (" ") در اطراف مقدار صفات در HTML رایج تر است، اما کوتیشن تکی (' ') نیز می تواند مورد استفاده قرار گیرد.

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

<p title='John "ShotGun" Nelson'>

یا برعکس:

<p title="John 'ShotGun' Nelson">

خودتان امتحان کنید »

---

خلاصه ی فصل

• تمام عناصر HTML می توانند دارای صفات باشند
• صفت title محتوای تول تیپ (tooltip) را مشخص میکند
• صفت href آدرس لینک را مشخص می کند
• صفات width و height اندازه عکس را تعیین می کنند
• صفت alt متنی جایگزین را به جای عکس مشخص می کند
• برای نوشتن صفات استفاده از حروف کوچک توصیه می شود
• توضیه می شود که مقدار صفات را داخل کوتیشن قرار دهید.

---

منبع

https://www.w3schools.com/html/html_attributes.asp

جلسه بعدی ❯ ❮ جلسه قبلی