آموزش HTML

saalek · 28 ژانویه 2006

دستور colspan به شما اجازه مي دهد كه چند خانه جدول را به يك عبارت اختصاص دهيد.

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

saalek · 28 ژانویه 2006

دستور rowspan هم براي نوع عموديش است.
.

saalek · 28 ژانویه 2006

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

کد:

<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>

كمي پيچيده به نظر مي رسد ولي بايد با تجزيه تحليل براي خود جا بياندازيد آن را . راستش در سايت اصلي ، در يكي از خانه هاي ديگر جدول هم يك ليست گذاشته بود كه من به جاي آن كلمه hi را قرار دادم. چون ديدم خيلي شلوغ مي شود. بعدا ليستها را مي گيم و نمي خواهم با جدول قاطي بشه.

.

اين هم جدولي كه رنگ بك گراند برايش تعيين شده.
.

saalek · 28 ژانویه 2006

اين هم جدولي كه تصوير بك گراند برايش تعيين شده.
.

هر جدولي با cellpadding زيباست.
فاصله از كناره ها.
.

اين هم cellspacing .
.

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

saalek · 28 ژانویه 2006

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

کد:

<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>

.

saalek · 28 ژانویه 2006

اين هم آخرين قسمت table . شرحش ديگه بماند.

کد:

<html>
<body>


<h4>With frame="border":</h4>
<table frame="border">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With frame="box":</h4>
<table frame="box">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With frame="void":</h4>
<table frame="void">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With frame="above":</h4>
<table frame="above">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With frame="below":</h4>
<table frame="below">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With frame="hsides":</h4>
<table frame="hsides">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With frame="vsides":</h4>
<table frame="vsides">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With frame="lhs":</h4>
<table frame="lhs">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>With frame="rhs":</h4>
<table frame="rhs">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

.

saalek · 28 ژانویه 2006

کد:

<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>

به كد بالا دقت كنيد. ما قسمتي داريم با عنوان head كه بين دو تگ با همين نام محدود شده.
قسمتي هم داريم با عنوان style .

كلا همان طور كه از معني كلمه style معلومه ، تعيين مي كند كه اجزاي سايت ما چه style ئي دارد.
در برنامه بالا ما آمده ايم h1 و h3 را صاحب style خاصي كرده ايم.
البته معمولا در style تمام خواص يك جز را تعيين مي كنند ولي اينجا براي سادگي فقط رنگ آن را تعيين كرده ايم.

همان طور كه در شكل مي بينيد ، حالا h1 و h3 ما با رنگهايي كه ما تعيين كرده ايم نوشته شده.
.

saalek · 28 ژانویه 2006

کد:

<html>
<body>

<a href="lastpage.htm" 
style="text-decoration:none">
THIS IS A LINK!
</a>

<br>
<br>

<a href="lastpage.htm" 
>
THIS IS A LINK!
</a>


</body>
</html>

برنامه بالا نشان مي دهد كه style را در موقع استفاده هم مي شود تعيين كرد.
پس دو جور ميشه كار كرد، يا در head ، يا هر زمان كه لازم شد. هر يك كاربردهاي خود را دارد. و شما مي توانيد به دلخواه يك روش را انتخاب كنيد.
در برنامه بالا من يكبار بدون style و يك بار با stlyle چاپ كرده ام تا تفاوت را ببينيد.

.

saalek · 28 ژانویه 2006

کد:

<html>
<body>

<a href="html3.htm" target="_blank">see(_blank) for new page</a> 

<br>
<br>

<a href="http://www.yahoo.com/"
target="_top">Locked</a> 

<p>
<a href="#C4">simple_link</a>
</p>

<p>
 mail 
<a href="mailto:[email protected]?subject=Hi%20friend">
Send Mail</a>
</p>

</body>
</html>

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

saalek · 28 ژانویه 2006

به عكس زير دقت كنيد.
رنگ زمينه تعيين شده.

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

ولي ميشه رنگهاي مورد علاقه خودتان را بسازيد. در شكل زير مقدار آبي (دو رقم سمت راست) صفر در نظر گرفته شده و بقيه را تغيير داده اند.

و در عكسهاي زير ، به ترتيب مقدار آبي ، 33 و 66 و 99 و cc و ff بوده است.

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

saalek · 28 ژانویه 2006

کد:

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


</body>
</html>

در برنامه بالا ، تصوير زمينه را تعيين كرده ايم.

کد:

<html>
<body bgcolor="#bbbbbb" text="blue">


<p>text</p>
</body>
</html>

در برنامه بالا ، رنگ زمينه و رنگ text را معين كرده ايم.
بعد اجرا خواهيم ديد كه text به رنگ آبي خواهد بود.

کد:

<html>
<body>

<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script> 

</body>
</html>

در برنامه بالا ، طرز درج نمودن كدهاي javascript را درون كد html خود مي بينيم.
سئوالات خود راجع به javascript را مي توانيد در تالار مربوطه در همين سايت مطرح كنيد.

کد:

<html>

<head>

<meta name="author"
content="Jan Egil Refsnes">

<meta name="revised"
content="Jan Egil Refsnes,6/10/99">
 
<meta name="generator"
content="Microsoft FrontPage 4.0">

</head>

<body>
<p>
The meta attributes of this document identify the author and the editor software.
</p>
</body>

</html>

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

کد:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

اين كد را وقتي مي خواهيد سايتي فارسي داشته باشيد ، اضافه كنيد.

و اين دستور را داخل تگهايي كه مي خواهيد از راست به چپ(فارسي) بنويسيد:

کد:

dir="rtl"
<p dir="rtl">

به نقل از سايت خاطرات . كام

مثال 4 : شناسه dir در عنصر html
اگر شناسه dir را در عنصر html بکار ببريد جهت نمايش تمامی متون از راست به چپ شده و برای نوشتن از چپ به راست بايد به صورت موردی شناسه "dir="ltr را استفاده کنيد. همچنين در اين حالت ماسماسک! Scrool down مرورگر در سمت چپ صفحه نمايش داده خواهد شد. در صورت استفاده شناسه dir در عنصر body ماسماسک همان سمت راست خواهد ماند.

کد:

<html>

<head>

<meta name="description"
content="HTML examples">

<meta name="keywords"
content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">

</head>

<body>
<p>
The meta attributes of this document describe the document and its keywords.
</p>
</body>

</html>

اين هم مثال معرفي keyword ها.

کد:

<html>
<head>
<base target="_blank">
</head>

<body>

<p>
<a href="http://www.w3schools.com"
target="_blank">This link</a>
will load in a new window because the target attribute is set to "_blank".
</p>

<p>
<a href="http://www.w3schools.com">
This link</a>
will also load in a new window even without a target attribute.
</p>

</body>
</html>

مثال بالا هم مربوط به لينك است. در قسمت head در كد بالا گفته شده كه حالت پايه اين است كه در صفحه جديد لينك باز شود.
.

saalek · 28 ژانویه 2006

کد:

<html>

<head>
<title>The title is not displayed</title>
</head>

<body>
<p>This text is displayed</p>
</body>

</html>

در برنامه بالا ، ما title صفحه را تعيين كرده ايم.

saalek · 28 ژانویه 2006

کد:

<html>
<head>
<meta http-equiv="Refresh"
content="5;url=http://www.w3schools.com">
</head>

<body>
<p>
Sorry! We have moved! The new URL is: <a href="http://www.w3schools.com">http://www.w3schools.com</a>
</p>

<p>
You will be redirected to the new address in five seconds.
</p>

<p>
If you see this message for more than 5 seconds, please click on the link above!
</p>

</body>
</html>

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

saalek · 28 ژانویه 2006

کد:

<html>
<body>

<h4>An Unordered List:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>


<h4>An Ordered List:</h4>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>


<h4>Numbered list:</h4>
<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  


</body>
</html>

saalek · 28 ژانویه 2006

کد:

<html>
<body>

<h4>Letters list:</h4>
<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>Lowercase letters list:</h4>
<ol type="a">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>Roman numbers list:</h4>
<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  


</body>
</html>

کد:

<html>
<body>


<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  


<h4>Disc bullets list:</h4>
<ul type="disc">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>Circle bullets list:</h4>
<ul type="circle">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  



</body>
</html>

کد:

<html>
<body>

<h4>Square bullets list:</h4>
<ul type="square">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  


<h4>A nested List:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
	<ul>
	<li>Black tea</li>
	<li>Green tea</li>
	</ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

کد:

<html>
<body>

<h4>A nested List:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
	<ul>
	<li>Black tea</li>
	<li>Green tea
	  <ul>
	  <li>China</li>
	  <li>Africa</li>
	  </ul>
	</li>
	</ul>
  </li>
  <li>Milk</li>
</ul>


<h4>A Definition List:</h4>
<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

</body>
</html>

saalek · 28 ژانویه 2006

خيلي از كدسازي ها را نرم افزار frontpage يا برنامه هاي مناسب تر از آن انجام مي دهند.
من با hotdog كار كردم و كارش جالبه.

در ضمن از شكل و شمايل هر سايت كه خوشتان آمد ، روي منوي view گزينه source كليك كنيد تا html آن را ببينيد.

من هم بخاطر اين قضيه ديگه بيش از اين ادامه نمي دهم. زيرا تابحال چيزهاي ضروري براي اينكه بفهميد كه يك سايت از چه كدهايي ساخته ميشه گفته شد و بعدا شما با ديدن سورس سايتهاي مختلف مي توانيد دانش خود را تكميل كنيد.
در مورد javascript هم همين طور.

ولي در مورد asp و php اين كار ممكن نيست ، چون كدهاي آنها در كامپيوتر سرور اجرا مي شوند و فقط نتيجه كار به شما(كلاينت) ارسال مي شود.
.
كلا تقسيم بندي كلي دو بخش است : كلاينت سايد . سرور سايد.
كلاينت سايد مثل جاوا اسكريپت. و سرور سايد مثل asp و php .

در مورد كلاينت سايد ها ، اين بروسر(مثل اينترنت اكسپلورر ويندوز) است كه كدها را اجرا مي كند. مثل كدهاي html و جاوااسكريپت. ولي asp و php با نرم افزارهايي اجرا مي شوند كه روي كامپيوترهاي سرور قرار دارند. البته مي توانيد اين سرورها را روي كامپيوتر خود شبيه سازي كنيد تا مثلا كدهاي php خود را به اجرا درآوريد.
.

شايان · 31 ژانویه 2006

saalek جان خیلی عالیه ! من این تاپیک رو Stick میکنم . شما ادامه بده ... مطمئن هستم از تاپیک های موندگار PT میشه .

( این پست خودم هم رو هم بعد از پست شما حذف میکنم که تو این تاپیک فقط آموزش باشه . بقیه دوستان هم تو این تاپیک پست نزنن ... اگر نظری دارن یه تاپیک جدا گانه باز کنن )

saalek · 2 فوریه 2006

با سلام خدمت مديريت محترم.
به روي چشم.
قسمت ليستها از يك سايت ديگه بود ولي بقيه از همون
w3schools
بود. قسمت فريم
frame
از سايت اسكول مونده. البته فريم دموده شده و زياد استفاده نمي شه.
ولي آموزشهاي خوبي در سايتهاي ديگه هست راجع به چيزاي ديگه.
در ضمن از لطفتان هم ممنونم.

Vahid.k · 9 آپریل 2006

آقا سالک به ما نگفته بودی این کاره ای :happy: خیلی عالی بوده تا اینجاش ادامه بده . موفق باشی .

mana-risk · 24 می 2006

سلام میشه کاملتر بصحبتین؟؟
کامل توضیح بدین من خیلی مشکل دارم
اساتید به دادم برسین

آموزش HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

مدیران قدیمی

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

Guest

کاربر تازه وارد

بک‌لینک