HTML & CSS'e başlamak için neler gerekli?

HTML & CSS Dersleri

HTML & CSS'e başlamak için neler gerekli?

HTML Nedir?

HTML kısaltmasının anlamı Hyper Text Markup Language'dır.


İnternet üzerinde genel olarak oluşmuş olan kanı HTML'in bir programlama dili olduğudur. Öncelikle şunu belirtelim, HTML bir programlama dili değil, işaretleme dilidir. HTML genel anlamda sitenizde görünecek sabit/statik içeriğin tanımlanmasında kullanılır.

CSS Nedir?

CSS kısaltmasının anlamı Cascading Style Sheet'tir.

Hazırlamış olduğunuz HTML içeriğinin göze hoş görünmesini sağlar. CSS ile sitenizdeki HTML elementlerinin renk, gölge, kenar boşlukları, pozisyon vesair özelliklerini düzenlersiniz. 


Peki Tüm Bunlar Ne Anlama Geliyor?

Bu ikisi de fonksiyonele değil görsele hitap eder, CSS olmadan görsel olarak pek bir şey vaat etmeyen web siteleri hazırlayabilirsiniz ama HTML olmadan CSS'in tek başına bir anlamı yoktur. Çünkü ortada stilini belirleyebileceğiniz bir element yoktur.

Farklı programlama dilleriyle (PHP, Javascript vs.) eklemeler yapmadığınız sürece web siteniz statik, yani sabit bir görünüm alır. Kullanıcı girişi, konu altlarına yorum, sepet sistemi vesair düzenlemeler için PHP/Javascript gibi ek programlama dillerine ihtiyaç duyarsınız.


Esasında genel anlamda şu anda görüntülemekte olduğunuz WebSanat.net gibi profesyonel web siteleri, HTML + CSS + Javascript + PHP + MySQL ile kodlanmıştır. Yani bir firmanın tanıtımı için HTML + CSS yeterli iken, içerik/veri giriş çıkışı yapılan web sitelerinde dinamizm şarttır. Bu yüzden de ileri dönemlerde bu programlama dillerini öğrenmeniz şiddetle tavsiye edilir ki emekleriniz boşa gitmesin.


Sistem Nasıl İşliyor?

Yazmış olduğunuz HTML ve CSS kodları tarayıcı tarafından download edilir/indirilir. Tarayıcı, kendi yorum motoru üzerinde değerlendirmeye geçer. Daha sonra tüm bu görüntü render işlemi görür ve kullanıcının önüne kodlar değil son hali gönderilir. Farklı tarayıcılar farklı yorum motorlarına sahip olsa da aynısını kullananlar da vardır. Örneğin; Opera, Vivaldi ve Chrome tarayıcıları Chrome'un yorum motorunu kullanırlar. Bazı tarayıcılar Firefox'un yorum motorunu kullanırken çok nadiren de Edge/Internet Explorer motorunu kullanan tarayıcılar da mevcuttur. Safari tarayıcısı için de Apple firması motorunun kaynağını kapattığından kendisinden başka kimse kullanamaz.

Bu, şu anlama geliyor; yazdığınız kod bazı tarayıcılarda farklı görünebilir. Bunun önüne geçmek için ise ek CSS kodları yazarız. Bazı tarayıcılar bazı kodları kabul etmez ve görmezden gelir, bu yüzden de onların kendi yorumlayıcısının anlayacağı kendi kodlarını da ek olarak yazarız.


HTML ve CSS Yazmak İçin Neye İhtiyacım Var?

Atom Metin Editörü

     

a) Metin Editörü: Bu tanımlamaları yapmak için herhangi bir text editor/metin editörü yeterlidir. Windows işletim sisteminde not defterini kullanabilirsiniz. Biz WebSanat.net olarak Atom isimli metin editörünü tercih ediyor ve size de bunu tavsiye ediyoruz. Şu anda görüntülemekte olduğunuz HTML ve CSS Dersleri ve bundan sonraki PHP, Javascript, MySQL dersleri için de aynı editörü kullanabilirsiniz. Bu editörün özelliği, farklı programlama dillerine kendini uygun hale getirebilmesi ve farklı kod yapılarını farklı renklerle göstererek kafa karışıklığının önüne geçmesidir. Ayrıca kısayollar hayatınızı ciddi anlamda kolaylaştırırken, derslerin ilerleyen bölümlerinde sunucumuza web sitesinin upload edilmesi/yüklenmesi aşamasında da, eklentileriyle ciddi kolaylıklar sağlamaktadır. Kullanımı kolay, küçük boyutlu ve RAM dostu bir yazılım olduğundan ötürü tercih ettiğimiz bu yazılımı buraya tıklayarak edinebilirsiniz.


Tarayıcılar


   

b) Tarayıcı: Bu konudan pek bahsetmeye gerek yok aslında çünkü yaklaşık olarak bilinen tüm işletim sistemleri (Windows/Linux/Mac Os) zaten üzerinde belirli bir tarayıcı yüklü olarak karşınıza gelir. Zaten şu anda bu web sitesini görüntüleyebiliyor olmanız da bir tarayıcı kullandığınız anlamına gelmektedir. Burada önemli olan, yüklü olan tarayıcının kullanılması değil, programlama için en uygun tarayıcının kullanılmasıdır. Farklı tarayıcılar farklı özelliklere sahip olduğundan işinize hangisi yarıyorsa öncelikli onun üzerinde testlerinizi yapmanız gerekir. Daha sonra diğer tarayıcılarla da uyumlu hale getirirsiniz. Ayrıca bilgisayarınızda birden fazla tarayıcı kurulmuş olmasının da herhangi bir mahsuru yoktur. Biz programcılar olarak bu tarayıcıların en çok konsol özelliklerini kullanırız. Web sitemizde yapacağımız değişiklikleri kaydetmeden önce bu konsollarda denemeler yaparak kusursuz olan görünümün peşine düşeriz. Yani bir programcının bir tarayıcıda aradığı/arayacağı en önemli özellik konsoldur. Bazı tarayıcılarda konsol kullanımı, o sayfa için RAM kullanımını 2 katından daha fazla hale getirebilir.

        Bunlardan basitçe bahsedecek olursak;

        1) Microsoft Edge/Internet Explorer: Bu tarayıcının yeni adı olan Edge, Internet Explorer yazılımının devamıdır. Microsoft Edge tarayıcısında Internet Explorer'ın gelişmiş yorum motoru kullanılmaktadır. Görsellerin görüntülenmesi konusunda tabii ki Firefox ve Chrome kadar başarılı olmasa da son versiyon ile buna yaklaşmıştır. Windows işletim sisteminin içinde yüklü olarak gelir. En önemli özelliği Microsoft tarafından geliştirilip Windows'a tam entegre edilmiş olmasıdır. İşletim sistemi ile etkileşimli uygulamalar geliştirmek istediğinizde aradığınız tarayıcı budur. İlerleyen derslerde konsol kullanımını göreceksiniz ve bu tarayıcıların ikisi de (Edge ve Internet Explorer) konsol konusunda çok başarısızdır. Verimli programlama yapabilmek için tavsiye edilmez. Önerilen, diğer tarayıcılarda genel görünümün hazırlanması ve en son bu tarayıcılarla entegrasyonun da ek olarak sağlanmasıdır. Bu tarayıcı bilgisayarınızda mevcut değil ise buraya tıklayarak indirebilirsiniz.

        2) Mozilla Firefox: Mozilla tarafından geliştirilen Firefox tarayıcısı gelişmiş CSS ve Javascript (gecko) motoruna sahiptir. Bu motorlarla çalışan farklı tarayıcılar olsa da, bu türevler arasında RAM optimizasyonu en verimli olan salt Firefox'tur. Konsol özellikleri gayet verimli olsa da az sonra anlatılacak olan Chrome, Opera ve benzeri tarayıcılar karşısında pazarının düşüşünün ardından programcılar için 2. olarak tercih edilecek tarayıcıdır. Chrome motoru ile çok benzer olduğundan Chrome üzerinde test edilen bir web sitesinin Firefox üzerinde farklı göründüğü çok nadir olan bir durumdur. Bundan ötürü Chrome kullanan bir programcının aslında bilgisayarında Firefox'a pek ihtiyacı bulunmaz. Fakat programcı garanticidir. Ne olur ne olmaz mantığıyla bu yazılımı da sürekli bilgisayarında bulundurur. Bu tarayıcı bilgisayarınızda mevcut değilse buraya tıklayarak indirebilirsiniz.

        3) Google Chrome: Google tarafından geliştirilen web tarayıcısıdır. Google, bir programcının en yakın dostu olduğundan bu tarayıcı da aslında ihtiyaçlarımıza en rahat cevap veren tarayıcıdır. Yalnız Chrome tarayıcısı RAM konusunda çok obur bir tarayıcıdır. Bunun sebebi, diğer tarayıcılar gibi tüm sekmelerinizi aynı program üzerinde çalıştırmak yerine her birini ayrı bir program olarak çalıştırır. Böylece bir sekmenin çökmesi durumunda tarayıcınızdaki tüm sekmelerinizi kaybetmezsiniz. Yüksek RAM'e sahip bilgisayarlarda tavsiye edilir. Tarayıcılar arasındaki pazar payında çok önemli bir yeri olduğundan kullanıcılarınızın genel anlamda sitenizi görüntüleyeceği tarayıcı budur. Dolayısıyla sitenizin çatısı kurulurken ve devamındaki ilk testlerde de kanaatimce ilk sırayı alması gereken tarayıcı budur. Hatta öyle ki, bence bir programcının bilgisayarında olmazsa olmaz olan test tarayıcısıdır. Ayrıca eklenti desteğiyle de testlerinizi hızlandırabilirsiniz. Konsol özellikleri çok gelişmiş ve programcı dostu olsa da en büyük handikapı, daha önce de bahsedildiği gibi çok fazla RAM tüketmesidir. Tüm bu güzel özelliklerinin yanı sıra bir de Opera tarayıcısının özelliklerine göz gezdirmeniz şiddetle tavsiye edilir. Bu tarayıcı bilgisayarınızda mevcut değilse buraya tıklayarak indirebilirsiniz.

        4) Opera: Opera yalnız başına çalışan bir tarayıcı değildir. Chrome motorunu ve konsolunu aynen kullanır fakat bu yazılımın çalışması için ek olarak Chrome yüklemenize gerek yoktur. Yani bir web sitesi Chrome üzerinde nasıl görünüyorsa Opera'da da aynı şekilde görünecektir. Opera'nın Chrome'a göre artı olan özellikleri arasında, entegre VPN ve Reklam engelleyici ile gelmesidir. Bu özellikleri Chrome'dan alabilmeniz için bazı eklentiler kurmanız gerekebilir. Açıkçası Opera VPN sorunsuz çalışırken Chrome üzerindeki eklentilerin sorunsuz çalıştığı görülmemiştir. Fakat reklam engelleyici konusunda Chrome eklentileri, Opera'nın reklam engelleyicisinden daha iyidir. Bu arada Chrome'da çalışan tüm eklentilerin, Opera üzerinde de çalıştığını söylemeliyiz. Kanaatimce bir programcı için olabilecek en iyi test tarayıcısı Opera'dır. Bu tarayıcı bilgisayarınızda mevcut değilse buraya tıklayarak indirebilirsiniz.

        5) Apple Safari: Bu tarayıcı yalnızca Apple ürünlerinde çalışmaktadır. Her ne kadar masaüstünde göz ardı edilebilecek kadar bir kullanıcısı olsa da mobilde ciddi bir hayran kitlesine sahip olduğundan bu tarayıcı üzerinde de testlerin yapılmasında ciddi yararlar vardır. Bu tarayıcının tek handikapı Windows ve Linux üzerinde bulunmamasıdır. Yani bu tarayıcı ile test yapabilmeniz için öncelikle bir Apple bilgisayar ve mobil içinde bir iPhone'a ihtiyacınız bulunmaktadır.


Sonraki dersimizde web tasarıma başlangıç yapacağız.