Tamer Çelenk

Webmaster Blog

son yazılar

hakkımda

2009’dan beri web işleriyle uğraşan, nevi şahsına münhasır kişilik.

  • Responsive Tasarım: Mobil Uyumlu Web Sayfaları Tasarlamak İçin Medya Sorgularının Kullanımı

    Responsive Tasarım: Mobil Uyumlu Web Sayfaları Tasarlamak İçin Medya Sorgularının Kullanımı

    Günümüzde internet kullanımının büyük bir kısmı mobil cihazlar üzerinden gerçekleştirilmektedir. Bu sebeple, responsive web tasarımı (duyarlı web tasarımı), web sayfalarının farklı cihaz boyutlarına uyum sağlamasını mümkün kılar. CSS medya sorguları ise, web sayfanızın her ekran boyutunda en uygun şekilde görüntülenmesini sağlamak için kullanılan temel araçlardan biridir. Bu yazıda, responsive tasarımın ne olduğunu, medya sorgularının nasıl çalıştığını ve mobil uyumlu web sayfaları tasarlarken medya sorgularının nasıl kullanıldığını detaylı bir şekilde ele alacağız.

    1. Responsive Tasarım Nedir?

    Responsive tasarım, bir web sayfasının farklı ekran boyutlarına ve cihazlara uyum sağlayacak şekilde tasarlanmasıdır. Bu tasarım yaklaşımı, tek bir web sayfası kullanarak kullanıcı deneyimini iyileştirir ve sayfanın tüm cihazlarda düzgün görüntülenmesini sağlar. Responsive web tasarımı, web sayfasının içerik düzenini, boyutlarını ve öğelerini, ekranın büyüklüğüne göre otomatik olarak uyarlayarak çalışır.

    Responsive Tasarımın Temel İlkeleri:

    1. Esnek Düzenler: Öğeler, ekranda kullanılan alanı dinamik olarak dolduracak şekilde esnek olmalıdır.
    2. Esnek Görseller: Görsellerin boyutları da ekran boyutuna göre ayarlanmalıdır.
    3. Medya Sorguları: Farklı ekran boyutları ve özellikleri için stil uygulamak amacıyla medya sorguları kullanılır.

    2. Medya Sorguları (Media Queries) Nedir?

    Medya sorguları, CSS özelliklerini sadece belirli bir ekran boyutuna, çözünürlüğe veya cihaz türüne göre uygulamanızı sağlayan güçlü bir CSS aracıdır. Medya sorguları, web sayfanızın görünümünü kullanıcıların cihazına göre özelleştirmenize olanak tanır. Örneğin, bir masaüstü bilgisayarda daha geniş bir düzen sunabilirken, mobil cihazda daha kompakt bir düzen sunabilirsiniz.

    Medya sorguları, @media kuralı kullanılarak yazılır ve bu kural, belirli koşullar sağlandığında geçerli olan CSS stil kurallarını tanımlar.

    Medya Sorgularının Temel Yapısı

    @media (koşul) {
  /* Stil kuralları */
}

    Örnek:

    @media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

    Bu örnekte, ekran genişliği 768px veya daha küçük olduğunda, body elementinin arka plan rengi lightblue olarak değişecektir.

    3. Medya Sorgularının Kullanım Alanları

    Medya sorguları, belirli cihaz özelliklerine göre CSS kurallarını uygulamak için kullanılır. İşte bazı yaygın kullanım alanları:

    3.1. Ekran Genişliği ve Yüksekliği

    Ekran genişliği ve yüksekliği, responsive tasarımda en çok kullanılan medya sorgusu koşuludur. Bu, sayfanın farklı cihazlarda uygun şekilde görüntülenmesini sağlar.

    Örnek:

    /* 600px ve daha küçük ekranlar için stil */
@media (max-width: 600px) {
  .container {
    flex-direction: column; /* Öğeleri dikey sıraya koy */
  }
}

/* 1024px ve daha küçük ekranlar için stil */
@media (max-width: 1024px) {
  .container {
    padding: 10px;
  }
}

    Bu örnekte, ekran genişliği 600px veya daha küçük olduğunda, .container elementindeki öğeler dikey sıraya (column) yerleştirilecektir. 1024px’den küçük ekranlarda ise padding değeri 10px olacak şekilde ayarlanacaktır.

    3.2. Ekran Çözünürlüğü

    Ekran çözünürlüğü, özellikle mobil cihazlarda önemlidir. Farklı cihazların çözünürlüklerine göre uygun stil uygulamak, daha net görseller ve öğeler sunar.

    Örnek:

    /* Yüksek çözünürlüklü ekranlar (retina ekranlar) için stil */
@media only screen and (min-device-pixel-ratio: 2) {
  .image {
    background-image: url('[email protected]'); /* Yüksek çözünürlükte görsel kullan */
  }
}

    Bu örnekte, ekran çözünürlüğü 2x veya daha yüksek olan cihazlarda, .image elementinin arka plan resmi, high-resolution görsel olarak değiştirilir.

    3.3. Cihaz Yönü (Portrait vs. Landscape)

    Cihazın yönü de medya sorguları ile kontrol edilebilir. Bir cihazın portrait (dikey) ya da landscape (yatay) modda olup olmadığına göre stil uygulanabilir.

    Örnek:

    /* Portrait modunda stil */
@media (orientation: portrait) {
  .container {
    grid-template-columns: 1fr; /* Dikey modda tek sütun */
  }
}

/* Landscape modunda stil */
@media (orientation: landscape) {
  .container {
    grid-template-columns: 1fr 1fr; /* Yatay modda iki sütun */
  }
}

    Bu örnekte, cihazın yönüne göre grid düzeni değiştirilir. Portrait modunda tek sütun, Landscape modunda ise iki sütun kullanılır.

    3.4. Cihaz Türüne Göre Stil (Mobil, Tablet, Masaüstü)

    Farklı cihaz türlerine göre stil uygulamak da medya sorgularıyla mümkündür. Örneğin, mobil cihazlar için daha kompakt düzenler, masaüstü için daha geniş düzenler oluşturulabilir.

    Örnek:

    /* Mobil cihazlar için stil */
@media only screen and (max-width: 600px) {
  .header {
    font-size: 18px; /* Font boyutunu küçült */
  }
}

/* Tablet cihazlar için stil */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
  .header {
    font-size: 22px; /* Font boyutunu orta yap */
  }
}

/* Masaüstü cihazlar için stil */
@media only screen and (min-width: 1025px) {
  .header {
    font-size: 26px; /* Font boyutunu büyük yap */
  }
}

    Bu örnekte, farklı ekran boyutları için başlık font boyutları ayarlanır. Mobil cihazlarda daha küçük, masaüstü cihazlarda ise daha büyük bir font boyutu kullanılır.

    4. Medya Sorgularıyla Esnek Düzenler Tasarlamak

    Medya sorguları, responsive tasarımda en önemli rolü oynar. Web sayfanızın düzenini, öğeleri ve görsellerini ekran boyutlarına göre değiştirebilirsiniz. Bu sayede, mobil cihazlarda daha uygun, geniş ekranlarda ise zengin bir deneyim sağlayabilirsiniz.

    4.1. Esnek Grid Sistemleri

    Responsive tasarımda esnek grid yapıları, öğeleri ekranın boyutlarına göre uyumlu şekilde düzenlemenizi sağlar. CSS Grid ve Flexbox gibi esnek düzen özellikleriyle medya sorguları birleştirildiğinde, mükemmel uyumlu web sayfaları yaratabilirsiniz.

    Örnek:

    /* Ana düzen için grid kullan */
.container {
  display: grid;
  grid-template-columns: 1fr 3fr; /* İki sütunlu bir grid düzeni */
  grid-gap: 20px;
}

