04-12-2006, 07:48 PM
Ders 1 [html]
Burada amaç html kodu yazmaktan çok html kodlarını tanıma ve yorumlaya bilme ancak derslerden sonra herkes kendine bir index yapacak kadar html öğrenecektir
Giriş
Html kodları <> arasına yazılır è <kodlar> işlem </kodlar>ç ve dikkat edilecek en önemli husus son acılan kod ilk kapatılır.
Html kodları metin belgesi içine yazılır. Metin belgesini açmak için Mouse sağ tıkla-yeni-metin belgesi veya başlat-tüm programlar –not defteri ile ulaşılır. Ve kodlar yazıldıktan sonra dosya-farklı kaydet-ad.html (text uzantısı yerine htm veya html yazılır önemli olan uzantıdır).
Basit html sayfası yapma
Not defterini açıp şu kodları yazın kodların açıklaması aşağıda verilmiştir
<html>
<head>
<title>DRTblue dan html dersleri</title>
</head>
<bOdy>
html öğreniyorum
<br>
hazırlayan DRTblue
</bOdy>
</html>
her html dökümanı <html> …… </html>arasına yazılır
<head>…</head> ise baş manasına gelip html sayfasının baş kısmını oluşturur. İçinde başka kodlar barındırır bunların en çok kullanılanı<title>…</title>dır
<title>…</title> başlık manasına gelir bunun arasına yazdığımız yazı html sayfasının üstündeki yerde (genelde mavidir)<simge durumuna düşür-ekranı kapla-kapat kısmının bulunduğu yer> gözükür.
<bOdy>….</bOdy> html sayfasının gövde kısmı olup gireceğimiz kodların çoğunu buraya yazacağız.
<br> bir alt satıra geçer.
Arka plan
Arka plana tekrenk atmak için <bOdy> kodunun içine bgcolor=”istenen renk” kodu girilir.
Örnekè<bOdy bgcolor=”renk(ing)”>
<html>
<head>
<title>html dersleri</title>
</head>
<bOdy bgcolor=”blue”>
arka plan rengi mavi ise kod çalışıyordur
<br>
hazırlayan DRTblue
</bOdy>
</html>
…………………….
Şayet arka planda resim kullanmak istiyorsak bOdy tag ının içine background=”kullanılan resmin yeri ve uzantısı ” yazılır calısan kod asagıda verilmiştir:
<html>
<head>
<title>selam</title>
</head>
<bOdy background="C:\\Documents and Settings\\my pc\\Belgelerim\\my documan\\html\\arkaplan 4.gif">
<br>kod calısıyormu*
</bOdy>
</html>
Yukarıda belgelerimin içinde my documan adlı klasör içindeki html isimli klasörün içindeki arkaplan4 adlı ve .gif uzantılı resim (daha dogrusu gifdiyelim) html sayfamıza arkaplan olmustur.
Yazı karakter işlemleri
Bu kodla bOdy nin içine yazılır ve sekilli gözükmesini istediğimiz yazı araya yazılır
<b>kalın yazar</b>
<i>italik yazar</i>
<u>altı çizili yazar</u>
<center>ortaya yazar</center>
<font face=”comic sans MS” size=”+3” color=”blue”> yazı cesidi boyut (en fazla +5 olabilir) renk i ayarlanır.</font>
</b></i></u>.</font> den sonra normal yazar
Grafik işlemleri
<bOdy>………..</bOdy> arasına yazılır
Resim html sayfasının bulunduğu yerde ise (klasör veya masa üstü) sayfaya resim atma:
<img src=”isimsiz.jpg”>
<marquee>kayan yazı</marquee>
<A href=”köprü_atılacaksayfa-adi.html”>tıkla git</A>
  bosluk karakteri genelde baslarken ve tablolarda kullanılır
resimin adresi varsa: <img src=”adres\\resim_adi.uzantısı”>
form olusturma
<bOdy>………..</bOdy> arasına yazılır
önce form u tanımlarız daha sonra gerekli form elemanlarını kullanılırız
<form name=”deneme_frm”>…..</form>
form adının sonuna frm yazmak bana ait bir sey herhangi zorunlulugu yoktur sadece kodların
takibinin kolay olması için yazarım
text kutusu olusturè<input type=”text” name=”ad”>
burada type form elemanı tipidir name ise burada girilendegeri baksa yere atyacagımız zaman kullanacagız kısaca name girilen ifadenin nereden geldiğini tanımlamak için kullanılır.
Buton olusturmaè<input type=”button” name=”bt1” value=”tıkla”>
Value ifadesi butonun üzerine yazılacak yazıyı belirler
Tek secimli olusturma(cinsiyet gibi)è <input type=”radio” name=”cinsiyet” value=”E”>bay
<input type=”radio” name=”cinsiyet” value=”B”>bayan
coklu secimli olusturma è<input type=”check box” name=”sunucu” value=”ii” checked >su
<input type=”check box” name=”sunucu” value=”ii” checked >et
parola kutusuè<input type=”password”>
kabul/temizle butonuè<input type=”submit” value=”kabul” >
<input type=”reset” value=”temizle”>
select-option butonuè<select name=”ülke”>
<option value=”0”>seciminizi yapın</option>
<option value=”1”>Turkiye</option>
<option value=”2”>KKTC</option>
<option value=”3”>diğer</option>
tablo olusturma
HTML de tablo olusturma kodları:
<table border=”dıs cephe kalınlıgı” border=”cephe rengi”>
önce tablo tanımlanır ve daha sonra altına satır ve sütunlar acılır
<tr> </tr> satır acar
<td> </td> sutun acar
dikkat edilecek husuh önce satır acılır ve daha sonra satır içine sütunlar acılır ve kapatma yapılırken önce son acılan sütun kapatılır daha sonra satır kapatılır
<table border=”2” bordercolor=”blue”>
<tr>
<td>1.satır<br>1.sütun</td>
<td>1.satır<br>2.sütun</td>
</tr>
<tr>
<td>2.satır<br>1.sütun</td>
<td>2.satır<br>2.sütun</td>
</tr>
</table>
colspan komutu: sütun birlestirmede kullanılır
<td colspan=”2”>bu sütunu yan sütun(sağdaki) ile birlestirir
align=”right/center/left”yazıyı sağa ortaya veya sola yatılı yazar
<td align=”center”>yazıyı ortaya yaz
center yerine right veya left te kullanılabilir
html ile hazırlanmıs kayıt formu sayfası
bu sayfa su an işlm yapamaz cünkü bir veri tabanı yok ve ASP ile bağlı degil
\\*bu kodlar cevrim dısı olarak calısır internet ortamında calısması için veri tabanı baglantısı gerek*\\
asagıdaki kodda tablo ve form kodları bir arada kullanılmıstır
<html>
<head>
<title>HTML calısması by DRTblue</title>
</head>
<bOdy bgcolor="cyan">
<form name="kayıt_frm">
<font face="verdane" size="+3" color="red">
<table border="2" bordercolor="blue">
<tr>
<td>adınız</td>
<td><input type="text" name"ad"></td>
</tr>
<tr>
<td>soyadınız</td>
<td><input type="text" name"soyad"></td>
</tr>
<tr>
<td>cinsiyet</td>
<td><input type="radio" name="cinsiyet" value="e"> bay
<input type="radio" name="cinsiyet" value="k"> bayan</td>
</tr>
<tr>
<td>meslek seciniz</td>
<td><select name="meslek">
<option value="o">meslek sec</option>
<option value="1">yazılımcı</option>
<option value="2">donanımcı</option>
<option value="3">AR-GE elemanı</option>
<option value="4">diğer</option>
</td></tr>
<tr>
<td>uzman olduğunuz<br>bölüm/bölümler</td>
<td><input type="checkbox" name="uzmanlık" value="yaz">yazılım
<br>
<input type="checkbox" name="uzmanlık" value="don">donanım</td>
</tr>
<tr>
<td align="center" colspan="2"><input type="submit" value="kaydet">
<input type="reset" value="temizle"></td>
</tr>
</table>
<br>
<br>
görüntü hosunuza gitti ise tıklayın:
<input type="button" name="bt1" value="tıkla">
</form></font></bOdy></html>
Burada amaç html kodu yazmaktan çok html kodlarını tanıma ve yorumlaya bilme ancak derslerden sonra herkes kendine bir index yapacak kadar html öğrenecektir
Giriş
Html kodları <> arasına yazılır è <kodlar> işlem </kodlar>ç ve dikkat edilecek en önemli husus son acılan kod ilk kapatılır.
Html kodları metin belgesi içine yazılır. Metin belgesini açmak için Mouse sağ tıkla-yeni-metin belgesi veya başlat-tüm programlar –not defteri ile ulaşılır. Ve kodlar yazıldıktan sonra dosya-farklı kaydet-ad.html (text uzantısı yerine htm veya html yazılır önemli olan uzantıdır).
Basit html sayfası yapma
Not defterini açıp şu kodları yazın kodların açıklaması aşağıda verilmiştir
<html>
<head>
<title>DRTblue dan html dersleri</title>
</head>
<bOdy>
html öğreniyorum
<br>
hazırlayan DRTblue
</bOdy>
</html>
her html dökümanı <html> …… </html>arasına yazılır
<head>…</head> ise baş manasına gelip html sayfasının baş kısmını oluşturur. İçinde başka kodlar barındırır bunların en çok kullanılanı<title>…</title>dır
<title>…</title> başlık manasına gelir bunun arasına yazdığımız yazı html sayfasının üstündeki yerde (genelde mavidir)<simge durumuna düşür-ekranı kapla-kapat kısmının bulunduğu yer> gözükür.
<bOdy>….</bOdy> html sayfasının gövde kısmı olup gireceğimiz kodların çoğunu buraya yazacağız.
<br> bir alt satıra geçer.
Arka plan
Arka plana tekrenk atmak için <bOdy> kodunun içine bgcolor=”istenen renk” kodu girilir.
Örnekè<bOdy bgcolor=”renk(ing)”>
<html>
<head>
<title>html dersleri</title>
</head>
<bOdy bgcolor=”blue”>
arka plan rengi mavi ise kod çalışıyordur
<br>
hazırlayan DRTblue
</bOdy>
</html>
…………………….
Şayet arka planda resim kullanmak istiyorsak bOdy tag ının içine background=”kullanılan resmin yeri ve uzantısı ” yazılır calısan kod asagıda verilmiştir:
<html>
<head>
<title>selam</title>
</head>
<bOdy background="C:\\Documents and Settings\\my pc\\Belgelerim\\my documan\\html\\arkaplan 4.gif">
<br>kod calısıyormu*
</bOdy>
</html>
Yukarıda belgelerimin içinde my documan adlı klasör içindeki html isimli klasörün içindeki arkaplan4 adlı ve .gif uzantılı resim (daha dogrusu gifdiyelim) html sayfamıza arkaplan olmustur.
Yazı karakter işlemleri
Bu kodla bOdy nin içine yazılır ve sekilli gözükmesini istediğimiz yazı araya yazılır
<b>kalın yazar</b>
<i>italik yazar</i>
<u>altı çizili yazar</u>
<center>ortaya yazar</center>
<font face=”comic sans MS” size=”+3” color=”blue”> yazı cesidi boyut (en fazla +5 olabilir) renk i ayarlanır.</font>
</b></i></u>.</font> den sonra normal yazar
Grafik işlemleri
<bOdy>………..</bOdy> arasına yazılır
Resim html sayfasının bulunduğu yerde ise (klasör veya masa üstü) sayfaya resim atma:
<img src=”isimsiz.jpg”>
<marquee>kayan yazı</marquee>
<A href=”köprü_atılacaksayfa-adi.html”>tıkla git</A>
  bosluk karakteri genelde baslarken ve tablolarda kullanılır
resimin adresi varsa: <img src=”adres\\resim_adi.uzantısı”>
form olusturma
<bOdy>………..</bOdy> arasına yazılır
önce form u tanımlarız daha sonra gerekli form elemanlarını kullanılırız
<form name=”deneme_frm”>…..</form>
form adının sonuna frm yazmak bana ait bir sey herhangi zorunlulugu yoktur sadece kodların
takibinin kolay olması için yazarım
text kutusu olusturè<input type=”text” name=”ad”>
burada type form elemanı tipidir name ise burada girilendegeri baksa yere atyacagımız zaman kullanacagız kısaca name girilen ifadenin nereden geldiğini tanımlamak için kullanılır.
Buton olusturmaè<input type=”button” name=”bt1” value=”tıkla”>
Value ifadesi butonun üzerine yazılacak yazıyı belirler
Tek secimli olusturma(cinsiyet gibi)è <input type=”radio” name=”cinsiyet” value=”E”>bay
<input type=”radio” name=”cinsiyet” value=”B”>bayan
coklu secimli olusturma è<input type=”check box” name=”sunucu” value=”ii” checked >su
<input type=”check box” name=”sunucu” value=”ii” checked >et
parola kutusuè<input type=”password”>
kabul/temizle butonuè<input type=”submit” value=”kabul” >
<input type=”reset” value=”temizle”>
select-option butonuè<select name=”ülke”>
<option value=”0”>seciminizi yapın</option>
<option value=”1”>Turkiye</option>
<option value=”2”>KKTC</option>
<option value=”3”>diğer</option>
tablo olusturma
HTML de tablo olusturma kodları:
<table border=”dıs cephe kalınlıgı” border=”cephe rengi”>
önce tablo tanımlanır ve daha sonra altına satır ve sütunlar acılır
<tr> </tr> satır acar
<td> </td> sutun acar
dikkat edilecek husuh önce satır acılır ve daha sonra satır içine sütunlar acılır ve kapatma yapılırken önce son acılan sütun kapatılır daha sonra satır kapatılır
<table border=”2” bordercolor=”blue”>
<tr>
<td>1.satır<br>1.sütun</td>
<td>1.satır<br>2.sütun</td>
</tr>
<tr>
<td>2.satır<br>1.sütun</td>
<td>2.satır<br>2.sütun</td>
</tr>
</table>
colspan komutu: sütun birlestirmede kullanılır
<td colspan=”2”>bu sütunu yan sütun(sağdaki) ile birlestirir
align=”right/center/left”yazıyı sağa ortaya veya sola yatılı yazar
<td align=”center”>yazıyı ortaya yaz
center yerine right veya left te kullanılabilir
html ile hazırlanmıs kayıt formu sayfası
bu sayfa su an işlm yapamaz cünkü bir veri tabanı yok ve ASP ile bağlı degil
\\*bu kodlar cevrim dısı olarak calısır internet ortamında calısması için veri tabanı baglantısı gerek*\\
asagıdaki kodda tablo ve form kodları bir arada kullanılmıstır
<html>
<head>
<title>HTML calısması by DRTblue</title>
</head>
<bOdy bgcolor="cyan">
<form name="kayıt_frm">
<font face="verdane" size="+3" color="red">
<table border="2" bordercolor="blue">
<tr>
<td>adınız</td>
<td><input type="text" name"ad"></td>
</tr>
<tr>
<td>soyadınız</td>
<td><input type="text" name"soyad"></td>
</tr>
<tr>
<td>cinsiyet</td>
<td><input type="radio" name="cinsiyet" value="e"> bay
<input type="radio" name="cinsiyet" value="k"> bayan</td>
</tr>
<tr>
<td>meslek seciniz</td>
<td><select name="meslek">
<option value="o">meslek sec</option>
<option value="1">yazılımcı</option>
<option value="2">donanımcı</option>
<option value="3">AR-GE elemanı</option>
<option value="4">diğer</option>
</td></tr>
<tr>
<td>uzman olduğunuz<br>bölüm/bölümler</td>
<td><input type="checkbox" name="uzmanlık" value="yaz">yazılım
<br>
<input type="checkbox" name="uzmanlık" value="don">donanım</td>
</tr>
<tr>
<td align="center" colspan="2"><input type="submit" value="kaydet">
<input type="reset" value="temizle"></td>
</tr>
</table>
<br>
<br>
görüntü hosunuza gitti ise tıklayın:
<input type="button" name="bt1" value="tıkla">
</form></font></bOdy></html>
