8 dakika

HTML, CSS ve JavaScript Temelleri

HTML ve CSS Temelleri

HTML ve CSS, web sayfalarının temel yapı taşlarıdır. HTML, sayfanın içeriğini ve yapısını tanımlar, CSS ise bu içeriğin nasıl görüneceğini belirler. Bu iki teknoloji, modern web geliştirmede vazgeçilmezdir.

HTML Nedir?

HTML (HyperText Markup Language), web sayfalarının temel yapısını oluşturan işaretleme dilidir. HTML, metin, resim, bağlantılar, formlar ve diğer içerik türlerini tanımlamak için kullanılır. Bir HTML dosyası, tarayıcıya sayfanın nasıl düzenlenmesi gerektiğini bildirir. HTML, çeşitli etiketlerden oluşur ve her etiket belirli bir görevi yerine getirir.

Örneğin, basit bir HTML belgesi şu şekilde görünebilir:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<!DOCTYPE html>
<html>
<head>
    <title>Örnek Sayfa</title>
</head>
<body>
    <h1>Merhaba Dünya!</h1>
    <p>Bu bir örnek HTML sayfasıdır.</p>
</body>
</html>

CSS Nedir?

CSS (Cascading Style Sheets), HTML ile tanımlanan içeriğin görsel sunumunu kontrol eden stil dilidir. CSS, bir web sayfasının düzenini, renklerini, yazı tiplerini ve diğer stil özelliklerini belirler. Bu, web sayfalarının tutarlı ve çekici görünmesini sağlar.

CSS, HTML belgelerinden ayrı bir dosyada bulunabilir veya doğrudan HTML belgesine eklenebilir. Örneğin, aşağıda bir CSS örneği verilmiştir:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    color: #666;
    line-height: 1.6;
}

Temel HTML Etiketleri

HTML, farklı türde içerikleri tanımlamak için çeşitli etiketler kullanır. İşte bazı temel HTML etiketleri:

  • <html>: Belgenin kök etiketidir.
  • <head>: Belgeyle ilgili meta verileri içerir (başlık, stil dosyaları, vb.).
  • <title>: Sayfa başlığını tanımlar.
  • <body>: Belgenin içeriğini barındırır.
  • <h1>, <h2>, <h3>: Başlık etiketleridir ve başlıkların önem sırasını belirtir.
  • <p>: Paragraf etiketidir.
  • <a>: Bağlantı (anchor) etiketidir.
  • <img>: Resim etiketidir.
  • <ul>, <ol>, <li>: Liste etiketleridir (sırasız liste, sıralı liste ve liste öğesi).

Bu etiketler, web sayfalarının yapısını ve içeriğini tanımlamak için temel taşlardır.

CSS Seçicileri ve Özellikleri

CSS, HTML öğelerini seçmek ve stil vermek için çeşitli seçiciler kullanır. İşte temel CSS seçicileri ve bazı özellikler:

  • Element Seçicileri: HTML etiketlerini seçer. Örneğin, p tüm paragraf etiketlerini seçer.

    1
2
3

    p {
    color: blue;
}

  • Class Seçicileri: Belirli sınıfa sahip öğeleri seçer. Nokta (.) ile tanımlanır. Örneğin, .highlight sınıfına sahip öğeleri seçer.

    1
2
3

    .highlight {
    background-color: yellow;
}

  • ID Seçicileri: Belirli ID’ye sahip öğeleri seçer. Karesel (#) ile tanımlanır. Örneğin, #header ID’sine sahip öğeyi seçer.

    1
2
3

    #header {
    font-size: 24px;
}

  • Bağlam Seçicileri: Belirli bir hiyerarşi içindeki öğeleri seçer. Örneğin, div p bir div içindeki tüm paragraf etiketlerini seçer.

    1
2
3

    div p {
    margin: 10px;
}

  • Pseudoclass Seçicileri: Belirli durumdaki öğeleri seçer. Örneğin, a:hover fareyle üzerine gelinen bağlantıları seçer.

    1
2
3

    a:hover {
    text-decoration: underline;
}

CSS özellikleri, seçilen öğelere stil vermek için kullanılır. Renkler, yazı tipleri, kenar boşlukları, dolgu ve konumlandırma gibi özellikler CSS ile tanımlanır.

HTML ve CSS, birlikte kullanıldığında güçlü ve etkili web sayfaları oluşturmanızı sağlar. Bu temelleri anlamak, web geliştirme yolculuğunuzda sağlam bir başlangıç yapmanızı sağlar.

JavaScript ve Dinamik İçerik

JavaScript, web sayfalarına dinamik ve etkileşimli özellikler eklemek için kullanılan güçlü bir programlama dilidir. HTML ve CSS ile birlikte çalışarak, kullanıcı etkileşimlerine cevap verebilen, veri işleyebilen ve sayfa içeriğini dinamik olarak değiştirebilen uygulamalar oluşturmayı sağlar.

JavaScript Nedir?

JavaScript, web tarayıcıları tarafından doğrudan çalıştırılabilen bir betik dilidir. İlk olarak 1995 yılında Netscape tarafından geliştirilen JavaScript, günümüzde tüm modern tarayıcılarda desteklenir ve web geliştirmede standart bir dil haline gelmiştir. JavaScript, hem istemci (client-side) hem de sunucu (server-side) tarafında çalışabilen esnek bir dildir. Web sayfalarına etkileşimli özellikler eklemek, form doğrulama, animasyonlar, veri işleme ve daha birçok işlev için kullanılır.

Temel JavaScript Kavramları

JavaScript öğrenirken temel kavramları anlamak önemlidir. İşte bazı temel JavaScript kavramları:

Değişkenler: Veri saklamak için kullanılır. var, let ve const anahtar kelimeleri ile tanımlanır.

1
2

let isim = "Ahmet";
const yas = 30;

Veri Türleri: JavaScript’te çeşitli veri türleri vardır: String, Number, Boolean, Object, Array, Function vb.

1
2
3
4
5

let metin = "Merhaba";
let sayi = 72;
let dogruMu = true;
let dizi = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let nesne = { ad: "Ayşe", yas: 25, meslek: "öğrenci" };

Fonksiyonlar: Belli bir görevi yerine getirmek için kullanılan kod bloklarıdır.

1
2
3

function selamVer(isim) {
    return "Merhaba " + isim;
}

Koşullar: Belirli şartlara göre kodun farklı yollar izlemesini sağlar.

1
2
3
4
5

if (yas > 18) {
    console.log("Yetişkinsiniz.");
} else {
    console.log("Çocuksunuz.");
}

Döngüler: Belirli bir işlemi tekrar etmek için kullanılır.

1
2
3

for (let i = 0; i < 5; i++) {
    console.log(i);
}

DOM Manipülasyonu

DOM (Document Object Model), web sayfasının yapısını temsil eden bir modeldir. JavaScript ile DOM’u manipüle ederek sayfanın içeriğini ve yapısını dinamik olarak değiştirebiliriz. İşte bazı temel DOM manipülasyon işlemleri:

Element Seçimi: HTML elementlerini seçmek için kullanılır.

1
2
3

let baslik = document.getElementById("baslik");
let paragraflar = document.getElementsByClassName("paragraf");
let linkler = document.querySelectorAll("a");

İçerik Değiştirme: Seçilen elementlerin içeriğini değiştirmek için kullanılır.

1
2

baslik.textContent = "Yeni Başlık";
paragraflar[0].innerHTML = "<strong>Koyu Metin</strong>";

Stil Değiştirme: Seçilen elementlerin stilini değiştirmek için kullanılır.

1
2

baslik.style.color = "red";
paragraflar[0].style.fontSize = "20px";

Olay Dinleyicileri: Kullanıcı etkileşimlerine cevap vermek için kullanılır.

1
2
3

baslik.addEventListener("click", function() {
  alert("Başlığa tıkladınız!");
});

AJAX ve Asenkron Programlama

AJAX (Asynchronous JavaScript and XML), web sayfalarının sayfayı yeniden yüklemeden arka planda sunucu ile veri alışverişi yapmasını sağlar. Bu, daha hızlı ve dinamik kullanıcı deneyimleri oluşturmak için kullanılır. AJAX işlemleri genellikle XMLHttpRequest veya fetch API kullanılarak gerçekleştirilir.

XMLHttpRequest Kullanımı:

1
2
3
4
5
6
7
8

let xhr = new XMLHttpRequest();
xhr.open("GET", "data.json", true);
xhr.onload = function() {
  if (xhr.status === 200) {
      console.log(xhr.responseText);
  }
};
xhr.send();

fetch API Kullanımı:

1
2
3
4

fetch("data.json")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Hata:", error));

Asenkron programlama, işlemlerin ardışık olarak değil, belirli olayların tamamlanmasını beklemeden yürütülmesini sağlar. Bu, özellikle uzun süren işlemler (örneğin, veri çekme) sırasında kullanıcı arayüzünün donmaması için önemlidir.

Promise Kullanımı:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

let promise = new Promise((resolve, reject) => {
  let basarili = true;
  if (basarili) {
      resolve("İşlem başarılı!");
  } else {
      reject("İşlem başarısız.");
  }
});

promise.then(mesaj => console.log(mesaj))
     .catch(hata => console.error(hata));

async/await Kullanımı:

1
2
3
4
5
6
7
8
9

async function veriGetir() {
  try {
      let response = await fetch("data.json");
      let data = await response.json();
      console.log(data);
  } catch (error) {
      console.error("Hata:", error);
  }
}

JavaScript, web sayfalarına dinamik ve etkileşimli özellikler eklemek için güçlü bir araçtır. Temel kavramları ve DOM manipülasyonunu öğrenmek, geliştiricilere daha kullanıcı dostu ve etkili web uygulamaları oluşturma yeteneği sağlar. Asenkron programlama teknikleri, kullanıcı deneyimini iyileştirir ve uygulamaların daha hızlı ve duyarlı olmasını sağlar.

Tabii, işte “Frontend Çerçeveleri ve Kütüphaneleri” başlığı altındaki React, Angular ve Vue.js için metinler ve kısa kod örnekleri:

Frontend Çerçeveleri ve Kütüphaneleri

Frontend çerçeveleri ve kütüphaneleri, web geliştirme sürecini hızlandırmak ve kolaylaştırmak için kullanılan araçlardır. Bu araçlar, kullanıcı arayüzlerinin daha verimli ve sürdürülebilir bir şekilde geliştirilmesini sağlar. En popüler frontend çerçeveleri ve kütüphanelerinden bazıları React, Angular ve Vue.js’dir.

React

React, Facebook tarafından geliştirilmiş açık kaynaklı bir JavaScript kütüphanesidir. Kullanıcı arayüzleri oluşturmak için kullanılır ve özellikle tek sayfa uygulamaları (Single Page Applications - SPA) geliştirmede yaygın olarak tercih edilir. React’in temel özellikleri şunlardır:

  • Bileşen Tabanlı Mimari: React, kullanıcı arayüzlerini yeniden kullanılabilir bileşenlere böler. Bu bileşenler, bağımsız olarak geliştirilip birleştirilebilir.
  • JSX: React, JavaScript ve HTML benzeri bir dil olan JSX kullanarak bileşenleri tanımlar. JSX, HTML benzeri sözdizimi ile JavaScript’i birleştirir.
  • Virtual DOM: React, gerçek DOM yerine sanal DOM (Virtual DOM) kullanır. Bu, performansı artırır ve yalnızca gerekli bileşenleri güncelleyerek DOM manipülasyonlarını optimize eder.
  • State Yönetimi: React, bileşenlerin durumunu (state) yönetmek için güçlü bir sistem sunar. Durum değişiklikleri, kullanıcı arayüzünün otomatik olarak yeniden render edilmesini sağlar.

React ile basit bir bileşen örneği:

1
2
3
4
5
6
7
8
9

import React from 'react';

class Selamla extends React.Component {
    render() {
        return <h1>Merhaba, {this.props.isim}!</h1>;
    }
}

export default Selamla;

Angular

Angular, Google tarafından geliştirilmiş açık kaynaklı bir frontend framework’tür. Tam özellikli bir framework olan Angular, karmaşık ve büyük ölçekli web uygulamalarını geliştirmek için güçlü araçlar sunar. Angular’ın temel özellikleri şunlardır:

  • MVVM Mimarisi: Angular, Model-View-ViewModel (MVVM) mimarisini kullanır. Bu, veri bağlama ve kullanıcı arayüzü bileşenlerini ayırarak kodun daha düzenli ve yönetilebilir olmasını sağlar.
  • TypeScript: Angular, JavaScript’in bir üst kümesi olan TypeScript ile yazılmıştır. TypeScript, statik tip denetimi ve modern JavaScript özellikleri sunar.
  • İki Yönlü Veri Bağlama: Angular, kullanıcı arayüzü ile model arasındaki veri senkronizasyonunu otomatik olarak yönetir. Bu, form verilerinin ve kullanıcı girişlerinin kolayca yönetilmesini sağlar.
  • Yönlendirme: Angular, tek sayfa uygulamaları için güçlü bir yönlendirme sistemi sunar. Bu, farklı sayfalar ve bileşenler arasında gezinmeyi kolaylaştırır.

Angular ile basit bir bileşen örneği:

1
2
3
4
5
6
7
8
9

import { Component } from '@angular/core';

@Component({
  selector: 'app-selamla',
  template: `<h1>Merhaba, {{ isim }}!</h1>`,
})
export class SelamlaComponent {
  isim: string = 'Dünya';
}

Vue.js

Vue.js, kullanıcı arayüzleri ve tek sayfa uygulamaları geliştirmek için kullanılan açık kaynaklı bir JavaScript framework’tür. Vue.js, esnek ve kolay öğrenilebilir yapısıyla dikkat çeker. Vue.js’in temel özellikleri şunlardır:

  • Bileşen Tabanlı Mimari: Vue.js, React gibi bileşen tabanlı bir mimari kullanır. Bu, kullanıcı arayüzlerinin modüler ve yeniden kullanılabilir bileşenler olarak geliştirilmesini sağlar.
  • Basit ve Esnek: Vue.js, düşük öğrenme eğrisi ile geliştiricilere hızlı bir başlangıç yapma imkanı sunar. Aynı zamanda, daha büyük projeler için gerekli olan tüm özellikleri de içerir.
  • Reaktif Veri Bağlama: Vue.js, verilerin ve DOM’un otomatik olarak senkronize edilmesini sağlayan reaktif bir veri bağlama sistemi kullanır.
  • Vue CLI: Vue.js, projeleri hızlıca başlatmak ve yönetmek için güçlü bir komut satırı aracı (CLI) sunar.

Vue.js ile basit bir bileşen örneği:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<template>
  <h1>Merhaba, {{ isim }}!</h1>
</template>

<script>
export default {
  data() {
    return {
      isim: 'Dünya'
    };
  }
};
</script>

React, Angular ve Vue.js, modern web uygulamaları geliştirmek için güçlü ve popüler araçlardır. Her biri, farklı projeler ve gereksinimler için çeşitli avantajlar sunar. Hangi çerçeveyi veya kütüphaneyi kullanacağınız, projenizin ihtiyaçlarına ve ekibinizin yetkinliklerine bağlıdır.