HTML ile Kişisel Web Sitesi Nasıl Yapılır?

HTML ile sıfırdan kişisel web sitesi nasıl yapılır? Bu kapsamlı SEO uyumlu rehber sayesinde adım adım web tasarım, içerik yapısı, meta etiketler, sayf

 

HTML ile Kişisel Web Sitesi Nasıl Yapılır?



Giriş: Dijital Dünyada Varlık Oluşturmak

Günümüzde kişisel bir web sitesi sahibi olmak, hem bireysel hem de profesyonel anlamda büyük önem taşımaktadır. İster bir yazılımcı, tasarımcı, öğretmen, öğrenci ya da girişimci olun; internet üzerinde kendinizi tanıtabileceğiniz bir platform oluşturmak sizi bir adım öne taşır. Bu makalede, yalnızca HTML kullanarak kişisel bir web sitesi yapımını, temel adımlarla ve SEO (Arama Motoru Optimizasyonu) açısından uyumlu şekilde ele alacağız.

1. Kişisel Web Sitesi Nedir?

Kişisel web sitesi, bireylerin kendi kimliklerini, çalışmalarını, projelerini ve düşüncelerini internet üzerinden paylaşabildiği dijital bir alandır. Bu tür siteler şu amaçlarla oluşturulabilir:

  • Kendi portföyünüzü sergilemek

  • Blog yazıları paylaşmak

  • İletişim kurmak

  • Özgeçmiş (CV) yayınlamak

  • Profesyonel yetenekleri sergilemek

2. Neden HTML?

HTML (HyperText Markup Language), web sayfalarının iskeletini oluşturan temel dildir. Kişisel bir web sitesine başlarken HTML öğrenmek, bu sürecin ilk ve en önemli adımıdır. HTML sayesinde şunları yapabilirsiniz:

  • Sayfa başlıkları oluşturabilirsiniz.

  • Paragraflar, resimler, bağlantılar ve listeler ekleyebilirsiniz.

  • SEO uyumlu yapılar oluşturabilirsiniz.

3. Gerekli Araçlar

HTML ile kişisel web sitesi oluşturmak için aşağıdaki araçlara ihtiyacınız var:

  • Kod Editörü: Visual Studio Code, Sublime Text veya Notepad++ gibi bir editör seçebilirsiniz.

  • Web Tarayıcı: Google Chrome, Firefox veya Safari gibi modern bir tarayıcı.

  • Dosya Yapısı: HTML dosyaları için düzenli bir klasör yapısı.

Örnek Dosya Yapısı:

markdown

my-website/ │ ├── index.html ├── about.html ├── contact.html └── images/ └── profile.jpg

4. Temel HTML Yapısı

Her HTML dosyası belirli bir iskelet yapısına sahiptir. İşte bir örnek:

html

<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="description" content="Kişisel web sitem. Portföyüm, blog yazılarım ve iletişim bilgilerim."> <meta name="keywords" content="kişisel web sitesi, HTML web sitesi, portföy sitesi, blog, iletişim"> <meta name="author" content="Adınız Soyadınız"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Adınız Soyadınız - Kişisel Web Sitesi</title> </head> <body> <h1>Hoş Geldiniz</h1> <p>Benim kişisel web siteme hoş geldiniz!</p> </body> </html>

Açıklamalar:

  • <meta> etiketleri SEO açısından çok önemlidir.

  • <title> etiketi sayfanın başlığıdır ve arama motorlarında görünen ilk şeydir.

  • <h1> etiketi ana başlıktır ve bir sayfada sadece bir kez kullanılmalıdır.

5. Ana Sayfa (index.html)

Ana sayfa ziyaretçilerin karşılaştığı ilk sayfadır. Temiz, etkili ve bilgilendirici olmalıdır.

Basit bir index.html örneği:

html

