Çarşamba, 23 Mayıs 2018
HTML Div Etiketi Nasıl Kullanılır
Eğitim

HTML Div Etiketi Nasıl Kullanılır

Doruk Karaboncuk Doruk Karaboncuk
08 Aralık 2016

Html dilinde olmazsa olmazlardan bir tanesi div etiketidir. Div sayfanın her yerine yerleştirebileceğiniz bir bloktur.

İçine her türlü içerik girilebilir. Divin asıl amacı sayfayı belirli bloklara bölerek içerik girişlerinin daha rahat yapılması, arka planların daha rahat atanması, özelliklerin daha rahat kullanılmasıdır. Basit olarak div aşağıda yer alan özellikler ile birlikte kullanılır ve bunlar genellikle bir stil sayfasında tutulur. Gördüğünüz sinir bozucu sayfaların ortalarında çıkan reklamlar, uyarı kutucukları, yazıların birbirinden ayrılması, sayfa yapıları üst kısım orta kısım alt kısım olarak genellikle bunların hepsi div etiketleriyle oluşturulur.

Div ile kullanılabilecek özellikler;

  • id
  • class
  • position
  • float
  • top, left, right, bottom
  • width (35% veya 35px) yüzde veya tam ölçü verilebilir
  • height (35% veya 35px) yüzde veya tam ölçü verilebilir
  • z-index
  • padding (padding-top, padding-bottom, padding-left, padding-right)
  • margin (margin-top, margin-bottom, margin-left, margin-right)
  • border
  • background
  • text-align

id: Bu sizin divinize vericeğiniz benzersiz bir isim veya numara olabilir. Görünümü etkilemez ancak o div etiketinin nereye ait olduğunu ve stil dosyasında tanımlanmışsa özelliklerini rahat bulmanıza yarar.

Id Örnek

<div id="verdiginiz_id"> İçerik </div>

class: Class özelliği stil dosyanızda belirlediğiniz özellikleri div etiketinize aktarmanıza yarar.

Class Örneği

<div class="stil_sayfanizdaki_class"> İçerik </div>

position: Blok parçanızın nasıl durucağını belirtir.

Nası kullanılacağına bakalım

Static: Hiç bir değer girmezseniz div etiketi "static" özelliğini kendi atar ve blok parçanız bir bütün olarak durup, pozisyonu belli olmadığını ve varsayılan değerde gözüküceğini belirtir. Static özelliğini daha önce belirttiğiniz bir stili boşaltmanız için kullanabilirsiniz. Genellikle kullanılmaz ve birden çok div etiketi kullandığınızda başka bir değer atamadığınızda bloklarınız alt alta sıralanır.

Static Kullanımına Örnek

<div style="position:static;"> İçerik </div>

Relative: Relative özelliğini seçerseniz top, bottom, left veya right seçeneklerini kullanabilirsiniz. Blok düzenini gözüktüğü pozisyondan sağa sola yukarıya veya aşağıya kaydırmanıza yarar.

Relative kullanımına örnek

<div style="position:relative"> İçerik </div>

Absolute: Absolute özelliğini seçtiğinizde blok parçanız sayfaya göre ayarlanır ve relative gibi top, bottom, left veya right özelliklerini alır. İç içe geçmiş bazı divler dışında sayfanızda sabit tutmak istediğiniz parçalar için kullanır. Bir sonraki özellikte başka bir div'in içerisinde nasıl sabit tutulucağını görüceksiniz.

Absolute kullanımına örnek

<div style="position:absolute; left:10px; right:10px; top:10px; bottom:10px;"> İçerik </div>

Relative + Absolute: Bir blok parçasının içerisinde sabit yeri değişmeyen başka bir blok parçası yaratmak istediğimizde dıştaki blok relative özelliğini alır ve içerideki blok absolute özelliğini alır. Daha sonra absolute özelliğinin aldığı top, bottom, left veya right özellikleri dıştaki blok parçasına göre hizalanır.

Relative + Absolute kullanımına örnek

<div style="position:relative;">
    <div style="position:absolute; left:10px; top:5px;"> İçerik </div>
</div>

Fixed: Fixed özelliği gözümüzün gördüğü yeri baz alarak hizalama yapar. Sayfayı aşağıya yukarıya oynatmanız blok parçasının yerini değiştirmez. Yukarıda bahsettiğim sinir bozucu reklamlar gibi siz sayfada aşağı veya yukarı gitseniz de onun yeri gözümüzün gördüğü kısma yerleştirilmiş olduğu için sabit kalacaktır. Bir web sitesine imza atmak istediğinizde, ortada reklam çıkartmak istediğinizde, facebook'un eski chat özelliği gibi sürekli aşağıda gözükür biçimde bloklar oluştrmak için kullanabilirsiniz.

Fixed kullanımına örnek

<div style="position:fixed; left:10px; top:50%;"> İçerik </div>

Position özelliklerini tamamladıktan sonra işinize yarayacak tag özelliklerine geldi sıra

float: Bazen ölçülerin hepsini tam giremeyiz özellikle dinamik dökümanlarda yükseklik sürekli değişebileceğinden dolayı position özelliğini kullanmak sitede sorunlara yol açabilir. Bloklarımızı birbirine dayamaya yarayan float özelliğini kullanabiliriz. Float özelliği left ve right olarak iki özellik ile kullanılabilir. Bloklarınızı mümkün olduğu kadar sağa veya sola dayamanıza yarar.

Float kullanımına örnek

<div style="float:left;"> İçerik </div>

top: Absolute ve relative ile kullanılır. Yüzde veya piksel olarak kullanılabilir. Üst kısımdan uzaklığı belirlemek için kullanılır.

bottom: Absolute ve relative ile kullanılır. Yüzde veya piksel olarak kullanılabilir. Alt kısımdan uzaklığı belirlemek için kullanılır.

right: Absolute ve relative ile kullanılır. Yüzde veya piksel olarak kullanılabilir. Sağ kısımdan uzaklığı belirlemek için kullanılır.

left: Absolute ve relative ile kullanılır. Yüzde veya piksel olarak kullanılabilir. Sol kısımdan uzaklığı belirlemek için kullanılır.

width: Blok parçanızın genişliğini belirtir. Yüzde veya piksel olarak kullanılabilir.

Width kullamına örnek

<div style="width:450px;"> İçerik </div>
veya 
<div style="width:50%;"> İçerik </div>

height: Blok parçanızın yüksekliğini belirtir. Yüzde veya piksel olarak kullanılabilir.

Height kullanımına örnek

<div style="height:450px;"> İçerik </div>
veya 
<div style="height:50%;"> İçerik </div>

z-index: Üst üste gelen bloklarınız varsa bunların sırasını belirtir. En arkada kalmasını istediğiniz bloklar için genellikle -9999 değeri kullanılır. Apartman katları gibi düşünülebilir. Sayı büyüdükçe blok üst kata çıkar. Z-index'i 1 olan blok, Z-index'i 2 olan blok parçasının altında kalacaktır.

Z-index kullanımına örnek

<div style="z-index: -9999"> İçerik </div>
veya
<div style="z-index: 12"> İçerik</div>

padding: Blok parçanızın içindeki içeriğin blok kenarlarına olan uzaklığını ayarlamak için kullanılır. Padding'i tek seferde padding: 10px 20px 30px 40px; olarak (10px  üst kısım, 20px sağ kısım, 30px alt kısım ve 40px sol kısım) veya padding-left, padding-right, padding-top ve padding-bottom diye ayrı ayrı değerler girerek kullanabilirsiniz.

Padding kullanımına örnek

<div style="padding; 0 10px 15px 20%;"> İçerik </div>
veya ayrı ayrı olarak
<div style="padding-top:10px;"> İçerik </div>

Eğer üst alt sağ ve sol taraftan aynı boşluk olmasını isterseniz 4 kez değer girmenize gerek yoktur aşağıdaki gibi kullanabilirsiniz.

Padding kullanımına örnek - 2

<div style="padding:10px;"> İçerik </div>

margin: Blok parçanızın etrafındaki boşlukları ayarlamak için kullanılır. Margin'i tek seferde margin: 10px 20px 30px 40px; olarak (10px  üst kısım, 20px sağ kısım, 30px alt kısım ve 40px sol kısım) veya margin-left, margin-right, margin-top ve margin-bottom diye ayrı ayrı değerler girerek kullanabilirsiniz.

Margin kullanımına örnek

<div style="margin; 0 10px 15px 20%;"> İçerik </div>
veya ayrı ayrı olarak
<div style="margin-top:10px;"> İçerik </div>

Eğer üst alt sağ ve sol taraftan aynı boşluk olmasını isterseniz 4 kez değer girmenize gerek yoktur aşağıdaki gibi kullanabilirsiniz.

Margin kullanımına örnek - 2

<div style="margin: 10px;"> İçerik </div>

border: Blok parçanıza çerçeve eklemek için kullanılır. Çerçevenin kalınlığını, tipini ve rengini ayarlayabilirsiniz. Önce gelen 1px gibi değer borderın kalınlığını, ardından gelen solid, dotted gibi özellik şeklini ve son gelen özellik ise rengini belirler.

Border kullanımına örnek

<div style="border:1px solid #161616;"> İçerik </div>

Çerçevelerinin noktalı olmasını isterseniz

Border kullanımına örnek - 2

<div style="border:1px dotted #000;"> İçerik </div>

background: Blok parçanızın arka planını ayarlamak için kullanılır. Arka plana rengini ayarlayabilir veya bir resim yerleştirip resimin yerini ayarlayabilirsiniz. Aynı zamanda koyduğunuz resmin tekrar etmesini veya bittiği yerde hangi arka plan renginin ayarlanmasını istediğinizide belirtebilirsiniz.

Degrade bir çizgi yaptınız ve bunun sağa doğru devam etmesini istiyorsunuz. Aşağıdaki repeat-x komutunu ekleyerek arka planıın sadece x ekseni boyunca devam etmesini sağlayabilirsiniz.

Background kullanımına örnek

<div style="background:url(adres.jpg) repeat-x;"> İçerik </div>

Arka planın devam etmesini istemiyorsanız eğer aşağıdaki kodu kullanın

Background kullanımına örnek - 2

<div style="background:url(adres.jpg) no-repeat;"> İçerik </div>

text-align: Blok parçanız içindeki içeriğin nasıl hizalanması gerektiğini ayarlamanız için kullanılır. Center, left ve right özelliklerini alabilir.

<div style="text-align:center;"> İçerik </div>

Güncelleme

Bu yazıya ilave olarak 2 ayrı özellik daha anlatmak istiyorum. Bunlardan biri box-shadow ve diğeri border-radius. Box-shadow divinize gölgelendirme yapmanıza olanak sağlar. Border-radius ise divinizin kenarlarını yuvarlar, ovalleştirir.

box-shadow: Box-shadow kullanımı hemen hemen border kullanımına benzer ve aşağıdaki şekilde kullanılır.

İlk 0px sağ ve sol ayarıdır. Artırdıkça gölge sağa, eksilttikçe gölge sola doğru gider. Eksi değerler alabilir.

İkinci 0px üst ve alt ayarıdır. Aynı şekilde artırdıkça aşağı, eksilttikçe yukarı doğru gider. Eksi değerler alabilir.

Üçüncü 0px ise gölgenin dağılışıdır. Ne kadar dağılacağını ayarlayabilirsiniz. 0px çok keskindir, artırdıkça keskinlik azalır.

En son bölüm ise renk bölümüdür. 

Box-shadow kullanımına örnek

<div style="box-shadow: 0px 0px 5px #ccc;"> İçerik </div>

Border-radius kullanımına örnek

<!-- Örnekte border yoktur, eklemeyi unutmayın -->
<div style="border-radius: 5px;"> İçerik </div>

<!-- Sağ üst köşe yuvarlama -->
<div style="border-top-right-radius: 5px;"> İçerik </div>

<!-- Sol üst köşe yuvarlama -->
<div style="border-top-left-radius: 5px;"> İçerik </div>

<!-- Sağ alt köşe yuvarlama -->
<div style="border-bottom-right-radius: 5px;"> İçerik </div>

<!-- Sol alt köşe yuvarlama -->
<div style="border-bottom-left-radius: 5px;"> İçerik </div>

Blok parçanızda scroll istiyorsanız aşağıdaki özelliği ekleyebilirsiniz

Scroll kullanımına örnek

<div style="overflow:auto;"> İçerik </div>

Yorumlar

Yorumlar çok hoşuma gidiyordu her zaman. Wordpress'teki yavaşlık sorunu yüzünden kendi yazdığım sisteme geçmek zorunda kaldım. Aslında iyi de oldu. Tek kötü yanı yorumların gitmiş olması ama ben aşağıda tekrar yorumları paylaşıyorum. 

sevgim - Teşekkürler, çok faydalı olmuş..

hakan - gerçekten çok faydalı oldu. iyi çalışmalar

N.genç - Teşekkürler, en sade, yalın anlatım bu olmuş. Çok işime yaradı.

webtasarım - Çok yararlı bir örnek vermişsiniz tşk ederiz

sümeyye - HTML öğrenmeye yeni başladım ve HTML Düzeni konusunda fazlasıyla yardımcı oldunuz teşekkür ediyorum. İyi çalışmalar.

Utku Metin - Cok tessekkurler harrika calisma ama ben hala sayfa olusturamiyorum iletisime gecerseniz cok sevinirim.. Daha once wysiwyg kullaniyordum hrml daha zormus

Ömer - Div in arka planinin biraz koyu saydam olmasi için napmak lazim. Şimdiden teşekkür

Extra Yazılım - Paylaşım için teşekkürler.

mert - div ile santranc tahtası nasıl yapılır  html kodları nelerdir

jpmro - çok süper olm

Serkan - teşekkürler

Coşkun - Teşekkürler, yalın bir anlatım olmuş. Çok işime yaradı, yeni başlayanlar için de çok iyi...

Caviz - Teşekkurler dersimde yardımcı oldu

lcwaikiki - Teşekkürler, yalın bir anlatım olmuş. Çok işime yaradı, yeni başlayanlar için de çok iyi…

yazar4002 - teşekkürler çok faydalı, ve sade, bilgi dolu bir içerik, tebrikler.

web tasarım firması - Bir hayli zamandır araştırdığım bilgiydi çok teşekkür ederim

Emoji ile Tepki Ver

24
3
7
3
3
3

Yorumlar

Registration Login
Sign in with social account
or
Lost your Password?
Registration Login
Sign in with social account
or
A password will be send on your post
Registration Login
Registration