css

: 17 شهریور 1397

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

اعلان <DOCTYPE!>

روی وب، صفحات متفاوت زیادی وجود دارد. اگر مرورگر بداند که صفحه مورد نظر از چه نوعی است، می تواند به درستی آنرا نمایش دهد.

همچنین نسخه های متفاوت زیادی از HTML وجود دارد، و اگر مرورگر نسخه دقیق HTML استفاده شده در صفحه را بداند، می تواند 100% درست آنرا نمایش دهد.

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

در این آموزش از HTML5 استفاده شده است.

مثال (DOCTYPE چیست؟)

یک سند HTML با یک اعلان که مشخص می کند، HTML5 در صفحه استفاده شده است:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

نسخه های HTML

Wiki

از اولین روزهای پیدایش وب، نسخه های زیادی از HTML وجود داشته است.

نسخه	سال
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

اعلان های متداول

Wiki

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

: 10 شهریور 1397

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

دستور اضافه کردن یک iframe

URL به مکان صفحه مجزای دیگری اشاره دارد.

تنظیم عرض و طول iframe

Wiki

خصوصیت height و width برای تعیین طول و عرض یک iframe استفاده می شود.

مقدار این خصوصیت ها به طور پیش فرض بر حسب پیکسل بیان می شود اما می توان آنرا به درصد نیز بیان کرد. (مثل 80 %)

مثال (iframe چیست؟)

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

حذف Border یا خطوط حاشیه iframe

Wiki

خصوصیت frameborder مشخص می کند آیا حاشیه نمایش داده شود یا نه.

با تنظیم آن به عدد صفر حاشیه برداشته می شود.

مثال (iframe چیست؟)

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

استفاده از iframe به عنوان مقصد یک لینک

Wiki

یک iframe می تواند به عنوان مقصد یک لینک استفاده شود.

خصوصیت target در یک لینک باید به خصوصیت name در عنصر iframe اشاره کند.

مثال (iframe چیست؟)

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

تگ iframe

تگ	توضیح
<iframe>	تعریف یک صفحه داخل صفحه جاری (frame)

: 17 شهریور 1397

یک URL همان آدرس وب می باشد.

Wiki

یک URL می تواند ترکیبی از حروف باشد مثل beyamooz.com یا می تواند یک IP یا Internet Protocol باشد. بیشتر مردم هنگام گشت زنی در اینترنت از نام وب سایت استفاده می کنند زیرا به خاطر سپردن یک نام آسان تر است تا یک IP مثل 192.68.20.50.

URL یا (Uniform Resource Locator)

Wiki

هنگامی که روی یک لینک در صفحه HTML کلیک می کنید، تگ <a> به آدرسی در شبکه جهانی وب اشاره می کند.

یک URL یا (Uniform Resource Locator) برای فراخوانی یک سند (یا داده هایی دیگر) در اینترنت استفاده می شود.

یک آدرس وب مثل http://beyamooz.com/index.php/design-page/html از الگوی زیر پیروی می کند:

scheme://host.domain:port/path/filename

توضیح

Wiki

scheme:نوع سرویس اینترنتی را تعریف می کند. رایج ترین نوع http می باشد.
host: میزبان دامنه (domain host) را تعریف می کند. ( host پیش فرض برای http حروف www می باشد.)
domain: نام دامنه اینترنی را تعریف می کند. مثل w3school.com
port: در اینجا port number در host تعریف می شود. ( port number به طور پیش فرض برای http عدد 80 می باشد.)
path: یک مسیر را در سرور تعریف می کند. (اگر حذف شود، سند باید در فولدر اصلی وب سایتذخیره شده باشد.)
file name: نام یک سند یا منبع را تعریف می کند.

Scheme های رایج

Wiki

در جدول زیر لیستی از Scheme های رایج ارائه شده است.

Scheme	مخفف	در چه صفحاتی این scheme استفاده می شود
http	HyperText Transfer Protocol (پروتکل انتقال ابر متن)	صفحات وب به صورت معمول با http شروع می شوند. در اینجا اطلاعات رمزگذاری نمی شوند.
https	Secure HyperText Transfer Protocol (پروتکل انتقال ابر متن به صورت ایمن)	تمام اطلاعات رمزگذاری شده اند و اطلاعات بصورت ایمن ارسال می شوند.
ftp	File Transfer Protocol (پروتکل انتقال فایل)	برای دانلود و آپلود فایل ها در وب سایت استفاده می شود.
file		فایلی روی کامپیوترتان

: 10 ارديبهشت 1403

آموزش HTML (اچ تی ام ال) - مقدمه HTML (اچ تی ام ال)

Wiki

با استفاده از این آموزش، می توانید وب سایتتان را خودتان طراحی کنید.

در این خود آموز، مطالبی را در مورد HTML (اچ تی ام ال) آموزش خواهید دید.

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

آموزش HTML (اچ تی ام ال) همراه با صدها مثال

Wiki

در این خودآموز، برای آموزش HTML از صدها مثال استفاده شده است.

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

مثال (مقدمه آموزش HTML)

<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

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

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

HTML چیست؟

Wiki

HTML یک زبان برای توصیف صفحات وب است.

HTML بترتیب سرنام واژگان Hyper Text Markup Language بحساب می آید. (زبان علامت گذاری ابر متن)
HTML یک زبان برنامه نویسی نیست بلکه زبان علامت گذاری است.
یک زبان علامت گذاری مجموعه ای از تگ ها می باشد.
HTML از تگ ها برای توصیف صفحات وب استفاده می کند.

آموزش تگ های HTML

Wiki

تگ های HTML، کلید واژه هایی هستند که داخل علامت کوچکتر بزرگتر هستند. مثل <HTML>
تگ های HTML معمولا به صورت جفت می آیند.
تگ اول همان تگ شروع می باشد و تگ دوم نیز همان تگ پایان است.
تگ های شروع و پایان، تگ باز و بسته نیز نامیده می شود.

سند HTML = صفحات وب

Wiki

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

هدف یک مرورگر وب (مانند internet explorer یا firefox) این است که سندهای HTML را خوانده و آنها را به صورت صفحات وب نمایش دهد. مرورگر، تگ های HTML را نمایش نمی دهد، اما از تگ های HTML استفاده می کند تا محتوای صفحه را تفسیر کند.

مثال:

<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

توضیح مثال:

متن بین <html> و <html/> صفحه وب را توضیح می دهد.
متن بین <body> و <body/> محتوای قابل نمایش صفحه است.
متن بین <h1> و <h1/> برای نمایش یک عنوان استفاده می شود.
متن بین <p> و <p/> برای نمایش یک پاراگراف استفاده می شود.

آموزش تصویری مطلب بالا (فیلم آموزش HTML)
درس شماره 1 (مقدمه آموزش HTML) زمان فیلم: 11:48
خرید و دانلود مستقیم فیلم آموزش HTML - حجم دانلود 766 مگابایت (کلیک کنید +)

: 10 شهریور 1397

CSS یا (Cascading Style Sheets) چگونگی نمایش عناصر HTML را مشخص می کند.

Wiki

به چگونگی نمایش متن ها نگاه کنید...!

این متن قرمز است.

رنگ این متن آبی است و نام فونت آن Times است.

اندازه این متن 30 پیکسل است.

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

مثال - خودتان امتحان کنید

استفاده از Styleها، داخل صفحه HTML
چگونه Styleها را در قسمت <head> صفحه اضافه کنیم.

لینکی که خط زیر ندارد
چگونه یک لینک بدون خط زیر (underline) بسازیم.

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

تعیین شکل نمایش عناصر HTML با CSS

Wiki

CSSهمراه با HTML4 معرفی شد تا یک روش بهتری برای Style دهی عناصر HTML ایجاد کند.

برای اعمال CSS بر روی تگهای HTML سه روش وجود دارد:

برگه های استایل خارجی یا External style sheet
برگه های استایل داخلی یا Internal style sheet
استایل درون تگی یا Inline style

روش پیشنهادی، گزینه اول یعنی برگه های استایل خارجی است.

برای کسب اطلاعات بیشتر درباره CSS می توانید به لینک روبرو مراجعه نمایید: آموزش CSS

استایل درون تگی - Inline Styles

Wiki

قرار دادن Styleها درون تگ HTML بسیاری از مزیت های CSS را با مخلوط کردن محتوا و چگونگی نمایش از بین می برد، از این روش به ندرت استفاده کنید.

طریقه استفاده به این صورت است که باید Style مورد نظرمان را در تگ مربوطه بیاوریم، مثال زیر نشان می دهد که چگونه رنگ و margin-left تگ <p> را تغییر داده ایم:

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

مثال: تنظیم رنگ پس زمینه عناصر HTML

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

مثال (استفاده از css در HTML)

<!DOCTYPE html>
<html>

<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>

</html>

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

خصوصیت background-color از خصوصیت قدیمی و منسوخ شده bgcolor ساخته شده است.

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

مثال: تنظیم رنگ و اندازه و فونت عناصر HTML

خصوصیات font-family , color , font-size به ترتیب اندازه، رنگ و فونت متن را تنظیم می کنند:

مثال (استفاده از css در HTML)

<!DOCTYPE html>
<html>

<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>

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

خصوصیات font-family , color , font-size از تگ قدیمی و منسوخ شده <font> ساخته شده اند.

مثال: ترازبندی متن

خصوصیت text-align در جهت محور X یک متن را ترازبندی می کند:

مثال (استفاده از css در HTML)

<!DOCTYPE html>
<html>

<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

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

خصوصیت text-align از تگ قدیمی و منسوخ شده <center> ساخته شده است.

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

برگه های استایل داخلی - Internal Style Sheet

Wiki

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

Styleهای داخلی در قسمت Head صفحه HTML و توسط تگ <style> مانند زیر معرفی می شوند.

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

برگه های استایل خارجی - External Style Sheet

Wiki

زمانی که Styleها در چندین صفحه مختلف به کار برده می شوند، استفاده از Style خارجی ایده آل خواهد بود. اینکار شما را قادر می سازد تا فقط با تغییر یک فایل، ظاهر و یا طرح بندی تمام صفحات پروژه تان را تغییر دهید.

هر صفحه HTML باید با استفاده از تگ <link> به فایل CSS خارجی متصل شود. تگ <link> باید در قسمت head صفحه قرار داده شود.

تگ های Style در HTML

تگ	توضیحات
<style>	برای تعریف اطلاعات طرح بندی یک سند html استفاده می شود. تگ <style> باید در قسمت head صفحه قرار داده شود.
<link />	هر صفحه HTML باید با استفاده از تگ <link> به فایل CSS خارجی متصل شود. تگ <link> باید در قسمت head صفحه قرار داده شود.

تگ ها و خصوصیات منسوخ شده

Wiki

در HTML4 چندین تگ و خصوصیت برای Styleدهی استفاده می شود که این تگ ها در نسخه جدید HTMLپشتیبانی نمی شود.

به همین منظور از استفاده عناصر و خصوصیات زیر اجتناب نمایید:

<font>
<center>
<strike>

color
bgcolor

: 10 شهریور 1397

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

Wiki

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

نام 147 رنگ همراه با مقدار HEX آنها در جدول زیر لیست شده است. (16 رنگ اصلی همراه با 130 رنگ ترکیبی)

توجه: نام 16 رنگ اصلی شامل: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

مرتب شده براساس نام رنگ

نام رنگ	HEX	رنگ
AliceBlue	#F0F8FF
AntiqueWhite	#FAEBD7
Aqua	#00FFFF
Aquamarine	#7FFFD4
Azure	#F0FFFF
Beige	#F5F5DC
Bisque	#FFE4C4
Black	#000000
BlanchedAlmond	#FFEBCD
Blue	#0000FF
BlueViolet	#8A2BE2
Brown	#A52A2A
BurlyWood	#DEB887
CadetBlue	#5F9EA0
Chartreuse	#7FFF00
Chocolate	#D2691E
Coral	#FF7F50
CornflowerBlue	#6495ED
Cornsilk	#FFF8DC
Crimson	#DC143C
Cyan	#00FFFF
DarkBlue	#00008B
DarkCyan	#008B8B
DarkGoldenRod	#B8860B
DarkGray	#A9A9A9
DarkGrey	#A9A9A9
DarkGreen	#006400
DarkKhaki	#BDB76B
DarkMagenta	#8B008B
DarkOliveGreen	#556B2F
Darkorange	#FF8C00
DarkOrchid	#9932CC
DarkRed	#8B0000
DarkSalmon	#E9967A
DarkSeaGreen	#8FBC8F
DarkSlateBlue	#483D8B
DarkSlateGray	#2F4F4F
DarkSlateGrey	#2F4F4F
DarkTurquoise	#00CED1
DarkViolet	#9400D3
DeepPink	#FF1493
DeepSkyBlue	#00BFFF
DimGray	#696969
DimGrey	#696969
DodgerBlue	#1E90FF
FireBrick	#B22222
FloralWhite	#FFFAF0
ForestGreen	#228B22
Fuchsia	#FF00FF
Gainsboro	#DCDCDC
GhostWhite	#F8F8FF
Gold	#FFD700
GoldenRod	#DAA520
Gray	#808080
Grey	#808080
Green	#008000
GreenYellow	#ADFF2F
HoneyDew	#F0FFF0
HotPink	#FF69B4
IndianRed	#CD5C5C
Indigo	#4B0082
Ivory	#FFFFF0
Khaki	#F0E68C
Lavender	#E6E6FA
LavenderBlush	#FFF0F5
LawnGreen	#7CFC00
LemonChiffon	#FFFACD
LightBlue	#ADD8E6
LightCoral	#F08080
LightCyan	#E0FFFF
LightGoldenRodYellow	#FAFAD2
LightGray	#D3D3D3
LightGrey	#D3D3D3
LightGreen	#90EE90
LightPink	#FFB6C1
LightSalmon	#FFA07A
LightSeaGreen	#20B2AA
LightSkyBlue	#87CEFA
LightSlateGray	#778899
LightSlateGrey	#778899
LightSteelBlue	#B0C4DE
LightYellow	#FFFFE0
Lime	#00FF00
LimeGreen	#32CD32
Linen	#FAF0E6
Magenta	#FF00FF
Maroon	#800000
MediumAquaMarine	#66CDAA
MediumBlue	#0000CD
MediumOrchid	#BA55D3
MediumPurple	#9370D8
MediumSeaGreen	#3CB371
MediumSlateBlue	#7B68EE
MediumSpringGreen	#00FA9A
MediumTurquoise	#48D1CC
MediumVioletRed	#C71585
MidnightBlue	#191970
MintCream	#F5FFFA
MistyRose	#FFE4E1
Moccasin	#FFE4B5
NavajoWhite	#FFDEAD
Navy	#000080
OldLace	#FDF5E6
Olive	#808000
OliveDrab	#6B8E23
Orange	#FFA500
OrangeRed	#FF4500
Orchid	#DA70D6
PaleGoldenRod	#EEE8AA
PaleGreen	#98FB98
PaleTurquoise	#AFEEEE
PaleVioletRed	#D87093
PapayaWhip	#FFEFD5
PeachPuff	#FFDAB9
Peru	#CD853F
Pink	#FFC0CB
Plum	#DDA0DD
PowderBlue	#B0E0E6
Purple	#800080
Red	#FF0000
RosyBrown	#BC8F8F
RoyalBlue	#4169E1
SaddleBrown	#8B4513
Salmon	#FA8072
SandyBrown	#F4A460
SeaGreen	#2E8B57
SeaShell	#FFF5EE
Sienna	#A0522D
Silver	#C0C0C0
SkyBlue	#87CEEB
SlateBlue	#6A5ACD
SlateGray	#708090
SlateGrey	#708090
Snow	#FFFAFA
SpringGreen	#00FF7F
SteelBlue	#4682B4
Tan	#D2B48C
Teal	#008080
Thistle	#D8BFD8
Tomato	#FF6347
Turquoise	#40E0D0
Violet	#EE82EE
Wheat	#F5DEB3
White	#FFFFFF
WhiteSmoke	#F5F5F5
Yellow	#FFFF00
YellowGreen	#9ACD32

: 15 شهریور 1397

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

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

Wiki

پاراگراف ها به وسیله تگ <p> تعریف می شوند.

مثال (پاراگراف ها در HTML)

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

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

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

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

Wiki

اغلب مرورگرها حتی اگر تگ پایان را هم نگذاریم صفحه را به درستی نمایش می دهند.

مثال (پاراگراف ها در HTML)

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

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

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

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

رفتن به خط جدید در HTML

Wiki

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

مثال (پاراگراف ها در HTML)

<p>This is<br />a para<br />graph with line breaks</p>

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

عنصر </ br> یک عنصر تهی در HTML است. این عنصر دارای تگ پایان نیست.

<br> یا </ br>

Wiki

در XHTML و XML عناصر بدون تگ پایان(تگ بسته) مجاز نمی باشند.

اگر چه <br>در تمام مرورگرها کار می کند، اما نوشتن </ br> در برنامه های XHTML و XML بهتر عمل می کند.

خروجی HTML - نکات مفید

Wiki

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

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

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

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

(این مثال بعضی از مشکلات فرمت دهی را در HTML نشان می دهد.)

مشکل نمایش اشعار در مرورگر

مثال (پاراگراف ها در HTML)

<p>شعر زیر، در مرورگر پشت سرهم و در یک خط نمایش داده خواهد شد</p>

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

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

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

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

مثال - خودتان امتحان کنید

HTML paragraphs
چگونه پاراگراف ها در مرورگر نشان داده می شود.

Line br eaks
رفتن به خط جدید در سندهای HTML.

Poem problems
بعضی مشکلات در فرمت دهی در HTML.

More paragraphs
رفتارهای پیش فرض در پاراگراف ها.

منبع تگ های HTML

منبع تگ های HTML حاوی اطلاعات اضافی در مورد عناصر HTML و خصوصیت های آن ها می باشد.

تگ	توضیح
<p>	یک پاراگراف را تعریف می کند.
<br />	خط جدیدی را وارد می کند.

: 10 شهریور 1397

مثال (تصاویر در HTML)

Norwegian Mountain Trip

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

مثال - خودتان امتحان کنید

Wiki

Insert images
نحوه درج تصویر در سند HTML.

Insert images from different locations
نحوه درج تصویر از پوشه ای دیگر یا از سروری دیگر.

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

تگ <img> و خصوصیت Src

Wiki

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

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

برای نمایش تصویر در صفحه وب، به خصوصیت src نیاز دارید. src مخفف کلمه source می باشد. مقدار این خصوصیت آدرس URL تصویری است که می خواهید نمایش داده شود.

فرم نوشتاری تگ img

URL اشاره دارد به مکانی که تصویر در آن ذخیره شده است. یک تصویر با نام boat.gif، در پوشه images در سایت beyamooz.com واقع شده که دارای URl به این صورت http://beyamooz.com/images/boat.gif می باشد.

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

خصوصیت ALT

Wiki

خصوصیت alt یک alternate text یا "متن جایگزین" را برای یک تصویر مشخص می کند، که اگر عکس نمایش داده نشود آن متن نمایش داده می شود.

