information html

pooriamirani الأربعاء نوفمبر 25, 2009 11:30 pm

اول و آخر متن مورد نظر قرار گرفته و آنرا Bold می کند.

<B> text ? </B>

ITALIC:
اول و آخر متن مورد نظر قرار گرفته و آنرا Italic می کند.

<I> text ? </I>

UNDERLINE:
اول و آخر متن مورد نظر قرار گرفته و آنرا Underline می کند.

<U> text ? </U>

ANCHOR:
در HTML بوسيله تگ <a> ? </a> می توانيم يک متن يا عکس را به صفحه ای ديگر پيوند دهيم (Hyper link).مهمترين Attribute در اين تگ، href می باشد.

فرمت کلی اين تگ به صورت زير است.

<a href = ?URL?> text/image </a>

مثال: در جمله click here to go to zahiri home page کلمه zahiri را به آدرس index.html لينک کنيم:

<BODY>

<p>
click here to go to
<a href ="http://www.schoolnet.ir"> schoolnet </a>
home page
</p>

</BODY>

همانطور که می بينيد کلمه مورد نظر به آدرسی که می خواهيم ، لينک شده است

تگهايی که به وسيله آنها متن را فرم بندی می کنيم:

PARAGRAPH
<P> ? </P>: در اين تگ همه موضوعات آن در يک خط نوشته شده يا يک پاراگراف ايجاد می شود که در صورت بوجود آمدن پاراگراف در زير خط اول، خط دوم را با فاصله زياد می نويسد.برای حل اين مشکل از تگ <BR> استفاده می کنيم.
تگ <P> دارای يک Attribute است:

<A align="left/center/right">

BREAK
<BR>: اين تگ از تگهايی است که پايان ندارد و آن را هر کجا که قرار دهيم کلمه بعدی را در يک خط پائين تر ولی با کمتر می نويسد.

NO BREAK
<NOBR> ? </NOBR>: اگر بخواهيم در آخر خط شکستگی نداشته باشيم بين دو بخشی که شکسته می شود از اين تگ استفاده می کنيم.

مثال: <NOBR>a2</NOBR>

a, 2 را هرگز از هم جدا نمی کند.

HEADING

در HTML دارای شش نوع HEADING هستيم.

<H1> ? </H1> بزرگترين
<H2> ? </H2>
.
.
<H6> ? </H6> کوچکترين

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

مثال: <H2 align=?center?> vali </H2>

HR
تگ <HR> برای ما تک خط افقی سه بعدی ايجاد می کند و دارای Attributeهای زير می باشد.

<HR align="left/center/right" width=?طول خط بر حسب پيکسل يا درصد?
size=?ضخامت خط بر حسب پيکسل?
noshade: با نوشتن اين کلمه خط سه بعدی نمی شود .
color=?رنگ خط?>

PRE
در HTML هر چيزی را که بين تگ <PRE> ? </PRE> به هر صورتی که بنويسيم با همان شکل در صفحه وب نشان می دهد.
مثال:

<PRE> Vali
Ali ?
Reza a b cd
</PRE>

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

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

مثال:<DIV style="color: red"> ? ? </DIV>

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

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

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

<DIV align=?left/center/right?> ? ? </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 name="Zahiri" >
<AREA shape="circle" coord="50,50,30" href="1.htm">
<AREA shape="rect" cords-"100,70,130,100" href="2.htm">
</MAP>
?
<IMG src="t1.gif" usemap="#Zahiri">

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

<AREA shape=?poly? coord=?x1,y1,x2,y2,?? href=?3.htm?>

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

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

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

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

1- روش flag:

<HTML>
<BODY>
<A href=?#2?> go to Hamed</A>
?
<A name=?2?> Hamed </A>
?
</BODY>
</HTML>

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

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

<HTML>
<BODY>
<A href="vali"> go to middle </a>
?
<H2 id="vali"> 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 type=?circle/disc/square? >
?
</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>

هر چيزی که داخل <td> بنويسيم در داخل آن خانه (سلول) جدول قرار می گيرد.
نکته مهم اين است که نبايد بين دو <td> ? </td> خالی باشد.
اگر بخواهيم در داخل اين خانه جدول چيزی نباشد ولی ديده شود، بايد از يک فاصله ( ) استفاده کنيم.
Attributeهای <table> عبارتند از:

<TABLE
bgcolor="رنگ پس زمينه جدول"
background="عکس پس زمينه جدول"
border="حاشيه دور جدول"
align="left/center/right"
width="ظول جدول(پيکسل يا درصد)"
height="ارتفاع جدول(پيکسل يا درصد)"
bordercolor="تگ حاشيه دور جدول"
valign="top/middle/bottom"
cellpadding="فاصله متن از ديواره سلول"
cellspacing="فاصله سلولها از هم"
>

attributeهای هر cell:

1.

width=" "
2.

height=" "
3.

bgcolor=" "
4.

background=" "
5.

border=" "
6.

nowrap
7.

rowspan=" "
8.

colspan=" "

nowrap: محتويات داخل سلول همه دريک خط نوشته می شود و ديگر سلول شکسته شده و به خط بعدی نمی رود.
مثال 1:

<TD colspan="2"> ? </TD>

مثال 2:

<TD rowspan="2"> ? </TD>

در rowspan يا colspan تعداد سلولهايی را که می خواهيم در هم ادغام کنيم را بنويسيم.
بايد توجه کنيم که به همان تعداد که سلول در هم ادغام می کنيم بايد از پائين سلولهای اضافی را حذف کنيم.
مثلا در مثال 1:

<TABLE>
<TR>
<TD> ? </TD>
<TD> ? </TD>
</TR>
<TR>
<TD> ? </TD>
<TD> ? </TD>
</TR>
</TABLE> <TABLE>
<TR>
<TD colspan=?2?> ? </TD>
</TR>
<TR>
<TD> ? </TD>
<TD> ? </TD>
</TR>
</TABLE>

فريم بندی در html:

فريم بندی صفحات html يعنی اينکه صفحه را به چند قسمت تقسيم کرده و برای هر قسمت يک صفحه html يا ASP يا PHP جايگزين می کنيم.
برای معرفی يک صفحه فريمی از <FRAMESET> ? </FRAMESET> استفاده می کنيم.
مثال: می خواهيم صفحه فريمی زير را که از دو ستون تشکيل شده را طراحی کنيم.

<HTML>
<HEAD>
<TITLE> frames </TITLE>
</HEAD>
<FRAMESET cols="200,*">
<FRAME src="menu.htm">
<FRAME src="welcome.htm">
</FRAMESET>
</HTML>

cols=" " =ستونی

1- می خواهيم صفحات را به صورت ستونی در کنار يکديگر قرار دهيم.
2- درون " "=cols بايد نسبت صفحاتی را که می خواهيم درون صفحه فريمی جا بگيرد را معرفی کنيم. در مثال به صورت زير نوشته شد.

<FRAMESET cols="200,*" >

يعنی ما می خواهيم دو صفحه را در کنار هم قرار دهيم که اولی 200 پيکسل و صفحه دوم بقيه طول صفحه را در بر خواهد گرفت.
اگر بخواهيم صفحه ها به صورت مثلا مساوی قسمت شوند:

<FRAMESET cols="*, *" >
يا
<FRAMESET cols="50%,50%" >

اگر بخواهيم صفحه ها را به صورت سطری در کنار يکديگر قرار دهيم به صورت زير استفاده می کنيم:

<FRAMESET rows=" ">

نکته مهم:در فايلهای html يا بايد frameset داشته باشيم يا body و نمی توانيم هر دو را با هم داشته باشيم.

Attributeهای فريم:

<FRAME
src=" "
frameborder="yes/no/3d"
marginwidth=" "
marginheight=" " فضای دور هر فريم
noresize
scrolling="yes/no/auto">

اسم گذاری برای هر فريم و برای مراجعه به اين صفحه بايد <" "=name> حتما از اين اسم استفاده کرد.
مثال:
يک صفحه فريمی به صورت زير داريم و می خواهيم user با کليک کردن روی student صفحه ای را ببيند که به جای welcome باز می شود و همچنين برای کلمه grads:

برای ساختن اين صفحه فريمی بايد از قبل تمام صفحات را ساخته باشيم:

1- menu.htm
2- welcome.htm
3- student.htm
4- grads.htm

menu.htm
<HTML>
<BODY>
<A href="student.htm" target="reza"> student </A>
<A href="grads.htm" target="reza"> grads</A>
</BODY>
</HTML>

اين targetها همان اسم فريمها هستند برای اينکه با کليک کردن روی grads صفحه مربوطه به جای صفحه welcome.htm باز شود بايد از target استفاده کنيم.
در جلوی target اسم آن صفحه فريمی را که می خواهيم صفحه ما در آنجا باز شود را می نويسيم.

welcome.htm
<HTML>
<BODY>
Welcome to my home page
</BODY>
</HTML>
student.htm
<HTML>
<BODY>
this is student home page
</BODY>
</HTML>
grads.htm
<HTML>
<BODY>
Here is the grads home page.
</BODY>
</HTML>

بعد از ساختن اين صفحات حال بايد صفحه فريمی اصلی را بسازيم:

<HTML>
<HEAD> <TITLE> welcome to this frame page. </TITLE>
</HEAD>
<FRAMSESET cols=?200, *? >
<FRAME src=?menu.htm? name=?vali? >
<FRAME src=?welcome.htm? name=?reza?>
</FRAMESET>
</HTML>

در صفحه های فريمی اول سطرها پر می شوند بعد ستونها.
Attributeهای frameset:

1- border=" "
2- bordercolor=" "
target=" "
target="_blank" : روی صفحه فريمی باز می شود new pageيک
target="_self" : را نگذاشته ايم target مثل اين است که
target="_parent" : صفحه بر روی فريم مادر خود باز می شود
target="_top" :صفحه قبلی از بين میرود ويک صفحه بدون فريم ظاهر میشود