لرن HTML5



نوشتن HTML با استفاده از Notepad یا TextEdit

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

با این حال، برای یادگیری HTML ما یک ویرایشگر متن ساده مانند Notepad (PC) یا TextEdit (Mac) را توصیه میکنیم.

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

مراحل زیر را دنبال کنید تا اولین صفحه وب خود را با Notepad یا TextEdit ایجاد کنید.


مرحله 1: Notepad (PC) را باز کنید

در ویندوز 8 یا بالاتر:

پنجره ی جستجوی ویندوز را باز کنید. کلمه Notepad را تایپ کنید.

در ویندوز 7 یا پایین تر:

این مسیر را دنبال کنید: Start > Programs > Accessories > Notepad


مرحله 1: TextEdit (Mac) را باز کنید

این مسیر را دنبال کنید: Finder > Applications > TextEdit

همچنین برخی از تنظیمات را تغییر دهید تا برنامه را به درستی ذخیره کنید. برای اینکار در قسمتPreferences > Format، انتخاب کنید "Plain Text"

_


مرحله 2: نوشتن کدهای HTML

نوشتن یا کپی کردن کدهای HTML در Notepad

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

نوشتن کدهای HTML  در Notepad


مرحله 3: صفحه HTML خودتان را ذخیره کنید

برای ذخیره کردن فایل HTML در کامپیوتر خود در منو Notepad روی File کلیک کنید و از زیر منوی باز شده Save as را انتخاب کنید.

نام فایل مورد نظر را index.htm قرار داده و انکدینگ فایل را UTF-8 قرار دهید (که رمزگذاری توصیه شده برای فایل های HTML است).

ذخیر فایل HTML

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


مرحله 4: صفحه HTML خود را در مرورگر مشاهده کنید

فایل HTML ذخیره شده را در مرورگر مورد علاقه خود باز کنید (روی فایل دوبار کلیک کنید یا راست کلیک کنید) و گزینه Open with را انتخاب کنید.

مشاهده صفحه HTML  در مرورگر وب


ویرایشگر آنلاین W3Schools

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

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

مثال

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

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

</body>
</html>

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

روی دکمه "خودتان امتحان کنید" کلیک کنید تا ببینید که چگونه کار می کند.

 

 منبع: وبسایت W3Schools  


HTML چیست؟

HTML نشانه گذاری استاندارد برای ایجاد صفحات وب است.

  • HTML مخفف Hyper Text Markup Language می باشد.
  • HTML ساختار یک صفحه وب را توصیف می کند.
  • HTML شامل مجموعه ای از عناصر است.
  • عناصر HTML به مرورگر می گویند که چگونه محتوای نمایش داده شود.
  • عناصر HTML با برچسب ها نمایش داده می شوند.
  • تگ های HTML تکه های محتوا مانند عنوان، پاراگراف، جدول، و غیره را برچسب گذاری می کند.
  • مرورگرها تگ های HTML را نمایش نمی دهند، بلکه از آنها برای نمایش  محتویات صفحه استفاده می کنند.


 

یک سند HTML ساده

 

مثال

    
<!DOCTYPE html>

<html>
<head>
<title>Page Title</title>

</head>
<body>

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


</body>
</html>


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

 

توضیحات مثال بالا

  • اعلامیه <!DOCTYPE htmlیک سند HTML5 را تعریف میکند
  • عنصر <htmlعنصر ریشه برای یک صفحه HTML است
  • عنصر <headشامل متا اظلاعاتی در مورد سند است
  • عنصر <titleیک عنوان را برای سند مشخص میکند
  • عنصر <bodyدارای محتوای قابل مشاهده صفحه است
  • عنصر <h1مهمترین عنوان نوشته را تعریف می کند
  • عنصر <pپاراگراف را تعریف میکند

تگ های HTML

تگ های HTML نام عناصری هستند که توسط <> محصور شده اند:

<tagname>content goes here.</tagname>

  • تگ های در HTML معمولا به صورت جفت هستند. مانند: <pو </p>

  • تگ اول، تگ آغازین و تگ دوم تگ پایانی نامیده می شود

  • تگ پایانی همانند تگ آغازین نوشته می شود با این تفاوت که قبل tagname یک اسلش قرار می گیرد

 نکته: تگ آغازین با نام تگ باز و تگ پایانی با نام تگ بسته نیز نامیده میشوند


مرورگرهای وب

هدف یک مرورگر وب (Chrome، Edge، Firefox، Safari)، خواندن اسناد HTML و نمایش آنها است.

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

مرورگرهای وب


ساختار صفحه HTML

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

ساختار صفحه HTML

 توجه: فقط محتوای داخل بخش <body> (قسمت سفید در بالا) در مرورگر نمایش داده می شود.


 اعلامیه <!DOCTYPE>

اعلامیه <!DOCTYPE> نشان دهنده نوع سند است و به مرورگر کمک می کند تا صفحات وب به درستی نمایش داده شوند.

این تگ فقط یک بار در بالای صفحه (قبل از هر تگ HTML) قرار می گیرد.

اعلامیه <!DOCTYPE> حساس به حروف بزرگ نیست.

نمونه کد زیر نحوه استفاده از اعلامیه <!DOCTYPEبرای HTML5 را نشان می دهد:

<!DOCTYPE html> 


نسخه های HTML

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

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

 

 منبع: وبسایت W3Schools 



استایل دهی 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%;
}
{
  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">
خودتان امتحان کنید »


در 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)


تگ های کامنت در 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">
-->


کوتیشن

متن زیر یک نقل قول از وبسایت 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>


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

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 <sub>subscripted</sub> text.</p>

عنصر sup در HTML

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

مثال

<p>This is <sup>superscripted</sup> text.</p>


مثال

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>


پاراگراف ها در 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>


عنوان ها (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 در پنل باز شده تغییر دهید و نتیجه را به صورت آنی مشاهده کنید، البته توجه داشته باشید که این تغییرات فقط برای شما قابل مشاهده هستند و در صورت رفرش کردن صفحه از بین می روند.



صفات (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 آدرس لینک را مشخص می کند/li>
  • صفات width و height اندازه عکس را تعیین می کنند
  • صفت alt متنی جایگزین را به جای عکس مشخص می کند
  • برای نوشتن صفات استفاده از حروف کوچک توصیه می شود
  • توضیه می شود که ارزش صفات را داخل نقل قول قرار دهید.


استایل دهی 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%;
}
{
  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 می توان رنگ ها را با استفاده از نام های از پیش تعریف شده برای رنگ ها، مقادیر 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 استفاده کنید.

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



کوتیشن

متن زیر یک نقل قول از وبسایت 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



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

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 <sub>subscripted</sub> text.</p>

عنصر sup در HTML

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

مثال

<p>This is <sup>superscripted</sup> text.</p>

منبع

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



مثال

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

عنصر <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


آخرین ارسال ها

آخرین جستجو ها