ذکر خصوصیت alt الزامی است و بدون آن صفحه وب، استاندارد نخواهد بود.

اگر کاربری به دلایلی (مثل کند بودن اتصال، خطایی در خصوصیت scr رخ دهد یا اگر کاربر از یک screen reader استفاده کند) نتواند عکس را مشاهده کند، خصوصیت alt اطلاعاتی در مورد عکس ارائه می دهد.

تنظیم طول و عرض یک عکس

Wiki

خصوصیت height و width برای مشخص کردن طول و عرض یک عکس استفاده می شود.

مقدار این خصوصیت ها به طور پیش فرض بر اساس پیکسل مشخص می شوند.

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

نکات اساسی و مفید

Wiki

نکته: اگر یک فایل HTML حاوی ده تصویر باشد، یازده فایل (شامل 10 فایل تصویر و فایل HTML صفحه) برای نمایش صحیح صفحه نیاز می باشد. بارگذاری تصاویر زمان بر است، بنابراین پیشنهاد ما این است که: از تصاویر، با دقت استفاده کنید.

نکته: هنگامی که یک صفحه وب بارگذاری می شود، این مرورگر است که در آن لحظه، تصویر را از سرور دریافت می کند و آن را در صفحه درج می کند. بنابراین، مطمئن شوید که تصاویر به طور دقیق در همان نقطه نسبت به صفحه وب قرار گرفته باشند، در غیر این صورت کاربر عکس را نمی بیند و به جای آن یک آیکن با علامت ضربدر می بیند که نشان دهنده آن است که عکسی برای نمایش پیدا نشده است.

مثال - خودتان امتحان کنید

Wiki

Aligning images
نحوه تراز کردن تصویر در یک متن.

Let the image float
چگونه اجازه دهیم یک تصویر در سمت چپ یا راست یک پارگراف قرار گیرد.

Make a hyperlink of an image
چگونه از یک تصویر به عنوان لینک استفاده کنیم.

Create an image map
چگونه یک image map با ناحیه بندی متفاوت ایجاد کنیم که با کلیک روی هر ناحیه یک لینک اجرا شود.

تگ های تصویر

Tag	Description
<img />	تعریف یک تصویر
<map>	تعریف یک image map
<area />	تعریف ناحیه ای به صورت لینک در یک image-map

: 10 شهریور 1397

جداول در HTML

کالری	نام میوه
44%	سیب
23%	موز
13%	پرتقال
10%	دیگر موارد

مثال - خودتان امتحان کنید

Wiki

Tables
نحوه ایجاد جداول در سند HTML.

Table borders
چگونه لبه های جدول را تنظیم کنیم.

(مثال های بیشتر را می توانید در پایین صفحه ببینید.)

جداول در HTML

Wiki

جداول به وسیله تگ <table> تعریف می شوند.

یک جدول حاوی سطرهایی می باشد (که با تگ <tr> مشخص می شوند) و هر سطر شامل تعدادی سلول است (که با تگ <td> مشخص می شوند)

td مخفف "table data" است و حاوی داده های سلول ها می باشد. تگ <td> می تواند حاوی متن، لینک، تصویر، لیست ها، فرم ها، جداول دیگر و غیره باشد.

کد HTML بالا چگونه در یک مرورگر دیده می شود:

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

خصوصیت Border

Wiki

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

برای نمایش لبه ها باید خصوصیت Border را تنظیم کنیم.

مثال (جداول در HTML)

<table border="1" style="width:300px">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

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

	توجه داشته باشید که اگر بخواهید طبق استاندارهای HTML پیش بروید نباید از ویژگی border استفاده کنید. برای تنظیم لبه ها بهتر است از CSSها استفاده کنید.

با استفاده از خصوصیت border در CSS می توانید لبه ها را تنظیم نمایید:

مثال (جداول در HTML)

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

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

تبدیل لبه های دو خطی به یک خطی

Wiki

با استفاده از خصوصیت border-collapse در CSS می توانید، لبه های دوخطی جدول را به لبه های یک خطی تبدیل کنید:

مثال (جداول در HTML)

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

تنظیم فاصله ی محتوای سلول ها از لبه

Wiki

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

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

مثال (جداول در HTML)

th,td
{
padding:15px;
}

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

تنظیم فاصله سلول ها از یکدیگر

Wiki

با استفاده از خصوصیت border-spacing در CSS می توانید فاصله سلول ها از یکدیگر را تنظیم کنید.

مثال (جداول در HTML)

table
{
border-spacing:5px;
}

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

عنوان جدول (Header)

Wiki

اطلاعات سرتیتر در یک جدول به وسیله تگ <th> تعریف می شود.

بیشتر مرورگرها متن را در عنصر <th> به صورت برجسته (bold) و وسط چین نمایش می دهند.

مثال (جداول در HTML)

<table style="width:300px">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

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

با استفاده از خصوصیت text-align در CSS، می توانیم سرتیترهای جدول بالا را در سمت چپ تنظیم کنیم:

مثال (جداول در HTML)

th
{
text-align:left;
}

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

مثال بیشتر - خودتان امتحان کنید

Wiki

Tables without borders
چگونه جدولی بدون خطوط حاشیه (Border) ایجاد کنیم.

Table headers
نحوه ایجاد سرتیترهای جدول.

Table with a caption
نحوه اضافه کردن عنوان به یک جدول.

Table cells that span more than one row/column
چگونگی تعریف سلول های جدول که بیش از یک سطر یا بیش از یک ستون را شامل می شوند.

Tags inside a table
نحوه نمایش عناصر درون عناصر دیگر.

Cell padding
چگونه از cellpadding برای ایجاد فاصله بیشتر بین محتوای سلول با حاشیه سلول استفاده کنیم.

Cell spacing
چگونه از cellspacing برای افزایش فاصله بین سلول ها استفاده کنیم.

The frame attribute
چگونه از خصوصیت "frame" برای کنترل حاشیه های دور جدول استفاده کنیم.

تگ های جدول در HTML

Tag	توضیحات
<table>	تعریف جدول
<th>	تعریف عنوان جدول (table header)
<tr>	تعریف سطر جدول (table row)
<td>	تعریف سلول جدول (table data)
<caption>	تعریف تیتر جدول (table caption)
<colgroup>	برای فرمت دهی یک یا تعدادی از ستون ها کاربرد دارد
<col>	برای فرمت دهی یک یا تعدادی از ستون ها کاربرد دارد
<thead>	عناوین ستون های یک جدول (header) را گروه بندی می کند
<tbody>	محتویات بدنه یک جدول را گروه بندی می کند
<tfoot>	محتویات انتهای ستون های یک جدول (footer) را گروه بندی می کند

: 10 شهریور 1397

چکیده مطالب html در یک نگاه

Wiki

خلاصه ای از مطالب ارائه شده در مورد HTML در زیر ارائه شده است. آنرا چاپ کنید، تا کنید و در مکانی امن قرار دهید.

تگ های اصلی یک سند HTML

<!DOCTYPE html>
<html>
<head>
<title>Title of document goes here</title>
</head>
<body>
Visible text goes here...
</body>
</html>

تگ عنوان در HTML

Wiki

<h1>Largest Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>

تگ های متن در HTML

Wiki

<p>This is a paragraph</p>
<br /> (line break)
<hr /> (horizontal rule)
<pre>This text is preformatted</pre>

تگ های فرمت بندی متن در HTML

Wiki

<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>
<b>This text is bold</b>
<i>This text is italic</i>

تگ لینک در HTML

Wiki

Ordinary link:
<a href="http://www.example.com/">Link-text goes here</a>
Image-link:
<a href="http://www.example.com/"><img src="/URL" alt="Alternate Text" /></a>
Mailto link:
<a href="mailto:این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید">Send e-mail</a>
Bookmark:
<a name="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a>

تگ لیست های نامرتب در HTML

Wiki

تگ لیست های مرتب در HTML

Wiki

<ol>
<li>First item</li>
<li>Second item</li>
</ol>

تگ لیست های تعریفی در HTML

Wiki

<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>

تگ جدول در HTML

Wiki

<table border="1">
<tr>
    <th>Tableheader</th>
    <th>Tableheader</th>
</tr>
<tr>
    <td>sometext</td>
    <td>sometext</td>
</tr>
</table>

تگ تصویر در HTML

Wiki

تگ Styles در HTML

Wiki

تگ iframe در HTML (صفحه ای داخل صفحه جاری)

Wiki

تگ فرم در HTML (ارسال اطلاعات به سرور)

Wiki

<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="email" size="40" maxlength="50" />
<input type="password" />
<input type="checkbox" checked="checked" />
<input type="radio" checked="checked" />
<input type="submit" value="Send" />
<input type="reset" />
<input type="hidden" />

<select>
    <option>Apples</option>
    <option selected="selected">Bananas</option>
    <option>Cherries</option>
</select>

  <textarea name="comment" rows="60" cols="20"></textarea>
</form>

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

Wiki

< is the same as <
> is the same as >
© is the same as ©

: 15 شهریور 1397

خصوصیت ها اطلاعات بیشتری در مورد عناصر HTML می دهند.

خصوصیت ها در HTML

Wiki

تمام عناصر در HTML دارای خصوصیت هستند.
خصوصیت ها اطلاعات بیشتری در مورد یک عنصر می دهند.
خصوصیت ها همیشه در تگ شروع نوشته می شوند.
خصوصیت ها به صورت روبرو نوشته می شوند: ("مقدار"=نام خصوصیت)

مثال:

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

مثال (خصوصیت ها در HTML)

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

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

Wiki

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

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

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

مثل: 'name='John "ShotGun" Nelson

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

Wiki

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

اما کنسرسیوم World Wide Web یا (w3c) حالت کوچک حروف را برای نام و مقدار خصوصیت ها در HTML 4 توصیه می کند.

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

در زیر لیستی از بعضی خصوصیت ها که برای عناصر زیادی در HTML استاندارد هستند ارائه شده است:

خصوصیت	مقدار	توضیحات
class	نام class	یک class برای عنصر مشخص می کند.
id	id	id منحصر به فردی را برای عنصر مشخص می کند.
style	تعریف style	یک style درون تگی برای عنصر مشخص می کند.
title	متنی که در tooltip نمایش داده می شود	اطلاعات اضافه ای را برای یک عنصر مشخص می کند (به صورت یک tool tip نشان داده می شود).

: 17 شهریور 1397

خلاصه HTML

Wiki

این خود آموز به شما نحوه استفاده از HTML را برای ایجاد وب سایتتان آموزش داده است.

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

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

حال که HTML را آموختید، قدم بعد چیست؟

Wiki

1- CSS

CSS یا (Cascading Style Sheets) چگونگی نمایش عناصر HTML را مشخص می کند.

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

برای یادگیری نحوه ایجاد style sheet ها، به آموزش CSS سری بزنید.

2- JavaScript

JavaScript می تواند وب سایت شما را پویاتر بسازد.

یک وب سایت ایستا هنگامی جذاب است که بخواهید تنها اطلاعات خام را نشان دهید اما یک وب سایت داینامیک می تواند به وقایع واکنش نشان دهد و با کاربران تعامل داشته باشد.

JavaScript محبوب ترین زبان اسکریپت نویسی تحت وب است و با عمده مرورگرها کار می کند.

اگر می خواهید در مورد JavaScript بیشتر بدانید به JS HOME مراجعه کنید.

: 17 شهریور 1397

رمزنگاری URL، کاراکترها را به فرمتی تبدیل می کند که بتواند بر روی اینترنت مخابره شود.

URL Encoding (رمزنگاری URL)

Wiki

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

از آنجایی که URLها اغلب حاوی کاراکترهایی خارج از مجموعه ASCII هستند، باید به فرمت ASCII معتبری تبدیل شوند.

برای رمزنگاری URL، کاراکترهایی که خارج از مجموعه ASCII هستند، با یک علامت % به همراه دو رقم در مبنای هگزا دسیمال جایگزین می شوند.

URLها نمی توانند حاوی space باشند. به طور معمول space را با علامت "+" جایگزین می کنند.

مثال - خودتان امتحان کنید

Wiki

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

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

مثال URL Encoding

Wiki

Character	URL-encoding
€	%80
£	%A3
©	%A9
®	%AE
À	%C0
Á	%C1
Â	%C2
Ã	%C3
Ä	%C4
Å	%C5

: 10 شهریور 1397

رنگ ها با ترکیب نورهای قرمز، آبی و سبز نمایش داده می شوند.

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

Wiki

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

کمترین مقداری که می توان به یک منبع نوری داد صفر (در مبنای هگزا دسیمال: 00 ) و بیشترین مقدار255 (در مبنای هگزا:FF) می باشد.

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

Color Values

Color	Color HEX	Color RGB
	#000000	rgb(0,0,0)
	#FF0000	rgb(255,0,0)
	#00FF00	rgb(0,255,0)
	#0000FF	rgb(0,0,255)
	#FFFF00	rgb(255,255,0)
	#00FFFF	rgb(0,255,255)
	#FF00FF	rgb(255,0,255)
	#C0C0C0	rgb(192,192,192)
	#FFFFFF	rgb(255,255,255)

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

شانزده میلیون رنگ مختلف

Wiki

ترکیب قرمز، سبز و آبی با مقادیر صفر تا 255، بیش از شانزده میلیون رنگ مختلف ارائه می دهد. (256*256*256)

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

Red Light	Color HEX	Color RGB
	#000000	rgb(0,0,0)
	#080000	rgb(8,0,0)
	#100000	rgb(16,0,0)
	#180000	rgb(24,0,0)
	#200000	rgb(32,0,0)
	#280000	rgb(40,0,0)
	#300000	rgb(48,0,0)
	#380000	rgb(56,0,0)
	#400000	rgb(64,0,0)
	#480000	rgb(72,0,0)
	#500000	rgb(80,0,0)
	#580000	rgb(88,0,0)
	#600000	rgb(96,0,0)
	#680000	rgb(104,0,0)
	#700000	rgb(112,0,0)
	#780000	rgb(120,0,0)
	#800000	rgb(128,0,0)
	#880000	rgb(136,0,0)
	#900000	rgb(144,0,0)
	#980000	rgb(152,0,0)
	#A00000	rgb(160,0,0)
	#A80000	rgb(168,0,0)
	#B00000	rgb(176,0,0)
	#B80000	rgb(184,0,0)
	#C00000	rgb(192,0,0)
	#C80000	rgb(200,0,0)
	#D00000	rgb(208,0,0)
	#D80000	rgb(216,0,0)
	#E00000	rgb(224,0,0)
	#E80000	rgb(232,0,0)
	#F00000	rgb(240,0,0)
	#F80000	rgb(248,0,0)
	#FF0000	rgb(255,0,0)

سایه های خاکستری

Wiki

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

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

Gray Shades	Color HEX	Color RGB
	#000000	rgb(0,0,0)
	#080808	rgb(8,8,8)
	#101010	rgb(16,16,16)
	#181818	rgb(24,24,24)
	#202020	rgb(32,32,32)
	#282828	rgb(40,40,40)
	#303030	rgb(48,48,48)
	#383838	rgb(56,56,56)
	#404040	rgb(64,64,64)
	#484848	rgb(72,72,72)
	#505050	rgb(80,80,80)
	#585858	rgb(88,88,88)
	#606060	rgb(96,96,96)
	#686868	rgb(104,104,104)
	#707070	rgb(112,112,112)
	#787878	rgb(120,120,120)
	#808080	rgb(128,128,128)
	#888888	rgb(136,136,136)
	#909090	rgb(144,144,144)
	#989898	rgb(152,152,152)
	#A0A0A0	rgb(160,160,160)
	#A8A8A8	rgb(168,168,168)
	#B0B0B0	rgb(176,176,176)
	#B8B8B8	rgb(184,184,184)
	#C0C0C0	rgb(192,192,192)
	#C8C8C8	rgb(200,200,200)
	#D0D0D0	rgb(208,208,208)
	#D8D8D8	rgb(216,216,216)
	#E0E0E0	rgb(224,224,224)
	#E8E8E8	rgb(232,232,232)
	#F0F0F0	rgb(240,240,240)
	#F8F8F8	rgb(248,248,248)
	#FFFFFF	rgb(255,255,255)

رنگ های امن در وب

Wiki

سال ها پیش، هنگامی که کامپیوتر ها حداکثر 256 رنگ مختلف را پشتیبانی می کردند، لیستی از 216 رنگ مختلف به عنوان یک استاندارد وب پیشنهاد شد و 40 رنگ به عنوان رنگ های سیستمی رزور شد.

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

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

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

: 10 شهریور 1397

صفحه بندی در وب، برای اینکه سایت شما جذاب به نظر برسد، بسیار مهم است.

پس صفحه وبتان را با دقت طراحی نمایید.

مثال - خودتان امتحان کنید

Web page layout using <div> elements
نحوه صفحه بندی با استفاده از عناصر <div>.

Web page layout using <table> elements
نحوه صفحه بندی با استفاده از عناصر <table>.

صفحه بندی وب سایت ها

Wiki

بیشتر وب سایت ها محتویات خود را در چندین ستون قرار می دهند (به فرمت مجله ها یا روزنامه ها)

با استفاده از عناصر <div> یا <table> می توان حالت چند ستونی را ایجاد نمود.

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

صفحه بندی با استفاده از عناصر <div>

Wiki

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

توجه: CSS برای چیدمان عناصر یا ایجاد پس زمینه یا نمای رنگی برای صفحات استفاده می شود.

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

مثال (صفحه بندی در HTML)

<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © beyamooz.com</div>

</div>

</body>
</html>

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

کد HTML بالا نتیجه زیر را ایجاد خواهد کرد:

Main Title of Web Page

Menu
HTML
CSS
JavaScript

Content goes here

مثال - خودتان امتحان کنید

Web page layout using <div> elements with 3 columns
در این مثال، نحوه صفحه بندی سه ستونه نشان داده شده است.

صفحه بندی با استفاده از جداول

Wiki

راه ساده ایجاد یک صفحه بندی، استفاده از تگ <table> می باشد.

حالت چند ستونی به وسیله عناصر <div> یا <table> ایجاد می شود. CSS برای تعیین مکان عناصر یا ایجاد پس زمینه یا نمایی رنگی برای صفحات استفاده می شود.

	استفاده از جداول برای حالت چند ستونی، کاربرد درستی از عنصر <table> نمی باشد. هدف از عنصر <table> نمایش داده ها در قالب جدول است.

در مثال زیر، از یک جدول با سه سطر و دو ستون استفاده شده است. با استفاده از خصوصیت colspan سلول های سطرهای اول و آخر با هم ادغام شده اند.

مثال (صفحه بندی در HTML)

<!DOCTYPE html>
<html>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>

<tr valign="top">
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</td>
</tr>
</table>

</body>
</html>

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

کد بالا نتیجه زیر را ایجاد می کند.

Main Title of Web Page
Menu HTML CSS JavaScript	Content goes here
Copyright © W3Schools.com

نکات مهم

Wiki

نکته: بزرگترین مزیت استفاده از CSS این است که اگر کد CSS را در یک style sheet بیرونی قرار دهید سایت شما خیلی راحت تر حفظ می شود. شما می توانید صفحه بندی کل وب سایتتان را با ویرایش یک فایل تغییر دهید.

برای کسب اطلاعات بیشتر در مورد CSS به لینک روبرو مراجعه فرمایید: آموزش CSS-معرفی سی اس اس

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

تگ های صفحه بندی در HTML

تگ	توضیح
<div>	تعریف یک ظرف برای دیگر عناصر (تگ div یک عنصر Block است)
<span>	تعریف یک ظرف برای دیگر عناصر (تگ span یک عنصر Inline است)

: 10 شهریور 1397

عناصر HTML را می توانید به وسیله تگ های <div> و یا <span> گروه بندی نمایید.

عناصر Block

Wiki

یک عنصر Block عنصری است که تمام طول یک سطر را اشغال می کند و قبل و بعد از آن یک سطر وجود دارد.

مثال برای عناصر Block:

<h1>
<p>
<div>
<table>

عناصر Inline

Wiki

یک عنصر Inline تنها به اندازه ای که نیاز دارد، عرض یک سطر را اشغال می کند، و هیچ اجباری در اشغال کل یک سطر وجود ندارد.

مثال برای عناصر inline:

<span>
<a>
<img>
<td>

عنصر <div>

Wiki

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

عنصر <div> معنی خاصی ندارد. به جز این، به دلیل اینکه یک عنصر block می باشد، مرورگر یک خط قبل و بعد از آن نمایش می دهد.

هنگامی که با CSS استفاده می شود، عنصر <div> می تواند برای تنظیم خصوصیت style برای بلاک هایی با محتوای زیاد استفاده شود.

دیگر استفاده رایج از عنصر <div> صفحه بندی سند می باشد. استفاده از جدول برای صفحه بندی دیگر قدیمی شده است. استفاده از جدول ها برای این منظور روش مناسبی نمی باشد. هدف از عنصر <table> نمایش داده ها به صورت جدولی می باشد.

نحوه صفحه بندی با استفاده از عناصر <div>

توضیح مثال بالا: آموزش HTML-صفحه بندی

عنصر <span>

Wiki

عنصر <span> یک عنصر درون خطی (inline) است که می تواند به عنوان ظرفی برای متن استفاده شود.

عنصر <span> معنی خاصی ندارد.

هنگامی که با CSS استفاده می شود، عنصر <span> می تواند برای تنظیم خصوصیت style برای بخش های متنی شکل، استفاده شود.

استفاده از عنصر <span> برای متمایز کردن رنگ قسمتی از متن

تگ های گروه بندی

تگ	توضیح
<div>	تعریف یک ظرف برای دیگر عناصر (تگ div یک عنصر Block است)
<span>	تعریف یک ظرف برای دیگر عناصر (تگ span یک عنصر Inline است)

: 18 مهر 1397

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

در فصل های بعد آنها را خواهید آموخت.

عنوان ها (Heading)

Wiki

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

مثال (عناصر پایه ای در HTML)

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

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

پاراگراف (Paragraph)

Wiki

پارگراف ها در HTML به وسیله تگ <p> تعریف می شوند.

مثال (عناصر پایه ای در HTML)

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

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

لینک ها (Link)

Wiki

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

مثال (عناصر پایه ای در HTML)

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

توجه: آدرس لینک، در خصوصیت href مشخص می شود.

(در فصل های بعدی این خودآموز راجع به خصوصیت های عناصر، بیشتر خواهید آموخت.)

تصاویر (Image)

Wiki

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

مثال (عناصر پایه ای در HTML)

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

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

آموزش تصویری مطلب بالا (فیلم آموزش HTML)
درس شماره 3 (عناصر پایه ای در HTML) زمان فیلم: 08:00
خرید و دانلود مستقیم فیلم آموزش HTML - حجم دانلود 766 مگابایت (کلیک کنید +)

: 15 شهریور 1397

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

عناصر (Element)

Wiki

یک عنصر در HTML، هر چیزی از تگ شروع تا تگ پایان می باشد:

تگ شروع*	محتوای عنصر	تگ پایان*
<p>	This is a paragraph	</p>
<a href="/default.htm" >	This is a link	</a>
<br />

*تگ شروع را اغلب تگ باز و تگ پایان را اغلب تگ بسته می نامند.

نحوه نوشتن یک عنصر در HTML

Wiki

یک عنصر با یک تگ شروع (تگ باز) آغاز می شود.
یک عنصر به یک تگ پایان (تگ بسته) ختم می شود.
محتوای یک عنصر نوشته های بین تگ شروع و پایان می باشد.
بعضی از عناصر در HTML تهی هستند.
عناصر تهی در همان تگ شروع بسته می شود.
بیشتر عناصر HTML می توانند دارای خصوصیت هایی باشند.

توجه: در آموزش بعدی در مورد خصوصیت های عناصر، بیشتر توضیح می دهیم.

عناصر تو در تو در HTML

Wiki

بیشتر عناصر HTML می توانند به صورت تو در تو باشند. (بدین معنی که محتوای آنها می تواند شامل دیگر عناصر HTML نیز باشد)

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

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

Wiki

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

مثال بالا شامل سه عنصر زیر می باشد:

1- عنصر <p>

<p>This is my first paragraph.</p>

عنصر <p> یک پاراگراف را در سند HTML تعریف می کند.
این عنصر حاوی تگ شروع <p> و تگ پایان <p/> می باشد.
محتوای این عنصر "This is my first paragraph" می باشد.

2- عنصر <body>

<body>
<p>This is my first paragraph.</p>
</body>

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

محتوای این عنصر حاوی یک عنصر دیگر (عنصر p) می باشد.

3- عنصر <html>

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

عنصر <html> تمام سند html را توصیف می کند.

این عنصر دارای تگ شروع <html> و تگ پایان <html/> می باشد.

محتوای این عنصر حاوی یک عنصر دیگر (عنصر body که خود حاوی عنصر <p> است) می باشد.

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

Wiki

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

<p>This is a paragraph
<p>This is a paragraph

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

هرگز به این مسئله که تگ بسته اختیاری است استناد نکنید. عناصر زیادی هستند که اگر تگ پایان را در آنها ننویسید خطا می دهند یا نتایج نادرستی می دهند.

عناصر تهی

Wiki

عناصری که قسمت محتوای آنها خالی است را عناصر تهی می نامیم.

عنصر <br> یک عنصر تهی و بدون تگ بسته است (تگ <br> یک خط را تعریف می کند.)

نکته: در XHTML تمام عناصر باید بسته شوند. اضافه کردن یک اسلش درون تگ شروع، مثل </br>، راه مناسبی برای بستن عناصر تهی در XHTML و XML می باشد.

نکته: تگ ها را با حروف کوچک بنویسید

Wiki

تگ های HTML حساس به کوچکی و بزرگی حروف نیستند: <P> با <p> یکسان است. بیشتر وب سایت ها تگ ها را با حروف بزرگ می نویسند.

: 17 شهریور 1397

مثال - خودتان امتحان کنید

Wiki

The title of a document
تگ <title> عنوان یک سند را تعریف می کند.

One target for all links
نحوه استفاده از تگ <base> برای اینکه معین کنیم تمام لینک های یک صفحه در یک پنجره جدید باز شوند.

Document description
از عنصر <meta> برای توصیف سند استفاده کنید.

Document keywords
از عنصر <meta> برای تعریف کلمات کلیدی سند استفاده کنید.

Redirect a user
چگونه یک کاربر را به آدرس وب جدیدی redirect کنیم (تغییر مسیر دهیم)

عنصر <head> در HTML

Wiki

عنصر <head> ظرفی برای تمام عناصر اصلی HTML می باشد. عناصر موجود در تگ <head> می توانند شامل script ها باشد، می تواند مرورگر را به مکانی هدایت کند که style sheet ها رابیابد، اطلاعات meta را ارائه کند و غیره.

تگ های <title> و <base> و <link> و <meta> و <script> و <style> می توانند به قسمت head اضافه شوند.

عنصر <title> در HTML

Wiki

تگ <title> عنوان سند را تعریف می کند.

عنصر title در تمام سندهای HTML/XHTML ضروری است و نیاز است که همیشه نوشته شود.

عنصر title:

یک عنوان را در نوار ابزار مرورگر تعریف می کند.
هنگامی که می خواهید صفحه ای را به لیست favorite اضافه نمایید از محتویات عنصر title برای این منظور استفاده می شود.
نتایج موتور های جستجو بر اساس محتویات عنصر title گزارش می شود.

یک سند ساده HTML

Wiki

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

عنصر <base> در HTML

Wiki

تگ <base> آدرس پیش فرض یا یک target پیش فرض را برای تمام لینک های یک صفحه مشخص می کند.

عنصر <link> در HTML

Wiki

تگ <link> ارتباط بین سند html و منبعی خارجی را تعریف می کند.

تگ <link> اغلب برای لینک به cssها استفاده می شود.

عنصر <style> در HTML

Wiki

تگ <style> برای تعریف اطلاعات نمایشی برای سند HTML استفاده می شود.

درون عنصر style، مشخص می کنید که عناصر HTML چگونه باید در مرورگر نمایش داده شوند.

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

عنصر <meta> در HTML

Wiki

عنصر <meta> اطلاعاتی در مورد سند HTML فراهم می کند. این داده ها در صفحه، نمایش داده نمی شوند اما توسط ماشین قابل خواندن هستند.

