آموزش HTML

saalek · 28 ژانویه 2006

منبع اين آموزش از سايت
http://www.w3schools.com/html/default.asp
است.

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

saalek · 28 ژانویه 2006

کد:

<html>
<body>
The content of the body element is displayed in your browser.
</body>
</html>

اين ساده ترين صفحه اي است كه ميشه ساخت.
كد بالا را در اديتور خود paste كنيد و با پسوند htm ذخيره كنيد. مثلا hello.htm .
اگر اديتور فعلا نداريد از notepad خود ويندوز استفاده كنيد.
حالا شما يك صفحه ساخته ايد كه مي تواند در اينترنت يك سايت باشد.
من همين فايل را آپلود مي كنم در فضاي خودم و لينك مي دهم تا برويد ببينيد.
http://www.saalek.netfirms.com/learnhtml/hello.htm
عكس هم مي گيرم از اين سايت تا همين جا هم بتوانيد ببينيد.

.
البته بنر تبليغاتي سايت بالاي صفحه نبايد باشه. ولي چون فضاي من مجاني است ديگه بايد تحمل كرد.
.

saalek · 28 ژانویه 2006

توضيح كد اين كه <html> يعني كه كدهاي به زبان html شروع مي شود و </html> يعني خاتمه اين كدها.
و <body> يعني بدنه سايت شروع ميشه و </boby> نشانه اختتام بدنه است.
.
حالا مي خواهيم كمي پا را فراتر بگذاريم و پاراگراف بندي كنيم. در اينجا از دستور <p> براي شروع يك پاراگراف و از دستور </p> براي اطلاع پايان پاراگراف استفاده مي كنيم.

کد:

<html>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

<p>Paragraph elements are defined by the p tag.</p> 

</body>
</html>

در كدهاي بالا ، 4 پاراگراف ايجاد شده. دقت كنيد كه در صفحه اي كه ايجاد مي شود ، يك خط خالي فاصله مي افتد بين پاراگرافها.
من ديگه اين فايل را آپلود نمي كنم و در همان hard با اكسپلورر بازش مي كنم. اين جوري ديگه بنر هم نداريم بالاي سايت.

.

saalek · 28 ژانویه 2006

کد:

<html>
<body>

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser 
ignores it.
</p>

<p>
This paragraph
contains	  a lot of spaces
in the source	 code,
but the	browser 
ignores it.
</p>

<p>
The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>

</body>
</html>

در كد بالا مي بينيد كه فواصلي بين نوشته ها وجود دارد و در جاهايي اينتر شده ، ولي اينها هيچ يك در سايت شما نمايش داده نمي شود.
حالا مي شود اين را خوبي دستور <p> دانست يا بدي آن. ولي بعدا دستوراتي را مي گيم كه اين فواصل و اينتر ها را منعكس مي كند در سايت.
.

کد:

<html>
<body>

<p>
To break<br>lines<br>in a<br>paragraph,<br>use the br tag.
</p>

</body>
</html>

براي حل اينتر كردنش از دستور <br> كه مخفف break است ميشه استفاده كرد. در كد بالا چند بار از اين دستور استفاده شده و نتيجه را در پايين مي بينيد.
.

saalek · 28 ژانویه 2006

کد:

<html>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

<p>Use heading tags only for headings. Don't use them just to make something bold. Use other tags for that.</p>

</body>
</html>

حالا از دستوراتي غير از <p> استفاده مي كنيم. همين طور كه در بالا مي بينيد از <h1> تا <h6> استفاده شده. به نتيجه در زير توجه كنيد. ديگه معلومه كارش چيه. براي فرمت دهي . مثلا عنوان سايت را با <h1> بنويسيم و فصول را با نوع مناسب. بعدا در style دهي ، خواهيم ديد كه ميشه h ها و p را از لحاظ نوع فونت و اندازه فونت و محل قرارگيري و رنگ و غيره براي خودمان شخصي تعريف كنيم و به زيبايي و خوانايي سايت خود بيافزاييم.
.

.

saalek · 28 ژانویه 2006

کد:

<html>
<body>

<h1 align="center">This is heading 1</h1>

<p>The heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page.</p>

