html
تگ link در HTML
مثال (تگ link در HTML)
چگونه از تگ <link> برای اضافه کردن فایل CSS خارجی استفاده کنیم:
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
خودتان امتحان کنید »تعریف و کاربرد تگ link در HTML
تگ <link> ارتباط بین یک سند و یک منبع خارجی را تعریف می کند.
تگ <link> برای پیوند به style sheets (شیوه نامه های خارجی) استفاده می شود.
پشتیبانی مرورگرها از تگ link در HTML
عنصر <link> بله بله بله بله بله نکته: عنصر <link> یک عنصر خالی است، و فقط شامل attributes (خصوصیت ها) می باشد.
نکته: این عنصر تنها در قسمت head قرار می گیرد، اما می توان بارها از آن استفاده کرد.
تفاوت بین HTML 4.01 و HTML5
بعضی از خصوصیت های موجود در HTML 4.01 در HTML5 پشتیبانی نمی شوند.
خصوصیت "sizes" یک خصوصیت جدید در HTML5 است.
Differences Between HTML and XHTML
در HTML تگ <link> تگ پایانی ندارد.
در XHTML تگ <link> باید با یک تگ پایانی بسته شود.
خصوصیت ها
= جدید در HTML5.
خصوصیت مقدار توضیحات charset char_encoding در HTML5 پشتیبانی نمی شود.
کاراکترها را برای سند لینک شده کد گذاری می کند.href URL location یا آدرس سند لینک شده را مشخص می کند. hreflang language_code زبان مربوط به متن سند لینک شده را مشخص می کند. media media_query مشخص می کند که سند لینک شده برای چه دستگاهی بهینه شده است. rel alternate
archives
author
bookmark
external
first
help
icon
last
license
next
nofollow
noreferrer
pingback
prefetch
prev
search
sidebar
stylesheet
tag
upالزامی است. رابطه بین سند کنونی و سند لینک شده را مشخص می کند. rev reversed relationship در HTML5 پشتیبانی نمی شود.
رابطه بین سند لینک شده با سند کنونی را مشخص می کند.sizes HeightxWidth
anyاندازه یا سایز منبع لینک شده را مشخص می کند. فقط برای rel=icon target _blank
_self
_top
_parent
frame_nameدر HTML5 پشتیبانی نمی شود.
مشخص می کند که سند لینک شده کجا و در چه پنجره ای لود شود.type media_type نوع media سند لینک شده را مشخص می کند. ویژگی های عمومی تگ link در HTML
تگ <link> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ link در HTML
تگ <link> از رویدادهای عمومی در HTML پشتیبانی می کند.
آموزش های مرتبط
مرجع اشیاء اچ تی ام ال:تگ link در JavaScript
تگ noframes در HTML
مثال (تگ noframes در HTML)
یک صفحه با سه قاب با استفاده از تگ <noframes>:
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
<noframes>Sorry, your browser does not handle frames!</noframes>
</frameset>
</html>
خودتان امتحان کنید »تعریف و کاربرد تگ noframes در HTML
تگ <noframes> در HTML5 پشتیبانی نمی شود.
تگ <noframes> یک جایگزین برای مرورگرهایی است که از تگ <frame> پشتیبانی نمی کنند. تگ <noframes>می تواند تمامی عناصری که به صورت نرمال در عنصر <body> در صفحه HTML قرار می گیرد را شامل شود.
تگ <noframes> را می توان برای لینک کردن به یک نسخه بدون فرم از وب سایت و یا برای نمایش یک پیام به کاربران که اطلاع دهد چه فریم هایی مورد نیاز است، استفاده کرد.
تگ <noframes> داخل عنصر <frameset> قرار می گیرد.
نکته: اگر می خواهید یک صفحه حاوی frames، را Validate (اعتبار) کنید لازم است که <DOCTYPE> به یکی از دو حالت "HTML Frameset DTD" یا "XHTML Frameset DTD" تنظیم شده باشد.
پشتیبانی مرورگرها از تگ noframes در HTML
عنصر <noframes> بله بله بله بله بله تفاوت بین HTML 4.01 و HTML5
تگ <noframes> در HTML5 پشتیبانی نمی شود.
تفاوت بین HTML aو XHTML
نکته مهم: در XHTML Frameset DTD، متن داخل عنصر <noframes> باید داخل عنصر <body> محصور شود.
تگ param در HTML
مثال (تگ param در HTML)
تنظیم پارامتر "autoplay" با مقدار "true":
<object data="horse.wav">
<param name="autoplay" value="true">
</object>
خودتان امتحان کنید »تعریف و کاربرد تگ param در HTML
تگ <param> برای تعریف پارامترهای عنصر <object> استفاده می شود.
نکته: HTML 5 همچنین شامل دو عنصر جدید <audio> و <video> برای پخش صوت و تصویر می باشد.
پشتیبانی مرورگرها از تگ param در HTML
تگ <param> در همه مرورگرهای اصلی پشتیبانی می شود. با این حال، فرمت فایل تعریف شده در عنصر <object> ممکن است در همه مرورگرها پشتیبانی نشود.
عنصر <param> بله بله بله بله بله تفاوت بین HTML 4.01 و HTML5
خصوصیت "type" و "valuetype" در HTML5 پشتیبانی نمی شود.
تفاوت بین HTML و XHTML
در HTML تگ <param> تگ پایانی ندارد.
در XHTML تگ <param> باید با یک تگ پایانی بسته شود، مانند <param />.
خصوصیت ها
خصوصیت مقدار توضیحات name name یک name برای param مشخص می کند. type media_type در HTML5 پشتیبانی نمی شود.
نوع media پارامتر را مشخص می کند.value value یک مقدار برای param مشخص می کند. valuetype data
ref
objectدر HTML5 پشتیبانی نمی شود.
مشخص می کند مقدار مورد نظر از چه نوع است.ویژگی های عمومی تگ param در HTML
تگ <param> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ param در HTML
تگ <param> از رویدادهای عمومی در HTML پشتیبانی می کند.
آموزش های مرتبط
مرجع اشیاء اچ تی ام ال: تگ param در JavaScript
تگ progress در HTML
مثال (تگ progress در HTML)
مقدار پیشرفت یک دانلود:
<progress value="22" max="100"></progress>
خودتان امتحان کنید »تعریف و کاربرد تگ progress در HTML
تگ <progress> نشان دهنده پیشرفت یک پروسه یا کار است.
پشتیبانی مرورگرها از تگ progress در HTML
اعدادی که در جدول زیر مشخص شده، اولین نسخه ی مرورگرهایی است که به طور کامل از این عنصر پشتیبانی می کنند.
عنصر <progress> 8.0 10.0 16.0 6.0 11.0 تفاوت بین HTML 4.01 و HTML5
تگ <progress> یک تگ جدید در HTML5 است.
نکته ها و ترفندها
نکته: از تگ <progress> به وسیله JavaScript برای نمایش پیشرفت کار استفاده می کنیم.
نکته: از تگ <progress> برای نمایش دادن اندازه یا مقیاس استفاده نمی کنیم (به عنوان مثال فضای دیسک استفاده شده و یا ارتباط از نتیجه پرس و جو). برای این کار می توان از تگ <meter> استفاده کنیم.
خصوصیت ها
= جدید در HTML5.
خصوصیت مقدار توضیحات max number مشخص می کند که در کل چه مقدار لازم است که پروسه کامل شود. value number مشخص می کند که چه مقدار از پروسه پیش رفته است. ویژگی های عمومی تگ progress در HTML
تگ <proress> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ progress در HTML
تگ <progress> از رویدادهای عمومی در HTML پشتیبانی می کند.
آموزش های مرتبط
مرجع اشیاء اچ تی ام ال: تگ progress در JavaScript
تگ ruby در HTML
تعریف و کاربرد تگ ruby در HTML
تگ <ruby> حاشیه نویسی ruby را مشخص می کند.
حاشیه نویسی ruby برای نمایش تلفظ کاراکترهای زبان های آسیای شرقی کاربرد دارد.
تگ <ruby> همراه با تگ <rp> و تگ <rt> استفاده می شود: تگ <ruby> شامل یک یا چند کاراکتر است که نیاز به تفسیر یا تلفظ صحیح کارکترها دارد، و تگ <rt> برای دادن اطلاعات و اختیار به تگ <rp> که چه چیزی نشان داده شود، هنگامی که مرورگر از حاشیه نویسی ruby پشتیبانی نکند.
پشتیبانی مرورگرها از تگ ruby در HTML
اعدادی که در جدول زیر مشخص شده، اولین نسخه ی مرورگرهایی است که به طور کامل از این عنصر پشتیبانی می کنند.
عنصر <ruby> 5.0 5.5 38.0 5.0 15.0 تفاوت بین HTML 4.01 و HTML5
تگ <ruby> یک تگ جدید در HTML5 است.
ویژگی های عمومی تگ ruby در HTML
تگ <ruby> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ ruby در HTML
تگ <ruby> از رویدادهای عمومی در HTML پشتیبانی می کند.
تگ samp در HTML
مثال (تگ samp در HTML)
قالب متن در یک سند:
<samp>Sample output from a computer program</samp>
خودتان امتحان کنید »تعریف و کاربرد تگ samp در HTML
تگ <samp> یک تگ عبارتی است. نمونه خروجی از یک برنامه کامپیوتری را مشخص می کند.
نکته: استفاده از این تگ توصیه نمی شود. اما برای رسیدن به نتایج بهتر می توانید از CSSاستفاده کنید.
تمام تگ های تعریفی:
Tag توضیحات <em> متن را به صورت emphasized نمایش می دهد. <strong> متن را به صورت strong نمایش می دهد. <dfn> جهت تعریف definition term <code> متن را به صورت computer code نمایش می دهد. <samp> متن را به صورت sample computer code نمایش می دهد. <kbd> متن را به صورت keyboard نمایش می دهد. <var> متن را به صورت variable نمایش می دهد. پشتیبانی مرورگرها از تگ samp در HTML
عنصر <samp> بله بله بله بله بله تفاوت بین HTML 4.01 و HTML5
تفاوتی وجود ندارد.
ویژگی های عمومی تگ samp در HTML
تگ <samp> از ویژگی های عمومی در HTML پشتیبانی می کند.
رویدادهای عمومی تگ samp در HTML
تگ <samp> از رویدادهای عمومی در HTML پشتیبانی می کند.
آموزش های مرتبط
تگ section در HTML
مثال (تگ section در HTML)
یک بخش یا قسمت مجزا در یک سند وب:
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
خودتان امتحان کنید »تعریف و کاربرد تگ section در HTML
تگ <section> تعیین یک بخش یا قسمت مجزا در یک سند وب، مانند فصل، هدر، پاورقی، و یا هر بخش دیگر از سند را مشخص می کند.
پشتیبانی مرورگرها از تگ section در HTML
اعدادی که در جدول زیر مشخص شده، اولین نسخه ی مرورگرهایی است که به طور کامل از این عنصر پشتیبانی می کنند.
عنصر <section> 6.0 9.0 4.0 5.0 11.1 تفاوت بین HTML 4.01 و HTML5
تگ <section> یک تگ جدید در HTML5 است.
ویژگی های عمومی تگ section در HTML
تگ <section> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ section در HTML
تگ <section> از رویدادهای عمومی در HTML پشتیبانی می کند.
تگ select در HTML
مثال (تگ select در HTML)
یک لیست drop-down برای چهار options:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
خودتان امتحان کنید »تعریف و کاربرد تگ select در HTML
تگ <select> برای ایجاد یک لیست کشویی (drop-down) استفاده می شود.
تگ <option> درون عنصر <select> گزینه های موجود در لیست را تعریف می کند.
پشتیبانی مرورگرها از تگ select در HTML
عنصر <select> بله بله بله بله بله نکته ها و ترفندها
نکته: عنصر <select> برای کنترل فرم است، و در یک فرم می تواند برای جمع آوری ورودی کاربر استفاده شود.
تفاوت بین HTML 4.01 و HTML5
برخی از خصوصیت های جدید در HTML5 اضافه شده است.
خصوصیت ها
= جدید در HTML5.
خصوصیت مقدار توضیحات autofocus autofocus مشخص می کند که بعد از لود شدن صفحه، مکان نما بصورت پیشفرض روی آن فیلد قرار گیرد. disabled disabled مشخص می کند که لیست drop-down باید غیر فعال باشد. form form_id فرم یا فرم هایی که فیلد مورد نظر به آن ها تعلق دارد را مشخص می کند. multiple multiple مشخص می کند که مقادیر متعددی را می توان یکمرتبه انتخاب کرد. name name یک name برای لیست drop-down تعریف می کند. required required مشخص می کند که فیلد ورودی قبل از ارسال به سرور باید حتما پر شده باشد. size number تعداد مقادیر قابل مشاهده در لیست را مشخص می کند. ویژگی های عمومی تگ select در HTML
تگ <select> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ select در HTML
تگ <select> از رویدادهای عمومی در HTML پشتیبانی می کند.
آموزش های مرتبط
مرجع اشیاء اچ تی ام ال: تگ select در JavaScript
تگ source در HTML
مثال (تگ source در HTML)
پخش کننده های صوتی با دو منبع فایل، که مرورگر یکی را انتخاب می کند،بر اساس نوع کدک یا نوع رسانه ای که پشتیبانی می کند:
<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>
خودتان امتحان کنید »تعریف و کاربرد تگ source در HTML
تگ <source> برای تعیین منابع چند رسانه ای برای عناصر رسانه هایی، مانند<video> و <audio> استفاده می شود.
تگ <source> به شما اجازه می دهد که سورس های متفاوت صوتی یا ویدیویی برای مرورگر تعیین کنید تا بر اساس نوع کدک یا نوع رسانه ای که پشتیبانی می کند، یکی را انتخاب کند.
پشتیبانی مرورگرها از تگ source در HTML
اعدادی که در جدول زیر مشخص شده، اولین نسخه ی مرورگرهایی است که به طور کامل از این عنصر پشتیبانی می کنند.
عنصر <source> 4.0 9.0 3.5 4.0 10.5 تفاوت بین HTML 4.01 و HTML5
تگ <source> یک تگ جدید در HTML5 است.
خصوصیت ها
= جدید در HTML5.
خصوصیت مقدار توضیحات media media_query نوع منبع media را مشخص می کند. src URL آدرس فایل صوتی یا تصویری را مشخص می کند. type media_type نوع media را برای منبع media مشخص می کند. ویژگی های عمومی تگ source در HTML
تگ <source> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ source در HTML
تگ <source> از-رویدادهای عمومی در HTML پشتیبانی می کند.
آموزش های مرتبط
مرجع اشیاء اچ تی ام ال: تگ source در JavaScript
تگ strike در HTML
مثال (تگ strike در HTML)
مشخص کردن یک متن خط خورده به شرح زیر:
<p>Version 2.0 is <strike>not yet available!</strike> now available!</p>
خودتان امتحان کنید »هتعریف و کاربرد تگ strike در HTML
تگ <strike> در HTML5 پشتیبانی نمی شود. شما می توانید به جای آن از تگ <del> استفاده کنید.
تگ <strike> یک متن خط خورده را تعریف می کند.
پشتیبانی مرورگرها از تگ strike در HTML
عنصر <strike> بله بله بله بله بله
تگ strong در HTML
تعریف و کاربرد تگ strong در HTML
تگ <strong> یک تگ تعریفی است و متن مهم را تعریف می کند.
نکته: استفاده از این تگ توصیه نمی شود. اما برای رسیدن به نتایج بهتر می توانید از CSSاستفاده کنید.
همه تگ های تعریفی:
Tag توضیحات <em> متن را به صورت emphasized نمایش می دهد. <strong> متن را به صورت strong نمایش می دهد. <dfn> جهت تعریف definition term <code> متن را به صورت computer code نمایش می دهد. <samp> متن را به صورت sample computer code نمایش می دهد. <kbd> متن را به صورت keyboard نمایش می دهد. <var> متن را به صورت variable نمایش می دهد. پشتیبانی مرورگرها از تگ strong در HTML
عنصر <strong> بله بله بله بله بله تفاوت بین HTML 4.01 و HTML5
در HTML 4.01، تگ <strong> متن را به صورت strong emphasized نشان می دهد، اما در HTML5، متن مهم را معرفی می کند.
ویژگی های عمومی تگ strong در HTML
تگ <strong> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ strong در HTML
تگ <strong> از رویدادهای عمومی در HTML پشتیبانی می کند.
آموزش های مرتبط
تگ sub در HTML
مثال (تگ sub در HTML)
متن زیرنویس:
<p>This text contains <sub>subscript</sub> text.</p>
خودتان امتحان کنید »تعریف و کاربرد تگ sub در HTML
تگ <sub> متن را به صورت زیرنویس تعریف می کند. زیرنویس ها معمولا به اندازه ی نصف ارتفاع یک کاراکتر پایین تر از بقیه ی کاراکتر قرار می گیرند و گاهی اوقات در یک فونت کوچکتر ارائه می شوند . از زیرنویس می توان برای نمایش فرمول شیمیایی استفاده کرد، مانند: H2O.
نکته:از تگ <sup> برای تعریف متن به صورت بالانویس استفاده می کنیم.
پشتیبانی مرورگرها از تگ sub در HTML
عنصر <sub> بله بله بله بله بله تفاوت بین HTML 4.01 و HTML5
تفاوتی وجود ندارد.
ویژگی های عمومی تگ sub در HTML
تگ <sub> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ sub در HTML
تگ <sub> از رویدادهای عمومی در HTML پشتیبانی می کند.
تگ summary در HTML
مثال (تگ summary در HTML)
استفاده از عنصر <summary>:
<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
خودتان امتحان کنید »تعریف و کاربرد تگ summary در HTML
تگ <summary> یک عنوان قابل مشاهده برای عنصر <details> تعریف می کند. که عنوان را می توان با استفاده از کلیک کردن باز یا بسته نمایید.
پشتیبانی مرورگرها از تگ summary در HTML
اعدادی که در جدول زیر مشخص شده، اولین نسخه ی مرورگرهایی است که به طور کامل از این عنصر پشتیبانی می کنند.
عنصر <summary> 12.0 پشتیبانی نمی شود پشتیبانی نمی شود 6.0 15.0 تفاوت بین HTML 4.01 و HTML5
تگ <summary> یک تگ جدید در HTML5 است.
نکته ها و ترفندها
نکته: تگ <summary> باید به صورت اولین عنصر فرزند تگ <details> قرار گیرد.
ویژگی های عمومی تگ summary در HTML
تگ <summary> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ summary در HTML
تگ <summary> از رویدادهای عمومی در HTML پشتیبانی می کند.
جابه جا کردن عناصر در HTML5
کشیدن (Drag) و انداختن (Drop) عناصر، بخشی از استاندارد html5 است.
کشیدن (Drag) و انداختن (Drop)
کشیدن و انداختن عناصر یکی از ویژگی های خیلی معمول HTML5است. منظور از کشیدن و انداختن زمانی است که یکی از اشیاء داخل صفحه را بگیرید و به محلی دیگر بکشید و رها نمایید.
در HTML5 هر عنصری در صفحه می تواند قابل کشیدن (draggable) باشد.
پشتیبانی مرورگرها
مرورگرهای Internet Explorer 9+, Firefox, Opera, Chrome, Safari جابه جا کردن عناصر را پشتیبانی می کنند.
توجه: Safari 5.1.2 و نسخه های قدیمی تر آن، جابه جا کردن عناصر را پشتیبانی نمی کنند.
مثال کشیدن و انداختن عناصر در HTML5
مثال زیر یک مثال ساده از کشیدن و انداختن است:
مثال (جابه جا کردن عناصر در HTML5)
<!DOCTYPE HTML>خودتان امتحان کنید »
<html>
<head>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="/img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>مثال بالا ممکن است کمی پیچیده بنظر برسد، اما اجازه بدهید بعد از مرور تمام بخش های آن در پایین قضاوت نمایید.
عنصر مورد نظر را قابل جا به جا کردن کنید
در مرحله اول باید کاری کنید تا عنصر مورد نظرتان، قابل جا به جا شدن باشد.
برای این منظور باید خاصیت drggable را با مقدار true تنظیم نمایید:
<img draggable="true">تعیین عنصری که می خواهید جا به جا شود
در مرحله دوم باید عنصری را که می خواهید جا به جا شود و همچنین اتفاقی که پس از کشیدن آن قرار است بیافتد را تعیین نمایید.
در کد بالا، خاصیت ondragstart عنصر <img>، را با رویداد (drag(event تنظیم کرده ایم. این رویداد تعیین می کند چه عنصری می خواهد جابه جا شود. این رویداد زمانی اتفاق می افتد که شما دکمه موس را بر روی عکس کلیک کرده و سعی می کنید آن را بکشید.
متد ()dataTransfer.setData اطلاعات عنصری که قرار است کشیده شود، یعنی id آن را دریافت کرده و در حافظه مرورگر قرار می د هد. این id از نوع "Text" بوده و مقدار آن در این مثال drag1 است.
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}عنصر جابه جا شده را کجا می توان رها نمود
رویداد ondragover مشخص کننده محلی است که داده ی جابه جا شده را می توان رها نمود.
بصورت پیشفرض، عناصر و داده ها را نمی توان جابه جا نمود. بنابراین باید از این کار جلوگیری نمود.
این کار هنگامی که رویداد ondragover اتفاق می افتد، با صدا زدن متد ()ev.preventDefault انجام می شود:
function allowDrop(ev)
{
ev.preventDefault();
}رها کردن عنصر جابه جا شده
پس از انتخاب عنصر و جابه جا کردن آن، باید مکانی که فرود (drop) می آید را تعیین کرده و سپس آنرا رها نمایید.
در مثال بالا، هنگامی که عکس را در مکان تعیین شده رها می کنید، رویداد ondrop تگ <div> رخ داده و تابع drop را فراخوانی می کند.
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}توضیح کد:
- بصورت پیشفرض، عناصر و داده ها را نمی توان جابه جا نمود. بنابراین با صدا زدن متد ()ev.preventDefault از این کار جلوگیری می کنیم.
- توسط متد ()ev.dataTransfer.getData، شناسه یا همان id عنصر drag شده را دریافت می کنیم. این متد شناسه همان نوع داده ای را که در متد ()setData تنظیم کردید، برمی گرداند.
- این id از نوع "Text" بوده و مقدار آن در این مثال drag1 است.
- متد ()ev.target.appendChild عنصر انتخاب شده را به تگ div مرتبط می سازد.
مثال - خودتان امتحان کنید
جابه جا کرد عکس بین دو محل
در این مثال، نشان داده شده است که چگونه یک عکس را بین دو عنصر <div> جابه جا کنیم.جداول در HTML
جداول در HTML
کالری نام میوه 44% سیب 23% موز 13% پرتقال 10% دیگر موارد Tables
نحوه ایجاد جداول در سند HTML.Table borders
چگونه لبه های جدول را تنظیم کنیم.(مثال های بیشتر را می توانید در پایین صفحه ببینید.)
جداول در HTML
جداول به وسیله تگ <table> تعریف می شوند.
یک جدول حاوی سطرهایی می باشد (که با تگ <tr> مشخص می شوند) و هر سطر شامل تعدادی سلول است (که با تگ <td> مشخص می شوند)
td مخفف "table data" است و حاوی داده های سلول ها می باشد. تگ <td> می تواند حاوی متن، لینک، تصویر، لیست ها، فرم ها، جداول دیگر و غیره باشد.
<table>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>کد HTML بالا چگونه در یک مرورگر دیده می شود:
row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 خصوصیت Border
اگر شما خصوصیت 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 می توانید لبه ها را تنظیم نمایید:
بیاد داشته باشید که لبه ها برای دور جدول و تمام سلول های جدول، تنظیم خواهد شد.
تبدیل لبه های دو خطی به یک خطی
با استفاده از خصوصیت border-collapse در CSS می توانید، لبه های دوخطی جدول را به لبه های یک خطی تبدیل کنید:
مثال (جداول در HTML)
<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse
}
</style>
خودتان امتحان کنید »تنظیم فاصله ی محتوای سلول ها از لبه
با استفاده از خصوصیت padding در CSS می توانید فاصله محتویات یک سلول را از لبه هایش تنظیم کنید.
اگر این خصوصیت را تنظیم نکنید، فاصله محتوی تا لبه، صفر در نظر گرفته می شود.
تنظیم فاصله سلول ها از یکدیگر
با استفاده از خصوصیت border-spacing در CSS می توانید فاصله سلول ها از یکدیگر را تنظیم کنید.
عنوان جدول (Header)
اطلاعات سرتیتر در یک جدول به وسیله تگ <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، می توانیم سرتیترهای جدول بالا را در سمت چپ تنظیم کنیم:
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) را گروه بندی می کند چکیده مطالب HTML در یک نگاه
چکیده مطالب html در یک نگاه
خلاصه ای از مطالب ارائه شده در مورد HTML در زیر ارائه شده است. آنرا چاپ کنید، تا کنید و در مکانی امن قرار دهید.
تگ های اصلی یک سند HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of document goes here</title>
</head>
<body>
Visible text goes here...
</body>
</html>تگ عنوان در HTML
<h1>Largest Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>تگ های متن در HTML
<p>This is a paragraph</p>
<br /> (line break)
<hr /> (horizontal rule)
<pre>This text is preformatted</pre>تگ های فرمت بندی متن در HTML
<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
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
<ul>
<li>Item</li>
<li>Item</li>
</ul>تگ لیست های مرتب در HTML
<ol>
<li>First item</li>
<li>Second item</li>
</ol>تگ لیست های تعریفی در HTML
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>تگ جدول در HTML
<table border="1">
<tr>
<th>Tableheader</th>
<th>Tableheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>تگ تصویر در HTML
<img src="/URL" alt="Alternate Text" height="42" width="42">تگ Styles در HTML
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>A block-level section in a document</div>
<span>An inline section in a document</span>تگ iframe در HTML (صفحه ای داخل صفحه جاری)
<iframe src="/demo_iframe.htm"></iframe>تگ فرم در HTML (ارسال اطلاعات به سرور)
<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
< is the same as <
> is the same as >
© is the same as ©خصوصیت ها در HTML
خصوصیت ها اطلاعات بیشتری در مورد عناصر HTML می دهند.
خصوصیت ها در HTML
- تمام عناصر در HTML دارای خصوصیت هستند.
- خصوصیت ها اطلاعات بیشتری در مورد یک عنصر می دهند.
- خصوصیت ها همیشه در تگ شروع نوشته می شوند.
- خصوصیت ها به صورت روبرو نوشته می شوند: ("مقدار"=نام خصوصیت)
مثال:
لینک ها در HTML با تگ <a> تعریف می شوند. آدرس لینک به وسیله خصوصیت href مشخص می شود.
همیشه مقدار خصوصیت را در کوتیشن بنویسید
مقدار خصوصیت ها همیشه باید درون کوتیشن قرار بگیرد.
دابل کوتیشن رایج تر است، اما تک کوتیشن نیز مجاز است.
نکته: در بعضی حالت های خاص، هنگامی که مقدار خصوصیتی خود حاوی کوتیشن نیز هست، ضروری است که از تک کوتیشن استفاده کنیم.
مثل: 'name='John "ShotGun" Nelson
نکته: از حروف کوچک برای خصوصیت ها استفاده کنید
نام خصوصیت و مقدار آن حساس به حروف نمی باشند.
اما کنسرسیوم World Wide Web یا (w3c) حالت کوچک حروف را برای نام و مقدار خصوصیت ها در HTML 4 توصیه می کند.
در نسخه های جدید (HTML (X نوشتن حروف کوچک برای خصوصیت ها و مقادیرشان استاندارد شده است.
در زیر لیستی از بعضی خصوصیت ها که برای عناصر زیادی در HTML استاندارد هستند ارائه شده است:
خصوصیت مقدار توضیحات class نام class
یک class برای عنصر مشخص می کند.
id id id منحصر به فردی را برای عنصر مشخص می کند.
style تعریف style
یک style درون تگی برای عنصر مشخص می کند.
title متنی که در tooltip نمایش داده می شود
اطلاعات اضافه ای را برای یک عنصر مشخص می کند (به صورت یک tool tip نشان داده می شود).
خلاصه مطالب HTML
خلاصه HTML
این خود آموز به شما نحوه استفاده از HTML را برای ایجاد وب سایتتان آموزش داده است.
HTML یک زبان علامت گذاری جهانی برای وب است. HTML به شما اجازه می دهد متن را فرمت دهی کنید، اشیاء گرافیکی را به صفحه اضافه کنید، لینک هایی ایجاد کنید، فرم ها، فریم ها و جداول و... را وارد کنید و آنرا در یک فایل متنی که هر مرورگری قادر به خواندن و نمایش دادن آن می باشد ذخیره کنید.
کلید کار با HTML تگ ها هستند که تعیین می کند که چه محتوایی ایجاد شود.
حال که HTML را آموختید، قدم بعد چیست؟
1- CSS
CSS یا (Cascading Style Sheets) چگونگی نمایش عناصر HTML را مشخص می کند.
به وسیله CSS، تمام فرمت دهی ها در سند HTML می تواند برداشته شود و در یک فایل جداگانه ذخیره شود.
برای یادگیری نحوه ایجاد style sheet ها، به آموزش CSS سری بزنید.
2- JavaScript
JavaScript می تواند وب سایت شما را پویاتر بسازد.
یک وب سایت ایستا هنگامی جذاب است که بخواهید تنها اطلاعات خام را نشان دهید اما یک وب سایت داینامیک می تواند به وقایع واکنش نشان دهد و با کاربران تعامل داشته باشد.
JavaScript محبوب ترین زبان اسکریپت نویسی تحت وب است و با عمده مرورگرها کار می کند.
اگر می خواهید در مورد JavaScript بیشتر بدانید به JS HOME مراجعه کنید.
رمزنگاری url در HTML
رمزنگاری URL، کاراکترها را به فرمتی تبدیل می کند که بتواند بر روی اینترنت مخابره شود.
URL Encoding (رمزنگاری URL)
URL ها تنها به وسیله مجموعه کاراکترهای ASCII می توانند بر روی اینترنت فرستاده شوند.
از آنجایی که URLها اغلب حاوی کاراکترهایی خارج از مجموعه ASCII هستند، باید به فرمت ASCII معتبری تبدیل شوند.
برای رمزنگاری URL، کاراکترهایی که خارج از مجموعه ASCII هستند، با یک علامت % به همراه دو رقم در مبنای هگزا دسیمال جایگزین می شوند.
URLها نمی توانند حاوی space باشند. به طور معمول space را با علامت "+" جایگزین می کنند.
اگر دکمه Submit را در زیر فشار دهید، مرورگر قبل از اینکه ورودی را به سرور ارسال کند آنرا رمزنگاری خواهد کرد و یک صفحه در سرور، محتویات تکس باکس را نمایش خواهد داد.
ورودی های دیگری را امتحان کنید و دکمه Submit را فشار دهید.
مثال URL Encoding
Character URL-encoding € %80 £ %A3 © %A9 ® %AE À %C0 Á %C1 Â %C2 Ã %C3 Ä %C4 Å %C5 رنگ ها در HTML
رنگ ها با ترکیب نورهای قرمز، آبی و سبز نمایش داده می شوند.
مقادیر رنگ ها در CSS
برای ترکیب مقدار رنگ های قرمز، سبز و آبی در 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) شانزده میلیون رنگ مختلف
ترکیب قرمز، سبز و آبی با مقادیر صفر تا 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) سایه های خاکستری
رنگ های خاکستری با استفاده از مقدار رنگی مساوی از منبع های نوری ایجاد می شوند.
برای اینکه کار انتخاب سایه مناسب را برای شما راحت تر کرده باشیم، جدولی از سایه های خاکستری را برای شما ایجاد کرده ایم.
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) رنگ های امن در وب
سال ها پیش، هنگامی که کامپیوتر ها حداکثر 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