آموزش Iframes در html

آموزش طراحی سایت - آموزش Iframes در html

آموزش Iframes

شما می توانید یک frame درون خطی را با استفاده از برچسب < iframe>مربوط به HTML تعریف کنید. این برچسب به برچسب < frameset>ارتباطی ندارد، در عوض می تواند در هرجایی در داکیومنت شما ظاهر شود. برچسب< iframe>یک محدوده ی مستطیلی را در داخل داکیومنت تعریف می کند که در آن مرورگر می تواند یک داکیومنت مجزا را ارائه دهد، مانند نوارهای اسکرول و حاشیه ها.
ویژگی src برای مشخص کردن URL مربوط به داکیومنتی استفاده می شود که حاوی frame درون خطی می باشد.

مثال:

در زیر مثالی را می بینید که چگونگی استفاده از < iframe> را توضیح می دهد.

نمونه یک

<!DOCTYPE html>

<html>

<head>

<title>HTML Iframes</title>

</head>

<body>

<p>Document content goes here...</p>

Sorry your browser does not support inline frames.

</iframe>

<p>Document content also go here...</p>

</body>

</html>

ویژگی های برچسب < iframe>

بسیاری از ویژگی های برچسب < iframe> شامل نام، گروه، حاشیه، id، longdesk، طول حاشیه، عرض حاشیه، نام، اسکرول کردن، روش و تیتر، درست مانند ویژگی های متناظر با برچسب < frame> رفتار می کنند.

Attribute

Description

src

این ویژگی برای نام گذاری فایلی استفاده می شود که باید در frame بارگذاری شود. مقدار آن می تواند هر URL باشد. برای مثال src="/html/top_frame.htm" فایل HTML موجود در مسیر html را بارگذاری خواهد کرد.

name

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

frameborder

این ویژگی مشخص می کند که آیا حاشیه های frame نشان داده شوند یا خیر. این ویژگی مقدار داده شده به ویژگی frameborder روی برچسب < frameset> را می گیرد، البته اگر مقداری مشخص شده باشد، این مقدار می تواند 1 (بله) و یا 0 (خیر) باشد.

marginwidth

این ویژگی به شما اجازه می دهد تا عرض فضای بین حاشیه های چپ و راست frame و محتوای آن را مشخص کنید. مقدار به پیکسل داده می شود. برای مثال marginwidth="10".

marginheight

این ویزگی به شما اجازه می دهد تا طول فضای بین بالا و پایین حاشیه ی frame و محتوای آن را مشخص کنید. مقدار به پیکسل داده می شود. برای مثال marginheight="10"

noresize

به طور پیش فرض هر frame را با کلیک کردن و درگ کردن روی حاشیه های آن می توانید تغییر اندازه دهید. ویژگی noresize مانع تغییر اندازه ی frame توسط یوزر می شود. برای مثال noresize="noresize".

scrolling

این ویژگی ظاهر نارهای اسکرول نمایان شده در frame را کنترل می کند. این ویزگی مقادیر "yes", "no" یا "auto"را می گیرد. برای مثال scrolling="no" به معنای نبودن نوارهای اسکرول می باشد.

longdesc

این ویژگی به شما اجازه می دهد تا یک لینک به صفحه ای حاوی یک توصیف طولانی از محتوای frame، ارائه بدهید. برای مثال longdesc="framedescription.htm"

دوره آموزش طراحی سایت آموزش طراحی وب آموزش html css آموزش طراحی سایت با html

افشین جمعه 7 خرداد 1400 ساعت 11:04

0 نظر

آموزش قابها در html

آموزش طراحی سایت - آموزش قابها در html

قاب های HTML

قاب های HTML برای تقسیم پنجره ی مرورگر شما به چند بخش استفاده می شوند که هر بخش می تواند یک داکیومنت مجزای HTML رابارگذاری کند. مجموعه ای از چارچوب ها در پنجره ی مروگر به عناون frameset شناخته می شوند. به روش مشابهی که جدول ها سازماندهی می شوند، پنجره نیز به چارچوب های مختلف تقسیم می شود: در ستون ها و ردیف ها.

