17/03/23 -

9 dk okuma

Kodlamaya Başlangıç Rehberi: HTML, CSS, JavaScript ve Frameworkler

Peakers’la güncel kalın

İçerik Tablosu

İçeriği Paylaş

Web geliştirme günümüzde birçok sektörün en önemli parçalarından biri haline geldi. İnternet kullanımına olan bu yoğun ilgi özünde web geliştirme kavramından geliyor. Web geliştirme süreçlerinde kullanılan araç ve yöntemler çok fazla önem taşıyor.

Bu yazıda sizlere HTML, CSS, JavaScript gibi temel web geliştirme teknolojilerini ve geliştirme sürecinde neler yapabileceğinizi anlatacağız. Web sitenizi geliştirirken nasıl bir yol izlemeniz gerektiğini öğrenebilmeniz için yolunuza ışık tutmaya çalışacağız.

HTML, CSS, JS Nedir, Ne İşe Yarar?

HTML, CSS ve JavaScript modern web geliştirme süreçlerinde en çok kullanılan temel web teknolojileridir.

HTML Nedir?

HTML, Hypertext Markup Language (Hareketli metin işaretleme dili) kelimelerinin kısaltmasıdır. Web sayfalarının iskeletini inşa etmek için kullanılan standart bir işaretleme dilidir. İlk çıktığından bu yana kullanılan web tarayıcıları, web sitelerini HTML kodlarını kullanarak görüntüler ve yorumlar.

HTML web site içerisinde yer alması gereken metin, görsel, video, vb. tüm materyallerin web site içerisinde hangi hiyerarşi ile görüntüleneceğini belirlemek için bir dizi etiket kullanılır. Kullanılan etiketler tarayıcılar tarafından okunur ve kullanıcılara gösterilir.

Yalnızca HTML Öğrenmek Sizi Web Geliştirmede Usta Yapar Mı?

Bu sorunun yanıtı kesinlikle hayır olacaktır. Web sitelerini biraz daha somutlaştırıp bir binaya benzetecek olursak, yalnızca HTML kullanılarak yapılmış bir web sitesi, yalnızca kolonları ve katları olan bir binaya benzer. Yarım kalmıştır, kullanılamaz ve estetik görünmez.

yalnızca-html-kullanılmış-bir-web-sitesi-örneği

HTML Sayfaların Temel Yapı Taşları Nelerdir?

Belgenin başlangıç ve sonunu tanımlayan <head></head> etiketleri aynı etikete genellikle (/)işareti eklendiği zaman bu etiketin kapandığını ve son bulduğunu bize belirtir.
Head etiketi isminden de anlaşılacağı gibi web sitesinin başlığı denilebilir. Site ile alakalı önemli bilgileri ve sayfa ayarları etiketleri içerisinde tanımlanır.
- Bunlara bir kaç örnek:
  - Sayfanın başlık metni,
  - Google aramalarda nasıl görüneceği,
  - Kullanılacak dosyalar.
Body etiketi ise web sitesinin gövdesidir. Kullanıcıların gördüğü tüm içerik Body etiketleri arasında yer alır. Body etiketi sayfada mutlaka Head etiketinden sonra gelmelidir. Kullanımı <body></body> şeklindedir.
Bir sayfanın başlığı varsa sayfa alt bilgisi de olmalıdır. Burada devreye Footer etiketi girer. Kullanımı zorunlu değildir ancak kullanıcıların sayfayı daha iyi anlamalarına yardımcı olması açısından kullanılması tavsiye edilir. <footer></footer> etiketi HTML5 ile birlikte tanıtılan bir etikettir.

Basit bir web sitesinin iskelet yapısı ise şu şekildedir:

<!DOCTYPE html>
<html>
  <head>
    <!-- head bölümünde sayfa bilgileri ve stil tanımları yer alır -->
  </head>
  <body>
    <header>
      <!-- sayfanın üst kısmında yer alan içerikler -->
    </header>
    <main>
      <!-- sayfanın ana içeriği -->
    </main>
    <footer>
      <!-- sayfanın alt kısmında yer alan içerikler -->
    </footer>
  </body>
</html>

CSS Nedir? Ne İşe Yarar?

CSS, Cascading Style Sheets (Basamaklı Stil Şablonları), web sayfalarının görüntüsünü ve düzenini kontrol etmek için kullanılan bir stil dilidir. Yukarıda belirttiğimiz örnekte kullanılan HTML yapısını biraz daha kullanıcı odaklı yapmak için CSS kodlarından yardım alırız. Aksi halde ekrana yalnızca düz metinler yansıtılacaktır.

Web sayfasının görsellerinin, fontlarının ve hiyerarşisinin nasıl olacağına büyük etkisi vardır. Bu, Front-end geliştiriciliğin ilk aşamalarından birisidir. Kullanıcılarla birazda olsa etkileşime geçebilen sayfalar yapmamıza olanak tanır.

CSS kullanımının yarı yarıya azaltıldılğı bir web formunun görüntüsü öncesi sonrası şeklinde şu şekilde yer alacaktır. CSS kullanımı tamamen kaldırılmasa bile oldukça büyük bir fark form elemanları üzerinde basitçe gözlemlenebilir.

form-elemanlarının-css-olmadan-görüntüsü

Popüler CSS frameworklerinden bazıları şunlardır;

JavaScript Nedir? JS Ne İşe Yarar?

