HTML Örnekleri II

Kasım 13, 2020

HTML Örnekleri II

---Tablolar:

Bir HTML dosyasında tablo oluşturmak için 3 temel kodu bilmemiz yeterli:

Kod Anlamı

<table> Tabloya başlamak.

<tr> Satıra başlamak.

<td> Sütuna başlamak.

Tablo Özellikleri

Özellik Anlamı

border="0" Tablo kenarlığı boyutu.

cellspacing="0" Sütunlar arası kenarlık boşluğu.

cellpadding="0" Satırlar arası kenarlık boşluğu.

width="genislik" Tablo genişliği. Piksel ya da yüzde olarak ifade edilebilir.

class="stil" Tablo stili belirtilebilir (CSS bölümünde açıklanıyor).

NOT: Eğer bir sütuna hiçbir şey yazmadan boş bırakırsak sütun görünmeyecektir. Bu sorunu çözmek için   kullanarak kutuda boşluk karakterine yer verirseniz kenarlıkların göründüğünü göreceksiniz.

Kod Çıktısı:

--- Resim Ekleme:

HTML belgemize resim eklemek için <img> kodundan yararlanırız. Buradaki src="" özelliği resmin dosya adını yazacağımız yerdir. Eğer resim, html belgemizin olduğu yerde değil ve bir klasörün içindeyse bu kez src değerine "klasor/resim.jpg" şeklinde yazmak gerekecekti. Resmi farklı bir siteden alacaksanız o halde resmin yolunu yazmanız yeterlidir (http:// ile başlamalı ve bu bir resim dosyası olmalı, jpg, gif, png gibi).

Resimlerimize alt="" özelliği kullanarak fare imleci ile üstüne tuttuğumuzda görünecek açıklayıcı bir yazı yazılabilir. Resmimize link verebiliriz. Bunun için normal link komutu arasına resmimizi alırız.

Kod Çıktısı:

---Sıralı ve Sırasız Liste:

HTML’de elemanları belli bir sıraya göre liste mantığında oluşturmaya yarayan elementler <ul> ve <ol> etiketleridir.Bu iki etiket Sıralı ve sırasız liste olarak elemanlarımızı düzgün bir şekilde oluşturmamızı sağlar.Her zaman olduğu gibi bu etiketlerin İngilizce açıklamalarını da vererek gidelim. <ul>–>Unordinary List –> Sırasız Liste

<ol>–>Ordinary List –> Sıralı Liste

Tabi bu etiketler Bir listenin Sıralı mı yoksa Sırasız mı olduğunu belirtir.Peki Elemanları nerede ve nasıl tanımlayacağız.İşte burda iki etiketin ihtiyacı olan <li> etiketi devreye giriyor.Her ikisinde de mutlaka bu elemanı kullanmamız gerekiyor.Peki bunun İngilizce açılımı nedir?

<li>–>List item –> Liste Elemanı

Şimdi tek tek gidecek olursak;

1-) <ul> Etiketi : Sırasız Liste yapmaya yarayan bu etiket genel olarak belli bir sıra takip etmeyecek liste elemanlarında ve özellikle Menü yapımında büyük önem teşkil ediyor.

Peki <ul> özelliğinde liste elemanlarında görünüm nasıl olacak işte tam burada daha önceki derslerde anlattğımız parametre konusu devreye giriyor.Burada “type” parametresi ile sırasız listemizin disc (içi dolu daire), circle (içi boş daire) ve square (içi dolu kare) olup olmadığını belirtiyoruz.

<ul>–>Unordinary List –> Sırasız Liste