نقطه ضعف های چارچوب ها:

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

ایجاد چارچوب ها:

برای استفاده از چارچوب ها در یک صفحه از برچسب < frameset> به جای < body>استفاده می کنیم. برچسب< frameset> چگونگی تقسیم پنجره به چارچوب را تعریف می کند. ویژگی rows از برچسب < frameset> چارچوب های افقی و ویژگی cols نیز چارچوب های عمودی را تعریف می کنند. هر چارچوب توسط برچسب < frame> نشان داده شده است و تعریف می کند که کدام داکیومنت HTML باید در داخل چارچوب باز شود.

مثال:

در زیر مثالی را برای ایجاد سه چارچوب افقی می بینید.

نمونه یک

<!DOCTYPE html>

<head>

<title>HTML Frames</title>

</head>

<body>

Your browser does not support frames.

</body>

</noframes>

</frameset>

</html>

ویژگی های برچسب < frameset>:

Attribute

Description

cols

تعداد ستون ها و اندازه ی هر ستون را در frameset مشخص می کند. شما می توانید عرض هر ستون را به یکی از چهار روش زیر مشخص کنید:
مقادیر مطلق به پیکسل، برای مثال برای ایجاد سه چارچوب عمودی از cols="100, 500,100" استفاده کنید. درصدی از پنجره ی مرورگر، برای مثال برای ایجاد سه چارچوب عمودی از cols="10%, 80%,10%" استفاده کنید.
استفاده از سمبل wildcard ، برای مثال برای ایجاد سه چارچوب عمودی از cols="10%, *,10%" استفاده کنید. در این مورد wildcard باقیمانده ی پنجره را فرا می گیرد.
به عنوان عرض های پنجره ی مرورگر، به عنوان مثال برای ایجاد سه چارچوب عمودی از cols="3*,2*,1*" استفاده کنید. این یک جایگزین بری درصدها می باشد. شما می توانید از عرض های مربوط پنجره ی مرورگر استفاده کنید. در اینجا پنجره به شش بخش تقسیم می شود: اولین ستون نصف پنجره را فرا می گیرد، دومین ستون یک سوم و سومین ستون یک ششم آن را.

rows

این ویژگی درست مانند ویژگی cols کار می کند و همان مقادیر را به خود می گیرد، اما برای مشخص کردن ردیف ها در frameset استفاده می شود. برای مثال برای ایجاد دو چارچوب افقی از rows="10%, 90%" استفاده کنید. می توانید طول هر ردیف را به همان روشی که در بالا در مورد ستون ها توضیح داده شد، مشخص کنید.

border

این ویژگی عرض حاشیه ی هر چارچوب را به پیکسل مشخص می کند. برای مثال border="5" . مقدار 0 به معنای بدون حاشیه می باشد.

frameborder

این ویژگی مشخص می کند که آیا بین چارچوب ها باید حاشیه ی سه بعدی نمایش داده شود. این ویژگی مقدار 1 (بله) و 0 (خیر) را به خود می گیرد. برای مثال frameborder="0" به معنای بدون حاشیه می باشد.

framespacing

این ویژگی مقدار فضای بین چارچوب ها را در یک frameset مشخص می کند. این ویژگی می تواند هرمقدار داخلی به خود بگیرد. برای مثال framespacing="10" به معنای وجود 10 پیکسل فضا بین هر چارچوب می باشد.

ویژگی های برچسب < frame>

Attribute

Description

src

این ویژگی برای ارائه ی نام فایلی که باید در چارچوب بارگذاری شود، مورد استفاده قرار می گیرد. مقدار آن هر URL می تواند باشد. برای مثال src="/html/top_frame.htm" یک فایل HTML موجود در مسیر html بارگذاری خواهد کرد.

name

این ویزگی به شما اجازه می دهد تا یک چارچوب را نام گذاری کنید. این ویژگی نشان می دهد که داکیومنت در کدام چارچوب باید بارگذاری شود؛ به ویژه در هنگام ایجاد لینک در یک چارچوب که صفحاتی را روی یک چارچوب دیگر بارگذاری می کند، که در آن مورد frame دوم برای مشخص کردن خود به عنوان هدف لینک، بسیار مهم است.

