سبد (0)

تبلیغات

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

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

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


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

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

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


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

    Wiki

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

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

    lamp

    گرچه می توان به وسیله جداول 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
    Copyright © beyamooz.com

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

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


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

    Wiki

    راه ساده ایجاد یک صفحه بندی، استفاده از تگ <table> می باشد.

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

    lamp

    استفاده از جداول برای حالت چند ستونی، کاربرد درستی از عنصر <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 است)

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

    READ MORE
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان