تبلیغات
....::::Iran Club::::....
Font Engilsh Spanish Arabic Japanese Indian Italian Germanic Turkish

اجزاى اصلى HTML
( درس اول )


 

مقدمه
سایتهایی كه چگونگی ایجاد صفحه Web را به مبتدیان می آموزند‌، همیشه به روش مشابه عمل می كنند و به شما می گویند كه صفحه Web چیست و چرا به آن نیاز دارید ؟
من حدس می زنم ، حالا كه شما این كتاب را انتخاب كرده اید، صفحه Web را قبلا دیده اید و می دانید چرا یكی از آنها را می خواهید . به سرعت و بسادگی ایجاد صفحه های
Web را با استفاده از برچسب های HTML به شما یاد خواهیم داد .

این سایت را برای چه كسانی نوشته ایم ؟
برای فهم این سایت ، نیازی نیست كه چیزی از اینترنت بدانید یا متخصص رایانه باشید .
اگر بتوانید با برنامه های اصلی (مثل واژه پرداز ) در ویندوز 95 ،98 یا NT كار كنید و اگر بتوانید در اینترنت از صفحه ای به صفحه دیگر بروید ، آماده شروع كار با این
كتاب هستید . در پایان مطالعه این سایت ، نه فقط چگونگی ایجاد صفحات Web جالب را برای كار یا برای خودتان خواهید داشت ، بلكه همچنین خواهید فهمید كه چگونه
آنها را برای مشاهده همگان روی Web منتشر كنید .

چیزهایی كه احتمالا خودتان به آن پی خواهید برد :

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

توجه :

برای كد نویسی به زبان HTMLبه نرم افزاری به نام Notepad نیاز داریم .
برای كد نویسی HTML سه تگ اصلی وجود دارد كه عبارتند از :
  . 3 . 2

 شكل كلی دستورات و برنامه HTML

 هر دستور HTML دارای یك علامت شروع و یك علامت پایان است و در داخل علامتهای كوچكتر وبززگتر (<>) قرار می گیرد . اما دستوراتی در HTML وجود دارند كه علامت پایانی ( تگ پایانی ) ندارند .


 هر برنامه HTML با یك دستور <html> شروع و به یك دستور <html/> ختم می شود . هر برنامه شروع HTML شامل دو بخش است : بخش عنوان و بخش بدنه

تگ <head> :

این تگ به عنوان تعریف سر فصل استفاده می شود و تگ پایانی آن (<head/>) اجباری می باشد .

<head/>

تگ <body> :

بخش بدنه با <body> شروع و به <body/> ختم می شود . این بخش شامل تمام دستوراتی است كه صفحه را تولید می كنند .

تگ <title> :

عنوان با دستور <title> شروع و به دستور <title/> ختم می شود . از این تگ برای درج عنوان در نوار عنوان مرورگر استفاده می شود .

 

صفات قالب بندی متن




صفات قالب بندی متن ( بخش اول )


  1. تعیین عناوین متن<Hn>:

    عناوین متنها در HTML به 6 دسته تقسیم می شوند . دسته اول با دستور H1(<H1>) دسته دوم با دستور H2(<H2>) , ..., دسته ششم با دستور H6(<H6>) تعیین می شوند .

    حروف عنوان H1 از همه بزرگتر و حروف عنوان H6 از همه كوچكتر است .


    برای تعیین اندازه عنوان برای یك متن ، باید آن را در بین <Hn> و <Hn/> قرار دهید كه n یكی از مقادیر 1 تا 6 است .

     توضیحات تگ <Hn> :

    1. تعیین اندازه متن :

      دستور زیر را ببینید :

      <H1>Welcome To HTML </H1>

      این دستور موجب می شود تا متن Welcom To HTML با تیتر درشت ، یعنی عنوان H1 در سمت چپ سطر ظاهر شود .

    2. تعیین موقعیت متن :

      برای تعیین عنوان در یك سطر ، از صفت Align استفاده می شود :
       

      Align=Center یا Left یا Right

      دستور زیر را ببینید :

      <H6 Align=center>Heading Number Six </H6>

      این دستور متن Heading Number Six را در وسط سطر با عنوان شماره 6 چاپ می كند . 

  2. پاراگراف بندی متن <p>:

    متنها در HTML به همان صورتی كه تایپ می شوند ، ظاهر می گردند . برای تعیین شروع و پایان پاراگراف از دستورات <p> و <p/> استفاده می گردد.
    <p> شروع پاراگراف و <p/> پایان متن را مشخص می كند .
     

    <p align=right> This Is A Site . </p>

  3. رسم خط افقی <Hr>:

    برای رسم خط افقی در صفحه از دستور <Hr> استفاده می شود . دستور <Hr/> خطی افقی را در موقعیت جاری صفحه وب ترسیم می كند .

       توضیحات صفات تگ <Hr>

          دستور Hr دارای صفات Align ,Color , Width , Size است .

    1. صفت Align :

          این صفت برای تعیین جهت خط در یك سطر ، از صفت Align استفاده می شود .

    Align=Center یا Left یا Right

          دستور زیر را ببینید :

    <Hr  Align="center">

          این دستور خطی رسم می كند كه از وسط سطر تنظیم می شود .
    1. صفت Size :

          این صفت ارتفاع خط افقی را بر حسب پیكسل تعیین می كند .
          دستور زیر را ببینید :

    <Hr  Align="left"  size=3>

    1. صفت Width :

          این صفت پهنای خط را به صورت درصد یا پیكسل مشخص می كند .
          دستور زیر راببینید :

    <Hr  Align="right"  width="420">

          این دستور خطی رسم می كند كه از سمت راست سطر تنظیم می شود و پهنای آن 420 اینچ است .
    1. صفت Color :

          این صفت رنگ خط را مشخص می كند كه ممكن است با نام رنگ یا با فرمت مبنای 16 مشخص شود .
          دستور زیر را ببینید :

    <Hr  Align="right"  Width="500"  Size="5"  Color=red>

          این دستور خطی رسم می كند كه از سمت راست سطر تنظیم می شود ، پهنای آن 500 است ، ارتفاع آن پنج اینچ ورنگ آن قرمز است .

      نكته :

          در حالت عادی تگ <Hr> باعث رسم خط با یك حالت سه بعدی می شود (در صورتی كه از ویژگی color استفاده نكرده باشیم .)
          Shade : توسط این پارامتر می توان خطی با حالت دو بعدی با یك رنگ معین بدون سایه رسم كرد .
          دستور زیر را ببینید :

    <Hr  width=10px   size=20px   noshade>

صفات قالب بندی متن ( بخش 2 )


4.       تعیین نوع حروف متن :

a.       <B>:

این تگ موجب می شود تا متن بعد از آن به صورت پر رنگ یا به صورت Bold نوشته شود و </B> انتهای آن را مشخص می كند .
دستور زیر را ببینید :

<B>This is Bold text.</B>

2.                   <I>:

این تگ موجب می شود تا متن بعد از آن به صورت ایتالیك نوشته شود و </I> انتهای آن را مشخص می كند .
دستور زیر را ببینید :

<I>This is Italic text.</I>

3.                   <Strong>:

با استفاده از این تگ می توان متن تاكیدی را مشخص كرد . متنی كه با این دستور مشخص می شود معمولا به صورت Bold نوشته می شود ، این تگ مشابه تگ <B> است .
دستور زیر را ببیند :

It is really <Strong> Important </Strong> to pay attention

با اجرای این دستور ، بر كلمه Important تاكید می شود و به صورت Bold نشان داده می شود .

4.                   <Em>:

این تگ برای تاكید بر روی متن مورد استفاده قرار می گیرد . متنی كه بین <Em*gt; و </Em> قرار می گیرد به صورت Italic نوشته می شود . این تگ مشابه تگ <I> است .

This is an <Em> important point </Em> to consider

با اجرای این دستور ، بر كلمه Important point تاكید می شود و به صورت Italic نشان داده می شود .

5.       توضیحات در HTML :

برای نوشتن توضیحات درفایل HTML ازعلامت --!> برای شروع وازعلامت <--; برای پایان توضیحات استفاده می شود .
دستور زیر را ببینید :

<-- This is a simple comment --!>

6.       متن چشمك زن <Blink> :

برای اینكه متنی در صفجه وب به صورت چشمك زن باشد آن را بین دو تگ <Blink> و </Blink> قرار دهید . دستور زیر ، متن مورد نظر را چشمك زن می كند ( توجه كند كه این دستور مربوط به مرورگر Netscape است . )

<Blink> This is a blinkig text </Blink>

7.       متن متحرك <Marquee> :

با استفاده از این تگ می توان متن متحركی را ایجاد كرد .

صفات تگ <Marquee>

1.       Behavier :

    این صفت حركت متن را كنترل می كند . این صفت خود دارای سه خصوصیت می باشد :

1.       Alternate :این مقدار مشخص می كند كه متن در طول مسیر یك بار از چپ به راست و بار دیگر از راست به چپ حركت می كند .

2.       Scroll :این مقدار موجب می شود متن از یك سمت شروع به حركت كند و با رسیدن به انتهای طرف دیگر ، دوباره از همان سمت شروع به حركت كند .

3.       Slide : این مقدار موجب می شود تا متن در طول مسیر حركت كند و وقتی در طول مسیر حركت كند و وقتی كه اولین كاراكتر آن به طرف دیگر رسید ، متوقف شود .

2.       Bgcolor :

این صفت رنگ زمینه متن متحرك را مشخص می كند .

3.       Drection :

این صفت مشخص می كند متن از چه جهتی حركت كند . مقدار فرضی آن left است . مقادیر دیگر عبارتند از :
Down (پایین ) ، Up (بالا ) و Right (راست)

4.       Weight :این صفت ارتفاع كادر حاوی متن را به پیكسل یا به درصدی از پنجره ای كه در آن نمایش داده می شود ، مشخص می كند .

5.       Width : :این صفت عرض كادر حاوی متن را به پیكسل یا به درصدی از پنجره ای كه در آن نمایش داده می شود ، مشخص می كند .

6.       Loop : این صفت مشخص می كند كه متن چند بار حركت كند .

تذكر :

در حالت عادی بی نهایت بار حركت ، مگر اینكه مقدار صفت Behvior برابر با Slide تعیین شود . اگكر مقدار آن -1 یا Infinite باشد ، متن بی نهایت بار حركت می كند .

7.       Scrollamount : این صفت مشخص می كند فاصله بین هر بار نمایش متن متحرك چند پیكسل باشد .

8.       Scrolldelay : این صفت مشخص می كند بین هر بار نمایش متن متحرك ، چند میلی ثانیه فاصله باشد .
دستورات زیر را ببینید :

< "Marquee Behavior= "Alternate >
!!! Spesiol Value !!! This Term only
<Marquee/ >

<Marquee Bgcolor="red" Direction="right" Height="30" Width=80% >
!! The super scroller scrolls again
<Marquee/>

 

8.       نوشتن متن در چند سطر <Br> :

اگر بخواهید متنهای مورد نظرتان را در چند سطر بنویسید از دستور <Br> استفاده كنید. متنی كه پس از این دستور می آید ، در سطر بعدی قرار می گیرد.
دستور زیر را ببینید :

. This text splits<Br> in two lines

اگر این دستور را در مرورگر اجرا كنید ، نتیجه زیر حاصل می شود :

This text splits
in two lines

9.       ایجاد فضای خالی <ul> :

این تگ فضای خالی در ابتدای متن ایجاد می كند وباعث تورفتگی افقی و لیست شدن سطرها می شود .
دستور زیر را ببینید :

<Ul>. This is a space in the first line </Ul>

10.   <TT> :

متنی كه بین این دو تگ <TT> و <TT/> قرار می گیرد به صورت پشت سر هم نشان داده می شود و همچنین متن به صورت Monospace نمایش داده می شود .

لیستها




لیستهای منظم , لیستهای نا منظم , لیستهای توضیحی


لیستهای منظم

تگ <Ol>

