HTML Div Etiketi - Kod Kampüsü

Trang chủ » Html Div Etiketi Nedir » HTML Div Etiketi - Kod Kampüsü

Có thể bạn quan tâm

HTML Div etiketi, html sayfası içinde bölüm oluşturmak için kullanılır. Div etiketi tek başına bir anlam ifade etmemektedir. Div etiketini CSS ile birleştirerek çeşitli özelleştirmeler yapılmaktadır. CSS hakkında temel bilgilere göz atmak için, CSS yazımızı okuyabilirsiniz.

Konu Başlıkları

Toggle
        • HTML Div Etiketi
  • Kod Kampüsü
    • Kod Kampüsü 1
    • Kod Kampüsü 2
  • Güncel Programlama Dilleri
  • Güncel Web Programlama Dilleri

HTML Div Etiketi

<div> ....... </div>
1<div> ....... </div>

Div etiketinin örnek kullanımına bir göz atalım.

<head> <style> div { /* Div etiketlerini çerçeve içerisine alarak bölümleri belirginleştirdik */ width: 300px; height: 300px; border: 2px solid black; text-align: center; } img { /* Eklediğimiz resimlerin boyut değerlerini değiştirdik */ width: 200px; height: 200px; } </style> </head> <body> <h1>Kod Kampüsü</h1> <div> <h2>Kod Kampüsü 1</h2> <img src="https://i.hizliresim.com/FyWik7.jpg"> </div> <br> <div> <h2>Kod Kampüsü 2</h2> <img src="https://i.hizliresim.com/j2XIM9.jpg"> </div> </body>
123456789101112131415161718192021222324252627<head> <style>div {/* Div etiketlerini çerçeve içerisine alarak bölümleri belirginleştirdik */width:300px;height:300px;border:2pxsolidblack;text-align:center; }img {/* Eklediğimiz resimlerin boyut değerlerini değiştirdik */width:200px;height:200px;}</style></head><body><h1>Kod Kampüsü</h1><div><h2>Kod Kampüsü 1</h2><img src="https://i.hizliresim.com/FyWik7.jpg"></div><br><div><h2>Kod Kampüsü 2</h2><img src="https://i.hizliresim.com/j2XIM9.jpg"></div></body>

HTML Div Etiketi Şimdi biraz daha ayrıntıya girerek, div içerisinde class tanımlaması yapalım ve bu div class bölümlerini ayrı ayrı özelleştirelim.

<head> <style> .programlama{ /* Div class sınıfı programlama olan bölümü özelleştiriyoruz */ color: red; border: 2px solid black; } .webprogramlama{ /* Div class sınıfı webprogramlama olan bölümü özelleştiriyoruz */ color: green; border: 2px solid black; } .programlama h1{ /* Programlama sınıfına dahil olan h1 başlığını özelleştiriyoruz */ color: blue; } .webprogramlama h1{ /* webprogramlama sınıfına dahil olan h1 başlığını özelleştiriyoruz */ color: orange; } </style> </head> <body> <div class="programlama"> <!--class sınıfı programlama olan bir div bölümü oluşturuyoruz--> <h1>Güncel Programlama Dilleri</h1> <p>C#</p> <p>Java</p> <p>C++</p> </div> <br> <div class="webprogramlama"> <!--class sınıfı webprogramlamaolan bir div bölümü oluşturuyoruz--> <h1>Güncel Web Programlama Dilleri</h1> <p>HTML</p> <p>CSS</p> <p>JavaScript</p> </div> </body>
123456789101112131415161718192021222324252627282930313233<head> <style>.programlama{/* Div class sınıfı programlama olan bölümü özelleştiriyoruz */color:red;border:2pxsolidblack;}.webprogramlama{/* Div class sınıfı webprogramlama olan bölümü özelleştiriyoruz */color:green;border:2pxsolidblack;}.programlama h1{/* Programlama sınıfına dahil olan h1 başlığını özelleştiriyoruz */color:blue;}.webprogramlama h1{/* webprogramlama sınıfına dahil olan h1 başlığını özelleştiriyoruz */color:orange;}</style></head><body><div class="programlama"><!--class sınıfı programlama olan bir div bölümü oluşturuyoruz--><h1>Güncel Programlama Dilleri</h1><p>C#</p><p>Java</p><p>C++</p></div><br><div class="webprogramlama"><!--class sınıfı webprogramlamaolan bir div bölümü oluşturuyoruz--><h1>Güncel Web Programlama Dilleri</h1><p>HTML</p><p>CSS</p><p>JavaScript</p></div></body>

HTML Div Etiketi

Post Views: 1.950

Từ khóa » Html Div Etiketi Nedir