</body>
</html>

در اين كد از دستور align="center" استفاده شده و كارش اينه كه h1 ما را به مركز صفحه منتقل مي كند.
.
.

فايل را آپلود هم مي كنم و لينك مي دهم.
http://www.saalek.netfirms.com/learnhtml/hello6.htm

کد:

<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr>
<p>This is a paragraph</p>
<hr>
<p>This is a paragraph</p>
<hr>
<p>This is a paragraph</p>
</body>
</html>

در اين كد دستور <hr> يك خط افقي رسم مي كند.
.

http://www.saalek.netfirms.com/learnhtml/hello7.htm

کد:

<html>
<body>

<!--This comment will not be displayed-->
<p>This is a regular paragraph</p>

</body>
</html>

طريقه كامنت نويسي در html . كامنت نوشته اي است كه اجرا نمي شود و فقط براي راهنمايي برنامه نويس و افراد ديگري است كه كد را مي خوانند.
.

http://www.saalek.netfirms.com/learnhtml/hello8.htm

saalek · 28 ژانویه 2006

کد:

<html>
<body bgcolor="yellow">
<h2>Look: Colored Background!</h2>
</body>
</html>

در اين برنامه رنگ بك گراند را تعين كرده ايم.
.

http://www.saalek.netfirms.com/learnhtml/hello9.htm

saalek · 28 ژانویه 2006

کد:

<html>
<body background="jokondsmile.jpg">

<h3>Look: A background image!</h3>

<p>Both gif and jpg files can be used as HTML backgrounds.</p>

<p>If the image is smaller than the page, the image will repeat itself.</p>

</body>
</html>

در اين برنامه عكس بك گراند تعيين كرده ايم.
آدرس به نوعي تنظيم شده كه بايد عكس مورد نظر هم كنار فايل html آپلود شده باشد. اگر به سايت ديگري مي خواهيد آدرس بدهيد ، بايد آدرس كامل بدهيد. مثل وقتي كه در بروسر(مثل اكسپلورر) آدرس سايت را مي نويسيد . (براي رويت آن سايت)
.
وقتي عكس كوچكتر از صفحه باشد
tile
مي شود يعني تكرار مي شود.
.

http://www.saalek.netfirms.com/learnhtml/link1.htm

saalek · 28 ژانویه 2006

کد:

<html>
<body>

<b>This text is bold</b>

<br>

<strong>
This text is strong
</strong>

<br>

<big>
This text is big
</big>
<br>

<em>
This text is emphasized
</em>

<br>

<i>
This text is italic
</i>

<br>
<small>
This text is small
</small>

<br>

This text contains
<sub>
subscript
</sub>

<br>
This text contains
<sup>
superscript
</sup>

</body>
</html>

در اين برنامه از تگهايي استفاده شده كه هر يك براي كاري مناسب است. با ديدن كد و نتيجه ، شما مي توانيد بفهميد كه هر تگ چه كاري انجام مي دهد و در جاي مناسب مي توانيد از اين تگها استفاده كنيد. ديگه من توضيح نمي دهم . خودتان با ديدن نتيجه مي فهميد چه تغييري در طرز نمايش نوشته ما بوجود مي ايد.
.

http://www.saalek.netfirms.com/learnhtml/format.htm

saalek · 28 ژانویه 2006

کد:

<html>
<body>

<pre>
This is
preformatted text.
It preserves	  both spaces
and line breaks.
</pre>

<p>The pre tag is good for displaying computer code:</p>

<pre>
for i = 1 to 10
	 print i
next i
</pre>

</body>
</html>

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

http://www.saalek.netfirms.com/learnhtml/format2.htm

saalek · 28 ژانویه 2006

کد:

<html>
<body>

<code>Computer code</code>
<br>
<kbd>Keyboard input</kbd>
<br>
<tt>Teletype text</tt>
<br>
<samp>Sample text</samp>
<br>
<var>Computer variable</var>
<br>
<p>
<b>Note:</b> These tags are often used to display computer/programming code.
</p>
</body>
</html>

دستورات بالا هم براي كدهاي برنامه نويسي استفاده مي شود.
.

http://www.saalek.netfirms.com/learnhtml/format3.htm

کد:

<html>
<body>

<address>
Donald Duck<br>
BOX 555<br>
Disneyland<br>
USA
</address>

<p> beraye moghayeseh ino neveshtam</p>

</body>
</html>

بدون شرح.
.

http://www.saalek.netfirms.com/learnhtml/address.htm

saalek · 28 ژانویه 2006

کد:

<html>
<body>

<abbr title="United Nations">UN</abbr>
<br>
<acronym title="World Wide Web">WWW</acronym>

<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p>

<p>This only works for the acronym element in IE 5.</p>

<p>This works for both the abbr and acronym element in Netscape 6.2.</p>

</body>
</html>

با نگه داشتن ماوس بر روي اين كلمات ، ((شرحي)) به نمايش درميايد.
پس عكس به كار نمي ايد ، بريد در سايت ماوس را روي كلمه نگه داريد.
در متن توضيحاتي انگليسي داخل كد ، توضيحاتي داده شده راجع به اين كه اين دستورات در اكسپلورر 5 و نت اسكيپ 6 و 2 دهم كدام دستورها اجرا مي شوند.
.

http://www.saalek.netfirms.com/learnhtml/format4.htm

saalek · 28 ژانویه 2006

کد:

<html>
<body>

Here comes a long quotation:
<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>

Here comes a short quotation:
<q>
This is a short quotation
</q>
<p>
With the block quote element, the browser inserts line breaks and margins, but the q element does not render as anything special.
</p>

</body>
</html>

دو نوع دستور در اينجا استفاده شده، يكي <blockquote> و ديگري <q> .
در اولي مارجين ( حاشيه) ايجاد مي شود ولي در دومي اين را ندارد.
نكته جالب اينكه در بروسرهاي مختلف دستورات جلوه مختلف دارند. مثلا در اينجا
short quotation
با بروسر اپرا داراي علامت " "است ولي در اينترنت اكسپلورر ندارد. چون من خودم با اپرا كار مي كنم متوجه اين شدم.
.
.

http://www.saalek.netfirms.com/learnhtml/format5.htm

saalek · 28 ژانویه 2006

کد:

<html>
<body>

<p>
a dozen is 
<del>twenty</del> 
<ins>twelve</ins> 
pieces
</p>

<p>
Most browsers will overstrike deleted text and underline inserted text.
</p>
<p>
Some older browsers will display deleted or inserted text as plain text.
</p>

</body>
</html>

دستورات بالا ، باعث ميشه كه روي متني خط بزند و متن جايگزين را نشان بدهد. بيشتر در سايتهايي مي بينيد كه قيمتي را اعلام مي كنند و روي آن خط مي كشند و قيمت جديد را به عنوان قيمت شكسته شده جايگزين مي كنند.

http://www.saalek.netfirms.com/learnhtml/format1a.htm

کد:

<html>
<body>

<p>
<a href="lastpage.htm">
This text</a> is a link to a page on 
this Web site
</p>

<p>
<a href="http://www.microsoft.com/">
This text</a> is a link to a page on 
the World Wide Web.
</p>

</body>
</html>

در برنامه بالا ، طرز لينك دادن به صفحات همان سايت ، و طرز لينك دادن به صفحات سايتهاي ديگر را ملاحظه مي كنيد.
.

کد:

<html>
<body>
<p>
You can also use an image as a link:
<a href="lastpage.htm">
<img border="0" src="buttonnext.gif" width="65" height="38">
</a>
</p>

</body>
</html>

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

saalek · 28 ژانویه 2006

حالا مي خواهيم ابزاري را معرفي كنيم كه تقريبا در همه سايتها از آن استفاده مي شود.
ابزارهاي فرمت دهي ، يعني تگهايي كه تابحال گفتيم ، بيشتر كارشان اين بود كه طرز نمايش يك نوشته را تعيين مي كرد .
ولي ما نياز به ابزاري داريم كه بتواند شماي كلي صفحه ما را معين كند.
منظور من از اين مقدمه ، ذكر اهميت table است.

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