از این تگ برای تعریف لیست شمارشی استفاده می شود و محتویات لیست ها بین تگ آغازین و پایانی <Ol> قرار می گیرد . مرورگر به محض مشاهده تگ <Ol> متوجه می شود كه باید لیست ایجاد كند و به هر یك از عناصر لیست ، شماره ای اختصاص دهد .

صفت Type :

از این صفت در تگ <Ol> برای مشخص كردن نحوه شماره گذاری لیست شماره دار استفاده می شود
Type= x كه x مشخص كننده سمبل مناسب برای لیست است بدین صورت :br> "A" برای حروف بزرگ ، "a" برای حروف كوچك ، "I" برای ارقام رومی بزرگ "i" برای ارقام رومی كوچك پیش فرض در نظر گرفته شده اند .

صفت Start :

نحوه شماره گذاری اعضای لیست را می توان تغییر داد ، بدین منظور از این ویژگی در تگ <Ol> استفاده كرده و مقدار این ویژگی را وارد كنید كه این مقدار عددی است كه شروع شماره گذاری را معین می كند ، ارزش Start همواره عدد است این عدد متناسب با ارزش type به طور خودكار تغییر می كند .

تگ <Li>

برای تعریف عناصر لیست استفاده می شود و تگ پایانی ندارد كه عناصر لیست توسط این تگ از هم جدا می شود .

صفت Value :

مقدار این ویژگی عددی است كه ادامه شماره گذاری بر اساس آن عدد انجام خواهد شد و همیشه به صورت عدد تعیین شده و مرورگر متناسب با نماد تعیین شده توسط ارزش type آن را تغییر می دهد .

لیستهای نا منظم

تگ <Ul>

از این تگ برای تعریف لیست نامنظم استفاده می شود .

صفت Type :

از این صفت در تگ <Ul> جهت تعیین نوع علامت گذاری استفاده می شود مقادیر این ویژگی عبادتند از :
dis : دایره توپر (پیش فرض)
circle : دایره تو خالی
square : مربع تو خالی

تگ <Li>

عناصر لیست توسط این تگ از هم جدا می شوند .

نكته :

هر عبارتی كه بین تگ <Li> نوشته شود ، بصورت لیست بدون علامت نشان داده می شود .

لیستهای توضیحی

تگ <Dl> :

در بین تگ آغازین و پایانی این تگ محتویات لیست های توضیحی قرار می گیرد .

تگ <Dt> :

برای جداكردن عبارات یا اصطلاحات از این تگ استفاده می شود .

تگ <Dd> :

تمامی تعاریف (مربوط به عبارات) را توسط تگ <Dd> از هم جدا كنید .

نكته :

مرورگر تمامی متونی كه توسط تگ <Dt> از هم جدا شده اند را در ناحیه سمت چپ پنجره و متونی كه با دستور تگ <Dd> جدا شده اند را با كمی فاصله در سمت چپ پنجره نمایش می دهد .

 

صفات فریم ها






 

صفات Target :

top- :

مقصد پیوند در یك صفحه كامل وب نمایش می یابد .

Target=-top

blank- :

مقصد پیوند در پنجره ای جدید نمایش می یابد . این روش برای تعیین سایت های دیگران ره عنوان هدف پیوند مناسب است چراكه ممكن است این سایت ها در فریم های شما به صورت مناسبی قرار نگیرند .

parent- :

مقصد پیوند در پنجره parent (مادر) نمایش می یابد یعنی مقصر پیوند در فریمی است كه مجموعه فریم جاری را در بر دارد . این ارزش تنها هنگامی كه از مجموعه فریم های تو در تو استفاده می كنید كاربرد دارد .

self- :

مقصد پیوند در همان فریمی كه پیوند در آن قرار دارد باز می شود .

صفات تگ <Iframe> :

صفت Src :

با به كاربردن این صفت در تگ <Iframe> به صورت Src="frame.url" كه در آن "frame.url" صفحه ای است كه ابتدا در فریم درون برنامه ای به نمایش در می آید .

صفت Name :

ویژگی Name=name برای تعیین نام برای فریم درون برنامه (iframe)است .

صفت Align :

توسط این صفت در تگ <iframe> می توان متن درج شده بعد از فریم را در سمت موردنظر از فریم قرار دهید كه دارای دو مقدار right , left است .

صفت Height , Width :

توسط این دو ویژگی به ترتیب می توان پهنا و ارتفاع فریم را درون برنامه ای را بر حسب درصد یا پیكسل مشخص می كند .

نكته :

در تگ <iframe> نیز می توانید صفات Scrolling , Frameborder . Marginheight , marginwidth ,Vspace , Hspase را به كار ببرید .

صفات تگ <Frame> :

صفت Src :

توسط این صفت URL سازنده فریم مشخص می شود (یعنی در فریم (زیر صفحه ) چه فایلی قرار می گیرد .)

صفت Name :

توسط این صفت به هر یك از زیرمجموعه ها می توان نام اختصاص داد (در صورتی كه مقصد یك پیوند را بخواهید در این زیر صفحه نمایش دهید از نام آن استفاده خواهید كرد .)

صفت Scrolling :

توسط این ویژگی نحوه نمایش میله های لغزان (scrollbar) مشخص می شود . این ویژگی سه مقدار "yes" , "no" , "aoto" می باشد . اگراز مقدار "yes" استفاده كنید مرورگر میله های لغزان را برای فریم مورد نظر نمایش می دهد . اگر از مقدار "no" استفاده كنید میله های لغزان را نمایش نمی دهد . اگر از مقدار "auto" استفاده كنید فقط در صورتی كه محتویات زیر صفحه بیشتر از محدوده قابل رویت باشد میله های لغزان را نمایش می دهد .

دستور زیر را ببینید :

<Frame   Src="page1.html"   Scrolling="auto">

صفت Noresize :

اگر از این صفت در تگ استفاده كنید اجازه تغییر اندازه ها (ابعاد)زیر صفحه ها به دیگر كاربران نخواهد داد .

<Frame   Src="page1.html"   noresize>

صفت Marginwidth :

این صفت فاصله افقی محتویات فریم ها را با حاشیه های راست وچپ بر حسب نقطه تنظیم می كند . مقدار این ویژگی به صورت پیكسل است .

صفت Marginheight :

این صفت فاصله عمودی محتویات فریم را با حاشیه های بالا و پایین فریم بر حسب پیكسل تنظیم می كند .

<Frame   Name="page"   Src="page1.html"   Marginwidth=2   Marginheight=2>

صفت Border :

با به كاربردن این صفت در تگ <Frame > می توان ضخامت حاشیه های فریم را بر حسب پیكسل تعیین كرد (پهنای فضای بین فریم ها را در واحد پیكسل تعیین كرد .)

<Frame Name="a"   Border=4 >

صفت Bordercolor :

برای تعیین حاشیه ها (border) استفاده می شود .

<Frame Name="a"   Bordercolor=blue >
یا
<Frame Name="a"   Border="#00rrggbb" >
 

صفت Frameborder :

با استفاده از این صفت می توان برای فریم ها ، حاشیه در نظر گرفت و دارای دو مقدار yes , no است .
اگر از مقدار Yes باشد حاشیه ها قابل رویت خواهد بود .
اگر مقدار آن NO باشد حاشیه ها را حذف می كند اما فضای بین فریم ها باقی خواهد ماند .
به منظور حذف حاشیه ها و فضای بین فریم ها به طور همزمان Frameborder=no , Border=0 را به كار ببرید .

صفت Framespasing :

این صفت مانند صفت border عمل می كند و می توانیم توسط صفت framespacing سایز حاشیه ها (border) را تعیین كنیم .
جستجو
    • نظر سنجی
    مهمترین عنصر یک سایت از نظر شما:






    آمار سایت
    بازدیدهای امروز : نفر
    بازدیدهای دیروز : نفر
    كل بازدیدها : نفر
    بازدید این ماه : نفر
    بازدید ماه قبل : نفر
    تعداد نویسندگان : عدد
    كل مطالب : عدد
    آخرین بروز رسانی :
    امکانات وب
    حمایت از کودکان مبتلا به سرطان


    LiveZilla Live Help