فیلم آموزش html
تگ input در HTML
مثال (تگ input در HTML)
یک فرم HTML با سه فیلد input، دو text fields و یک دکمه submit:
<form action="demo_form.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
خودتان امتحان کنید »تعریف و کاربرد تگ input در HTML
تگ <input> مشخص کننده یک فیلد ورودی، که کاربر می تواند در آن اطلاعات را وارد کند.
عنصر <input> به منظور اعلام کنترل ورودی داخل عنصر <form> قرار می گیرد، که کاربر می تواند اطلاعات را وارد کند.
یک فیلد input را می توان در زمینه های گوناگون، بسته به نوع خصوصیت type استفاده کرد.
پشتیبانی مرورگرها از تگ input در HTML
عنصر <input> بله بله بله بله بله نکته ها و ترفندها
نکته: عنصر <input> خالی بوده و تنها شامل ویژگی ها می باشد.
نکته: استفاده از عنصر <label> برای تعریف یک برچسب برای عنصر <input> است.
تفاوت بین HTML 4.01 و HTML5
ویژگی "align" در HTML5 پشتیبانی نمی شود.
در HTML5، تگ <input> چندین ویژگی جدید دارد و برای ویژگی type چندین مقدار جدید تعریف شده است.
تفاوت بین HTML و XHTML
در HTML، تگ <input> تگ پایانی ندارد.
در XHTML، تگ <input> باید با یک تگ پایانی بسته شود. مانند: <input />
خصوصیت ها
= جدید در HTML5.
خصوصیت مقدار توضیحات accept file_extension
audio/*
video/*
image/*
media_typeمشخص کننده نوع فایلی که سرور آن را می پذیرد.
(فقط برای نوع "file")
align left
right
top
middle
bottomدر HTML5 پشتیبانی نمی شود.
مشخص می کند که image input در چه جهتی تراز شود.
(فقط برای نوع "image")
alt text برای image یک متن جایگزین مشخص می کند. (فقط برای نوع "image") autocomplete on
offاین خصوصیت مشخص می کند که مقادیر یک فرم یا یک فیلد متنی بصورت اتوماتیک پر شود یا نه. autofocus autofocus این خصوصیت باعث می شود که بعد از لود شدن صفحه، مکان نما بصورت پیشفرض روی آن فیلد قرار گیرد. checked checked مشخص می کند که عنصر <input > در هنگام لود شدن صفحه به صورت پیش فرض انتخاب شده باشد.
(برای نوع "checkbox" یا "radio")disabled disabled مشخص می کند که عنصر <input> باید غیر فعال باشد. form form_id این خصوصیت فرم یا فرم هایی که فیلد مورد نظر به آن ها تعلق دارد را مشخص می کند. formaction URL آدرس فایلی که مقادیر کنترل های ورودی بعد از ارسال در آن پردازش می شوند را مشخص می کند.( برای انواع ورودی submit و image استفاده می شود) formenctype application/x-www-form-urlencoded
multipart/form-data
text/plainچگونگی رمز کردن داده های فرم، هنگام ارسال را مشخص می کند.(برای انواع ورودی submit و image استفاده می شود) formmethod get
postمشخص می کند که ارسال اطلاعات از فرم HTML به سرور به چه شکل باشد. (برای انواع ورودی submit و image استفاده می شود) formnovalidate formnovalidate این خصوصیت نشان می دهد که فیلدهای ورودی برای ارسال به سرور نیاز به اعتبارسنجی ندارد. formtarget _blank
_self
_parent
_top
framenameنشان می دهد، پاسخی که از سرور دریافت شده است کجا نمایش داده شود. (برای انواع ورودی submit و image استفاده می شود) height pixels ارتفاع عنصر <input> را مشخص می کند.
(فقط برای نوع "image")list datalist_id این خصوصیت یک datalist را به یک فیلد متنی متصل می کند. max number
dateمقدار maximum برای عنصر <input> را مشخص می کند. maxlength number تعداد maximum کاراکتری که عنصر <input> در خود جای می دهد. min number
dateمقدار minimum برای عنصر<input> را مشخص می کند. multiple multiple مشخص می کند که کاربر می تواند بیش از یک مقدار در عنصر <input> وارد کند. name text یک نام برای عنصر <input> مشخص می کند. pattern regexp الگویی برای بررسی اعتبار یک فیلد ورودی مشخص می کند. placeholder text یک عبارت را به صورت کم رنگ در داخل فیلد ورودی می نویسد که با فوکوس روی آن فیلد از بین می رود و فیلد خالی می شود. readonly readonly مشخص می کند که فیلد input فقط خواندنی است. required required مشخص می کند که پر کردن فیلد input قبل از ارسال فرم باید انجام شود. size number مشخص می کند که چه تعداد کاراکتر در عنصر<input> جای کیرد. src URL مشخص کننده URL تصویری که به عنوان دکمه ارسال استفاده می شود.(فقط برای نوع "image") step number تعداد فواصل قانونی برای یک فیلد input را مشخص می کند. type button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
weekمشخص کننده نوع عنصر<input> و اینکه چگونه نمایش داده شود. value text برای عنصر <input> مقداری را مشخص می کند.
width pixels عرض عنصر <input> را مشخص می کند. (فقط برای نوع "image") ویژگی های عمومی تگ input در HTML
تگ <input> از ویژگی های عمومی در HTML پشتیبانی می کند.
رویدادهای عمومی تگ input در HTML
تگ <input> از رویدادهای عمومی در HTML پشتیبانی می کند.
آموزش های مرتبط
مرجع اشیاء اچ تی ام ال:
- تگ input-button در JavaScript
- تگ input-checkbox در JavaScript
- تگ input-color در JavaScript
- تگ input-date در JavaScript
- تگ input-datetime در JavaScript
- تگ input-datetime-local
- تگ input-email در JavaScript
- تگ input-file در JavaScript
- تگ input-hidden در JavaScript
- تگ input-image در JavaScript
- تگ input-month در JavaScript
- تگ input-number در JavaScript
- تگ input-password در JavaScript
- تگ input-range در JavaScript
- تگ input-radio در JavaScript
- تگ input-reset در JavaScript
- تگ input-search در JavaScript
- تگ input-submit در JavaScript
- تگ input-text در JavaScript
- تگ input-time در JavaScript
- تگ input-url در JavaScript
- تگ input-week در JavaScript
تگ ins در HTML
مثال (تگ ins در HTML)
یک متن با قسمت هایی که حذف شده و قسمت های جدیدی به آن اضافه شده است:
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
خودتان امتحان کنید »تعریف و کاربرد تگ ins در HTML
تگ <ins> قطعه متنی که داخل سند قرار داده شده است را مشخص می کند.
نکته: تگ <del> متن حذف شده را نشانه گذاری می کند.
مرورگر ها به طور معمول یک خط از متن حذف شده را هدف قرار داده و خطی را زیر متن درج می کنند.
پشتیبانی مرورگرها از تگ ins در HTML
عنصر <ins> بله بله بله بله بله نکته ها و ترفندها
نکته: از تگ <ins> همراه با تگ <del> برای نشانه گذاری متن حذف شده و سایر تغییرات ایجاد شده استفاده نمایید.
تفاوت بین HTML 4.01 و HTML5
تفاوتی وجود ندارد.
خصوصیت ها
خصوصیت مقدار توضیحات cite URL مشخص کننده یک URL برای سندی است که توضیح می دهد چرا متن مورد نظر درج شده یا تغییر یافته است. datetime YYYY-MM-DDThh:mm:ssTZD مشخص می کند که متن مورد نظر در چه زمان وتاریخی درج شده یا تغییر یافته است. ویژگی های عمومی تگ ins در HTML
تگ <ins> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ ins در HTML
تگ <ins> از رویدادهای عمومی در HTML پشتیبانی می کند.
آموزش های مرتبط
مرجع اشیاء اچ تی ام ال: تگ ins در JavaScript
تگ kbd در HTML
تعریف و کاربرد تگ kbd در HTML
تگ <kbd> یک تگ عبارتی است و ورودی صفحه کلید را مشخص می کند.
نکته: استفاده از این تگ توصیه نمی شود، اما برای رسیدن به نتایج بهتر از CSS استفاده می کنیم.
تمام تگ های عبارتی:
Tag توضیحات <em> متن را به صورت emphasized نمایش می دهد. <strong> متن را به صورت strong نمایش می دهد. <dfn> جهت تعریف definition term <code> متن را به صورت computer code نمایش می دهد. <samp> متن را به صورت sample computer code نمایش می دهد. <kbd> متن را به صورت keyboard نمایش می دهد. <var> متن را به صورت variable نمایش می دهد. پشتیبانی مرورگرها از تگ kbd در HTML
عنصر <kbd> بله بله بله بله بله تفاوت بین HTML 4.01 و HTML5
تفاوتی وجود ندارد.
ویژگی های عمومی تگ kbd در HTML
تگ <kbd> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ kbd در HTML
تگ <kbd> از رویدادهای عمومی در HTML پشتیبانی می کند.
آموزش های مرتبط
تگ keygen در HTML
مثال (تگ keygen در HTML)
یک فرم با فیلد keygen:
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>
خودتان امتحان کنید »تعریف و کاربرد تگ keygen در HTML
تگ <keygen> یک مولد کلیدی جفت، مورد استفاده برای فرم ها ایجاد می کند.
تگ <keygen> برای فراهم کردن یک راه امن به منظور تایید هویت کاربران در فرمهایی نظیر ورود و ثبت نام میباشد.هنگامی که کاربر فیلد را پر می کند و ارسال می کند دو کلید یک کلید خصوصی و یک کلید عمومی ایجاد می شود.
هنگامی که فرم ارسال می شود، کلید خصوصی به صورت محلی ذخیره شده و کلید عمومی به سرور ارسال می شود
پشتیبانی مرورگرها از تگ keygen در HTML
اعدادی که در جدول زیر مشخص شده، اولین نسخه ی مرورگرهایی است که به طور کامل از این عنصر پشتیبانی می کنند.
عنصر <keygen> 1.0 پشتیبانی نمی شود 1.0 1.2 3.0 تفاوت بین HTML 4.01 و HTML5
تگ <keygen> یک تگ جدید در HTML5 است.
خصوصیت ها
= جدید در HTML5.
خصوصیت مقدار توضیحات autofocus autofocus مشخص می کند که عنصر <keygen> در هنگام لود شدن صفحه به طور خودکار بر روی آن تمرکز کند. challenge challenge مشخص می کند که عنصر <keygen> در هنگام ارسال باید به چالش کشیده شود. disabled disabled مشخص می کند که عنصر <keygen> باید غیر فعال شود. form form_id یک یا بیشتر فرم که عنصر <keygen> متعلق به آنها است. keytype rsa
dsa
ecالگوریتم امنیتی کلید را مشخص می کند. name name یک نام برای عنصر <keygen> مشخص می کند. ویژگی های عمومی تگ keygen در HTML
تگ <keygen> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ keygen در HTML
تگ <keygen> از رویدادهای عمومی در HTML پشتیبانی می کند.
آموزش های مرتبط
مرجع اشیاء اچ تی ام ال: تگ keygen در JavaScript
تگ label در HTML
مثال (تگ label در HTML)
استفاده از دو radio buttons با label های جدا:
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="Submit">
</form>
خودتان امتحان کنید »تعریف و کاربرد تگ label در HTML
تگ <label> یک برچسب برای عنصر <input> تعریف می کند.
تگ <label> به صورت خاصی برای کاربر ارائه نمی شود. با این حال قابلیت استفاده برای کاربرانی که از موس استفاده می کنند را ارتقا می دهد، اگر کاربر بر روی متن داخل عنصر <label> کلیک کند کنترل متن به صورت خودکار به فیلد مربوطه منتقل می شود.
برای ایجاد ارتباط و شرح دادن تگ <label> با عناصر دیگر باید خصوصیت for برای تگ <label> را مساوی خصوصیت id قراردهیم .
پشتیبانی مرورگرها از تگ label در HTML
عنصر <label> بله بله بله بله بله نکته ها و ترفندها
نکته: یک label را می توان را با استفاده از خصوصیت "for" یا با قرار دادن عنصر مورد نظر در داخل تگ <label> محدود کرد.
تفاوت بین HTML 4.01 و HTML5
خصوصیت "form" یک خصوصیت جدید در HTML5 است.
خصوصیت ها
= جدید در HTML5.
خصوصیت مقدار توضیحات for element_id مشخص کننده id کنترلی است که label به آن تعلق دارد. form form_id یک یا بیشتر فرم که label متعلق به آنهاست را مشخص می کند. ویژگی های عمومی تگ label در HTML
تگ <label> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ label در HTML
تگ <label> از رویدادهای عمومی در HTML پشتیبانی می کند.
آموزش های مرتبط
مرجع اشیاء اچ تی ام ال: تگ label در JavaScript
تگ legend در HTML
مثال (تگ legend در HTML)
گروهی از عناصر مرتبط در یک فرم:
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" size="30"><br>
Email: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>
خودتان امتحان کنید »تعریف و کاربرد تگ legend در HTML
تگ <legend> یک عنوان یا caption برای عنصر <fieldset> مشخص می کند.
پشتیبانی مرورگرها از تگ legend در HTML
عنصر <legend> بله بله بله بله بله تفاوت بین HTML 4.01 و HTML5
صفت "align" در HTML5 پشتیبانی نمی شود.
خصوصیت ها
خصوصیت مقدار توضیحات align top
bottom
left
rightدر HTML5 پشتیبانی نمی شود.
مشخص می کند که caption در چه جهتی تراز شود.ویژگی های عمومی تگ legend در HTML
تگ <legend> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ legend در HTML
تگ <legend> از رویدادهای عمومی در HTML پشتیبانی می کند.
آموزش های مرتبط
مرجع اشیاء اچ تی ام ال: تگ legend در JavaScript
تگ li در HTML
مثال (تگ li در HTML)
یک لیست ترتیبی (<ol>) و یک لیست غیر ترتیبی (<ul>) در فهرست HTML :
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
خودتان امتحان کنید »شما می توانید مثال های بیشتری را در پایین این صفحه مشاهده کنید.
تعریف و کاربرد تگ li در HTML
تگ <li> آیتم های یک لیست را تعریف می کند.
از تگ <li> در لیست های ترتیبی (<ol>) لیست های غیر ترتیبی (<ul>)، و در فهرست منو (<menu>) استفاده می شود.
پشتیبانی مرورگرها از تگ li در HTML
عنصر <li> بله بله بله بله بله تفاوت بین HTML 4.01 و HTML5
خصوصیت "type" در HTML5 پشتیبانی نمی شود.
خصوصیت "value" در HTML 4.01 توصیه نمی شود اما در HTML5 پشتیبانی می شود.
نکته ها و ترفندها
نکته: برای مشخص کردن نوع لیست از CSSاستفاده می کنیم.
خصوصیت ها
خصوصیت مقدار توضیحات type 1
A
a
I
i
disc
square
circleدرHTML5 پشتیبانی نمی شود.
نوع شمارشگر آیتم ها را مشخص می کند.value number آیتم های یک لیست را مشخص می کند. و مقدار سایر آیتم ها در ادامه از آن مقدار به بعد یکی یکی افزایش می یابد (فقط برای لیست های مرتب (<ol>) استفاده می شود) ویژگی های عمومی تگ li در HTML
تگ <li> از ویژگی های عمومی در HTML پشتیبانی می کند.
رویدادهای عمومی تگ li در HTML
تگ <li> از رویدادهای عمومی در HTML پشتیبانی می کند.
خودتان امتحان کنید - مثال
A nested list
نمایش لیست های تو در تو.Another nested list
نمایش لیست های تو در توی پیچیده تر.آموزش های مرتبط
مرجع اشیاء اچ تی ام ال: تگ li در JavaScript
تگ 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
تگ main در HTML
مثال (تگ main در HTML)
<main>
<h1>Web Browsers</h1>
<p>Google Chrome, Firefox, and Internet Explorer are the most used browsers today.</p>
<article>
<h1>Google Chrome</h1>
<p>Google Chrome is a free, open-source web browser developed by Google,
released in 2008.</p>
</article>
<article>
<h1>Internet Explorer</h1>
<p>Internet Explorer is a free web browser from Microsoft, released in 1995.</p>
</article>
<article>
<h1>Mozilla Firefox</h1>
<p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p>
</article>
</main>
خودتان امتحان کنید »تعریف و کاربرد تگ main در HTML
تگ <main> محتوای اصلی یک سند را مشخص می کند.
محتوای درون عنصر <main> باید منحصر به فرد برای آن سند باشد. عنصر <main> شامل هر محتوایی در سراسر اسناد (مانند ستون های فرعی، لینک های ناوبری، اطلاعات کپی رایت، آرم سایت و فرم جستجو) باشد را نباید تکرار کند.
نکته: نباید بیش از یک عنصر <main> در سند باشد. عنصر <main> نباید در داخل تگ های دیگر مانند <article> و <aside> ،<footer> ،<header> یا <nav> قرار گیرد.
پشتیبانی مرورگرها از تگ main در HTML
اعدادی که در جدول زیر مشخص شده، اولین نسخه ی مرورگرهایی است که به طور کامل از این عنصر پشتیبانی می کنند.
عنصر <main> 6.0 پشتیبانی نمی شود 4.0 5.0 11.1 تفاوت بین HTML 4.01 و HTML5
تگ <main> یک تگ جدید در HTML5 است.
ویژگی های عمومی تگ main در HTML
تگ <main> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ main در HTML
تگ <main> از رویدادهای عمومی در HTML پشتیبانی می کند.
تگ map در HTML
مثال (تگ map در HTML)
یک image-map، با نواحی قابل کلیک:
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
خودتان امتحان کنید »تعریف و کاربرد تگ map در HTML
تگ <map> برای تعریف یک image-map (تصویر-نقشه) سمت سرویس گیرنده استفاده می شود. یک image-map تصویری است که نواحی مختلف آن قابل کلیک کردن است.
خصوصیت الزامی name در تگ <map> با خصوصیت usemap در عنصر <img> مرتبط است. و یک ارتباط بین تصویر و نقشه ایجاد می کند.
عنصر <map> شامل تعدادی عنصر <area> است که نواحی قابل کلیک در تصویر نقشه را ایجاد می کنند.
پشتیبانی مرورگرها از تگ map در HTML
عنصر <map> بله بله بله بله بله تفاوت بین HTML 4.01 و HTML5
نکته: در HTML5، اگر خصوصیت id برای تگ <map> مشخص کردید، باید مقدار آن با مقدار خصوصیت name برابر باشد.
تفاوت بین HTML و XHTML
در XHTML، خصوصیت name قدیمی شده است و حذف خواهد شد. به جای آن می توان از خصوصیت id استفاده کرد.
خصوصیت ها
خصوصیت مقدار توضیحات name mapname الزامی است. یک نام برای image-map مشخص می کند. ویژگی های عمومی تگ map در HTML
تگ <map> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ map در HTML
تگ <map> از رویدادهای عمومی در HTML پشتیبانی می کند.
آموزش های مرتبط
مرجع اشیاء اچ تی ام ال: تگ map در JavaScript
تگ mark در HTML
مثال (تگ mark در HTML)
برجسته کردن قسمت هایی از متن:
<p>Do not forget to buy <mark>milk</mark> today.</p>
خودتان امتحان کنید »تعریف و کاربرد تگ mark در HTML
تگ <mark> یک متن علامت گذاری شده را مشخص می کند.
اگر شما می خواهید قسمتی از متن را برجسته کنید از تگ <mark> استفاده کنید.
پشتیبانی مرورگرها از تگ mark در HTML
اعدادی که در جدول زیر مشخص شده، اولین نسخه ی مرورگرهایی است که به طور کامل از این عنصر پشتیبانی می کنند.
عنصر <mark> 6.0 9.0 4.0 5.0 11.1 تفاوت بین HTML 4.01 و HTML5
تگ <mark> یک تگ جدید در HTML5 است.
ویژگی های عمومی تگ mark در HTML
تگ <mark> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ mark در HTML
تگ <mark> از رویدادهای عمومی در HTML پشتیبانی می کند.
تگ menu در HTML
مثال (تگ menu در HTML)
یک منو با زمینه های مختلف عنصر <menuitem> :
<menu type="context" id="mymenu">
<menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png">
</menuitem>
<menu label="Share on...">
<menuitem label="Twitter" icon="ico_twitter.png"
onclick="window.open('//twitter.com/intent/tweet?text='+window.location.href);">
</menuitem>
<menuitem label="Facebook" icon="ico_facebook.png"
onclick="window.open('//facebook.com/sharer/sharer.php?u='+window.location.href);">
</menuitem>
</menu>
<menuitem label="Email This Page"
onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu>
خودتان امتحان کنید »تعریف و کاربرد تگ menu در HTML
تگ <menu> یک لیست یا منو از دستورات تعریف می کند.
تگ <menu> برای منوهای زمینه ای، نوار ابزار و برای لیست کنترل های فرم و دستورات استفاده می شود.
پشتیبانی مرورگرها از تگ menu در HTML
اعدادی که در جدول زیر مشخص شده، اولین نسخه ی مرورگرهایی است که به طور کامل از این عنصر پشتیبانی می کنند.
عنصر <menu> پشتیبانی نمی شود پشتیبانی نمی شود 8.0
(only context menus)پشتیبانی نمی شود پشتیبانی نمی شود نکته ها و ترفندها
نکته: برای استایل دادن به منو از CSS استفاده می کنیم.
تفاوت بین HTML 4.01 و HTML5
عنصر <menu> در HTML 4.01 توصیه نمی شود.
عنصر <menu> در HTML5 دوباره تعریف شده است.
خصوصیت ها
= جدید در HTML5.
خصوصیت مقدار توضیحات label text یک label (برپسب) قابل رؤیت برای منو مشخص می کند. type popup
toolbar
contextمشخص می کند که چه نوع منویی نمایش داده شود. ویژگی های عمومی تگ menu در HTML
تگ <menu> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ menu در HTML
تگ <menu> از رویدادهای عمومی در HTML پشتیبانی می کند.
تگ meta در HTML
مثال (تگ meta در HTML)
از عنصر <meta> برای توصیف سند استفاده کنید:
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">
</head>
خودتان امتحان کنید »تعریف و کاربرد تگ meta در HTML
تگ <meta> اطلاعاتی در مورد سند HTMLفراهم می کند. این داده ها در صفحه، نمایش داده نمی شوند اما توسط ماشین قابل خواندن هستند.
عنصر <meta> نوعاً برای مشخص کردن نویسنده، کلمات کلیدی، آخرین تغییرات، توضیحاتی در مورد صفحه و دیگر داده های Meta استفاده می شوند.
داده های meta توسط مرورگر ها (جهت نحوه نمایش محتویات یا بار گذاری مجدد صفحه)، موتور های جستجو (جهت تعیین کلمات کلیدی) و دیگر سرویس های وب استفاده می شود.
پشتیبانی مرورگرها از تگ meta در HTML
عنصر <meta> بله بله بله بله بله نکته ها و ترفندها
نکته: تگ<meta> همیشه داخل تگ <head> قرار می گیرد.
نکته: Metadata همیشه به صورت جفت name و value می آید.
نکته: اگر ویژگی name یا http-equiv تعریف شده باشد خصوصیت content نیز باید تعریف شود، اگر هیچ یک از این خصوصیت ها تعریف نشده باشند خصوصیت content هم نمی تواند تعریف شود.
تفاوت بین HTML 4.01 و HTML5
خصوصیت scheme در HTML5 پشتیبانی نمی شود.
در HTML5 خصوصیت جدید charset اضافه شده است، که تعریف charset را آسانتر می کند:
- HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- HTML5: <meta charset="UTF-8">
تفاوت بین HTML و XHTML
در HTML تگ <meta> تگ پایانی ندارد.
در XHTML تگ <meta> باید با یک تگ پایانی بسته شود.
مثال
مثال 1: مشخص کردن کلمات کلیدی برای موتورهای جستجو:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">مثال 2: توضیحی از محتویات یک صفحه:
<meta name="description" content="Free Web tutorials on HTML and CSS">مثال 3: مشخص کردن نویسنده یک صفحه:
<meta name="author" content="Hege Refsnes">مثال 4: Refresh کردن صفحه هر 30 ثانیه یکبار:
<meta http-equiv="refresh" content="30">خصوصیت ها
= جدید در HTML5.
خصوصیت مقدار توضیحات charset character_set کد کردن کاراکترها برای سند HTML content text دادن مقداری مرتبط با صفت http-equiv یا name http-equiv content-type
default-style
refreshفراهم کردن یک HTTP header برای اطلاعات یا مقدار صفت content name application-name
author
description
generator
keywordsیک name برای metadata مشخص می کند. scheme format/URI در HTML5 پشتیبانی نمی شود.
طرحی (scheme) برای تفسیر یا ترجمه مقدار صفت content مشخص می کند.ویژگی های عمومی تگ meta در HTML
تگ <meta> از ویژگی های عمومی در HTML پشتیبانی می کند.
آموزش های مرتبط
مرجع اشیاء اچ تی ام ال: تگ meta در JavaScript
تگ meter در HTML
مثال (تگ meter در HTML)
استفاده از عنصر meter برای اندازه گیری داده ها در یک محدوده داده (یک مقیاس):
<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>
خودتان امتحان کنید »تعریف و کاربرد تگ meter در HTML
تگ <meter> اندازه گیری عددی یا مقدار کسری را در محدوده شناخته شده تعریف می کند. تگ <meter> به عنوان مقیاس نیز شناخته شده است.
مثال: نحوه استفاده از دیسک، ارتباط از نتیجه جستجو و غیره.
نکته: از تگ <meter> نباید برای نشان دادن یک جریان (مانند نوار پیشرفت) استفاده کرد. برای نشان دادن نوار پیشرفت می توانید از تگ <progress> استفاده کنید.
پشتیبانی مرورگرها از تگ meter در HTML
اعدادی که در جدول زیر مشخص شده، اولین نسخه ی مرورگرهایی است که به طور کامل از این عنصر پشتیبانی می کنند.
عنصر <meter> 8.0 پشتیبانی نمی شود 6.0 6.0 11.0 تفاوت بین HTML 4.01 و HTML5
تگ <meter> یک تگ جدید در HTML5 است.
خصوصیت ها
= جدید در HTML5.
خصوصیت مقدار توضیحات form form_id یک یه چند فرم که عنصر<meter> به آنها تعلق دارد را مشخص می کند. high number رنجی که به عنوان مقدار high (زیاد) مطرح شده است را مشخص می کند. low number رنجی که به عنوان یک مقدار کم مطرح شده است را مشخص می کند. max number رنجی برای مشخص کردن مقدار maximum min number رنجی برای مشخص کردن مقدار minimum optimum number مشخص می کند که برای اندازه گیری چه مقداری بهینه است. value number الزامی است. مقدار رایج اندازه گیری را مشخص می کند. ویژگی های عمومی تگ meter در HTML
تگ <meter> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ meter در HTML
تگ <meter> از رویدادهای عمومی در HTML پشتیبانی می کند.
آموزش های مرتبط
مرجع اشیاء اچ تی ام ال: تگ meter در JavaScript
تگ nav در HTML
مثال (تگ nav در HTML)
مجموعه ای از لینک های ناوبری:
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
خودتان امتحان کنید »تعریف و کاربرد تگ nav در HTML
تگ <nav> مجموعه ای از لینک های ناوبری را تعریف می کند.
لازم نیست تمام لینک های صفحه را در تگ <nav> قرار داد. در تگ <nav> فقط لینک های ناوبری اصلی در نظر گرفته می شود.
در مرورگرهای با قابلیت screen reader که برای افراد ناتوان ایجاد شده اند می توان مشخص کرد که محتوای عناصری مثل nav مورد بررسی قرار بگیرد یا اینکه قلم گرفته شوند.
برای آشنایی بیشتر با screen reader به لینک روبرو مراجعه فرمایید: Screen Reader
پشتیبانی مرورگرها از تگ nav در HTML
اعدادی که در جدول زیر مشخص شده، اولین نسخه ی مرورگرهایی است که به طور کامل از این عنصر پشتیبانی می کنند.
عنصر <nav> 6.0 9.0 4.0 5.0 11.1 تفاوت بین HTML 4.01 و HTML5
تگ <nav> یک تگ جدید در HTML5 است.
ویژگی های عمومی تگ nav در HTML
تگ <nav> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ nav در HTML
تگ <nav> از رویدادهای عمومی در HTML پشتیبانی می کند.
تگ noscript در HTML
مثال (تگ noscript در HTML)
استفاده از تگ <noscript>:
<script>
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>
خودتان امتحان کنید »تعریف و کاربرد تگ noscript در HTML
تگ <noscript> برای کاربرانی که script مرورگر خود را غیر فعال کرده اند و یا برای مرورگر هایی که script را پشتیبانی نمی کنند، متنی جایگزین تعریف می کند.
تگ <noscript> می تواند داخل هر دو تگ <head> و <body> قرار گیرد.
تگ <noscript> هنگامی که داخل عنصر <head> قرار می گیرد: باید شامل عناصر <link> ،<style> و <meta> باشد.
محتوای عنصر <noscript> تنها زمانی نشان داده می شود که script پشتیبانی نشود یا در مرورگر کاربر غیر فعال باشد.
پشتیبانی مرورگرها از تگ noscript در HTML
عنصر <noscript> بله بله بله بله بله نکته ها و ترفندها
نکته: یگ روش دیگر استفاده از تگ comment (توضیحات) برای مخفی و غیر فعال کردن اسکریپت ها در سمت سرویس دهنده، در مرورگرهایی که آن را پشتیبانی نمی کنند. (به طوری که آنها به صورت متن ساده نمایش داده نمی شود ):
<script>
<!--
function displayMsg()
{
alert("Hello World!")
}
//-->
</script>تفاوت بین HTML 4.01 و HTML5
در HTML 4.01، تگ <noscript> تنها می تواند در داخل عنصر <body> قرار گیرد.
در HTML5، تگ <noscript> می تواند داخل هر دو تگ <head> و <body> قرار گیرد.
تفاوت بین HTML و XHTML
در XHTML، تگ <noscript> پشتیبانی نمی شود.
ویژگی های عمومی تگ noscript در HTML
تگ <noscript> از ویژگی های عمومی در HTMLپشتیبانی می کند.
آموزش های مرتبط
تگ object در HTML
مثال (تگ object در HTML)
چگونگی استفاده از تگ <object> برای جاسازی Flash file:
<object width="400" height="400" data="helloworld.swf"></object>
خودتان امتحان کنید »تعریف و کاربرد تگ object در HTML
تگ <object> یک شیء جاسازی شده در یک سند HTML را تعریف می کند. از این عنصر به عنوان جاسازی عناصر چند رسانه ای (مانند صوت، تصویر، اپلتهای جاوا، اکتیو ایکس، PDF، و فلش) در صفحه وب خود استفاده کنید.
شما همچنین می توانید از تگ <object> برای جاسازی صفحه وب دیگر، به سند HTMLخود استفاده کنید.
شما می توانید از تگ <param> برای تصویب پلاگین هایی که به وسیله تگ <object> جاساز شده اند استفاده کنید.
پشتیبانی مرورگرها از تگ object در HTML
عنصر <object> بله بله بله بله بله نکته ها و ترفندها
نکته: یک عنصر <object> باید داخل عنصر <body> قرار گیرد. متن موجود بین دو تگ <object> و </object> متنی جایگزین، برای مرورگر هایی که این تگ را پشتیبانی نمی کنند.
نکته:برای تصاویر به جای تگ <object> از تگ <img> استفاده می کنیم.
نکته: حداقل یکی از خصوصیات "data" یا "type" باید تعریف شود.
تفاوت بین HTML 4.01 و HTML5
بعضی از خصوصیت ها موجود در HTML 4.01، در HTML5 پشتیبانی نمی شود.
خصوصیت "form" در HTML5 جدید است.
در HTML5، عناصر object را در داخل فرم ها می توان درج و استفاده کرد.
در HTML5، عنصر objects دیگر نمی تواند داخل عنصر <head> از یک سند قرار گیرد.
خصوصیت ها
= جدید در HTML5.
خصوصیت مقدار توضیحات align top
bottom
middle
left
rightدر HTML5 پشتیبانی نمی شود.
تراز بندی عنصر <object> نسبت به عناصر اطراف را مشخص می کند.archive URL در HTML5 پشتیبانی نمی شود.
فضایی که لیستی از URL را برای بایگانی جدا می کند. بایگانی منابع مربوط به object است.border pixels در HTML5 پشتیبانی نمی شود.
پهنای border اطراف عنصر <object> را مشخص می کند.classid class_ID در HTML5 پشتیبانی نمی شود.
مشخص کننده مقدار Class ID برای شی مورد نظر، که در تنظیمات رجیستری ویندوز و یا در یک URL قرار گیرد.codebase URL در HTML5 پشتیبانی نمی شود.
مشخص می کند که code عنصر object کجا یافت می شود.codetype media_type در HTML5 پشتیبانی نمی شود.
نوع media برای کدی که اشاره به صفت classid دارد را مشخص می کند.data URL مشخص کننده URL منابعی که برای object مورد استفاده قرار می گیرد. declare declare در HTML5 پشتیبانی نمی شود.
مشخص می کند که object فقط باید معرفی شود و تا زمانی که نیاز نیست ایجاد یا نصب نشود.form form_id مشخص کننده یک یا بیشتر فرم هایی که object متعلق به آنهاست. height pixels ارتفاع عنصر object را مشخص می کند. hspace pixels در HTML5 پشتیبانی نمی شود.
فضای خالی چپ و راست عنصر object را مشخص می کند.name name یک name برای عنصر object مشخص می کند. standby text در HTML5 پشتیبانی نمی شود.
مشخص کننده متنی که هنگام لود شدن object نمایش داده می شود.type media_type نوع media داده که در صفت data مشخص شده را تعریف می کند. usemap #mapname مشخص کننده name برای نقشه تصویری سمت کاربر که با object مورد استفاده قرار می گیرد. vspace pixels در HTML5 پشتیبانی نمی شود.
فضای خالی بالا و پایین عنصر object را مشخص می کند.width pixels عرض عنصر object را مشخص می کند. ویژگی های عمومی تگ object در HTML
تگ <object> از ویژگی های عمومی در HTML پشتیبانی می کند.
رویدادهای عمومی تگ object در HTML
تگ <object> از رویدادهای عمومی در HTML پشتیبانی می کند.
آموزش های مرتبط
مرجع اشیاء اچ تی ام ال: تگ object در JavaScript
تگ ol در HTML
مثال (تگ ol در HTML)
دو لیست مرتب متفاوت:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
خودتان امتحان کنید »تعریف و کاربرد تگ ol در HTML
تگ <ol> یک لیست مرتب را تعریف می کند. که آن لیست می تواند بر حسب عددی یا الفبایی مرتب شود.
از تگ <li> برای آیتم های لیست استفاده می کنیم.
.
پشتیبانی مرورگرها از تگ ol در HTML
عنصر <ol> بله بله بله بله بله نکته ها و ترفندها
نکته: برای لیست های نامرتب از تگ <ul> استفاده می کنیم.
نکته: برای استایل دادن به لیست ها از CSS استفاده می کنیم.
تفاوت بین HTML 4.01 و HTML5
استفاده از خصوصیت های "start" و "type" در HTML 4.01 توصیه نمی شود، اما در HTML5 پشتیبانی می شود.
خصوصیت "reversed" در HTML5 جدید است.
خصوصیت "compact" در HTML5 پشتیبانی نمی شود.
خصوصیت ها
= جدید در HTML5.
خصوصیت مقدار توضیحات compact compact در HTML5 پشتیبانی نمی شود.
مشخص می کند که لیست باید کوچکتر از حد نرمال نمایش داده شود.reversed reversed مشخص می کند که لیست به صورت نزولی مرتب شود.(9 و 8 و 7 و...) start number مقدار شروع لیست مرتب را مشخص می کند. type 1
A
a
I
iمشخص می کند که از چه نوع نشانگری در لیست استفاده شود. ویژگی های عمومی تگ ol در HTML
تگ <ol> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ ol در HTML
تگ <ol> از رویدادهای عمومی در HTMLپشتیبانی می کند.
آموزش های مرتبط
مرجع اشیاء اچ تی ام ال: تگ ol در JavaScript
تگ optgroup در HTML
مثال (تگ optgroup در HTML)
گروه بندی گزینه های مرتبط با استفاده از تگ <optgroup> :
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
خودتان امتحان کنید »تعریف و کاربرد تگ optgroup در HTML
تگ <optgroup> برای گروه بندی option های (گزینه ها) مرتبط در یک لیست کشویی استفاده می شود.
اگر شما دارای یک لیست طولانی از گزینه ها می باشید استفاده از تگ optgroup برای کنترل کردن گزینه ها مرتبط راحت تر است و مورد پسند کاربر نیز می باشد.
پشتیبانی مرورگرها از تگ optgroup در HTML
عنصر <optgroup> بله بله بله بله بله تفاوت بین HTML 4.01 و HTML5
تفاوتی وجود ندارد.
خصوصیت ها
خصوصیت مقدار توضیحات disabled disabled مشخص می کند که option-group باید غیر فعال شود. label text یک برچسب برای option-group مشخص می کند. ویژگی های عمومی تگ optgroup در HTML
تگ <optgroup> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ optgroup در HTML
تگ <optgroup> از رویدادهای عمومی در HTML پشتیبانی می کند.
آموزش های مرتبط
مرجع اشیاء اچ تی ام ال: تگ optgroup در JavaScript
تگ option در HTML
مثال (تگ option در HTML)
یک لیست کشویی با چهار گزینه:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
خودتان امتحان کنید »تعریف و کاربرد تگ option در HTML
تگ <option> یک گزینه برای لیست انتخاب تعریف می کند.
<option> داخل عنصر <select> یا عنصر <datalist> قرار می گیرد.
پشتیبانی مرورگرها از تگ option در HTML
عنصر <option> بله بله بله بله بله نکته ها و ترفندها
نکته: تگ <option> می تواند بدون به کار بردن هیچ یک از خصوصیات بکار رود، اما شما معمولا به خصوصیت value برای اینکه مشخص کند چه چیزی به سرور ارسال شود نیاز دارید.
نکته: اگر شما یک لیست طولانی از گزینه ها داشته باشید می توانید، گزینه های مرتبط را به وسیله تگ <optgroup> گروه بندی کنید.
خصوصیت ها
خصوصیت مقدار توضیحات disabled disabled مشخص می کند که option باید غیر فعال شود. label text یک برچسب کوتاه برای option مشخص می کند. selected selected مشخص می کند هنگامی که صفحه لود می شود option ها به طور پیش فرض انتخاب شده باشد. value text مشخص می کند که چه مقدار به سرور ارسال شود. ویژگی های عمومی تگ option در HTML
تگ <option> از ویژگی های عمومی در HTMLپشتیبانی می کند.
رویدادهای عمومی تگ option در HTML
تگ <option> از رویدادهای عمومی در HTML پشتیبانی می کند.
آموزش های مرتبط
مرجع اشیاء اچ تی ام ال: تگ option در JavaScript