Css Boyutlandırması size elementin yüksekliğini ve genişliğini kontrol etmenize olanak tanır.Sizin denemeniz için örneklerElementin Yüksekliği Bu örnek yüksekliğin ayarlanışını göstermektedir.Yüzdelik kullanarak bir imajın yüksekliğini ayarlama Bu örnek yüksekliğin yüzdelikle ayarlanışını göstermektedir.Pixel kullanarak bir elementin genişliğini ayarlama Bu örnek element için piksel kullanımı ile genişlik ayarlamasını göstermekte.Bir elementin maksimum...
Bu derslerin çoğu bir çeviridir w3schools.com’dan ve kendi tecrübelerimi de içerir. Örneklerin çoğunu kendiniz uygulayabildiğiniz gibi daha önce açıkladığım şekilde, w3schools.com’a ait örneklerde verdiğim online editör’den de yararlanabilirsiniz. Yararlı olması dileğiyle…
Tüm HTML elemanları kutu olarak düşünülebilir. CSS’te, “box model”(kutu modeli) terimi tasarım ve düzen hakkında konuşulduğunda kullanılır.
CSS box model HTML elementlerini saran bir kutu aslında ve margin’e(dış boşluk), border’a(kenar/çerçeve), padding’e(iç boşluk, içeriğin uzaklığı)ve asıl içeriğe(content) dayanır.
Box model elementlerin etrafına sınır çekmemize izin verir ve ilgili elementlere yakın konumlarına boşluklar koymamızı sağlar.
Alttaki resim kutu modelini anlatmaktadır:
Farklı bölümlerin açıklaması:
Tüm tarayıcılarda doğru bir şekilde gözükmesini sağlayabilmeniz için box model’in nasıl işlediğini bilmeniz gerekmektedir.
Önemli:Css ile bir elementin genişlik ve yükseklik değerlerini belirttiğinizde sadece içeriğin yer alacağı alanın genişlik ve yüksekliğini belirtmiş oluyorsunuz. Bir elementin tam kapladığı alanı bilebilmek için padding, border ve margin değerlerini de eklemelisiniz.
Aşağıdaki örmekte bir elementin toplam genişliği 300px’dir:
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
Şimdi ölçelim:
250px (width yani genişlik)
+ 20px (sol ve sağ padding yani iç boşluk)
+ 10px (sol ve sağ çerçeve yani border)
+ 20px (sol ve sağ margin yani dış boşluk)
= 300px toplamda
Form attributes yani;
Yeni form özellikleri;
Yeni input özellikleri;
Tarayıcı desteği;
| Attribute | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| autocomplete | 8.0 | 3.5 | 9.5 | 3.0 | 4.0 |
| autofocus | Hayır | 4.0 | 10.0 | 3.0 | 4.0 |
| form | Hayır | 4.0 | 9.5 | 10.0 | Hayır |
| form overrides | Hayır | 4.0 | 10.5 | 10.0 | Hayır |
| height and width | 8.0 | 3.5 | 9.5 | 3.0 | 4.0 |
| list | Hayır | 4.0 | 9.5 | Hayır | Hayır |
| min, max and step | Hayır | Hayır | 9.5 | 3.0 | Hayır |
| multiple | Hayır | 3.5 | 11.0 | 3.0 | 4.0 |
| novalidate | Hayır | 4.0 | 11.0 | 10.0 | Hayır |
| pattern | Hayır | 4.0 | 9.5 | 3.0 | Hayır |
| placeholder | Hayır | 4.0 | 11.0 | 3.0 | 3.0 |
| required | Hayır | 4.0 | 9.5 | 3.0 | Hayır |
Form ya da giriş alanının(input field) autocomplete ile otomatik tamamlama özelliğine sahip olmasını sağlar.
Not; Form etiketi ile çalışır autocomplete. Ayrıca; input->text, search, url, telephone, email, password, datepickersi range ve color ile de kullanılır.
Bu özelliğe sahip olan bir alanda yazmaya başlayan kullanıcı, tarayıcı alandaki verileri doldurabilecek şeylere dair ayarları göstermeye başlayacaktır.
Örnek ve deneme adresi için;
<form action="demo_form.asp" method="get" autocomplete="on"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> E-mail: <input type="email" name="email" autocomplete="off" /><br /> <input type="submit" /> </form>
Not; bazı tarayıcılarda aktif etmeniz gerekebilir bu özelliği.
HTML ile kendi web sayfalarınızı oluşturabilirsiniz. W3Schools.com ‘dan yapacağım bu çeviriler ile HTML’yi kolaylıkla öğrenebileceksiniz. HTML’nin öğrenmesi kolaydır ve zevkli bulacaksınız bu dili.
Başlangıç olarak bilgi; çevirileri(başlıklar hariç) çift tırnak içinde göstereceğim. Kendi yazdıklarım normal yazı olarak kalacak. Anlatacaklarımı uygulayabilmeniz için ilk önce denetim masasından klasör seçeneklerini bulmanız ve klasör uzantılarını göster halini seçmelisiniz. Ardından istediğiniz bir alanda(mesela masaüstünde) bir klasör açın web ismini verin. Klasörün içine girin(fare ile çift tık). Fare ile sağ tuş tıklayın ve metin belgesi(yeni metin.txt diye yazar) dosyasını oluşturun. Biz bu yeni metin.txt dosyası ile HTML dosyalarımızı oluşturacağız. Yeni metin.txt dosyasını açın ve farklı kaydete tıklayın. Açılan pencerede isim kısmına index.html yazın ve kaydedin web klasörümüzün içine. index.html klasörüne çift tıklayın ve browser(chrome, firefox, opera, internet explorer gibi)’da görebilelim. Artık web klasörümüzün içinde yeni metin.txt ve index.html adlı iki dosya olacağını biliyorsunuz ve artık hazırsınız. Bunu hazırlayamadıysanız bile, örnekleri uygulayabilmeniz için W3Schools‘taki metin editörünü paylaşmış olacağım. Sol taraftaki verileri silip, etiketleri(anlatacağım) yazarsınız ve edit and click me yazan yere basarsınız sağ tarafta da web sayfasının durumunu görebilirsiniz böylece. Bu benim ilk çalışmam. Umarım hepimize yararlı olur. Anlaşılmayan yerleri yorum olarak yazabilirsiniz/sorabilirsiniz. Kolay gelsin.
HTML’de görüntüler <img> tagı ile tanımlanır.
<img> etiketi boştur yani özellik içerir sadece ve kapanış tagı yoktur.
Sayfada bir görüntü göstermek için görüntünün kaynağını src ile yani source ile göstermeniz gerekir. Göstermek istediğiniz resimin url değerini alır src çift tırnak içinde.
Misal;
<img src=”url” alt=”some_text“/>
url yerine nefarkederki.com/resimler/logo.gif, some text yerine de nefarkederk i logosu gibi bir yazı gelebilir. Ek olarak kapanışa dikkat etmelisiniz.
Url resimin depolandığı yeri gösterir. Genelde depolamamız bir resim klasöründe olur. Yukarıda URL’nin içindeki resimler yazan yere images, img gibi dosya isimleri de geldiği olur.
Tarayıcı belgenin neresinde img etiketi varsa orada görüntüler resimi.
Resim eğer gösterilmezse diye alt özelliği gireriz. Çünkü resim gözükmediğinde alt özelliğinin değeri gözükür. Yazar tarafından tanımlanır değeri.
<img src=”boat.gif” alt=”Big Boat” />
Burada şuna dikkat etmek gerek. Alt özelliğinin değeri, resime dair kesin bilgi veren 2 bilemediniz 3 kelimelik bir ifade olmalı. Ayrıca engellileri de düşünmelisiniz ki web sayfalarında ne olduklarını onlara da söyleyin bu sayede. Üstelik doğru olan ve w3C’nin istediği alt verilerinin girilmiş olmasıdır. Ayrıca kimi tarayıcılar sorunlar nedeniyle nesneleri gösteremeyebilir. Kısaca alt verisini girmek zorundayız.