HTML, CSS, Javascript Nedir? Niye Önemlidir? Nasıl Kullanılır?

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 Nasıl Kullanılır? CSS Nasıl Kullanılır? Javascrtipt Nasıl Kullanılır? sorularına da yanıt vereceğiz. 

Günümüzde 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 artmaktadır.

Bu yazıda, internet ekosistemine dahil olabilmek için gerekli olan 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. Böylece dijital markalaşmanın önemli bir adımı olan; web sitesi için gerekli olan yazılım dillerini tanıyacağız.

HTML CSS Javascript İle Web Sitesi Nasıl Oluşturulur?

Her üç dil için de oldukça fazla sayıda etiket veya fonksiyonu var. O nedenle bu makalede bahsettiğim fonksiyon ve etiketlerden bahsetmeyeceğim. Bunun yerine www.w3schools.com adresini incelemenizi ö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 inceleyebilirsiniz.

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 StudioCode adlı metin editörünü kullanıyorum. 

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 eklentiler ile gelen, bir iki harfe bastıktan sonra istenilen alanı otomatik oluşturma, (snippets) özelliğine sahip olması ile 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, ücretsizdir.

HTML Nedir? Niye Önemlidir?

HTML(Hyper Text Markup Language) web sitelerinin iskeletini oluşturan metin işaretleme dilidir. 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 bir adet baş (<head>), bir adet gövde (<body>) etiketi bulunur.

Head 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. 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çindekiler sayfanın içeriğini oluşturan yapılar oldukları için 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 görüntüsünü verir. Diğer bir ifadeyle CSS, HTML’i basit bir iskelet olmaktan kurtaran metin şekillendirme dilidir. Bu nedenle büyük öneme sahiptir. Kullanıcı memnuniyeti açısından da CSS’in önemli olduğunu belirtelim.

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%; }

Dipnot: CSS’e ait tüm özelliklere makalenin başında önerdiğim web sitesinden (www.w3schools.com/css/) ulaşabilirsiniz.

Javascript Nedir? Niye Önemlidir?

Javascript bir programlama dilidir. Web sitelerinde ve bazı oyun motorlarında kullanılmaktadır. Javascript ile daha dinamik web arayüzleri veya hesaplamalar yapılabilmektedir. 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.

Web sitesinde yapılan işlemler kullanıcının bilgisayarında 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 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 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 ve Javascript bilerek 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.

İndeks

Birinci Bölüm: Yazılım Nedir? Niye Önemlidir? Yazılım Çeşitleri Nelerdir?

Bülten Aboneliğinizi Aktifleştirin

Güncel makaleler, sektörel haberler ve ücretsiz etkinlikler için mail listemize abone olun.

Abone olduğunuz için teşekkür ederiz.

Bir şeyler yanlış gitti.

1 Yorum Yap

  1. Avatar
    • Ömer erors -

    • 10 Nisan 2019 at 20:15 pm

    Sade ve güzel bir yazı olmuş tebrikler

Bir Yorum Yap

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir