Puan
3
Çözümler
0
- Katılım
- 2 Kasım 2025
- Mesajlar
- 19
- Tepkime puanı
- 2
- Puan
- 3
- Konum
- Kütahya
- Web sitesi
- www.grafik.tr
Web Tasarımı & Kodlama (HTML, CSS, JavaScript) – Başlangıçtan Uzmanlığa Kapsamlı Rehber
Web teknolojileri, günümüz dijital dünyasının omurgasını oluşturan temel yapı taşlarıdır. Bir web sitesinin tasarlanması, yapılandırılması ve etkileşimli hale getirilmesi için kullanılan üç ana teknoloji: HTML, CSS ve JavaScript dır. Bu makalede, web tasarımı ve kodlamaya adım atmak isteyenler için hem öğretici hem de ileri seviyeye hazırlayıcı detaylı bir rehber bulacaksınız.
1. Web Tasarımına Giriş
Web tasarımı, bir web sitesinin görsel ve yapısal bütünlüğünü oluşturan süreci ifade eder. Bu süreç, kullanıcı deneyimi (UX), kullanıcı arayüzü (UI), tipografi, renk teorisi, hizalama, düzen ve etkileşimli öğeleri içerir.
Modern web tasarımında şu temel kavramlar önemlidir:
✔ Responsive Tasarım
Tüm cihazlarda (telefon, tablet, masaüstü) uyumlu görünüm sağlar.
CSS Flexbox, CSS Grid, media query ve modern UI framework’leri bu amaçla kullanılır.
✔ Kullanıcı Deneyimi (UX)
Basit, anlaşılır ve hızlı bir kullanım sunan arayüzler hedeflenir.
✔ UI Tasarımı
Görseller, ikonlar, butonlar, tipografi ve renk düzenleri ile ilgilidir.
2. HTML (HyperText Markup Language)
HTML, bir web sitesinin iskelet yapısıdır. Sitenin içerik düzeni, başlıkları, paragrafları, bağlantıları, form alanları ve tüm yapısal elemanları HTML ile oluşturulur.
2.1 HTML’in Temel Yapısı
html
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Web Tasarımına Giriş</title>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu bir HTML paragraf örneğidir.</p>
</body>
</html>
2.2 En Önemli HTML Etiketleri
Etiket ........................................................................Açıklama
<h1>–<h6>..............................................................Başlık etiketleri
<p> .........................................................................Paragraf
<a>......................................................................... Bağlantı
<img>...................................................................... Görsel
<div>................................................................ ..Blok elemanı
<span>.................................................................Inline eleman
<form>..................................................................Form yapıları
<input>..............................................................Kullanıcı giriş alanları
2.3 Semantik HTML
SEO ve erişilebilirlik için önemlidir.
Örnekler:
* <header>
* <main>
* <footer>
* <nav>
* <article>
* <section>
3. CSS (Cascading Style Sheets)
CSS, HTML ile oluşturulan yapıya tasarım, renk, düzen ve stil kazandırır.
3.1 CSS Bağlama Yöntemleri
html
<!-- Harici dosya -->
<link rel="stylesheet" href="style.css">
<!-- Dahili stil -->
<style>
body { background: #f2f2f2; }
</style>
<!-- Satır içi stil -->
<p style="color: red;">Örnek</p>
3.2 CSS Seçicileri
* p { } → etikete göre
* .class { } → sınıfa göre
* #id { } → id'ye göre
* div p → iç içe seçici
* a:hover → etkileşim seçicisi
3.3 Flexbox Örneği
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
}
3.4 Grid Sistemi
css
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
3.5 Responsive Tasarım
css
@media (max-width: 768px) {
.menu { flex-direction: column; }
}
4. JavaScript – Web Sitelerine Hayat Veren Teknoloji
JavaScript, bir web sitesine dinamik davranış kazandırmak için kullanılır. Form doğrulama, animasyonlar, veri çekme, modal pencereler, scroll efektleri gibi tüm dinamik işlevler JS ile yapılır.
4.1 Basit Bir JS Örneği
html
<button onclick="selam()">Tıkla</button>
<script>
function selam() {
alert("Merhaba! JavaScript çalışıyor.");
}
</script>
4.2 DOM Manipülasyonu
javascript
document.getElementById("baslik").innerText = "Yeni Başlık";
4.3 Event Listener Kullanımı
javascript
document.querySelector("button").addEventListener("click", function() {
console.log("Butona tıklandı!");
});
4.4 Fetch API ile Veri Çekme
javascript
fetch("https://api.example.com/data"
)
.then(res => res.json())
.then(data => console.log(data));
5. Modern Web Geliştirme Araçları
Güncel web geliştirme süreçlerinde kullanılan popüler teknolojiler:
✔ CSS Frameworkleri
* Tailwind CSS
* Bootstrap
* Bulma
✔ JavaScript Kütüphaneleri & Frameworkleri
* React
* Vue.js
* Angular
* Svelte
✔ Yardımcı Araçlar
* Git & GitHub
* VSCode
* Figma / Adobe XD
* NPM / Node.js
6. SEO Uyumlu Web Geliştirme İpuçları
6.1 Teknik SEO
* Doğru HTML etiketleme
* Semantik yapı
* Hız optimizasyonu
* Mobile-first tasarım
* Görsellerde alt kullanımı
6.2 İçerik SEO’su
* Doğru başlık hiyerarşisi
* Anlaşılır URL yapısı
* Zengin meta açıklamaları
6.3 Performans Optimizasyonu
* CSS ve JS minify işlemleri
* Lazy-load görseller
* CDN kullanımı
7. Yeni Başlayanlar İçin Yol Haritası
1 . HTML öğren
2 . CSS ile tasarım yapmayı öğren
3 . JavaScript temellerini öğren
4 . Responsive tasarım mantığını kavra
5 . Git ile versiyon kontrolüne geç
6 . Modern framework’leri öğrenmeye başla
7 . API entegrasyonlarını kavra
8 . Portfolio sitesi oluştur
8. Sonuç
Web tasarımı ve kodlama, günümüzün en değerli becerilerinden biridir. HTML ile sitenin iskeleti kurulur, CSS ile görsel tasarım şekillendirilir, JavaScript ile siteye etkileşim kazandırılır. Bu üç teknolojide uzmanlaşmak, profesyonel seviyede web geliştirme için güçlü bir temel oluşturur.
Web teknolojileri, günümüz dijital dünyasının omurgasını oluşturan temel yapı taşlarıdır. Bir web sitesinin tasarlanması, yapılandırılması ve etkileşimli hale getirilmesi için kullanılan üç ana teknoloji: HTML, CSS ve JavaScript dır. Bu makalede, web tasarımı ve kodlamaya adım atmak isteyenler için hem öğretici hem de ileri seviyeye hazırlayıcı detaylı bir rehber bulacaksınız.
1. Web Tasarımına Giriş
Web tasarımı, bir web sitesinin görsel ve yapısal bütünlüğünü oluşturan süreci ifade eder. Bu süreç, kullanıcı deneyimi (UX), kullanıcı arayüzü (UI), tipografi, renk teorisi, hizalama, düzen ve etkileşimli öğeleri içerir.
Modern web tasarımında şu temel kavramlar önemlidir:
✔ Responsive Tasarım
Tüm cihazlarda (telefon, tablet, masaüstü) uyumlu görünüm sağlar.
CSS Flexbox, CSS Grid, media query ve modern UI framework’leri bu amaçla kullanılır.
✔ Kullanıcı Deneyimi (UX)
Basit, anlaşılır ve hızlı bir kullanım sunan arayüzler hedeflenir.
✔ UI Tasarımı
Görseller, ikonlar, butonlar, tipografi ve renk düzenleri ile ilgilidir.
2. HTML (HyperText Markup Language)
HTML, bir web sitesinin iskelet yapısıdır. Sitenin içerik düzeni, başlıkları, paragrafları, bağlantıları, form alanları ve tüm yapısal elemanları HTML ile oluşturulur.
2.1 HTML’in Temel Yapısı
html
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Web Tasarımına Giriş</title>
</head>
<body>
<h1>Merhaba Dünya!</h1>
<p>Bu bir HTML paragraf örneğidir.</p>
</body>
</html>
2.2 En Önemli HTML Etiketleri
Etiket ........................................................................Açıklama
<h1>–<h6>..............................................................Başlık etiketleri
<p> .........................................................................Paragraf
<a>......................................................................... Bağlantı
<img>...................................................................... Görsel
<div>................................................................ ..Blok elemanı
<span>.................................................................Inline eleman
<form>..................................................................Form yapıları
<input>..............................................................Kullanıcı giriş alanları
2.3 Semantik HTML
SEO ve erişilebilirlik için önemlidir.
Örnekler:
* <header>
* <main>
* <footer>
* <nav>
* <article>
* <section>
3. CSS (Cascading Style Sheets)
CSS, HTML ile oluşturulan yapıya tasarım, renk, düzen ve stil kazandırır.
3.1 CSS Bağlama Yöntemleri
html
<!-- Harici dosya -->
<link rel="stylesheet" href="style.css">
<!-- Dahili stil -->
<style>
body { background: #f2f2f2; }
</style>
<!-- Satır içi stil -->
<p style="color: red;">Örnek</p>
3.2 CSS Seçicileri
* p { } → etikete göre
* .class { } → sınıfa göre
* #id { } → id'ye göre
* div p → iç içe seçici
* a:hover → etkileşim seçicisi
3.3 Flexbox Örneği
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
}
3.4 Grid Sistemi
css
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
3.5 Responsive Tasarım
css
@media (max-width: 768px) {
.menu { flex-direction: column; }
}
4. JavaScript – Web Sitelerine Hayat Veren Teknoloji
JavaScript, bir web sitesine dinamik davranış kazandırmak için kullanılır. Form doğrulama, animasyonlar, veri çekme, modal pencereler, scroll efektleri gibi tüm dinamik işlevler JS ile yapılır.
4.1 Basit Bir JS Örneği
html
<button onclick="selam()">Tıkla</button>
<script>
function selam() {
alert("Merhaba! JavaScript çalışıyor.");
}
</script>
4.2 DOM Manipülasyonu
javascript
document.getElementById("baslik").innerText = "Yeni Başlık";
4.3 Event Listener Kullanımı
javascript
document.querySelector("button").addEventListener("click", function() {
console.log("Butona tıklandı!");
});
4.4 Fetch API ile Veri Çekme
javascript
fetch("https://api.example.com/data"
)
.then(res => res.json())
.then(data => console.log(data));
5. Modern Web Geliştirme Araçları
Güncel web geliştirme süreçlerinde kullanılan popüler teknolojiler:
✔ CSS Frameworkleri
* Tailwind CSS
* Bootstrap
* Bulma
✔ JavaScript Kütüphaneleri & Frameworkleri
* React
* Vue.js
* Angular
* Svelte
✔ Yardımcı Araçlar
* Git & GitHub
* VSCode
* Figma / Adobe XD
* NPM / Node.js
6. SEO Uyumlu Web Geliştirme İpuçları
6.1 Teknik SEO
* Doğru HTML etiketleme
* Semantik yapı
* Hız optimizasyonu
* Mobile-first tasarım
* Görsellerde alt kullanımı
6.2 İçerik SEO’su
* Doğru başlık hiyerarşisi
* Anlaşılır URL yapısı
* Zengin meta açıklamaları
6.3 Performans Optimizasyonu
* CSS ve JS minify işlemleri
* Lazy-load görseller
* CDN kullanımı
7. Yeni Başlayanlar İçin Yol Haritası
1 . HTML öğren
2 . CSS ile tasarım yapmayı öğren
3 . JavaScript temellerini öğren
4 . Responsive tasarım mantığını kavra
5 . Git ile versiyon kontrolüne geç
6 . Modern framework’leri öğrenmeye başla
7 . API entegrasyonlarını kavra
8 . Portfolio sitesi oluştur
8. Sonuç
Web tasarımı ve kodlama, günümüzün en değerli becerilerinden biridir. HTML ile sitenin iskeleti kurulur, CSS ile görsel tasarım şekillendirilir, JavaScript ile siteye etkileşim kazandırılır. Bu üç teknolojide uzmanlaşmak, profesyonel seviyede web geliştirme için güçlü bir temel oluşturur.