Kutu Modeli CSS’de tüm HTML etiketleri veya elemanları genişliği ve yüksekliği olan bir kutu (box) olarak düşünülür. CSS Kutu modeli (BoxModel) bu mantıkla, HTML etiketinin etrafını saran katmanlar dizisi olup, içeriğin kendisi (content), dolgu (padding), kenarlıklar (border) ve kenar boşluklarından (margin) oluşur. Bir elementin toplam genişlik ve toplam yüksekliği, box model (kutu modeli) kavramındaki elemanların […]

CSS’de Genişlik ve Yükseklik CSS’de en çok kullanılan özellikler arasındadır genişlik ve yükseklik özellikleri. Web tasarımları genellikle bir tasarımcı tarafından photoshop gibi programlarda tasarlanır ve buna bağlı olarak html ve css kullanılarak büyük oranda aynısı elde edilir. Bu noktada bir web sayfasının genişlik değerine göre ölçme, biçme ve hesaplama gerekir. Bu noktada etiketlerin konumuna göre […]

Padding Türkçe anlamı malumunuz dolgu demektir. Padding özelliğinin mantığı için şunu düşünün, bir arsanız var ve ev yapacaksınız. Arsanızın bir kare olduğunu ve her bir kenarının 10 metre olduğunu düşünün. Bu arsanın alanı doğal olarak 100metre kare yapar. Bu arsaya bir ev yaptığınızda net daire alanı hiç bir zaman 100metre kare olamaz. Çünkü kullandığınız tuğla, […]

Margin (Kenar) Özellikleri Margin özelliği CSS’de seçilmiş bir elementin sınırının dışarı doğru mesafesini ifade eder. Daha başka bir tanımla HTML elementlerinin arasındaki dış mesafeyi belirlemek için kullanılan uzunluk ölçüleridir. Genellikle değerleri pixel (px) cinsinden belirtilir ve kullanılır. Yukarıdaki resmi incelediğimizde bir elementin içeriği lila renginde gösterilmiştir. Örneğin bu bir paragraf <p> etiketi olsun. Doğal olarak […]

Kenarlık (Border) Özellikleri Bu dersimizde HTML etiketleri üzerinde kenarlık özelliklerin nasıl atandığını, çeşitlerini ve kullanım şekillerinin anlatılarak öğrenilmesi hedeflenmektedir. Örnekte verilen index.html dosyası üzerine yine örnekleri verilen style.css dosyaları tanımlanarak kendi tarayıcınızda sonuçları gözlemleyebilirsiniz. Kenarlık Çeşitleri (border-style) HTML üzerinde elementlere bir çok çeşitte ve yöntemle border ataması yapabiliriz. Kullanılacak olan border çeşitlerini veya border stillerini […]

Iframe Temel HTML derslerimizin sonuncusunda <iframe></iframe> etiketini kullanmayı, hem iframe etiketi ile hemde video etiketlerini kullanarak sayfamızda video görüntülerin nasıl eklenebileceğini öğreneceğiz. iframe etiketi kendi html sayfamızın içinde bir başka sayfanın gösterilmesi için kullanılır. Daha iyi anlaşılması için şöyle bir örnek verirsek; bir hava durumu yayını yapan sayfayı kendi sayfanızın bir bölümünde gösterebilirsiniz. Bunun için […]

Resim (Image) Etiketi Kullanımı HTML ile web sayfalarımıza fotoğraf eklemek için image <img> etiketi kullanılır. <img> etiketi eklenecek resmin yolunu belirtmek için src özelliğini alır. Src özelliğine verilecek değer ya bir URL’e ait olabilir veya kendi hosting’inizin klasör yapısı içindeki bir resim dosyası olabilir. Ayrıca verilecek bir alt (alternatif text) özelliği ve alacağı string bir […]

Tablo İşlemleri Bu dersimizde basit HTML’de tablo işlemlerini gerçekleştireceğiz. Tablomuzu ve sınırlarını yaratmak için <table></table> etiketlerini kullanıyoruz. Tablomuz ile ilgili tüm işlemler bu etiketleri içinde gerçekleşecek. Tablomuzu oluşturmak için öncelikle ilk satırımızı oluşturacağız. Tablomuz içerisine satır açmak için <tr></tr> (table rows) etiketini kullanıyoruz. Her bir satır içindeki sütün işlemlerini bu satır açma etiketi içinde gerçekleştireceğiz. […]

Liste Etiketi / Lists Tag <li></li> etiketi ile basit listeleme yapar. Liste etiketi, içinde bulundukları sıralı listeler ve sıralı olmayan listelere göre önündeki şekil ve rakamlar değişiklik gösterebilecektir. Sıralı Listeler / Ordered List <ol></ol> etiketleri içine yazılan liste <li></li> etiketlerine 1.2.3.4 gibi sıra numaralı vererek yazılmasını sağlar. <ol> etiketine verilecek bir “type” özelliği ile bu […]

esencan.net’de ilk yazımız; herkese yararlı olması dileğiyle…! İlk dersimizde HTML’e giriş yapıyoruz. Tarayıcıların çalışma mantığı ve network nasıl çalışır bunu öğreniyoruz. Minik’te olsa bir network içindeki istemci ve sunucuların nasıl iletişim içinde olduğunu anlamak, kod yazmaya başlamadan önce yarar sağlayacağına inanıyorum. HTML yapımızı oluşturmak için öncelikle bize kolaylık sağlayacak editör bulma ile başlayalım. Biliyorsunuz ki […]