HTML ile Kişisel Web Sitesi Nasıl Yapılır?
İnternetin yaygınlaşmasıyla birlikte kişisel web siteleri, kendimizi ifade etmenin ve dijital dünyada varlık göstermenin önemli bir yolu haline geldi. Kendi web sitenizi oluşturmak, hem profesyonel hem de kişisel gelişim için harika bir adım olabilir. Bu yazıda, HTML kullanarak basit ama etkili bir kişisel web sitesi nasıl yapabileceğinizi adım adım anlatacağım.
1. Temel HTML Bilgisi
HTML (HyperText Markup Language), web sayfalarının iskeletini oluşturan temel işaretleme dilidir. HTML, metin, resim ve bağlantılar gibi web sayfası içeriğini tarayıcıya nasıl görüntüleneceğini belirtir. Kişisel web sitenizi oluşturmak için HTML’in temel yapı taşlarını anlamanız önemlidir.
Örnek HTML Kodu:
<!DOCTYPE html>
<html>
<head>
<title>Emirhan'ın Blogu</title>
</head>
<body>
<h1>Hoş Geldiniz!</h1>
<p>Bu benim kişisel blog sitem. Burada yazılım geliştirme, teknoloji ve daha fazlası hakkında yazılar bulabilirsiniz.</p>
</body>
</html>2. Yapısal Planlama
Bir web sitesi yaparken, önce sitenin yapısını planlamak önemlidir. Kişisel web siteniz genellikle şu sayfalardan oluşabilir:
- Ana Sayfa: Kendinizi tanıttığınız ve site içeriğine genel bir bakış sunduğunuz sayfa.
- Hakkımda: Detaylı bir biyografi veya özgeçmiş.
- Blog: Yazılarınızı paylaştığınız bölüm.
- İletişim: Ziyaretçilerinizin sizinle iletişime geçebileceği bir form veya iletişim bilgileri.
3. HTML Yapısını Oluşturmak
Planınızı yaptıktan sonra, HTML kodlamasına başlayabilirsiniz. İlk olarak, site yapınızı yansıtacak temel HTML dosyalarını oluşturun.
Örnek Ana Sayfa Kodu:
<!DOCTYPE html>
<html>
<head>
<title>Ana Sayfa - Emirhan'ın Blogu</title>
</head>
<body>
<header>
<h1>Emirhan Koçak</h1>
<nav>
<ul>
<li><a href="index.html">Ana Sayfa</a></li>
<li><a href="hakkimda.html">Hakkımda</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="iletisim.html">İletişim</a></li>
</ul>
</nav>
</header>
<section>
<h2>Hoş Geldiniz!</h2>
<p>Bu, Emirhan Koçak'ın kişisel blog sitesi.</p>
</section>
<footer>
<p>© 2024 Emirhan Koçak. Tüm hakları saklıdır.</p>
</footer>
</body>
</html>
4. CSS ile Stil Verme
HTML, sayfanın yapısını oluşturur; ancak sitenizin daha çekici görünmesi için CSS (Cascading Style Sheets) kullanarak stil eklemeniz gerekecektir. CSS ile metin renkleri, arka planlar, kenar boşlukları gibi görsel detayları düzenleyebilirsiniz.
Basit CSS Örneği:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
footer {
text-align: center;
margin-top: 20px;
padding: 10px;
background-color: #333;
color: #fff;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
footer {
text-align: center;
margin-top: 20px;
padding: 10px;
background-color: #333;
color: #fff;
}
5. İçeriği Doldurma
Site yapısı ve stilini oluşturduktan sonra, içeriği doldurma aşamasına geçebilirsiniz. Kişisel blog sayfanızda yazılarınızı paylaşmaya başlayabilir, hakkınızda bilgiler ekleyebilir ve iletişim sayfasını oluşturabilirsiniz.
6. Yayına Alma
Web sitenizi tamamladıktan sonra, sitenizi bir sunucuya yükleyerek yayına almanız gerekecek. Bunun için bir alan adı (domain) ve hosting hizmeti almanız gerekebilir. Ardından, dosyalarınızı FTP veya bir kontrol paneli aracılığıyla sunucuya yükleyebilirsiniz.
Sonuç
HTML ile kişisel bir web sitesi oluşturmak, web geliştirme dünyasına atılan ilk adımdır. Basit bir yapıyla başlayıp zamanla CSS ve JavaScript gibi teknolojilerle sitenizi daha da geliştirebilirsiniz. Unutmayın, en iyi öğrenme yöntemi uygulamalı çalışmaktır. Kendi web sitenizi oluştururken karşılaştığınız sorunlar, sizi daha iyi bir web geliştirici yapacaktır.
emirhan koçak html html css html ile basit web sitesi html yapısı kişisel web sitesi
Yorumlar (0)