Ders_19 HTML Listeleri (List)

HTML Listeleri (List)

Aşağıda, sıralanmamış (unordered) bir liste örneği vardır:

• Birinci madde
• ikinci madde 
• Üçüncü madde

Aşağıda, sıralanmış (ordered) bir liste örneği vardır:

1. Birinci madde
2. İkinci madde
3. Üçüncü madde

Sıralanmamış (unordered) HTML Listeleri

Sıralanmamış bir liste elemanı, <ul> tagı ile başlar </ul> tagı ile biter.

Listedeki her bir madde ise <li> ve </li> tagları arasında ilan edilir.

Listedeki her bir madde, bir madde işareti ile (varsayılan olarak, içi dolu küçük bir daire) işaretlenir.

Aşağıdaki sıralanmamış liste örneğine bakalım:

<ul>
  <li>Kahve</li>
  <li>Çay</li>
  <li>Süt</li>
</ul>

Yukarıdaki liste elemanı şöyle görünür.

• Kahve
• Çay
• Süt

Unordered HTML Listelerinde Stil Özellikleri

Sıralanmamış listelerde farklı madde işaretlerini belirlemek için, CSS stilleri kullanılır. Madde işaretlerini yöneten CSS özelliği list-style-type kodudur.

Aşağıda list-style-type özelliğine atanabilecek değerler ve anlamları verilmiştir:

Style	Anlamı
list-style-type:disc	Her maddenin önüne, küçük ve içi dolu bir disk koyar. (varsayılandır)
list-style-type:circle	Her maddenin önüne, küçük ve içi boş bir daire koyar.
list-style-type:square	Her maddenin önüne, küçük ve içi dolu bir kare koyar.
list-style-type:none	Her maddenin önü boş kalır.

Aşağıdaki örneğe dikkat edelim:

<ul style="list-style-type:square">
  <li>Kahve</li>
  <li>Çay</li>
  <li>Süt</li>
</ul>

Yukarıdaki liste elemanı şöyle görünecektir:

• Kahve
• Çay
• Süt

Sıralanmış (ordered) HTML Listeleri

Sıralanmamış bir liste elemanı, <ol> tagı ile başlar </ol> tagı ile biter.

Listedeki her bir madde ise <li> ve </li> tagları arasında ilan edilir.

