Adım Adım İlk HTML & CSS Denemem : Bağımlılık Ağaçları

Biraz HTML, biraz CSS ve ilk proje denemem.



Kodlama serüvenime nasıl başladığımı daha önceki yazılarımda anlatmıştım. Kendime bulduğum online kurs ve destekleriyle HTML ve CSS temellerini biraz çalışmayla ilerlettim. Öncesinde Wordpress temelli siteler yaptığım için az çok HTML kodlarına aşina olduğumu söyleyebilirim ama bugüne kadar hiç sıfırdan kurulum yapmadım. Daha doğrusu yapmamıştım. CSS bilgim ise yok denecek kadar az, ancak stylesheet üzerinde font büyüklüğünü vs düzenleyebilirdim. O yüzden HTML kısmı kolay ve çabuk geçerken CSS kısmında biraz daha didiklemem gerekti. Öğrendiğim bu temel düzeydeki bilgileri de ufak bir deneme yapayım dedim ve yukarıda bitmiş halini gördüğünüz “Bağımlılık Ağaçları” çıkardım. İlhamı nereden aldığım malum, yanıbaşımda duran kahve fincanından 😄 Hatırladığım kadarıyla adım adım size neler yaptığımı, nerelerde sıkıntı yaşadığımı da bu yazıda anlatacağım.

 

Projeye Başlamadan Önce Neler Öğrenmiştim?

Bahsettiğim online kurs üzerinden hangi başlıklara temel olarak giriş yaptığımı yazıyorum ki hangi bilgilerle bu sonucu alabildiğimi daha net görebilesiniz.

HTML

  • HTML temelleri
  • Ortak HTML kodları
  • Multimedya (Görsel, video, ses)
  • HTML form temelleri
  • Tablolar
  • CSS

CSS kurulumu

  • CSS temelleri ve syntax
  • Renkler, fontlar, çerçeveler
  • Class, ID ve Div
  • Box model

 

Proje Giriş : Önce İçerik Gelir

En azından bende öyle oluyor. Bir uygulama projesi yapayım da kendimi deneyeyim dedim ama ne yapacağımı bilmiyorum. Tek sayfalık, basit ama temel bilgilerimi deneyebileceğim bir şey olması lazım. Kahvemden bir yudum aldım, iyi dedim kahveyle ilgili bir şeyler olsun. Bir 10 dakika internette bakındıktan sonra kahve ağaçlarıyla ilgili yapmaya karar verdim. Ve sevgili programım Atom’u açarak önce sayfanın HTML temelini oluşturdum.

<!DOCTYPE html>
<html>
 <head>
 <title>Kahve Projesi</title>
 <meta charset=”utf-8" />
 </head>
<body>
</body>
</html>

Not : Yabancı kaynaklarda doğal olarak geçmiyor ama <meta charset=”utf-8" /> kod kısmı Türkçe sayfa yapmak için gerekli, aksi halde karakterlerin ağzı gözü kayıyor. Bunu da kodlara çalışırken “Türkçe karakterlere n’oluyo ya!” diye acı çekerken öğrendim.

HTML yapısının temelini hazırladıktan sonra içeriklerde yer alacak yazıları yazdım.

<html>
  <head>
    <title>Kahve Projesi</title>
    <meta charset="utf-8" />
  </head>

    <body>

      <h1>Bağımlılık Ağaçları</h1>
        <p>
        Her gün kokusuyla, tadıyla ve her birimizin hayatına dokunduğu farklı farklı etkileriyle kahve çoğumuz için vaz geçilmez bir tutku. Bu tutkuyu üreten ağaçları ve meyvelerini tanıyor musunuz?
        </p>

      <h2>Arabica</h2>
        <p>
          Yer seviyesinden 800 - 2000 metre yükseklikte yetişen bu kahve cinsi yılda 5kg meyve, bu meyveden ise 1kg kahve çekirdeği üretir. Diğer kahve ağaçlarına göre %1-2 oranıyla daha az kafein içerir ama aromatik ve lezzetlidir. Diğerlerine göre daha narin olan bu türün yetiştirilmesi de zor ve maliyetlidir.
        </p>

      <h2>Robusta</h2>
        <p>
          Çoğunlukla Vietnam'da yetiştirilen ve yer seviyesinden 600 metre yükseliğe kadar yetişebilen bu kahve ağacı, Arabica'ya göre daha dayanıklıdır. Yetişmesi de nispeten daha kolay olan meyve çekirdeklerinin kafein oranı %2-5 arasında değişir ancak aroması azdır. Daha asidik olması nedeniyle tadı acımtraktır.
        </p>

      <h2>Liberica</h2>
        <p>
          Malezya ve Batı Afrika'da yetişen bu kahve türü doğa koşullarına daha dayanıklı olmakla beraber ticari anlamda daha az değerlidir. Geniş yaprakları ve büyüklüğü nedeniyle yıllık verdiği meyve ve çekirdek oranının fazlalığına rağmen çok talep edilmemesinin nedeni kafein ve aromasının tatminkar olmamasıdır.
        </p>

    </body>
