HTML CSS Javascript Nedir? Niye Önemlidir?

Yazılım konulu yazı dizimizin ikinci bölümünde yazılım dillerine (HTML, CSS, Javascript) kısaca değineceğiz. Buna göre “HTML Nedir?”, “CSS Nedir?” “Javascript Nedir?” sorularına ek olarak “HTML, CSS Javascript Niye Önemlidir?”, “HTML CSS Javascrtipt Nasıl Kullanılır?” sorularına da yanıt vereceğiz.

Günümüzde dünya genelinde web sitesi sayısı 2 milyara yaklaşmış durumda. Şirketlerin ve şahısların kurumsal web siteleri, çeşitli kategorilerde yayın yapan kişisel ve kurumsal blog siteleri, proje amaçlı oluşturulan web siteleri, ticari amaçlı hazırlanan e-ticaret / e-ihracat siteleri, iletişim ve pazarlama amaçlı oluşturulan sosyal medya siteleri, bilgi paylaşımı amaçlı kurulan forum ve sözlük siteleri vb. olmak üzere farklı amaç ve kategorilerde birçok web sitesi var. Ve bu web sitelerinin sayısı her geçen gün artıyor.

Bu yazıda ise bu ekosisteme dahil olabilmek için gerekli olan bir web sitesini oluşturmanın, 3 ana unsurunu anlatacağız.

Bunlar;

HTML
CSS
JavaScript

Şimdi bu yazılım dillerini temel düzeyde inceleyeceğiz. Buna göre makale boyunca HTML CSS Javascript Nedir?, HTML CSS Javascript Niye Önemlidir?, HTML CSS Javascript Nasıl Kullanılır? sorularına yanıt vereceğiz. Böylece dijital markalaşmanın önemli bir adımı daha doğrusu temel noktası olan; web sitesi oluşturma için gerekli olan yazılım dillerini tanıyacağız.

HTML CSS Javascript

Öncelikle şunu belirtmek isterim ki; her üç yazılım dili için de oldukça fazla sayıda etiket veya fonksiyon vardır. Yani bu makalede tüm o fonksiyon ve etiketlerden bahsetmemiz mümkün değil. Bunun yerine www.w3schools.com sitesini ziyaret etmenizi öneriyorum. Çünkü bu site; web sitesi ile alakalı dillere ait fonksiyonlar / etiketler nelerdir? Bu etiket ve fonskiyonlar nasıl kullanılır? gibi sorulara cevap vermektedir. Ayrıca anlık deneme ortamı ile sitedeki örnekleri inceleyebiliyorsunuz. Bu sayede burada tüm o fonksiyonlardan bahsederek makalenin ana fikrinden uzaklaşmamış olacağız.

HTML CSS Javascript Yazılım Dilleri

HTML CSS Javascript İçin Metin Editörü

Öncelikle HTML, CSS ve Javascript ile ilgili çalışma yapabilmeniz için metin editörü olarak adlandırılan çalışma alanına ihtiyacınız var. Ben bu dilleri kullanarak yaptığım tüm çalışmalarda Visual Studio Code adlı metin editörünü kullanıyorum. Size de tavsiye ederim.

Niye Visual Studio Code?

Bu metin editörünü önermemin ve kullanmamın birçok sebebi var. Örneğin; görsel anlaşılırlık ve yazımı hızlandıran kısayol tuşları bunların başında geliyor. Ayrıca bu metin editörünün bir iki harfe tıkladıktan sonra istenilen alanı otomatik oluşturma (snippets) özelliğine sahip olması ve mevcut olan neredeyse tüm dilleri desteklemesi de Visual Studio Code kullanmamın nedenleri arasında yer alıyor. Bunlara ek olarak Visual Studio Code, tamamen ücretsizdir. 🙂

HTML Nedir? Niye Önemlidir?