/* Mobil cihazlar için düzen */
@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr; /* Mobilde tek sütun düzeni */
  }
}

    Bu örnekte, 600px‘den küçük ekranlarda container elementinin düzeni tek sütuna düşer.

    5. Sonuç

    Responsive tasarım, web sayfalarının her ekran boyutunda düzgün bir şekilde görüntülenmesini sağlamak için temel bir yaklaşımdır. Medya sorguları, farklı ekran boyutlarına, çözünürlüklerine ve cihaz türlerine göre stil uygulamanıza olanak tanır. Bu sayede, mobil uyumlu, hızlı ve kullanıcı dostu web sayfaları oluşturabilirsiniz.

    Responsive tasarım ve medya sorguları, modern web tasarımının vazgeçilmez araçlarındandır. Uygulamada ve denemelerle medya sorgularını etkin bir şekilde kullanarak, farklı cihazlar için optimize edilmiş şık ve fonksiyonel web sayfaları oluşturabilirsiniz.

  • Flexbox ve Grid: Esnek Düzen ve CSS Grid Sistemi ile Web Tasarımı Yapmak

    Flexbox ve Grid: Esnek Düzen ve CSS Grid Sistemi ile Web Tasarımı Yapmak

    Web tasarımında, sayfaların her ekran boyutunda düzgün bir şekilde görüntülenmesi, kullanıcı deneyiminin artması ve estetik görünüm için düzenleme ve yerleşim tekniklerinin iyi bir şekilde kullanılması gereklidir. CSS Flexbox ve CSS Grid sistemleri, bu amaçla en güçlü araçlar arasında yer alır. Her ikisi de, dinamik ve esnek yerleşimler oluşturmak için kullanılabilir, ancak farklı senaryolarda farklı avantajlar sunar. Bu makalede, Flexbox ve Grid özelliklerinin nasıl çalıştığını, her birinin ne zaman ve nasıl kullanılacağını detaylı bir şekilde inceleyeceğiz.

    1. CSS Flexbox Nedir?

    Flexbox (Flexible Box Layout), öğeleri bir satır veya sütunda düzenlemek için kullanılan bir CSS düzen modelidir. Flexbox, öğelerin esnek bir şekilde yerleşmesini sağlar. Flexbox ile, öğelerin boyutlarını ve düzenini ayarlarken daha fazla kontrol ve esneklik elde edersiniz. Bu, özellikle küçük yerleşimler, tek boyutlu düzenler (yani, yalnızca satır ya da yalnızca sütun) ve öğeler arasında esneklik isteyen durumlar için çok kullanışlıdır.

    Flexbox ile Temel Yerleşim

    Flexbox, flex container (esnek kapsayıcı) ve flex items (esnek öğeler) arasındaki ilişkiyi düzenler. Flex container, flexbox özelliklerini taşıyan bir öğedir. Flex items ise bu kapsayıcıda bulunan öğelerdir. Flex container’a display: flex veya display: inline-flex değeri atandığında, içindeki öğeler bir flex düzenine girecektir.

    Örnek:

    .container {
  display: flex;
  justify-content: space-between; /* Öğeler arasındaki boşluğu eşitler */
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightcoral;
}

    Bu örnekte, .container bir flex container olarak tanımlanmış ve içindeki .item öğeleri, esnek bir düzen ile sıralanmıştır.

    Flexbox Özellikleri

    • display: flex: Öğeyi flex container yapar.
    • flex-direction: Öğelerin hangi yönde sıralanacağını belirler. Varsayılan değer rowdur (yatay). column, row-reverse, column-reverse gibi değerler de kullanılabilir.
    • justify-content: Öğeler arasındaki yatay boşluğu düzenler. flex-start, flex-end, center, space-between, space-around gibi seçenekler vardır.
    • align-items: Öğeleri dikeyde hizalar. flex-start, flex-end, center, stretch, baseline gibi değerler mevcuttur.
    • align-self: Bireysel öğelerin dikey hizalanmasını ayarlar.
    • flex-wrap: Öğelerin bir satırda mı yoksa birden fazla satırda mı yer alacağını kontrol eder.

    Örnek:

    .container {
  display: flex;
  flex-direction: row; /* Öğeler yatay sıralanır */
  justify-content: space-between; /* Öğeler arasındaki boşluk eşit olur */
  align-items: center; /* Öğeler dikeyde ortalanır */
  flex-wrap: wrap; /* Öğeler sığmazsa bir alt satıra geçer */
}

    Flexbox Ne Zaman Kullanılmalı?

    • Tek boyutlu düzenler için idealdir (yani, yatay veya dikey sıralama).
    • Esnek ve uyumlu öğeler gerektiğinde kullanışlıdır.
    • Bir öğenin, diğer öğelere göre esnek boyutlar almasını istediğinizde (örneğin, bazı öğelerin genişliklerini eşit yapmak).

    2. CSS Grid Nedir?

    CSS Grid Layout, web sayfasındaki öğelerin düzenlenmesini sağlayan bir diğer güçlü CSS düzen sistemidir. Grid, iki boyutlu (satır ve sütun) düzenler oluşturmak için kullanılır. Grid ile, öğeler hem yatay hem dikey düzlemde düzenlenebilir, bu da karmaşık ve esnek düzenlerin oluşturulmasını sağlar. CSS Grid, daha büyük ve daha karmaşık düzenler için mükemmel bir seçimdir.

    Grid ile Temel Yerleşim

    CSS Grid ile öğeleri bir grid container (grid kapsayıcı) içinde düzenleriz. Grid container’a display: grid veya display: inline-grid değeri atanır. Bu kapsayıcı, içerdiği öğeleri belirli satırlara ve sütunlara yerleştirir.

    Örnek:

    .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Üç eşit sütun */
  grid-gap: 10px; /* Sütunlar arasındaki boşluk */
}

.item {
  background-color: lightseagreen;
  height: 100px;
}

    Bu örnekte, .container bir grid container olarak tanımlanmış ve her satırda 3 eşit sütun olacak şekilde yerleştirilmiştir.

    Grid Özellikleri

    • display: grid: Öğeyi grid container yapar.
    • grid-template-columns ve grid-template-rows: Sütunlar ve satırlar için boyutlar belirler. repeat() fonksiyonu ile aynı boyutta birden fazla sütun veya satır oluşturulabilir.
    • grid-gap: Grid öğeleri arasındaki boşluğu ayarlar.
    • grid-column ve grid-row: Öğelerin hangi sütun ve satırda yer alacağını belirler.
    • justify-items ve align-items: Öğeleri yatay ve dikeyde hizalar.

    Örnek:

    .container {
  display: grid;
  grid-template-columns: 200px 1fr 2fr; /* Üç sütun: 200px, eşit genişlikte, 2 kat daha geniş */
  grid-gap: 20px;
}

.item {
  background-color: lightcoral;
  height: 100px;
}

    Grid Ne Zaman Kullanılmalı?

    • İki boyutlu yerleşimler için mükemmeldir (hem yatay hem dikey sıralama).
    • Karmaşık ve simetrik düzenler gerektiren durumlar için idealdir.
    • Daha büyük yerleşimler ve içerikler için, öğelerin tam kontrol altında düzenlenmesini sağlar.

    3. Flexbox ve Grid Arasındaki Farklar

    3.1. Yerleşim Türü

    • Flexbox: Yalnızca tek boyutlu düzenler (yani, öğeler ya yatay ya da dikey olarak sıralanır).
    • Grid: İki boyutlu düzenler oluşturur (hem yatay hem dikey düzenlemeyi aynı anda yapabilir).

    3.2. Esneklik

    • Flexbox: Öğelerin genişliğini veya yüksekliğini esnek bir şekilde ayarlamaya olanak tanır. Öğeler, kapsayıcının mevcut alanına uyum sağlar.
    • Grid: Grid öğeleri, belirli sütun ve satırlara yerleştirilir. Daha çok sabit düzenler için uygundur, ancak esneklik de sağlar.

    3.3. Karmaşıklık

    • Flexbox: Daha basit ve hızlı düzenler için uygundur. Tek boyutlu yerleşimlerde esneklik sağlar.
    • Grid: Daha karmaşık düzenler için uygundur ve iki boyutlu yerleşimlerde güçlüdür.

    4. Flexbox ve Grid’i Birlikte Kullanmak

    Flexbox ve Grid’i aynı projede kullanmak mümkündür. Örneğin, bir sayfa genel düzeni için Grid kullanabilirken, küçük bölümler için Flexbox kullanılabilir.

    Örnek:

    /* Grid ile ana düzen */
.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 20px;
}

/* Flexbox ile alt öğe düzeni */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.article {
  display: flex;
  justify-content: space-between;
}

    Bu şekilde, her iki özellik de kendi güçlü yönlerini kullanarak sayfanın düzenini esnek ve profesyonel bir şekilde oluşturur.

    5. Sonuç

    Flexbox ve CSS Grid sistemleri, modern web tasarımında her ikisi de güçlü araçlardır. Hangi sistemi kullanacağınız, tasarım ihtiyaçlarınıza ve düzenin karmaşıklığına göre değişir. Flexbox, daha basit ve esnek düzenler için ideal iken, Grid ise daha karmaşık ve iki boyutlu yerleşimler için mükemmel bir çözümdür.

    Her iki sistemin özelliklerini öğrenmek, web sayfalarınızın daha esnek, düzenli ve profesyonel görünmesini sağlar. Bu özelliklerin birlikte kullanılması, modern web tasarımında her türlü düzeni oluşturmanıza yardımcı olur.

  • CSS Box Modeli: CSS Box Modelinin Nasıl Çalıştığını ve Her Bir Öğesinin Ne İşe Yaradığını Anlamak

    CSS Box Modeli: CSS Box Modelinin Nasıl Çalıştığını ve Her Bir Öğesinin Ne İşe Yaradığını Anlamak

    Web tasarımında en temel kavramlardan biri, CSS Box Modeli’dir. CSS Box Modeli, web sayfalarındaki her öğenin (etiket, div, paragraf vb.) etrafında bir kutu şeklinde göründüğünü ve bu kutunun çeşitli bileşenlerden oluştuğunu açıklar. Box Modeli, öğelerin düzenlenmesi ve boyutlandırılmasında önemli bir rol oynar. Bu yazıda, CSS Box Modeli’nin ne olduğunu, nasıl çalıştığını ve her bir öğesinin ne işe yaradığını detaylı bir şekilde inceleyeceğiz.

    1. CSS Box Modeli Nedir?

    CSS Box Modeli, HTML öğelerinin görsel kutular olarak temsil edilmesini sağlar. Bu modelde her öğe, içerik (content), padding (iç boşluk), border (kenar çizgisi) ve margin (dış boşluk) olmak üzere dört ana bölümden oluşur. Bu kutu yapısının boyutları, öğenin sayfa üzerindeki yerleşimini ve görünümünü belirler.

    CSS Box Modeli’nin Bileşenleri:

    1. Content (İçerik): Öğenin içerik kısmıdır. Metin, resimler veya herhangi bir öğe olabilir. İçeriğin boyutu, öğenin ana boyutunu oluşturur (genişlik ve yükseklik).
    2. Padding (İç Boşluk): İçerik ile öğenin kenar çizgisi (border) arasındaki boşluktur. Padding, öğenin iç kısmına eklenir ve genellikle arka plan rengi bu bölgeyi kapsar.
    3. Border (Kenar Çizgisi): Padding ile dış boşluk (margin) arasındaki sınırdır. Border, öğenin çevresini çerçeveler ve stil, kalınlık ve renk gibi özelliklerle şekillendirilebilir.
    4. Margin (Dış Boşluk): Öğenin çevresindeki diğer öğelerle arasındaki boşluktur. Margin, öğe ile diğer öğeler arasındaki mesafeyi belirler.

    2. CSS Box Modeli’nin Bileşenlerini Detaylı Açıklama

    2.1. Content (İçerik)

    Content (içerik), öğenin asıl içerik kısmıdır. Bu, öğenin metin, görsel veya herhangi bir başka içerik taşıyan kısmıdır. İçerik, öğenin genişliğini (width) ve yüksekliğini (height) belirler.

    Örnek:

    div {
  width: 300px;
  height: 200px;
  background-color: lightblue;
}

    Bu örnekte, div öğesinin içerik kısmı 300px genişliğinde ve 200px yüksekliğindedir.

    2.2. Padding (İç Boşluk)

    Padding, içerikle öğenin kenarları arasındaki boşluktur. Padding eklemek, içerik ile kenar çizgisi arasında boşluk yaratır ve öğenin iç kısmındaki düzeni iyileştirir.

    Padding, her dört kenara ayrı ayrı uygulanabileceği gibi tek bir değerle tüm kenarları için aynı değeri verecek şekilde de kullanılabilir.

    Örnek:

    div {
  padding: 20px; /* Tüm kenarlara 20px padding */
  background-color: lightblue;
}

    Bu örnekte, div öğesinin içerik kısmı ile kenar çizgisi arasında 20px’lik bir boşluk (padding) vardır.

    Padding, her kenar için ayrı ayrı da belirlenebilir:

    div {
  padding: 10px 20px 30px 40px; /* Üst 10px, sağ 20px, alt 30px, sol 40px */
}

    2.3. Border (Kenar Çizgisi)

    Border, öğenin etrafında çizilen çerçeve çizgisidir. Border, öğenin padding ve margin arasındaki alanda yer alır ve çeşitli stil özellikleriyle şekillendirilebilir: renk, kalınlık ve çizgi türü gibi.

    Örnek:

    div {
  border: 2px solid black; /* 2px kalınlığında siyah bir kenar çizgisi */
  padding: 20px;
  background-color: lightblue;
}

    Burada, div öğesinin etrafında 2px kalınlığında siyah bir border (kenar çizgisi) bulunur.

    Border, her kenar için ayrı ayrı da tanımlanabilir:

    div {
  border-top: 2px solid red;
  border-right: 3px dashed blue;
  border-bottom: 4px dotted green;
  border-left: 5px double purple;
}

    2.4. Margin (Dış Boşluk)

    Margin, öğenin dışındaki alanı temsil eder ve öğe ile çevresindeki öğeler arasındaki mesafeyi belirler. Margin, diğer öğelerle etkileşimde önemli bir rol oynar çünkü öğeler arasındaki boşluğu ayarlamak için kullanılır.

    Margin de tıpkı padding gibi dört kenara ayrı ayrı uygulanabilir:

    div {
  margin: 30px; /* Tüm kenarlara 30px margin */
}

    Margin, öğenin dış çevresi ile diğer öğeler arasındaki boşluğu artırır.

    Margin ayrıca negatif değerlerle de kullanılabilir:

    div {
  margin-top: -10px; /* Üstteki boşluğu -10px yapar */
}

    2.5. Öğelerin Boyutunu Hesaplama

    Box Modeli, öğenin toplam boyutunu belirlerken, içerik boyutunu, padding, border ve margin’ı toplar. Ancak, padding ve border, öğenin toplam boyutuna dahil olurken, margin dışındaki alanı belirler.

    Örneğin, aşağıdaki gibi bir öğenin boyutu hesaplanabilir:

    Örnek:

    div {
  width: 300px;         /* İçerik genişliği */
  padding: 20px;        /* İç boşluk */
  border: 5px solid black; /* Kenar çizgisi */
  margin: 30px;         /* Dış boşluk */
}

    Bu durumda, öğenin toplam genişliği ve yüksekliği şu şekilde hesaplanır:

    • Toplam Genişlik = İçerik Genişliği + Sol Padding + Sağ Padding + Sol Border + Sağ Border = 300px + 20px + 20px + 5px + 5px = 350px
    • Toplam Yükseklik = İçerik Yüksekliği + Üst Padding + Alt Padding + Üst Border + Alt Border = 200px + 20px + 20px + 5px + 5px = 250px

    Not: Margin, öğe dışındaki boşluk olduğu için, öğenin toplam boyutuna dahil edilmez.

    2.6. Box-Sizing Özelliği

    CSS’in box-sizing özelliği, bir öğenin boyutunun nasıl hesaplandığını kontrol eder. Varsayılan olarak, öğenin genişliği ve yüksekliği sadece içerik kısmını kapsar, padding ve border öğenin toplam boyutuna dahil edilmez. Ancak, box-sizing özelliğini değiştirerek bu davranışı değiştirebilirsiniz.

    • content-box (varsayılan): Padding ve border, öğenin dış boyutuna dahil edilmez.
    • border-box: Padding ve border, öğenin iç boyutuna dahil edilir. Yani, öğenin genişliği ve yüksekliği, içerik kısmı ile birlikte padding ve border’ı da kapsar.

    Örnek:

    div {
  box-sizing: border-box; /* Padding ve border boyuta dahil edilir */
  width: 300px;
  padding: 20px;
  border: 5px solid black;
}

    Bu durumda, öğenin toplam genişliği ve yüksekliği, içerik kısmının boyutuyla birlikte padding ve border’ı da kapsar.

    3. Sonuç

    CSS Box Modeli, her öğenin nasıl boyutlandırıldığını ve yerleştiğini anlamada kritik bir rol oynar. Öğelerin içerik, padding, border ve margin alanları arasındaki ilişkiyi doğru bir şekilde anlamak, doğru yerleşim ve düzenlemeyi sağlar. Bu model, tasarımda esneklik ve kontrollü bir düzen oluşturmak için gereklidir. Öğelerin boyutlarını ve boşluklarını ayarlayarak, web sayfanızın daha düzenli ve profesyonel görünmesini sağlayabilirsiniz.

    CSS Box Modeli’ni doğru anlamak ve kullanmak, web tasarımında verimli bir şekilde çalışmanın temelini atar. Bu yazıyı takip ederek, her bir öğenin işlevini öğrenebilir ve web sayfanızın tasarımını istediğiniz gibi özelleştirebilirsiniz.

  • CSS ile Stil Verme: Temel CSS Özellikleri (Renk, Font, Margin, Padding, vs.)

    CSS ile Stil Verme: Temel CSS Özellikleri (Renk, Font, Margin, Padding, vs.)

    CSS (Cascading Style Sheets), web sayfalarının görünümünü düzenlemeye yarayan bir dil olup, HTML ile oluşturulmuş içeriğe stil ve biçim kazandırmak için kullanılır. CSS, web tasarımının temel taşlarından biridir ve her web geliştiricisinin öğrenmesi gereken bir araçtır. Bu yazıda, temel CSS özelliklerini ve bunların nasıl kullanıldığını ayrıntılı bir şekilde inceleyeceğiz. Renk, font, margin, padding gibi yaygın CSS özellikleri üzerinden örnekler vererek, stil verme işleminin temelini atacağız.

    1. CSS Nedir ve Neden Kullanılır?

    CSS, HTML veya XML gibi işaretleme dillerine stil eklemek için kullanılır. Bu stil özellikleri; renkler, yazı tipleri, kenar boşlukları, hizalama ve çok daha fazlasını kapsar. CSS’in başlıca avantajı, içerik ile tasarımı birbirinden ayırmasıdır. HTML, içeriği tanımlar, CSS ise bu içeriğin nasıl görüneceğini belirler.

    CSS kullanarak bir web sayfasının daha estetik hale gelmesini sağlayabiliriz. Örneğin, yazı tipini değiştirebilir, bir öğeyi ortalayabilir veya bir sayfada farklı renk şemaları kullanabiliriz.

    2. Temel CSS Özellikleri

    2.1. Renk (Color)

    Web tasarımında renklerin önemi büyüktür. CSS ile yazı, arka plan ve diğer öğelerin renklerini değiştirebiliriz. Renkler, genellikle color (yazı rengi) ve background-color (arka plan rengi) özellikleri ile belirlenir.

    Örnek:
    /* Yazı rengini kırmızı yapma */
h1 {
  color: red;
}

/* Arka plan rengini mavi yapma */
body {
  background-color: lightblue;
}

    Renkler, CSS’te çeşitli formatlarda belirtilebilir:

    • Renk adı (red, blue, green, vb.)
    • HEX kodu (#FF0000, #00FF00, vb.)
    • RGB değeri (rgb(255, 0, 0), rgb(0, 255, 0), vb.)
    • RGBA (şeffaflık dahil) (rgba(255, 0, 0, 0.5), vb.)
    2.2. Font (Yazı Tipi)

    CSS ile metinlerin fontunu, boyutunu, kalınlığını ve diğer özelliklerini değiştirebiliriz. font-family, font-size, font-weight gibi özellikler, metin stilini değiştirmemizi sağlar.

    Örnek:
    /* Yazı tipi Arial, font büyüklüğü 20px, yazı kalınlığı normal */
p {
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: normal;
}

/* Başlıkları büyük yapmak */
h1 {
  font-family: 'Times New Roman', serif;
  font-size: 36px;
  font-weight: bold;
}

    CSS’te yaygın olarak kullanılan font tipleri arasında serif, sans-serif, monospace gibi seçenekler bulunur. Ayrıca, dışarıdan font yüklemek için Google Fonts gibi kaynaklardan faydalanabilirsiniz.

    2.3. Margin ve Padding

    Margin ve padding, öğelerin etrafındaki boşlukları düzenler. Aralarındaki farkı anlamak önemlidir:

    • Margin: Bir öğenin dışındaki boşluktur, yani öğenin çevresindeki alanı belirler.
    • Padding: Bir öğenin içindeki boşluktur, yani öğenin içeriği ile kenarları arasındaki alanı belirler.
    Örnek:
    /* Bir öğeye dış boşluk ekleme (margin) */
div {
  margin: 20px;
}

/* Bir öğeye iç boşluk ekleme (padding) */
div {
  padding: 15px;
}

    Margin ve padding değerleri, tek bir değer (tüm kenarlara eşit), dört farklı değer (her kenar için farklı) ya da alt, üst, sağ ve sol gibi kombinasyonlarla belirtilebilir.

    /* Üst 20px, sağ 15px, alt 10px, sol 5px */
div {
  margin: 20px 15px 10px 5px;
}
    2.4. Border (Kenar Çizgisi)

    CSS ile öğelere sınır ekleyebiliriz. border özelliği ile sınırın kalınlığını, türünü ve rengini belirlemek mümkündür.

    Örnek:
    /* 2px kalınlığında, siyah renkli bir sınır */
div {
  border: 2px solid black;
}

    Ayrıca border-radius özelliği ile köşeleri yuvarlayabilirsiniz:

    /* Yuvarlak köşeler */
div {
  border-radius: 10px;
}
    2.5. Text Align (Metin Hizalama)

    Metni hizalamak, sayfa düzenini güzelleştirir. text-align özelliği, metnin yatay olarak nasıl hizalanacağını belirler.

    Örnek:
    /* Metni ortalamak */
h1 {
  text-align: center;
}

/* Metni sağa yaslamak */
p {
  text-align: right;
}
    2.6. Width ve Height (Genişlik ve Yükseklik)

    Bir öğenin genişliğini ve yüksekliğini ayarlamak için width ve height özellikleri kullanılır. Bu, özellikle resimler, kutular ve diğer öğelerin boyutlarını belirlerken faydalıdır.

    Örnek:
    /* Bir öğenin genişliğini 200px, yüksekliğini ise 100px yapmak */
div {
  width: 200px;
  height: 100px;
}
    2.7. Display ve Position

    Bir öğenin sayfadaki konumunu ve düzenini belirlerken display ve position özellikleri kullanılır.

    • display: Öğenin nasıl gösterileceğini belirler. Örneğin, block, inline, flex, grid gibi değerlerle öğe yerleşimi ayarlanabilir.
    • position: Öğenin sayfadaki konumunu değiştirmek için kullanılır (örneğin, relative, absolute, fixed, sticky).
    Örnek:
    /* Flexbox ile öğe yerleşimi */
.container {
  display: flex;
  justify-content: center; /* Ortalamak */
  align-items: center; /* Ortalamak */
}

/* Konumlandırma: Sayfada sabit bir konumda kalacak */
.fixed-box {
  position: fixed;
  top: 10px;
  right: 10px;
}

    3. CSS ile Stil Verme İpuçları

    • Dışarıdan Stil Dosyası Kullanımı: CSS kodlarını, HTML dosyasına <link> etiketi ile bağlamak, stil ve içerik arasında bir ayrım sağlar. Bu, sayfanın yüklenme hızını artırır ve düzenlemeyi kolaylaştırır. 
    <link rel="stylesheet" href="styles.css">
    • CSS Seçiciler: CSS’te seçiciler (selectors), hangi öğelere stil vereceğimizi belirler. ID, sınıf, element seçicileri gibi çeşitli türleri vardır. Örneğin, .class, #id veya div gibi.
    • Responsive Tasarım: Mobil cihazlarda düzgün görüntülenen bir site için @media sorgularını kullanarak farklı ekran boyutlarına özel stiller uygulayabilirsiniz. 
    @media (max-width: 600px) {
  body {
    background-color: lightgray;
  }
}

    4. Sonuç

    CSS, web tasarımında çok güçlü bir araçtır. Temel CSS özelliklerini öğrenmek, sitenizin tasarımını özelleştirmenize yardımcı olur. Renk, font, margin, padding, border ve daha pek çok özellik ile web sayfanızın görsel tasarımını dilediğiniz gibi şekillendirebilirsiniz. İleri seviye özellikler ve teknikler öğrenerek, web sitenizin profesyonel bir görünüme kavuşmasını sağlayabilirsiniz.

    Unutmayın, CSS ile stil vermek sadece sayfanın görünümünü güzelleştirmekle kalmaz, aynı zamanda kullanıcı deneyimini iyileştirir. Tasarımın ne kadar iyi olursa, ziyaretçilerin sitenizde geçirdiği zaman da o kadar uzun olur.

  • CSS Nedir?

    CSS Nedir?

    Web geliştirmede, her öğe kendi işlevini yerine getiren ve birbirinden bağımsız olan bir yapıyı oluşturur. Ancak, bu öğelerin bir araya geldiğinde estetik ve uyumlu bir şekilde görüntülenmesi gerekir. İşte burada CSS (Cascading Style Sheets) devreye girer. CSS, web sayfalarının görsel tasarımını yapmak için kullanılan bir stil sayfası dilidir. HTML, web sayfalarının yapısını oluştururken, CSS sayfanın tasarımını, stilini ve düzenini belirler. Bu yazıda CSS’in ne olduğunu, nasıl çalıştığını ve web tasarımındaki rolünü detaylı bir şekilde ele alacağız.

    CSS Nedir?

    CSS (Cascading Style Sheets), HTML ve XML belgelerine stil ve biçim eklemek için kullanılan bir dildir. CSS, web sayfasındaki metin, renk, düzen, yazı tipi, arka plan, kenarlıklar, boşluklar gibi görsel özellikleri tanımlar. CSS, her bir öğenin nasıl görüneceğini belirlemek için kullanılır, ancak sayfanın yapısını değiştirmez. Bu, web geliştiricilerine aynı sayfa üzerinde birçok farklı görsel tasarımı daha kolay bir şekilde oluşturma imkânı tanır.

    Özetle, CSS:

    • Web sayfalarının stilini belirler.
    • Sayfa öğelerinin düzenini, renklerini, boyutlarını, yazı tiplerini ve daha fazlasını kontrol eder.
    • Sayfa içeriklerinin daha okunabilir ve kullanıcı dostu olmasını sağlar.

    CSS’in Temel Avantajları

    CSS, web geliştirme sürecinde pek çok avantaj sağlar. İşte başlıca avantajları:

    1. Görsel Ayrım: CSS, tasarım ve içerik arasındaki ayrımı netleştirir. HTML, sayfanın yapısını tanımlar, CSS ise sayfanın görsel tasarımını ve stilini oluşturur. Bu, sayfa içeriğinin değiştirilmeden sadece stilin güncellenebilmesini sağlar.
    2. Daha Hızlı Yüklenme: CSS, sayfanın stilini belirlemek için kullanılan bir stil sayfası dilidir ve HTML’den bağımsızdır. Bir stil dosyası, birden fazla sayfada kullanılabilir, bu da sayfaların hızlı yüklenmesini sağlar.
    3. Mobil Uyumluluk: CSS medya sorguları sayesinde web sayfaları, farklı ekran boyutlarına (cep telefonları, tabletler, masaüstü bilgisayarlar vb.) uyum sağlayacak şekilde tasarlanabilir. Bu da daha iyi bir kullanıcı deneyimi sunar.
    4. Kolay Bakım ve Güncellemeler: Tek bir CSS dosyası, tüm site genelindeki stil değişikliklerini kontrol eder. Bu, stil değişikliklerinin sadece bir yerden yapılmasını sağlar, böylece sayfa genelinde tutarlılık sağlanır ve bakım daha kolay olur.

    CSS ile Neler Yapılabilir?

    CSS, web sayfalarının görünümünü şekillendirmek için çeşitli özellikler ve işlevler sunar. İşte CSS ile yapılabilecek başlıca işlemler:

    1. Yazı Tipi ve Metin Stilleri

    • CSS ile sayfadaki yazı tipi, font boyutu, rengi, satır aralığı, harf aralığı gibi metin özellikleri değiştirilebilir.
    • Örnek:
    p { 
	font-family: Arial, sans-serif; 
	font-size: 16px; 
	color: #333; 
}

    2. Renkler ve Arka Planlar

    • CSS, sayfanın arka plan rengini, resmini veya desenini değiştirmek için kullanılır.
    • Örnek:
    body { 
	background-color: #f0f0f0; 
	background-image: url('background.jpg'); 
}

    3. Kutular ve Kenarlıklar (Box Model)

    • CSS’in en temel özelliklerinden biri box modeldir. Bir öğe, kenarlıklar, dolgu (padding), içerik ve dış boşluk (margin) ile çevrilidir. CSS ile bu öğelerin boyutları ve yerleşimi kolayca ayarlanabilir.
    • Örnek: 
    div { 
	padding: 20px; 
	margin: 15px; 
	border: 1px solid #000; 
}

    4. Düzen (Layout)

    • CSS, web sayfasındaki öğelerin düzenini yönetmek için kullanılır. Öğeler yatay veya dikey olarak hizalanabilir, farklı yerleşim teknikleri (flexbox, grid) kullanılabilir.
    • Örnek (Flexbox): 
    .container { 
	display: flex; 
	justify-content: space-between; 
}

    5. Animasyonlar ve Geçişler

    • CSS ile öğelere animasyonlar eklenebilir. Hover efektleri, geçişler, hareketli içerikler gibi etkileşimler CSS ile yapılabilir.
    • Örnek (Geçiş): 
    button { 
	transition: background-color 0.3s ease; 
}

button:hover {
	background-color: #007bff; 
}

    CSS Syntax (Yazım Kuralları)

    CSS, belirli bir sözdizimiyle yazılır. CSS kuralları şu yapıdan oluşur:

    selector {
    property: value;
}
    • Selector (Seçici): Stil uygulanacak HTML öğesini belirtir. Örneğin, p, .class, #id.
    • Property (Özellik): Değiştirilecek stil özelliğidir (örneğin, color, font-size, margin).
    • Value (Değer): Özelliğin alacağı değeri belirtir (örneğin, red, 16px, auto).

    Örnek:

    h1 {
    color: blue;
    font-size: 24px;
}

    CSS’in Çeşitli Uygulama Yöntemleri

    CSS’i HTML belgelerine dahil etmek için birkaç yöntem vardır:

    1. Inline CSS (Satır İçi CSS)

    • HTML öğelerine doğrudan style özelliği ile stil uygulanabilir.
    • Örnek: 
    <p style="color: red; font-size: 20px;">Bu bir paragraftır.</p>

    2. Internal CSS (Dahili CSS)

    • HTML belgesinin <head> kısmında, <style> etiketi içinde CSS yazılabilir.
    • Örnek: 
    <style> body { background-color: #f0f0f0; } </style>

    3. External CSS (Harici CSS)

    • CSS kuralları ayrı bir .css dosyasında yazılır ve HTML dosyasına bağlantı kurularak kullanılır.
    • Örnek: 
    <link rel="stylesheet" href="styles.css">

    Sonuç

    CSS, web tasarımında en temel ve güçlü araçlardan biridir. Web sayfalarının görsel tasarımını oluşturmak, düzeni yönetmek ve kullanıcı etkileşimlerini sağlamak için vazgeçilmezdir. HTML, sayfanın yapısını belirlerken, CSS sayfanın görünümünü şekillendirir. CSS ile web sayfalarını daha estetik, kullanıcı dostu ve profesyonel hale getirebiliriz. Hem masaüstü hem de mobil uyumluluk için CSS, modern web tasarımının vazgeçilmez bir parçasıdır.

  • Formlar ve Girdi Elemanları: Web Sayfalarında Kullanıcı Etkileşimi

    Web geliştirmede, kullanıcı etkileşimi oldukça önemli bir yer tutar. Web sayfalarında kullanıcılarla etkileşime geçmenin en yaygın yollarından biri formlardır. Formlar, kullanıcıların veri girmesini sağlamak ve bu veriyi bir sunucuya göndermek için kullanılır. HTML, formlar ve girdi elemanları oluşturmak için çeşitli etiketler sunar. Bu yazımızda, HTML formlarının temel özelliklerinden, girdi elemanlarının çeşitlerine kadar her şeyi ele alacağız.

    HTML Formları Nedir?

    HTML formu, bir web sayfasında kullanıcıdan bilgi toplamak için kullanılan bir yapı elemanıdır. Formlar, kullanıcıların adlarını, e-posta adreslerini, şifrelerini, tercihlerini ve diğer bilgilerini girmesini sağlar. Formlar, genellikle bir sunucuya veri göndermek için kullanılır.

    Form, <form> etiketleri arasında tanımlanır ve içinde çeşitli girdi elemanları bulunur. Bu elemanlar, kullanıcıya veriyi hangi formatta girmesi gerektiğini gösterir.

    Form Etiketinin Temel Yapısı:

    <form action="islem.php" method="POST">
    <!-- Girdi elemanları burada yer alır -->
    <input type="submit" value="Gönder">
</form>
    • action: Verilerin gönderileceği URL’yi belirtir.
    • method: Verilerin gönderilme yöntemini belirtir. Yaygın olarak GET ve POST kullanılır.

    HTML Girdi Elemanları

    HTML formları, kullanıcılardan veri toplamak için bir dizi farklı girdi elemanı içerir. Bu elemanlar, formun etkileşimini sağlar ve kullanıcıdan farklı türde veriler alabilir. İşte HTML’de yaygın olarak kullanılan bazı girdi elemanları:

    1. Metin Kutuları (<input type="text">)

    • Amaç: Kullanıcının kısa metinler girmesini sağlar. Örneğin, isim veya şehir gibi bilgiler için kullanılır.
    • Kullanım:
    <label for="name">Adınız:</label>
<input type="text" id="name" name="name">

    2. Şifre Kutusu (<input type="password">)

    • Amaç: Kullanıcıdan şifre almak için kullanılır. Yazılan metin, şifre formatında görünür (yıldızlarla gizlenir).
    • Kullanım:
    <label for="password">Şifreniz:</label>
<input type="password" id="password" name="password">

    3. E-posta Kutusu (<input type="email">)

    • Amaç: Kullanıcıdan e-posta adresi almak için kullanılır. E-posta formatı doğrulaması yapılır.
    • Kullanım:
    <label for="email">E-posta Adresiniz:</label>
<input type="email" id="email" name="email">

    4. Tarih Kutusu (<input type="date">)

    • Amaç: Kullanıcıdan tarih almak için kullanılır. Genellikle takvim widget’ı ile kullanıcıya tarih seçme imkânı tanır.
    • Kullanım:
    <label for="birthday">Doğum Tarihiniz:</label>
<input type="date" id="birthday" name="birthday">

    5. Dosya Yükleme Kutusu (<input type="file">)

    • Amaç: Kullanıcıya dosya yükleme imkânı tanır. Resim, belge veya diğer dosyaların yüklenmesi için kullanılır.
    • Kullanım:
    <label for="fileUpload">Dosya Yükle:</label>
<input type="file" id="fileUpload" name="fileUpload">

    6. Radio Buttonlar (<input type="radio">)

    • Amaç: Kullanıcının belirli bir grup seçenekten yalnızca birini seçmesini sağlar. Genellikle birden fazla seçenekten tek bir seçim yapmak için kullanılır.
    • Kullanım:
    <label for="genderMale">Erkek</label>
<input type="radio" id="genderMale" name="gender" value="male">
<label for="genderFemale">Kadın</label>
<input type="radio" id="genderFemale" name="gender" value="female">

    7. Checkboxlar (<input type="checkbox">)

    • Amaç: Kullanıcının bir veya birden fazla seçeneği seçmesini sağlar. Örneğin, onay kutuları gibi.
    • Kullanım:
    <label for="subscribe">Bültene Abone Ol</label>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">

    8. Seçim Kutusu (<select>)

    • Amaç: Birden fazla seçeneğin bulunduğu bir açılır menü oluşturur. Kullanıcı, bir seçenek seçebilir.
    • Kullanım:
    <label for="country">Ülkeniz:</label>
<select id="country" name="country">
    <option value="TR">Türkiye</option>
    <option value="US">Amerika</option>
    <option value="FR">Fransa</option>
</select>

    9. Textarea (Çok Satırlı Metin Kutusu)

    • Amaç: Kullanıcıdan çok satırlı metin alır. Genellikle yorumlar veya açıklamalar için kullanılır.
    • Kullanım:
    <label for="message">Mesajınız:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

    10. Butonlar (<button>)

    • Amaç: Kullanıcıya bir işlem yapmasını sağlamak için butonlar ekler. Form gönderme, iptal etme gibi işlemler için kullanılır.
    • Kullanım:
    <button type="submit">Gönder</button>
<button type="reset">Sıfırla</button>

    Formda Veri Gönderme

    Formlar, kullanıcılardan alınan verileri sunucuya göndermek için kullanılır. HTML formunun action ve method özellikleri, veri gönderme işlemini tanımlar.

    • action: Verilerin hangi URL’ye gönderileceğini belirler.
    • method: Verilerin gönderilme yöntemini belirtir. En yaygın kullanılanlar:
      • GET: Veriler URL’de parametre olarak gönderilir.
      • POST: Veriler HTTP isteği ile gönderilir ve URL’de görünmez.
    <form action="islem.php" method="POST">
    <label for="username">Kullanıcı Adı:</label>
    <input type="text" id="username" name="username">
    <input type="submit" value="Gönder">
</form>

    Formların Stilini Düzenleme (CSS ile)

    HTML formları, CSS ile stilize edilebilir. Form elemanlarının görünümünü iyileştirmek için CSS kullanabilirsiniz. Örneğin, giriş kutularına arka plan rengi, kenarlık veya yazı tipi stili ekleyebilirsiniz.

        input[type="text"], input[type="password"], textarea {
        border: 1px solid #ccc;
        padding: 8px;
        width: 100%;
    }

    button {
        background-color: #4CAF50;
        color: white;
        padding: 10px 15px;
        border: none;
        cursor: pointer;
    }

    button:hover {
        background-color: #45a049;
    }

    Sonuç

    HTML formları, kullanıcı etkileşimini sağlamak için en önemli araçlardan biridir. Formlar, web sayfalarına veri toplama, kullanıcıdan bilgi alma ve bu verileri sunucuya gönderme gibi temel işlevleri sağlar. HTML, çeşitli girdi elemanlarıyla bu işlemi kolaylaştırır. Web geliştiricilerinin, formlar ve girdi elemanları hakkında derinlemesine bilgi sahibi olmaları, daha kullanıcı dostu ve etkileşimli web sayfaları tasarlamalarını sağlar.

  • HTML5 Yeni Özellikleri ve Etiketleri

    HTML5 Yeni Özellikleri ve Etiketleri

    Web teknolojileri hızla gelişiyor ve her yeni sürümde daha güçlü, daha esnek ve kullanıcı dostu özellikler sunuluyor. Bu yazımızda, HTML5 ile gelen yeni etiketler ve özelliklere odaklanacağız. HTML5, web geliştiricilerine daha modern, semantik ve erişilebilir web sayfaları oluşturmak için birçok yeni araç sunuyor. Peki, HTML5 ile neler geldi? İşte HTML5’in getirdiği yenilikler!

    HTML5 Nedir?

    HTML5, web sayfalarını oluşturmak için kullanılan HTML (HyperText Markup Language) dilinin beşinci sürümüdür. HTML5, önceki sürümlere kıyasla daha fazla özellik ve fonksiyon sunarak web geliştirme sürecini daha verimli hale getirmiştir. HTML5, özellikle multimedya içeriği ve interaktif özellikler için genişletilmiş destek sağlamakta, ayrıca sayfa yapısını daha anlaşılır ve semantik hale getirmektedir.

    HTML5 ile Gelen Yeni Etiketler

    HTML5, sayfa yapısını oluştururken daha anlamlı ve semantik etiketler sunuyor. Bu etiketler, hem geliştiricilerin işini kolaylaştırıyor hem de arama motorlarının ve ekran okuyucularının sayfa içeriğini daha iyi anlamasını sağlıyor. İşte HTML5 ile gelen başlıca yeni etiketler:

    1. <article>

    • Amaç: Bağımsız ve anlamlı içerik parçalarını tanımlar. Örneğin, bir haber makalesi veya blog yazısı.
    • Kullanım:
    <article>
    <h2>Yeni Yazı Başlığı</h2>
    <p>Bu, yeni yazının içeriğidir.</p>
</article>

    2. <section>

    • Amaç: Sayfa içindeki belirli bir bölüm veya konuyu tanımlar. Genellikle başlıkları içerir.
    • Kullanım:
    <section>
    <h2>Hakkımızda</h2>
    <p>Şirketimiz hakkında bilgi burada yer alır.</p>
</section>

    3. <nav>

    • Amaç: Sayfa içindeki navigasyon linklerini tanımlar. Ana menü veya diğer navigasyon öğeleri bu etiket içinde bulunur.
    • Kullanım:
    <nav>
    <ul>
        <li><a href="#home">Ana Sayfa</a></li>
        <li><a href="#about">Hakkımızda</a></li>
    </ul>
</nav>

    4. <header> ve <footer>

    • Amaç: Sayfanın üst ve alt kısmındaki yapıları tanımlar. Başlık ve alt bilgi içerir.
    • Kullanım:
    <header>
    <h1>Web Sitesi Başlığı</h1>
    <nav>...</nav>
</header>
<footer>
    <p>&copy; 2025 Web Sitesi. Tüm Hakları Saklıdır.</p>
</footer>

    5. <aside>

    • Amaç: Sayfanın ana içeriğinden bağımsız olan ancak ilişkili olan ek içerikleri belirtir. Yan panel, reklamlar veya bağlantılar için kullanılabilir.
    • Kullanım:
    <aside>
    <h3>İlgili Yazılar</h3>
    <ul>
        <li><a href="#">Yazı 1</a></li>
        <li><a href="#">Yazı 2</a></li>
    </ul>
</aside>

    6. <figure> ve <figcaption>

    • Amaç: Görsellerin veya diğer medya öğelerinin etrafında açıklamalar eklemek için kullanılır.
    • Kullanım:
    <figure>
    <img src="resim.jpg" alt="Örnek Resim">
    <figcaption>Bu, örnek resmin açıklamasıdır.</figcaption>
</figure>

    7. <mark>

    • Amaç: Belirli metinleri vurgulamak için kullanılır. Genellikle arama sonuçlarında vurgulanan metin için uygundur.
    • Kullanım:
    <p>Bu cümlede <mark>HTML5</mark> yeni bir özellik ekledi.</p>

    HTML5 Yeni Özellikler

    HTML5, yalnızca yeni etiketler eklemekle kalmaz, aynı zamanda daha güçlü özellikler ve API’ler de sunar. İşte HTML5’in sunduğu bazı önemli özellikler:

    1. Yeni Medya Etiketleri: <audio> ve <video>

    • HTML5 ile birlikte, web sayfalarına ses ve video eklemek çok daha kolay hale geldi. Bu etiketlerle, özel bir medya oynatıcıya gerek kalmadan medya içeriği sayfada doğrudan oynatılabilir.
    • Kullanım (Video):
    <video controls>
    <source src="video.mp4" type="video/mp4">
    Tarayıcınız video etiketini desteklemiyor.
</video>
    • Kullanım (Ses):
    <audio controls>
    <source src="ses.mp3" type="audio/mp3">
    Tarayıcınız ses etiketini desteklemiyor.
</audio>

    2. Yerel Depolama (Local Storage) ve Seans Depolama (Session Storage)

    • HTML5, tarayıcıda veri depolamak için yerel depolama (localStorage) ve oturum depolama (sessionStorage) özelliklerini sunar. Bu, sayfa yeniden yüklense bile verilerin saklanmasına olanak tanır.
    • Kullanım (Yerel Depolama):
    localStorage.setItem("isim", "Ahmet");
console.log(localStorage.getItem("isim"));

    3. Geolocation API

    • HTML5, kullanıcıların konum bilgilerini almak için Geolocation API’yi sunar. Bu özellik, harita uygulamaları veya konum tabanlı hizmetlerde yaygın olarak kullanılır.
    • Kullanım:
    navigator.geolocation.getCurrentPosition(function(position) {
    console.log("Enlem: " + position.coords.latitude);
    console.log("Boylam: " + position.coords.longitude);
});

    4. Canvas ve SVG

    • HTML5, dinamik grafikler oluşturmak için <canvas> öğesini tanıttı. Bu özellik, oyunlar ve etkileşimli grafikler oluşturmayı kolaylaştırır. Ayrıca SVG (Scalable Vector Graphics) kullanımı daha yaygın hale gelmiştir.
    • Kullanım (Canvas):
    <canvas id="myCanvas" width="200" height="100"></canvas>
<script>
    var ctx = document.getElementById("myCanvas").getContext("2d");
    ctx.fillStyle = "blue";
    ctx.fillRect(10, 10, 150, 100);
</script>

    5. Form Kontrolleri ve Validasyon

    • HTML5, formlar için yeni giriş türleri ve doğrulama özellikleri ekledi. Örneğin, <input type="email"> veya <input type="date"> gibi yeni türler, form doğrulamasını daha kolay hale getirir.
    • Kullanım:
    <form>
    <label for="email">E-posta:</label>
    <input type="email" id="email" name="email" required>
    <button type="submit">Gönder</button>
</form>

    Sonuç

    HTML5, web geliştirme sürecini büyük ölçüde dönüştürdü ve daha modern, semantik, erişilebilir web sayfalarının oluşturulmasını kolaylaştırdı. Yeni etiketler ve özellikler, hem geliştiriciler hem de kullanıcılar için çok daha güçlü ve etkileşimli web deneyimleri sağlar. HTML5 ile gelen bu yenilikleri öğrenmek ve projelerinizde kullanmak, web geliştiriciliği becerilerinizi bir adım ileriye taşıyacaktır.

  • HTML Etiketleri ve Yapısı

    Web geliştirmeye yeni başlıyorsanız, HTML öğrenmek, ilk adımınız olmalı. HTML, web sayfalarının iskeletini oluşturur ve sayfanın yapısal elemanlarını tanımlar. Peki, HTML etiketleri nedir, nasıl kullanılır ve bir HTML belgesi nasıl yapılandırılır? Bu yazıda, HTML etiketlerini ve yapısını detaylı bir şekilde inceleyeceğiz.

    HTML Etiketlerinin Temeli

    HTML, etiketler kullanarak içerik oluşturur. Etiketler genellikle açılış ve kapanış etiketlerinden oluşur. Örneğin:

    <p>Bu bir paragraftır.</p>

    Yukarıdaki örnekte, <p> etiketi paragrafı tanımlar. <p> etiketi açılış etiketidir, </p> ise kapanış etiketidir. Kapanış etiketi, açılış etiketinin tersidir ve içerik bitiminde kullanılır.

    HTML Etiketlerinin Genel Yapısı

    Bir HTML belgesinin genel yapısı şu şekildedir:

    <!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sayfa Başlığı</title>
</head>
<body>
    <!-- Sayfanın içeriği burada yer alır -->
    <h1>Başlık</h1>
    <p>Bu bir paragraftır.</p>
</body>
</html>

    1. <!DOCTYPE html>

    • Bu satır, HTML5 belgesinin kullanıldığını belirtir ve sayfanın doğru şekilde render edilmesini sağlar.

    2. <html>

    • HTML belgesinin başlangıcını belirtir. Aynı zamanda lang özelliği, sayfanın dilini belirtir.

    3. <head>

    • Sayfanın başlık, karakter seti, stil dosyaları ve diğer meta bilgilerini içerir. Tarayıcıya sayfanın nasıl işleneceği hakkında bilgi verir.

    4. <meta>

    • Sayfa hakkında meta bilgileri sağlar. Örneğin, karakter seti ve uyumlu görünüm (responsive design) gibi.

    5. <title>

    • Sayfanın başlığını belirler ve tarayıcı sekmesinde görünen metni oluşturur.

    6. <body>

    • Sayfanın görünen içeriğini içerir. Bu bölümde başlıklar, paragraflar, görseller, bağlantılar gibi öğeler bulunur.

    Yaygın HTML Etiketleri

    HTML etiketleri, sayfanın farklı bölümlerini tanımlar. İşte bazı yaygın HTML etiketleri:

    Başlık Etiketleri:

    Başlık etiketleri, sayfa içeriğinin başlıklarını düzenler. Başlıklar, <h1> ile <h6> arasındaki etiketlerle oluşturulur. <h1> en büyük başlıkken, <h6> en küçük başlıktır.

    <h1>Birinci Derece Başlık</h1>
<h2>İkinci Derece Başlık</h2>
<h3>Üçüncü Derece Başlık</h3>

    Paragraf Etiketi:

    Paragraflar için <p> etiketi kullanılır. Bu etiket, metin paragraflarını tanımlar.

    <p>Web geliştirmeye hoş geldiniz!</p>

    Bağlantı Etiketi:

    Bağlantılar için <a> etiketi kullanılır. Bu etiket, sayfalar arası geçiş yapmanızı sağlar.

    <a href="https://www.celenk.tr">celenk.tr Sitesi</a>

    Liste Etiketleri:

    HTML’de iki tür liste vardır: sıralı (ordered) ve sırasız (unordered).

    • Sırasız Liste: <ul> etiketiyle yapılır ve her madde <li> etiketiyle belirtilir.
    <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
    • Sıralı Liste: <ol> etiketiyle yapılır ve her madde yine <li> ile belirtilir.
    <ol>
    <li>Birinci Adım</li>
    <li>İkinci Adım</li>
    <li>Üçüncü Adım</li>
</ol>

    Resim Etiketi:

    Resimleri sayfaya eklemek için <img> etiketi kullanılır. Bu etiket, bir kaynağa (source) işaret eder.

    <img src="resim.jpg" alt="Açıklama Metni">

    Görsel ve Metin İçin Stil:

    HTML öğelerine stil vermek için CSS kullanılabilir, ancak bu öğelere doğrudan stil vermek için style özelliği de kullanılabilir.

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

    Sonuç

    HTML, web sayfalarını oluşturmak için kullanılan temel bir dildir. Etiketler, sayfanın yapısını oluşturur ve içeriği düzenler. HTML öğrenmek, web geliştirmeye başlamak için atılacak ilk adımdır. Temel etiketleri ve yapıyı öğrendikçe, daha karmaşık web sayfalarını oluşturmak için CSS ve JavaScript gibi diğer teknolojileri de öğrenebilirsiniz.

    Web geliştirmeye ilk adımınızı attınız! Şimdi, HTML etiketleri hakkında öğrendiklerinizi gerçek projelerde kullanmaya başlayabilirsiniz.

  • HTML Nedir? Ne İşe Yarar? Neden HTML?

    Web geliştirmeye başlamak isteyen herkesin duyacağı ilk terimlerden biri HTML‘dir. Peki, HTML nedir, ne işe yarar ve neden bu kadar önemlidir? Bu makalede, HTML’in temellerini keşfedecek ve web geliştirmedeki rolünü anlayacağız.

    HTML Nedir?

    HTML (HyperText Markup Language), web sayfalarının yapısını oluşturmak için kullanılan bir işaretleme dilidir. Web sayfalarındaki metinleri, görselleri, bağlantıları, başlıkları ve diğer öğeleri tanımlamak için HTML kullanılır. HTML, web tarayıcıları tarafından okunarak, kullanıcılara görsel olarak sunulur.

    Bir HTML belgesi, metin ve etiketlerden (tags) oluşur. Bu etiketler, sayfanın içeriğini tanımlar ve düzenler. Örneğin, başlıklar <h1>, paragraflar <p>, görseller <img> etiketleriyle belirtilir.

    HTML Ne İşe Yarar?

    HTML, web sayfalarını inşa etmenin temel yapı taşıdır. İşte HTML’in başlıca işlevleri:

    1. Sayfa Yapısı Oluşturma: HTML, web sayfasının iskeletini oluşturur. Sayfadaki başlıkları, paragrafları, listeleri ve diğer metin öğelerini düzenler.
    2. Bağlantılar ve Navigasyon: HTML, sayfalar arasında bağlantılar (linkler) kurmanıza olanak tanır. Bu sayede kullanıcılar, bir sayfadan diğerine geçebilir.
    3. Medya Yerleştirme: HTML, web sayfalarına görseller, videolar ve ses dosyaları eklemenizi sağlar.
    4. Formlar ve Veri Toplama: HTML ile kullanıcıdan veri toplamak için formlar oluşturabilirsiniz. Bu, giriş alanları, seçim kutuları, butonlar ve daha fazlasını içerir.

    Neden HTML?

    Web geliştirme sürecinin temel taşı olarak HTML’in neden bu kadar önemli olduğunu şu şekilde özetleyebiliriz:

    1. Web Sayfalarının Temel Yapısı: HTML, web sayfalarındaki tüm metin ve içerik öğelerinin yerleşim düzenini belirler. Diğer teknolojilerle (CSS, JavaScript) birlikte çalışarak sayfanın görsel ve işlevsel özelliklerini şekillendirir.
    2. SEO İçin Gereklidir: HTML, web sayfanızın arama motorları tarafından doğru şekilde taranabilmesi için gereklidir. Başlık etiketleri, meta açıklamalar ve diğer HTML öğeleri, SEO (Arama Motoru Optimizasyonu) açısından önemlidir.
    3. Kullanıcı Dostu: HTML öğrenmesi ve kullanması kolay bir dil olarak, yeni başlayanlar için mükemmel bir başlangıçtır. Web geliştirme dünyasına girmeye çalışan herkes, HTML’i öğrenerek adım atabilir.
    4. Evrensel ve Yaygın Kullanım: HTML, tüm modern web tarayıcıları tarafından desteklenir. Bu, HTML’in evrensel bir dil olduğu ve web üzerinde içerik paylaşmanın en güvenilir yolunu sunduğu anlamına gelir.

    Sonuç

    Web sayfalarını oluşturmanın ilk ve en önemli adımı HTML’dir. HTML olmadan bir web sayfası oluşturmak mümkün değildir. Başlangıç seviyesindeki bir geliştirici olarak HTML öğrenmek, web geliştirme yolculuğunuzda sağlam bir temel atmanıza yardımcı olacaktır. HTML, basit bir dil olabilir ama web tasarımının temellerini atmak için vazgeçilmez bir araçtır.

    Eğer web geliştirme ile ilgileniyorsanız, HTML’i öğrenmek, bir web sayfası inşa etmek için ilk adımınızdır. İlerleyen zamanlarda CSS ve JavaScript ile daha interaktif ve şık web sayfaları yaratabilirsiniz. Ancak unutmayın, her şey HTML ile başlar!

  • Merhaba dünya!

    Web geliştirmeye adım atarken yapılacak ilk şeylerden biri, “Merhaba Dünya!” sayfasıdır.

    Blogumda aşağıdaki kod bloğu ve daha fazlasını yakın gelecekte bulabileceksiniz. 

    <?php

  print "Merhaba Dünya";

?>