HTML ile web sayfalarını oluşturmaya başlar başlamaz, boyutlandırma ile çalışmaya başlayacaksınız. Sitenizin görünmesini istediğiniz şekilde görünmesini sağlamak için, sizin veya başka bir tasarımcının bir tasarımla eşleşmesi olasıdır. Bu sayfadaki metnin büyüklüğünü ve sayfadaki diğer öğeleri de değiştirmek isteyeceksiniz. Bunu yapmak için bir HTML "boyut" etiketi aramaya başlayabilirsiniz, ancak hızlı bir şekilde eksik olduğunu göreceksiniz.
HTML boyut etiketi HTML'de mevcut değil. Bunun yerine, yazı tiplerinin, resimlerinizin veya düzeninizin boyutunu ayarlamak için Basamaklı Stil Sayfaları kullanmalısınız. Aslında, bir sitenin metni veya başka bir öğe için yapmanız gereken herhangi bir görsel değişiklik CSS tarafından ele alınmalıdır! HTML sadece yapı içindir.
Bir HTML boyut etiketine en yakın etiket, aslında bir boyut özelliği içeren eski font etiketidir. Bu etiketin mevcut HTML sürümlerinde kullanımdan kaldırıldığı konusunda uyarılırsınız ve gelecekte tarayıcılar tarafından desteklenmeyebilir! HTML'nizde font etiketini kullanmak istemezsiniz! Bunun yerine, HTML öğelerinizi boyutlandırmak ve web sayfanızı buna göre şekillendirmek için CSS'yi öğrenmelisiniz.
Yazı Tipi Boyutları
Yazı tipleri tartışmasız CSS ile boyutlandırmak için en kolay şeydir. Moreso sadece bu metni boyutlandırmaktan çok, CSS ile web sitenizin tipografisi hakkında daha spesifik olabilirsiniz. Yazı tipi boyutunu, rengi, kasası, ağırlığı, lideri ve daha fazlasını tanımlayabilirsiniz. Yazı tipi etiketiyle, yalnızca boyutu ve daha sonra yalnızca tarayıcının varsayılan yazı tipi boyutuna göre her müşteri için farklı bir sayı tanımlayabilirsiniz.
Paragrafınızı 12pt yazı tipine sahip olacak şekilde ayarlamak için yazı tipi stili stil özelliğini kullanın:
h3 {font-size = 24px; }Bu stil, headiing3 öğelerinin 24 pikselinin font boyutunu ayarlar. Bunu harici bir stil sayfasına ekleyebilir ve sitenizin tüm H3'leri bu stili kullanır.
Metninize ek tipografik stiller eklemek isterseniz, bunları bu CSS kuralına ekleyebilirsiniz:
h3 {font-size: 24px; renk: # 000; yazı-ağırlık: normal; }Bu sadece H3s için yazı tipi boyutunu ayarlamakla kalmaz, aynı zamanda rengi siyaha (ki bu da # 000'nin hex kodu anlamına gelir) ayarlar ve ağırlığı "normal" olarak ayarlar. Varsayılan olarak, tarayıcılar 1-6 arasındaki başlıkları kalın metin olarak gösterir, bu nedenle bu stil metni varsayılan olarak geçersiz kılar ve metnin "kesin olmayanını" geçersiz kılar.
Görüntü boyutları
Görüntüyü yeniden boyutlandırmak için görüntüleri gerçekten kullanabileceğiniz için resimler tanımlamak zor olabilir. Tabii ki, tarayıcı ile görüntüleri yeniden boyutlandırmak kötü bir fikir çünkü sayfaların daha yavaş yüklenmesine neden oluyor ve tarayıcılar genellikle yeniden boyutlandırmanın kötü bir işini yapıyor ve görüntüleri kötü gösteriyor. Bunun yerine, görüntüleri yeniden boyutlandırmak için grafik yazılımını kullanmalı ve gerçek boyutlarını Web sayfanızın HTML'sine yazmalısınız.
Yazı tiplerinden farklı olarak, resimler boyutu tanımlamak için HTML veya CSS kullanabilir. Görüntünün genişliğini ve yüksekliğini tanımlarsınız. HTML kullandığınızda, yalnızca görüntü boyutunu piksel cinsinden tanımlayabilirsiniz. CSS kullanıyorsanız, inç, santimetre ve yüzde gibi diğer ölçümleri kullanabilirsiniz. Bu son değer, yüzdeler, duyarlı bir web sitesinde olduğu gibi, görüntülerin akışkan olması gerektiğinde çok kullanışlıdır.
HTML ile görüntü boyutunuzu tanımlamak için img etiketinin yükseklik ve genişlik özelliklerini kullanın. Örneğin, bu resim 400x400 piksel kare olur:
height = "400" width = "400" alt = "image" />CSS kullanarak görüntü boyutunuzu tanımlamak için yükseklik ve genişlik stil özelliklerini kullanın. Boyutları tanımlamak için CSS'yi kullanarak aynı resim:
style = "yükseklik: 400 piksel; genişlik: 400 piksel" alt = "resim" />Düzen Boyutları
Bir düzende tanımladığınız en yaygın boyut genişliğidir ve karar vermeniz gereken ilk şey sabit genişlikli bir düzen mi yoksa uyumlu bir web sitesi mi kullanacağınızdır. Diğer bir deyişle, genişliği, piksel, inç veya noktaların tam sayısı olarak mı tanımlayacaksınız? Yoksa mizanpaj genişliğini ems veya yüzdelikler kullanarak esnek olacak şekilde mi ayarlayacaksınız? Yerleşiminizin boyutunu tanımlamak için, bir görüntüde yaptığınız gibi genişlik ve yükseklik CSS özelliklerini kullanırsınız.
Sabit genişlik:
style = "width: 600px;">Sıvı genişliği:
tarzı = "genişliği: 80%;">Düzeninizin genişliklerine karar verirken, okuyucularınızın kullanabileceği farklı tarayıcı genişliklerini ve aynı zamanda kullanacakları farklı cihazları da göz önünde bulundurmalısınız. Farklı cihazlara ve ekran boyutlarına göre yerleşimlerini ve boyutlarını değiştirebilen duyarlı web sitelerinin günümüzde en iyi uygulama standardı olması bu nedenle.