frameborder

این ویژگی مشخص می کند که آیا حاشیه های مربوط به frame نشان داده می شوند یا نه. این امر مقدار داده شده به ویژگی frameborder را روی برچسب می گیرد، اگر مقداری ارائه شده باشد و این ویژگی می تواند مقادیر 1 (بله) و 0 (خیر) بگیرد.

marginwidth

این ویژگی به شما اجازهمی دهد تا عرض فضای بین چپ و راست حاشیه های frame و محتوای آن را مشخص کنید. این مقدار به پیکسل داده می شود. برای مثال marginwidth="10"

marginheight

این ویژگی به شما اجازهمی دهد تا طول فضای بین بالا و پایین حاشیه های frame و محتوای ان را مشخص کنید. مقدار به پیکسل داده می شود. برای مثال marginheight="10".

noresize

به طور پیش فرض شما می توانید با کلیک کردن و درگ کردن روی حاشیه های frame هر گونه frame را تغییر اندازه بدهید. ویژگی noresize قابلیت تغییر اندازه ی یک frame را ازبین می برد. برا مثال noresize="noresize"

scrolling

این ویژگی ظاهر اسکرول بارهایی را که روی frame نمایان می شوند، کنترل می کند. این ویژگی مقدار "yes", "no" یا "auto"به خود می گیرد. برای مثال scrolling="no" به این معناست که frame نباید اسکرول بار داشته باشد.

longdesc

این ویژگی به شما اجازه می دهد تا به صفحه ای دارای توضیح طولانی در مورد محتوای frame یک لینک ارائه دهید. برای مثال longdesc="framedescription.htm"

مرورگرهایی که frame ها را پشتیبانی می کنند

اگر کاربر از مرورگرهای قدیمی یا مرورگرهایی استفاده کند که frame را پشتیبانی نمی کنند، عنصر < noframes>باید به یوزر نمایش داده شود. بنابراین شما باید یک عنصر < body>را داخل عنصر < noframes>قرار دهید، زیرا تصور می شود که عنصر< frameset>جایگزین عنصر< body>می شود. اما اگر یک مرورگر < frameset>را درک نکند، بنابراین باید آنچه را که داخل عنصر< body>می باشد درک کند که حاوی عنصر < noframes>می باشد.
شما می توانید به یوزرهای خود که از مرورگرهای قدیمی استفاده می کنند، پیام هایی بدهید. برای مثال پیام Sorry!! your browser does not support frames. ، همانطور که در مثال بالا نشان داده شده است.

نام frame و ویژگی های target

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

مثال:

اجازه بدهید مثال زیر را بررسی کنیم که داری کد زیر می باشد:

آموزش html css

نمونه دو

<!DOCTYPE html>

<head>

<title>HTML Frames</title>

</head>

<body>

Your browser does not support frames.

</body>

</noframes>

</frameset>

</html>

در اینجا دو ستون ایجاد کرده ایم که قرار است با دو ستون پر شوند. اولین frame دارای عرض 200 پیکسل می باشد و حاوی نوار منوی مسیر یابی می باشد که توسط فایل menu.htm اجرا می شود. دومین ستون فضای باقیمانده را پر کرده و حاوی بخش اصلی صفحه خواهد بود و توسط فایل main.htm اجرا می شود. برای هرسه لینک موجود در نوار منو یک frame هدف به عنوان main_page ذکر کرده ایم، بنابراین هر زمان روی لینک های موجود در نوار منو کلیک کنید، لینک موجود در main_page باز خواهد شد.
در زیر محتوای فایل menu.htm را مشاهده می کنید.

نمونه سه

<!DOCTYPE html>

<a href="http://www.google.com" target="main_page">Google</a>

<a href="http://www.microsoft.com" target="main_page">Microsoft</a>

</body>

</html>

در زیر محتوای فایل main.htm را مشاهده می کنید.

