HTML’de Div Kullanarak Nasıl Tasarım Yapılır

HTML’de Div Kullanarak Nasıl Tasarım Yapılır

Web sayfalarına ’ler ekleyip onları şekillendireceğiz. sayfaların en büyük sorunu sayfaların çok sade olmasıydı. Bu sadelik resimler ve tablolarla zenginleştiriliyordu ancak bir çok tasarımcıya yeterli gelmiyordu. div desteği sayesinde sayfayı istediğiniz gibi şekillendirebiliyorsunuz. Şimdi bunu nasıl yapabileceğinize bir bakalım:

HTML Web sayfalarına div’ler ekleyip onları şekillendireceğiz. HTML sayfaların en büyük sorunu sayfaların çok sade olmasıydı. Bu sadelik resimler ve tablolarla zenginleştiriliyordu ancak bir çok tasarımcıya yeterli gelmiyordu. div desteği sayesinde HTML sayfayı istediğiniz gibi şekillendirebiliyorsunuz. Şimdi bunu nasıl yapabileceğinize bir bakalım:

Sayfamızda şekillendirilebilir bir “bölüm” yaratmak için, <div> etiketiyle başlayan ve </div> etiketiyle biten bir alan tanımlıyoruz. Bu iki etiketin arasına metni yazabilir, resim ve animasyon gibi içerikleri yerleştirebiliriz.

div’imizi şekillendirmek için <div> etiketinin içinde STYLE parametresini kullanabiliriz. <div> ifadesinden sonra STYLE parametresini yazdığımızda, Dreamweaver kullanılabilecek biçimlendirme seçeneklerini önümüze getiriyor.

div etiketinin içine ekleyeceğimiz STYLE=“background-color:#CCCCCC” parametresi, div’imizin gri bir arka plana sahip olmasını sağlayacak. Böylece div’in tasarımını yaparken ne kadar yer kapladığını rahatça görebileceğiz.

Sayfada gördüğümüz üzere div’imizin “Bölüm içeriği… Bölüm içeriği…” şeklinde bir içeriği ve gri arka planı bulunuyor. div etiketine yazdığımız STYLE parametresinin içeriğini değiştirdiğimizde belgeyi kaydedebilir ve değişikliği tarayıcıda görüntüleyebiliriz.

STYLE parametresine eklediğimiz WIDTH=“600px” ifadesi, div’imizin genişliğinin 600 pikselle sınırlandırılmasını sağlıyor. PADDING=“20px” ifadesiyse div’in içeriğinin tüm kenarlardan 20 piksellik boşlukla görüntülenmesini sağlıyor.

div etiketinin içindeki STYLE parametresine eklediğimiz tüm biçimlendirme bilgileri, tarayıcıda yukarıda gördüğünüz gibi bir sonuç veriyor. Artık div’imiz belirli bir boyuta, kenar boşluklarına ve metin rengine sahip.

Facebook'ta Paylaş Whatsapp'ta Paylaş
Facebook'ta Paylaş Whatsapp'ta Paylaş
Yorumlar

Yorumunuzu Yazın

E-posta adresiniz yayınlanmayacaktır.


Son Yorumlar

  • admin:merhaba büyük-küçük harf fark etmiyor....
  • Fatma Nagaş:E postam ilk harfi büyükmüydü küçükmüydü hatırlamı...
  • Emin:Format attığında geniden bad sectorlu disk kalır e...
  • Esma:Merhab gamzedursun3406@gmail.com adres kimin beni ...
  • Deniz:Facebook hesabımı yanlışlıkla sildim tekrar açmak ...
  • Ahmet:Bilgilerimi unutum nasıl geri alırım...
  • arzu:facebookta açtığım grup hesabımı ailevi nedenlerde...
  • Miro baba:Hesabımın açılmasını istiyorum...