Dijital Dünyanın Mimarlığı
Web tasarımı, internet üzerinde görüntülenen web sitelerinin planlanması, oluşturulması ve düzenlenmesi sürecidir.
Kurumların dijital dünyadaki yüzünü oluşturur.
Kullanıcılarla etkileşim ve bilgi paylaşımı sağlar.
Ürün ve hizmetlerin 7/24 ulaşılabilir olmasını sağlar.
Öğelerin görsel ağırlığının eşit dağıtılması.
Gözün izleyeceği yolun önem sırasına göre belirlenmesi.
Tüm parçaların birbiriyle uyumlu bir bütün oluşturması.
Nasıl göründüğü.
Örn: Cam Ketçap Şişesi (Şık ama zor)
Nasıl hissettirdiği.
Örn: Plastik Şişe (Kolay kullanım)
Her ekrana uyum sağlayan esnek yapılar.
<html>: Belgenin kök etiketidir.
<head>: Meta bilgilerin (başlık, karakter seti) bulunduğu bölümdür.
<body>: Kullanıcının gördüğü tüm içerik buradadır.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>HTML5 Örnek</title>
</head>
<body>
<h1>Merhaba HTML5</h1>
</body>
</html>
<h1>-<h6>: Başlık hiyerarşisi.
<p>: Paragraf.
<strong>, <em>: Kalın ve İtalik vurgu.
<br>, <hr>: Satır atlama ve yatay çizgi.
<h1>Ana Başlık</h1>
<h2>Alt Başlık</h2>
<p>
<strong>Önemli</strong> ve
<em>vurgulu</em> metin.
</p>
Satır 1<br>Satır 2
<hr>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
<ol>
<li>Kurulum</li>
<li>Geliştirme</li>
</ol>
<a>: Link oluşturur.
<img>: Görsel ekler.
<!-- Link -->
<a href="google.com" target="_blank">Google</a>
<!-- Resim -->
<img src="resim.jpg" alt="Örnek" width="200">
<!-- Video -->
<video width="320" controls>
<source src="video.mp4" type="video/mp4">
</video>
♿ Erişilebilirlik İpucu: Semantik etiketler, ekran okuyucuların (screen readers) sayfayı görme engelli kullanıcılar için doğru şekilde seslendirmesini sağlar.
Sayfanın veya bir bölümün başlık kısmını tanımlar.
<header>
<h1>Web Dünyası</h1>
<img src="logo.png" alt="Logo">
</header>
Sayfanın ana navigasyon (menü) bağlantılarını içerir.
Genellikle <ul> (liste) yapısı ile birlikte kullanılır.
<nav>
<ul>
<li><a href="#anasayfa">Ana Sayfa</a></li>
<li><a href="#hakkimizda">Hakkımızda</a></li>
<li><a href="#iletisim">İletişim</a></li>
</ul>
</nav>
Sayfanın ana ve benzersiz içeriğini kapsar.
⚠️ Bir sayfada sadece bir tane <main> etiketi bulunmalıdır.
<main>
<h2>Bugünün Makalesi</h2>
<p>Web tasarımı öğrenmek...</p>
<!-- Ana içerik buraya -->
</main>
Konu bütünlüğü olan bölümleri gruplamak için kullanılır.
Genellikle bir başlığı (<h2>-<h6>) olur.
<section id="hizmetler">
<h2>Hizmetlerimiz</h2>
<p>Web Tasarım</p>
<p>SEO Çalışması</p>
</section>
Ana içerikle dolaylı yoldan ilişkili yan içerikleri kapsar.
<aside>
<h3>Kategoriler</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</aside>
Sayfanın veya bölümün alt bilgisini içerir.
<footer>
<p>© 2025 Örnek Site</p>
<a href="mailto:iletisim@ornek.com">Mail At</a>
</footer>
Kullanıcıdan veri almak için kullanılır.
<form>
<label>Ad:</label>
<input type="text" placeholder="Adınız">
<input type="email">
<input type="date">
<select>
<option>HTML</option>
</select>
<button>Gönder</button>
</form>
Verileri satır ve sütunlar halinde düzenler.
<table border="1">
<tr> <!-- Satır -->
<th>Ders</th> <!-- Başlık Sütunu -->
<th>Saat</th>
</tr>
<tr>
<td>HTML</td> <!-- Veri Sütunu -->
<td>4</td>
</tr>
</table>
| Ders | Saat |
|---|---|
| HTML | 4 |
<iframe>: Başka bir web sayfasını veya medyayı sayfa içine gömer.
Örn: Harita, YouTube videosu.
<iframe
src="https://www.openstreetmap.org/export/embed.html?bbox=28.97,41.00,29.00,41.02&layer=mapnik"
width="100%"
height="200"
style="border:none;">
</iframe>
<progress>: Tamamlanma yüzdesi (İndirme vb.).
<meter>: Belli bir aralıktaki değer (Disk doluluğu vb.).
<!-- İlerleme -->
<label>Dosya İndiriliyor:</label>
<progress value="75" max="100"></progress>
<!-- Ölçüm -->
<label>Disk Kullanımı:</label>
<meter value="0.8">80%</meter>
<!DOCTYPE html>
<html lang="tr">
...
<body>
<header>...</header>
<nav>...</nav>
<section>...</section>
<footer>...</footer>
</body>
</html>
CSS kodlarını 3 farklı şekilde kullanabiliriz:
<!-- Harici CSS Bağlantısı -->
<link rel="stylesheet" href="stil.css">
Metinleri biçimlendirmek için kullandığımız temel CSS özellikleri:
.kalin { font-weight: bold; }
.italik { font-style: italic; }
.cizgili { text-decoration: underline; }
p { color: red; }
.kutu { background-color: yellow; }
#baslik { font-size: 24px; }
p {
color: blue;
text-align: center;
text-transform: uppercase;
}
Yazı tipi, boyutu ve kalınlığı.
body {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.6;
}
CSS3 ile gelen yarı saydam renk desteği.
/* Kırmızı, Yeşil, Mavi, Saydamlık (0-1) */
.transparan {
color: rgba(255, 0, 0, 0.5); /* %50 Saydam Kırmızı */
}
Her HTML elemanı bir kutudur: Content + Padding + Border + Margin
div {
width: 200px; /* İçerik */
padding: 20px; /* İç Boşluk */
border: 2px solid black; /* Kenarlık */
margin: 10px; /* Dış Boşluk */
}
body {
background-image: url('bg.jpg');
background-size: cover; /* Resmi ekrana yayar */
background-position: center;
}
Kenarlıkları yuvarlatma özelliği.
div {
border: 1px solid #ddd;
border-radius: 15px; /* Köşeleri yumuşatır */
}
Nesnelere derinlik katar.
div {
/* X-ekseni Y-ekseni Bulanıklık Renk */
box-shadow: 5px 5px 10px gray;
}
Tüm satırı kaplar (div, p, h1)
Sadece içeriği kadar yer kaplar (span, a)
Satır içi ama boyut verilebilir.
block elemanlar her zaman yeni satırdan başlar ve mevcut genişliğin tamamını kaplar.
.kutu {
display: block;
width: 50%;
margin-bottom: 10px;
}
inline elemanlar sadece içerikleri kadar yer kaplar ve satır başı yapmazlar.
.vurgu {
display: inline;
padding: 5px;
background: yellow;
}
Hem inline hem de block özelliklerini taşır.
.kart {
display: inline-block;
width: 100px;
height: 100px;
}
relative: Normal akışa göre konum.
absolute: En yakın konumlanmış ataya göre.
fixed: Ekrana sabitler.
div {
position: relative;
top: 20px; /* Yukarıdan 20px it */
}
Tek boyutlu (satır/sütun) yerleşim modeli.
.container {
display: flex;
justify-content: space-between; /* Yatay hizalama */
align-items: center; /* Dikey hizalama */
}
İki boyutlu ızgara yerleşim sistemi.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 eşit sütun */
gap: 20px;
}
Farklı ekran boyutlarına göre stil değiştirme.
@media (max-width: 768px) {
body {
background-color: gray;
font-size: 14px;
}
}
Değişiklikleri zamana yayarak yumuşatır.
button {
background: blue;
transition: background 0.5s ease;
}
button:hover {
background: darkblue;
}
Öğeleri döndürme, büyütme/küçültme ve eğme işlemleri.
div:hover {
transform: scale(1.1) rotate(5deg);
}
Keyframes ile özel animasyonlar oluşturulur.
@keyframes hareket {
from { left: 0; }
to { left: 200px; }
}
div {
animation: hareket 2s infinite;
}
Bir elementin şeffaflık seviyesini belirler (0 ile 1 arası).
div {
opacity: 0.5; /* %50 görünürlük */
}
Elemanların üst üste binme sırasını belirler.
.onde {
z-index: 10; /* Daha üstte */
position: relative;
}
Taşan içeriğin nasıl görüneceğini belirler.
visible: Taşar ve görünür.
hidden: Taşanı gizler.
scroll: Kaydırma çubuğu ekler.
div {
height: 100px;
overflow: auto;
}
Web sayfasına dinamiklik ve işlevsellik katar.
// Etkileşim Örneği
const buton = document.querySelector('.btn-test');
buton.addEventListener('click', () => {
alert('Harika bir seçim!');
document.body.classList.toggle('dark-mode');
});
En popüler kod editörü.
Arayüz tasarım aracı.
Tarayıcı hata ayıklama konsolu.
Web sitenizin dosyalarının barındırıldığı 7/24 açık bilgisayardır.
İnsanların sitenize ulaşmak için yazdığı isimdir. (google.com)
Domain adresiniz, dosyalarınızın bulunduğu Hosting sunucusuna yönlendirir.
192.168.1.1 gibi numaralardır. İnternete bağlı her cihazın benzersiz bir IP'si vardır.
Siz 'google.com' yazdığınızda, DNS bunu '142.250.1.1' gibi bir IP adresine çevirir. İsimleri IP'lere bağlayan telefon rehberidir.
HTML ile iskelet, CSS ile stil, JS ile etkileşim.
Box Model, Flexbox ve Grid ile modern yerleşimler.
Responsive Tasarım ile her ekrana uygun görünüm.
Hosting, Domain ve DNS kavramları.
Sorularınız?
Zonguldak Bülent Ecevit Üniversitesi | Öğr.Gör.Tahsin ÇİLOĞLU
<style>
.kutu-trans {
width: 200px;
height: 120px;
background-color: cornflowerblue;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
margin: 20px;
transition: transform 0.3s ease;
cursor: pointer;
}
.kutu-trans:hover {
transform: scale(1.1);
}
</style>
<div class="kutu-trans">
Üzerime Gel
</div>
<style>
@keyframes hareket {
from { left: 0; }
to { left: 200px; }
}
.kutu-anim {
position: relative;
width: 100px;
height: 100px;
background-color: steelblue;
animation: hareket 2s infinite;
}
</style>
<div class="kutu-anim"></div>
<style>
.saydam {
opacity: 0.5; /* %50 görünürlük */
background-color: blue;
color: white;
padding: 20px;
width: 300px;
font-size: 18px;
}
</style>
<div class="saydam">
Bu div %50 saydamdır
</div>
<style>
.onde {
z-index: 10;
position: relative;
background-color: lightblue;
padding: 20px;
}
.arkada {
position: relative;
z-index: 1;
background-color: lightcoral;
padding: 20px;
margin-top: -30px;
}
</style>
<div class="arkada">Ben arkadayım</div>
<div class="onde">Ben öndeyim</div>
<style>
.kutu {
width: 300px;
height: 100px; /* Sabit yükseklik */
border: 2px solid #333;
padding: 10px;
overflow: auto; /* Taşarsa scroll çıkar */
font-size: 15px;
}
</style>
<div class="kutu">
Bu div'in yüksekliği 100px olarak tanımlanmıştır.
İçerik bu alandan daha uzun olduğu için overflow: auto
özelliği devreye girer ve hem dikey hem de gerekirse
yatay kaydırma çubuğu otomatik olarak görünür.
Bu sayede taşan içerik kaybolmaz ve kullanıcı
kaydırarak tamamını okuyabilir.
</div>
<style>
.btn-trans {
background: blue;
color: white;
padding: 12px 24px;
font-size: 16px;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background 0.5s ease; /* Renk geçişi */
}
.btn-trans:hover {
background: darkblue;
}
</style>
<button class="btn-trans">Üzerime Gel</button>
<style>
/* Masaüstü (varsayılan) görünüm */
.demo-body {
background-color: white;
font-size: 18px;
font-family: Arial, sans-serif;
padding: 20px;
text-align: center;
border: 1px solid #ccc;
}
.demo-kutu {
width: 60%;
background-color: lightblue;
padding: 20px;
margin: 40px auto;
text-align: center;
transition: all 0.3s;
}
/* Tablet ve mobil görünüm */
@media (max-width: 768px) {
.demo-body {
background-color: gray;
font-size: 14px;
}
.demo-kutu {
width: 90%;
background-color: lightcoral;
}
}
</style>
<div class="demo-body">
<div class="demo-kutu">
Ekranı küçült ve değişimi gözlemle
</div>
</div>
(Tarayıcı penceresini daraltarak test ediniz)
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 eşit sütun */
gap: 20px;
width: 100%;
}
.grid-kutu {
background-color: lightblue;
padding: 30px;
text-align: center;
font-size: 18px;
border: 1px solid #333;
color: black;
}
</style>
<div class="grid-container">
<div class="grid-kutu">Kutu 1</div>
<div class="grid-kutu">Kutu 2</div>
<div class="grid-kutu">Kutu 3</div>
<div class="grid-kutu">Kutu 4</div>
<div class="grid-kutu">Kutu 5</div>
<div class="grid-kutu">Kutu 6</div>
</div>
<style>
.container {
display: flex;
justify-content: space-between; /* Yatay hizalama */
align-items: center; /* Dikey hizalama */
width: 300px;
padding: 10px;
border: 2px solid black;
background-color: white; /* Görünürlük için eklendi */
}
.box {
background-color: lightblue;
padding: 10px;
color: black;
}
</style>
<div class="container">
<div class="box">Sol</div>
<div class="box">Sağ</div>
</div>
<style>
.box-relative {
position: relative;
top: 20px; /* Yukarıdan 20px it */
width: 200px;
padding: 10px;
background-color: lightblue;
border: 1px solid #333;
color: black;
}
</style>
<div class="box-relative">
Bu div 20px aşağı kaydırıldı
</div>
<style>
.kart {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
background-color: lightblue;
text-align: center;
line-height: 100px;
border: 1px solid #333;
color: black;
}
</style>
<div class="kart">1</div>
<div class="kart">2</div>
<div class="kart">3</div>
<style>
.vurgu {
display: inline;
padding: 5px;
background: yellow;
color: black;
}
</style>
<p>
Bu cümlede <span class="vurgu">önemli</span> bir kelime vurgulanmıştır.
Bu cümlede önemli bir kelime vurgulanmıştır.
<style>
.kutu {
display: block;
width: 50%;
margin-bottom: 10px;
background-color: lightblue;
padding: 10px;
border: 1px solid #333;
color: black;
}
</style>
<div class="kutu">Kutu 1</div>
<div class="kutu">Kutu 2</div>
<style>
.box-shadow-box {
/* X-ekseni Y-ekseni Bulanıklık Renk */
box-shadow: 5px 5px 10px gray;
width: 150px;
padding: 20px;
background-color: lightblue;
border: 1px solid #333;
color: black;
}
</style>
<div class="box-shadow-box">
Gölgelendirilmiş kutu
</div>
<style>
.border-box {
border: 1px solid #ddd;
border-radius: 15px; /* Köşeleri yumuşatır */
width: 200px;
padding: 20px;
background-color: lightblue;
color: black;
}
</style>
<div class="border-box">
Köşeleri yuvarlatılmış kutu
</div>
<style>
body {
background-image: url('bg.jpg');
background-size: cover; /* Resmi ekrana yayar */
background-position: center;
}
.kutu {
width: 250px;
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
margin: 50px;
color: black;
}
</style>
<div class="kutu">
Arka plan resimli sayfa
</div>
<style>
.rgba-box {
width: 100%;
padding: 20px;
font-size: 1.2rem;
font-weight: bold;
color: white;
margin-bottom: 10px;
border-radius: 8px;
}
.solid { background-color: rgb(255, 0, 0); } /* Tam Kırmızı */
.semi { background-color: rgba(255, 0, 0, 0.5); } /* %50 Saydam */
.light { background-color: rgba(255, 0, 0, 0.1); } /* %10 Saydam */
</style>
<div class="rgba-box solid">RGB (Tam)</div>
<div class="rgba-box semi">RGBA (%50)</div>
<div class="rgba-box light">RGBA (%10)</div>
<style>
.box-model-demo {
width: 200px; /* İçerik */
padding: 20px; /* İç Boşluk */
border: 2px solid black; /* Kenarlık */
margin: 10px; /* Dış Boşluk */
background-color: lightblue;
color: black;
}
</style>
<div class="box-model-demo">
Box Model Örneği
</div>
<style>
.font-demo {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.6;
color: black;
}
</style>
<p class="font-demo">
Bu metin Arial fontu ile, kalın ve satır aralığı
ayarlanmış şekilde gösterilmektedir.
</p>
Bu metin Arial fontu ile, kalın ve satır aralığı ayarlanmış şekilde gösterilmektedir.
<style>
.text-demo {
color: blue;
text-align: center;
text-transform: uppercase;
}
</style>
<p class="text-demo">
bu metin büyük harfe dönüştürüldü
</p>
bu metin büyük harfe dönüştürüldü
<style>
p { color: red; }
.kutu { background-color: yellow; }
#baslik { font-size: 24px; }
</style>
<h2 id="baslik">Başlık</h2>
<div class="kutu">
<p>Bu paragraf kırmızıdır</p>
</div>
Bu paragraf kırmızıdır
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Harici CSS Örneği</title>
<!-- Harici CSS Bağlantısı -->
<link rel="stylesheet" href="stil.css">
</head>
<body>
<p>Bu yazı harici CSS ile stillendirildi</p>
</body>
</html>
Bu yazı harici CSS ile stillendirildi
(Not: `stil.css` dosyası içindeki kodlar bu yazıyı stillendirir.)
<style>
.kalin {
font-weight: bold;
}
.italik {
font-style: italic;
}
.cizgili {
text-decoration: underline;
}
.hepsi {
font-weight: bold;
font-style: italic;
text-decoration: underline;
}
</style>
<p class="kalin">Bu metin kalındır</p>
<p class="italik">Bu metin italiktir</p>
<p class="cizgili">Bu metin altı çizgilidir</p>
<p class="hepsi">Bu metin hepsi uygulanmıştır</p>
Bu metin kalındır
Bu metin italiktir
Bu metin altı çizgilidir
Bu metin hepsi uygulanmıştır
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>HTML5 Uygulama</title>
</head>
<body>
<header>
<h1>HTML5 Ders Uygulaması</h1>
</header>
<nav>
<a href="#">Anasayfa</a> |
<a href="#">İletişim</a>
</nav>
<section>
<article>
<h2>HTML5 Nedir?</h2>
<p>HTML5 modern web standardıdır.</p>
</article>
</section>
<aside>
<p>Yan Bilgi Alanı</p>
</aside>
<footer>
<p>© 2026</p>
</footer>
</body>
</html>
HTML5 modern web standardıdır.