آموزش html
DOCTYPE چیست؟
اعلان <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
از اولین روزهای پیدایش وب، نسخه های زیادی از 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 اعلان های متداول
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">iframe چیست؟
یک iframe برای نمایش صفحه وب، درون یک صفحه وب دیگر استفاده می شود.
دستور اضافه کردن یک iframe
<iframe src="/URL"></iframe>URL به مکان صفحه مجزای دیگری اشاره دارد.
تنظیم عرض و طول iframe
خصوصیت height و width برای تعیین طول و عرض یک iframe استفاده می شود.
مقدار این خصوصیت ها به طور پیش فرض بر حسب پیکسل بیان می شود اما می توان آنرا به درصد نیز بیان کرد. (مثل 80 %)
مثال (iframe چیست؟)
<iframe src="/demo_iframe.htm" width="200" height="200"></iframe>خودتان امتحان کنید »حذف Border یا خطوط حاشیه iframe
خصوصیت frameborder مشخص می کند آیا حاشیه نمایش داده شود یا نه.
با تنظیم آن به عدد صفر حاشیه برداشته می شود.
استفاده از iframe به عنوان مقصد یک لینک
یک iframe می تواند به عنوان مقصد یک لینک استفاده شود.
خصوصیت target در یک لینک باید به خصوصیت name در عنصر iframe اشاره کند.
مثال (iframe چیست؟)
<iframe src="/demo_iframe.htm" name="iframe_a"></iframe>خودتان امتحان کنید »
<p><a href="http://www.beyamooz.com" target="iframe_a">beyamooz.com</a></p>تگ iframe
تگ توضیح <iframe> تعریف یک صفحه داخل صفحه جاری (frame)
url چیست؟
یک URL همان آدرس وب می باشد.
یک URL می تواند ترکیبی از حروف باشد مثل beyamooz.com یا می تواند یک IP یا Internet Protocol باشد. بیشتر مردم هنگام گشت زنی در اینترنت از نام وب سایت استفاده می کنند زیرا به خاطر سپردن یک نام آسان تر است تا یک IP مثل 192.68.20.50.
URL یا (Uniform Resource Locator)
هنگامی که روی یک لینک در صفحه HTML کلیک می کنید، تگ <a> به آدرسی در شبکه جهانی وب اشاره می کند.
یک URL یا (Uniform Resource Locator) برای فراخوانی یک سند (یا داده هایی دیگر) در اینترنت استفاده می شود.
یک آدرس وب مثل http://beyamooz.com/index.php/design-page/html از الگوی زیر پیروی می کند:
scheme://host.domain:port/path/filenameتوضیح
- scheme:نوع سرویس اینترنتی را تعریف می کند. رایج ترین نوع http می باشد.
- host: میزبان دامنه (domain host) را تعریف می کند. ( host پیش فرض برای http حروف www می باشد.)
- domain: نام دامنه اینترنی را تعریف می کند. مثل w3school.com
- port: در اینجا port number در host تعریف می شود. ( port number به طور پیش فرض برای http عدد 80 می باشد.)
- path: یک مسیر را در سرور تعریف می کند. (اگر حذف شود، سند باید در فولدر اصلی وب سایتذخیره شده باشد.)
- file name: نام یک سند یا منبع را تعریف می کند.
Scheme های رایج
در جدول زیر لیستی از Scheme های رایج ارائه شده است.
Scheme مخفف در چه صفحاتی این scheme استفاده می شود http HyperText Transfer Protocol
(پروتکل انتقال ابر متن)
صفحات وب به صورت معمول با http شروع می شوند. در اینجا اطلاعات رمزگذاری نمی شوند.
https Secure HyperText Transfer Protocol
(پروتکل انتقال ابر متن به صورت ایمن)
تمام اطلاعات رمزگذاری شده اند و اطلاعات بصورت ایمن ارسال می شوند.
ftp File Transfer Protocol
(پروتکل انتقال فایل)برای دانلود و آپلود فایل ها در وب سایت استفاده می شود.
file فایلی روی کامپیوترتان
استفاده از css در HTML
CSS یا (Cascading Style Sheets) چگونگی نمایش عناصر HTML را مشخص می کند.
به چگونگی نمایش متن ها نگاه کنید...!
این متن قرمز است.
رنگ این متن آبی است و نام فونت آن Times است.
اندازه این متن 30 پیکسل است.
مثال - خودتان امتحان کنید
استفاده از Styleها، داخل صفحه HTML
چگونه Styleها را در قسمت <head> صفحه اضافه کنیم.لینکی که خط زیر ندارد
چگونه یک لینک بدون خط زیر (underline) بسازیم.لینک به یک فایل CSS خارجی
چگونه از تگ <link> برای اضافه کردن فایل CSS خارجی استفاده کنیم.تعیین شکل نمایش عناصر HTML با CSS
CSSهمراه با HTML4 معرفی شد تا یک روش بهتری برای Style دهی عناصر HTML ایجاد کند.
برای اعمال CSS بر روی تگهای HTML سه روش وجود دارد:
- برگه های استایل خارجی یا External style sheet
- برگه های استایل داخلی یا Internal style sheet
- استایل درون تگی یا Inline style
روش پیشنهادی، گزینه اول یعنی برگه های استایل خارجی است.
برای کسب اطلاعات بیشتر درباره CSS می توانید به لینک روبرو مراجعه نمایید: آموزش CSS
استایل درون تگی - Inline Styles
قرار دادن 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
زمانی که یک فایل HTML با یک Style خاص و یکتا نسبت به بقیه صفحات قالب بندی شده باشد، باید از Style داخلی استفاده کرد.
Styleهای داخلی در قسمت Head صفحه HTML و توسط تگ <style> مانند زیر معرفی می شوند.
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>برگه های استایل خارجی - External Style Sheet
زمانی که Styleها در چندین صفحه مختلف به کار برده می شوند، استفاده از Style خارجی ایده آل خواهد بود. اینکار شما را قادر می سازد تا فقط با تغییر یک فایل، ظاهر و یا طرح بندی تمام صفحات پروژه تان را تغییر دهید.
هر صفحه HTML باید با استفاده از تگ <link> به فایل CSS خارجی متصل شود. تگ <link> باید در قسمت head صفحه قرار داده شود.
<head>
<link rel="stylesheet" type="text/css" href="/mystyle.css" />
</head>تگ های Style در HTML
تگ توضیحات <style> برای تعریف اطلاعات طرح بندی یک سند html استفاده می شود. تگ <style> باید در قسمت head صفحه قرار داده شود.
<link /> هر صفحه HTML باید با استفاده از تگ <link> به فایل CSS خارجی متصل شود. تگ <link> باید در قسمت head صفحه قرار داده شود.
تگ ها و خصوصیات منسوخ شده
در HTML4 چندین تگ و خصوصیت برای Styleدهی استفاده می شود که این تگ ها در نسخه جدید HTMLپشتیبانی نمی شود.
به همین منظور از استفاده عناصر و خصوصیات زیر اجتناب نمایید:
- <font>
- <center>
- <strike>
- color
- bgcolor
استفاده از javascripts در HTML
JavaScripts صفحات HTML را پویاتر و جذاب تر می سازد.
Insert a script
نحوه وارد کردن یک script در یک سند HTML.Use of the <noscript> tag
چاپ یک پیام مناسب برای مرورگرهایی که جاوا اسکریبت را پشتیبانی نمی کنند یا توسط کاربر غیر فعال شده است.عنصر script در HTML
تگ <script> برای برنامه نویسی سمت کاربر استفاده می شود، مثل JavaScript.
عنصر <script> به دو صورت استفاده می شود یا با نوشتن دستورات درون تگ script یا به صورت یک فایل script خارجی که با خصوصیت src مشخص می شود.
ممکن است برای تگ <script> خصوصیت type را تنظیم کنیم ("text/javascript") توجه داشته باشید که نیاز به انجام این کار نیست، چون در تمام مرورگرها و در HTML5 زبان اسکریپت پیشفرض، JavaScript است.
کاربردهای رایج برای JavaScript: دستکاری تصویر، اعتبار سنجی فرم و تغییرات محتوا بصورت پویا می باشد.
script زیر عبارت Hello World را چاپ می کند:
مثال (استفاده از javascripts در HTML)
<script type="text/javascript">خودتان امتحان کنید »
document.write("Hello World!")
</script>نکته: برای یادگیری بیشتر در مورد JavaScript به خودآموز JS HOME مراجعه نمایید.
عنصر noscript در HTML
تگ <noscript> زمانی استفاده می شود که script ها در مرورگر غیر فعال شده یا مرورگری است که script سمت کاربر را پشتیبانی نمی کنند.
عنصر <noscript> می تواند تمام عناصری را که شما می توانید در عنصر body در یک صفحه HTML پیدا کنید را شامل شود.
محتوای عنصر <noscript> تنها زمانی نشان داده می شود که script پشتیبانی نشود یا در مرورگر کاربر غیر فعال باشد.
مثال (استفاده از javascripts در HTML)
<script type="text/javascript">خودتان امتحان کنید »
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>تگ های Script
Tag Description <script> برای برنامه نویسی سمت کاربر استفاده می شود.
<noscript> زمانی که script سمت کاربر پشتیبانی نشود متنی را به کاربر نشان می دهد.
استفاده از نام رنگ در HTML
استفاده از نام رنگ ها در تمام مرورگرها پشتیبانی می شود
در 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 اعلان DOCTYPE در HTML
مثال (اعلان DOCTYPE در HTML)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
خودتان امتحان کنید »تعریف و کاربرد اعلان DOCTYPE در HTML
اعلان <DOCTYPE!> باید در اولین شروع کد نویسی یعنی قبل از تگ <HTML> قرار گیرد.
<DOCTYPE!> یک تگ HTML نیست بلکه یک دستور راهنما برای مرورگرهای وب است تا نوع نسخه HTMLاستفاده شده را برای مرورگر مشخص کند.
بدلیل اینکه HTML4.01 بر مبنای SGML است، اعلان <DOCTYPE!> آن به یک DTD اشاره می کند.. DTD قوانین مشخص برای زبان نشانه گذاری است به طوری که مرورگرها ارائه محتوا را به درستی انجام دهند.
HTML5مبنی بر SGML نمی باشد بنابراین اشاره به یک DTD نیاز ندارد.
نکته:همیشه <DOCTYPE!> را به صفحه HTML خود اضافه کنید تا مرورگر بداند چه نوع سندی را پیش رو دارد.
پشتیبانی مرورگرها از اعلان DOCTYPE در HTML
عنصر <!DOCTYPE> بله بله بله بله بله تفاوت بین HTML 4.01 و HTML5
در HTML4.01 سه اعلان مختلف <DOCTYPE> وجود دارد ولی در HTML5 فقط یکی وجود دارد.
<!DOCTYPE html>نکته ها و ترفندها
نکته:اعلان <DOCTYPE> حساس به حروف بزرگ و کوچک نیست.
اعلان های DOCTYPE
HTML 5
<!DOCTYPE html>HTML 4.01 اکید(Strict)
این DTD شامل همه ی عناصر و ویژگی های HTML می باشد اما عناصر نمایشی (مانند تگ font) را در بر نمی گیرد. استفاده از FRAMSET (فریم) امکان پذیر نیست.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">HTML 4.01 انتقالی(Transitional)
این DTD شامل همه ی عناصر و ویژگی های HTML می باشد و همچنین عناصر نمایشی(مانند font) را نیز در بر می گیرد. استفاده از FRAMSET (فریم) امکان پذیر نیست.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">HTML 4.01 فریم ها (Frameset)
این DTD با HTML4.01 انتقالی یکسان است اما استفاده از FRAMSET (فریم) امکان پذیر است.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">XHTML 1.0 اکید(Strict)
این DTD شامل همه ی عناصر و ویژگی های HTML می باشد اما عناصر نمایشی (مانند font) را در بر نمی گیرد. استفاده از FRAMSET (فریم) امکان پذیر نیست. در XHTML تمام تگ ها و ویژگی ها باید با حروف کوچک و مانند XML نوشته شود.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">XHTML 1.0 اتتقالی (Transitional)
این DTD شامل همه ی عناصر و ویژگی های HTML می باشد اما عناصر نمایشی (مانند font) را در بر می گیرد. استفاده از FRAMSET (فریم) امکان پذیر نیست. در XHTML تمام تگ ها و ویژگی ها باید با حروف کوچک و مانند XML نوشته شود.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">XHTML 1.0 فریم ها( Frameset)
این DTD با XHTML0.1 انتقالی یکسان است اما استفاده از FRAMSET (فریم) امکان پذیر است.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">XHTML 1.1
این DTD با XHTML0.1 اکید یکسان است. اما به شما امکان اضافه کردن ماژول را می دهد.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">ایجاد گرافیک های برداری در HTML5
در HTML5، عناصر SVG را می توان به طور مستقیم در صفحه HTML جاسازی کرد.
SVG چیست؟
- SVG مخفف کلمات Scalable Vector Graphics می باشد. (گرافیک برداری مقیاس پذیر)
- SVG برای ایجاد گرافیک های برداری در صفحات وب بکار می رود.
- SVG زبانی برای توصیف گرافیک 2 بعدی در XML است.
- با Zoom روی گرافیک، کیفیت کاهش نمی یابد.
- هر المان و خصوصیتی که در SVG دیده می شود، می تواند متحرک شود.
- SVG یکی از توصیه های کنسرسیوم w3 می باشد.
SVG نسخه 1.1 در ژانویه 2003 برای اولین بار توسط W3C توصیه شد. شرکت های Sun Adobe, Apple, IBM, Kodak ازجمله شرکت هایی بودند که بر روی این پروژه کار کرده اند.
مزایای SVG
مزایای SVG نسبت به سایر فرمت های عکس (مانند GIF و JPEG):
- عکس های SVG را می توان با هر Editorی، ایجاد و یا ویرایش کرد.
- حجم این فایل ها از فرمت های پیکسلی کم تر است.
- این عکس ها قابلیت تغییر اندازه بدون از دست دادن کیفیت را دارند.
- متون نوشته شده در این عکس ها بصورت TEXT بوده و قابل انتخاب و جستجو می باشد.
- فایل های SVG کاملا XML هستند.
پشتیبانی مرورگرها
مرورگرهای Internet Explorer 9+, Firefox, Opera, Chrome, Safari عنصر <svg> را پشتیبانی می کنند.
قراردادن SVG مستقیماً در صفحات HTML
در HTML5، عناصر SVG را می توان به طور مستقیم در صفحه HTMLجاسازی کرد:
مثال (ایجاد گرافیک های برداری در HTML5)
<!DOCTYPE html>خودتان امتحان کنید »
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>تفاوت های بین SVG و Canvas
SVG زبانی برای توصیف گرافیک دو بعدی در XML است.
عنصر <canvas> در HTML5 از طریق اسکریبت نویسی (معمولاً JavaScript) برای رسم اشکال در یک صفحه وب استفاده می کند.
XML بودن فایل های SVG این امکان را فراهم می سازد، که دسترسی به عناصر موجود در فایل SVG با توجه به مدل DOM امکان پذیر باشد. همچنین می توانید رویدادهای مختلف JavaScript را به هر عنصری اضافه نمایید.
در SVG، با هر شکل، مانند یک Object برخورد می شود. اگر ویژگی های Object تغییر کند، مرورگر می تواند به طور خودکار دوباره شکل را بازسازی کند.
در Canvas، با اشکال، پیکسل به پیکسل برخورد می شود و هنگامی که شکل رسم شد، دیگر در مرورگر قابل دسترس نیست. اگر نیاز است که موقعیت آن عوض شود، باید کل شکل، دوباره ترسیم شود.مقایسه Canvas و SVG
جدول زیر مهمترین تفاوت های Canvas و SVG را نشان می دهد:
Canvas SVG - وابسته به Resolution است.
- رویدادها را پشتیبانی نمی کند.
- قابلیت rendering متن، ضعیف است.
- می توان تصویر نهایی را با فرمت jpg. یا png. ذخیره کرد.
- برای ساخت بازی، مناسب است.
- مستقل از Resolution عمل می کند.
- رویدادها را پشتیبانی می کند.
- برای برنامه هایی با نواحی rendering بزرگ (مانند نقشه های گوگل) مناسب است.
- در صورت پیچیدگی، سرعت rendering پایین است. (هر چیزی که از DOM استفاده کند بسیار کند خواهد بود)
- برای ساخت بازی، مناسب نیست.
پاراگراف ها در HTML
پاراگراف ها، قسمت عمده ای از یک سند HTMLرا تشکیل می دهند.
پاراگراف ها در HTML
پاراگراف ها به وسیله تگ <p> تعریف می شوند.
مثال (پاراگراف ها در HTML)
<p>This is a paragraph</p>خودتان امتحان کنید »
<p>This is another paragraph</p>نکته: مرورگرها به طور خودکار یک خط خالی را قبل و بعد از پاراگراف اضافه می کند.
تگ پایان را فراموش نکنید
اغلب مرورگرها حتی اگر تگ پایان را هم نگذاریم صفحه را به درستی نمایش می دهند.
مثال بالا در بیشتر مرورگرها عمل می کند، اما به آن اطمینانی نیست. فراموش کردن تگ پایان می تواند نتایج غیر منتظره یا خطاهایی را ایجاد کند.
تذکر: نسخه های آینده HTML به شما اجازه نمی دهد که تگ پایان را فراموش کنید.
رفتن به خط جدید در HTML
از تگ </ br> برای رفتن به خط جدید بدون اینکه پاراگراف جدیدی را شروع کنیم استفاده می شود.
مثال (پاراگراف ها در HTML)
<p>This is<br />a para<br />graph with line breaks</p>خودتان امتحان کنید »عنصر </ br> یک عنصر تهی در HTML است. این عنصر دارای تگ پایان نیست.
<br> یا </ br>
در XHTML و XML عناصر بدون تگ پایان(تگ بسته) مجاز نمی باشند.
اگر چه <br>در تمام مرورگرها کار می کند، اما نوشتن </ br> در برنامه های XHTML و XML بهتر عمل می کند.
خروجی HTML - نکات مفید
شما نمی توانید مطمئن شوید که کدهای 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 breaks
رفتن به خط جدید در سندهای HTML.Poem problems
بعضی مشکلات در فرمت دهی در HTML.More paragraphs
رفتارهای پیش فرض در پاراگراف ها.منبع تگ های HTML
منبع تگ های HTML حاوی اطلاعات اضافی در مورد عناصر HTML و خصوصیت های آن ها می باشد.
تگ توضیح <p> یک پاراگراف را تعریف می کند. <br /> خط جدیدی را وارد می کند. پخش صدا در HTML5
HTML5 برای پخش صدا، استانداردی را به وجود آورده است.
پخش صدا در وب
تا به حال، هرگز استانداردی برای پخش فایل های صوتی در صفحات وب وجود نداشته است.
امروزه، فایل های صوتی عموماً از طریق یک پلاگین مثل Flash نشان داده می شوند. هر چند همه مرورگرها، پلاگین های مشابهی ندارند.
HTML5 روش استانداردی را برای پخش فایل های صوتی با استفاده از عنصر <audio> فراهم کرده است.
پشتیبانی مرورگرها
مرورگرهای Internet Explorer 9+, Firefox, Opera, Chrome, Safari عنصر <audio> را پشتیبانی می کنند.
توجه: Internet Explorer 8 و نسخه های قدیمی تر آن، عنصر <audio> را پشتیبانی نمی کنند.عنصر <audio> چگونه کار می کند؟
برای پخش یک فایل صوتی در HTML5 تمام آن چیزی که نیاز دارید این چند خط کد زیر است:
مثال (پخص صدا در HTML5)
<audio controls>خودتان امتحان کنید »
<source src="/horse.ogg" type="audio/ogg">
<source src="/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>ویژگی controls برای افزودن کنترل های play ،pause و صدا می باشد.
در صورتی که مرورگر از عنصر <audio> پشتیبانی نمی کند باید بین دو تگ <audio> و <audio/> جمله ای مناسب مانند زیر قرار داده شود:
Your browser does not support the audio tag.تگ <audio> به شما اجازه می دهد که چند تگ <source> داشته باشید. تگ های <source> می تواند به فایل های صوتی مختلفی لینک شوند. مرورگر اولین فرمتی که قابلیت پخش آن را داشته باشد، برای کاربر پخش می کند.
مثال بالا از یک فایل Ogg استفاده کرده است و در مرورگرهای Firefox, Opera, Chrome کار می کند. برای اینکه فایل صوتی در IE و Safari و نسخه های قبلی Chrome نیز پخش شود، باید از فابل های MP3 استفاده کنید.
تمام خصوصیت های تگ <audio>
Autoplay: در صورت وجود فایل صوتی به محض آماده شدن پخش می شود. مقداری که می گیرد: autoplay
Controls: دکمه های مختلف مثل play و... را اضافه می کند. مقداری که می گیرد: controls
Loop: در صورت اتمام فایل صوتی دوباره از اول شروع به پخش می کند. مقداری که می گیرد: loop
Preload: کاری می کند که صدا در هنگام لود شدن صفحه، آماده پخش شود. مقداری که می گیرد: perload
Src: آدرس فایلی است که باید پخش شود. مقداری که می گیرد: یک url
فرمت های صدا و پشتیبانی مرورگرها
در حال حاضر 3 فرمت تحت پشتیبانی عنصر <audio> قرار دارد.
- MP3
- Wav
- Ogg
Browser MP3 Wav Ogg Internet Explorer 9+ YES NO NO Chrome 6+ YES YES YES Firefox 3.6+ NO YES YES Safari 5+ YES YES NO Opera 10+ NO YES YES MIME Types for Audio Formats
Format MIME-type MP3 audio/mpeg Ogg audio/ogg Wav audio/wav تصاویر در HTML
Insert images
نحوه درج تصویر در سند HTML.Insert images from different locations
نحوه درج تصویر از پوشه ای دیگر یا از سروری دیگر.(شما می توانید مثال های بیشتری را در پایین این صفحه مشاهده کنید.)
تگ <img> و خصوصیت Src
در HTML، تصاویر به وسیله تگ <img> تعریف می شوند.
تگ <img> خالی می باشد(یک عنصر تهی می باشد)، به این معنی که این تگ تنها حاوی خصوصیت ها می شود و تگ بسته ای ندارد.
برای نمایش تصویر در صفحه وب، به خصوصیت src نیاز دارید. src مخفف کلمه source می باشد. مقدار این خصوصیت آدرس URL تصویری است که می خواهید نمایش داده شود.
فرم نوشتاری تگ img
<img src="/url" alt="some_text"/>URL اشاره دارد به مکانی که تصویر در آن ذخیره شده است. یک تصویر با نام boat.gif، در پوشه images در سایت beyamooz.com واقع شده که دارای URl به این صورت http://beyamooz.com/images/boat.gif می باشد.
مرورگر تصویری را که در تگ <img> وجود دارد را نشان می دهد. اگر شما تگ تصویر را بین دو پاراگراف قرار دهید، مرورگر ابتدا پاراگراف اول را نشان می دهد، سپس عکس و بعد از آن پاراگراف دوم را می آورد.
خصوصیت ALT
خصوصیت alt یک alternate text یا "متن جایگزین" را برای یک تصویر مشخص می کند، که اگر عکس نمایش داده نشود آن متن نمایش داده می شود.
ذکر خصوصیت alt الزامی است و بدون آن صفحه وب، استاندارد نخواهد بود.
<img src="/boat.gif" alt="Big Boat" />اگر کاربری به دلایلی (مثل کند بودن اتصال، خطایی در خصوصیت scr رخ دهد یا اگر کاربر از یک screen reader استفاده کند) نتواند عکس را مشاهده کند، خصوصیت alt اطلاعاتی در مورد عکس ارائه می دهد.
تنظیم طول و عرض یک عکس
خصوصیت height و width برای مشخص کردن طول و عرض یک عکس استفاده می شود.
مقدار این خصوصیت ها به طور پیش فرض بر اساس پیکسل مشخص می شوند.
<img src="/pulpit.jpg" alt="Pulpit rock" width="304" height="228" />نکته: این کار خوبی است که خصوصیت عرض و طول یک عکس را مشخص کنید. اگر این خصوصیت ها تنظیم شوند، زمانی که صفحه در حال لود شدن است، مکان مورد نیاز برای عکس در بین دیگر عناصر صفحه رزرو شده است. بنابراین طرح صفحه در حال لود با طرح کاملاً لود شده ی صفحه، تفاوتی نخواهد داشت. اما اگر این خصوصیات را تنظیم نکنید، مرورگر نمی تواند اندازه عکس را تشخیص دهد و اگر تصویری در بین متن باشد. جای آن تا لود کامل تصویر خالی خواهد ماند.
نکات اساسی و مفید
نکته: اگر یک فایل HTML حاوی ده تصویر باشد، یازده فایل (شامل 10 فایل تصویر و فایل HTML صفحه) برای نمایش صحیح صفحه نیاز می باشد. بارگذاری تصاویر زمان بر است، بنابراین پیشنهاد ما این است که: از تصاویر، با دقت استفاده کنید.
نکته: هنگامی که یک صفحه وب بارگذاری می شود، این مرورگر است که در آن لحظه، تصویر را از سرور دریافت می کند و آن را در صفحه درج می کند. بنابراین، مطمئن شوید که تصاویر به طور دقیق در همان نقطه نسبت به صفحه وب قرار گرفته باشند، در غیر این صورت کاربر عکس را نمی بیند و به جای آن یک آیکن با علامت ضربدر می بیند که نشان دهنده آن است که عکسی برای نمایش پیدا نشده است.
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
تگ abbr در HTML
مثال (تگ abbr در HTML)
استفاده از تگ <abbr> به شرح زیر:
The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
خودتان امتحان کنید »تعریف و کاربرد تگ abbr در HTML
تگ <abbr> مخفف عبارات یا کلمه ای که از حروف اول کلمات دیگر ترکیب شده را نشان می دهد، مانند "WWW" یا "NATO".
شما توسط تگ <abbr> (مخفف) می توانید اطلاعات مفیدی را به مرورگرها، موتور جستجو، سیستم ترجمه و هجی کننده ها ارائه دهید.
پشتیبانی مرورگرها از تگ abbr در HTML
عنصر <abbr> بله بله بله بله بله نکته ها و ترفندها
نکته: از title می توان استفاده کرد و عبارت کامل آن مخفف را در حالتی که موس روی آن قرار می گیرد نشان داد. (title یکی از ویژگی های عمومی تگ abbr در HTML است)
تفاوت بین HTML 4.01 و HTML5
تفاوتی وجود ندارد.
ویژگی های عمومی تگ abbr در HTML
تگ <abbr> از تمام ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ abbr در HTML
تگ <abbr> از تمام رویدادهای عمومی در HTML پشتیبانی می کند.
تگ acronym در HTML
مثال (تگ acronym در HTML)
مخفف مشخص شده مطابق زیر:
Can I get this <acronym title="as soon as possible">ASAP</acronym>?
خودتان امتحان کنید »تعریف و کاربرد تگ acronym در HTML
تگ <acronym> در HTML5پشتیبانی نمی شود شما می توانید از تگ <abbr> استفاده کنید.
تگ <acronym> مخفف یک عبارت را نشان می دهد.
این مخفف ها می توانند طوری بیان شوندکه به نظر می رسد از اول خودشان یک کلمه بوده اند مانندNATO، NASA، ASAP و GUI.
شما می توانید با علامت گذاری مخفف یک عبارت، اطلاعات مفیدی به مرورگرها، سیستم های مترجم، موتور های جستجو و هجی کننده ها ارائه دهید.
پشتیبانی مرورگرها از تگ acronym در HTML
عنصر <acronym> بله بله بله بله بله نکته ها و ترفندها
نکته:از title می توان استفاده کرد و عبارت کامل آن مخفف را در حالتی که موس روی آن قرار می گیرد نشان داد.
تفاوت بین HTML 4.01 و HTML5
تگ <acronym> در HTML5 پشتیبانی نمی شود.
تگ address در HTML
مثال (تگ address در HTML)
<address>
Written by <a href="mailto:این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید ">Jon Doe</a>.<br>
Visit us at:<br>
مثال.com<br>
Box 564, Disneyland<br>
USA
</address>
خودتان امتحان کنید »تعریف و کاربرد تگ address در HTML
تگ <address> اطلاعات مربوط به تماس نویسنده یا صاحب یک سند یا مقاله را نشان می دهد.
اگر تگ <address> در داخل تگ <body> قرار گیرد، اطلاعات مربوط به تماس آن سند را نشان می دهد.
اگر تگ <address> در داخل تگ <article> قرار گیرد، اطلاعات مربوط به تماس آن مقاله را نشان می دهد.
متن داخل تگ <address> معمولا به صورت italic (مورب) نمایش داده می شود و اکثر مرورگر ها به ابتدا و انتهای عنصر آدرس یک خط فاصله اضافه می کنند.
پشتیبانی مرورگرها از تگ address در HTML
عنصر <address> بله بله بله بله بله نکته ها و ترفندها
نکته: تگ <address> نباید برای آدرس پستی استفاده شود، مگر این که بخشی از اطلاعات مربوط به تماس باشد.
نکته: تگ <address> معمولا در کنار سایر اطلاعات در بخش <footer> قرار می گیرد.
تفاوت بین HTML 4.01 و HTML5
در HTML4.01 تگ <address> برای تگ <article> پشتیبانی نمی شود،در نتیجه محتویات آن به عنوان اطلاعات مربوط به تماس با نویسنده یا صاحب آن سند شناخته می شود.
ویژگی های عمومی تگ address در HTML
تگ <address> از ویژگی های عمومی در HTML پشتیبانی می کند.
رویدادهای عمومی تگ address در HTML
تگ <address> از رویدادهای عمومی در HTML پشتیبانی می کند.
تگ article در HTML
مثال (تگ article در HTML)
<article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser developed by Google,
released in 2008.</p>
</article>
خودتان امتحان کنید »تعریف و کاربرد تگ article در HTML
تگ <article> محتوایی مستقل و جامع را مشخص می کند.
یک Article باید به تنهایی دارای معنا و مفهوم باشد و بتوان آن را مستقل از سایر اجزای سایت در مکان های مختلف ارائه داد.
منابع بالقوه برای تگ <article> عبارتند از:
- متن پست ها در فروم ها
- متن مطالب جدید در وبلاگ ها
- متن خبری در سایت های خبری
- کامنت ها و نظرات
پشتیبانی مرورگرها از تگ article در HTML
اعدادی که در جدول زیر مشخص شده، اولین نسخه ی مرورگرهایی است که به طور کامل از این عنصر پشتیبانی می کنند.
عنصر <article> 6.0 9.0 4.0 5.0 11.1 تفاوت بین HTML 4.01 و HTML5
تگ <article> در HTML5 جدید است.
ویژگی های عمومی تگ article در HTML
تگ <article> از ویژگی های عمومی در HTML پشتیبانی می کند.
رویدادهای عمومی تگ article در HTML
تگ <article> از رویدادهای عمومی در HTML پشتیبانی می کند.
تگ aside در HTML
مثال (تگ aside در HTML)
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
خودتان امتحان کنید »تعریف و کاربرد تگ aside در HTML
از تگ aside به دو صورت می توان استفاده نمود:
- استفاده از تگ aside بصورت تو در تو در دیگر تگ ها: بعنوان مثال اگر از تگ aside داخل تگ articl استفاده می کنید، محتوایی که برای تگ aside در نظر می گیرید باید با محتوای تگ article ارتباط معنایی داشته باشد.
- استفاده از تگ aside برای نمایش ستون های سمت راست و چپ: در این حالت هر محتوایی که لازم است در ستون سمت راست و چپ قرار گیرد را می توان در تگ aside قرار داد. بعنوان مثال در سایت بیاموز، از ستون سمت راست برای نمایش لیست مطالب، تبلیغات و... استفاده شده است.
پشتیبانی مرورگرها از تگ aside در HTML
اعدادی که در جدول زیر مشخص شده، اولین نسخه ی مرورگرهایی است که به طور کامل از این عنصر پشتیبانی می کنند.
عنصر <aside> 6.0 9.0 4.0 5.0 11.1 تفاوت بین HTML 4.01 و HTML5
تگ <aside> یک تگ جدید در HTML5 است.
نکته ها و ترفندها
نکته: از تگ <aside> می توان به عنوان نوار کناری در یک مقاله استفاده کرد.
ویژگی های عمومی تگ aside در HTML
تگ <aside> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ aside در HTML
تگ <aside> از رویدادهای عمومی در HTML پشتیبانی می کند.
تگ audio در HTML
مثال (تگ audio در HTML)
پخش صدا:
<audio controls>
<source src="/horse.ogg" type="audio/ogg">
<source src="/horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
خودتان امتحان کنید »تعریف و کاربرد تگ audio در HTML
تگ <audio> تعیین صوت، مانند موسیقی یا دیگر جریان های صوتی را مشخص می کند.
در حال حاضر سه نوع فرمت صوتی در تگ <audio> پشتیبانی می شود که عبارتند از: MP3 ،Wav و Ogg:
Browser MP3 Wav Ogg Internet Explorer YES NO NO Chrome YES YES YES Firefox NO
Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP3YES YES Safari YES YES NO Opera NO YES YES انواع MIME برای فرمت های صوتی:
Format MIME-type MP3 audio/mpeg Ogg audio/ogg Wav audio/wav پشتیبانی مرورگرها از تگ audio در HTML
اعدادی که در جدول زیر مشخص شده، اولین نسخه ی مرورگرهایی است که به طور کامل از این عنصر پشتیبانی می کنند.
عنصر <audio> 4.0 9.0 3.5 4.0 10.5 تفاوت بین HTML 4.01 و HTML5
تگ <audio> در HTML5 جدید است.
نکته ها و ترفندها
نکته: هر نوشته ای که بین <audio> و <audio/> قرار گیرد، در مرورگر هایی که این تگ را پشتیبانی نمی کنند نمایش داده خواهد شد.
خصوصیت ها
جدید در HTML5.
خصوصیت مقدار توضیحات autoplay autoplay مشخص می کند که فایل صوتی مورد نظر به محض آماده شدن اجرا شود. controls controls مشخص می کند که کنترل های صوتی نمایش داده شوند. (مانند دکمه play ،pause و غیره) loop loop مشخص می کند که فایل صوتی هر بار پس از اتمام، دوباره اجرا شود. muted muted مشخص می کند که خروجی صدا خاموش باشد. preload auto
metadata
noneمشخص می کند که فایل صوتی در صورت نیاز چگونه بارگذاری شود. src URL URL مربوط به فایل صوتی را مشخص می کند. ویژگی های عمومی تگ audio در HTML
تگ <audio> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ audio در HTML
تگ <audio> از-رویدادهای عمومی در HTML پشتیبانی می کند.
آموزش های مرتبط
تگ base در HTML
مثال (تگ base در HTML)
مشخص کردن یک URL پیش فرض برای تمام لینک های موجود در صفحه:
<head>
<base href="http://www.beyamooz.com/images/" target="_blank">
</head>
<body>
<img src="/beyamooz_logo.png" width="24" height="39" alt="Stickman">
<a href="http://www.beyamooz.com">beyamopz</a>
</body>
خودتان امتحان کنید »تعریف و کاربرد
تگ <base> برای تمام URL های نسبی موجود در سند، یک URL هدف و پایه تعیین می کند.
در هرسند حد اکثر یک <base> می تواند وجود داشته باشد و این تگ باید در <head> قرار گیرد.
پشتیبانی مرورگرها
عنصر <base> بله بله بله بله بله نکته ها و ترفندها
نکته: تگ <base> را به عنوان اولین عنصر در <head> قرار دهید تا سایر اجزای موجود در این بخش از اطلاعات <base> استفاده کنند.
نکته: برای تگ <base> باید از صفت href یا target و یا هر دو استفاده کنیم.
تفاوت بین HTML 4.01 و HTML5
تفاوتی وجود ندارد.
تفاوت بین HTML و XHTML
در HTML تگ <base> تگ پایانی ندارد.
در XHTML تگ <base> باید با تگ پایانی خاتمه یابد.
خصوصیت ها
خصوصیت مقدار توضیحات href URL برای تمام URL های نسبی موجود در صفحه یک URL پایه مشخص می کند. target _blank
_parent
_self
_top
framenameبرای تمام لینک ها و فرم های موجود در صفحه یک target از قبل تعیین شده مشخص می کند. ویژگی های عمومی and Events
تگ <base> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی
تگ <base> از هیچ یک از رویدادهای عمومی پشتیبانی نمی کند.
آموزش های مرتبط
مرجع اشیاء اچ تی ام ال: تگ base در JavaScript
تگ basefont در HTML
مثال (تگ basefont در HTML)
مشخص کردن text-color و font-size به طور پیش فرض برای متن در صفحه:
<head>
<basefont color="red" size="5">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
خودتان امتحان کنید »تعریف و کاربرد تگ basefont در HTML
تگ <basefont> در HTML5 پشتیبانی نمی شود، می توانید از CSSاستفاده کنید.
تگ <basefont> به طور پیش فرض رنگ، سایز و فونت را به تمام متون موجود در سند اختصاص می دهد.
پشتیبانی مرورگرها از تگ basefont در HTML
عنصر <basefont> پشتیبانی نمی شود پشتیبانی نمی شود پشتیبانی نمی شود پشتیبانی نمی شود پشتیبانی نمی شود نکته: تگ <basefont> فقط در Internet Explorer 9 و نسخه های قبل تر از آن را پشتیبانی می کند.
تفاوت بین HTML 4.01 و HTML5
تگ <basefont> در HTML5 پشتیبانی نمی شود.
خودتان امتحان کنید-مثال
مثال CSS: نحوه ایجاد text-color از پیش تعیین شده برای یک صفحه
مثال CSS: نحوه ایجاد font-family از پیش تعیین شده برای یک صفحه
مثال CSS: نحوه ایجاد font-size از پیش تعیین شده برای یک صفحه
مطالعه بیشتر درباره ی: آموزش CSS-استایل دهی متن و آموزش CSS-استایل دهی فونت
خصوصیت های اختیاری
خصوصیت مقدار توضیحات color color در HTML5 پشتیبانی نمی شود.
مشخص کردن رنگ از پیش تعیین شده برای متن های موجود در سندface font_family در HTML5 پشتیبانی نمی شود.
مشخص کردن یک فونت از پیش تعیین شده برای متن های موجود در سندsize number در HTML5 پشتیبانی نمی شود.
مشخص کردن سایز از پیش تعیین شده برای متن های موجود در سندتگ bdi در HTML
مثال (تگ bdi در HTML)
نام های کاربری خارج از زبان اصلی صفحه:
<ul>
<li>User <bdi>hrefs</bdi>: 60 points</li>
<li>User <bdi>jdoe</bdi>: 80 points</li>
<li>User <bdi>إیان</bdi>: 90 points</li>
</ul>
خودتان امتحان کنید »تعریف و کاربرد تگ bdi در HTML
bdi مخفف Bi-Directiona Isolationl یعنی جدا سازی دو جهته.
تگ <bdi> برای جهت دادن به متن یا کاراکتراهایی که خارج از زبان اصلی صفحه بوده و از لحاظ فرمت با آن فرق دارد استفاده می شود.
این عنصر جهت تعبیه محتوایی که کاربر ایجاد می کند و جهت نوشتاری که زبان آن نامشخص است به کار می رود.
پشتیبانی مرورگرها از تگ bdi در HTML
اعدادی که در جدول زیر مشخص شده، اولین نسخه ی مرورگرهایی است که به طور کامل از این عنصر پشتیبانی می کنند.
عنصر <bdi> 16.0 پشتیبانی نمی شود 10.0 پشتیبانی نمی شود پشتیبانی نمی شود تفاوت بین HTML 4.01 و HTML5
تگ <bdi> یک تگ جدید در HTML5 است.
ویژگی های عمومی تگ bdi در HTML
تگ <bdi> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ bdi در HTML
تگ <bdi> از رویدادهای عمومی در HTML پشتیبانی می کند.
