Yazılım eğitimlerinin olmazsa olmazı hepimizin bildiği gibi HTML ve CSS’tir. İnternetin hayatımıza girmesiyle birlikte web sitesi diye bir kavram ortaya çıktı. Bu kavram zamanla değişip gelişerek bizim internette yer edinebileceğimiz bir platform haline geldi. Web siteleri, kişileri veya kurumları internette bulunabilir hatta onlarla iletişim kurulabilir bir hale getirdi. Günümüz itibariyle web sitesi olmayan kurum veya şirket yok denecek kadar azaldı. Hatta herkesin birer tane kişisel blog sitesi bile var desek yalan olmaz. Peki konuya giriş yapacak olursak bu web sitelerinde sıkça karşımıza çıkan HTML ve CSS nedir?
HTML Nedir?
HTML5 Nedir?
HTMI, açılımı Hyper Text Markup Language olan zengin metin işaretleme dilidir. Ancak HTML’e genellikle bir dil gibi bakılmaz. Aslında bir etiket bütünlüğü olarak tanımlanan HTML, web sitesi oluşturmak için kullanılan bir betik dilidir. Uzantısı ise .html ya da .htm şeklinde tanımlanır. HTML dili, etiket yapısından oluştuğu için genellikle <> işaretleri arasında belirlenir. Burada dikkat edilmesi gereken nokta ise etiketin nasıl kapatılacağıdır. Örnek olarak <html> şeklinde açılan bu etiket tekrar <html> şeklinde kapanmaz. Bunun yerine </html> işaretleri kullanılmalıdır. İstisnalar olsa da etiketler genel itibariyle bu şekilde kapatılır.
HTML, bir programlama dili olmadığı için derlenme bir gereksinimi de söz konusu değildir. Standart bir metin belgesinin içine de satırlarca HTML kodunu yazabilirsiniz. Sonrasında belgeyi .html olarak kaydettiğinizde o belgeyi tarayıcınızda açıp neler yaptığınızı rahat bir şekilde görebilirsiniz. Peki HTML neden kullanılır?
HTML Neden Kullanılır?
HTML’i bir web sitesinin iskeleti olarak düşünebilirsiniz. İskeleti olmayan bir internet sitesi düşünülemeyeceği için HTML’in de aslında ne kadar önemli olduğunu görebiliriz. Bir internet sitesi ya da bir internet sitesinin herhangi bir bölümü yazılacaksa önce oranın iskeleti oluşturulur. Sonrasında bu iskelete belli başlı kıyafetler ve parçalar giydirilir. Basit bir HTML kod örneğini sizlerle paylaşalım.
<p>Bu da benim ilk paragrafım. Merhaba HTML. Merhaba Dünya</p>
</body>
</html>
Gördüğünüz üzere HTML etiketleri belli bir düzende açılıp belli bir düzende kapatılıyor. Aralardaki string verileri de basit içerikler olarak tarayıcıya yansıyor. HTML, genellikle bu etiketlerin dizildiği ve diğer programlama dilleriyle bağlanıp çok daha derin bir hale getirildiği bir sistemdir. HTML kodlarını CSS ile renklendirip şekillendirebiliriz. O halde hızı bir şekilde CSS’in ne olduğuna ve nasıl çalıştığına bir bakalım.
CSS nedir?
CSS Nedir? En Çok Kullanılan CSS Kodları
CSS, açılımı “Cascading Style Sheets” olan ve Basamaklı Stil Şablonları anlamına gelen bir sayfa biçimlendirme sistemidir. CSS, en temel haliyle HTMI etiketlerimizin görsel açıdan çok daha detaylı olmasını sağlar. Etiketlerimizi biçimlendirmek için kullandığımız CSS kodları, renk, yazı şekli, arka plan rengi, genişlik, yükseklik, pozisyon durumu, grid düzeni ya da çeşitli animasyonlar gibi durumları yönetir. CSS’in sahip olduğu bazı seçiciler vardır. Bunlar da id ve class olarak ikiye ayrılır. HTML etiketlerimizin içine bu seçicileri yerleştiririz ve CSS kodları ile bu etiketleri biçimlendiririz. Örnek olarak <div class=”container”>Merhabalar</div> etiketimizi .container{} CSS seçicisi ile biçimlendirebiliriz.
Kısaca size bunu şu şekilde açıklayabiliriz:
HTMI kodu :
<h1 class=”secici”>Merhaba Dünya</h1>
<h1> etiketine bir seçici tanımladık. (class=”secici”)
CSS kodu :
.secici {
font-size: 20px;
color:red;
width:100%;
height:50px;
}
.secici ile birlikte HTML etiketimizi seçtik. Bu, CSS’e “Ben bu etiketi düzenlemek istiyorum” anlamına geliyor. Sonrasında ise font-size ile yazı boyutunu ayarladık, color ile yazı rengini, width ile etiketin yatay boyutunu, height ile de etiketin yüksekliğini belirledik. Peki CSS’i neden ve nerelerde nasıl kullanırız?
CSS’i Neden Kullanılırız?
CSS’i, HTML ile oluşturduğumuz iskelet yapılarını çoğunlukla görsel açıdan daha iyi hale getirmek için kullanırız. Etiketlerin rengini, boyutunu, açısını ya da pozisyonunu belirleyerek göze hoş görünen formlar ortaya çıkartırız. Diğer programlama dilleriyle de bu etiketleri etkileşimli hale getiririz. Peki bunlar için hangi programlama dilleri kullanılır?
Javascript
JavaScript Nedir? En Çok Kullanılan JavaScript Kodları
Javascript, ön yüz geliştiricilerin sıklıkla kullandığı programlama dillerinden bir tanesidir. HTMI ve CSS kodlarını müşteri ile etkileşimli hale getirebilmek için kullanılan bu programlama dili, bir web sitesinde elde etmek istediğiniz her türlü durumu sizlere sunuyor. Eğer ileride ön yüz geliştirici olmak istiyorsanız HTMI CSS, Javascript ve sonrasında Javascript frameworklerini öğrenebilirsiniz.