Bu makalede Html ve CSS’le ilgili sıkça sorulan soruları derledim. 

Öncelikle HTML ve CSS nedir sorusuna kısaca değinelim. 

HTML bir web sitesinin iskeletidir.  Eğer web tasarım öğrenmek istiyorsak ilk olarak HTML öğrenmekle başlamalıyız.  

HTML sayfanın genel görüntüsünü oluşturur. Fotoğraf, tablo, metin vb gibi içeriklerin eklenmesini ve bunların birbirine bağlanarak doğru bir şekilde çalışmasını sağlar.  

CSS ise sayfanın renklenmesini ve tasarımsal anlamda gelişmesini sağlar. Renk, boyut ve biçimlendirme sağlar. CSS olmadan HTML yazarsak etkileyici ve dikkat çekici bir görünüme asla ulaşamayız. Sayfamız tek düze ve sıkıcı görünür.  

HTML ve CSS öğrenmek ne kadar sürer? 

HTML ve CSS öğrenmesi oldukça kolaydır. HTML’i en fazla birkaç haftada öğrenebilirsiniz. Eğer çok üstüne düşerseniz bu sadece 3-4 gününüzü bile alabilir. CSS’de temel ingilizce kelimeleri biliyor olmanız durumunda (color, font gibi) sadece birkaç gününüzü alacaktır.  

HTML ve CSS yazılım dili mi? 

Hayır HTML ve CSS yazılım dili değildir. Çünkü bunları kullanarak kendi başına çalışan bir uygulama yazılamaz. Sadece genel düzen oluşturulur, metin, fotoğraf vb ögeler işlenir, sunulur ve stili biçimlendirilir. 

HTML bir işaretleme dilidir. CSS ise HTML ile oluşturulan taslağı şekillendirmeye yarayan bir tasarım dilidir. İşaretleme dili ve yazılım dili arasındaki temel fark fonksiyonlardır.  

Ancak bunların bir programlama dili olmaması HTML ve CSS’i değersiz kılmaz. Eğer web tasarımla uğraşacaksak bunları kesinlikle bilmemiz gerekir. Ama sadece bunları öğrenirsek oluşturduğumuz web sitesi fonksiyonsuz ve işlevsiz olur. 

HTML ve CSS kullanırken sık yapılan hatalar 

1. Sadece tek browser kullanarak çalışmak. 

• Bir browserda doğru ve mükemmel çalışan bir website diğer browserlarda da aynı şekilde çalışmayabilir. Bu sebeple çalışmalarınızı yaparken birden fazla browser üzerinden deneme yapmalısınız. 

2. Semantik etiket kullanımına dikkat edilmemesi.  

• Semantik; kelimelerin anlamını araştıran bilim dalıdır.  Semantik etiket kullandığımızda yazdığımız şeyler arama motorları tarafından anlaşılabilir. Bu etiketlere dikkat edersek sayfamızın ziyaret edilme oranını büyük ölçüde arttırabiliriz. 

3. Her sayfanın meta tagına anahtar kelimeleri eklememek veya sayfa açıklamasını belirtmemek. Bu durum da arama motorları açısından dezavantajdır. 

4. Sayfanın title etiketine dikkat etmemek ya da her sayfanın title etiketine aynı şeyi yazmak. 

5. Web sitemizi yayına almadan önce optimize etmemek.  

• Fazladan bıraktığımız boşlukları ve gereksiz kodları ortadan kaldırırsak hem sonradan geliştirecek kişiye kolaylık sağlarız hem de sayfanın hızlı bir şekilde açılmasına yardımcı oluruz.  

6. Kısaltılmış özellikleri kullanmamak.  

Örneğin: 

Yerine

kullanabiliriz. Sıralama yukardan başlayarak saat yönünde ilerler. 

7. Değer olarak 0 verdiğimizde px veya % gibi birimler kullanmamız gerekmez. Çünkü zaten bahsettiğimiz şey 0 dır. 

HTML ve CSS kodlarını derlemek için hangi derleyicileri kullanabiliriz? 

1. Visual Studio Code 

• Bu derleyiciyi kullanarak çalışmalarınızın derlenmiş halini yan panelden görebilir ve çalışmalarınızı githuba direkt gönderebilirsiniz. Ayrıca çok hızlıdır. 

2. Atom 

• Kullanımı çok kolaydır ve Teletype’ı destekler. Yani diğer geliştiricilerle gerçek zamanlı olarak beraber çalışabilirsiniz. 

3. Notepad++ 

• Çok sayıda eklentisi bulunur ve birçok dili destekler. Aynı zamanda FTP özelliği çok hızlı ve kullanışlıdır 

Aynı zamanda Stackblitz’de sizin için güzel bir tercih olabilir. Stackblitz’de online bir şekilde kodlarınızı yazabilir ve hemen yan panelde derlenmiş halini görebilirsiniz. Ve çalışmalarınızı tek tuşla GitHub üzerinden paylaşabilirsiniz. Unutmayın ki çalışmalarınızı kendinize saklamamalısınız. 

Peki HTML ve CSS’i nasıl öğrenebiliriz? 

Öncelikle internette HTML5 ve CSS3’le ilgili çok sayıda eğitim videoları var. Bunları araştırıp size en uygun gelen anlatımı bulup eğitimi tamamlamaya çalışmalısınız. Tabi bunu yaparken tek kaynağa bağlı kalmamanız ve anlamadığınız her türlü şeyi google’dan aratarak öğrenmeye çalışmanız önemli. 

Aynı zamanda sadece video izleyerek tam bir öğrenme elde edemezsiniz. Sadece ezber yapmamaya çalışmak ve öğrendiklerinizi hemen uygulamaya geçirmeniz bu noktada çok önemli.  

Ayrıca çoğunuzunda bildiği w3schools’u her zaman yan sekmede bulundurmalısınız. İhtiyacınız olduğu veya bir yeri unuttuğunuz anda ordan destek alabilirsiniz. Site ingilizce olmasına rağmen temel  seviyede ingilizce bilen herkesin rahatça anlayabileceği şekilde düzenlenmiştir. Ve orda ihtiyacınız olan bütün kodlar bulunmakta. Kolayca üstünde değişiklik yapıp hemen derleyebilirsiniz, yaptığınız değişikliğin sonucunu rahatça görebilirsiniz. Bu durum öğrenmenize oldukça katkı sağlar. 

Bu aşamada makale ve bu konuyla ilgili yazılar okumanında faydası büyük. Medium.com’a da bakarak bolca makale okumaya çalışmalısınız. 

Ben Çağla Pekoğlu. Bu konuyla ilgili sorularınızı sormaktan çekinmeyin. Şimdiden iyi çalışmalar ve hepinize başarılar dilerim 😊