Basit Web Sitesi HTML Kodları (2026 Nihai Rehber & Şablonlar)
İnternet dünyasında bir iz bırakmak, markanızı tanıtmak veya kişisel yeteneklerinizi sergilemek istiyorsanız, dijital varlığınızın temeli olan bir web sitesine sahip olmanız şarttır. Birçok insan web tasarımını, yalnızca üst düzey yazılım mühendislerinin anlayabileceği, karmaşık matematiksel algoritmalar ve çözülmesi zor sistemler bütünü olarak hayal eder. Ancak bu yaygın bir yanılgıdır. İşin özüne indiğinizde, sadece basit web sitesi HTML kodları kullanarak ve temel web mantığını kavrayarak saniyeler içinde kendi işlevsel sitenizi ayağa kaldırabilirsiniz.
Bu devasa ve kapsamlı rehberde, sizi kodlama dünyasına ilk adımını atan bir başlangıç seviyesi kullanıcısından alıp, temel düzeyde kod okuyabilen, kendi web sayfalarını tasarlayabilen ve hataları ayıklayabilen (debug) bir web geliştiricisine dönüştüreceğiz. Üstelik bu süreçte bilgisayarınıza ağır IDE’ler (Geliştirme Ortamları), sunucu yazılımları veya karmaşık programlar kurmanıza hiç gerek kalmayacak. Bu rehberde öğreneceğiniz tüm kodları, sitemizde tamamen ücretsiz olarak sunduğumuz online html css editörü üzerinden anında, tarayıcınızın içinde test edebileceksiniz.
Hazırsanız, internetin yapı taşlarını anlamaya ve kendi dijital evinizi inşa etmeye başlayalım!
Bölüm 1: HTML Nedir ve Web Siteleri Nasıl Çalışır?
HTML (HyperText Markup Language), Türkçeye “Hiper Metin İşaretleme Dili” olarak çevrilen ve web sayfalarının ana iskeletini oluşturan evrensel bir standarttır. HTML geleneksel anlamda bir programlama dili (Python, C++ veya Java gibi) değildir; o bir “işaretleme” dilidir. Görevi, internet tarayıcısına (Google Chrome, Safari, Mozilla Firefox vb.) sayfadaki hangi içeriğin ana başlık, hangisinin düz bir paragraf metni, hangisinin tıklanabilir bir buton veya medya görseli olduğunu anlatmaktır.
Bir binanın inşaat sürecini gözünüzde canlandırın:
- HTML: O binanın betonarme kolonları, tuğlaları, odalarının yerleşimi ve temel iskeletidir.
- CSS (Cascading Style Sheets): O binanın dış cephe boyası, duvar kağıtları, mobilyaları ve iç mimarisidir. Tasarımı ve estetiği sağlar.
- JavaScript (JS): O binadaki elektrik tesisatı, otomatik açılan kapılar, asansör sistemi ve interaktif işlevlerdir.
Eğer internette var olmak ve projelerinizi hayata geçirmek istiyorsanız, öğrenmeniz gereken ilk ve en temel şey html site kurma kodları ve bu işaretleme dilinin çalışma mantığıdır.
Web Sayfasının Temel Anatomisi ve İskelet Yapısı
İster dünyanın en çok ziyaret edilen devasa bir e-ticaret platformu olsun, ister sadece bir sayfadan oluşan basit bir kişisel blog olsun; her web sitesinin arka planında (kaynak kodlarında) mutlaka bulunması gereken zorunlu bir HTML iskeleti vardır. Tarayıcılar bu iskeleti görmeden sayfanızı anlamlandıramaz ve doğru şekilde ekrana çizemez (render edemez).
İşte her web projenizde kopyalayıp kullanacağınız, güncel HTML5 standartlarına uygun o temel iskelet yapısı:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Benim İlk Web Sitem</title>
<!-- Burası arama motorları ve tarayıcılar içindir -->
</head>
<body>
<!-- Kullanıcıların ekranda göreceği her şey buraya yazılır! -->
<h1>Web Siteme Hoş Geldiniz!</h1>
<p>Bu, sıfırdan kodladığım ilk web sayfası deneyimim.</p>
</body>
</html>
Yukarıdaki kodu teknik olarak biraz detaylandıralım:
-
<!DOCTYPE html>: Tarayıcıya bu belgenin eski ve köhne bir yapı olmadığını, en modern standart olan HTML5 ile yazıldığını kesin olarak bildirir. <html lang="tr">: Tüm sayfanın başlangıcını temsil eder.lang="tr"niteliği, sitenizin dilinin Türkçe olduğunu Google ve diğer arama motorlarına bildirerek bölgesel SEO’nuza büyük katkı sağlar.<head>: Sitenin kontrol odasıdır. Web sitenizi ziyaret eden kullanıcılar bu etiketin içindekileri ekranda görsel olarak görmezler. Sitenin sekme başlığı, Türkçe karakterlerin bozulmasını engelleyen (charset="UTF-8") ayarlar ve dışarıdan çağrılan CSS/Font dosyaları burada barındırılır.-
<body>: Sitenizin gerçek vitrinidir. Resimler, uzun metinler, tablolar, menüler, footer alanları… Kısacası ekranda ne görünmesini istiyorsanız istisnasız hepsi bu açılış ve kapanış gövde etiketinin içine yazılmalıdır.
Şimdi ilk pratiğimizi yapalım! Yukarıdaki kodu kopyalayın, Kod Önizleme Aracı platformumuzun üst menüsünde bulunan Canlı HTML Editörü sayfamızı açın ve sol taraftaki “HTML” kutusuna yapıştırarak “Çalıştır” butonuna basın. Sağ taraftaki beyaz ekranda kendi sitenizin canlı halini anında göreceksiniz.
Bölüm 2: En Çok Kullanılan Temel HTML Etiketleri
Kendi sitenizi kurgularken ihtiyaç duyacağınız temel yapı taşlarını öğrenmeye başlayalım. HTML dili genellikle bir <etiket> ile açılır ve eğik çizgi içeren bir </etiket> ile kapatılarak kullanılır. Arada kalan kısım ise içeriğin kendisidir.
1. Başlıklar (Headings: H1’den H6’ya)
Arama motoru botları (Googlebot) sitenizi tararken başlıklara inanılmaz derecede önem verir. Başlıklar sayfanızın hiyerarşisini belirler. En büyük ve SEO açısından en önemli başlık <h1> iken, en küçüğü ve detayı <h6> etiketidir. Unutmayın; sağlıklı bir web sayfasında SEO (Arama Motoru Optimizasyonu) açısından sadece bir tane <h1> bulunmalıdır. Diğer alt başlıklar <h2>, <h3> şeklinde bir hiyerarşiyle inmelidir.
<h1>Sitenizin Ana Konusu (Örn: Dijital Pazarlama Ajansı)</h1>
<h2>Hizmetlerimiz</h2>
<h3>Sosyal Medya Yönetimi</h3>
<p>Sosyal medya yönetiminde uyguladığımız stratejiler...</p>
2. Paragraflar ve Metin Biçimlendirme
Makaleler, ürün açıklamaları veya hakkımızda yazıları girmek için <p> (paragraph) etiketini kullanırız. Web sitenize ekleyeceğiniz metinleri vurgulamak veya daha okunaklı hale getirmek için çeşitli biçimlendirme etiketleri mevcuttur.
<p>Bu standart bir metin paragrafıdır. Ziyaretçilerinize vermek istediğiniz asıl mesajı bu etiketlerin içerisine yazmalısınız.</p>
<p>Kullanıcıların dikkatini çekmek istediğiniz kelimeleri <strong>kalın (bold) vurgu</strong> ile belirtebilir veya teknik terimleri <em>italik (eğik) metin</em> olarak yazabilirsiniz.</p>
Profesyonel Bir İpucu: Sitenizin kodlama veya tasarım aşamasındayken, gerçek metinleri yazmadan önce sayfa düzenini (layout) test etmek isteyebilirsiniz. Boşlukları nasıl dolduracağınızı düşünüyorsanız, projelerinizde kullanmak üzere hızlıca örnek taslak metinler oluşturmak için ücretsiz Lorem Ipsum (Sahte Metin) Üretici aracımızı kullanabilirsiniz.
3. Bağlantılar (Links / Anchor Tags)
İnterneti devasa bir ağ (“web”) yapan yegane şey sayfalar arasındaki linklerdir. Bir sayfadan diğerine geçiş yapmak, menü oluşturmak veya dış bir siteye yönlendirme yapmak için <a> (anchor) etiketini kullanırız. Hedeflenecek adres href=" " niteliğinin içine yazılır.
<!-- Kendi sitenizdeki başka bir sayfaya link verme -->
<a href="hakkimizda.html">Hakkımızda Sayfasına Git</a>
<!-- Dışarıdaki başka bir web sitesine link verme -->
<a href="[https://kodonizle.birtekno.com](https://kodonizle.birtekno.com)">Kod Önizleme Aracı'nı Ziyaret Et</a>
<!-- Tıklanınca yeni sekmede açılan link (target="_blank") -->
<a href="iletisim.html" target="_blank">İletişim Formunu Yeni Sekmede Aç</a>
Özellikle boşluk, Türkçe harf (ç, ş, ü, ö) veya özel sembol içeren karmaşık bağlantılar (URL’ler) oluştururken sitenizin veya sunucunuzun 404 (Sayfa Bulunamadı) hatası vermesini istemiyorsanız, linklerinizi koda eklemeden önce mutlaka https://toolbox.googleapps.com/apps/encode_decode/ aracımızdan geçirerek tarayıcıların kusursuz okuyabileceği güvenli standart ASCII formatına dönüştürmelisiniz.
4. Görseller ve Medya Yönetimi
Metinlerle dolu bir sayfa kullanıcıları sıkar. Sitenizi görsel olarak zenginleştirmek, ziyaretçilerin sitede kalma süresini uzatır. Resim eklemek için <img> etiketi kullanılır. Bu özel bir etikettir çünkü kapanış etiketi (</img>) yoktur; kendi içinde kapanır.
src (source) resmin çekileceği yolu belirtirken, alt (alternative text) ise resim herhangi bir sebepten yüklenmezse ekranda görünecek metni ifade eder. Ayrıca Google Görsel aramaları, resmin ne anlama geldiğini bu alt etiketinden anlar.
<!-- Temel görsel ekleme -->
<img src="ofis-fotografi.jpg" alt="Şirketimizin merkez ofisi" width="100%">
Web Hızlandırma İçin Hayati Bir İpucu: Amatör web geliştiricileri sitelerine çoğunlukla devasa boyutlu JPEG veya PNG fotoğraflar yüklerler. Bu durum sitenin saniyelerce yüklenememesine ve ziyaretçinin siteyi terk etmesine neden olur. Kodlarınıza resimlerinizi dahil etmeden önce, görsellerinizi mutlaka Görsel Format Dönüştürücü aracımızı kullanarak kaliteden ödün vermeden dosya boyutunu %40 oranında küçülten yeni nesil WEBP formatına dönüştürün. Bu sayede siteniz adeta uçacaktır!
Bölüm 3: HTML’e Ruh Katmak (CSS ile Tasarım ve Estetik)
Diyelim ki harika ve basit web sitesi html kodları kullanarak içeriğinizi oluşturdunuz. Eğer sayfanızı bu haliyle tarayıcıda açarsanız, göreceğiniz şey 1990’lı yıllardan fırlamış, Times New Roman fontuyla yazılmış, siyah-beyaz ve dümdüz bir belge olacaktır. İşte bu ham metin belgesine renk, şekil, hizalama, boyut ve modern bir estetik katmak için devreye CSS girer.
HTML iskeletinizi CSS ile giydirmenin en pratik yollarından biri (özellikle tek sayfalık işlerde), <head> bölümünün içerisine bir <style> etiketi açıp tasarım kodlarını oraya yazmaktır. Gelin, düz bir metni modern bir kartvizite dönüştürelim:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Stilize Edilmiş Web Sitem</title>
<style>
/* Genel sayfa tasarımı */
body {
background-color: #f8fafc; /* Açık gri bir arka plan */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern yazı tipi */
color: #1e293b; /* Koyu lacivert/gri yazı rengi */
text-align: center; /* İçerikleri tam ortaya hizala */
padding-top: 80px; /* Üstten boşluk bırak */
}
/* Başlık tasarımı */
h1 {
color: #0ea5e9; /* Başlığa özel parlak mavi renk */
font-size: 3rem; /* Yazı büyüklüğü */
margin-bottom: 10px;
}
/* Modern Buton Tasarımı */
.guzel-buton {
background-color: #0ea5e9;
color: white;
padding: 16px 32px; /* İç boşluk (Yukarı-Aşağı / Sağa-Sola) */
text-decoration: none; /* Alt çizgiyi kaldır */
border-radius: 12px; /* Köşeleri modern şekilde yuvarla */
display: inline-block;
margin-top: 30px;
font-weight: bold;
font-size: 18px;
transition: all 0.3s ease; /* Yumuşak geçiş animasyonu */
}
/* Fare butonun üzerine geldiğinde (Hover) çalışacak CSS */
.guzel-buton:hover {
background-color: #0284c7; /* Rengi koyulaştır */
transform: translateY(-5px); /* Butonu hafifçe yukarı kaldır */
box-shadow: 0 10px 15px rgba(14, 165, 233, 0.3); /* Mavi bir gölge ver */
}
</style>
</head>
<body>
<h1>Hayalinizdeki Siteyi Yaratın</h1>
<p>CSS olmadan web tasarımı, sıvası ve boyası yapılmamış bir bina gibidir.</p>
<!-- Yukarıda oluşturduğumuz CSS sınıfını 'class' niteliği ile çağırıyoruz -->
<a href="#" class="guzel-buton">Maceraya Başla</a>
</body>
</html>
Yukarıdaki kod bloğunu online html css editörü sayfamıza yapıştırdığınızda CSS’in gücünü fark edeceksiniz. Basit bir link (<a> etiketi), modern web sitelerinde gördüğünüz şık, köşeleri yuvarlatılmış ve üzerine gelindiğinde tatlı bir animasyonla havaya kalkan bir butona dönüştü.
Eğer bu tasarımda gördüğünüz buton renklerini sıradan düz bir renkle değil de iki rengin harika bir şekilde birbirine karıştığı “Göz alıcı bir Gradient” ile yapmak isterseniz, CSS Gradient Oluşturucu aracımıza girerek görsel arayüzden renklerinizi seçip oluşan tek satırlık kodu tasarımınıza ekleyebilirsiniz. Veya kutularınıza 3 boyutlu bir derinlik katmak istiyorsanız, deneme yanılma yapmadan CSS Box Shadow (Gölge) Jeneratörü aracımızı kullanarak mükemmel gölge efektini saniyeler içinde elde edebilirsiniz.
Bölüm 4: Hazır ve Ücretsiz HTML Şablon Örnekleri
Sadece etiketleri öğrenmek yeterli değildir; asıl mesele bu parçaları tıpkı bir Lego gibi birleştirerek anlamlı ve çalışan bütünler oluşturmaktır. İnternette saatlerce arama yapmak yerine, sizin için sıfırdan kodladığımız profesyonel ve hazır html şablonları listesine aşağıdan ulaşabilirsiniz.
İhtiyacınıza uygun olan bu web sitesi kodlama örnekleri listesinden dilediğinizi kopyalayabilir, canlı editörümüze yapıştırabilir ve metinleri kendi markanıza göre anında değiştirebilirsiniz.
1. Özgeçmiş, CV ve Kişisel Portfolyo Sitesi Şablonu
Özellikle yeni mezunlar, yazılım geliştiriciler, dijital sanatçılar veya serbest (freelance) çalışanlar için kendini dijital ortamda şık bir şekilde ifade etmek profesyonellik göstergesidir. Aşağıdaki kod, profilinizi, sahip olduğunuz yetenekleri ve iletişim bilgilerinizi sunabileceğiniz, sayfa ortasına hizalanmış, yumuşak gölgelere sahip çok şık bir “Profil Kartı” sitesidir.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kişisel Portfolyom</title>
<style>
* { box-sizing: border-box; }
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
}
.profil-karti {
background: white;
width: 100%;
max-width: 450px;
border-radius: 24px;
padding: 40px;
text-align: center;
box-shadow: 0 20px 40px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
}
.avatar {
width: 130px;
height: 130px;
border-radius: 50%;
background-color: #cbd5e1;
background-image: url('[https://via.placeholder.com/130](https://via.placeholder.com/130)'); /* Buraya kendi resim linkinizi koyun */
background-size: cover;
background-position: center;
margin: 0 auto 20px;
border: 5px solid #fff;
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
h1 { margin: 0 0 5px; color: #0f172a; font-size: 28px; font-weight: 800; }
.meslek { color: #0284c7; font-weight: 700; margin-bottom: 20px; font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px; }
.biyografi { color: #475569; line-height: 1.7; margin-bottom: 30px; font-size: 15px; }
.yetenekler {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-bottom: 35px;
}
.yetenek-etiketi {
background: #f8fafc;
color: #334155;
padding: 8px 16px;
border-radius: 50px;
font-size: 13px;
font-weight: 600;
border: 1px solid #e2e8f0;
}
.iletisim-btn {
background: #0ea5e9;
color: white;
text-decoration: none;
padding: 15px 0;
width: 100%;
display: block;
border-radius: 12px;
font-weight: bold;
font-size: 16px;
transition: 0.3s;
box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}
.iletisim-btn:hover { background: #0284c7; transform: translateY(-3px); box-shadow: 0 6px 15px rgba(14, 165, 233, 0.4); }
</style>
</head>
<body>
<div class="profil-karti">
<div class="avatar"></div>
<h1>Deniz Tekin</h1>
<div class="meslek">Kıdemli Frontend Geliştirici</div>
<p class="biyografi">Merhaba! Kullanıcı dostu, modern, performans odaklı ve her cihaza uyumlu web arayüzleri tasarlamayı seven tutkulu bir yazılımcıyım. Projelerinizi hayata geçirmek için buradayım.</p>
<div class="yetenekler">
<span class="yetenek-etiketi">HTML5</span>
<span class="yetenek-etiketi">CSS3 / Tailwind</span>
<span class="yetenek-etiketi">JavaScript ES6</span>
<span class="yetenek-etiketi">React.js</span>
<span class="yetenek-etiketi">Figma</span>
</div>
<!-- Mailto ile tıklanınca otomatik mail gönderme penceresi açılır -->
<a href="mailto:ornek@mail.com" class="iletisim-btn">Projeyi Konuşalım</a>
</div>
</body>
</html>
2. Küçük İşletmeler İçin Kurumsal “Landing Page” (Açılış Sayfası)
Eğer sadece bir kişiyi değil; şirketinizi, sattığınız bir ürünü, bir mobil uygulamayı veya verdiğiniz bir danışmanlık hizmetini tanıtmak istiyorsanız “Landing Page” adı verilen ve kullanıcıyı eyleme geçirmeye odaklı sayfalara ihtiyacınız vardır.
Aşağıdaki devasa örnek kod; içerisinde modern bir üst navigasyon menüsü, göz alıcı bir “Hero” (karşılama) alanı ve sunduğunuz hizmetleri anlatan şık bilgi kartları (grid yapısı) bulunan kusursuz bir kurumsal taslaktır.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Dijital Ajans</title>
<style>
/* CSS Sıfırlama ve Temel Ayarlar */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', system-ui, sans-serif; }
body { background: #f8fafc; color: #334155; line-height: 1.6; }
/* Navigasyon (Üst Menü) Tasarımı */
header {
background: #ffffff;
padding: 20px 50px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
position: sticky;
top: 0;
z-index: 100;
}
.logo { color: #0f172a; font-size: 26px; font-weight: 900; text-decoration: none; letter-spacing: -0.5px; }
.logo span { color: #0ea5e9; }
.menu a { color: #475569; text-decoration: none; margin-left: 30px; font-weight: 500; transition: color 0.3s; }
.menu a:hover { color: #0ea5e9; }
.menu .aktif-link { color: #0ea5e9; font-weight: 700; }
/* Hero (Ana Karşılama) Alanı */
.hero-section {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: white;
text-align: center;
padding: 120px 20px;
}
.hero-section h1 { font-size: 56px; margin-bottom: 24px; font-weight: 800; line-height: 1.2; }
.hero-section h1 span { color: #38bdf8; }
.hero-section p { font-size: 20px; color: #94a3b8; max-width: 650px; margin: 0 auto 40px; }
.cta-buton {
background: #38bdf8; color: #0f172a; padding: 18px 45px;
text-decoration: none; font-size: 18px; font-weight: 800; border-radius: 50px;
transition: all 0.3s ease; display: inline-block;
}
.cta-buton:hover { background: #7dd3fc; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(56, 189, 248, 0.3); }
/* Hizmetler Kart Alanı */
.hizmetler-baslik { text-align: center; margin: 80px 0 40px; font-size: 32px; color: #0f172a; }
.hizmet-kapsayici {
display: flex;
justify-content: center;
padding: 0 20px 80px;
gap: 30px;
flex-wrap: wrap; /* Mobilde alt alta geçmesi için zorunlu */
max-width: 1200px;
margin: 0 auto;
}
.hizmet-karti {
background: white;
padding: 40px 30px;
border-radius: 16px;
width: 100%;
max-width: 350px;
box-shadow: 0 4px 6px rgba(0,0,0,0.02);
border: 1px solid #e2e8f0;
text-align: left;
transition: transform 0.3s;
}
.hizmet-karti:hover { transform: translateY(-10px); box-shadow: 0 20px 25px rgba(0,0,0,0.05); }
.hizmet-ikon { font-size: 40px; margin-bottom: 20px; }
.hizmet-karti h3 { color: #0f172a; font-size: 22px; margin-bottom: 15px; }
.hizmet-karti p { color: #64748b; font-size: 15px; }
/* Footer (Alt Bilgi) */
footer { background: #0f172a; color: #64748b; text-align: center; padding: 30px; font-size: 14px; }
</style>
</head>
<body>
<header>
<a href="#" class="logo">Vision<span>Ajans</span></a>
<nav class="menu">
<a href="#" class="aktif-link">Ana Sayfa</a>
<a href="#">Hakkımızda</a>
<a href="#">Çalışmalarımız</a>
<a href="#">İletişim</a>
</nav>
</header>
<section class="hero-section">
<h1>Dijital Dünyada <br><span>Markanızı Zirveye Taşıyın</span></h1>
<p>Gelişmiş web teknolojileri ve SEO odaklı modern stratejilerimizle, işletmenizi hedef kitlenizle buluşturuyor, satışlarınızı artırıyoruz.</p>
<a href="#" class="cta-buton">Hemen Teklif Alın</a>
</section>
<h2 class="hizmetler-baslik">Neler Yapıyoruz?</h2>
<section class="hizmet-kapsayici">
<div class="hizmet-karti">
<div class="hizmet-ikon">💻</div>
<h3>Modern Web Tasarım</h3>
<p>Sıfırdan kurumsal kimliğinize uygun, mobil cihazlarla %100 uyumlu (responsive) ve inanılmaz hızlı yüklenen modern web siteleri inşa ediyoruz.</p>
</div>
<div class="hizmet-karti">
<div class="hizmet-ikon">🚀</div>
<h3>SEO Optimizasyonu</h3>
<p>Müşterilerinizin sizi kolayca bulabilmesi için, Google aramalarında ilk sayfada çıkmanızı sağlayacak teknik altyapı ve içerik stratejileri sunuyoruz.</p>
</div>
<div class="hizmet-karti">
<div class="hizmet-ikon">📱</div>
<h3>Sosyal Medya Yönetimi</h3>
<p>Hedef kitlenize en doğru platformlarda (Instagram, LinkedIn, X), en etkili görsel tasarımlar ve reklam kampanyalarıyla ulaşıyoruz.</p>
</div>
</section>
<footer>
<p>© 2026 Vision Dijital Ajans. Tüm Hakları Saklıdır.</p>
</footer>
</body>
</html>
Bölüm 5: Mobil Uyumluluk (Responsive Design) Neden Şarttır?
Dikkat ettiyseniz, yazdığımız her iki profesyonel kod şablonunun <head> kısmında şu satırı değişmez bir kural olarak kullandık:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Web dünyasında buna Viewport Meta Etiketi denir. Bu küçücük sihirli kod parçası, sitenizin cep telefonu veya tablet gibi dar ekranlı cihazlarda küçücük ve okunmaz görünmesini engeller; tarayıcıya içeriği ekranın genişliğine göre yeniden ölçeklendirmesi emrini verir. CSS tarafında ise flex-wrap: wrap; veya @media (max-width: 768px) gibi kodlar kullanarak öğelerin mobilde alt alta geçmesini sağlarız.
Günümüzde internet trafiğinin %80’inden fazlası mobil cihazlardan (akıllı telefonlardan) gelmektedir. Google, bir sitenin SEO puanını belirlerken o sitenin mobildeki hızına ve tasarımının parmakla dokunulabilir rahatlıkta olup olmadığına (Mobile-First Indexing) bakar. Eğer bir site mobilde kötü görünüyorsa, kullanıcı o siteyi saniyeler içinde terk eder ve arama motorları sitenizi alt sıralara düşürerek cezalandırır.
Sitemin Mobil Görünümünü Nasıl Test Ederim?
Bir web sitesi yaparken kodlarınızı kaydedip, FTP ile sunucuya yükleyip sonra telefonunuzu elinize alarak sayfayı yenilemek korkunç bir zaman kaybı ve büyük bir çiledir. İşte tam bu noktada Kod Önizleme Aracı platformu geliştiriciler için devrim niteliğinde bir kolaylık sağlar!
Platformumuzdaki Canlı HTML Editörü sayfasına girdiğinizde, yazdığınız kodların beyaz önizleme ekranının hemen üst kısmında Cihaz Testi (Viewport Simülatörü) butonlarını (Mobil Telefon, Tablet, Masaüstü ve Tam Ekran ikonları) göreceksiniz.
Siz sol tarafa kodlarınızı yazarken, üstteki örneğin “Cep Telefonu” ikonuna tıkladığınız an, önizleme ekranınız daralarak sanal bir iPhone boyutuna bürünür. Böylece sitenizin farklı ekran boyutlarında nasıl tepki verdiğini, yazıların veya butonların taşıp taşmadığını kusursuz bir şekilde, saniyeler içinde simüle edebilirsiniz.
Özet, Sonuç ve Pratik Yapmanın Önemi
Bu devasa ve kapsamlı rehberimizde; web sayfalarının mimari yapısını, basit html kodlarının mantığını, arama motorlarının siteleri nasıl okuduğunu, CSS ile temel renklendirme ve boyutlandırmayı adım adım öğrendiniz. Üstelik piyasada para karşılığı satılabilecek kalitede, sıfırdan portfolyo ve kurumsal ajans sitesi kurgulayabileceğiniz güçlü hazır html şablonları listesine tamamen ücretsiz sahip oldunuz.
Şunu asla unutmayın: Yazılım, kodlama ve web tasarımı öğrenmek bir maratondur, kısa mesafe koşusu değil. Bu alanda sınırları aşmanın, uzmanlaşmanın ve ezberlemekten kurtulmanın tek yolu bol bol deneme (pratik) yapmaktır. Aklınıza gelen farklı tasarım fikirlerini, CSS ile renk denemelerini veya farklı HTML etiketlerini bozmaktan korkmadan test edin. Bunun için bilgisayarınızı yormanıza, karışık editörler kurmanıza veya sunucu satın almanıza hiç gerek yok; platformumuzun ana sayfasında yer alan Tüm Geliştirici Araçları bölümü, hayal ettiğiniz projeyi kusursuzca hayata geçirmeniz, kodlarınızı şifrelemeniz veya formatlamanız için tamamen ücretsiz olarak hizmetinize sunulmuştur.
Öğrendiğiniz web sitesi kodlama örnekleri ile vakit kaybetmeden bugün pratik yapmaya başlayın, kendinizi geliştirin ve dijital dünyadaki kalıcı yerinizi alın! Başarılar dileriz!
Sıkça Sorulan Sorular
En basit web sitesi HTML kodları nelerdir?
Bir web sitesinin en basit ve temel iskeleti <html>, <head>, <title> ve <body> etiketlerinden oluşur. Ziyaretçilerin ekranda görmesini istediğiniz tüm yazılar, görseller ve bağlantılar <body> (gövde) etiketinin arasına yazılmalıdır. Bu temel etiketleri kullanarak saniyeler içinde boş bir web sayfası oluşturabilirsiniz.
HTML kodları yazmak için hangi programı kurmam gerekiyor?
Web tasarımı öğrenmeye başlarken bilgisayarınıza hiçbir ağır program kurmanıza gerek yoktur. Platformumuzda bulunan tamamen ücretsiz “Canlı HTML/CSS/JS Editörü” aracını kullanarak tarayıcınız üzerinden anında kod yazabilir ve sağ taraftaki ekranda sitenizin canlı halini anında test edebilirsiniz.
Rehberdeki hazır HTML site şablonları ücretsiz mi?
Evet, rehberimizde paylaştığımız kişisel portfolyo, özgeçmiş (CV) ve kurumsal “Landing Page” (Açılış Sayfası) gibi tüm hazır HTML ve CSS kod şablonları %100 ücretsizdir. Bu kodları dilediğiniz gibi kopyalayabilir, metinleri kendi markanıza göre değiştirebilir ve projelerinizde hiçbir telif sorunu yaşamadan kullanabilirsiniz.
Yazdığım HTML kodları cep telefonunda (mobilde) düzgün görünür mü?
Kodlarınızın mobil cihazlarda düzgün görünmesi için <head> kısmına “Viewport Meta Etiketi” eklemeli ve CSS ile (Responsive) duyarlı tasarım kuralları uygulamalısınız. Canlı editörümüzde yer alan “Cihaz Testi” simülatörüne tıklayarak, yazdığınız kodların cep telefonu ve tablet ekranlarında taşıp taşmadığını anında görüntüleyebilirsiniz.
Sadece HTML kullanarak profesyonel bir site yapılabilir mi?
Sadece HTML kullanarak sitenizin temel iskeletini, başlıklarını ve metinlerini oluşturabilirsiniz. Ancak sitenizin profesyonel, renkli ve modern (gölgeler, şık butonlar, geçiş animasyonları) görünmesi için HTML kodlarınızı mutlaka CSS (Cascading Style Sheets) ile desteklemeniz gerekir.
Bir yanıt yazın