Listedeki her bir madde, sırayla numaralandırılır. (Varsayılan olarak, 1'den başlanır ve sırayla devam edilir.)

Aşağıdaki sıralanmış liste örneğine bakalım:

<ol>
  <li>Kahve</li>
  <li>Çay</li>
  <li>Süt</li>
</ol>

Yukarıdaki liste elemanı şöyle görünür.

1. Kahve
2. Çay
3. Süt

Ordered HTML Listelerinde type Özelliği

Bir ordered liste elemanına type özelliği eklenerek madde işaretçilerinin hangi tipte olacağı belirlenir.

type CSS değil html özelliğidir.

Aşağıda type özelliğine atanabilecek değerler ve anlamları verilmiştir:

Type	Anlamı
type="1"	Her maddenin önüne 1'den başlayarak bir sayı koyulur. (varsayılandır)
type="A"	Her maddenin önüne A'dan başlayarak bir büyük harf koyulur.
type="a"	Her maddenin önüne a'dan başlayarak bir küçük harf koyulur.
type="I"	Her maddenin önüne büyük harflerle Roma rakamı koyulur.
type="i"	Her maddenin önüne küçük harflerle Roma rakamı koyulur.

Örneğin: 

<ol type="A">
  <li>Kahve</li>
  <li>Çay</li>
  <li>Süt</li>
</ol>

Bu liste şöyle görünecektir:

1. Coffee
2. Tea
3. Milk

HTML Tanımlama (Description) Listeleri

Html'de tanım listesi özelliği de vardır.

Bir tanımlama listesi, terimler ve bu terimlerin anlamlarından oluşur.

Bir tanımlama listesi <dl> tagı ile başlar </dl> tagı ile biter. Bu tagların arasındaki her bir <dt> elemanı bir terim barındırır, her bir <dd> elemanı da bir tanım barındırır. 

Aşağıda, kahve ve sütü tanımlayan bir tanım listesi verilmiştir:

<dl>
  <dt>Kayve</dt>
  <dd>- siyah ve sıcak bir içecektir.</dd>
  <dt>Süt</dt>
  <dd>- beyaz ve soğuk bir içecektir.</dd>
</dl>

Bu listenin çıktısı şöyle olacaktır:

Kayve

- siyah ve sıcak bir içecektir.

Süt

- beyaz ve soğuk bir içecektir.

İçiçe (Nested) HTML Listeleri

Bir liste, içerisinde başka bir liste barındırabilir. Bunun yanında, bir html listesi, resimler veya linkler gibi diğer html elemanlarını da barındırabilir.

Öreneğe dikkat edelim:

<ul>
  <li>Kahve</li>
  <li>Çay
    <ul>
      <li>Siyah çay</li>
      <li>Yeşil çay</li>
    </ul>
  </li>
  <li>Süt</li>
</ul>

Yukarıdaki listeye dikkat edersek; bir <li> elamanıda ayrı bir liste daha kodlanmıştır. Bu liste şöyle görünecektir:

• Kahve
• Çay
  
  • Siyah çay
  • Yeşil çay
• Süt

Yatay (Horizontal) Listeler

Bir liste elemanının maddeleri her zaman alt alta olmak zorunda değildir. 

CSS ile bir listenin maddelerini yatay olarak (inline) sıralayabiliriz.

Bunun için display özeliğine inline değerini atamamız yeterli olacaktır. 

Örneğe dikkat edelim:

<ul style="display:inline;">
  <li>Kahve</li>
  <li>Çay</li>
  <li>Süt</li>
</ul>

Bu liste şöyle görünecektir:

• Kahve
• Çay
• Süt

Şimdi küçük bir uygulama yapalım ve bir menü (navigation bar) sayfası yazırlayalım. 

Html listesi menü hazırlamak için uygun bir elemandır.

Örneğe dikkat edelim:

<!DOCTYPE html>
<html>
<head>
<style>
ul#menu {
    padding: 0;
}

ul#menu li {
    display: inline;
}

ul#menu li a {
    background-color: black;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}

<!-- ul#menu li a:hover {
    background-color: orange;
} -->

</style>
</head>
<body>

<h2>display:inline özelliği ile yapılmış bir menü</h2>

<ul id="menu">
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">JavaScript</a></li>
</ul>  

</body>
</html>

Yukarıdaki CSS kodlarına baktığımızda; 

• ul#menu seçicisi; kimliği menu olan <ul> listesini seçmiştir.   
• ul#menu li seçicisi; kimliği menu olan <ul> listesinin, bütün yavru <li> elemanlarını seçmiştir.
• ul#menu li a   seçicisi; kimliği menu olan <ul> listesinin bütün yavru <li> elemanlarının yavrusu olan bütün <a> link elemanlarını seçmiştir.
• ul#menu li a:hover seçicisi; kimliği menu olan <ul> listesinin bütün yavru <li> elemanlarının yavrusu olan bütün <a> link elemanlarının uzerine fare getirildiğinde (hover) ne olacağını seçmiştir.
• text-decoration: none stil kodu; link textlerinin alt çizgilerini iptal etmiştir.
• border-radius: 4px 4px 0 0 kodu; arkplan dolgusunun köşelerini ovalleştirir yani köşeleri dairesel yapar. Dolgunun, sırasıyla üst sol, üst sağ, alt sağ ve alt sol köşelerinin ne kadar ovalleşeceği, pixel cinsinden belirtilmiştir = 4px 4px 0 0. Bu değerler köşelerin ovallik çaplarıdır ve bu değerler attıkça ovalleşme artar.

Yukarıdaki kodların çıktısı şöyle olacaktır:

        display:inline özelliği ile yapılmış bir menü

• HTML
• CSS
• JavaScript

sonraki ders için tıklayınız

Ders_15 HTML ve CSS

HTML Elemanlarına CSS Uygulama

CSS; html elemanlarını, pratik bir şekilde biçimlendirmek, süslemek, onlara bir stil kazandırmak, makyaj yapmak için geliştirilmiş bir dildir.

CSS; Cascading Style Sheets (basamaklı biçim sayfaları) demektir.

Ders_10'da html elemanlarına stil vermekten kısaca bahsetmiştik.

Bir html dökümanındaki elemanlara stil vermek için tercih edebileceğimiz üç yol vardır:

• Satıriçi (inline) stillendirme: Ders_10 da bahsedildiği gibi, başlama tagına style özelliği eklerek yapabiliriz.
• Dahili (internal) stillendirme: Html dökümanının <head> kısmına bir <style> elemanı ekleyerek yapabiliriz.
• Harici (external) stillendirme: Ayrı bir CSS dosyası oluşturarak yapabiliriz.

En çok önerilen yöntem, ayrı bir CSS dosyası oluşturup, sayfalarımıza ait stilleri, bu dosyayı çağırarak uygulamaktır. Fakat biz derslerimizde daha çok dahili ve satıriçi stillendirme yollarını kullanacağız. Çünkü bu yol CSS öğretmek ve örnekler verebilmek için daha kolay bir yoldur.

CSS Stil Özelliğinin Kullanım Şekli

Satır içinde yazmıyorsak, CSS stillerinin yazım kalıbı aşağıdaki gibidir:

html_elemanını_seç {
özelliği_belirt:değerini_belirt; 
özelliği_belirt:değerini_belirt; 
özelliği_belirt:değerini_belirt;
}

Kalıpta görüldüğü gibi, öncelikle, hangi html elemanının stilini değiştireceksek onu ya da onları seçiyoruz. Daha sonra ise, süslü parantez içinde seçtiğimiz elamanların hangi özelliklerinin hangi değerlerde olmasını istiyorsak ilan ediyoruz.

Süslü parantez içinde, renk (color), font (font-family, font-size), arkaplan (background-color) gibi istediğimiz sayıda özelliğe, istediğimiz değeri atayabiliriz. Her özellik ve değeri arasına iki nokta, değer belirttikten sonra da bir noktalı virgül koymayı ihmal etmemeliyiz.

Satır İçi Stil Verme (Inline CSS)

Satır içi CSS, tek bir html elemanına özel bir stil vermek istiyorsak kullanabileceğimiz yoldur.

Bu yöntem, html elmanının başlangıç tagından hemen sonra bir style özelliği ekleyerek Ders_10 daki kalıba göre yapılır. Aşağıdaki örneğe dikkat edelim:

<h1 style="color:blue">Bu Mavi Bir Başlıktır</h1>

Yukarıda, bir başlığın font stilinin rengini mavi yaptık.

Dahili Stillendirme (Internal CSS)

Bu yöntem, sayfadaki html elemanlarına topluca bir stil vermek için çok kullanışlı bir yoldur.

Bu yöntemde, CSS stilleri html dökümanının <head> ve </head> tagları arasında ilan edilir. 

Bu stiller, <body> elamanı içinde bulunan ve seçilen, bütün alt elemanlara otomatik olarak uygulanır. Aşağıdaki örneğe dikkat edelim:

<!DOCTYPE html>
<html>
<head>
<style>
           body {background-color:lightgrey
}
           h1   {color:blue
}
           p    {color:green
}
</style>
</head>
<body>
<h1>Bu Bir Başlıktır</h1><p>Bu bir paragraftır.</p>
<h1>Bu Başka Bir Başlıktır</h1>
<p>Bu başka bir paragraftır.</p>
</body>
</html>

Yukarıdaki örnekte <style> ve </style> tagları arasında CSS kodlanmıştır. 

Bu kodlar sırasıyla body h1 ve p elemanlarını seçmiş ve bu elemanlara stil vermiştir. Buna göre; body elemanının arkaplan renginin açık gri olacağı, bütün h1 elemanlarının mavi yazı renginde olacağı, bütün p elemanlarının yazı renginin de yeşil olacağı ilan edilmiştir. 

Bu dökümanda kaç tane h1 başlığı ve paragraf olursa olsun bu CSS kodları hepsine uygulanacaktır.

Harici Stillendirme (External CSS)

İnternet sitemiz, büyük olasılıkla bir çok sayfadan ibaret olacaktır. Bu durumda, her bir sayfanın html elemanlarını teker teker stillendirmek, oldukça zaman alıcı ve kafa karışıtırıcı olacaktır.

Harici stillendirme ile; ayrı bir CSS dosyası oluşturulur ve sitemizdeki html elemanlarına ait CSS kodları bu dosyaya yazılır. Daha sonra html dökümanımızda, bu sayfayı sadece çağırarak, CSS kodlarını html sayfamıza uygulamış oluruz.

Aşağıdaki örneğe dikkat edelim:

Html editörü ile bir dosya açıp, içerisine şu kodları yazalım:

h1 {
    color:blue;
    font-family:verdana;
    font-size:300%;
}
p  {
    color:red;
    font-family:courier;
    font-size:160%;
}

Daha sonra bu dosyayı, benimStilim.css örneğinde olduğu gibi css uzantısı ile kaydedelim. Kaydettiğimiz yer de bilgisayarımızda, html sayfamızın bulunduğu yer olsun.

Html dökümanında <head> ve </head> tagları arasına şöyle bir link elemanı eklediğimizde:

<link rel="stylesheet" href="benimStilim.css">

CSS dosyamızı html dökümanımıza çağırmış oluruz. Bu yüzden de, otomatik olarak, html dökümanımızdaki bütün h1 ve p elemanları CSS dosyamızdaki stillere sahip olacaktır.

Sayfalarımızın stillerinde bir değişiklik yapmak istediğimizde, teker teker bütün sayfalarda değil de, sadece CSS dosyamızda değişiklik yapmak, bu CSS dosyasının çağırıldığı bütün html sayfalarımıza otomatik olarak yansıyacaktır. Böylece tek bir merkezden, html sayfalarımızın stillerini kontrol etmek mümkün olackatır.

CSS Font Stilleri

CSS color özelliği, bir html elemanının yazı rengini belirler.

CSS font-family özelliği, bir html elemanının yazı tipini belirler.

CSS font-size özelliği, bir html elemanının yazı büyüklüğünü belirler.

Aşağıdaki örneğe dikkat edelim:

p  {
    color:red;
    font-family:courier;
    font-size:160%;
}

Yukarıdaki örnek, paragraf elemanlarının, yazı rengini kırmızı, yazı tipini courier, yazı büyüklüğünü ise varsayılanın %160'ı kadar ayarlar.

CSS Kenarlık-Çerçeve (border) Modelleri

Her html elemanı, bir çerçeve içindedir. Fakat bu çerçevelerin kenarlıkları (border) vasrayılan olarak görünmemektedir. CSS, bu kenarlıkları, istediğimiz stilde ayarlamamızı sağlar. Aşağıdaki örneğe dikkat edelim:

p {
    border:1px solid black;
}

Bu örnek, html sayfasındaki paragrafların çerçevesini şekillendirir. Buna göre, paragraf çerçeveleri 1px kalınlığında, düz çizgi halinde (solid) ve siyah (black) renkte olacak şekilde ayarlanmıştır.

Uyarı: CSS ile sayısal bir değer yazarken bu sayının birimini belirtmek gerekir. Bu birim pixel ise px şeklinde, yüzde ise % şeklinde belirtilir.

CSS padding özelliği, html elmanının içindeki yazıların, resimlerin... çerçeveye olan uzaklığını belirler. Yani içerik ile çerçeve arasında bir boşluk oluşmasını sağlar. Aşağıdaki örneğe dikkat edelim:

p {
    border:1px solid black;
    padding:10px;
}

Bu örnekte, paragraf çerçevelerinin 1px kalınlığında, düz çizgi halinde (solid) ve siyah (black) renkte olacağı ilan edilmiştir. Bunun yanında, paragraftaki metinler, paragraf çerçevesine en fazla 10 pixel (10px) yaklaşabilecektir. 

CSS margin özelliği, bir html elemanı ile ona komşu olan html elemanları arasında ne kadar boşluk olacağını belirler. Aşağıdaki örneği inceleyelim:

p {
    border:1px solid black;
    padding:10px;
    margin:30px;
}

Bu CSS kodu, paragraflar ile çevrelerindeki html elemanları arasında 30px boşluk oluşmasını sağlar. 

Id Özelliği

Yukarıdaki bütün örnekler, sayfamızdaki bütün p (paragraf) elemanlarını veya bütün h1 (başlık) elemanlarını kapsayacak şekildedir. 

Mesela, bütün paragrafların değil de bazılarının farklı stillerde olmasını istersek ne yapmamız gerekir?

İşte böyle durumlarda, html elmanlarımıza tanıtıcı bir kimlik (id) özelliği eklemek işimizi görecektir. Aşağıdaki örneğe dikkat edelim:

<p id="paragraf1">bu bir paragraftır.</p> 

Yurkarıda, kimliği paragraf1 olan bir paragraf elemanı oluşturduk. CSS'de bu elemanı seçmek için:

tag#id 

kalıbını kullanıyoruz. Yani, html elemanının tagı ile id'sini, aralarına bir diyez (#) işareti koyarak yazmamız bu elemanı seçmek için yeterli olacaktır.

p#paragraf1 {
    color:blue;
}

Yukarıdaki CSS kodu, sadece id'si paragraf1 olan paragraf elemanını seçmiştir, bu yüzden bu koddan sadece kimliği (id) paragraf1 olan paragraf elemanı etkilenecektir. Yani, sadece bir eleman etkilenecektir.

CSS Class Özelliği

CSS class özelliği; belli stil kodlarından oluşmuş bir sınıf oluşturup, bu sınıfı istediğimiz elemanda kullanmamızı sağlar. Aşağıdaki örneğe dikkat edelim:

<p class="sinif">bu bir paragraftır</p>

Yukarıda class'ı sinif olan bir paragraf elemanı oluşturulmuştur. Aşağıdaki örneğe dikkat edelim:

p.sinif {
    color:red;
}

Yukarıda, html sayfamızda bulunan ve class adı sinif olan paragraf elemanları seçilmiş ve stil verilmiştir. 

Class adına göre seçim yaparken diyez değil de nokta ayracını kullandığımıza dikkat edelim.

CSS kuralları hakkında, daha detaylı bilgi için CSS, derslerimizi takip etmenizi öneririz.

sonraki ders için tıklayınız

Ders_10 HTML Stilleri (Style)

HTML Stilleri (STYLE)

  bu mavi renkli bir metindir

  bu kırmızı renkli bir metindir

Her html elementi varsayılan bir stile (style) sahiptir. Örneğin yazı rengi (color) sihay, arkaplan rengi (background-color) beyaz varsayılır. Yani herhangi bir stil vermezsek, metnimiz bu renklerde olacaktır.

Bir html elemanının varsayılan stilini istenilen şekilde değiştirmek style özelliği ile mümkündür.

Aşağıdaki örnekte; sayfa stillerinden biri olan, arkaplan rengine (background-color), mavi (blue) değerini atadık ve arkaplanını mavi renk yapmış olduk:

  <body style="background-color:blue">

  <h1>bu bir başlıktır</h1>

  <p>bu bir paragraftır</p>

  </body>

Yukarıdaki kodlar, web tarayıcımızda şöyle görünecektir:

bu bir başlıktır

bu bir paragraftır

HTML5 den önceki versiyonlarda arkaplan rengi, "bgcolor" özelliği ile atanırdı, fakat bgcolor özelliği HTML5'den sonra geçerliliğini yitirmiştir.

HTML Style Özelliğinin Kullanım Şekli

Bu özellik, hangi html elemanının stili değiştirilecekse o elemanın başlangıç tagının içine yerleştirilir. Kullanım kalıbı aşağıdaki gibidir:

<tag style="property:value">tag içeriği</tag> yani;

<tag style="yapı:değeri">tag içeriği</tag>

Örneğin bir paragarafın arkaplan renginin (background-color), kırmızı (red) olmasını isityorsak:

  <p style="background-color:red">
  Burada akraplan rengi kırmızı olan bir paragraf vardır
  </p>

Yukarıdaki kodlar, web tarayıcımızda şöyle görünecektir:

Burada akraplan rengi kırmızı olan bir paragraf vardır

Style özelliğinde belirtilen yapı (property), bir CSS yapısıdır. CSS yapıları hakkında detaylı bilgi, CSS derslerinde verilecektir.

HTML Text-Color Yapısı

color yapısı, bir metindeki yazının rengini belirler.

Aşağıda, yazılarının mavi renkli olmasını istediğimiz iki html elemanı vardır:


<h1 style="color:blue"> bu mavi bir başlıktır</h1>


<p style="color:blue"> bu mavi bir paragraftır.</p>

Yukarıdaki kodlar, web tarayıcımızda şöyle görünecektir:

bu mavi bir başlıktır

bu mavi bir paragraftır.

HTML Fontları

font-family yapısı bir yazının font biçimini belirler.

Aşağıda verdana ve courier font biçimleriyle yazılmış iki html elemanı vardır:


<h1 style="font-family:verdana">bu bir başlıktır</h1>


<p style="font-family:courier">bu bir paragraftır</p>

Font yapısı için eski versiyonlarda kullanılan <font> tagı HTML5'de geçerli değildir.

Yukarıdaki kodlar, web tarayıcımızda şöyle görünecektir:

bu bir başlıktır

bu bir paragraftır

HTML Metin Büyüklüğü

font-size yapısı bir html dökümanında yazıların büyüklüğünü ifade eder.

<h1 style="font-size:300%">bu bir başlıktır</h1>

<p style="font-size:160%">bu bir paragraftır</p>

Yukarıdaki örneklerde, başlık, varsayılan büyüklüğünden yüzde 300, paragraf ise yüzde 160 daha büyük olacak şekilde ayarlanmıştır.

Bu kodlar, web tarayıcımızda şöyle görünecektir:

bu bir başlıktır

bu bir paragraftır

Metin büyüklüğü, yüzde olarak belirlenmek zorunda değildir. Bunun yerine 12, 16 gibi tam sayılar da kullanılabilir. Bu sayılar, piksel olarak, belirli metin büyüklüklerine karşılık gelir.

HTML Metin Hizalama

text-align yapısı, bir htlm dökümanındaki metnin sayfaya göre hizalanmasını sağlar. center, left ve right değerleri sırasıyla; ortaya, sola ve sağa hizalamayı sağlar

<h1 style="text-align:center">bu bir orta başlık</h1>


Bu kodlar, web tarayıcımızda şöyle görünecektir:

bu bir orta başlık

Bu özelliği eski versiyonlarda <center> tagı yönetirdi, fakat HTML5'de bu tag geçerli değildir.

sonraki ders için tıklayınız