</html>

İçerikleri yazarken başlıkları ve paragrafları da baştan belirledim ki sonradan başıma bela olmasın.

 

Baştan Anlaşalım : Font Mühimdir

Ben biraz font konusunda huyluyum o yüzden sayfayı şekillendirmeye başlamadan önce gözüme savaş açmış da ateş ediyormuş gibi duran varsayılan fontu değiştirmekle işin kodlama kısmına başladım.

<html>
  <head>
    <title>Kahve Projesi</title>
    <meta charset="utf-8" />
    <link href="https://fonts.googleapis.com/css?family=Abel|Amatic+SC|Raleway:100,200,300,400,500,600,700,800,900"
    rel="stylesheet">
  </head>

	<style>

		body {
			font-family: Raleway;
		}
	</style>
...

</html>

İyi font, iyi motivasyon!

 

Layouta Karar Vermek

Kahveyle ilgili proje yapmaya karar verince ve elimde ne kullanacağıma dair bir iki ufak yazı da çıkınca az çok sayfa kafamda şekillenmeye başladı. Bunu da ilk yazımda bahsettiğim front-end’e yakın olma nedeniyle oldukça hızlı geçtim. Sade, sıcak ve görsele dayalı bir sayfa olsun dedim ve ona uygun bir görsel seçtim.

 

Helö Background! Güzel Görünür Müsün Rica Etsem?

Sayfada kullanacağım görseli HTML’de mi yerleştirsem CSS’de mi derken daha fazla seçeneğim olsun diye CSS’i tercih ettim. Sonra bir de ID mi Class mı olsun sorusu geldi. Aralarındaki farkları uygulamada çok görmediğim için ID olsun dedim ve #cover ID’sini tanımlayarak arkaplana yerleştirdim. Alta dayalı ortalanmış olması daha iyi olur diye düşünüp center bottom ve kendini tekrar edip durmasın diye de no-repeat komutlarını da vermeyi unutmadım. (Aman Allah’ım ne kadar da akıllıyım!?!)

<style>

	body {
		font-family: Raleway;
	}

  #cover {
    background: url("https://i.postimg.cc/d0580TyW/coffee.jpg")
    no-repeat center bottom;
  }

</style>

<body>
  <div class="cover">
  <h1>Bağımlılık Ağaçları</h1>
  ...

</body>

Pek iç açıcı görünmüyor tabii ki ama daha yolun başındayız. Bu kısımlar gene kolay. Görsel üzerinde değişiklik yapmaya devam ettim. Kapak fotoğrafı gibi tamamı görünsün diye cover komutunu kullandım ve aşağıdaki sonuca ulaştım.

#cover {
  background: url("https://i.postimg.cc/d0580TyW/coffee.jpg")
  no-repeat center bottom;
  background-size: cover;
}

Pek tabii ki gözlerim o aşağıdaki beyazlığa takıldı. O da nesi! İstemiyorum onu! Kendimce çakallık yapıp fixed komutunu verince düzelecek sandım, olmadı. Mecbur width ve height olayına girdim. Nedenini sonra anlatacağım bunları hiç sevmedim. Bu esnada görseli farklı boyutlarda denerken başta verdiğim center bottom ayarının benim görsele pek uymadığını fark edip center center olarak düzelttim. Ve tabii bir sinemacı olarak katmanlı hikayeleri ne kadar seviyorsam görsellerde de katman sevdiğim için paralax etkisi yaratması için fixed5. Böylece sayfaya bakanlar üstteki yazıları kaydırırken görsel aynı yerinde kalacak, güzel bir katman efekti olacak. Seviyorum!

#cover {
  background: url("https://i.postimg.cc/d0580TyW/coffee.jpg")
  no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  position: relative;
  top: 0px;
}

Ve tadaa! Şimdi oldu!

 

Her ne kadar fontların renklerini henüz düzenlememiş olsam da arkaplan fazla parlak geldi bana ve üzerine ufak koyu renk bir transparanlık atmak iyi olur diye düşündüm. O arada bir kaç deneme yaptım ama görselin ya üst ya alt yarısına verebildiğim transparanlığı bir türlü tamamına uygulayamadım. Arkadaş teoride her şey doğru, her şey iyi gidiyordu ne oldu şimdi yani? Hala ne olduğundan çok emin değilim ama çareyi epey kurcaladıktan ve biraz da Steven J. Selçuk'un başını ağrıttıktan sonra ID olarak belirlediğim cover kısmını DIV yapıp, görselin genel ayarlarıyla üstündeki efektin ayarlarını ayırmakta buldum. .class:after6 grubundaki o kadar satır kod bana hala gereksiz geliyor, kesin daha basit bir yolu var bir yerlerde ama ben şu an ona çok uzağım. Öğrenince yazarım artık.

.class {
  background: url("https://i.postimg.cc/d0580TyW/coffee.jpg")
  no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  position: relative;
  top: 0px;
}

.class:after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: '';
  background-color: rgba(34, 4, 0, 0.3);
}

İşlerin karışmaya başladığı nokta.

 

Artık Arkaplanı Geride Bırakabilir Miyiz Lütfen?

Diğer aşamalara göre biraz daha zaman alan background görselini düzenlemeyi tamamladım diye sevinip, kendimi çok daha rahat hissettiğim içerikleri düzenlemeye geldi sıra. Sonuçta içerik benim işim, yıllardır ustası oldum. Kafamda neyin nerede olacağını biliyorum, “tamamdır bu iş birazdan biter” modundayım, sonuçta 3–5 kelam cümle ne kadar zor olabilir ki değil mi? Belamı buldum! Şimdilik o kadar diyeyim, birazdan nispeten özet olan detayları okuyacaksınız ama gerçekten hayattan bezdirdi beni. Neden mi?

Kafamda görsel şu giriş başlığı ve altındaki yazı ortalanmış halde sayfada duracak altında 3 kolon halinde kahve ağaçlarının çeşitleriyle ilgili kısım olacak. Bu kadar basit bir düşünce. Bu kadar masum… E dedim o zaman ben şunları önce bi kullanacağım boyutlarına alayım. .cover-content adı altında yeni bir class açtım ve tek satırda 3 kolon olsun diye verdim %33'lük oranı.

.cover-content {
  width: 33%;
}

Hmmm… olmadı bu!

Pek tabii ben tüm içerikleri beraber sınıflandırınca ana başlık olarak düşündüğüm “Bağımlılık Ağaçları” kısmı da verdiğim şekilde boyutlandı. Neyse düzeltiriz onu sorun yok. Asıl sorun yazıların okunmamasıydı. Renklerini henüz düzenlememiştim, aklımda açık renkler var ama şöyle bir alıcı gözüyle bakınca arkaplanda kullandığım koyu katman da bu istediğim gibi sonuç vermeyecek belli ki deyip o kısmı komple deaktif ettim. Tabii o kadar satırı baştan yazmayayım ne olur ne olmaz diye direkt silmedim. Onun yerine her yazının altına görselin tonlarına yakın bir transparan arkaplan yapmaya karar verdim.

.cover-content {
  background-color: rgba(34, 4, 0, 0.7);
  width: 33%;
}

Yazıların renklerini de düzenleyince daha iyi gibi…

 

Böylesi daha iyi içlerini en son düzenlerim deyip yerleşimlerine odaklanayım dedim. Tabii bu arada .cover-content kısmını tüm içeriğe atadığım için üst başlık kısmı da hala kendini içerik sanmaya devam ediyor. Hem onu içerik kısmından çıkarıp hem de içerik yazılarını aynı satıra almam gerekti. Öğrendiğim kodları yerli yerine yazdım ama…

.cover-content {
  background-color: rgba(34, 4, 0, 0.7);
  display: inline-block;
  width: 33%;
  padding: 3px;
  margin: 15px;
}

… olmadı. Niye üçüncü içerik aşağıda? Ekran genişliğinden mi dedim ama öyle olsa bile ekran küçülse de aynı oranda küçülmesini istiyorum, aşağıya atmasını değil. Yani responsive olsun istiyorum. Tamam daha o konuya gelmemiş olabilirim ama böyle de olmaz ki. Sonra biraz mantıklı düşününce ben programa diyorum ki yazıları %33 olarak boyutlandır, yazılar arasında boşluk bırak. E toplayınca genişlik %100ü geçiyor haliyle arkaya atıyor. Anlayınca durumu yazıların boyutlarını %30'a indirdim aynı sıraya çektim ama alt altayken anlaşılmayan bir orantısızlık çıktı bu sefer de.

.cover-content {
  background-color: rgba(34, 4, 0, 0.7);
  display: inline-block;
  width: 30%;
  padding: 3px;
  margin: 15px;
}

Bu ne şimdi?!

 

