آموزش گام به گام زبان Html

[hiddenboy]

عنوان اثر : آموزش گام به گام زبان Html
موضوع : امنيت و شبکه
نويسنده : علی رمضانی
فرمت :.RAR

توضيحات :آموزش طراحی سایت به زبان Html

<SPAN style="FONT-SIZE: 11px">
<FONT style="FONT-SIZE: 11px" face=Tahoma>

[pnugirl]

به نظر کتاب خوبی می رسه. لینک کتاب رو بذارین علی آقا

[hiddenboy]

the link is worked out
dorostesh mikonam

[pnugirl]

مرسي

[hiddenboy]

خوب دوستان عزیز چون لینک آموزش قبلی خراب بود مجبور شدم کل آموزش رو از یه جا گیر بیارو بزارم اینجا!
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> خالی باشد.
اگر بخواهيم در داخل اين خانه جدول چيزی نباشد ولی ديده شود، بايد از يک فاصله (&nbsp استفاده کنيم.
Attributeهای <table> عبارتند از:


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

attributeهای هر cell:


width=" "

height=" "

bgcolor=" "

background=" "

border=" "

nowrap

rowspan=" "

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" :صفحه قبلی از بين میرود ويک صفحه بدون فريم ظاهر میشود



قرار دادن يک 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>

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


<IMG dynsrc="(URL)آدرس فايل مورد نظر "
width=" " height=" " loop="تعداد دفعات تکرار">

به تمام سرويسهايی که در 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" >

[pnugirl]

خیلی ممنونم علی آقا. اگر سوالی بود حتما مزاحمتون می شم

[hiddenboy]

در خدمتم