Merhaba arkadaşlar, bu gece html & css derslerine başladım ve ciddi bir ilerleme kaydediyorum. Bu konumda sizlere renklerden ve divden bahsedeceğim.
Bir site hazırlayacağız. HTML - head - body - méta - css gibi kısımlarının temelini attık. Şimdi ben sitemde kutucuk içerisinde "Burak Walker" yazmasını istiyorum. Bunun için öncelikle body alanına bir <div> kodu ekliyorum ve yazımı belirtiyorum. Örnek:
<div>
Burak Walker
</div>
Gördüğünüz gibi, boş bir sayfada sade bir belirttiğim yazı çıktı. Şimdi bu yazıyı şekillendirmek için css dosyamıza geçelim. Öncelikle biz "div" e şekil vereceğimiz için div kodumuzu yazıyoruz.
div {
}
Bu şekilde yazdıktan sonra {} bu parantezin arasına yani boşluk olan satıra geliyoruz. Öncelikle kutucuğumuzun enini ve boyunu veriyoruz.
Şimdi ise kutucuğumuzun rengini seçiyoruz. Yani background color.
Ben kırmızıyı sevdiğim için, kırmızıyı seçiyorum. Bu renk kodlarını çoğaltabiliriz. "HTML RENK KODLARI" diye google ye arama yaparak html kodlarına bakabilirsiniz. Ayrıca RGB De kullanabilirsiniz. Rgb kullanımı:
Gibidir. RGB values yazarak da 2. siteden w3schools sitesinden kendi renginizi belirleyebilirsiniz.
Evet şimdi ise kutucuğumuzdaki yazının rengini belirliyoruz. Ben beyaz yapacağım.
Bunun için yazacağımız kod ise
Şimdi padding kodu ile kutucuğumu büyüteceğim.
ben genelde böyle kullanırım 
)
Şimdi ise kutucuğumdaki "Walker" kısmının altını çizeceğim. Bunun için index.html dosyamıza geçiyoruz. Yazdığımız kelimeler ben Burak Walker yazmıştım. Bu "Walker" kısmının altını çizeceğim için, span kodu ekliyorum. Yani:
Bu şekilde oluyor. Şimdi yine css dosyamıza geçiyoruz. Aynı şekilde:
span {
}
yapıyoruz. Boşluk olan kısıma yazacağımız şey:
Burada, "Walker" yani span kısmının altının çizileceğini belirttik. Ve sonuç:
Kutucuğumuz oluştu ve spanla belirteceğimiz kısımın altı çizildi. Aslında html sitenin iskeletini oluşturur. CSS ise o iskeleti giydirir. HTML İ bir insan olarak düşünün, temelini atınca çıplak kalır. CSS de onun süsleyicisidir. Css ile ona mont, pantolon, ayakkabı, t-shirt v.s. giydirebilirsiniz.
Bir site hazırlayacağız. HTML - head - body - méta - css gibi kısımlarının temelini attık. Şimdi ben sitemde kutucuk içerisinde "Burak Walker" yazmasını istiyorum. Bunun için öncelikle body alanına bir <div> kodu ekliyorum ve yazımı belirtiyorum. Örnek:
<div>
Burak Walker
</div>
Kod:
<div>
Kod:
[FONT=Tahoma][SIZE=3][COLOR=SeaGreen]Burak Walker[/COLOR][/SIZE][/FONT][FONT=Tahoma][COLOR=SeaGreen]
[/COLOR][/FONT] [FONT=Tahoma][SIZE=3][COLOR=SeaGreen]
[/COLOR][/SIZE][/FONT][FONT=Tahoma]
[/FONT] [FONT=Tahoma][SIZE=3][COLOR=SeaGreen]</div>[/COLOR][/SIZE][/FONT]Gördüğünüz gibi, boş bir sayfada sade bir belirttiğim yazı çıktı. Şimdi bu yazıyı şekillendirmek için css dosyamıza geçelim. Öncelikle biz "div" e şekil vereceğimiz için div kodumuzu yazıyoruz.
div {
}
Kod:
div {[/COLOR][/FONT][FONT=Tahoma][COLOR=SeaGreen]
[/COLOR][/FONT] [FONT=Tahoma][COLOR=SeaGreen]}[/COLOR][/FONT][COLOR=seagreen]Bu şekilde yazdıktan sonra {} bu parantezin arasına yani boşluk olan satıra geliyoruz. Öncelikle kutucuğumuzun enini ve boyunu veriyoruz.
Kod:
witdh: 200px;
Kod:
[/FONT]height: 200px;Şimdi ise kutucuğumuzun rengini seçiyoruz. Yani background color.
Kod:
background-color: #ff5733Ben kırmızıyı sevdiğim için, kırmızıyı seçiyorum. Bu renk kodlarını çoğaltabiliriz. "HTML RENK KODLARI" diye google ye arama yaparak html kodlarına bakabilirsiniz. Ayrıca RGB De kullanabilirsiniz. Rgb kullanımı:
Kod:
background-color: rgb(100, 200, 210)Gibidir. RGB values yazarak da 2. siteden w3schools sitesinden kendi renginizi belirleyebilirsiniz.
Evet şimdi ise kutucuğumuzdaki yazının rengini belirliyoruz. Ben beyaz yapacağım.
Bunun için yazacağımız kod ise
Kod:
color: #ffffff;Şimdi padding kodu ile kutucuğumu büyüteceğim.
Kod:
padding: 100px 90px;Şimdi ise kutucuğumdaki "Walker" kısmının altını çizeceğim. Bunun için index.html dosyamıza geçiyoruz. Yazdığımız kelimeler ben Burak Walker yazmıştım. Bu "Walker" kısmının altını çizeceğim için, span kodu ekliyorum. Yani:
Kod:
Burak <span>Walker</span>Bu şekilde oluyor. Şimdi yine css dosyamıza geçiyoruz. Aynı şekilde:
span {
}
Kod:
span {[/COLOR][/SIZE][/FONT][FONT=Tahoma][COLOR=SeaGreen]
[/COLOR][SIZE=3][COLOR=SeaGreen]
[/COLOR][/SIZE][COLOR=SeaGreen]
[/COLOR][/FONT][FONT=Tahoma][SIZE=3][COLOR=SeaGreen]}[/COLOR][/SIZE][/FONT][FONT=Tahoma]
[/FONT][COLOR=SeaGreen]yapıyoruz. Boşluk olan kısıma yazacağımız şey:
Kod:
text-decoration: underline;Burada, "Walker" yani span kısmının altının çizileceğini belirttik. Ve sonuç:
Kutucuğumuz oluştu ve spanla belirteceğimiz kısımın altı çizildi. Aslında html sitenin iskeletini oluşturur. CSS ise o iskeleti giydirir. HTML İ bir insan olarak düşünün, temelini atınca çıplak kalır. CSS de onun süsleyicisidir. Css ile ona mont, pantolon, ayakkabı, t-shirt v.s. giydirebilirsiniz.
Son düzenleme:
