Html ile Matrix ve Vektör Görüntüsü

Bu örnekte html'de matematikte kullanılan vektör ve matrix görüntüsü elde edilmiştir.

Zafer Teker

tekzaf@yahoo.com

  1 <html>
  2 <body>
  3 <table>
  4 <tr>
  5 	<td>
  6 		<img style="width:100%;height:100%;" src="../../img/gif/open.gif"></img>
  7 	</td>
  8 	<td>
  9 		<table>
 10 			<tr>
 11 				<td>cos(t)</td>
 12 				<td>sin(t)</td>
 13 				<td>0</td>						
 14 			</tr>
 15 			<tr>
 16 				<td>-sin(t)</td>
 17 				<td>cos(t)</td>	
 18 				<td>0</td>												
 19 			</tr>
 20 			<tr>
 21 				<td>0</td>
 22 				<td>0</td>
 23 				<td>1</td>						
 24 			</tr>
 25 		</table>		
 26 	</td>
 27 	<td>
 28 		<img style="width:100%;height:100%;" src="../../img/gif/close.gif"></img>
 29 	</td>
 30 </tr>
 31 </table>
 32 </body>
 33 </html>

Açıklama

Matrix üç bölümden oluşmakta. Birinci bölüm açılış parentezi, ikinci bölüm elemanların olduğu bölüm, üçüncü bölüm ise kapanış parentezidir. Bunun için tek satır ve üç sütünü olan bir tablo yaratılmıştır. İlk hücreye açılış parentezi, ortadaki hücreye değerlerin yazıldığı tabloyu ve son hücreyede kapanış parentezini koyuyoruz. Kapanış ve açılış parentezleri resmi için yükseklik ve genişliğini 100% yapıyoruz. (resim hücreyi tamamen kaplıyor) Böylece matris kaç elemanlı olursa olsun parentez resmi ona uygun boy ve genişlikte olacaktır. (büyük veya küçük matrislerde resim biraz bozulabilir.)

Matrix'lerle Dört İşlem Gösterimi

Örneği daha da geliştireceğiz. Matrisler arasında dört işlem ve eşitlikleri nasıl gösteririz. Aşağıdaki örnek bir x,y,z vektörünü X,Y,Z vektörüne dönüştürülmektedir.

  1 <html>
  2 <head>
  3 	<style>
  4 		table *{
  5 			font-size:12px;	
  6 		}
  7 	</style>
  8 </head>
  9 <body>
 10 <table>
 11 <tr>
 12 <td>
 13 	<table>
 14 		<tr>
 15 			<td>
 16 				<img style="width:100%;height:100%;" src="../../img/gif/open.gif"></img>
 17 			</td>
 18 			<td>
 19 				<table>
 20 					<tr><td>X</td></tr>
 21 					<tr><td>Y</td></tr>
 22 					<tr><td>Z</td></tr>					
 23 				</table>		
 24 			</td>
 25 			<td>
 26 				<img style="width:100%;height:100%;" src="../../img/gif/close.gif"></img>
 27 			</td>
 28 		</tr>
 29 	</table>
 30 </td>
 31 <td>=</td>
 32 <td>
 33 	<table>
 34 		<tr>
 35 			<td>
 36 				<img style="width:100%;height:100%;" src="../../img/gif/open.gif"></img>
 37 			</td>
 38 			<td>
 39 				<table>
 40 					<tr>
 41 						<td>cos(t)</td>
 42 						<td>sin(t)</td>
 43 						<td>0</td>						
 44 					</tr>
 45 					<tr>
 46 						<td>-sin(t)</td>
 47 						<td>cos(t)</td>	
 48 						<td>0</td>												
 49 					</tr>
 50 					<tr>
 51 						<td>0</td>
 52 						<td>0</td>
 53 						<td>1</td>						
 54 					</tr>
 55 				</table>		
 56 			</td>
 57 			<td>
 58 				<img style="width:100%;height:100%;" src="../../img/gif/close.gif"></img>
 59 			</td>
 60 		</tr>
 61 	</table>
 62 </td>
 63 <td>*</td>
 64 <td>
 65 	<table>
 66 		<tr>
 67 			<td>
 68 				<img style="width:100%;height:100%;" src="../../img/gif/open.gif"></img>
 69 			</td>
 70 			<td>
 71 				<table>
 72 					<tr><td>x</td></tr>
 73 					<tr><td>y</td></tr>
 74 					<tr><td>z</td></tr>					
 75 				</table>		
 76 			</td>
 77 			<td>
 78 				<img style="width:100%;height:100%;" src="../../img/gif/close.gif"></img>
 79 			</td>
 80 		</tr>
 81 	</table>
 82 </td>
 83 </tr>
 84 </table>
 85 </body>
 86 </html>

Açıklama

Burada yapılan şudur. Her operatör (+,*,-,/,= vs..) tek bir hücreye koyulmaktadır. ve matrix'in olduğu tabloda (bir önceki örnekteki gibi) bir hücreye koyulmaktadır. Böylece yandaki gibi bir görüntü elde edilebilecektir.

Html ile Matrix ve Vektör Görüntüsü

Giriş

Açıklama

Matrix'lerle Dört İşlem Gösterimi

Açıklama

Dosya Listesi