HTML ve CSS ile Web Sitesi Tasarımı
HTML (Hypertext Markup Language) ve CSS (Cascading Style Sheets) kullanarak bir web sitesi tasarlamak temel adımlarla mümkündür.
Adım 1: HTML ile Yapı Oluşturma
HTML, web sayfasının yapısını belirler. Aşağıdaki bileşenleri içermelidir:
- Başlık: elementi ile sayfa başlığı eklenir.</li>
<li><strong>Vücut:</strong> <body> elementi ile içerik yerleştirilir.</li>
<li><strong>Başlıklar:</strong> <h1>, <h2>, gibi başlık etiketleri kullanılır.</li>
<li><strong>Paragraflar:</strong> <p> etiketi ile metin eklenir.</li>
<li><strong>Bağlantılar:</strong> <a> etiketi ile dışa bağlantılar oluşturulur.</li>
<li><strong>Resimler:</strong> <img> etiketi ile görseller eklenir.</li>
</ul>
<p>Örnek HTML Yapısı:</p>
<pre>
<html>
<head>
<title>Web Sitesi Başlığı</title>
</head>
<body>
<h1>Hoşgeldiniz</h1>
<p>Bu bir örnek paragraflardır.</p>
</body>
</html>
</pre>
<h3>Adım 2: CSS ile Stil Verme</h3>
CSS, HTML yapısına stil ekler. Aşağıdaki yöntemlerle kullanabilirsiniz:
<ul>
<li><strong>İç stil:</strong> <style> etiketleri arasında yer alır.</li>
<li><strong>Harici stil:</strong> .css uzantılı dosyalarla bağlantılıdır.</li>
<li><strong>Satır içi stil:</strong> Elemanların içine yazılan stil tanımlarıdır.</li>
</ul>
<p>Örnek CSS Kodu:</p>
<pre>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
}
p {
font-size: 16px;
}
</style>
</pre>
<h3>Adım 3: Birleştirme</h3>
HTML ve CSS dosyalarını birleştirerek sayfayı oluşturabilirsiniz. CSS dosyasını HTML'ye bağlamak için <link> etiketi kullanılır.
<p>Örnek Bağlantı:</p>
<pre>
<link rel="stylesheet" type="text/css" href="style.css">
</pre>
<p>Bu adımları takip ederek basit bir web sitesi tasarlayabilirsiniz. Daha karmaşık yapılar için Javascript gibi diğer teknolojileri keşfetmek yararlı olacaktır.</p> </div>
</div>
<br><br>
<button id="reportBtn" class="qna-btn qna-btn--ghost" type="button" aria-haspopup="dialog">
🐞 Hata bildir
</button>
<dialog id="reportDialog" class="qna-report" aria-labelledby="reportTitle">
<div class="qna-card" role="document">
<header class="qna-card__header">
<div class="qna-card__title">
<span class="qna-badge">🐞</span>
<h2 id="reportTitle">Hata bildir</h2>
</div>
<button type="button" id="reportClose" class="qna-btn qna-btn--icon" aria-label="Kapat">
<svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24"><path d="M6.4 5l12.6 12.6-1.4 1.4L5 6.4 6.4 5Zm12.6 1.4L6.4 19 5 17.6 17.6 5 19 6.4Z" fill="currentColor"/></svg>
</button>
</header>
<form id="reportForm" class="qna-form" method="post" novalidate>
<div class="qna-field">
<label for="r-type">Hata türü</label>
<select id="r-type" name="type" required>
<option value="" disabled selected>Hata Seçin…</option>
<option value="wrong_answer">Cevap Yanlış</option>
<option value="wrong_question">Soru Yanlış</option>
<option value="outdated">Güncel Değil</option>
<option value="wrong_category">Yanlış Kategori</option>
<option value="abusive">Uygunsuz içerik (hakaret/nefret/yetişkin)</option>
<option value="spam">Spam / Reklam</option>
<option value="copyright">Telif / Kopya içerik</option>
<option value="broken">Bozuk bağlantı / Teknik sorun</option>
<option value="other">Diğer</option>
</select>
</div>
<div class="qna-field">
<label for="r-details">Açıklama</label>
<textarea id="r-details" name="details" required minlength="10" maxlength="1000" placeholder="Ne yanlış? Doğrusu nedir? Varsa bağlantı ekleyin."></textarea>
</div>
<div class="qna-field">
<label for="r-email">E-posta (isteğe bağlı)</label>
<input id="r-email" type="email" name="email" inputmode="email" placeholder="ornek@domeyn.com">
</div>
<input type="hidden" name="qid" value="17969">
<input type="hidden" name="qslug" value="">
<input type="hidden" name="page_url" value="">
<input type="hidden" name="csrf" value="">
<input type="text" name="website" tabindex="-1" autocomplete="off" class="qna-hp">
<footer class="qna-card__footer">
<button type="submit" class="qna-btn qna-btn--primary">Gönder</button>
<button type="button" class="qna-btn qna-btn--soft" id="reportCancel">Vazgeç</button>
<p id="reportMsg" class="qna-alert" role="status" aria-live="polite" hidden></p>
</footer>
</form>
</div>
</dialog>
<script defer>
(() => {
const btn = document.getElementById('reportBtn');
const dlg = document.getElementById('reportDialog');
const form = document.getElementById('reportForm');
const closeBtn = document.getElementById('reportClose');
const cancelBtn = document.getElementById('reportCancel');
const msg = document.getElementById('reportMsg');
if (!btn || !dlg || !form) {
console.warn('[report] Gerekli elemanlar bulunamadı');
return;
}
// Sayfa URL'sini otomatik doldur
if (form.elements.page_url) form.elements.page_url.value = location.href;
const open = () => dlg.showModal();
const close = () => dlg.close();
btn.addEventListener('click', open);
closeBtn?.addEventListener('click', close);
cancelBtn?.addEventListener('click', close);
dlg.addEventListener('cancel', (e)=>{ e.preventDefault(); close(); }); // Esc
form.addEventListener('submit', async (e) => {
e.preventDefault();
// HTML5 doğrulama
if (!form.reportValidity()) return;
msg.hidden = true;
const okBtn = form.querySelector('button[type="submit"]');
const label = okBtn.textContent;
okBtn.disabled = true;
okBtn.textContent = 'Gönderiliyor…';
try {
const fd = new FormData(form);
const res = await fetch('/api/report-issue.php', {
method: 'POST',
body: fd,
credentials: 'same-origin'
});
let data = {};
try { data = await res.json(); } catch(_) {}
if (!res.ok || data.ok === false) {
throw new Error(data.message || 'Gönderilemedi');
}
msg.textContent = data.message || 'Teşekkürler! İncelemeye aldık.';
msg.hidden = false;
// GA event (varsa)
if (window.gtag) gtag('event','report_issue_submit',{event_category:'ux', value:1});
setTimeout(() => {
close();
form.reset();
msg.hidden = true;
}, 900);
} catch (err) {
console.error('[report] submit error:', err);
msg.textContent = (err && err.message) ? err.message : 'Gönderilemedi. Lütfen tekrar deneyin.';
msg.hidden = false;
} finally {
okBtn.disabled = false;
okBtn.textContent = label;
}
});
})();
</script>
<!-- Paylaş butonu -->
<button id="shareOpen" class="qna-btn qna-btn--ghost" type="button" aria-haspopup="dialog">
📤 Paylaş
</button>
<!-- Paylaş Modal -->
<dialog id="shareDialog" class="qna-share" aria-labelledby="shareTitle">
<div class="qna-card" role="document" data-title=""
data-url="https://qna.com.tr/cevap/html-ve-css-kullanarak-nasil-bir-web-sitesi-tasarlanir">
<header class="qna-card__header">
<h2 id="shareTitle">Paylaş</h2>
<button type="button" id="shareClose" class="qna-btn qna-btn--icon" aria-label="Kapat">✕</button>
</header>
<div class="qna-share__grid">
<!-- 8 ağ (WhatsApp, X, Telegram, Facebook, LinkedIn, E-posta, Pinterest, Reddit) -->
<a data-net="whatsapp" class="qna-share__item qna--wa" href="#" aria-label="WhatsApp">WhatsApp</a>
<a data-net="x" class="qna-share__item qna--x" href="#" aria-label="X">X</a>
<a data-net="telegram" class="qna-share__item qna--tg" href="#" aria-label="Telegram">Telegram</a>
<a data-net="facebook" class="qna-share__item qna--fb" href="#" aria-label="Facebook">Facebook</a>
<a data-net="linkedin" class="qna-share__item qna--li" href="#" aria-label="LinkedIn">LinkedIn</a>
<a data-net="email" class="qna-share__item qna--em" href="#" aria-label="E-posta">E-posta</a>
<a data-net="pinterest" class="qna-share__item qna--pi" href="#" aria-label="Pinterest">Pinterest</a>
<a data-net="reddit" class="qna-share__item qna--rd" href="#" aria-label="Reddit">Reddit</a>
</div>
<footer class="qna-card__footer">
<!-- İstersen yerel paylaşımı da sun (modal içinde kalsın) -->
<button type="button" id="shareNative" class="qna-btn qna-btn--soft">📱 Cihazda paylaş</button>
</footer>
</div>
</dialog>
<script defer>
(() => {
const openBtn = document.getElementById('shareOpen');
const dlg = document.getElementById('shareDialog');
const closeBtn = document.getElementById('shareClose');
const nativeBtn = document.getElementById('shareNative');
const card = dlg?.querySelector('.qna-card');
if (!openBtn || !dlg || !card) return;
const title = card.dataset.title || document.title;
const baseUrl = card.dataset.url || location.href;
// (İsteğe bağlı) UTM ekleyelim – canonical'a dokunmaz
const withUtm = (u, src) => {
try{
const url=new URL(u);
url.searchParams.set('utm_source', src);
url.searchParams.set('utm_medium', 'share');
url.searchParams.set('utm_campaign', 'question_share');
return url.toString();
}catch{return u;}
};
const make = {
x: (t,u)=> `https://twitter.com/intent/tweet?text=${encodeURIComponent(t)}&url=${encodeURIComponent(u)}`,
facebook: (t,u)=> `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(u)}`,
whatsapp: (t,u)=> /Android|iPhone|Mobile/i.test(navigator.userAgent)
? `https://api.whatsapp.com/send?text=${encodeURIComponent(t+' '+u)}`
: `https://web.whatsapp.com/send?text=${encodeURIComponent(t+' '+u)}`,
telegram: (t,u)=> `https://t.me/share/url?url=${encodeURIComponent(u)}&text=${encodeURIComponent(t)}`,
linkedin: (t,u)=> `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(u)}`,
pinterest:(t,u)=> `https://pinterest.com/pin/create/button/?url=${encodeURIComponent(u)}&description=${encodeURIComponent(t)}`,
reddit: (t,u)=> `https://www.reddit.com/submit?url=${encodeURIComponent(u)}&title=${encodeURIComponent(t)}`,
email: (t,u)=> `mailto:?subject=${encodeURIComponent(t)}&body=${encodeURIComponent(t+'\n'+u)}`
};
const open = () => dlg.showModal();
const close = () => dlg.close();
openBtn.addEventListener('click', open);
closeBtn?.addEventListener('click', close);
dlg.addEventListener('cancel', (e)=>{ e.preventDefault(); close(); }); // Esc
// Ağ tıklamaları
dlg.querySelectorAll('[data-net]').forEach(a=>{
a.addEventListener('click', (e)=>{
e.preventDefault();
const net = a.dataset.net;
const u = withUtm(baseUrl, net);
const href = make[net]?.(title, u);
if (!href) return;
if (net==='email' || net==='whatsapp') {
location.href = href;
} else {
window.open(href, '_blank', 'noopener,noreferrer,width=600,height=540');
}
// GA event (varsa)
if (window.gtag) gtag('event','share',{method:net, content_type:'question'});
close();
}, {passive:false});
});
// Yerel paylaşım (destek varsa)
nativeBtn?.addEventListener('click', async ()=>{
const u = withUtm(baseUrl, 'native');
if (navigator.share) {
try { await navigator.share({ title, text:title, url:u }); close(); } catch {}
} else {
try { await navigator.clipboard.writeText(u); nativeBtn.textContent='Kopyalandı!'; setTimeout(()=>nativeBtn.textContent='📱 Cihazda paylaş',1200); } catch {}
}
});
})();
</script>
<br><br>
<div class="card block">
<h3>Aynı kategoriden</h3>
<ul class="list">
<li><a href="https://qna.com.tr/cevap/python-da-bir-liste-icerisindeki-elemanlarin-toplamini-nasil-bulabilirim">Python’da bir liste içerisindeki elemanların toplamını nasıl bulabilirim?</a></li><li><a href="https://qna.com.tr/cevap/html-ve-css-arasindaki-fark-nedir">HTML ve CSS arasındaki fark nedir?</a></li><li><a href="https://qna.com.tr/cevap/python-da-bir-liste-elemaninin-indexini-nasil-bulabilirim">Python’da bir liste elemanının indexini nasıl bulabilirim?</a></li><li><a href="https://qna.com.tr/cevap/python-da-kullanilan-for-dongusu-nasil-calisir">Python’da kullanılan for döngüsü nasıl çalışır?</a></li><li><a href="https://qna.com.tr/cevap/python-da-bir-stringin-tamamini-buyuk-harfe-nasil-donusturebilirim">Python’da bir stringin tamamını büyük harfe nasıl dönüştürebilirim?</a></li><li><a href="https://qna.com.tr/cevap/muhendislikte-temel-kavramlar-nedir">Mühendislikte temel kavramlar nedir?</a></li><li><a href="https://qna.com.tr/cevap/blockchain-teknolojisi-is-dunyasinda-hangi-alanlarda-kullanilabilir-ve-nasil-faydalar-saglar">Blockchain teknolojisi iş dünyasında hangi alanlarda kullanılabilir ve nasıl faydalar sağlar?</a></li><li><a href="https://qna.com.tr/cevap/bilgisayar-programlama-dilleri-hangi-amaclarla-kullanilir">Bilgisayar programlama dilleri hangi amaçlarla kullanılır?</a></li> </ul>
</div>
</article>
<aside class="sidebar sidebar-sticky">
<nav class="sidebox style-a">
<h3>Kategoriler</h3>
<ul class="side-list">
<li>
<a href="https://qna.com.tr/kategori/aile-ve-toplum">Aile ve Toplum</a>
<span class="badge">157</span>
</li><li>
<a href="https://qna.com.tr/kategori/akademi-universite">Akademi & Üniversite</a>
<span class="badge">161</span>
</li><li>
<a href="https://qna.com.tr/kategori/anayasa-ve-hukuk">Anayasa ve Hukuk</a>
<span class="badge">142</span>
</li><li>
<a href="https://qna.com.tr/kategori/araclar">Araçlar</a>
<span class="badge">235</span>
</li><li>
<a href="https://qna.com.tr/kategori/askerlik">Askerlik</a>
<span class="badge">141</span>
</li><li>
<a href="https://qna.com.tr/kategori/astroloji">Astroloji</a>
<span class="badge">2</span>
</li><li>
<a href="https://qna.com.tr/kategori/astronomi-ve-kozmoloji">Astronomi & Kozmoloji</a>
<span class="badge">587</span>
</li><li>
<a href="https://qna.com.tr/kategori/bahce-isleri">Bahçe İşleri</a>
<span class="badge">127</span>
</li><li>
<a href="https://qna.com.tr/kategori/bankacilik-kredi">Bankacılık & Kredi</a>
<span class="badge">189</span>
</li><li>
<a href="https://qna.com.tr/kategori/beslenme-ve-diyet">Beslenme & Diyet</a>
<span class="badge">288</span>
</li><li>
<a href="https://qna.com.tr/kategori/bilim">Bilim</a>
<span class="badge">600</span>
</li><li>
<a href="https://qna.com.tr/kategori/biyoloji-ve-genetik">Biyoloji & Genetik</a>
<span class="badge">337</span>
</li><li>
<a href="https://qna.com.tr/kategori/cografya">Coğrafya</a>
<span class="badge">345</span>
</li><li>
<a href="https://qna.com.tr/kategori/doga-ve-cevre">Doğa & Çevre</a>
<span class="badge">162</span>
</li><li>
<a href="https://qna.com.tr/kategori/dugun">Düğün</a>
<span class="badge">133</span>
</li><li>
<a href="https://qna.com.tr/kategori/e-devlet">E-Devlet</a>
<span class="badge">135</span>
</li><li>
<a href="https://qna.com.tr/kategori/e-ticaret-ve-online-alisveris">E-Ticaret & Online Alışveriş</a>
<span class="badge">104</span>
</li><li>
<a href="https://qna.com.tr/kategori/ebeveynlik">Ebeveynlik</a>
<span class="badge">99</span>
</li><li>
<a href="https://qna.com.tr/kategori/egitim-ogrencilik">Eğitim & Öğrencilik</a>
<span class="badge">729</span>
</li><li>
<a href="https://qna.com.tr/kategori/ehliyet-suruculuk">Ehliyet & Sürücülük</a>
<span class="badge">141</span>
</li><li>
<a href="https://qna.com.tr/kategori/el-sanatlari">El Sanatları</a>
<span class="badge">124</span>
</li><li>
<a href="https://qna.com.tr/kategori/elektronik">Elektronik</a>
<span class="badge">170</span>
</li><li>
<a href="https://qna.com.tr/kategori/emeklilik">Emeklilik</a>
<span class="badge">126</span>
</li><li>
<a href="https://qna.com.tr/kategori/etkinlik-planlama">Etkinlik Planlama</a>
<span class="badge">104</span>
</li><li>
<a href="https://qna.com.tr/kategori/ev-dekorasyonu">Ev Dekorasyonu</a>
<span class="badge">119</span>
</li><li>
<a href="https://qna.com.tr/kategori/fatura-abonelik">Fatura & Abonelik</a>
<span class="badge">111</span>
</li><li>
<a href="https://qna.com.tr/kategori/film">Film</a>
<span class="badge">220</span>
</li><li>
<a href="https://qna.com.tr/kategori/finans">Finans</a>
<span class="badge">489</span>
</li><li>
<a href="https://qna.com.tr/kategori/fitness-ve-egzersiz">Fitness & Egzersiz</a>
<span class="badge">437</span>
</li><li>
<a href="https://qna.com.tr/kategori/gezi-rehberi">Gezi Rehberi</a>
<span class="badge">118</span>
</li><li>
<a href="https://qna.com.tr/kategori/girisimcilik-sirket">Girişimcilik & Şirket</a>
<span class="badge">122</span>
</li><li>
<a href="https://qna.com.tr/kategori/gundem">Gündem</a>
<span class="badge">110</span>
</li><li>
<a href="https://qna.com.tr/kategori/gunluk-yasam-ipuclari">Günlük Yaşam İpuçları</a>
<span class="badge">126</span>
</li><li>
<a href="https://qna.com.tr/kategori/guzellik">Güzellik</a>
<span class="badge">131</span>
</li><li>
<a href="https://qna.com.tr/kategori/hayvanlar">Hayvanlar</a>
<span class="badge">131</span>
</li><li>
<a href="https://qna.com.tr/kategori/hobi-ve-ilgi-alanlari">Hobi & İlgi Alanları</a>
<span class="badge">133</span>
</li><li>
<a href="https://qna.com.tr/kategori/ikamet-adres">İkamet & Adres</a>
<span class="badge">129</span>
</li><li>
<a href="https://qna.com.tr/kategori/internet-mobil">İnternet & Mobil</a>
<span class="badge">162</span>
</li><li>
<a href="https://qna.com.tr/kategori/is-kariyer">İş & Kariyer</a>
<span class="badge">196</span>
</li><li>
<a href="https://qna.com.tr/kategori/kimdir">Kimdir?</a>
<span class="badge">723</span>
</li><li>
<a href="https://qna.com.tr/kategori/kira-konut">Kira & Konut</a>
<span class="badge">135</span>
</li><li>
<a href="https://qna.com.tr/kategori/kisisel-gelisim">Kişisel Gelişim</a>
<span class="badge">132</span>
</li><li>
<a href="https://qna.com.tr/kategori/kpss-memurluk">KPSS & Memurluk</a>
<span class="badge">122</span>
</li><li>
<a href="https://qna.com.tr/kategori/kultur-sanat-ve-edebiyat">Kültür, Sanat & Edebiyat</a>
<span class="badge">311</span>
</li><li>
<a href="https://qna.com.tr/kategori/matematik">Matematik</a>
<span class="badge">607</span>
</li><li>
<a href="https://qna.com.tr/kategori/meb-islemleri">MEB İşlemleri</a>
<span class="badge">134</span>
</li><li>
<a href="https://qna.com.tr/kategori/mimari">Mimari</a>
<span class="badge">102</span>
</li><li>
<a href="https://qna.com.tr/kategori/mobil-uygulamalar">Mobil Uygulamalar</a>
<span class="badge">193</span>
</li><li>
<a href="https://qna.com.tr/kategori/moda">Moda</a>
<span class="badge">169</span>
</li><li>
<a href="https://qna.com.tr/kategori/muhendislik">Mühendislik</a>
<span class="badge">430</span>
</li><li>
<a href="https://qna.com.tr/kategori/muzik">Müzik</a>
<span class="badge">110</span>
</li><li>
<a href="https://qna.com.tr/kategori/otomotiv">Otomotiv</a>
<span class="badge">409</span>
</li><li>
<a href="https://qna.com.tr/kategori/oyun">Oyun</a>
<span class="badge">124</span>
</li><li>
<a href="https://qna.com.tr/kategori/psikoloji-ve-psikiyatri">Psikoloji & Psikiyatri</a>
<span class="badge">620</span>
</li><li>
<a href="https://qna.com.tr/kategori/saglik-randevu">Sağlık & Randevu</a>
<span class="badge">605</span>
</li><li>
<a href="https://qna.com.tr/kategori/seyahat-ulasim">Seyahat & Ulaşım</a>
<span class="badge">152</span>
</li><li>
<a href="https://qna.com.tr/kategori/sgk">SGK</a>
<span class="badge">123</span>
</li><li>
<a href="https://qna.com.tr/kategori/spor">Spor</a>
<span class="badge">324</span>
</li><li>
<a href="https://qna.com.tr/kategori/tapu-emlak">Tapu & Emlak</a>
<span class="badge">127</span>
</li><li>
<a href="https://qna.com.tr/kategori/tarih">Tarih</a>
<span class="badge">588</span>
</li><li>
<a href="https://qna.com.tr/kategori/tarim-ve-bahcecilik">Tarım ve Bahçecilik</a>
<span class="badge">598</span>
</li><li>
<a href="https://qna.com.tr/kategori/tasarim">Tasarım</a>
<span class="badge">108</span>
</li><li>
<a href="https://qna.com.tr/kategori/teknoloji-yazilim">Teknoloji & Yazılım</a>
<span class="badge">904</span>
</li><li>
<a href="https://qna.com.tr/kategori/trafik-ve-ceza">Trafik ve Ceza</a>
<span class="badge">130</span>
</li><li>
<a href="https://qna.com.tr/kategori/universite-osym">Üniversite & ÖSYM</a>
<span class="badge">118</span>
</li><li>
<a href="https://qna.com.tr/kategori/vergi">Vergi</a>
<span class="badge">117</span>
</li><li>
<a href="https://qna.com.tr/kategori/vize-pasaport">Vize & Pasaport</a>
<span class="badge">141</span>
</li><li>
<a href="https://qna.com.tr/kategori/yiyecek-ve-icecek">Yiyecek ve İçecek</a>
<span class="badge">564</span>
</li></ul>
</nav>
<br>
<nav class="sidebox style-a">
<h3>📈 En Çok Okunanlar</h3>
<ul class="side-list">
<li><a href="https://qna.com.tr/cevap/turkiye-ye-internet-nerden-geliyor">Türkiye'ye internet nerden geliyor?</a></li>
<li><a href="https://qna.com.tr/cevap/bebek-gelisim-tablosu-nedir">Bebek gelişim tablosu nedir?</a></li>
<li><a href="https://qna.com.tr/cevap/yokdil-nedir">YÖKDİL nedir?</a></li>
<li><a href="https://qna.com.tr/cevap/corba-cesitleri-nelerdir">Çorba çeşitleri nelerdir?</a></li>
<li><a href="https://qna.com.tr/cevap/adres-degisikligi-cezasi-ne-kadar">Adres değişikliği cezası ne kadar?</a></li>
<li><a href="https://qna.com.tr/cevap/kargo-iadesi-nasil-yapilir">Kargo iadesi nasıl yapılır?</a></li>
<li><a href="https://qna.com.tr/cevap/mebbis-ogretmen-giris-islemleri-nasil-yapilir">MEBBİS öğretmen giriş işlemleri nasıl yapılır?</a></li>
<li><a href="https://qna.com.tr/cevap/internetin-ana-kaynagi-nerede">İnternetin ana kaynağı nerede?</a></li>
<li><a href="https://qna.com.tr/cevap/gol-cesitleri-nelerdir">Göl çeşitleri nelerdir?</a></li>
<li><a href="https://qna.com.tr/cevap/laptop-adaptoru-nasil-calisir">Laptop adaptörü nasıl çalışır?</a></li>
</ul>
</nav>
</aside></div>
<!-- QAPage Schema -->
<script type="application/ld+json">
{
"@context":"https://schema.org",
"@type":"QAPage",
"@id": "https://qna.com.tr/cevap/html-ve-css-kullanarak-nasil-bir-web-sitesi-tasarlanir#qa",
"mainEntity":{
"@type":"Question",
"url": "https://qna.com.tr/cevap/html-ve-css-kullanarak-nasil-bir-web-sitesi-tasarlanir",
"name":"HTML ve CSS kullanarak nasıl bir web sitesi tasarlanır?",
"text":"HTML ve CSS kullanarak nasıl bir web sitesi tasarlanır?",
"answerCount": 1,
"upvoteCount": 0,
"datePublished": "2025-07-23T07:11:02+03:00",
"author": {
"@type": "Person",
"name": "QNA",
"url": "https://qna.com.tr/"
},
"acceptedAnswer":{
"@type":"Answer",
"text":"<h2>HTML ve CSS ile Web Sitesi Tasarımı<\/h2>\n\nHTML (Hypertext Markup Language) ve CSS (Cascading Style Sheets) kullanarak bir web sitesi tasarlamak temel adımlarla mümkündür.\n\n<h3>Adım 1: HTML ile Yapı Oluşturma<\/h3>\n\nHTML, web sayfasının yapısını belirler. Aşağıdaki bileşenleri içermelidir:\n\n<ul>\n <li><strong>Başlık:<\/strong> <title> elementi ile sayfa başlığı eklenir.<\/li>\n <li><strong>Vücut:<\/strong> <body> elementi ile içerik yerleştirilir.<\/li>\n <li><strong>Başlıklar:<\/strong> <h1>, <h2>, gibi başlık etiketleri kullanılır.<\/li>\n <li><strong>Paragraflar:<\/strong> <p> etiketi ile metin eklenir.<\/li>\n <li><strong>Bağlantılar:<\/strong> <a> etiketi ile dışa bağlantılar oluşturulur.<\/li>\n <li><strong>Resimler:<\/strong> <img> etiketi ile görseller eklenir.<\/li>\n<\/ul>\n\n<p>Örnek HTML Yapısı:<\/p>\n<pre>\n<html>\n <head>\n <title>Web Sitesi Başlığı<\/title>\n <\/head>\n <body>\n <h1>Hoşgeldiniz<\/h1>\n <p>Bu bir örnek paragraflardır.<\/p>\n <\/body>\n<\/html>\n<\/pre>\n\n<h3>Adım 2: CSS ile Stil Verme<\/h3>\n\nCSS, HTML yapısına stil ekler. Aşağıdaki yöntemlerle kullanabilirsiniz:\n\n<ul>\n <li><strong>İç stil:<\/strong> <style> etiketleri arasında yer alır.<\/li>\n <li><strong>Harici stil:<\/strong> .css uzantılı dosyalarla bağlantılıdır.<\/li>\n <li><strong>Satır içi stil:<\/strong> Elemanların içine yazılan stil tanımlarıdır.<\/li>\n<\/ul>\n\n<p>Örnek CSS Kodu:<\/p>\n<pre>\n<style>\n body {\n background-color: lightblue;\n }\n h1 {\n color: navy;\n }\n p {\n font-size: 16px;\n }\n<\/style>\n<\/pre>\n\n<h3>Adım 3: Birleştirme<\/h3>\n\nHTML ve CSS dosyalarını birleştirerek sayfayı oluşturabilirsiniz. CSS dosyasını HTML'ye bağlamak için <link> etiketi kullanılır.\n\n<p>Örnek Bağlantı:<\/p>\n<pre>\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\">\n<\/pre>\n\n<p>Bu adımları takip ederek basit bir web sitesi tasarlayabilirsiniz. Daha karmaşık yapılar için Javascript gibi diğer teknolojileri keşfetmek yararlı olacaktır.<\/p>",
"image": "https://qna.com.tr/images/html-ve-css-kullanarak-nasil-bir-web-sitesi-tasarlanir.webp",
"upvoteCount": 0,
"url": "https://qna.com.tr/cevap/html-ve-css-kullanarak-nasil-bir-web-sitesi-tasarlanir",
"datePublished": "2025-08-28T15:42:05+03:00",
"author": {
"@type": "Person",
"name": "QNA",
"url": "https://qna.com.tr/"
}
}
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ImageObject",
"url": "https://qna.com.tr/images/html-ve-css-kullanarak-nasil-bir-web-sitesi-tasarlanir.webp",
"width": 1200,
"height": 630
}
</script>
</main>
<footer class="site-footer">
<div class="footer-bottom">
© 2025 <a href="https://qna.com.tr">QNA</a> • Tüm hakları saklıdır. •
<a href="https://qna.com.tr/sayfa/hakkimizda/">Hakkımızda</a> •
<a href="https://qna.com.tr/sayfa/gizlilik/">Gizlilik</a> •
<a href="https://qna.com.tr/sayfa/kullanim-sartlari/">Şartlar</a> •
<a href="https://qna.com.tr/sayfa/kvkk/">KVKK</a> •
<a href="https://qna.com.tr/feed" target="_blank">Rss</a> •
<a href="https://qna.com.tr/sayfa/cerez-politikasi/">Çerezler</a> •
<a href="#" class="cookie-manage-link" id="cookieManageLink" hidden>Çerez Ayarları</a>
</div>
</footer>
<script>
// Tema toggler (varsa mevcut kodun kalsın)
(function(){
const btn = document.getElementById('themeToggle');
if(!btn) return;
const root = document.documentElement;
function setTheme(t){ root.dataset.theme = t; localStorage.setItem('theme', t); btn.textContent = t==='dark'?'☀️':'🌙'; }
setTheme(localStorage.getItem('theme') || 'light');
btn.addEventListener('click', ()=> setTheme(root.dataset.theme==='dark'?'light':'dark'));
})();
// Mobil menü toggler
(function(){
const btn = document.getElementById('hamburgerBtn');
const menu = document.getElementById('mobileMenu');
const backdrop = document.getElementById('mobileBackdrop');
if(!btn || !menu || !backdrop) return;
function openMenu(){
menu.hidden = false;
backdrop.hidden = false;
btn.setAttribute('aria-expanded','true');
// odak ilk linke
const first = menu.querySelector('a'); first && first.focus();
document.body.style.overflow = 'hidden';
}
function closeMenu(){
menu.hidden = true;
backdrop.hidden = true;
btn.setAttribute('aria-expanded','false');
document.body.style.overflow = '';
btn.focus();
}
btn.addEventListener('click', ()=>{
const isOpen = btn.getAttribute('aria-expanded') === 'true';
isOpen ? closeMenu() : openMenu();
});
backdrop.addEventListener('click', closeMenu);
document.addEventListener('keydown', (e)=>{ if(e.key === 'Escape'){ closeMenu(); }});
})();
</script>
<script>
(function(){
const btn = document.getElementById('hamburgerBtn');
const drawer = document.getElementById('offcanvasMenu');
const closeBtn = drawer ? drawer.querySelector('.offcanvas-close') : null;
const backdrop = document.querySelector('.offcanvas-backdrop');
if(!btn || !drawer || !backdrop){
console.warn('Offcanvas: gerekli elemanlar bulunamadı');
return;
}
// Focus trap için ilk ve son focuslanabilir öğeler
function getFocusables(root){
return Array.from(root.querySelectorAll('a, button, input, textarea, select, [tabindex]:not([tabindex="-1"])'))
.filter(el => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'));
}
function openDrawer(){
drawer.classList.add('is-open');
backdrop.hidden = false;
requestAnimationFrame(()=> backdrop.classList.add('is-open'));
document.body.classList.add('menu-open');
btn.setAttribute('aria-expanded', 'true');
btn.classList.add('is-active'); // ikon animasyonu
// focus yönetimi
const f = getFocusables(drawer);
(f[0] || closeBtn || drawer).focus();
}
function closeDrawer(){
drawer.classList.remove('is-open');
backdrop.classList.remove('is-open');
document.body.classList.remove('menu-open');
btn.setAttribute('aria-expanded', 'false');
btn.classList.remove('is-active'); // ikon animasyonu
// backdrop animasyonu bitince tamamen gizle
setTimeout(()=> { backdrop.hidden = true; }, 200);
btn.focus();
}
function toggleDrawer(){
if(drawer.classList.contains('is-open')) closeDrawer(); else openDrawer();
}
btn.addEventListener('click', function(e){
e.preventDefault(); // güvenli
toggleDrawer();
});
if(closeBtn) closeBtn.addEventListener('click', closeDrawer);
backdrop.addEventListener('click', closeDrawer);
// ESC ile kapat
document.addEventListener('keydown', function(e){
if(e.key === 'Escape' && drawer.classList.contains('is-open')) closeDrawer();
// focus trap (Tab ile dışarı taşmasın)
if(e.key === 'Tab' && drawer.classList.contains('is-open')){
const f = getFocusables(drawer);
if(!f.length) return;
const first = f[0], last = f[f.length - 1];
if(e.shiftKey && document.activeElement === first){ last.focus(); e.preventDefault(); }
else if(!e.shiftKey && document.activeElement === last){ first.focus(); e.preventDefault(); }
}
});
})();
</script>
<!-- ÇEREZ BANNER -->
<div class="cookie-banner" id="cookieBanner" role="dialog" aria-modal="true" aria-labelledby="cookieTitle" hidden>
<div class="cookie-inner container">
<div class="cookie-text">
<h2 id="cookieTitle">Çerezleri Kullanıyoruz</h2>
<p>
Deneyiminizi iyileştirmek için zorunlu çerezler kullanıyoruz. Analitik ve pazarlama çerezleri için izninizi rica ederiz.
<a href="https://qna.com.tr/sayfa/cerez-politikasi/" target="_blank" rel="noopener">Çerez Politikası</a>
</p>
</div>
<div class="cookie-actions">
<button class="btn btn-secondary" id="cookiePrefsOpen" type="button" aria-haspopup="dialog" aria-controls="cookiePrefs">
Tercihleri Yönet
</button>
<button class="btn btn-accept" id="cookieAcceptAll" type="button">Tümünü Kabul Et</button>
</div>
</div>
</div>
<!-- TERCİHLER PANELİ (MODAL) -->
<div class="cookie-prefs-backdrop" id="cookieBackdrop" hidden></div>
<div class="cookie-prefs" id="cookiePrefs" role="dialog" aria-modal="true" aria-labelledby="cookiePrefsTitle" hidden>
<div class="cookie-prefs-head">
<h3 id="cookiePrefsTitle">Çerez Tercihleri</h3>
<button class="cookie-close" id="cookiePrefsClose" type="button" aria-label="Kapat">✕</button>
</div>
<form class="cookie-prefs-body">
<fieldset class="cookie-group">
<legend>Gerekli Çerezler</legend>
<p class="muted">Site güvenliği ve temel işlevler için gereklidir. Devre dışı bırakılamaz.</p>
<label class="switch">
<input type="checkbox" checked disabled>
<span>Her zaman etkin</span>
</label>
</fieldset>
<fieldset class="cookie-group">
<legend>Analitik Çerezler</legend>
<p class="muted">Site performansı ve kullanım analizi için anonim istatistikler.</p>
<label class="switch">
<input type="checkbox" id="consentAnalytics">
<span>Analitik’e izin ver</span>
</label>
</fieldset>
<fieldset class="cookie-group">
<legend>Pazarlama Çerezleri</legend>
<p class="muted">Size uygun içerik ve kampanyalar göstermek için kullanılır.</p>
<label class="switch">
<input type="checkbox" id="consentMarketing">
<span>Pazarlama’ya izin ver</span>
</label>
</fieldset>
<div class="cookie-prefs-actions">
<button class="btn btn-secondary" type="button" id="cookieRejectAll">Tümünü Reddet</button>
<button class="btn btn-accept" type="submit" id="cookieSave">Kaydet</button>
</div>
</form>
</div>
<style>
/* Mobil: bottom sheet gibi, tam görünür alan + içeriği kaydırılabilir */
.cookie-prefs{
position: fixed;
left: 0; right: 0; bottom: 0;
top: auto;
max-height: min(90vh, 640px); /* ekranı taşmasın */
display: flex; flex-direction: column;
overflow: hidden; /* başlık sabit, gövde kayar */
border-radius: 12px 12px 0 0;
padding-bottom: env(safe-area-inset-bottom);
}
/* Modal iç kaydırma */
.cookie-prefs-body{
overflow: auto;
max-height: calc(90vh - 56px - 70px); /* başlık + butonlar düşülerek */
}
/* Masaüstü: tam ortala */
@media (min-width: 720px){
.cookie-prefs{
top: 50%;
left: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%); /* gerçek merkezleme */
width: min(720px, calc(100vw - 48px));
max-height: min(85vh, 680px);
border-radius: 12px;
}
.cookie-prefs.show{ transform: translate(-50%, -50%) !important; }
.cookie-prefs-body{
max-height: calc(85vh - 56px - 70px); /* başlık+alt butonlar */
}
}
/* Başlık ve alt butonlar sabit kalsın */
.cookie-prefs-head{ position: sticky; top: 0; z-index: 1; }
.cookie-prefs-actions{ position: sticky; bottom: 0; background: var(--card); padding-top: 8px; }
/* Backdrop ve z-index hiyerarşisi (modal üstte) */
.cookie-banner{ z-index: 200; }
.cookie-prefs-backdrop{ z-index: 210; }
.cookie-prefs{ z-index: 220; }
/* ============ Cookie Banner ============ */
.cookie-banner[hidden]{display:none!important}
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--card);color:var(--fg);border-top:1px solid var(--border);box-shadow:0 -8px 24px rgba(0,0,0,.08)}
.cookie-inner{display:grid;align-items:center;gap:10px;padding:12px 16px}
@media(min-width:760px){.cookie-inner{grid-template-columns:1fr auto}}
.cookie-text h2{font-size:16px;margin:0 0 4px}
.cookie-text p{margin:0;color:var(--muted)}
.cookie-text a{color:var(--brand);text-decoration:none}
.cookie-text a:hover{text-decoration:underline}
.cookie-actions{display:flex;gap:8px;justify-content:flex-center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--fg);font-weight:700;cursor:pointer;transition:transform .12s ease,background .18s ease,border-color .18s ease}
.btn:hover{transform:translateY(-1px)}
.btn-accept{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent}
.btn-secondary:hover{background:color-mix(in oklab,var(--brand) 6%,var(--card))}
/* ============ Cookie Prefs Modal ============ */
.cookie-prefs[hidden],.cookie-prefs-backdrop[hidden]{display:none!important}
.cookie-prefs-backdrop{position:fixed;inset:0;z-index:210;background:rgba(0,0,0,.35);opacity:0;transition:opacity .2s ease}
.cookie-prefs{position:fixed;inset:auto 0 0 0;z-index:220;margin:0 auto;max-width:720px;background:var(--card);color:var(--fg);border-top:1px solid var(--border);border-radius:12px 12px 0 0;box-shadow:0 -20px 50px rgba(2,6,23,.18);transform:translateY(16px);opacity:0;transition:transform .24s ease,opacity .24s ease}
@media(min-width:720px){.cookie-prefs{top:50%;transform:translateY(10px);border-radius:12px}}
.cookie-prefs.show{transform:translateY(0);opacity:1}
.cookie-prefs-backdrop.show{opacity:1}
.cookie-prefs-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border);background:color-mix(in oklab,var(--card) 92%,transparent)}
.cookie-close{border:1px solid var(--border);background:var(--card);color:var(--fg);border-radius:10px;padding:6px 10px;cursor:pointer}
.cookie-prefs-body{padding:10px 14px 14px}
.cookie-group{border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin:10px 0}
.cookie-group legend{font-weight:700;padding:0 6px}
.cookie-group .muted{color:var(--muted);font-size:13px;margin:6px 0 8px}
/* Toggle switch */
.switch{display:inline-flex;align-items:center;gap:8px;user-select:none}
.switch input{appearance:none;width:42px;height:24px;border-radius:999px;position:relative;background:#cbd5e1;outline:none;transition:background .2s ease;border:1px solid var(--border)}
.switch input::after{content:"";position:absolute;inset:2px auto 2px 2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s ease}
.switch input:checked{background:color-mix(in oklab,var(--brand) 70%,#cbd5e1)}
.switch input:checked::after{transform:translateX(18px)}
.cookie-prefs-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.cookie-manage-link{display:inline-block;font-size:13px;color:var(--muted);text-decoration:none}
.cookie-manage-link:hover{color:var(--brand)}
@media(prefers-reduced-motion:reduce){.cookie-banner,.cookie-prefs,.cookie-prefs-backdrop{transition:none!important}}
</style>
<script>
(function(){
const KEY = "qna_cookie_consent_v1"; // versiyonlayabilirsin
const banner = document.getElementById('cookieBanner');
const prefs = document.getElementById('cookiePrefs');
const backdrop = document.getElementById('cookieBackdrop');
const openPrefsBtn = document.getElementById('cookiePrefsOpen');
const acceptAllBtn = document.getElementById('cookieAcceptAll');
const closePrefsBtn = document.getElementById('cookiePrefsClose');
const rejectAllBtn = document.getElementById('cookieRejectAll');
const manageLink = document.getElementById('cookieManageLink');
const analyticsChk = document.getElementById('consentAnalytics');
const marketingChk = document.getElementById('consentMarketing');
function getConsent(){
try{ return JSON.parse(localStorage.getItem(KEY)) || null; }catch{ return null; }
}
function setConsent(val){
localStorage.setItem(KEY, JSON.stringify(val));
}
function showBanner(){
banner.hidden = false;
// odak rahatlığı için banner’a fokus atmayalım; butona basınca modal açılır
}
function hideBanner(){
banner.hidden = true;
}
function openPrefs(){
backdrop.hidden = false;
prefs.hidden = false;
requestAnimationFrame(()=>{
backdrop.classList.add('show');
prefs.classList.add('show');
});
// focus
(prefs.querySelector('h3') || prefs).focus?.();
}
function closePrefs(){
backdrop.classList.remove('show');
prefs.classList.remove('show');
setTimeout(()=>{ backdrop.hidden = true; prefs.hidden = true; }, 200);
}
// Başlangıç
const saved = getConsent();
if(!saved){
showBanner();
}else{
// “Ayarları yönet” linkini göster (footer’a taşıyabilirsin)
manageLink.hidden = false;
// Onaylara göre scriptleri yükle
applyConsent(saved);
}
// Etkileşimler
openPrefsBtn?.addEventListener('click', openPrefs);
acceptAllBtn?.addEventListener('click', ()=>{
const consent = { necessary: true, analytics: true, marketing: true, ts: Date.now() };
setConsent(consent);
hideBanner();
manageLink.hidden = false;
applyConsent(consent);
});
closePrefsBtn?.addEventListener('click', closePrefs);
rejectAllBtn?.addEventListener('click', ()=>{
const consent = { necessary: true, analytics: false, marketing: false, ts: Date.now() };
setConsent(consent);
closePrefs(); hideBanner();
manageLink.hidden = false;
applyConsent(consent);
});
// Kaydet (form submit)
prefs?.querySelector('form')?.addEventListener('submit', function(e){
e.preventDefault();
const consent = {
necessary: true,
analytics: !!analyticsChk?.checked,
marketing: !!marketingChk?.checked,
ts: Date.now()
};
setConsent(consent);
closePrefs(); hideBanner();
manageLink.hidden = false;
applyConsent(consent);
});
// Yönet linki
manageLink?.addEventListener('click', (e)=>{ e.preventDefault(); openPrefs(); });
// ESC ile modal kapansın
document.addEventListener('keydown', (e)=>{
if(e.key === 'Escape' && !prefs.hidden){ closePrefs(); }
});
// === Onaylara göre scriptleri yükle ===
function applyConsent(c){
// Önce mevcut opsiyonel scriptleri kaldır (sayfayı yeniden yüklemeden tercih değişimi)
cleanupOptionalScripts();
if(c.analytics){ loadAnalytics(); }
if(c.marketing){ loadMarketing(); }
}
function cleanupOptionalScripts(){
// Örnek: veri-attribute ile yönet
document.querySelectorAll('script[data-optional="1"]').forEach(s=> s.remove());
}
// === Google Analytics
function loadAnalytics(){
const gaSrc = "https://www.googletagmanager.com/gtag/js?id=G-WZ63TFWS3W";
addScript(gaSrc, { async: true, optional: true });
addInlineScript(`
window.dataLayer = window.dataLayer || [];
function gtag(){ dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-WZ63TFWS3W', { anonymize_ip: true, transport_type: 'beacon' });
`, { optional: true });
}
// === Pazarlama pikseli (meta, ads vs.)
function loadMarketing(){
// (ör: Meta Pixel)
// addScript('https://connect.facebook.net/en_US/fbevents.js', { async:true, optional:true });
// addInlineScript(`fbq('init', 'PIXEL_ID'); fbq('track', 'PageView');`, { optional:true });
}
function addScript(src, {async=false, defer=false, optional=false}={}){
const s = document.createElement('script');
s.src = src;
if(async) s.async = true;
if(defer) s.defer = true;
if(optional) s.dataset.optional = "1";
document.head.appendChild(s);
return s;
}
function addInlineScript(code, {optional=false}={}){
const s = document.createElement('script');
if(optional) s.dataset.optional = "1";
s.textContent = code;
document.head.appendChild(s);
return s;
}
})();
</script>
</body>
</html>