Bu boyutlardaki orantısızlık beni delirtiyor, düzeltemiyorum. Düzeltemememin nedeni muhtemelen oradaki detayı henüz öğrenmemiş olmam ama ne yapayım yani okuluyla ilgili sorulan soruyu bilmeyen öğrenciler gibi “Ya ama biz daha oralara gelmedik ki!” diyip öyle bırakayım mı? Mümkün değil! Bir süre debelendikten sonra en basit çözümü buldum : küçük olan kutucuğun yazısına bir iki ek yapmak. Evet bu kadar saçma ve basit bir şekilde çözdüm. Arkaplanı otomatik olarak ayarlayan kodlar, yazının boyutunu diğerleriyle eşitleyince normale döndü.

.cover-content {
  background-color: rgba(34, 4, 0, 0.7);
  text-align: center;
  display: inline-table;
  width: 30%;
  padding: 30px 10px 10px 10px;
  margin: 0px;
}

Eh buna da şükür!

 

Belanı bul positioning!

Kutucukları da ayarladığımıza göre geldik sıra içeriklerin sayfa üzerindeki yerleşimine. Ben sanıyorum ki üstten ortala, yandan ortala diyeceğim hazır bir kod vardır elbet, onu gireceğim o iş bende tamam! İşte bu kısım benim bu projede tökezlediğim an oldu. Her bir denememi ayrı ayrı yazıp, görsellerinim koymayacağım çünkü emin olun okumazsınız. Altı üstü istediğim basit bir şey. Yazılar hem yatay hem dikey olarak ortalansın ve responsive olsun, ekran boyutu değiştikçe onlar da ona göre şekillensin istiyorum. Tüm projeyi yapmam yaklaşık 3 saat sürdü ama bu kısıma 1 saatten fazla kafa patlattım. marginpaddingpositionverticalhorizontalalignflex vb derken denemediğim şey kalmadı. Tabii bildiğim seçenekler dahilinde. Çıldıracağım artık ne yapıyorsam olmuyor. En son biraz body biraz .cover üzerinde milyon tane denemeyle uğraşa uğraşa aşağıdaki sonucu alabildim de azıcık rahat nefes aldım.

body {
  font-family: Raleway;
  background-color: #ffffff;
  margin: 0px;
  padding: 0px;
}

h1, h2, p {
  text-align: center;
}

.cover {
  background: url("https://i.postimg.cc/d0580TyW/coffee.jpg")
  no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  position: absolute;
  padding-top: 20%;
}

.class {
  width: 75%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

Oh be!

 

En son aşama olarak da yazıların renk ve font büyüklüklerini düzenledim. Beyaz manasızca patladığı için başlık dışında bir yerde kullanmadım. Onun yerine biraz daha kırık ve renk içeren bir ton seçtim. Başlıktaki harflerin biraz daha ayrık olmasını istiyordum onu da aşağıdaki kodlarda gördüğünüz gibi düzenledim. Ve son şeklini böylece vermiş oldum.

body {
  font-family: Raleway;
  background-color: #ffffff;
  margin: 0px;
  padding: 0px;
}

h1, h2, p {
  text-align: center;
}

h1 {
  color: #ffffff;
  font-size: 80px;
  letter-spacing: 0.1em;
}

h2 {
  color: #ffffff;
}

p {
  color: #dedec2;
  letter-spacing: 0.08em;
}

.cover {
  background: url("https://i.postimg.cc/d0580TyW/coffee.jpg")
  no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  position: absolute;
  padding-top: 10%;
}

.class {
  width: 75%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

Ve biter…

 

Tam ekranda da kontrol etmeyi tabii ki ihmal etmedim.

İlk deneme için fena değil sanki ne dersiniz?

 

Böylelikle yaklaşık 3 saatin sonunda basit bir sayfayı kodlamış oldum. Her satırını satır satır yazdığım, sıfırdan bir proje oldu. Bir iki yerde takıldım evet ama o kadar olur. Daha bir günlük coderım ben :)

 

Proje sonunda neler öğrendim?

Öncesinde öğrendiklerimi yazmıştım ne güzeldi değil mi? Bir de sonrasında neler öğrendiğimize bakalım.

  • Kodlar teoride durduğu gibi tarayıcıda durmuyor!
  • Position kısmına biraz daha detaylı bakmam gerekiyor.
  • Bir sonucu elde etmenin birden fazla seçeneği var senin işine hangisinin yarayacağını da insan ancak deneyerek anlayabiliyor.
  • CSS daha fazla zamanı hakediyor, o olmadan HTML bir hiç!
  • Daha çok pratik, daha çok uygulama, daha çok deneyim lazım. Kodları öğrenmek yetmiyor!

 

Canlısı ?

Sayfanın kodlarına ve canlısına şöyle bir bakayım derseniz CodePen'deki Coffee Trees projesini inceleyebilirsiniz. Bir sonraki maceramda görüşmek üzere. Yorumlarınızı, önerilerinizi yazmaktan çekinmeyin.

Görüşmek üzere…

Related Posts