آموزش Html

saalek110

saalek110

Well-Known Member

table9z.gif

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

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

saalek110

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

کد: 
<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 را قرار دادم. چون ديدم خيلي شلوغ مي شود. بعدا ليستها را مي گيم و نمي خواهم با جدول قاطي بشه.


tablez3.gif

​
.



tablez4.gif

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

saalek110

Well-Known Member

tablez5.gif

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






tablez6.gif

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






tablez7.gif

​
اين هم cellspacing .
.







tablez8.gif

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

saalek110

Well-Known Member
اين هم يك جدول ساختار يافته تر. دستور 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>



tablez9.gif

​

.
 
saalek110

saalek110

Well-Known Member
اين هم آخرين قسمت 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>



tableend.gif

​

.
 
saalek110

saalek110

Well-Known Member
کد: 
<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 تمام خواص يك جز را تعيين مي كنند ولي اينجا براي سادگي فقط رنگ آن را تعيين كرده ايم.


style22.gif

​

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

saalek110

Well-Known Member
کد: 
<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 چاپ كرده ام تا تفاوت را ببينيد.

style23.gif

​

.
 
saalek110

saalek110

Well-Known Member
کد: 
<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 ، باز ميشه.

link133.gif

​
 
saalek110

saalek110

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


color1.gif

​

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


color2.gif

​

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


color3.gif

​

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


color4.gif

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

saalek110

Well-Known Member
کد: 
<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 در كد بالا گفته شده كه حالت پايه اين است كه در صفحه جديد لينك باز شود.
.
 
saalek110

saalek110

Well-Known Member
کد: 
<html>

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

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

</html>

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


title27.gif

​
 
saalek110

saalek110

Well-Known Member
کد: 
<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 ثانيه به صفحه ديگري هدايت مي كند. كاربردش ديگه به سليقه شما.
.
 
saalek110

saalek110

Well-Known Member
کد: 
<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>


list1.gif

​
 
saalek110

saalek110

Well-Known Member
کد: 
<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>


list2.gif

​

کد: 
<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>


list3.gif

​


کد: 
<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>


list4.gif

​

کد: 
<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>


list5.gif

​
 
saalek110

saalek110

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

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

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

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

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

saalek110

Well-Known Member
به نظر می رسد خط زیر در اول هر برنامه (سایت) لازمه:
کد: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
یا یک کد مشابه.

من در سایتهایی که ساختم وقتی این خط کد نبود به طور اتوماتیک روی یونیکد مناسب نمی رفت و باید دستی یونیکد تنظیم می کردم با بروسر.

===================================
منبع :
http://www.macromediax.com/learn/archive.asp?id=119
------------------------------------------------------------------


تگ DOCTYPE


آیا تا کنون دقت کرده اید که برنامه های ویرایشگر اچتمل مانند دریم ویور و فرانت پیج در ابتدای صفحات ، یک تگ DOCTYPE قبل از تگ html مینویسند که برداشتن آن نیز تاثیر خاصی در صفحه ندارد ؟
کد: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

اما کار این تگ چیست ؟ این خط به برنامه مرورگر می فهماند که شما قصد استفاده از HTML نسخه 4 را برای طراحی صفحه وب خود دارید . در صورتی که بخواهید از XHTML جهت طراحی صفحه وب خود استفاده کنید باید کد فوق را کمی تغییر دهید . پس چرا حذف آن تاثیری در صفحه وب ما ندارد ؟ این کد در ایجاد صفحات HTML اختیاری و در صفحات XHTML اجباری است . اگر این تگ را به همراه یک URL در بالای صفحه وب خود اعلان کنید ، سبب میشود که برنامه های مرورگر فعلی ، هنگام باز کردن صفحه شما در مد standards کنار کنند . بدین صورت میتوانید کدهای خود را مطابق استاندارد نوشته و کنترل بیشتری بر چگونگی نمایش این صفحه در برنامه های مرورگر مختلف داشته باشید. در صورت نگذاشتن این کد ، مرورگر از روش های قدیمی تر برای نمایش صفحه شما استفاده می کند . یک مثال عملی :در هنگام تعیین رنگ با شماره های هگزادسیمال ، یک علامت شارپ (#) در ابتدای شماره رنگ قرار میگیرد که حذف آن باعث نادیده گرفتن این رنگ در زمان نمایش صفحه میشود . اما اگر کد DOCTYPE را از ابتدای صفحه پاک کنید ،مرورگرتان از این مورد ایراد نمی گیرد و آن رنگ را نشان میدهد . برای تست این مثال از مرورگر فایرفاکس استفاده کنید . چون مرورگر Internet Explorer بطور معمولی هم از حذف علامت # ایراد نمی گیرد و ممکن است شما فکر کنید علامت # اختیاری است !
1384/09/20 نویسنده : حسین شرفی
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
تاپیک در سال ۲۰۰۶ ایجاد شده. امسال ۲۰۲۳ تا پست ۱۰ لینکها اصلاح شد.
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا