HTML Temel Etiket Örnekleri
Çok basit bir HTML dökümanı
Metinleri paragraflarda göstermek
Çok satırlı paragraflar
Satırları kesmek
Şiirlerle ilgili problemler (HTML formatındaki bazı problemler)
Başlık etiketleri
Ortalanmış başlık
Yatay cetvel eklemek
HTML kaynak kodu içerisine yorum yapmak
Arkaplan rengi eklemek
HTML Biçimlenmiş Metin Örnekleri
Metin biçimlemek
Biçimlendirilmemiş metin (Boşluklar ve satır sonları nasıl kontrol edilir?)
Farklı bilgisayar çıkışı olan etiketler (Programlama kodları vs.)
Adres eklemek
Özel Karakterler
Kısaltmalar
Metin yönü
Kısa ve uzun alıntılar
Metinlerin üstünü ve altını çizmek
HTML Bağlantı (Link) Örnekleri
Link oluşturmak
Resimlere link atamak
Linkleri yeni pencerede açmak
Aynı sayfada farklı bir kısıma geçmek (Jump)
Çerçeve (frame) içinde çıkabilmek
Mail adreslerine link vermek (Sadece bilgisayarınızda kurulu ise çalışır.)
Daha karmaşık bir mail linki
HTML Çerçeve (Frame) Örnekleri
3 farklı döküman için 3 farklı dikey frame oluşturmak
3 farklı döküman için 3 farklı yatay frame oluşturmak
<noframes> etiketini kullanabilmek.
Hem yatay hem dikey frame oluşturmak (mixing frameset)
Sabit boyutlarda frame oluşturmak (noresize="noresize")
Navigasyon frame oluşturmak
İç frame oluşturmak (Inline frame)
Bir frame içinde belli bir bölüme atlamak
Frame Navigasyon kullanarak belli bir bölüme atlamak
HTML Font Örnekleri
Basit bir font örneği
Yazi tipi ayarlama
Punto ayarlama
Yazı rengi ayarlama
Yazı tipi, punto, renk ayarlama
HTML Tablo (Table) Örnekleri
Basit tablolar
Farklı tablo kenarlıkları
Kenarlıksız tablolar
Tablo içerisinde başlık vermek
Boş hücreler
Tabloya manşet başlık vermek (caption)
Bir kolon/satır'dan fazla alan içeren hücreler
Tablo içinde etiketlendirmek
Hücre kenarlığı ve içeriği arasındaki boşluğu kontrol etmek (Cell padding)
Hücreler arası mesafeyi kontrol etmek (Cell spacing)
Tabloya arkaplan rengi vermek veya arkaplanına resim eklemek
Tablo hücrelerine arkaplan rengi vermek veya arkaplanına resim eklemek
Hücre içeriğini hizalamak
Çerçeve özelliği
Çerçeve ve kenarlık özellikleri
Tablo kullanılarak yapılmış bir tasarım örneği
HTML Liste (List) Örnekleri
Sırasız liste
Sıralı liste
Sıralı listelerin farklı tipleri
Sırasız listelerin farklı tipleri
İçe sekmeli liste
İçe sekmeli liste 2
Tanımlama listesi
HTML Form ve Giriş Örnekleri
Giriş alanı nasıl oluşturulur
Şifre alanları
Kontrol kutucukları (Checkbox)
Seçenek kutuları (Radiobuttons)
Basit sürükle bırak kutusu (seçilebilir liste)
Diğer bir sürükle bırak kutusu (Önceden seçilmiş bir değer ile)
Metin alanı (çok satırlı metin giriş alanı)
Buton oluşturmak
Başlıklı çerçeve alanı oluşturmak
Metin giriş alanı ve gönder butonu içeren bir form örneği
Kontrol kutusu (checkbox) ve gönder butonu bulunan bir form örneği
Seçenekli kutu (radiobutton) ve gönder butonu bulunan bir form örneği
Bir formdan mail göndermek
HTML Resim Örnekleri
Resim eklemek
Başka bir klasör veya sunucudan resim yüklemek
Arkaplan resmi
Bir metin içerisindeki resmi hizalandırmak
Bir paragraftaki resimin sağa/sola kaymasını sağlamak.
Resimleri istenen boyutlara ayarlamak
Resimlere ayrıca bir açıklama metini eklemek (Eğer tarayıcı resimi yüklemezse ne olduğunu anlamak için)
Resime link vermek
Tıklanabilir resim alanı oluşturmak
Bir resimi, resim alanına dönüştürmek
HTML Arkaplan Örnekleri
İyi bir arkaplan ve metin örneği
Kötü bir arkaplan ve metin örneği
İyi bir arkaplan resmi
İyi bir arkaplan resmi 2
Kötü bir arkaplan resmi
HTML Stil Örnekleri
Bir HTML dökümanının başlık (head) kısmında stil belirlemek
Altı çizi olmayan link yaratmak
Dışardan bir stil dosyasını kullanmak
HTML <head>Örnekleri
Bir dökümana başlık vermek
Bir sayfadaki tüm linkleri tek bir hedefe yönlendirmek
HTML <meta> Örnekleri
Döküman açıklaması
Döküman dili
Bir kullanıcıyı farklı bir sayfaya yönlendirmek
HTML Script Örnekleri
Script ekleme
Tarayıcının scriptleri çalıştırıp çalıştırmamasını kontrol etmek
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