عنصر <meta> نوعاً برای مشخص کردن نویسنده، کلمات کلیدی، آخرین تغییرات، توضیحاتی در مورد صفحه و دیگر داده های Meta استفاده می شوند.

تگ <meta> همیشه درون عنصر head می باشد.

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

کلمات کلیدی برای موتورهای جستجو

Wiki

بعضی موتورهای جستجو از خصوصیت name و content عنصر meta برای شاخص گذاری صفحات استفاده می کنند.

مثال1: توضیحی از محتویات یک صفحه

مثال2: مشخص کردن کلمات کلیدی برای موتورهای جستجو

مثال3: مشخص کردن نویسنده یک صفحه

مثال4: Refresh کردن صفحه هر 30 ثانیه یکبار

عنصر <script> در HTML

Wiki

تگ <script> برای برنامه نویسی سمت کاربر استفاده می شود، مثل JavaScript.

عنصر script در فصل بعد توضیح داده خواهد شد.

بخش Head

Wiki

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

Tag	توضیحات
<head>	اطلاعاتی در مورد سند ارائه می دهد.
<title>	عنوان یک سند را ارائه می دهد.
<base />	یک آدرس پیش فرض یا یک target پیش فرض برای تمام لینک های یک صفحه ارائه می دهد.
<link />	ارتباط بین یک سند و منبع خارجی را تعریف می کند.
<meta />	داده های meta در مورد یک سند HTML را مشخص می کند.
<script>	برای برنامه نویسی سمت کاربر استفاده می شود.
<style>	مشخص می کنید که عناصر HTML چگونه باید در مرورگر نمایش داده شوند.

: 15 شهریور 1397

عنوان ها در سندهای HTML، عناصر مهمی هستند.

عنوان ها در HTML

Wiki

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

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

مثال (عنوان یا سرتیتر در HTML)

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

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

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

سرتیترها عناصر مهمی هستند

Wiki

از عنصر heading تنها برای سرتیترها استفاده کنید. از آنها برای بزرگ یا bold کردن استفاده نکنید.

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

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

h1 برای مهمترین سرتیتر استفاده می شود، بعد از آن h2 و سپس h3 برای سرتیترهای کم اهمیت تر و به همین ترتیب سایر سرتیترها.

ایجاد خطوط افقی در HTML

Wiki

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

مثال (عنوان یا سرتیتر در HTML)

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

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

توضیحات (Comment ها) در HTML

Wiki

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

توضیحات به صورت زیر نوشته می شوند:

مثال (عنوان یا سرتیتر در HTML)

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

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

نکته: چگونه کدهای HTML را ببینیم

Wiki

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

برای دیدن این کدها روی صفحه مورد نظر راست کلیک کرده و از منوی باز شده گزینه "View Source" را در (IE) و یا "View Page Source" را در Firefox و یا گزینه مشابه را در سایر مرورگرها انتخاب کنید.

مثال - خودتان امتحان کنید

Wiki

Headings
چگونه سرتیترها را در یک سند HTML نشان دهیم.

Hidden comments
چگونه توضیحی را در کد HTML درج کنیم.

Horizontal lines
چگونه خط افقی درج کنیم.

منبعی از تگ ها در HTML

Wiki

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

تگ	توضیح
<html>	یک سند HTML را تعریف می کند.
<body>	بدنه یک سند را تعریف می کند.
<h1> تا <h6>	سرتیترهای HTML را تعریف می کند.
<hr />	یک خط افقی را تعریف می کند.
<!-->	توضیحی را درج می کند.

: 10 شهریور 1397

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

مثال - خودتان امتحان کنید

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

ایجاد فیلد کلمه عبور(پسورد)
چگونه یک فیلد برای ورود کلمه عبور ایجاد کنیم.

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

فرم های HTML

Wiki

از فرم های HTML برای ارسال اطاعات به سرور استفاده می شود.

یک فرم می تواند شامل عناصر ورودی(Input) مانند فیلد های متنی، چک باکس ها، رادیو باتن ها، دکمه های ارسال، لیست های انتخاب و... باشد.

از تگ <form> برای ایجاد یک فرم HTML استفاده می شود:

<form>
.
input elements
.
</form>

فرم های HTML و عناصر ورودی

Wiki

یکی از مهمترین عناصر فرم، عنصر input است.

در این عنصر خصوصیتی به نام type به تعیین نوع اطلاعات ورودی اختصاص دارد و می توان آن را با یکی از مقادیر زیر تنظیم کرد:

text , checkbox , radio , password , hidden , submit , reset , button , file , image

در ادامه به شرح بعضی از typeهای پرکاربرد بالا خواهیم پرداخت:

فیلد input از نوع Text

Wiki

اگر می خواهید که بازدیدکننده، اطلاعاتی از قبیل متن، اعداد و... را وارد کند، خصوصیت type را با مقدار "text" تنظیم کنید:

<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>

کد HTML بالا به صورت زیر در مرورگر نشان داده می شود:

توجه:تگ فرم در مرورگر قابل رویت نیست. همچنین توجه داشته باشید که یک فیلد متنی به صورت پیش فرض به اندازه 20 کاراکتر عرض دارد.

نحوه نمایش عناصر ورودی در مروگر نمایش داده نمی شود.

اگر بخواهیم مقداری بیش از 20 کاراکتر را برای عنصر متنی مشخص کنیم چه کار می کنیم.

فیلد input از نوع Password

Wiki

اگر می خواهید که بازدیدکننده، کلمه عبور را وارد کند، خصوصیت type را با مقدار "password" تنظیم کنید:

<form>
Password: <input type="password" name="pwd" />
</form>

توجه: کاراکترها در فیلد پسورد به صورت ماسک شده نمایش داده می شوند.(ستاره ای یا دایره ای)

فیلد input از نوع Radio

Wiki

اگر می خواهید که بازدیدکننده، فقط یک گزینه را از بین چند گزینه محدود انتخاب کند، خصوصیت type را با مقدار "radio" تنظیم کنید:

<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>

فیلد input از نوع Checkbox

Wiki

اگر میخواهید که بازدیدکننده، یک یا چند گزینه را از بین چند گزینه محدود انتخاب کند، خصوصیت type را با مقدار "checkbox" تنظیم کنید:

فیلد input از نوع Submit

Wiki

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

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

معمولا فایلهای بخش action برنامه ها و اسکریپت های نوشته شده با زبانهای cgi مانند ASP.NET ، Perl ، PHP و... بوده و وظیفه آنها دریافت اطلاعات فرمها و سپس پردازش آنها می باشد:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

اگر در فیلد متنی بالا کاراکترهایی را تایپ کنید و روی دکمه "submit" کلیک کنید، مرورگر، ورودی شما را به صفحه ای به نام "html_form_action.php" ارسال خواهد کرد.

مثال - خودتان امتحان کنید

Wiki

Radio button
چگونه یک radio button ایجاد کنیم.

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

drop-down
چگونه یک لیست کشویی یا drop-down ساده ایجاد کنیم.

Drop-down با آیتم انتخاب شده از قبل
چگونه یک لیست کشویی با مقدار انتخاب شده از قبل ایجاد کنیم.

Textarea
چگونه یک کنترل ورودی متن چند خطه ایجاد کنیم. در یک text-area کاربر می تواند تعداد نامحدودی کاراکتر تایپ کند.

button
چگونه یک دکمه برای کلیک کردن ایجاد کنیم.

مثال - خودتان امتحان کنید(Form)

Fieldset
چگونه یک لبه یا border، اطراف عناصر داخل یک فرم ایجاد کنیم.

فرمی با دو فیلد متنی و یک دکمه submit
چگونه یک فرم با دو فیلد متنی و یک دکمه submit ایجاد کنیم.

فرمی با دو checkbox
چگونه یک فرم با دو checkbox و یک دکمه submit ایجاد کنیم.

فرمی با دو radio button
چگونه یک فرم با دو radio button و یک دکمه submit ایجاد کنیم.

تگ های فرم HTML

Wiki

تگ	توضیحات
<form>	یک فرم HTML برای ورودی کاربر تعریف می کند.
<input />	یک کنترل ورودی تعریف می کند.
<textarea>	یک کنترل ورودی متن چند خطه تعریف می کند.
<label>	برای یک عنصر ورودی مانند متن یک برچسب یا lable تعریف می کند.
<fieldset>	برای یک فرم HTML یک لبه یا border تعریف می کند.
<legend>	برای یک عنصر fieldset یک عنوان یا caption تعریف می کند.
<select>	یک لیست کشوئی یا (drop-down list) تعریف می کند.
<optgroup>	در لیست کشوئی یا (drop-down list) یک گروه از آیتم های مرتبط به هم را تعریف می کند.
<option>	در لیست کشوئی یا (drop-down list) یک آیتم یا option تعریف می کند.
<button>	یک دکمه برای کلیک کردن تعریف می کند.

: 10 شهریور 1397

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

This text is bold

This text is big

This text is italic

This is computer output

This is_subscript and ^superscript

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

تگ های فرمت دهی در HTML

Wiki

HTML از تگ های <b> و <i> برای bold و italic کردن متن ها استفاده می کند.

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

	اغلب <strong> نتیجه ای شبیه <b> و <em> نتیجه ای شبیه <i> بر می گرداند. البته، تفاوتی در معنی این تگ ها وجود دارد. <b> یا <i> به معنی متن bold یا italic می باشند. <strong> یا <em> به این معنی است که می خواهید متن طوری نمایش داده شود که کاربر بفهمد متن مهم است. امروزه تمام مرورگرهای اصلی، متن strong شده را به صورت bold و متن با فرمت em را به صورت italic نمایش می دهند. با این وجود، اگر مرورگری بخواهد متون با فرمت strong را highlight کند متون bold شده را highlight نمی کند.

اغلب <strong> نتیجه ای شبیه <b> و <em> نتیجه ای شبیه <i> بر می گرداند.

البته، تفاوتی در معنی این تگ ها وجود دارد.

<b> یا <i> به معنی متن bold یا italic می باشند.

<strong> یا <em> به این معنی است که می خواهید متن طوری نمایش داده شود که کاربر بفهمد متن مهم است.

امروزه تمام مرورگرهای اصلی، متن strong شده را به صورت bold و متن با فرمت em را به صورت italic نمایش می دهند.

با این وجود، اگر مرورگری بخواهد متون با فرمت strong را highlight کند متون bold شده را highlight نمی کند.

مثال - خودتان امتحان کنید

Wiki

Text formatting
چگونه در یک سند HTML متنی را فرمت دهی کنیم.

Preformatted text
نحوه تنظیم فاصله ها و خط های جدید با استفاده از تگ pre.

"Computer output" tags
تگ های computer output به چه صورت هایی نمایش داده می شوند.

Address
چگونه اطلاعات تماس مالک یا نویسنده یک سند HTML را تعریف کنیم.

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

Text direction
نحوه تغییر جهت متن (از آخر به اول).

Quotations
نحوه نوشتن نقل قول های کوتاه و بلند.

Deleted and inserted text
نحوه علامت گذاری متن های زیر خط دار یا حذف شده (روی آن خط کشیده می شود). برای خط زدن یک لغت و درج لغت جایگزین به گونه ای که هر دو کنار هم قرار گیرند استفاده می شود.

تگ های مربوط به قالب بندی متن در HTML

Wiki

تگ	توضیحات
<b>	متن را به صورت ضخیم یا bold نمایش می دهد.
<strong>	متن را به صورت ضخیم یا strong نمایش می دهد.
<em>	متن را به صورت مورب یا emphasized (تأکید شده) نمایش می دهد.
<i>	متن را به صورت مورب یا italic نمایش می دهد.
<small>	متن را به صورت small نمایش می دهد.
<big>	متن را به صورت big نمایش می دهد.
<sub>	متن را به صورت subscripted نمایش می دهد.
<sup>	متن را به صورت superscripted نمایش می دهد.
<ins>	متن را به صورت inserted (زیر خط دار) نمایش می دهد.
<del>	متن را به صورت deleted (روی آن خط کشیده شده) نمایش می دهد.

تگ های "computer output" در HTML

تگ	توضیحات
<code>	متن را به صورت computer code نمایش می دهد.
<kbd>	متن را به صورت keyboard نمایش می دهد.
<samp>	متن را به صورت sample computer code نمایش می دهد.
<tt>	متن را به صورت teletype نمایش می دهد.
<var>	متن را به صورت variable نمایش می دهد.
<pre>	متن را به صورت preformatted نمایش می دهد. (خطوط و فاصله های اضافه در نظر گرفته شده را حفظ می کند)

تگ های Citations ،Quotations و Definition در HTML

تگ	توضیحات
<abbr>	مخفف کلمه ای را تعریف می کند. با استفاده از خصوصیت title می توان عبارت کامل آن مخفف را در حالتی که موس روی آن قرار می گیرد نشان داد.
<acronym>	سر نام کلمات را تعریف می کند. (در HTML5 پشتیبانی نمی شود) با استفاده از خصوصیت title می توان عبارت کامل آن مخفف را در حالتی که موس روی آن قرار می گیرد نشان داد.
<address>	اطلاعات تماس برای نویسنده با مالک سند را مشخص می کند.
<bdo>	با استفاده از خصوصیت bdo می توان کلمات را برعکس کرد. (از آخر به اول یا برعکس)
<blockquote>	برای تعریف نقل قول های بلند استفاده می شود. مرورگر، بصورت پیشفرض قبل و بعد از عبارت نقل قول یک فضای اضافی قرار می دهد. همچنین برای آن Margin در نظر می گیرد.
<q>	برای تعریف نقل قول های کوتاه استفاده می شود. مرورگر، بصورت پیشفرض عبارت را داخل دابل کوتیشن قرار میدهد.
<cite>	جهت تعریف نقل قول (citation) در HTML5 تگ <cite> عنوان یک کار را مشخص می کند اما در HTML 4.01 تگ <cite> یک نقل قول را مشخص می کند.
<dfn>	یک عبارت تعریفی را مشخص می کند.

: 10 شهریور 1397

تگ <font> نباید استفاده شود

Wiki

تگ <font> در HTML 4 رایج نیست و در HTML 5 حذف شده است.

کنسرسیوم World Wide Web یا (w3c) تگ <font> را از دستوراتش حذف کرده است.

در HTML 4، باید از CSS (یا style sheetها) برای تعیین خصوصیات نمایش عناصر استفاده کرد.

مثال زیر نشان می دهد که چگونه HTML با تگ <font> کار می کند.

مثال (فونت ها در HTML)

<p>
<font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>

<p>
<font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in blue text color.
</font>
</p>

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

مثال - خودتان امتحان کنید

Wiki

راه درست قالب بندی - با Style ها

Set the font of text
این مثال نحوه تنظیم فونت متن را نشان می دهد.

Set the font size of text
این مثال نحوه تنظیم سایز فونت را نشان می دهد.

Set the font color of text
این مثال نحوه تنظیم رنگ متن را نشان می دهد.

Set the font, font size, and font color of text
این مثال نحوه تنظیم فونت، سایز و رنگ متن را نشان می دهد.

: 17 شهریور 1397

کاراکترهای رزرو شده در HTML باید با character entity ها جایگزین شوند.

HTML Entities

Wiki

بعضی کاراکترها در HTML رزرو شده هستند.

استفاده از علامت کوچکتر(<) و بزرگتر(>) در متن به دلیل اینکه مرورگر آنها را با تگ ها در هم می آمیزد امکان پذیر نیست.

برای اینکه بتوان کاراکترهای رزرو شده را نمایش داد، باید از character entity ها در کد منبع HTML استفاده کنیم.

یک character entity به این شکل می باشد:

&entity_name;
OR
&#entity_number;

برای نمایش علامت کوچکتر باید بنویسیم: lt& یا 60#& (که lt مخفف less than است)

نکته: مزیت استفاده از entity name به جای entity number این است که به یاد آوردن name راحت تر است. اما عیب آن این است که مرورگرها ممکن است همه entity name ها را پشتیبانی نکنند. (پشتیبانی از entity number ها خیلی بهتر است.)

فاصله (Non-breaking Space)

Wiki

یک character entity رایج در HTML کاراکتر non-breaking space (یا nbsp&) می باشد.

مرورگرها همیشه فاصله ها (space) را کوتاه می کنند. اگر 10 فاصله پشت سر هم در متن خود تایپ کنید، مرورگر 9 تای آن ها را برمی دارد. برای اینکه فاصله ها را به متن خود اضافه کنید، می توانید از کاراکتر nbsp& استفاده نمایید.

مثال

Wiki