<body> <header> <h1>Adınız Soyadınız</h1> <nav> <ul> <li><a href="index.html">Ana Sayfa</a></li> <li><a href="about.html">Hakkımda</a></li> <li><a href="contact.html">İletişim</a></li> </ul> </nav> </header> <main> <section> <h2>Hakkımda</h2> <p>Kendinizi tanıtan kısa bir yazı buraya yazılabilir.</p> </section> <section> <h2>Projelerim</h2> <ul> <li>Web Tasarımı</li> <li>Blog Yazarlığı</li> <li>Grafik Tasarım</li> </ul> </section> </main> <footer> <p>© 2025 Adınız Soyadınız. Tüm hakları saklıdır.</p> </footer> </body>

Devam etmek istersen sonraki bölümlerde şunlara yer vereceğim:

Bölüm 2: Hakkımda ve İletişim Sayfaları
Bölüm 3: Görseller, Linkler ve Sayfa Düzeni
Bölüm 4: SEO Teknikleri, Meta Etiketler ve Anahtar Kelime Kullanımı
Bölüm 5: Web Sitesini Yayınlama (Github Pages ile ücretsiz yayınlama)

HTML ile Kişisel Web Sitesi Nasıl Yapılır? (Bölüm 2)

6. Hakkımda Sayfası (about.html)

Kişisel web sitenizde “Hakkımda” sayfası, ziyaretçilere sizi tanıtan en önemli bölümdür. Burada eğitim geçmişiniz, deneyimleriniz, becerileriniz ve ilgi alanlarınızdan bahsedebilirsiniz.

Örnek Hakkımda Sayfası:

html

<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="description" content="Adınız Soyadınız hakkında detaylı bilgiler."> <meta name="keywords" content="hakkımda, kişisel bilgi, özgeçmiş, deneyim"> <meta name="author" content="Adınız Soyadınız"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hakkımda - Adınız Soyadınız</title> </head> <body> <header> <h1>Hakkımda</h1> <nav> <ul> <li><a href="index.html">Ana Sayfa</a></li> <li><a href="about.html">Hakkımda</a></li> <li><a href="contact.html">İletişim</a></li> </ul> </nav> </header> <main> <section> <h2>Ben Kimim?</h2> <p>Merhaba! Ben Adınız Soyadınız. Yazılıma ilgi duyuyorum ve kendi projelerimi geliştiriyorum.</p> </section> <section> <h2>Eğitim</h2> <p>ABC Üniversitesi - Bilgisayar Mühendisliği (2015-2019)</p> </section> <section> <h2>Beceriler</h2> <ul> <li>HTML5 & CSS3</li> <li>JavaScript</li> <li>Python</li> </ul> </section> </main> <footer> <p>© 2025 Adınız Soyadınız</p> </footer> </body> </html>

SEO İçin İpuçları:

  • Anahtar kelimeleri doğrudan <meta> ve içerikte kullan.

  • h1, h2, h3 gibi başlık etiketleriyle içerik hiyerarşisini düzenle.


7. İletişim Sayfası (contact.html)

İletişim sayfası, ziyaretçilerin sizinle doğrudan iletişim kurmasını sağlar. Genellikle bir form, e-posta adresi ve sosyal medya bağlantıları içerir.

Örnek İletişim Sayfası:

html

<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="description" content="Adınız Soyadınız ile iletişim kurun."> <meta name="keywords" content="iletişim, e-posta, sosyal medya, bağlantı kur"> <meta name="author" content="Adınız Soyadınız"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>İletişim - Adınız Soyadınız</title> </head> <body> <header> <h1>İletişim</h1> <nav> <ul> <li><a href="index.html">Ana Sayfa</a></li> <li><a href="about.html">Hakkımda</a></li> <li><a href="contact.html">İletişim</a></li> </ul> </nav> </header> <main> <section> <h2>Benimle İletişime Geçin</h2> <p>Bana aşağıdaki form aracılığıyla ya da e-posta adresimden ulaşabilirsiniz:</p> <p><strong>E-posta:</strong> adiniz@example.com</p> </section> <section> <h3>İletişim Formu</h3> <form action="mailto:adiniz@example.com" method="post" enctype="text/plain"> <label for="name">Adınız:</label><br> <input type="text" id="name" name="name"><br><br> <label for="email">E-posta:</label><br> <input type="email" id="email" name="email"><br><br> <label for="message">Mesajınız:</label><br> <textarea id="message" name="message"></textarea><br><br> <input type="submit" value="Gönder"> </form> </section> <section> <h3>Sosyal Medya</h3> <ul> <li><a href="https://linkedin.com/in/kullaniciadi">LinkedIn</a></li> <li><a href="https://github.com/kullaniciadi">GitHub</a></li> <li><a href="https://twitter.com/kullaniciadi">Twitter</a></li> </ul> </section> </main> <footer> <p>© 2025 Adınız Soyadınız</p> </footer> </body> </html>