Evet aktardığımız tüm o ön bilgiden sonra artık asıl konuya geçebiliriz. Öncelikle HTML nedir? sorusunu yanıtlayacağız. HTML (Hyper Text Markup Language) en kısa tanımıyla; web sitelerinin iskeletini oluşturan metin işaretleme dilidir. Buna ek olarak HTML, metin belgesinin içine yazılıp tarayıcıdan açıldığında bile çalışabilir. HTML ile oluşturulan sayfalar <html> ve </html> etiketleri arasında oluşturulur. Bu etiketlerin içerisinde ise bir adet baş (<head>), bir adet gövde (<body>) etiketi bulunur.

Head Etiketi Ve Body Etiketi Nedir?

<head> etiketinin içinde sayfanın başlığı, açıklamaları, anahtar kelimeleri, sayfada kullanılacak CSS dosyaları gibi sayfanın özellikleri tanımlanır.

<body> etiketinin içinde ise sayfa içerikleri barınır. Diğer bir ifadeyle sayfa logosu, makaleler, reklamlar gibi sayfada görülecek tüm içerikler bu kısımda bulunur. Bu kısımda bulunan içerikler, <header>, <article>, <navbar>, <aside>, <section>, <footer> gibi özel amaçlı “semantik” etiketler ile ayrılarak kullanılır.

Bu etiketlerin içerisinde yer alanlar; aslında sayfanın içeriğini oluşturan yapılardır. Yani arama motorları tarafından içeriğin anlaşılması ve ön plana çıkması için bu semantik etiketlerin kullanılması oldukça önemlidir.

∴

Bu yapıya uygun bir kod hazırladıktan sonra bu kod .html uzantılı olacak şekilde kaydedilmelidir. Kaydedilen dosya çalıştırıldığında karşınıza çıkacak şey muhtemelen çirkin, evlat olsa sevilmez tarzda, düzensiz, alt alta sıralanmış bir sayfa olacaktır. Bu sayfayı güzelleştirmek içinse CSS kullanmamız gerekmektedir.

CSS Nedir? Niye Önemlidir?

CSS (Cascade Style Sheet), bir HTML dokümanının şeklini ve/veya görüntüsünü tasarlayan olgudur. Diğer bir ifadeyle CSS, HTML’i basit bir iskelet olmaktan kurtaran metin şekillendirme dilidir. Bu nedenle büyük öneme sahiptir. Çünkü bir sitedeki görselliği dolayısıyla da kullanıcı memnuniyetini sağlayan CSS’tir.

CSS Nasıl Kullanılır?

CSS kullanarak HTML dokümanında bir alana şekil vermek için ilk olarak HTML dokümanının <head> etiketi içinde oluşturduğumuz CSS dosyası tanımlanmalıdır.

Örneğin; <linkrel=”stylesheet” href=”CSS DOSYASININ LİNKİ”> şeklinde CSS dosyamızın bu web sayfasında kullanılacağını tanımladıktan sonra CSS dosyamızda görsel değişiklik yapmaya başlayabiliriz.

İlk olarak sayfada değiştirmek istediğimiz alanı belirlemek oldukça önemlidir. CSS’te 3 farklı özelliğe göre değişim yapılabilir. Bunlar; Etiket, Class ve ID özellikleri olarak ayrılmaktadır.

CSS’te 3 Temel Kavram: Etiket, Class, ID

Etiketlere yapılan CSS tanımlamaları, sayfanın tümünde bulunan aynı etiketi kullanan alanlarda geçerli olacaktır. Örneğin sayfanın içeriğini oluşturan <body> etiketine yapılan yazı tipi ve boyutu değişimi, sayfanın tamamındaki yazı tipini ve boyutunu değiştirecektir.

Class ve ID özellikleri etiketlerin yanında tanımlanır. <divclass=”branding”> şeklinde tanımlanan birden fazla etiket bulunabilir. CSS dosyasında brandingclass’ı için yapılacak değişiklikler sadece o class özelliğine sahip etiketler tarafından kullanılacaktır.

Son olarak ID tanımlaması; <div id=”branding> şekilde yapılır ve CSS’te yapılan değişimler sadece o etikete etki edecektir. Bu arada bir belgede birden fazla aynı ID’ye sahip etiket olmamalıdır.

∴

CSS dosyasında etikete değişiklik yapılıyorsa direkt olarak yazılıp, sağına süslü parantez açılıp içine özellikler yazılmalıdır. Eğer bir Class’a değişiklik yapılacaksa soluna nokta koyulduktan sonra Class ismi yazılıp sağına süslü parantez açılıp buraya özellikler yazılmalıdır.

Eğer bir ID’ye değişiklik yapılacaksa soluna # işareti koyulduktan sonra ID ismi yazılıp sağına süslü parantez açılıp içine özellikler yazılmalıdır.

Etiket’e CSS tanımlaması: body{ font-size:10px; }

Class’a CSS tanımlaması: .branding{ width: 100%; }

ID’ye CSS tanımlaması: #branding{ width: 100%; }

💡 CSS’e ait tüm özelliklere makalenin girişinde önermiş olduğum web sitesinden (www.w3schools.com/css/) ulaşabilirsiniz.

Javascript Nedir? Niye Önemlidir?

Javascript aslında bir programlama dilidir. Web sitelerinde ve bazı oyun motorlarında kullanılmaktadır. Javascript ile daha dinamik web arayüzleri veya hesaplamalar yapılabilmektedir. Diğer bir ifadeyle bir butona basıldığında ne yapılması gerektiği, bir yazı alanına yazı yazıldığında otomatik tamamlama gibi işlemler Javascript ile yapılmaktadır.

Ayrıca elde edilen anlık verileri grafiğe çizdirme, matematiksel hesaplar ve hatta oyun yapmak gibi işlemler de yine Javascript ile yapılmaktadır. Tüm bunlar aslında Javascript’in niye önemli bir yazılım dili olduğunu da açıklıyor.

∴

Bilindiği üzere bir web sitesinde yapılan işlemler kullanıcının bilgisayarında yani tarayıcı üstünden yapılmaktadır. Bu yüzden kullanıcıların sahip olduğu bilgisayarları göz önünde bulundurarak, bilgisayara yük bindirecek işlemlerin yapılmasından kaçınılmalıdır. Yüksek kapasite / yük gerektiren işlemler veya güvenlik problemi oluşturabilecek işlemler sunucuda yaptırılıp sonuçları istenmelidir.

∴

Javascript de diğer programlama dilleri gibi değişkenler ve fonksiyonlardan oluşmaktadır. Bu nedenle de programlama bilgisi gerekmektedir.

Javascript ile HTML sayfasında ID’si tanımlanan etiketlere ulaşılabilir ve bunlar üzerinde değişiklikler yapılabilir. Aynı zamanda bunlara bazı özellikler eklenebilmektedir. Diğer yandan Google Harita hizmeti, sayfanın sadece belirli bir alanını değiştirmek için yapılan istekler (Örn; AJAX) gibi bir çok önemli ve kullanışlı özelliği kullanabilmek için de yine Javascript devreye girer. Bu yüzden Javascript bilmek iyi bir web sitesi oluşturmak için büyük önem taşımaktadır.

HTML CSS Javascript Öğrendim, Web Sitesi Kurabilir Miyim?

Tüm bunları okuduktan aklınıza hemen ve ilk olarak bu soru gelmiş olabilir. Hemen yanıtlayayım; hem evet, hem de hayır.

HTML CSS Javascript bilerek elbette ki temel düzeyde statik bir web sayfası kurabilirsiniz. Fakat üyelik işlemleri, gönderi ekleme, düzenleme, silme gibi işlemlerin olacağı bir web sitesi kurulması gerekiyorsa (örneğin e-ticaret sitesi veya blog sitesi) PHP, Django, Asp.NET gibi dilleri de öğrenmeniz gerekmektedir.

Bu diller sunucu tarafında çalışmakta ve bir HTML sayfasını dinamikleştirip, her sayfayı tek tek elle yazmak yerine veritabanından çektiği verileri taslak sayfanın üstünde gösterebilmektedir. Aynı zamanda kullanıcı tarafından yapılan işlemleri, sunucu tarafında işleyerek, (Örn; resim boyutu küçültme işlemleri gibi) yapabilmektedir.

Tam anlamıyla bir web sitesi kurabilmek için gerekli olan diğer yazılım dillerini (PHP, Django, Asp.NET) bir sonraki makalede aktarmayı düşünüyorum.