character entity ها در HTML را تجربه کنید: Try it yourself
در مثال بالا، کاراکتر X را با یک نام یا عدد (عدد+#) جایگزین نمایید.

character entity های مفید در HTML

Wiki

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

Result	Description	Entity Name	Entity Number
	non-breaking space
<	less than	<	<
>	greater than	>	>
&	ampersand	&	&
¢	cent	¢	¢
£	pound	£	£
¥	yen	¥	¥
€	euro	€	€
§	section	§	§
©	copyright	©	©
®	registered trademark	®	®
™	trademark	™	™

: 10 شهریور 1397

لیست های رایج در HTML لیست های ترتیبی و غیر ترتیبی هستند.

لیست ها در HTML

لیست های مرتب

The first list item
The second list item
The third list item

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

List item
List item
List item

مثال - خودتان امتحان کنید

Wiki

Unordered list
نحوه ایجاد لیست نامرتب در سند HTML.

Ordered list
نحوه ایجاد لیست مرتب در HTML.

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

لیستهای نامرتب (Unorder List)

Wiki

یک لیست غیر ترتیبی یا نامرتب با تگ <ul> شروع می شود. آیتم های هر لیست با تگ <li> شروع می شوند. (List Item)

آیتم های یک لیست به وسیله گلوله نشانه گذاری می شوند. (دایره های کوچک سیاه رنگ)

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

نحوه نمایش کد بالا در مرورگر:

Coffee
Milk

لیست های مرتب (Order List)

Wiki

یک لیست مرتب یا ترتیبی با تگ <ol> شروع می شود. آیتم های هر لیست با تگ <li> شروع می شوند.

آیتم های یک لیست به وسیله اعداد نشانه گذاری می شوند.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

نحوه نمایش کد بالا در مرورگر:

Coffee
Milk

لیست های تعریفی (Description List)

Wiki

یک لیست تعریفی لیستی از آیتم هاست که هر آیتم توضیحی دارد.

لیست های تعریفی با تگ <dl> نوشته می شوند.

تگ <dl> به همراه تگ <dt> (که آیتم های موجود در لیست را مشخص می کند) و تگ <dd> ( که آیتم های موجود در لیست را توضیح می دهد) استفاده می شود.

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

نحوه نمایش کد بالا در مرورگر:

Coffee: - black hot drink
Milk: - white cold drink

نکات مهم و اساسی

Wiki

نکته: درون آیتم های یک لیست، می توانید تصویر، لینک، تگ </ br>، لیستی دیگر و غیره را قرار دهید.

مثال بیشتر - خودتان امتحان کنید

Different types of ordered lists
نمایش انواع دیگر لیست های ترتیبی.

Different types of unordered lists
نمایش انواع دیگر لیست های غیر ترتیبی.

Nested list
نمایش لیست های تو در تو.

Nested list 2
نمایش لیست های تو در توی پیچیده تر.

Description list
نمایش لیست تعریفی.

تگ های لیست در HTML

Tag	Description
<ol>	یک لیست ترتیبی تعریف می کند.
<ul>	یک لیست غیر ترتیبی تعریف می کند.
<li>	آیتم های یک لیست را تعریف می کند.
<dl>	برای ساخت یک لیست تعریفی استفاده می شود.
<dt>	برای ساخت یک آیتم در لیست تعریفی استفاده می شود.
<dd>	برای تعریف توضیحات یک آیتم در لیست تعریفی استفاده می شود.

: 10 شهریور 1397

لینک ها در HTML

Wiki

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

مثال - خودتان امتحان کنید

HTML links
نحوه ایجاد لینک ها در سند HTML

می توانید مثال های بیشتری را در پایین این صفحه ببیند.

Hyperlink (یا Link ها) در HTML

Wiki

یک hyperlink یا link یک کلمه یا گروهی از کلمات یا عکس می باشد که شما می توانید با کلیک کردن روی آن به سند جدید یا بخشی از همان سند بروید.

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

لینک ها در HTML با تگ <a> مشخص می شوند.

تگ <a> به دو روش می تواند استفاده شود:

برای ایجاد لینک به سندی دیگر، با استفاده از خصوصیت href
برای ایجاد یک پیوند به دورن همان صفحه (bookmark)، با استفاده از خصوصیت name

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

خصوصیت href مقصد یک لینک را مشخص می کند.

مثال:

<a href="http://www.beyamooz.com/">Visit beyamooz</a>

که به این صورت نمایش داده می شود: Visit beyamooz

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

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

خصوصیت target

Wiki

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

مثال زیر، صفحه لینک شده را در یک پنجره جدید یا در یک تب جدید باز می کند:

مثال (لینک ها در HTML)

<a href="http://www.beyamooz.com/" target="_blank">Visit beyamooz!</a>

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

خصوصیت name یا (id)

Wiki

با تنظیم یک نام منحصر به فرد برای یک عنصر با استفاده از خصوصیت name یا id، می توانید در CSS یا JavaScript به آن دسترسی داشته باشید.

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

نکته: استاندارد HTML5 خصوصیت id را بجای name برای تعیین اسم برای یک محل مشخص پیشنهاد می دهد. خصوصیت id برای HTML4 در تمام مرورگرهای امروزی نیز عمل می کند.

مثال:تنظیم خصوصیت Name برای تگ <a> در سند HTML:

<a name="tips">Useful Tips Section</a>

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

<a href="#tips">Visit the Useful Tips Section</a>

یا، ایجاد یک لینک به محل مشخصی در صفحه ای دیگر:

<a href="http://www.beyamooz.com/html_links.htm#tips">
Visit the Useful Tips Section</a>

نکات اساسی و مفید

Wiki

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

http://beyamooz.com/html/

در غیر اینصورت، دو درخواست به سرور ارسال کرده اید، سرور ابتدا یک slash به انتهای آدرس اضافه می کند و سپس آدرس را بارگذاری می کند.

مثال - خودتان امتحان کنید

Wiki

An image as a link
نحوه ایجاد یک عکس به عنوان یک لینک

Link to a location on the same page
نحوه ایجاد یک پیوند درون همان صفحه. (این روش برای سندهایی که فهرست بندی شده اند کاربرد زیادی دارد)

Break out of a frame
چگونه از یک فریم بیرون بیاییم. (اگر سایت شما در یک فریم محصور است)

Create a mailto link 1
چگونه با یک لینک، متنی را ایمیل کنیم. (تنها زمانی کار می کند که نرم افزار مدیریت ایمیل مثل outlook نصب شده باشد)

Create a mailto link 2
مثالی دیگر از ارسال متن توسط لینک

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

تگ	توضیح
<a>	یک ancher را تعریف می کند.

: 17 شهریور 1397

برای اینکه وب سایت خود را به جهانیان ارائه کنید، باید آنرا روی یک سرور وب قرار دهید.

میزبانی وب سایت (Hosting)

Wiki

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

1- هزینه های سخت افزاری

برای اینکه یک وب سایت "واقعی" را راه اندازی کنید، باید مقداری از تجهیزات سروری قدرتمند را خریداری کنید. انتظار هزینه کمی را نداشته باشید. همچنین به یک ارتباط همیشگی (24 ساعته) و با سرعت بالا نیاز دارید.

2- هزینه های نرم افزاری

به یاد داشته باشید که server-licenses اغلب بالاتر از client-licenses می باشد. همچنین توجه داشته باشید که server-licenses ممکن است به چند کاربر محدود شوند.

3- هزینه نیروی کار

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

استفاده از یک تامین کننده سرویس اینترنتی(Internet Service Provider)

Wiki

اجاره کردن سرور از یک (Internet Service Provider (ISP گزینه ای متداول است.

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

1- سرعت اتصال

بیشتر ISPها سرعت خوبی در اتصال به اینترنت دارند.

2- سخت افزار قوی

ISPها اغلب سرور های قدرتمندی دارند که می توان آنها را با چندین شرکت به اشتراک گذاشت. همچنین می توان توقع داشت که load balancing و سرور بک آپ گیری کارآمدی داشته باشند.

3- امنیت و پایداری

ISP ها مخصوص میزبانی از وب هستند. انتظار داشته باشید که سرورهای آن ها 99% زمان up باشند، جدیدترین بسته های نرم افزاری و بهترین امنیت در مقابل ویروس ها را داشته باشند.

مواردی که در کار با ISP باید در نظر بگیرید

Wiki

1- پشتیبانی 24 ساعته

مطمئن شوید که ISP، پشتیبانی 24 ساعته داشته باشد. خود را در شرایطی قرار ندهید که برای حل مشکلات بحرانی، منتظر رسیدن روز کاری بعد شوید.

2- بک آپ گیری روزانه

مطمئن شوید که ISP به صورت روزانه، بک آپ گیری می کند در غیر این صورت ممکن است داده های با ارزشی را از دست بدهید.

3- حجم ترافیکی

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

4- پهنای باند یا محدودیت های محتوا

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

5- قابلیت های E-mail

مطمئن شوید ISP مورد نظرتان قابلیت های ایمیلی که نیاز دارید را پشتیبانی کند.

6- دسترسی به پایگاه داده

اگر قصد دارید از پایگاه داده ها در وب سایت خود استفاده کنید، مطمئن شوید که ISP مورد نظر، امکان دسترسی به پایگاه داده را پشتیبانی می کند.

css

اعلان <DOCTYPE!>

مثال (DOCTYPE چیست؟)

نسخه های HTML

اعلان های متداول

دستور اضافه کردن یک iframe

تنظیم عرض و طول iframe

مثال (iframe چیست؟)

حذف Border یا خطوط حاشیه iframe

مثال (iframe چیست؟)

استفاده از iframe به عنوان مقصد یک لینک

مثال (iframe چیست؟)

تگ iframe

URL یا (Uniform Resource Locator)

توضیح

Scheme های رایج

آموزش HTML (اچ تی ام ال) - مقدمه HTML (اچ تی ام ال)

آموزش HTML (اچ تی ام ال) همراه با صدها مثال

مثال (مقدمه آموزش HTML)

HTML چیست؟

آموزش تگ های HTML

سند HTML = صفحات وب

آموزش تصویری مطلب بالا (فیلم آموزش HTML)

به چگونگی نمایش متن ها نگاه کنید...!

مثال - خودتان امتحان کنید

تعیین شکل نمایش عناصر HTML با CSS

استایل درون تگی - Inline Styles

مثال (استفاده از css در HTML)

مثال (استفاده از css در HTML)

مثال (استفاده از css در HTML)

برگه های استایل داخلی - Internal Style Sheet

برگه های استایل خارجی - External Style Sheet

تگ های Style در HTML

تگ ها و خصوصیات منسوخ شده

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

مرتب شده براساس نام رنگ

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

مثال (پاراگراف ها در HTML)

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

مثال (پاراگراف ها در HTML)

رفتن به خط جدید در HTML

مثال (پاراگراف ها در HTML)

<br> یا </ br>

خروجی HTML - نکات مفید

مشکل نمایش اشعار در مرورگر

مثال (پاراگراف ها در HTML)

عنصر <pre> در HTML

مثال (پاراگراف ها در HTML)

مثال - خودتان امتحان کنید

منبع تگ های HTML

مثال (تصاویر در HTML)

Norwegian Mountain Trip

مثال - خودتان امتحان کنید

تگ <img> و خصوصیت Src

خصوصیت ALT

تنظیم طول و عرض یک عکس

نکات اساسی و مفید

مثال - خودتان امتحان کنید

تگ های تصویر

جداول در HTML

مثال - خودتان امتحان کنید

جداول در HTML

خصوصیت Border

مثال (جداول در HTML)

مثال (جداول در HTML)

تبدیل لبه های دو خطی به یک خطی

مثال (جداول در HTML)

تنظیم فاصله ی محتوای سلول ها از لبه

مثال (جداول در HTML)

تنظیم فاصله سلول ها از یکدیگر

مثال (جداول در HTML)

عنوان جدول (Header)

مثال (جداول در HTML)

مثال (جداول در HTML)

مثال بیشتر - خودتان امتحان کنید

تگ های جدول در HTML

چکیده مطالب html در یک نگاه

تگ های اصلی یک سند HTML

تگ عنوان در HTML

تگ های متن در HTML