HTML5, yıllardır kullandığımız HTML’in en güncel ve gelişmiş versiyonudur. Önyüze ve web sayfasının iskeletine müdahale ettiği için programlama dili yerine biçimlendirme dili olarak anılır. İlk olarak 2012 yılında yayınladığımız bu makale sürekli güncellenerek HTML5’in web tarafında zaman içerisinde bıraktığı izleri en iyi şekilde size yansıtıyor. Kahvenizi hazırlayın ve arkanıza yaslanın. HTML5’in dünyasına detaylı bir yolculuğa çıkıyoruz.
W3C
Css Liste Özellikleri
Merhaba arkadaşlar,
Bu paylaşımımda sizlere Css ile liste tanımlamayı ve liste özelliğini kullanarak yapabileceğiniz uygulamalardan bahsedeceğim.
İlk olarak konu hakkında genel bi bilgi vermek gerekirse,Css liste özelliği ilk zamanlarda konuları veya maddeleri listelemede kullanılıyordu fakat artık liste yapısı menu yapımında daha çok kullanılmakta.Yani güzel menüler tasarlamak için Css ve liste yapısını bilmek çok etkilidir.
Şimdi liste özelliklerine madde madde göz atalım ;
1 – List Style Type :
disc,circle,square,decimal,lower-roman,upper roman gibi farklı kullanım özellikleri bulunmaktadır,Bu özellikler list-style-image değeri none olduğunda kullanılan özelliklerdir.Listelerin başındaki simgeleri bu özellikleri kullanarak değiştirebilir,listelerin başında daire,çember,kare veya sayı değerleri şeklinde sıralayabilirsiniz.
Kullanımı aşağıdaki gibidir,İlk olarak Css tanımlamasını belirleyip sonra Html kısmını düzenliyoruz.
ul.a {list-style-type:circle;} // circle yazan kısma diğer parametleri koyarak deneme yapabilirsiniz. ///////////////////////////////////// <ul class="a"> <li>Adana</li> <li>İstanbul</li> <li>Zonguldak</li> </ul>
List-Style-Type | değer ; Diğer değerlerle listelendiğinde nasıl göründüğü önizlemek için buraya bakabilirsiniz.
2 – List-Style-Position :
Bu özellikle list-item işaretlerinin metinin içindenmi , dışındanmı olacağını belirleyebilirsiniz.Bu şekilde net anlaşılmasada buradaki örneğe bakara dediğimi daha iyi anlayabilirsiniz.
3 – List-Style-İmage :
Bence bu konuda bilmeniz gereken en önemli özellik budur,Çünkü yazımın başındada söylediğim gibi bu özellik sayesinde çok güzel menüler oluşturabilirsiniz.Ben bu yazımda bu bölümü direk eski paylaşımıma yönlendirmek istiyorum çünkü geçmiş zamanda bu konu hakkında ayrıntılı bir paylaşımda bulunmuştum.Ayrıntılı bilgi için buraya
Umarım faydalı bir paylaşım olmuştur,Kafanıza takılan veya merak ettiğiniz kısımları bana yorum bölümünden iletebilirsiniz.
Css Font Özellikleri
Merhaba arkadaşlar,
Uzun zamandır işlerimin yoğunluğundan dolayı yapamadığım paylaşımlarıma somut olarak işlemler yapabileceğiniz ve web sayfalarının en önemli kısımlarından biri olan font ve özellikleriyle devam edeceğim.Bu paylaşımda css ile fontları nasıl ve ne şekillerde değiştirebiliriz onu öğreneceğiz.
İlk olarak Css’de font için kullanabileceğiniz özellikler aşağıdaki gibidir,
i . Color
ii . Font Family
iii . Font Size
iv . Font Weight
v . Font Style
vi . Font Variant
vii . Font
Şimdi adım adım yukarıdaki değelerin nasıl uygulanacağına geçebiliriz.
1 – Color :
Bu özellik sayesinde web sayfalarında yazılarımıza istediğimiz rengi tanımlayabiliriz.Örnekle açıklayacak olursak aşağıdaki satırlar net bir uygulama olacaktır.
p.header { color:#FF0000;} // Bu şekilde header bölümünde yazılarımız kırmızı olarak yazacaktır.
2 – Font Family :
Metinlerde kullanacağımız font ailelerini belirlemek için kullanacağımız özelliktir,Kullanımı hakkında aşağıdaki örneğe bakabilirsiniz.
p{ color:#FF0000; font-family:"Times New Roman", Times, serif; } // Bu durumda yazdığımız yazılar kırmızı ve Times New Roman ailesiyle yazılacaktır.
3 – Font Size :
Bu özellik yazdığımız yazıların boyutlarını belirlemekte kullanacağımız özelliktir,Kullanımının farklı çeşitleri vardır,Bu farklı kullanımlar aşağıdaki örnekte (daha&helliip;)
Css Background (Arkaplan) Özellikleri
Merhaba arkadaşlar, bu makalemizi geliştirdik. İsterseniz yeni haline buradan erişebilirsiniz.
Css derslerimin bir diğer paylaşımında sizlere css background özelliği hakkında bilmeniz gereken kısımları ve bu özelliğin nasıl kullanıldığını örneklerle anlatacağım.Background’ın kullanım şekli ve özellikleri farklılık gösterdiğinden adım adım tüm özellikleri anlatmanın en doğru yol olacağını düşündüm ve anlatım sırası aşağıdaki gibi olacaktır.
i . Background-color
ii . Background-image
iii . Background-repeat
iv . Background-position
v . Background-attachment
Css ile background özelliklerine ilk madde olan background-color ile başlıyoruz.
background-color:
Bu özellik sayesinde belirlediğimiz elementlerimize arkaplan rengi atayabiliriz,örnek kullanım aşağıdaki gibidir.
body { background-color:#FF0000; } // Bu kod satırı sayfamızın arkaplan rengini kırmızı olarak belirleyecektir.
Burada renk seçimi farklı şekillerde (rgb,rgba) tanımlanabilir,bu renk seçimleri hakkında ayrıntılı bilgiye buradan ulaşabilirsiniz. (daha&helliip;)
Css Web Sayfalarına Nasıl Eklenir
Merhaba arkadaşlar,
Geçen hafta yaptığım paylaşımımda Css’e Başlamak ve Css’in yapısı adlı paylaşımımda Css’e giriş yapmıştık,bu hafta ise Css’i web sayfamıza nasıl ekleyeceğimizi anlattıktan sonra artık Css üzerine somut çalışmalar yapmaya başlayacağız.
Bu paylaşımı sakın göz ardı etmeyin,Çünkü bundan önceki hafta yaptığım css’in temel yapısı ve bugünkü paylaşımım css’i web sayfasına entegre adlı paylaşımlarım Css’in temelini oluşturmaktadır,Bu 2 anlatımı kavramadan css’in temelini kavrayamayız,Neyse konuyu fazla uzatmadan paylaşımıma geçiyim.
1 – Css’i Satır İçinde Tasarıma Eklemek
Css’i direk olarak kod satırlarımıza dahil edebiliriz fakat bu fazla tercih edilen bir yöntem değildir,fakat yinede bilmenizde fayda olucağını düşünüyorum.Bunun nasıl yapıldığını merak ederseniz aşağıdaki örnekten faydalabilirsiniz.
<p style="color:#FF0000; font-size:15px;">Buraya paragraf geliyor</p>
Css’e başlamak ve Css’in yapısı
Merhaba arkadaşlar,
Bundan önce yaptığım bu paylaşımda Css’e ufak bir giriş yapmıştım ve css’i adım adım öğreticeğimi söylemiştim.Bu rehber niteliğindeki paylaşım serime bugün itibariyle başlamış bulunmaktayım.Amacım adım adım css bilgilerini sizlere sunmak ve öğrenmek isteyenler için ayrıntılı ve örneklerle süslenmiş paylaşımlar yaparak faydalı olmak isteğimdir.
Bu yazımda css’in genel yapısı,bize sağladığı kolaylıklar ve kullanımı hakkında faydalı bilgiler verip,bundan sonraki paylaşımlar için bir bilgi birikimi , temel oluşturmak istiyorum.
* Css’e Başlamak
CSS ( Cascading Style Sheets ) : Bir web sitesinin içeriğini ve tasarımını ayırmak için geliştirilen bir sistemdir.
Html dilinde görsellerin özelleştirilmesi için geliştirilen taglarla birlikte büyük tasarımcılar için zorluk oranı çok arttı çünkü çok sayıda sayfanın bulunduğu bir websitesinde her sayfadaki başlığı aynı ölçüde düzenlemek için her sayfaya ayrı ayrı tag tanımlaması yapmamız gerekiyordu ve bu bize iş yükü ve zaman kaybı olarak geri dönüyordu ve bu sorunun çözümü için the World Wide Web Consortium (W3C) tarafından CSS geliştirildi ve kaybedilen zaman kazanılmakla beraber ,iş yükümüz neredeyse dibe çekilmiş oldu.
* Css’in Yapısı
Css’in genel yapısına göz attığımızda iki ana bölümden oluştuğunu görebiliriz.
Kaliteli Web Tasarımı İçin İpuçları
Merhaba arkadaşlar,
Bu paylaşımımda sizlere Web tasarımında kendinizi geliştirmeniz ve daha profesyonel tasarımlar oluşturabilmeniz için bazı ipuçları vereceğim.İlk olarak web tasarımının kolay bir iş olmadığını belirtmek isterim,Bu sizin %40 becerinize %50 yaratıcılığınıza %10’da diğer tasarımlardan etkilenmenizle alakalıdır.
Gerekli kodlama ve grafik bilgisine sahip olmanız size güzel tasarımlar için yeterli olmayacaktır,önemli olan kafanızda en iyi tasarımı canlandırıp bunu koda dökebilmektir.Benim bu yazımdaki amacım sizin yaratıcılık yüzdenizi bazı ipuçlarıyla yükseltmektir.
Bu konumda sizlere net bir kaynak oluşturmak için bu yazımı rehber niteliğinde paylaşıcağım,Aşşağıda başlık başlık güzel bir tasarıma ulaşmak için adımlar ve bilgilendirmeler belirtilmiştir. (daha&helliip;)