نمونه چهار

<!DOCTYPE html>

<h3>This is main page and content from any link will be displayed here.</h3>

<p>So now click any link and see the result.</p>

</body>

</html>

اکنون می توانید لینک های موجود در پنل چپ را کلیک کرده و نتیجه را مشاهده کنید. ویژگی target نیز یکی از مقادیر زیر را می گیرد:

Option

Description

_self

صفحه را روی frame جاری بارگذاری می کند.

_blank

صفحه را روی یک پنجره ی مرورگر جدید بارگذاری کرده ، در حالیکه یک پنجره ی جدید باز می کند.

_parent

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

_top

صفحه را روی پنجره ی مرورگر بارگذاری می کند، در حالیکه هر frame موجود را جایگزین می کند.

targetframe

صفحه را در یک target frame نام گذاری شده بارگذاری می کند

دوره آموزش طراحی سایت آموزش طراحی سایت با html فیلم اموزش طراحی سایت آموزش html css

افشین چهارشنبه 5 خرداد 1400 ساعت 12:10

0 نظر

آموزش لینک ایمیل در HTML

آموزش طراحی سایت - آموزش لینک ایمیل در HTML

لینک ایمیل HTML

قرار دادن یک لینک ایمیل HTML روی صفحه ی وب خود کار سختی نیست، اما این کار ممکن است باعث بروز مشکل اسپم های غیرضروری در اکانت ایمیل شما شود. افرادی هستند که می توانند برنامه هایی را برای جمع آوری چنین ایمیل هایی اجرا کنند و سپس آنها را با راه های مختلف برای اسپم کردن استفاده کنند.
می توانید از گزینه دیگری استفاده کنید تا افراد به راحتی بتوانند به شما ایمیل ارسال کنند. یک گزینه می تواند استفاده از فرم های HTML باشد برای جمع آوری داده های یوزر و سپس استفاده ازاسکریپت PHP یا CGI برای ارسال ایمیل.
برای یک مثال ساده، فرم Contact Us را چک کنید. با استفاده از این فرم یک فیدبک از یوزر گرفته و سپس از یک برنامه ی CGI استفاده می کنیم که در حال جمع آوری این اطلاعات و ارسال ایمیل به یک email ID ارائه شده می باشد.

برچسب HTML Email

برچسب < a> در HTML برای مشخص کردن یک آدرس ایمیل و ارسال ایمیل، گزینه هایی را به شما ارائه می دهد. در حالیکه از برچسب < a> به عنوان یک email tag استفاده می کنید، از mailto:email address همراه با ویژگی href نیز استفاده خواهید کرد. در زیر ترکیب استفاده از mailto را به جای استفاده از http می بینید.

نمونه یک

<!DOCTYPE html>

<html>

<head>

<title>SendMail</title>

</head>

<body>

<a href="mailto:abc@example.com">Send Email</a>

</body>

</html>

اکنون اگر یوزر روی این لینک کلیک کند، email client آغاز به کار خواهد کرد ( مانند lotus notes و outlook express و غیره.) که روی کامپیوتر شما نصب شده است. ریسک دیگری در استفاده از این گزینه برای ارسال ایمیل وجود دارد، زیرا اگر یوزر email client نصب شده روی کامپیوتر خود نداشته باشد، ارسال ایمیل ممکن نحواهد بود.

تنظیمات پیش فرض

شما می توانید یک موضوع ایمیل و یک بدنه ی ایمیل پیش فرض همراه با آدرس ایمیل خود ایجاد کنید. در زیر مثال استفاده از بدنه و موضوع پیش فرض را مشاهده می کنید.

نمونه دو

<!DOCTYPE html>

<html>

<head>

<title>SendMail</title>

</head>

<body>

Send Feedback

</a>

</body>

</html>

آموزش طراحی سایت دوره آموزش طراحی سایت آموزش طراحی وب آموزش برنامه نویسی آموزش طراحی سایت با html

افشین سه‌شنبه 4 خرداد 1400 ساعت 16:30

0 نظر

آموزش طراحی سایت-آموزش لینک های متنی

آموزش طراحی سایت-آموزش لینک های متنی

لینک های متن HTML

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

لینک کردن داکیومنت ها

یک لینک با استفاده از برچسب < a> در HTML تعیین می شود. این برچسب anchor tag نامیده می شود و هر چیزی بین برچسب آغازین < a> و پایانی < /a> بخشی از لینک می شود و یک یوزر می تواند آن بخش را کلیک کرده تا به داکیومنت لینک شده برسد. در زیر ترکیب ساده ی استفاده از برچسب < a> را می بینید.

1	`<a` `href="Document URL"` `...=""` `attributes-list="">Link Text</a>`

مثال:

اجازه دهید مثال زیر را امتحان کنیم که http://www.tahlildadeh.com را در صفحه ی شما لینک می کند.

نمونه یک

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="http://www.tahlildadeh.com" target="_self">Tahlildadeh</a>
</body>
</html>
این مثال نتیجه ی زیر را تولید خواهد کرد که شما می توانید روی لینک تولید شده ی tahlildadeh کلیک کنید تا به صفحه ی اصلی tahlildadeh برسید.
Click following link

tahlildadeh
ویژگی target
ما از ویژگی target در مثال قبلی خود استفاده کردیم . این ویژگی برای مشخص کردن موقعیتی که داکیومنت لینک شده باز می شود، مورد استفاده قرار می گیرد. در زیر گزینه های ممکن را مشاهده می کنید

Option
Description
_blank
داکیومنت لینک شده را در یک پنجره یا تب جدید باز می کند.
_self
داکیومنت لینک شده را در همان چارچوب باز می کند.
_parent
داکیومنت لینک شده را در چارچوب اصلی باز می کند.
_top
داکیومنت لینک شده در کل بدنه ی پنجره باز می شود.
targetframe
داکیومنت لینک شده را در یک targetframe نام گذاری شده باز می کند.
مثال:
برای درک تفاوت اصلی در برخی گزینه های ارائه شده در ویژگی target مثال زیر را امتحان کنید.

نمونه دو
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="http://www.tahlildadeh.com/">
</head>
<body>
<p>Click any of the following links</p>
<a href="http://www.tahlildadeh.com" target="_blank">Opens in New</a> |
<a href="http://www.tahlildadeh.com" target="_self">Opens in Self</a> |
<a href="http://www.tahlildadeh.com" target="_parent">Opens in Parent</a> |
<a href="http://www.tahlildadeh.com" target="_top">Opens in Body</a>
</body>
</html>

این مثال نتیجه ی زیر را تولید خواهد کرد که می توانید روی لینک های مختلف کلیک کنید تا تفاوت بین گزینه های مختلف ارائه شده برای ویژگی target را درک کنید.

Click any of the following links
Opens in New | Opens in Self | Opens in Parent | Opens in Body
استفاده از مسیر پایه
وقتی که شما داکیومنت های HTML را متناسب با همان وب سایت لینک می کنید، ارائه ی یک URL کامل برای هر لینک ضروری نیست. اگر از برچسب در تیتر داکیومنت HTML خود استفاده می کنید، می توانید از دست آن خلاص شوید. این برچسب برای ارائه ی یک مسیر پایه برای همه ی لینک ها استفاده می شود. بنابراین مرورگر شما مسیر ارائه شده ی مرتبط را به مسیر پایه پیوند خواهد داد و یک URL کامل ایجاد خواهد کرد.

مثال:
مثال زیر از برچسب < base> برای مشخص کردن URL پایه استفاده می کند و پس از آن ما می توانیم به جای ارائه ی URL کامل برای هر لینک از مسیرهای مرتبط استفاده کنیم.
آموزش طراحی سایت
نمونه سه
<html>
<head>
<title>Hyperlink Example</title>
<base href="http://www.tahlildadeh.com/">
</head>
<body>
<p>Click following link</p>
<a href="/WebsiteNews/TahlildadeNews.aspx" target="_blank">HTML tahlildadeh</a>
</body>
</html>

این مثال نتیجه ی زیر را تولید خواهد کرد که می توانید روی لینک تولید شده ی HTML tahlildadeh کلیک کنید تا به آموزش HTML برسید.
اکنون URL ارائه شده ی < a href="http:/WebsiteNews/TahlildadeNews.aspx> باعنوان < a href=" http //www.tahlildadeh.com/WebsiteNews /TahlildadeNews.aspx"> در نظر گرفته می شود

لینک شدن به بخشی از صفحه
می توانید برای بخش خاصی از صفحه ی وب ارائه شده، با استفاده از ویژگی name یک لینک ایجاد کنید. این امر یک فرایند دو مرحله ای می باشد.
نخست اینکه در مکانی که می خواهید به داخل صفحه ی وب برسید یک لینک ایجاد کنید و آن را با استفاده از برچسب < a...> نام گذاری کنید
<h1>HTML Text Links <a name="top"></a></h1>
مرحله ی دوم ایجاد یک هایپر لینک می باشد برای لینک کردن داکیومنت و قرار دادن در مکانی که می خواهید برسید.
<a href="/html/html_text_links.htm#top">Go to the Top</a>
و این مثال لینک زیر را تولید خواهد کرد که می توانید در آن روی لینک تولید شده ی Go to the Top کلیک کنید تا به نقطه ی بالای آموزش HTML Text Link برسید. نمونه پنج <!DOCTYPE html> <html> <head> <title>Hyperlink Example</title> <base href="http://www.tahlildadeh.com/"> </head> <body alink="#54A250" link="#040404" vlink="#F40633"> <p>Click following link</p> <a href="http://www.tahlildadeh.com" target="_blank">HTML tahlildadeh</a> </body> </html> نظیم رنگ های لینک شما می توانید رنگ لینک های خود، لینک های فعال و لینکهای مشاهده شده را با استفاده ازویژگی های link و alink و vlink از برچسب < body>تنظیم کنید. مثال: مثال زیر را در test.htm ذخیره کنید و سپس می توانید آن را در هر مرورگری باز کنید تا ببینید که چگونه ویژگی های link, alink و vlink کار می کنند. نمونه شش <!DOCTYPE html> <html> <head> <title>Hyperlink Example</title> </head> <body> <a href="http://tahlildadeh.com/Files/Articles/04GL07.pdf"> download pdf file</a> </body> </html> این مثال نتیجه ی زیر را تولید می کند. فقط رنگ لینک را قبل از کلیک کردن روی آن چک کنید، سپس رنگ ان را در هنگام فعال کردن و بازدید آن چک کنید. HTML tahlildadeh دانلود کردن لینک ها شما می توانید لینک متنی ایجاد کنید تا فایل های قابل دانلود PDF، ZIP و DOC خود را بسازید. این کار بسیار ساده می باشد، فقط کافیست یک URL کامل از فایل قابل دانلود ارائه بدهید.

آموزش طراحی سایت دوره طراحی سایت آموزش طراحی وب دوره آموزش طراحی سایت دوره آموزش جامع طراحی سایت

افشین جمعه 31 اردیبهشت 1400 ساعت 10:26

0 نظر

آموزش طراحی سایت - آموزش ساخت جدول در html

آموزش Table در HTML

جدول های HTML به نویسندگان وب اجازه می دهند تا داده هایی مانند متن، تصاویر، لینک ها، جدول های دیگر و غیره در ردیف ها و ستون ها تنظیم کنید. جدول های HTML با استفاده از برچسب < table> ایجاد می شوند که در آن برچسب < tr> برای ایجاد ردیف ها و برچسب < td> برای ایجاد داده های سلول ها استفاده می شوند.

مثال:

نمونه یک

<!DOCTYPE html>

<head>

<title>HTML Tables</title>

</head>

<body>

<tr>

<td>Row 1, Column 1</td>

<td>Row 1, Column 2</td>

</tr>

<tr>

<td>Row 2, Column 1</td>

<td>Row 2, Column 2</td>

</tr>

</table>

</body>

</html>

ویژگی های colspan و rowspan

اگر بخواهید دو یا بیشتر از دو ستون را با هم تلفیق کنید از ویژگی colspan استفاده می کنید. به طور مشابه اگر بخواهید دو یا بیشتر از دو ردیف را در یک ردیف تلفیق کنید از rowspan استفاده کنید.

مثال:

نمونه سه

<!DOCTYPE html>

<head>

<title>HTML Table Colspan/Rowspan</title>

</head>

<body>

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

</table>

</body>

</html>

پس زمینه ی جدول

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

ویژگی Bg color: می توانید رنگ زمینه را برای همه ی جدول و یا تنها برای یک سلول تنظیم کنید.
ویژگی background: می توانید یک تصویر را برای کل جدول یا تنها یک سلول تنظیم کنید.

همچنین می توانید با استفاده از ویژگی bordercolor رنگ حاشیه را نیز تنظیم کنید.

مثال:

نمونه چهار

<!DOCTYPE html>

<head>

<title>HTML Table Background</title>

</head>

<body>

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

</table>

</body>

</html>

در اینجا مثالی در رابطه با استفاده از ویژگی background می بینید. در این مثال ما از تصویری موجود در image directory استفاده کرده ایم.

نمونه پنج

<!DOCTYPE html>

<head>

<title>HTML Table Background</title>

</head>

<body>

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

</table>

</body>

</html>

آموزش html css

طول و عرض جدول

شما می توانید طول و عرض جدولی را با استفاده از ویژگی های width و height تنظیم کنید. شما می توانید طول و عرض جدول را به پیکسل و یا متناسب با درصد صفحه ی جاری تنظیم کنید.

مثال:

نمونه شش

<!DOCTYPE html>

<head>

<title>HTML Table Width/Height</title>

</head>

<body>

<tr>

<td>Row 1, Column 1</td>

<td>Row 1, Column 2</td>

</tr>

<tr>

<td>Row 2, Column 1</td>

<td>Row 2, Column 2</td>

</tr>

</table>

</body>

</html>

شرح جدول

برچسب caption یک توضیح یا یک تیتر برای جدول می باشد که در بالای جدول نمایش داده می شود. این برچسب در ورژن های جدید HTML/XHTML توصیه می شود.

مثال:

نمونه هفت

<title>HTML Table Caption</title>

<caption>This is the caption</caption>

<tr>

<td>row 1, column 1</td>

<td>row 1, columnn 2</td>

</tr>

<tr>

<td>row 2, column 1</td>

<td>row 2, columnn 2</td>

</tr>

</table>

تیتر، بدنه و پاورقی جدول

جدول ها می توانند به سه بخش تقسیم شوند: تیتر، بدنه و پاورقی جدول. عنوان و فوت(tfoot) در واقع شبیه به تیتر و پاورقی در یک فایل پردازش word می باشند که برای هرصفحه یکی می باشد، در حالیکه بدنه همان نگه دارنده ی محتوای اصلی جدول می باشد.
سه عنصر برای مجزا کردن عنوان، بدنه و فوت در یک جدول عبارتند از

< thead> - برای ایجاد یک تیتر مجزا
< tbody>- برای نشان دادن بدنه ی اصلی جدول
< tfoot> - برای ایجاد یک پاورقی مجزا در یک جدول

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

مثال:

نمونه هشت

<!DOCTYPE html>

<head>

<title>HTML Table</title>

</head>

<body>

<thead>

<tr>

<td colspan="4">This is the head of the table</td>

</tr>

</thead>

<tfoot>

<tr>

<td colspan="4">This is the foot of the table</td>

</tr>

</tfoot>

<tbody>

<tr>

</tr>

</tbody>

</table>

</body>

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

آموزش طراحی سایت با html

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

مثال:

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

آموزش طراحی وب آموزش html css فیلم اموزش طراحی سایت دوره آموزش طراحی سایت آموزش جاوا اسکریپت

افشین یکشنبه 26 اردیبهشت 1400 ساعت 11:48

0 نظر

پیوندها

دسته‌ها