آموزش html
//////////////////////////////////////////////////////////////////////////
توضيح كد اين كه <html> يعني كه كدهاي به زبان html شروع مي شود و </html> يعني خاتمه اين كدها.
و <body> يعني بدنه سايت شروع ميشه و </boby> نشانه اختتام بدنه است.
.
حالا مي خواهيم كمي پا را فراتر بگذاريم و پاراگراف بندي كنيم. در اينجا از دستور <p> براي شروع يك پاراگراف و از دستور </p> براي اطلاع پايان پاراگراف استفاده مي كنيم.
Code:
در كدهاي بالا ، 4 پاراگراف ايجاد شده. دقت كنيد كه در صفحه اي كه ايجاد مي شود ، يك خط خالي فاصله مي افتد بين پاراگرافها.
من ديگه اين فايل را آپلود نمي كنم و در همان hard با اكسپلورر بازش مي كنم. اين جوري ديگه بنر هم نداريم بالاي سايت.
////////////////////////////////////////////////////////////////////////////////////////////////
در كد بالا مي بينيد كه فواصلي بين نوشته ها وجود دارد و در جاهايي اينتر شده ، ولي اينها هيچ يك در سايت شما نمايش داده نمي شود.
حالا مي شود اين را خوبي دستور <p> دانست يا بدي آن. ولي بعدا دستوراتي را مي گيم كه اين فواصل و اينتر ها را منعكس مي كند در سايت.
.
براي حل اينتر كردنش از دستور <br> كه مخفف break است ميشه استفاده كرد.
/////////////////////////////////////////////////////////////////////////////////////////////////
حالا از دستوراتي غير از <p> استفاده مي كنيم. همين طور كه در بالا مي بينيد از <h1> تا <h6> استفاده شده. به نتيجه در زير توجه كنيد. ديگه معلومه كارش چيه. براي فرمت دهي . مثلا عنوان سايت را با <h1> بنويسيم و فصول را با نوع مناسب. بعدا در style دهي ، خواهيم ديد كه ميشه h ها و p را از لحاظ نوع فونت و اندازه فونت و محل قرارگيري و رنگ و غيره براي خودمان شخصي تعريف كنيم و به زيبايي و خوانايي سايت خود بيافزاييم.
/////////////////////////////////////////////////////////////////////////////////////
در اين كد از دستور align="center" استفاده شده و كارش اينه كه h1 ما را به مركز صفحه منتقل مي كند.
Code:
در اين كد دستور <hr> يك خط افقي رسم مي كند.
.
Code:
طريقه كامنت نويسي در html . كامنت نوشته اي است كه اجرا نمي شود و فقط براي راهنمايي برنامه نويس و افراد ديگري است كه كد را مي خوانند.
//////////////////////////////////////////////////////////////////
در اين برنامه رنگ بك گراند را تعين كرده ايم
/////////////////////////////////////////////////////////////////////
ر اين برنامه عكس بك گراند تعيين كرده ايم.
آدرس به نوعي تنظيم شده كه بايد عكس مورد نظر هم كنار فايل html آپلود شده باشد. اگر به سايت ديگري مي خواهيد آدرس بدهيد ، بايد آدرس كامل بدهيد. مثل وقتي كه در بروسر(مثل اكسپلورر) آدرس سايت را مي نويسيد . (براي رويت آن سايت)
.
وقتي عكس كوچكتر از صفحه باشد
tile
مي شود يعني تكرار مي شود.
////////////////////////////////////////////////////////////
در اين برنامه از تگهايي استفاده شده كه هر يك براي كاري مناسب است. با ديدن كد و نتيجه ، شما مي توانيد بفهميد كه هر تگ چه كاري انجام مي دهد و در جاي مناسب مي توانيد از اين تگها استفاده كنيد. ديگه من توضيح نمي دهم . خودتان با ديدن نتيجه مي فهميد چه تغييري در طرز نمايش نوشته ما بوجود مي ايد.
/////////////////////////////////////////////////////////////////////////////////
دستور <pre> جانشين به حق <p> است ، وقتي مي خواهيم فواصل و اينتركردن ما ، در سايت رعايت بشه.
و واضحه كه جون مي دهد براي نوشتن كدهاي برنامه نويسي در سايت. تا خوانا باشد و خواننده سريع كدهاي برنامه نويسي را تحليل كند.
پس اگر خواستيد يك سايت بزنيد و برنامه نويسي آموزش بدهيد ، اين دستور را از خاطر نبريد.
البته واضح است كه خيلي جاها كاربرد داره و فقط براي كدهاي برنامه نويسي نيست.
////////////////////////////////////////////////////////
با نگه داشتن ماوس بر روي اين كلمات ، ((شرحي)) به نمايش درميايد.
پس عكس به كار نمي ايد ، بريد در سايت ماوس را روي كلمه نگه داريد.
در متن توضيحاتي انگليسي داخل كد ، توضيحاتي داده شده راجع به اين كه اين دستورات در اكسپلورر 5 و نت اسكيپ 6 و 2 دهم كدام دستورها اجرا مي شوند.
///////////////////////////////////////////////////////////////////
دو نوع دستور در اينجا استفاده شده، يكي <blockquote> و ديگري <q> .
در اولي مارجين ( حاشيه) ايجاد مي شود ولي در دومي اين را ندارد.
نكته جالب اينكه در بروسرهاي مختلف دستورات جلوه مختلف دارند. مثلا در اينجا
short quotation
با بروسر اپرا داراي علامت " "است ولي در اينترنت اكسپلورر ندارد. چون من خودم با اپرا كار مي كنم متوجه اين شدم.
//////////////////////////////////////////////////////////////////////////////////
دستورات بالا ، باعث ميشه كه روي متني خط بزند و متن جايگزين را نشان بدهد. بيشتر در سايتهايي مي بينيد كه قيمتي را اعلام مي كنند و روي آن خط مي كشند و قيمت جديد را به عنوان قيمت شكسته شده جايگزين مي كنند.
در برنامه بالا ، طرز لينك دادن به صفحات همان سايت ، و طرز لينك دادن به صفحات سايتهاي ديگر را ملاحظه مي كنيد.
و در برنامه بالا طرز استفاده از يك عكس به عنوان لينك آموزش داده شده.
يعني بازديد كننده از سايت با كليك بر روي عكس به صفحه ديگري مي رود.
/////////////////////////////////////////////////////////////////////////////////////////////
داشتن جدولي داخل جدول ديگر امري مرسوم است. در برنامه زير چنين كاري صورت گرفته. جدول داخلي كدهايش هيچ فرقي با جدول خارجي ندارد. فقط در يكي از خانه هاي جدول بيروني قرار مي گيرد.
كمي پيچيده به نظر مي رسد ولي بايد با تجزيه تحليل براي خود جا بياندازيد آن را . راستش در سايت اصلي ، در يكي از خانه هاي ديگر جدول هم يك ليست گذاشته بود كه من به جاي آن كلمه hi را قرار دادم. چون ديدم خيلي شلوغ مي شود. بعدا ليستها را مي گيم و نمي خواهم با جدول قاطي بشه/
///////////////////////////////////////////////////////////////////////////////////
اين هم يك جدول ساختار يافته تر. دستور align باعث چيدن بهتر عبارت مي شود. و استفاده بجا از <th> باعث زيبايي جدول است.
//////////////////////////////////////////////////////////////////////////////////////////////
به كد بالا دقت كنيد. ما قسمتي داريم با عنوان head كه بين دو تگ با همين نام محدود شده.
قسمتي هم داريم با عنوان style .
كلا همان طور كه از معني كلمه style معلومه ، تعيين مي كند كه اجزاي سايت ما چه style ئي دارد.
در برنامه بالا ما آمده ايم h1 و h3 را صاحب style خاصي كرده ايم.
البته معمولا در style تمام خواص يك جز را تعيين مي كنند ولي اينجا براي سادگي فقط رنگ آن را تعيين كرده ايم.
////////////////////////////////////////////
منبع: yazdtoday.com
HTML:
<html>
<body>
The content of the body element is displayed in your browser.
</body>
</html>//////////////////////////////////////////////////////////////////////////
توضيح كد اين كه <html> يعني كه كدهاي به زبان html شروع مي شود و </html> يعني خاتمه اين كدها.
و <body> يعني بدنه سايت شروع ميشه و </boby> نشانه اختتام بدنه است.
.
حالا مي خواهيم كمي پا را فراتر بگذاريم و پاراگراف بندي كنيم. در اينجا از دستور <p> براي شروع يك پاراگراف و از دستور </p> براي اطلاع پايان پاراگراف استفاده مي كنيم.
Code:
HTML:
<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 با اكسپلورر بازش مي كنم. اين جوري ديگه بنر هم نداريم بالاي سايت.
////////////////////////////////////////////////////////////////////////////////////////////////
HTML:
<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:
<html>
<body>
<p>
To break<br>lines<br>in a<br>paragraph,<br>use the br tag.
</p>
</body>
</html>/////////////////////////////////////////////////////////////////////////////////////////////////
HTML:
<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 را از لحاظ نوع فونت و اندازه فونت و محل قرارگيري و رنگ و غيره براي خودمان شخصي تعريف كنيم و به زيبايي و خوانايي سايت خود بيافزاييم.
/////////////////////////////////////////////////////////////////////////////////////
HTML:
<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>Code:
HTML:
<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>.
Code:
HTML:
<html>
<body>
<!--This comment will not be displayed-->
<p>This is a regular paragraph</p>
</body>
</html>//////////////////////////////////////////////////////////////////
HTML:
<html>
<body bgcolor="yellow">
<h2>Look: Colored Background!</h2>
</body>
</html>در اين برنامه رنگ بك گراند را تعين كرده ايم
/////////////////////////////////////////////////////////////////////
HTML:
<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
مي شود يعني تكرار مي شود.
////////////////////////////////////////////////////////////
HTML:
<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>/////////////////////////////////////////////////////////////////////////////////
HTML:
<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> است ، وقتي مي خواهيم فواصل و اينتركردن ما ، در سايت رعايت بشه.
و واضحه كه جون مي دهد براي نوشتن كدهاي برنامه نويسي در سايت. تا خوانا باشد و خواننده سريع كدهاي برنامه نويسي را تحليل كند.
پس اگر خواستيد يك سايت بزنيد و برنامه نويسي آموزش بدهيد ، اين دستور را از خاطر نبريد.
البته واضح است كه خيلي جاها كاربرد داره و فقط براي كدهاي برنامه نويسي نيست.
////////////////////////////////////////////////////////
HTML:
<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 دهم كدام دستورها اجرا مي شوند.
///////////////////////////////////////////////////////////////////
HTML:
<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>در اولي مارجين ( حاشيه) ايجاد مي شود ولي در دومي اين را ندارد.
نكته جالب اينكه در بروسرهاي مختلف دستورات جلوه مختلف دارند. مثلا در اينجا
short quotation
با بروسر اپرا داراي علامت " "است ولي در اينترنت اكسپلورر ندارد. چون من خودم با اپرا كار مي كنم متوجه اين شدم.
//////////////////////////////////////////////////////////////////////////////////
HTML:
<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>
HTML:
<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:
<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>يعني بازديد كننده از سايت با كليك بر روي عكس به صفحه ديگري مي رود.
/////////////////////////////////////////////////////////////////////////////////////////////
داشتن جدولي داخل جدول ديگر امري مرسوم است. در برنامه زير چنين كاري صورت گرفته. جدول داخلي كدهايش هيچ فرقي با جدول خارجي ندارد. فقط در يكي از خانه هاي جدول بيروني قرار مي گيرد.
HTML:
<html>
<body>
<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>hi </td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>///////////////////////////////////////////////////////////////////////////////////
اين هم يك جدول ساختار يافته تر. دستور align باعث چيدن بهتر عبارت مي شود. و استفاده بجا از <th> باعث زيبايي جدول است.
HTML:
<html>
<body>
<table width="400" border="1">
<tr>
<th align="left">Money spent on....</th>
<th align="right">January</th>
<th align="right">February</th>
</tr>
<tr>
<td align="left">Clothes</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">Make-Up</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">Food</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
<tr>
<th align="left">Sum</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>
</body>
</html>//////////////////////////////////////////////////////////////////////////////////////////////
HTML:
<html>
<head>
<style type="text/css">
h1 {color: red}
h3 {color: blue}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h3>This is header 3</h3>
</body>
</html>قسمتي هم داريم با عنوان style .
كلا همان طور كه از معني كلمه style معلومه ، تعيين مي كند كه اجزاي سايت ما چه style ئي دارد.
در برنامه بالا ما آمده ايم h1 و h3 را صاحب style خاصي كرده ايم.
البته معمولا در style تمام خواص يك جز را تعيين مي كنند ولي اينجا براي سادگي فقط رنگ آن را تعيين كرده ايم.
////////////////////////////////////////////
منبع: yazdtoday.com
آخرین ویرایش توسط مدیر:
