Html Mekancısı

Html Mekancısı

html kodları ile web sayfaları için basit işlemler yapmak

html kodları ile web sayfaları için basit işlemler yapmak

Tablolar <table>.....</table> Kodları arasına yazılır
<tr> kodu yeni bir satır oluşturur. bu sırada <td> kodu ile hücrelere bölünür

Şimdi basit bir tablo yapalım:

Not: "<tr> kodumuzu yazarken 1tab boşluğu <td> kodumuzu yazarken ise 2tab boşluğu bırakınız."

kod:

<html>
<head>
<title>Tablo</title>
</head>
<body>
<table border="1">

	<tr>
		<td>Elma</td>
		<td>Muz</td>
	</tr>

	<tr>
		<td>Mavi</td>
		<td>Yeşil</td>

	<tr>
</table>

</body>
</html>


Burada basit bir tablo yaptık örnek site için:
Tıkla

Şimdi ise tek satırlı ve 4 hücreli bir tablo yapalım ama bu sefer yazının fonları tablonun boyunu ve tablonun backgroundları ile oynayalım.

Tablonun hangi hücrenin boyutu ile oynucaksak, onun içine yazıcaz kodumuzu, yani:
<td width="250px">Sarı<td>


Bu şekilde olucak. Fon ile oynamak için yine hücreye gidiyoruz;

<td><font color="red" font size"20px" font size="35px">kırmızı</font></td>


Buradaki hücremizin kırmızı yazısının boyutunu 35 px yaptık ve boyutunu ise 20 px yaptık, şimdi 3. hücremize background ekleyelim. Bunun için ise hücremizin içine gidiyoruz ve 
background="resimadi.jpg" 


kodumuzu ekliyoruz, yani:

<td background="1.jpg">Siyah</td>


Bu şekilde diğer 4.hücreyi kırmızı yapalım; bunun içinse bgcolor="red" kodumuzu kullanıcaz. <td bgcolor="red">Yeşil</td>
Bu şekilde tablamuzu görelim.

kod:
<html>
<head>
<title>Tablo</title>

</head>
<body>
<table border="1">
	<tr>
		<td width="250px">Sarı</td>

		<td><font color="red" font size"20px" font size="35px">kırmızı</font></td>

		<td background="1.jpg">Siyah</td>
		<td bgcolor="red">Yeşil</td>

	</tr>
</table>
</body>
</html>

Örnek site:Tıkla

Peki, şimdi ise yine tek satırlı, 3 hücreli bir tablo yapalım. Bu sefer tabloların ikisinde resim olsun, ortadakinde ise Sanalkurs yazsın. Resim px'leri ise 150x150 olsun. İki td arasına resmimizi cağırıyoruz:

<td><img src="1.jpg" width="150px" heigth="150px"></td> 


İki hücreye de:

kod:
<html>
<head>
<title>Tablo</title>
</head>

<body>
<table border="1" width="800" align="center">
	<tr>

		<td><img src="1.jpg" width="150px" heigth="150px"></td>

		<td>Sanalkurs</td>
		<td><img src="1.jpg" width="150px" heigth="150px"></td>

	</tr>
</table>
</body>
</html>

Örnek Site : Tıkla

Bazı şeyler dikkatinizi çekti mi? İki resim de sola yatık. İşte gelelim asıl konuya. Bunları ayarlamak için hücrenin boyutunu ayarlamamız gerekiyor. Çağırdığımız resimin boyutu kaç px'di? 150px idi değil mi? İşte tablomuzu da 150px yapıcaz. (width="150px") Bir de Sanalkurs yazımızı ortalayalım, bunun için ise; 

<td><p align="center">Sanalkurs</p></td> 

kodunu kullanıcaz.

kod:
<html>
<head>
<title>Tablo</title>
</head>

<body>
<table border="1" width="800" align="center">
	<tr>

		<td width="150px"><img src="1.jpg" width="150px" heigth="150px"></td>

		<td><p align="center">Sanalkurs</p></td>
		<td width="150px"><img src="1.jpg" width="150px" heigth="150px"></td>

	</tr>
</table>
</body>
</html>

örnek site :Tıkla
Şimdi ise 2 satırlı, ilk satır 2 hücreli, ikinci satır ise 3 hücreli bir tablo yapalım. Bunu colspan="" kodu ile yaparız. Ben colspan'a bu tablo için 2 değerini vericem. Bu değer tablodan tabloya değişir.

kod:
<html>
<head>
<title>Tablo</title>
</head>
<body>

<table border="1" width="400" align="center">
	<tr>

		<td colspan="2">Elma</td>
		<td>Muz</td>
	</tr>

	<tr>
		<td>Mavi</td>
		<td>Yeşil</td>

		<td>Siyah</td>
	<tr>
</table>

</body>
</html>
Örnek Site:Tıkla
 
 

 

 
 
Bugun 1 ziyaretçi (50 klik) bu siteden yardım aldı!
_______________________________________________________________________________________________________________________________
Sitemize bir günde en fazla 710 kişi girmiştir (17.05.2012).
Bu sitede bedava reklamımı vermek istiyorum!
Bu Siteye Bedava Sponsor Olmak İstiyorum!
profas-16 (Yeni Site) | BizimMüzik (Bedava sponsor) | Haftalık Gündem (Bedava Sponsor) | Eğitimder(Bizim Dernek)
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=