8. HTML Formlar ve SEO Uyumlu Form Yapısı

İletişim formu oluştururken dikkat edilmesi gerekenler:

  • Tüm input'lara name ve id değerleri verilmelidir.

  • Form alanları açıklayıcı <label> etiketleriyle desteklenmelidir.

  • alt, title gibi etiketler kullanılmalıdır.

  • Formda spam koruması için ileride reCAPTCHA gibi araçlar da eklenebilir.


Makalenin sonraki bölümünde şu konulara geçeceğiz:

Bölüm 3:

  • Web sitesine resim ve bağlantı ekleme

  • Sayfa düzenini geliştirme

  • Liste ve tablo yapıları

HTML ile Kişisel Web Sitesi Nasıl Yapılır? (Bölüm 3)

9. Görselleri Web Sitesine Ekleme

Bir web sitesinde görseller, hem estetik görünüm hem de anlatımı güçlendirmek açısından büyük önem taşır. HTML ile bir görsel eklemek oldukça basittir:

Görsel Ekleme:

html

<img src="images/profile.jpg" alt="Adınız Soyadınız Profil Fotoğrafı" width="200">

Açıklamalar:

  • src görselin yolunu belirler.

  • alt SEO açısından çok önemlidir, görsel açıklaması olarak arama motorları tarafından taranır.

  • width ve height ile görsel boyutu ayarlanabilir.

SEO İçin Öneriler:

  • Dosya isimleri açıklayıcı ve kısa olmalıdır: profil-fotografi.jpg

  • alt etiketi mutlaka girilmelidir.

  • WebP gibi sıkıştırılmış görsel formatlarını tercih edin.


10. Bağlantılar (Linkler)

HTML'de başka sayfalara, e-posta adresine veya harici web sitelerine bağlantılar verebilirsiniz.

Temel Link Kullanımı:

html

<a href="about.html">Hakkımda</a>

Harici Link (Yeni Sekmede Açılır):

html
<a href="https://github.com/kullaniciadi" target="_blank" rel="noopener noreferrer">GitHub</a>

E-posta Linki:

html

<a href="mailto:adiniz@example.com">E-posta Gönder</a>

SEO İçin Not:

  • Sayfalar arasında doğru bağlantılar kurulmalıdır.

  • Kırık linkler (404 hataları) arama motorları tarafından olumsuz değerlendirilir.

  • rel="nofollow" etiketi gereksiz veya sponsorlu dış linklerde kullanılabilir.


11. Sayfa Düzeni Oluşturma

Daha şık ve profesyonel bir görünüm için HTML elementlerini mantıklı şekilde düzenlemeliyiz. Bu düzenlemeler ileride CSS ile daha da güzelleştirilebilir.

Temel Bölümler:

  • <header>: Sayfa başlığı ve menü

  • <nav>: Navigasyon bağlantıları

  • <main>: Ana içerik

  • <section>: İçeriği tematik şekilde bölmek için

  • <footer>: Alt bilgi bölümü

Örnek Düzen:

html

<body> <header> <h1>Kişisel Web Sitem</h1> <nav> <a href="index.html">Ana Sayfa</a> <a href="about.html">Hakkımda</a> <a href="contact.html">İletişim</a> </nav> </header> <main> <section> <h2>Projelerim</h2> <p>Yaptığım işlerin bir listesini burada bulabilirsiniz.</p> </section> <section> <h2>Blog Yazılarım</h2> <p>Teknoloji hakkında yazdığım makaleleri okuyabilirsiniz.</p> </section> </main> <footer> <p>© 2025 Adınız Soyadınız</p> </footer> </body>

12. Liste Yapıları

Liste kullanımı özellikle yetenekler, deneyimler veya projeler gibi maddeli içeriklerde oldukça faydalıdır.

Sıralı Liste (Numerik):

html

<ol> <li>HTML Öğren</li> <li>CSS Uygula</li> <li>JavaScript Eklemeyi Planla</li> </ol>

Sırasız Liste (Madde İşaretli):

html

<ul> <li>Web Tasarımı</li> <li>Yazılım Geliştirme</li> <li>İçerik Üretimi</li> </ul>

13. Tablo Kullanımı

Tablolar, bilgileri düzenli ve okunabilir şekilde sunmak için kullanılır.

Örnek Tablo:

html

<table border="1"> <tr> <th>Yıl</th> <th>Şirket</th> <th>Pozisyon</th> </tr> <tr> <td>2022</td> <td>ABC Teknoloji</td> <td>Frontend Geliştirici</td> </tr> <tr> <td>2023</td> <td>XYZ Yazılım</td> <td>Full Stack Geliştirici</td> </tr> </table>

Makalenin bir sonraki bölümünde şunları ele alacağız:

Bölüm 4:

  • SEO teknikleri (HTML için meta etiketler, başlık yapısı, içerik optimizasyonu)

  • Sayfa içi SEO uygulamaları

  • Anahtar kelime yerleşimi ve stratejileri

HTML ile Kişisel Web Sitesi Nasıl Yapılır? (Bölüm 4)

14. HTML'de SEO Uyumlu Sayfa Yapısı

Bir kişisel web sitesi oluştururken HTML yapınızı SEO (Arama Motoru Optimizasyonu) açısından etkili şekilde düzenlemek, sitenizin Google gibi arama motorlarında daha görünür olmasını sağlar.

Temel SEO Etiketleri:

<title> Etiketi:

Arama sonuçlarında görünen başlıktır. Sayfa içeriğini yansıtan ve anahtar kelime içeren bir başlık seçin.

html

<title>Frontend Geliştirici | Adınız Soyadınız</title>

<meta name="description">:

Sayfanın kısa açıklamasıdır. Arama motorları bu etiketi baz alır.

html

<meta name="description" content="Frontend geliştirici Adınız Soyadınız hakkında bilgiler, projeler ve iletişim.">

<meta name="keywords">:

Anahtar kelimeler burada listelenir (Google artık bu etiketi aktif kullanmasa da bazı arama motorları hâlâ dikkate alır).

html

<meta name="keywords" content="frontend, geliştirici, html, kişisel web sitesi, yazılım, portfolyo">

<meta name="robots">:

Sayfanın indekslenmesini ve bağlantıların takip edilmesini kontrol eder.

html

<meta name="robots" content="index, follow">

15. Başlık Yapısı ve Hiyerarşi

Başlık etiketleri (<h1> - <h6>) sadece görünüm değil, SEO açısından içerik hiyerarşisi sunar.

Doğru Kullanım:

html

<h1>Adınız Soyadınız</h1> <!-- Sayfa Başlığı --> <h2>Projeler</h2> <!-- Bölüm Başlığı --> <h3>Proje 1: Kişisel Blog</h3> <!-- Alt Başlık -->

Yanlış Kullanım:

Aynı sayfada birden fazla <h1> kullanmak SEO açısından önerilmez. Sadece 1 adet <h1> olmalıdır.


16. Anahtar Kelime Stratejileri

Anahtar kelimeleri sayfa başlıklarında, paragraflarda, görsel alt etiketlerinde ve linklerde doğal şekilde yerleştirin.

Örnek Kullanım:

html

<h1>HTML ile Kişisel Web Sitesi Yapımı</h1> <p>Bu yazıda HTML kullanarak SEO uyumlu kişisel web sitesi oluşturmayı öğreniyoruz.</p> <img src="seo-dostu-web.png" alt="SEO uyumlu kişisel web sitesi örneği">

⚠️ Anahtar kelime doldurma (keyword stuffing) yapmayın! Bu SEO açısından olumsuz etkiler yaratabilir.


17. Sayfa İçi SEO Teknikleri

Sayfa içi SEO (On-Page SEO), sayfanızın içerik yapısını ve kodunu optimize etmeye odaklanır.

Başlıca Sayfa İçi SEO Unsurları:

  • URL Yapısı: about.html gibi sade ve anahtar kelime içeren dosya adları kullanın.

  • İçerik Uzunluğu: Anlamlı ve bilgilendirici içerikler üretin.

  • İç Bağlantılar: Kendi sayfalarınıza bağlantılar verin.

html

<a href="about.html">Hakkımda sayfamı inceleyin</a>
  • Mobil Uyumluluk: meta viewport etiketi mutlaka kullanılmalı.

html

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • Yüklenme Hızı: Görselleri sıkıştırın ve gereksiz HTML kodlarını temizleyin.


18. SEO Uyumlu URL ve Dosya Adlandırma

SEO dostu URL ve dosya adları, arama motorlarının sayfanızı daha iyi anlamasına yardımcı olur.

İyi Örnekler:

  • about.html

  • iletisim.html

  • html-kisisel-web-sitesi.html

Kötü Örnekler:

  • sayfa2.html

  • asdkjasd.html

  • page.php?id=123


19. SEO Dostu Görsel Kullanımı

Görseller arama motorları için okunabilir değildir. Bu nedenle:

  • alt etiketini doğru kullanın.

  • Görsel dosya adlarını anlamlı seçin: profil-fotografi.jpg

  • Görsel boyutlarını optimize edin (örneğin .webp formatı tercih edin).

  • Lazy loading tekniğini kullanarak sayfa yükünü azaltın:

html

<img src="resim.jpg" alt="Portfolyo ekran görüntüsü" loading="lazy">

20. HTML5 Yapısal Etiketleri ve SEO

HTML5 ile gelen yapısal etiketler, SEO’yu olumlu etkiler çünkü arama motorları bu bölümleri daha kolay analiz eder:

  • <header> – Başlık ve menü içerir.

  • <nav> – Navigasyon linkleri.

  • <main> – Sayfanın asıl içeriği.

  • <section> – İçerik bölümleri.

  • <article> – Blog veya yazı içerikleri.

  • <aside> – Yan içerikler (reklamlar, yan menüler).

  • <footer> – Alt bilgiler (iletişim, sosyal medya linkleri).


Makalenin son bölümünde şu konular ele alınacak:

Bölüm 5 (Son):

  • HTML ile temel portfolyo sitesi örneği

  • Yayınlama: Web sitenizi internete taşıma (GitHub Pages veya hosting)

  • Son SEO ipuçları ve öneriler

HTML ile Kişisel Web Sitesi Nasıl Yapılır? (Bölüm 5)

21. Temel Portfolyo Sitesi Örneği

Aşağıda, HTML ile oluşturulmuş temel bir kişisel portfolyo sayfası örneğini bulacaksınız. Bu yapı hem sade hem de SEO dostudur. Daha sonra CSS ve JavaScript ile geliştirilebilir.

Örnek HTML Kodu:

html
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Frontend geliştirici Adınız Soyadınız'ın kişisel portfolyo sitesi. Projeler, hakkımda ve iletişim bilgileri."> <meta name="keywords" content="frontend, html, web geliştirici, portfolyo, kişisel web sitesi"> <meta name="author" content="Adınız Soyadınız"> <title>Adınız Soyadınız | Frontend Geliştirici</title> </head> <body> <header> <h1>Adınız Soyadınız</h1> <nav> <a href="#hakkimda">Hakkımda</a> <a href="#projeler">Projeler</a> <a href="#iletisim">İletişim</a> </nav> </header> <main> <section id="hakkimda"> <h2>Hakkımda</h2> <p>Ben Adınız Soyadınız. Frontend geliştirme ve web teknolojileri konusunda uzmanlaşmış bir geliştiriciyim.</p> </section> <section id="projeler"> <h2>Projelerim</h2> <ul> <li><strong>Blog Projesi:</strong> Kendi içerik yönetim sistemimi geliştirdim.</li> <li><strong>Portfolyo Sitesi:</strong> HTML, CSS ve JavaScript kullanarak oluşturuldu.</li> <li><strong>Hava Durumu Uygulaması:</strong> API kullanımıyla gerçek zamanlı veri çeken bir uygulama.</li> </ul> </section> <section id="iletisim"> <h2>İletişim</h2> <p>E-posta: <a href="mailto:adiniz@example.com">adiniz@example.com</a></p> <p>GitHub: <a href="https://github.com/kullaniciadi" target="_blank">github.com/kullaniciadi</a></p> </section> </main> <footer> <p>© 2025 Adınız Soyadınız. Tüm hakları saklıdır.</p> </footer> </body> </html>

