آموزش اچ تی ام ال
صفحه بندی در HTML
صفحه بندی در وب، برای اینکه سایت شما جذاب به نظر برسد، بسیار مهم است.
پس صفحه وبتان را با دقت طراحی نمایید.
مثال - خودتان امتحان کنید
Web page layout using <div> elements
نحوه صفحه بندی با استفاده از عناصر <div>.Web page layout using <table> elements
نحوه صفحه بندی با استفاده از عناصر <table>.صفحه بندی وب سایت ها
بیشتر وب سایت ها محتویات خود را در چندین ستون قرار می دهند (به فرمت مجله ها یا روزنامه ها)
با استفاده از عناصر <div> یا <table> می توان حالت چند ستونی را ایجاد نمود.
گرچه می توان به وسیله جداول HTML، صفحه بندی نمود اما باید دانست که جداول برای ارائه داده ها در قالب جدول هستند نه ابزاری برای صفحه بندی.
صفحه بندی با استفاده از عناصر <div>
عنصر <div> یک عنصر block می باشد که برای گروه بندی عناصر HTML استفاده می شود.
توجه: CSS برای چیدمان عناصر یا ایجاد پس زمینه یا نمای رنگی برای صفحات استفاده می شود.
در مثال زیر، از پنج عنصر div برای صفحه بندی استفاده شده است. همچنین از CSS برای تعیین مکان عناصر، ایجاد پس زمینه رنگی و مشخص کردن عرض و ارتفاع عناصر استفاده شده است:
مثال (صفحه بندی در HTML)
<!DOCTYPE html>خودتان امتحان کنید »
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © beyamooz.com</div>
</div>
</body>
</html>کد HTML بالا نتیجه زیر را ایجاد خواهد کرد:
Main Title of Web Page
Menu
HTML
CSS
JavaScriptContent goes hereCopyright © beyamooz.com مثال - خودتان امتحان کنید
Web page layout using <div> elements with 3 columns
در این مثال، نحوه صفحه بندی سه ستونه نشان داده شده است.صفحه بندی با استفاده از جداول
راه ساده ایجاد یک صفحه بندی، استفاده از تگ <table> می باشد.
حالت چند ستونی به وسیله عناصر <div> یا <table> ایجاد می شود. CSS برای تعیین مکان عناصر یا ایجاد پس زمینه یا نمایی رنگی برای صفحات استفاده می شود.
استفاده از جداول برای حالت چند ستونی، کاربرد درستی از عنصر <table> نمی باشد. هدف از عنصر <table> نمایش داده ها در قالب جدول است.
در مثال زیر، از یک جدول با سه سطر و دو ستون استفاده شده است. با استفاده از خصوصیت colspan سلول های سطرهای اول و آخر با هم ادغام شده اند.
مثال (صفحه بندی در HTML)
<!DOCTYPE html>خودتان امتحان کنید »
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</td>
</tr>
</table>
</body>
</html>کد بالا نتیجه زیر را ایجاد می کند.
Main Title of Web Page
Menu
HTML
CSS
JavaScriptContent goes here Copyright © W3Schools.com نکات مهم
نکته: بزرگترین مزیت استفاده از CSS این است که اگر کد CSS را در یک style sheet بیرونی قرار دهید سایت شما خیلی راحت تر حفظ می شود. شما می توانید صفحه بندی کل وب سایتتان را با ویرایش یک فایل تغییر دهید.
برای کسب اطلاعات بیشتر در مورد CSS به لینک روبرو مراجعه فرمایید: آموزش CSS-معرفی سی اس اس
نکته: به دلیل اینکه ایجاد صفحه بندی های پیشرفته زمان گیر است، گزینه سریعتر، استفاده از یک الگو(template) می باشد. با جستجو در گوگل می توانید وب سایت های رایگانی را که این الگو ها را ارائه می دهند بیابید. (می توانید از آنها استفاده کنید و آنها را سفارشی کنید.)
تگ های صفحه بندی در HTML
تگ توضیح <div> تعریف یک ظرف برای دیگر عناصر (تگ div یک عنصر Block است)
<span> تعریف یک ظرف برای دیگر عناصر (تگ span یک عنصر Inline است)
کلیه رویدادهای عمومی در HTML
کلیه رویدادهای عمومی در HTML
تصور کنید بخواهیم به ازای کلیک کردن کاربر روی یک عنصر، کار مشخصی انجام شود، به عملیات کلیک کردن "رویداد" گفته می شود. در HTML براحتی می توانیم، رویدادها را بعنوان یک ویژگی یا attribute به عناصر HTML اضافه کنیم و آنرا با کدهای سمت کاربر (مثل JavaScript) مقدار دهی نماییم.
برای کسب اطلاعات بیشتر درباره JavaScript، به لینک روبرو مراجعه فرمایید: آموزش JS-مقدمه جاوااسکریپت
در زیر، کلیه رویدادهایی که می تواند بعنوان یک ویژگی یا attribute به عناصر HTML اضافه شود، لیست شده است.
کلیه رویدادهای مربوط به موس
رویداد توضیحات onclick این رویداد، زمانی که کاربر روی عنصر کلیک می کند، اتفاق می افتد.
oncontextmenu این رویداد، زمانی روی می دهد که، کاربر برای باز کردن منوی زمینه، روی یک عنصر راست کلیک می کند.
ondblclick این رویداد، زمانی روی می دهد که، کاربر روی یک عنصر دبل-کلیک کند .
onmousedown این رویداد، زمانی روی می دهد که، کاربر دکمه ی موس را روی یک عنصر فشار دهد.
onmouseenter این رویداد، زمانی روی می دهد که، کاربر نشانگر ماوس را به روی یک عنصر وارد کند.
onmouseleave این رویداد، زمانی روی می دهد که، نشانگر موس از روی یک عنصر خارج شود.
onmousemove این رویداد،زمانی روی می دهد که، اشاره گر موس بر روی یک عنصر، حرکت کند.
onmouseover این رویداد، زمانی روی می دهد که،کاربر اشاره گر ماوس را بر روی یک عنصر یا فرزندان آن عنصر وارد کند.
onmouseout این رویداد، زمانی روی می دهد که، کاربر اشاره گر ماوس را از روی یک عنصر یا فرزندان آن عنصر بیرون ببرد.
onmouseup این رویداد، زمانی روی می دهد که کاربر،دکمه ی ماوس را بر روی یک عنصر رها کند.
کلیه رویدادهای مربوط به کیبورد (keyboard)
رویداد توضیحات onkeydown این رویداد زمانی روی می دهد که، کاربر در حال فشار دادن یک دکمه است.
onkeypress این رویداد زمانی روی می دهد که، کاربر یک دکمه را فشار دهد.
onkeyup این رویداد زمانی روی می دهد که، کاربر یک دکمه را رها کند.
کلیه رویدادهای مربوط به فرم (form)
رویداد توضیحات onblur این رویداد زمانی روی می دهد که، یک عنصر focus(فوکس) را از دست می دهد.
onchange این رویداد زمانی روی می دهد که، مقدار یک عنصر تغییر کند. این عنصر می تواند <input> یا <keygen> یا <textarea> باشد.
onfocus این رویداد زمانی روی می دهد که، یک عنصر focus(فوکس) را به دست آورد.
onfocusin این رویداد زمانی روی می دهد که، یک عنصر در آستانه ی گرفتن focus(فوکس)می باشد.
onfocusout این رویداد زمانی روی می دهد که، یک عنصر در آستانه ی از دست دادن focus(فوکس)می باشد.
oninput این رویداد زمانی روی می دهد که، یک عنصر ورودی را از کاربر دریافت می کند
oninvalid این رویداد زمانی روی می دهد که، یک عنصر نامعتبر است.
onreset این رویداد زمانی روی می دهد که، یک فرم reset شود.
onsearch این رویداد زمانی روی می دهد که، یک کاربر در فیلد search چیزی را بنویسد.
onselect این رویداد زمانی روی می دهد که، کاربر مقداری از یک متن را انتخاب کند(select کند).
onsubmit این رویداد زمانی روی می دهد که، یک فرم submit شود.
کلیه رویدادهای مربوط به حافظه کلیپ بورد (Clipboard)
رویداد توضیحات oncopy این رویداد زمانی روی می دهد که، کاربر محتوای یک عنصر را کپی می کند.
oncut این رویداد زمانی روی می دهد که، کاربر محتوای یک عنصر را cut می کند.
onpaste این رویداد زمانی روی می دهد که، یک کاربر محتوایی را در یک عنصر paste(الصاق) می کند.
کلیه رویدادهای مربوط به پرینت (Print )
رویداد توضیحات onafterprint این رویداد زمانی روی می دهد که، یک صفحه شروع به print می کند یا اینکه پنجره مربوط به print بسته می شود.
onbeforeprint این رویداد زمانی روی می دهد که، یک صفحه در آستانه ی پرینت شدن است.
کلیه رویدادهای مربوط به مدیا (Media )
رویداد توضیحات onabort این رویداد زمانی روی می دهد که لود شدن یک مدیا بی نتیجه باشد.
oncanplay این رویداد زمانی روی می دهد که، مرورگر بتواند نمایش مدیا را شروع کند.
oncanplaythrough این رویداد زمانی روی می دهد که، مرورگر بتواند بدون توقف برای لود کردن، مدیا را نمایش دهد.
ondurationchange این رویداد زمانی روی می دهد که، مدت یک مدیا تغییر کند.
onemptied این رویداد زمانی روی می دهد که به علت یک اتفاق بد، فایل مدیا ناگهان از دسترس خارج می شود.
onended این رویداد زمانی روی می دهد که، مدیا به پایان می رسد (قابل استفاده برای پیام اتمام مدیا).
onerror این رویداد زمانی روی می دهد که، یک error در طول لود شدن فایل مدیا رخ دهد.
onloadeddata این رویداد زمانی روی می دهد که، داده های مدیا، لود شده اند.
onloadedmetadata این رویداد زمانی روی می دهد که، داده های متا، لود شوند.
onloadstart این رویداد زمانی روی می دهد که، مرورگر شروع به جستجوی مدیای مورد نظر می کند.
onpause این رویداد زمانی روی می دهد که، مدیا متوقف شود، خواه توسط کاربر یا بصورت برنامه نویسی.
onplay این رویداد زمانی روی می دهد که، پخش مدیا شروع شود or is no longer paused
onplaying این رویداد زمانی روی می دهد که، مدیا بعد از متوقف شدن(pause) یا توقف برای دانلود ادامه(buffering)، شروع به پخش کند.
onprogress این رویداد زمانی روی می دهد که، مرورگر در پروسه ی گرفتن داده های مدیا می باشد(دانلود کردن مدیا).
onratechange این رویداد زمانی روی می دهد که، سرعت پخش مدیا تغییر کند.
onseeked این رویداد زمانی روی می دهد که، کاربر حرکت/پرش به یک مکان پخش جدید در مدیا را به پایان ببرد.
onseeking این رویداد زمانی روی می دهد که، کاربر حرکت/پرش به یک مکان پخش جدید در مدیا را شروع می کند.
onstalled این رویداد زمانی روی می دهد که، مرورگر در حال تلاش برای دریافت داده های مدیا می باشد اما این داده ها غیر قابل دسترس می باشند.
onsuspend این رویداد زمانی روی می دهد که، مرورگر به طور عمدی داده های مدیا را دریافت نمی کند.
ontimeupdate این رویداد زمانی روی می دهد که، مکان پخش تغییر کند(درست مانند زمانی که کاربر به سرعت مدیا را از نقطه ای به نقطه ی دیگر می برد)
onvolumechange این رویداد زمانی روی می دهد که، میزان صدای مدیا تغییر کند(همچنین هنگامی که صدا در حالت mute قرار دارد)
onwaiting این رویداد زمانی روی می دهد که، مدیا برای دانلود فریم بعدی متوقف شده است و در حالت(resume)قرار دارد.
کلیه رویدادهای مربوط به سمت سرور (Server-Sent)
رویداد توضیحات onerror این رویداد زمانی روی می دهد که یک error در منبع رویداد(event source) ایجاد شود.
onmessage این رویداد زمانی روی می دهدکه، یک پیام از منبع رویداد(event source)دریافت شود.
onopen این رویداد زمانی روی می دهد که، یک اتصال با منبع رویداد(event source) باز شود.
سایر رویدادها
رویداد توضیحات onmessage این رویداد زمانی روی می دهد که، یک پیام از منبع رویداد(event source) دریافت شود. onmousewheel غیر قابل استفاده. به جای آن از رویداد onwheel استفاده کنید.
ononline این رویداد زمانی روی می دهد که، مرورگر شروع به کار در حالت آنلاین می کند.
onoffline این رویداد زمانی روی می دهد که، مرورگر شروع به کار در حالت آفلاین می کند.
onpopstate این رویداد زمانی روی می دهد که، تاریخچه ی(history) پنجره تغییر می کند.
onshow این رویداد زمانی روی می دهد که، یک عنصر <menu> بصورت منوی محتوا(context menu)، نشان داده شود.
onstorage این رویداد زمانی روی می دهد که، یک منطقه ی ذخیره سازی وب بروز رسانی شود.
ontoggle این رویداد زمانی روی می دهد که، یک کاربر عنصر <details> را باز کند یا ببندد.
onwheel این رویداد زمانی روی می دهد که، دکمه ی چرخان ماوس، بر روی یک عنصر به سمت بالا یا پایین بچرخد.
برای مشاهده فیلم ها و آموزش های htmlکلیک کنید.
