html2

Admin الأحد نوفمبر 18, 2007 6:35 am

همانطور که می بينيد دقيقا همان طور که متن در HTML، نوشته شده است در صفحه اصلی ديده می شود.

--------------------------------------------------------------------------------

DIV:
برای ما يک بلوک در متن ايجاد می کند.

مثال:<DIV> … … </DIV>

استفاده ديگر برای تعيين Direction می باشد که سمت نوشتن را از راست به چپ يا چپ به راست می کند.

<DIV dir="rtl/ltr"> … … </DIV>
rtl= right to left
ltr= left to right

از Attributeهای اين تگ خاصيت align می باشد:

<DIV> … … </DIV>

در قديم از تگهای ديگری نيز برای ويرايش متن استفاده می کردند که اکنون بيشتر آنها منسوخ شده اند واستفاده ای ندارند.
در زير به برخی از آنها اشاره می کنيم:
<em> … </em>: دقيقا کار تگ <I> … </I> را می کند ولی نشان می دهد که از نظر منطقی تاکيدی روی متن می باشد.
<strong> … </strong>: دقيقا کار تگ <B> … </B> را انجام می دهد.
<cite> … </cite>: برای نوشتن اسم مقاله يا کتاب ( آنرا italic می کند)
<code> … </code>: برای نوشتن قطعه برنامه از آن استفاده می شود. (با خط Mono Scape )
<kbd> … </kbd>: ورودی های برنامه را با اين تگ می نوشته اند.(M.S)
<samp> … </samp>: برای نوشتن مثال از اين تگ استفاده می شده.(M.S)
<var> … </var>:متغييرها را Italic می کند.
<tt> … </tt>: متن را Mono Scape می کند.( يک نوع Font است.)
<strike> … </strike>: يک خط وسط متن داخل خود می کشد.

<STRIKE> abc </STRIKE>

--------------------------------------------------------------------------------

<blockquote> … </blockquote>:
<big> … </big>: متن که بين آن باشد يک فونت درشتتر می نويسد.
<small> … </small>: متن که بين آن باشد يک فونت کوچکتر می نويسد.
برای درست کردن توان و انديس دو تگ داريم.
مثال: برای توشتن و از دو تگ زير استفاده می کنيم.

a<SUB> 1 </SUB>
a<SUP> 20 </SUP>

--------------------------------------------------------------------------------

<blink> … </blink>: اين تگ فقط در NetScape کار می کند. متن يا عکس که داخل اين تگ قرار می گيرد در صفحه چشمک می زند.

قرار دادن يک تصوير بر روی صفحه:

--------------------------------------------------------------------------------

Image
<IMG>: برای قرار دادن يک تصوير در web از اين تگ استفاده می کنيم.
به چند دليل نبايد از تگ image زياد استفاده کرد.

1- به علت زياد شدن تعداد عکسها صفحه دير load می شود.
2- ايجاد مشکل در Search Engine.
3- عدم قابل استفاده بودن برای همه(عدم سرعت کافی، هزينه دار بودن برای user و ... )

طرز قرار دادن عکس:

<IMG src="آدرس فايل تصوير را در اين قسمت می نويسيم"
align="left/middle/right/top/bottom"
height="ارتفاع عکس بر حسب پيکسل"
width="طول عکس بر حسب پيکسل"
alt=" "

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

border=”ضخامت جدول دور عکس را بر حسب پيکسل نشان می دهد”
hspace=”فاصله عمودی دور تصوير بر حسب پيکسل”
vspace=”فاصله افقی دور تصوير بر حسب پيکسل”>

مثال:<img border="3" src="../Zahiri/email/zahiri.jpg" width="111" height="137" align="center" hscape="10" vscape="10" alt="This is Zahiri's picture">

--------------------------------------------------------------------------------

سوال: برای لينک کردن يک عکس چه کاری را بايد انجام دهيم؟
جواب:

<A href="URL"><IMG src="URL"></a>

آشنايي با Image map:

--------------------------------------------------------------------------------

در بسياری از مواقع در يک صفحه وب مجبوريم قسمتی از يک عکس را به صفحه ای لينک کنيم. برای اين کار در html از Image Map استفاده می کنيم.
مثال: می خواهيم در t1.gif در منطقه يکی دايره و ديگری چهارگوش را به صفحه ای ديگر لينک کنيم:

<MAP>
<AREA>
<AREA>
</MAP>
…
<IMG src="t1.gif" usemap="#Zahiri">

در Image Map يک سری ناحيه به وسيله <AREA> تعريف می کنيم و می گوييم که بايد لينک شود و سپس آنرا وارد يک Image می کنيم.
يک نوع ديگر برای تعيين Area وجود دارد که روش چند ضلعی است:

<AREA>

اگر در<AREA>، نوع Shape را تعريف نکنيم مقدار default آن يعنی rect در آن قرار می گيرد.

interlink(لينک داخلی)

برای درست کردن لينکهای داخلی دو روش داريم.
1- ايجاد flag با استفاده از تگ <A>
2- اسم گذاری عناصر موجود در صفحه با استفازه از headingها

مثال: می خواهيم جمله go to Hamed در بالای صفحه مقابل را به کلمه Hamed در وسط صفحه لينک کنيم.

1- روش flag:

<HTML>
<BODY>
<A> go to Hamed</A>
…
<A> Hamed </A>
…
</BODY>
</HTML>

که در اينجا می توانيد نتيجه را ببينيد.

2- روش اسم گذاری

<HTML>
<BODY>
<A href="vali"> go to middle </a>
…
<H2> middle </H2>
</BODY>
</HTML>

در حالت اول می توانيم middle را به بالای صفحه لينک کنيم ولی در حالت دوم اين امر امکان پذير نيست برای اين کار در حالت اول:

<A name="vali" href="آدرس صفحه"> middle </A>

طرز ايجاد ليست در HTML:

--------------------------------------------------------------------------------

برای ايجاد ليست در html دو روش داريم:
1- Ordered list ليست منظم
2- Unordered list: ليست نامنظم

1- Ordered List:
برای درست کردن يک ليست منظم به روش زير عمل می کنيم.

<OL>
<LH> vali </LH>
<LI> V </LI>
<LI> A </LI>
<LI> L </LI>
<LI> I </LI>
</OL>

تگ <OL> دارای سه Attribute می باشد:

a) Compact :ليست را فشرده تر نشان می دهد
b) Type:"A/a/I/i"

در حالت عادی شماره ها عدد می باشد اما می تواند حروف الفبا يا حروف يونانی باشد.
A: حروف الفبای انگليسی بزرگ
a: حروف الفبای انگليسی کوچک
I: اعداد يونانی با تايپ بزرگ
i: اعداد يونانی با تايپ کوچک
اگر اين Attribute را ننويسيم ليست را با اعداد انگليسی می نويسد.

c) start=” “

از هر عدد يا حرفی که داخل آن قرار بدهيم از همانجا شروع به شماره گذاری می کند.
2- Unordered List:
برای درست کردن يک ليست نامرتب (بدون شماره گذاری) از اين تگ استفاده می کنيم.

<UL>
<LH> … … </LH>
<LH> … … </LH>
…
<LH> … … </LH>
</UL>

اين تگ دارای يک Attribute است که برای تعيين نوع شکلی که در ابتدای هر خط قرار می گيرد از آن استفاده می کنيم.

<UL>
…
</UL>

نکته: اگر بخواهيم عکس خاصی را در UL قرار دهيم:

<UL>
<IMG src="آدرس فايل"><br>

جدولها:
<table> … </table>: هر جدول از سطر و ستون تشکيل می شود.
به طور دقيقتر هد حدول n سطر دارد که هر سطر در داخل خود m سلول خواهد داشت.
سطرها را با <tr> … </tr> هر سلول را با <td> … </td> مشخص می کنيم.
مثال: يک جدول 2*2:

<TABLE>
<TR>
<TD> … </TD>
<TD> … </TD>
</TR>
<TR>
<TD> … </TD>
<TD> … </TD>
</TR>
</TABLE>

affraid