آموزش اچ تی ام ال

آموزش طراحی سایت (HTML CSS Javascript) | آتریا

آموزش اچ تی ام ال

: 10 شهریور 1397

صفحه بندی در وب، برای اینکه سایت شما جذاب به نظر برسد، بسیار مهم است.

پس صفحه وبتان را با دقت طراحی نمایید.

مثال - خودتان امتحان کنید

Web page layout using <div> elements
نحوه صفحه بندی با استفاده از عناصر <div>.

Web page layout using <table> elements
نحوه صفحه بندی با استفاده از عناصر <table>.

صفحه بندی وب سایت ها

Wiki

بیشتر وب سایت ها محتویات خود را در چندین ستون قرار می دهند (به فرمت مجله ها یا روزنامه ها)

با استفاده از عناصر <div> یا <table> می توان حالت چند ستونی را ایجاد نمود.

	گرچه می توان به وسیله جداول HTML، صفحه بندی نمود اما باید دانست که جداول برای ارائه داده ها در قالب جدول هستند نه ابزاری برای صفحه بندی.

صفحه بندی با استفاده از عناصر <div>

Wiki

عنصر <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
JavaScript

Content goes here

مثال - خودتان امتحان کنید

Web page layout using <div> elements with 3 columns
در این مثال، نحوه صفحه بندی سه ستونه نشان داده شده است.

صفحه بندی با استفاده از جداول

Wiki

راه ساده ایجاد یک صفحه بندی، استفاده از تگ <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 JavaScript	Content goes here
Copyright © W3Schools.com

نکات مهم

Wiki

نکته: بزرگترین مزیت استفاده از CSS این است که اگر کد CSS را در یک style sheet بیرونی قرار دهید سایت شما خیلی راحت تر حفظ می شود. شما می توانید صفحه بندی کل وب سایتتان را با ویرایش یک فایل تغییر دهید.

برای کسب اطلاعات بیشتر در مورد CSS به لینک روبرو مراجعه فرمایید: آموزش CSS-معرفی سی اس اس

نکته: به دلیل اینکه ایجاد صفحه بندی های پیشرفته زمان گیر است، گزینه سریعتر، استفاده از یک الگو(template) می باشد. با جستجو در گوگل می توانید وب سایت های رایگانی را که این الگو ها را ارائه می دهند بیابید. (می توانید از آنها استفاده کنید و آنها را سفارشی کنید.)

تگ های صفحه بندی در HTML

تگ	توضیح
<div>	تعریف یک ظرف برای دیگر عناصر (تگ div یک عنصر Block است)
<span>	تعریف یک ظرف برای دیگر عناصر (تگ span یک عنصر Inline است)

کلیه رویدادهای عمومی در 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کلیک کنید.