Javascript, web sitelerinin kullanıcılar ile etkileşimli hale gelmesini sağlayan bir programlama dilidir. HTML, CSS ile beraber web geliştirmenin vazgeçilmez bir parçasıdır.

Javascript web sayfalarına kullanıcı ile etkileşime geçebilen özellikler eklemek için kullanılır. Öğrenme zorluğu HTML ve CSS kodlamaya göre daha zordur. JS kodlamaya geçmeden önce algoritma ve programlama temellerini iyice kavramanız tavsiye edilir.

JavaScript’in kapsamı HTML ve CSS e göre çok daha fazladır. Web sitesinde ekrana yansıtılan her nesneye animasyon efekti verebilir, verilerinizi görselleştirebilir ve hatta tarayıcı destekli uygulamalar bile hazırlayabilirsiniz.

Yalnızca Front-end değil Back-end tarafına da Javascript ile müdahale etmek yarı yarıya mümkündür. Örneğin sunucuya gidecek bir veri formatının doğruluğunu JavaScript kullanarak teyit edebilirsiniz.

Bunun yanı sıra kullanılacak olan bazı frameworkler ile tamamen bir back-end uygulaması geliştirmeniz JavaScript frameworkleri ile mümkündür.

Popüler JavaScript frameworklerinden bazıları şunlardır;

Frameworklerden farklı olarak JavaScript kütüphaneleri vardır. Bu kütüphaneler geliştiricinin işini kolaylaştırmak ve geliştirme sürecini hızlandırmak için hazırlanmış belirli bir dokümantasyonu olan kod parçacıklarından oluşur.

Popüler JavaScript kütüphanelerinden bazıları şunlardır;

jQuery
D3
Chart.js
Bootstrap

Framework Nedir?

Framework yazılım geliştirme sürecinde yazılımcıların işini kolaylaştırmak ve yazılım geliştirme sürecini hızlandırmak için oluşturulmuş kod parçacıklarıdır. Geliştiriciye hazır çözümler sunar. Frameworkler sadece web geliştiriciliğinde değil mobil uygulama geliştirme, masaüstü uygulama geliştirme ve oyun geliştirme gibi alanlarda da frameworklerden faydalanılır.

Popüler olan web geliştirme frameworklerinden bazıları şunlardır;

Front-end frameworkleri nelerdir?

Front-end frameworkleri ön uç geliştiricilerin kullandığı, daha önceden hazırlanmış kod parçacıklarıdır. Somut bir şekilde örnek vermek gerekirse, bir butonu stillendirmek için yazmamız gereken kod satırları ortalama şu şekilde olacaktır:

.btn {

display: inline-block;

font-weight: 400;

text-align: center;

white-space: nowrap;

vertical-align: middle;

user-select: none;

border: 1px solid transparent;

padding: 0.375rem 0.75rem;

font-size: 1rem;

line-height: 1.5;

border-radius: 0.25rem;

transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;

}

Bu kadar CSS kodu yazmak yerine bootstrap kütüphanesini web sitemizin head etiketleri arasında çağırırsak yalnızca buton nesnesine btn class’ını vermemiz yeterli olacaktır.

Bootstrap kütüphanesini ise web sitemizin <head> </head> etiketleri içerisine aşağıdaki kodu ekleyerek çağırabiliriz:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

Bu pratik çözümleri sağladığı için front-end frameworklerine ihtiyaç duyulur. Örneğin CSS Flex ve CSS Border sürekli tekrar edecek stilleri vermek yerine framework üzerinde bulunan ilgili classı çağırarak tek seferde ilgili stiller gerçekleştirebilirler.

Bazı popüler (CSS) front-end frameworkleri şunlardır;

Bootstrap
Materialize
Foundation
Semantic IoT
UIkit

Back-end Nedir? Back-end Frameworkleri Nelerdir?

Back-end kullanıcının gördüğü sistemin arka tarafında çalışmasını sağlayan kodlama biçimidir. Front-end kodlamanın aksine Back-end kodları, tarayıcı tarafında değil sunucu tarafından çalıştırılır. Bir web uygulamasında Back-end örnekleri şu şekilde olabilir;

Kullanıcı giriş sistemi,
Oturum yönetimi,
Api entegrasyonu,
Güvenlik işlemleri,
Veritabanı işlemleri,
E-ticaret sistemleri,
Dosya yükleme,
E-posta gönderme,
Real time uygulama geliştirme.

Back-end frameworkleri aynı diğer framework uygulamalarında olduğu gibi geliştiricinin işini kolaylaştırmak için önceden oluşturulmuş kullanıma hazır kod parçacıklarıdır. Yazılımcıya belirli kurallar çerçevesinde diğerlerinden farklı bir kodlama stili kazandırır.

Sonuç olarak, web geliştirme, yenilik için sınırsız alana sahip dinamik bir sektördür. Web geliştirme, SEO, İçerik Pazarlama, PPC ve daha bir çok alanda bilgi ve becerilerinizi geliştirmek istiyorsanız en iyi dijital pazarlama ajanslarından biri olan Digipeak’e göz atın.

Digipeak, HTML, CSS, JavaScript ve en yaygın kullanılan frameworkler üzerinde hızla yetkinleşmenize yardımcı olacak. Web sitenizi geliştirmek için uzman ekibimiz sizinle. Bizimle iletişime geçin ve potansiyelinizi ortaya çıkarın!

İçeriği Paylaş