ایمان کامپیوتر
  XHTML آموزش
 


با سلام امروز برای شما دوستان عزیز و علاقه مند به طراحی وب آموزش زبان XHTML رو گذاشتم تا 
مورد استفاده شما واقع شود امید وارم همینطور باشه ! پس فعلا ...

آموزش

تاريخچه

در سال 1992 در دانشگاه مينه سوتا سيستمی به نام web به وجود آمد که دارای دو ويژگی خاص بود.

  1. Graphic, Multi Media
  2. Hyper Text (فقط کليک کردن و در سايت حرکت کردن )

صفحات اين سيستم توسط برنامه ای به نام HTML ساخته شد.

همچنين برای رد و بدل کردن اطلاعات:

HTTP(Hyper Text Transfer Protocol)

HTML Web page

  • HTML يک text عادی و در حقيقت زبانی برای مارک کردن فايلهای text به يکديگر می باشد که آن را با TAG مشخص کرده و به صورت <tag name> می نويسند.

فرمت کلی يک فايل HTML:


يک فايل HTML از دو بخش Body و Head ،تشکيل می شود. شکل ساده يک فايل HTML به صورت زير است.

<HTML>

<HEAD>
<TITLE> This is the title</TITLE>
<HEAD/>

<BODY>
This is the the body

<BODY/>

<HTML/>


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

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


تگ HEAD

در برچسب HEAD از برچسب به نامهای TITLE و BASE و META استفاده می شود.

<HEAD>

<TITLE> </TITLE>

<META > </META >

<BASE >

<HEAD/>

TITLE:
برای تعيين لقب صفحه یا چيزی که در قسمت Status Bar ديده می شود

META:

1.   برای تعيين نام و منبعی که برنامه توسط آن نوشته شده.

2.   بهنگام کردن صفحات web توسط اين برچسب انجام می شود.

3.   انتقال به يک صفحه ديگر web در زمان معيين.

مثال برای حالت اول: در اين حالت برای وارد کردن آدرس web خودمان به موتورهای جستجو در web (مثل yahoo و google و ...) از META استفاده می کنيم:

<META name="keyword"{اجباری} content="Hedayat, students,zahiri,yaghoubi,schoolnet")>
<META name="description"{
اجباری} content="This is Hedayat high school">

مثال برای حالت دوم و سوم:

<META name="vali"{دلخواه} http_equiv="refresh" content="زمان بر حسب ثانيه">

با اين برچسب صفحه web بعد از 1 دقيقه بهنگام (refresh) خواهد شد.

در مثال بالا اگر در قسمت content به صورت زير عمل کنيم صفحه web بعد از 60 ثانيه به www.schoolnet.ir خواهد رفت:

Content="60; URL= http://www.schoolnet.ir"

BASE:
برای مشخص کردن مبدا آدرس دهی از صفحات web می باشد.

<BASE href="آدرس">

 <BASE href="http://www.schoolnet.ir/~zahiri/index.htm">

نکته مهم: در برنامه نويسی HTML برچسب ها به دو صورت با پايان و بی پايان نوشته می شوند.

  1. <TAG>…………………………………</TAG>  با پايان
  2. <TAG> بی پايان  

تگ BODY

قسمت دوم يک فايل HTML را Body تشکيل می دهد که دارای Attributeهای زير می باشد.

<BODY  bgcolor = "رنگ پس زمينه صفحه"

background = "آدرس عکسی که به عنوان پس زمينه در صفحه وب قرار می گيرد. "

topmargin = یک فضای خالی بالای صفحه بر حسب پيکسل ايجاد ما کند""

leftmargin = ""یک فضای خالی سمت چپ صفحه بر حسب پيکسل ايجاد ما کند

text ="color" رنگ متن را مشخص می کند

link = "color"

alink = "color" (active link)

vlink = "color" (visited link)>

نکته مهم: در برنامه HTML و در نوشتن تگها بزرگ و يا کوچک نوشتن حروف هيچ تاثيری ندارد.

Font:
با اين برچسب می توانيم مشخصات متن را به دلخواه خود درآوريم و فرمت کلی آن به صورت زير است.

<FONT> ........</FONT>

اين تگ دارای Attributeهای زير می باشد:

  1. color: رنگ متن
  2. size: اندازه متن
  3. face: نوع متن

مثال: می خواهيم کلمه Schoolnet را با فونت نازنين و با اندازه normal و رنگ آبی بنويسيم.

<HTML>

<HEAD>
</HEAD>

<BODY>
<FONT size = "3" color ="blue"> Schoolnet </FONT>

</BODY>

</HTML>

نکته: اگر بخواهيم اندازه را نسبی مشخص کنيم يعنی نسبت به آنچه که قبلا بوده به صورت زير عمل می کنيم:

Size = +2

BOLD:
اول و آخر متن مورد نظر قرار گرفته و آنرا 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>

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)


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


<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> خالی باشد.

اگر بخواهيم در داخل اين خانه جدول چيزی نباشد ولی ديده شود، بايد از يک فاصله (&nbsp;) استفاده کنيم.

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 را نگذاشته ایم:

target="_self"

صفحه بر روی فريم مادر خود باز می شود:

target="_parent"

صفحه قبلی از بين میرود ويک صفحه بدون فريم ظاهر میشود :

target="_top"

قرار دادن يک
AVI بر روی Webpage:


<IMG dynsrc="(URL)
آدرس فايل مورد نظر "

width=" "  height=" "  loop="تعداد دفعات تکرار">


قرار دادن موسيقی
background بر روی يک web page:

<bgsound src=" " loop="عدد/infinite" >

 قرار دادن نوشته متحرک بر روی web page:

marquee
<MARQUEE  align="top/middle/bottom"

bgcolor="رنگ نوار"

width=" "

 height=" "

hspace=" "

 vspace=" " فضای خالی اطراف نوار

behavior="scroll/slide/alternate"

scroll: خروج نوشته و ورود آن به صورت کارکتر به کارکتر است.

slide: خروج نوشته و ورود آن به صورت ناپديدشدن و پديدار شدن ناگهانی است.

alternate: به دو طرف نوار برخورد کرده و نوسان می کند.

direction="left/right" متن بايد به سمت چپ يا راست حرکت کند

loop=" " تعداد دفعات

scrollamount=" " مقدار حرکت بر حسب پيکسل

scrolldelay=" " مقدار تاخير بر > this is web page </MARQUEE>

 

 به تمام سرويسهايی که در internet وجود دارد مثل Email، گوفر و ...

1.      E-mail link

<A href="mailto: info@schoolnet.ir"> schoolnet </A>

2.      Usenet link

<A href="news: news address"> news </A>

3.      Ftp link

<A href="ftp://ftp.mysite.com/pub/fag">for download FAG click here</A>

4.      Gopher link


<A href="gopher://gopher.mysite.com"> here </A>

5.      Telnet


<A href="telnet://address"> click here </A>

 قرار دادن موسيقی background بر روی يک web page: 

<bgsound src=" " loop="عدد/infinite" >

 

 

HTML
 
  Today, there have been 2 visitors (4 hits) on this page!  
 
This website was created for free with Own-Free-Website.com. Would you also like to have your own website?
Sign up for free