بايد بدانيم كه table مثل جدول است . ولي بيشتر سايتها بدون كادر دور جدول table هاي خود را ايجاد مي كنند.
زيرا وقتي كه خطوط عمودي و افقي جدول ديده نشود ولي نوشته ها و اعداد داراي نظم شطرنجي دقيقي باشد ، همين باعث زيبايي دو چندان مي شود.

پس در ادامه به تمرين با اين ابزار كارآمد مي پردازيم.
.

saalek · 28 ژانویه 2006

در شكل بالا كدهايي كه براي ساخت table نياز است را مي بينيد و در كنارش صفحه ايجاد شده را مي بينيد.
همان طور كه مي بينيد ، براي ساخت جدول اولين دستور <table> است. كه در اينجا عددي هم بعنوان ضخامت كادر جدول داده شده. البته همان طور كه در پست قبلي گفتم ، اكثرا جدول ها را بدون كادر دورش مي كشند ، چون زيبايي بيشتري دارد. تقريبا تمام سايتهايي كه شما بازديد مي كنيد از جدول درست شده ولي كمتر شما خطوط جدول را ديده ايد. ولي من براي اينكه كارمان آموزشي است در اين پست با كادر دور در نظر گرفتم. بدون كار اگر خواستيد بكشيد ، فقط <table> بنويسيد. من همين الان با اين دستور امتحان كردم ، همين جدول بوجود آمد ولي بدون چارچوب. و فقط اعداد وجود داشت.

دستور بعدي اين كدها ، <tr> است. شايد مخفف table row باشد. يعني رديفهاي جدول.
دقت كنيد كه قسمتهايي كه بين <tr> و </tr> قرار مي گيرند يك رديف را بوجود مي آورند و هر تعداد ستون كه موجود باشد بين اين دو دستور ، باعث تشكيل خطوط عمودي در اين رديف مي شود. به شكل زير دقت كنيد:

در اين شكل من عمدا تعداد ستونها را با دستور <td> كه علامت ستون است افزايش دادم، تا ببينيد كه هر تعداد ستون كه بين <tr> و </tr> قرار بگيرد ، از رديف خارج نمي شود. البته مي بيند كه جدول زيبايي نشده ولي اگر بدون كادر بود شايد بي اشكال بود و مي شد استفاده كرد. منظورم سه خانه آخر رديف دوم است كه حالت زيبايي ندارد. براي رفع اين مشكل ميشه كد زير را نوشت:

علامت   چيزي نمايش نمي دهد ولي از بروز مشكلات بعدي جلوگيري مي كند.
در پايين همين كد را قرار مي دهم كه اگر خواستيد استفاده كنيد دوباره تايپ نكنيد و كپي _ پيست كنيد.
.

کد:

<html>
<body>

<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
  <td>aaa</td>
  <td>bbb</td>
  <td>ccc</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
   <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
</table>

</body>
</html>

.

saalek · 28 ژانویه 2006

دو جدول با ضخامت كادر مختلف.
.

saalek · 28 ژانویه 2006

البته ديگه نياز نبود اين برنامه را ايجاد كنم ولي براي اينكه جدول بي border هم جا بيافتد ، اين تصوير را گذاشتم.
.

saalek · 28 ژانویه 2006

دستور <th> براي دادن عنوان است براي جدول .
.

saalek · 28 ژانویه 2006

و در اينجا طرز استفاده از دستور <th> براي موقعي است كه مي خواهيم عنوانها به شكل عمودي روي هم باشد.
.

دستور caption اسمي به جدول مي دهد ، يعني بالاي جدول نام آن را به نمايش مي گذارد.
.

برگزیده های پرشین تولز

آموزش HTML

مدیر بازنشسته

مدیر بازنشسته

مدیر بازنشسته

مدیر بازنشسته

مدیر بازنشسته

مدیر بازنشسته

مدیر بازنشسته

مدیر بازنشسته

مدیر بازنشسته

مدیر بازنشسته

مدیر بازنشسته

مدیر بازنشسته

مدیر بازنشسته

مدیر بازنشسته

مدیر بازنشسته

مدیر بازنشسته

مدیر بازنشسته

مدیر بازنشسته

مدیر بازنشسته

مدیر بازنشسته

تبلیغات متنی