Bu sayfa HTML'nin temel özelliklerini içerir ve SEO açısından optimize edilmiştir. CSS ile görsel tasarım katılabilir, JavaScript ile ise etkileşimli hale getirilebilir.


22. Web Sitenizi Yayınlama

Hazırladığınız HTML dosyalarını internet ortamında yayınlamak için birkaç farklı yöntem vardır.

Yöntem 1: GitHub Pages (Ücretsiz ve Kolay)

Adımlar:

  1. GitHub hesabı oluşturun.

  2. Yeni bir repository açın (örneğin: kisisel-website).

  3. HTML dosyalarınızı bu repoya yükleyin.

  4. GitHub Pages özelliğini aktif edin:

    • Repository ayarlarına gidin.

    • "Pages" sekmesinden yayınlamak istediğiniz branch ve dizini seçin.

    • https://kullaniciadi.github.io/kisisel-website/ adresi üzerinden yayına girer.

Yöntem 2: Ücretli Hosting ve Alan Adı

Gerekenler:

  • Bir alan adı (domain): adinizsoyadiniz.com

  • Bir hosting sağlayıcısı (Turhost, GoDaddy, Netlify, Hostinger, vb.)

Yayınlama:

  • Hosting panelinden dosya yöneticisini kullanarak index.html dosyanızı ana dizine yükleyin.

  • Alan adınızı bu hosting ile ilişkilendirin.


23. SEO için Son İpuçları

Web sitenizi yayınladıktan sonra SEO performansınızı artırmak için aşağıdaki ipuçlarını uygulayın:

A. Google Search Console Kayıt

  • Web sitenizi Google Search Console'a ekleyin.

  • Sitemap.xml oluşturun ve gönderin.

  • Mobil uyumluluk, indeksleme ve performans durumunu takip edin.

B. Site Haritası (Sitemap)

  • Site haritası oluşturun ve arama motorlarına sunun.

  • Basit bir örnek:

xml

<?xml version="1.0" encoding="UTF-8" ?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>https://adinizsoyadiniz.com/index.html</loc> <priority>1.0</priority> </url> <url> <loc>https://adinizsoyadiniz.com/about.html</loc> <priority>0.8</priority> </url> </urlset>

C. Robots.txt

  • Arama motorlarının hangi sayfaları taramasını istediğinizi kontrol eder.

txt

User-agent: * Disallow: Sitemap: https://adinizsoyadiniz.com/sitemap.xml

24. Sonuç: Kendi Web Sitenizi Oluşturmak

HTML kullanarak kişisel web sitenizi oluşturmak, sadece bir portfolyo sergilemekle kalmaz, aynı zamanda profesyonel kimliğinizi internet ortamında güçlendirir. SEO uyumlu yapılandırılmış bir web sitesi sayesinde:

  • İş fırsatları yakalayabilirsiniz.

  • Blog yazılarınızı daha geniş kitlelere ulaştırabilirsiniz.

  • Kendi markanızı oluşturabilirsiniz.

Unutmayın: HTML temeli güçlü olan bir web sitesi, CSS ve JavaScript ile birlikte geliştirildiğinde profesyonel bir görünüm kazanır ve arama motorlarında üst sıralarda yer alabilir.


Bonus: Geliştirme ve Öğrenme Kaynakları


Yorumlar