freelansup logo
Geri Dön

HTML Nedir? Yeni Başlayanlar İçin Temel Yapı ve Kurulum

HTML Nedir? Yeni Başlayanlar İçin Temel Yapı ve Kurulum

1. HTML Nedir ve Neden Öğrenmeliyiz?

1.1 Web'in 3 Temel Taşı

Modern web siteleri, üç ana teknoloji üzerine kurulmuştur. Bunları bir bina veya insan vücudu analojisiyle açıklayabiliriz:

Teknoloji Açılımı Rolü (Analoji) Tanımı
HTML HyperText Markup Language İskelet (Yapı) Sayfanın içeriğini ve mantıksal yapısını belirler.
CSS Cascading Style Sheets Dış Görünüş (Tasarım) HTML içeriğinin tarayıcıda nasıl görüneceğini belirler.
JavaScript JS Beyin/Hareket (Davranış) Sayfayı interaktif hale getirir, dinamik özellikler ekler.

Önemli Not: HTML bir Programlama Dili değil, bir İşaretleme Dili'dir (Markup Language). Görevi mantık yürütmek değil, içeriği etiketlemek ve yapılandırmaktır.

1.2 HTML'in Tarihçesi ve Rolü

Köken: 1990'ların başında Tim Berners-Lee tarafından bilimsel belgelerin kolay paylaşımı için icat edildi.

HTML5: Günümüzde kullanılan en güncel standarttır. En büyük yeniliği, anlamsal (semantic) etiketler getirerek web içeriğini sadece yapılandırmakla kalmayıp, tarayıcılar ve arama motorları için de daha anlamlı hale getirmesidir.

Neden HTML Öğrenmeliyiz? Web geliştirme kariyerinde atılacak ilk adımdır. CSS ve JavaScript'in bile çalışması için bir HTML yapısına ihtiyacı vardır. HTML, dijital dünyanın alfabesidir.

1.3 Web Geliştirme Ortamı Kurulumu

Kod yazmaya başlamak için ihtiyacımız olan profesyonel araçlar:

  1. Kod Editörü: Visual Studio Code (VS Code)
    Tercih Sebebi: Ücretsiz, hafif, hızlı, güçlü ve sektörde en yaygın kullanılan editördür.
  2. Olmazsa Olmaz Eklentiler:
    • Live Server: Kodunuzu kaydettiğiniz anda web sayfanızı tarayıcıda otomatik olarak yeniler.
    • Prettier - Code Formatter: Kodunuzu otomatik olarak belirli kurallara göre hizalar ve biçimlendirir.

1.4 Hızlı Kurulum ve İlk Klasör Yapısı (Mini Proje)

Pratik uygulamalarımızı saklamak için bir yapı oluşturma adımları:

  • Ana Klasör: Bilgisayarınızda html_kursu adında yeni bir klasör oluşturun.
  • VS Code'da Açma: VS Code'u açın ve bu klasörü "File > Open Folder" yoluyla açın.
  • Ana Dosya: Klasörün içine yeni bir dosya oluşturun ve adını index.html koyun.

Kural: Bir web sitesinin ana sayfası her zaman index.html olarak adlandırılmalıdır. Tarayıcılar ve sunucular, bir klasördeki ilk sayfayı ararken varsayılan olarak bu ismi kullanırlar.

2. İlk HTML Belgesi: İskelet Yapısı

Her HTML belgesinin takip etmesi gereken temel bir iskelet yapısı vardır.

2.1 İskeletin Bileşenleri

  • : Tarayıcıya belgenin HTML5 olduğunu bildirir.
  • : HTML belgesinin kök öğesidir.
  • : Sayfa hakkında meta verileri (kullanıcıya görünmeyen bilgiler) içerir.
  • : Sayfanın kullanıcının gördüğü asıl içeriğini barındırır.

2.2 Tam Bir HTML5 İskeleti (VS Code Kısayolu)

VS Code'da index.html dosyasını açıp ! yazıp Tab tuşuna basarak bu yapıyı anında oluşturabilirsiniz:


<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sayfa Başlığınız</title>
</head>
<body>
</body>
</html>

2.3 İçindeki Temel Etiketler (Meta Veri)

  • : Türkçe karakterler dahil tüm dilleri destekleyen evrensel standarttır.
  • : Mobil cihazlarda sayfanın doğru ölçeklenmesi için kritiktir.
  • Belge Başlığı: Tarayıcı sekmesinde görünen başlıktır.

2.4 Mini Proje: Merhaba Dünya Sayfası

Yukarıdaki iskeleti index.html dosyanıza kopyalayın. </code> etiketini "HTML Kursu | İlk Sayfam" olarak değiştirin ve <code><body></code> etiketi içine şunları ekleyin:</p> <pre style="background-color: #f4f4f4; padding: 15px; border-radius: 5px; overflow-x: auto;"><code> <body> <h1>Merhaba Dünya!</h1> <p>Bu, benim ilk web sayfamın içeriğidir.</p> </body> </code></pre> <p style="color:#333; margin-top: 1rem;">Dosyayı kaydedin ve Live Server ile çalıştırın. Tarayıcıda ilk sayfanızın çalıştığını göreceksiniz!</p> </div></section><section class="mt-16 bg-gray-100 p-8 rounded-lg shadow-inner"><h2 class="text-2xl font-semibold mb-6 text-black">Diğer Bloglar</h2><div class="grid grid-cols-1 sm:grid-cols-2 gap-6"><a class="block border border-gray-300 rounded-lg overflow-hidden hover:shadow-blue-500/40 transition duration-300 bg-white" href="/blog/yapay-zeka-nedir"><img alt="Yapay Zeka Nedir? Kullanım Alanları ve Geleceği" loading="lazy" width="600" height="300" decoding="async" data-nimg="1" class="object-cover w-full h-40" style="color:transparent" srcSet="/_next/image?url=%2FBlog-images%2F1.png&w=640&q=75 1x, /_next/image?url=%2FBlog-images%2F1.png&w=1200&q=75 2x" src="/_next/image?url=%2FBlog-images%2F1.png&w=1200&q=75"/><div class="p-4"><h3 class="text-lg font-bold text-black">Yapay Zeka Nedir? Kullanım Alanları ve Geleceği</h3><p class="text-sm text-gray-500 mt-2">5 Temmuz 2025</p></div></a><a class="block border border-gray-300 rounded-lg overflow-hidden hover:shadow-blue-500/40 transition duration-300 bg-white" href="/blog/generative-ai-ile-kod-yazma"><img alt="Generative AI ile Kod Yazmanın Geleceği: Yazılım Geliştirmede Yeni Dönem" loading="lazy" width="600" height="300" decoding="async" data-nimg="1" class="object-cover w-full h-40" style="color:transparent" srcSet="/_next/image?url=%2FBlog-images%2F2.png&w=640&q=75 1x, /_next/image?url=%2FBlog-images%2F2.png&w=1200&q=75 2x" src="/_next/image?url=%2FBlog-images%2F2.png&w=1200&q=75"/><div class="p-4"><h3 class="text-lg font-bold text-black">Generative AI ile Kod Yazmanın Geleceği: Yazılım Geliştirmed...</h3><p class="text-sm text-gray-500 mt-2">5 Temmuz 2025</p></div></a><a class="block border border-gray-300 rounded-lg overflow-hidden hover:shadow-blue-500/40 transition duration-300 bg-white" href="/blog/low-code-no-code-yukselisi"><img alt="Yazılımda Low-Code & No-Code Platformların Yükselişi" loading="lazy" width="600" height="300" decoding="async" data-nimg="1" class="object-cover w-full h-40" style="color:transparent" srcSet="/_next/image?url=%2FBlog-images%2F3.png&w=640&q=75 1x, /_next/image?url=%2FBlog-images%2F3.png&w=1200&q=75 2x" src="/_next/image?url=%2FBlog-images%2F3.png&w=1200&q=75"/><div class="p-4"><h3 class="text-lg font-bold text-black">Yazılımda Low-Code & No-Code Platformların Yükselişi</h3><p class="text-sm text-gray-500 mt-2">5 Temmuz 2025</p></div></a><a class="block border border-gray-300 rounded-lg overflow-hidden hover:shadow-blue-500/40 transition duration-300 bg-white" href="/blog/yazilim-gelistirme-ai-araclari-2025"><img alt="2025’te Yazılım Geliştiriciler için En İyi AI Araçları" loading="lazy" width="600" height="300" decoding="async" data-nimg="1" class="object-cover w-full h-40" style="color:transparent" srcSet="/_next/image?url=%2FBlog-images%2F4.png&w=640&q=75 1x, /_next/image?url=%2FBlog-images%2F4.png&w=1200&q=75 2x" src="/_next/image?url=%2FBlog-images%2F4.png&w=1200&q=75"/><div class="p-4"><h3 class="text-lg font-bold text-black">2025’te Yazılım Geliştiriciler için En İyi AI Araçları</h3><p class="text-sm text-gray-500 mt-2">5 Temmuz 2025</p></div></a></div></section></article><aside class="bg-white shadow-md sticky top-20 h-fit"><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1731461024871182" data-ad-slot="1228692235" data-ad-format="auto" data-full-width-responsive="true"></ins></aside></main><!--$?--><template id="B:1"></template><!--/$--></main><footer class="pt-12 pb-6 px-4 sm:px-10" style="background:linear-gradient(135deg, #1f1f1f 0%, #000000 100%);color:white"><div class="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-10"><div><h2 class="text-2xl font-bold text-white mb-4">Yusuf İzzet Genç</h2></div><div><h3 class="text-gray-300 font-semibold mb-4">Hızlı Erişim</h3><ul class="space-y-2 text-sm text-gray-400"><li><a class="hover:text-white transition-colors" href="/">Anasayfa</a></li><li><a class="hover:text-white transition-colors" href="/about">Hakkımızda</a></li><li><a class="hover:text-white transition-colors" href="/blog">Blog</a></li><li><a class="hover:text-white transition-colors" href="/youtube">YouTube</a></li></ul></div><div><h3 class="text-gray-300 font-semibold mb-4">Bizi Takip Et</h3><div class="flex gap-4"><a target="_blank" class="hover:text-white transition-colors" aria-label="Instagram" href="https://www.instagram.com/coderyusuff?igsh=cndtdWE4eHBvdzU%3D&utm_source=qr"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-instagram" aria-hidden="true"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line></svg></a><a class="hover:text-white transition-colors" aria-label="Email" href="mailto:coderyusuff@gmail.com"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail" aria-hidden="true"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg></a></div></div></div><div class="border-t border-gray-700 mt-10 pt-4 text-center text-xs text-gray-500">© <!-- -->2026<!-- --> Yusuf İzzet Genç. Tüm hakları saklıdır.</div></footer></div><section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false"></section><script src="/_next/static/chunks/webpack-ad967276a8926d54.js" async=""></script><div hidden id="S:1"></div><script>$RC=function(b,c,e){c=document.getElementById(c);c.parentNode.removeChild(c);var a=document.getElementById(b);if(a){b=a.previousSibling;if(e)b.data="$!",a.setAttribute("data-dgst",e);else{e=b.parentNode;a=b.nextSibling;var f=0;do{if(a&&8===a.nodeType){var d=a.data;if("/$"===d)if(0===f)break;else f--;else"$"!==d&&"$?"!==d&&"$!"!==d||f++}d=a.nextSibling;e.removeChild(a);a=d}while(a);for(;c.firstChild;)e.insertBefore(c.firstChild,a);b.data="$"}b._reactRetry&&b._reactRetry()}};$RC("B:1","S:1")</script><div hidden id="S:0"></div><script>$RC("B:0","S:0")</script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[8819,[\"844\",\"static/chunks/ee560e2c-d664d7bdf9e80f59.js\",\"874\",\"static/chunks/874-e909718850e7282e.js\",\"63\",\"static/chunks/63-ec5083ad3798b4a4.js\",\"330\",\"static/chunks/330-aee4e86161c4e807.js\",\"177\",\"static/chunks/app/layout-7f5ff42fa8023b4d.js\"],\"default\"]\n3:I[7555,[],\"\"]\n4:I[1901,[\"874\",\"static/chunks/874-e909718850e7282e.js\",\"39\",\"static/chunks/app/error-252a57383a9d2a97.js\"],\"default\"]\n5:I[1295,[],\"\"]\n6:I[9543,[\"874\",\"static/chunks/874-e909718850e7282e.js\",\"345\",\"static/chunks/app/not-found-f7256ea5415a36f4.js\"],\"default\"]\n7:I[6290,[\"844\",\"static/chunks/ee560e2c-d664d7bdf9e80f59.js\",\"874\",\"static/chunks/874-e909718850e7282e.js\",\"63\",\"static/chunks/63-ec5083ad3798b4a4.js\",\"330\",\"static/chunks/330-aee4e86161c4e807.js\",\"177\",\"static/chunks/app/layout-7f5ff42fa8023b4d.js\"],\"default\"]\n8:I[6671,[\"844\",\"static/chunks/ee560e2c-d664d7bdf9e80f59.js\",\"874\",\"static/chunks/874-e909718850e7282e.js\",\"63\",\"static/chunks/63-ec5083ad3798b4a4.js\",\"330\",\"static/chunks/330-aee4e86161c4e807.js\",\"177\",\"static/chunks/app/layout-7f5ff42fa8023b4d.js\"],\"Toaster\"]\na:I[9665,[],\"OutletBoundary\"]\nd:I[4911,[],\"AsyncMetadataOutlet\"]\nf:I[9665,[],\"ViewportBoundary\"]\n11:I[9665,[],\"MetadataBoundary\"]\n13:I[6614,[],\"\"]\n14:\"$Sreact.suspense\"\n15:I[4911,[],\"AsyncMetadata\"]\n17:I[9243,[\"874\",\"static/chunks/874-e909718850e7282e.js\",\"63\",\"static/chunks/63-ec5083ad3798b4a4.js\",\"953\",\"static/chunks/app/blog/%5Bslug%5D/page-357208199c988fd0.js\"],\"\"]\n18:I[6874,[\"874\",\"static/chunks/874-e909718850e7282e.js\",\"63\",\"static/chunks/63-ec5083ad3798b4a4.js\",\"953\",\"static/chunks/app/blog/%5Bslug%5D/page-357208199c988fd0.js\"],\"\"]\n19:I[3063,[\"874\",\"static/chunks/874-e909718850e7282e.js\",\"63\",\"static/chunks/63-ec5083ad3798b4a4.js\",\"953\",\"static/chunks/app/blog/%5Bslug%5D/page-357208199c988fd0.js\"],\"Image\"]\n:HL[\"/_next/static/media/4cf2300e9c8272f7-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/93f479601ee12b01-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/e17e14b09228e50a.css"])</script><script>self.__next_f.push([1,"\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"QYwzZo0wPA9YfwD5VG7W0\",\"p\":\"\",\"c\":[\"\",\"blog\",\"html-nedir-temel-yapi-ve-kurulum\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"blog\",{\"children\":[[\"slug\",\"html-nedir-temel-yapi-ve-kurulum\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/e17e14b09228e50a.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"tr\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"script\",null,{\"async\":true,\"src\":\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1731461024871182\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"link\",null,{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\"}]]}],[\"$\",\"body\",null,{\"className\":\"__variable_188709 __variable_9a8899 font-sans antialiased\",\"children\":[[\"$\",\"div\",null,{\"className\":\"min-h-screen flex flex-col justify-between text-white\",\"children\":[[\"$\",\"$L2\",null,{}],[\"$\",\"main\",null,{\"className\":\"flex-1 \",\"children\":[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$4\",\"errorStyles\":[],\"errorScripts\":[],\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"$L6\",null,{}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],[\"$\",\"$L7\",null,{}]]}],[\"$\",\"$L8\",null,{\"richColors\":true}]]}]]}]]}],{\"children\":[\"blog\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"slug\",\"html-nedir-temel-yapi-ve-kurulum\",\"d\"],[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[\"$L9\",null,[\"$\",\"$La\",null,{\"children\":[\"$Lb\",\"$Lc\",[\"$\",\"$Ld\",null,{\"promise\":\"$@e\"}]]}]]}],{},null,false]},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$1\",\"nrf4MNaq1gsVCQ0N1wOhTv\",{\"children\":[[\"$\",\"$Lf\",null,{\"children\":\"$L10\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],[\"$\",\"$L11\",null,{\"children\":\"$L12\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$13\",\"$undefined\"],\"s\":false,\"S\":false}\n"])</script><script>self.__next_f.push([1,"12:[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$14\",null,{\"fallback\":null,\"children\":[\"$\",\"$L15\",null,{\"promise\":\"$@16\"}]}]}]\n1a:T1ef4,"])</script><script>self.__next_f.push([1,"\n \u003ch2 style=\"color:#002133;\"\u003e1. HTML Nedir ve Neden Öğrenmeliyiz?\u003c/h2\u003e\n\n \u003ch3 style=\"color:#002133; margin-top: 1rem;\"\u003e1.1 Web'in 3 Temel Taşı\u003c/h3\u003e\n \u003cp style=\"color:#333;\"\u003eModern web siteleri, üç ana teknoloji üzerine kurulmuştur. Bunları bir bina veya insan vücudu analojisiyle açıklayabiliriz:\u003c/p\u003e\n \u003ctable style=\"width:100%; border-collapse: collapse; margin-top: 1rem;\"\u003e\n \u003cthead style=\"background-color:#002133; color:white;\"\u003e\n \u003ctr\u003e\n \u003cth style=\"padding:10px; border: 1px solid #ddd;\"\u003eTeknoloji\u003c/th\u003e\n \u003cth style=\"padding:10px; border: 1px solid #ddd;\"\u003eAçılımı\u003c/th\u003e\n \u003cth style=\"padding:10px; border: 1px solid #ddd;\"\u003eRolü (Analoji)\u003c/th\u003e\n \u003cth style=\"padding:10px; border: 1px solid #ddd;\"\u003eTanımı\u003c/th\u003e\n \u003c/tr\u003e\n \u003c/thead\u003e\n \u003ctbody style=\"color:#333;\"\u003e\n \u003ctr\u003e\n \u003ctd style=\"padding:10px; border: 1px solid #ddd;\"\u003e\u003cstrong\u003eHTML\u003c/strong\u003e\u003c/td\u003e\n \u003ctd style=\"padding:10px; border: 1px solid #ddd;\"\u003eHyperText Markup Language\u003c/td\u003e\n \u003ctd style=\"padding:10px; border: 1px solid #ddd;\"\u003eİskelet (Yapı)\u003c/td\u003e\n \u003ctd style=\"padding:10px; border: 1px solid #ddd;\"\u003eSayfanın içeriğini ve mantıksal yapısını belirler.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd style=\"padding:10px; border: 1px solid #ddd;\"\u003e\u003cstrong\u003eCSS\u003c/strong\u003e\u003c/td\u003e\n \u003ctd style=\"padding:10px; border: 1px solid #ddd;\"\u003eCascading Style Sheets\u003c/td\u003e\n \u003ctd style=\"padding:10px; border: 1px solid #ddd;\"\u003eDış Görünüş (Tasarım)\u003c/td\u003e\n \u003ctd style=\"padding:10px; border: 1px solid #ddd;\"\u003eHTML içeriğinin tarayıcıda nasıl görüneceğini belirler.\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd style=\"padding:10px; border: 1px solid #ddd;\"\u003e\u003cstrong\u003eJavaScript\u003c/strong\u003e\u003c/td\u003e\n \u003ctd style=\"padding:10px; border: 1px solid #ddd;\"\u003eJS\u003c/td\u003e\n \u003ctd style=\"padding:10px; border: 1px solid #ddd;\"\u003eBeyin/Hareket (Davranış)\u003c/td\u003e\n \u003ctd style=\"padding:10px; border: 1px solid #ddd;\"\u003eSayfayı interaktif hale getirir, dinamik özellikler ekler.\u003c/td\u003e\n \u003c/tr\u003e\n \u003c/tbody\u003e\n \u003c/table\u003e\n \u003cp style=\"color:#333; margin-top: 1rem;\"\u003e\u003cstrong\u003eÖnemli Not:\u003c/strong\u003e HTML bir Programlama Dili değil, bir \u003cstrong\u003eİşaretleme Dili'dir\u003c/strong\u003e (Markup Language). Görevi mantık yürütmek değil, içeriği etiketlemek ve yapılandırmaktır.\u003c/p\u003e\n\n \u003ch3 style=\"color:#002133; margin-top: 1rem;\"\u003e1.2 HTML'in Tarihçesi ve Rolü\u003c/h3\u003e\n \u003cp style=\"color:#333;\"\u003e\u003cstrong\u003eKöken:\u003c/strong\u003e 1990'ların başında Tim Berners-Lee tarafından bilimsel belgelerin kolay paylaşımı için icat edildi.\u003c/p\u003e\n \u003cp style=\"color:#333;\"\u003e\u003cstrong\u003eHTML5:\u003c/strong\u003e Günümüzde kullanılan en güncel standarttır. En büyük yeniliği, anlamsal (semantic) etiketler getirerek web içeriğini sadece yapılandırmakla kalmayıp, tarayıcılar ve arama motorları için de daha anlamlı hale getirmesidir.\u003c/p\u003e\n \u003cp style=\"color:#333;\"\u003e\u003cstrong\u003eNeden HTML Öğrenmeliyiz?\u003c/strong\u003e Web geliştirme kariyerinde atılacak ilk adımdır. CSS ve JavaScript'in bile çalışması için bir HTML yapısına ihtiyacı vardır. HTML, dijital dünyanın alfabesidir.\u003c/p\u003e\n\n \u003ch3 style=\"color:#002133; margin-top: 1rem;\"\u003e1.3 Web Geliştirme Ortamı Kurulumu\u003c/h3\u003e\n \u003cp style=\"color:#333;\"\u003eKod yazmaya başlamak için ihtiyacımız olan profesyonel araçlar:\u003c/p\u003e\n \u003col style=\"color:#333; list-style-type: decimal; margin-left: 20px;\"\u003e\n \u003cli\u003e\u003cstrong\u003eKod Editörü: Visual Studio Code (VS Code)\u003c/strong\u003e\u003cbr/\u003eTercih Sebebi: Ücretsiz, hafif, hızlı, güçlü ve sektörde en yaygın kullanılan editördür.\u003c/li\u003e\n \u003cli\u003e\u003cstrong\u003eOlmazsa Olmaz Eklentiler:\u003c/strong\u003e\n \u003cul style=\"list-style-type: disc; margin-left: 20px;\"\u003e\n \u003cli\u003e\u003cstrong\u003eLive Server:\u003c/strong\u003e Kodunuzu kaydettiğiniz anda web sayfanızı tarayıcıda otomatik olarak yeniler.\u003c/li\u003e\n \u003cli\u003e\u003cstrong\u003ePrettier - Code Formatter:\u003c/strong\u003e Kodunuzu otomatik olarak belirli kurallara göre hizalar ve biçimlendirir.\u003c/li\u003e\n \u003c/ul\u003e\n \u003c/li\u003e\n \u003c/ol\u003e\n\n \u003ch3 style=\"color:#002133; margin-top: 1rem;\"\u003e1.4 Hızlı Kurulum ve İlk Klasör Yapısı (Mini Proje)\u003c/h3\u003e\n \u003cp style=\"color:#333;\"\u003ePratik uygulamalarımızı saklamak için bir yapı oluşturma adımları:\u003c/p\u003e\n \u003cul style=\"color:#333; list-style-type: disc; margin-left: 20px;\"\u003e\n \u003cli\u003e\u003cstrong\u003eAna Klasör:\u003c/strong\u003e Bilgisayarınızda \u003ccode\u003ehtml_kursu\u003c/code\u003e adında yeni bir klasör oluşturun.\u003c/li\u003e\n \u003cli\u003e\u003cstrong\u003eVS Code'da Açma:\u003c/strong\u003e VS Code'u açın ve bu klasörü \"File \u003e Open Folder\" yoluyla açın.\u003c/li\u003e\n \u003cli\u003e\u003cstrong\u003eAna Dosya:\u003c/strong\u003e Klasörün içine yeni bir dosya oluşturun ve adını \u003ccode\u003eindex.html\u003c/code\u003e koyun.\u003c/li\u003e\n \u003c/ul\u003e\n \u003cp style=\"color:#333; margin-top: 1rem;\"\u003e\u003cstrong\u003eKural:\u003c/strong\u003e Bir web sitesinin ana sayfası her zaman \u003ccode\u003eindex.html\u003c/code\u003e olarak adlandırılmalıdır. Tarayıcılar ve sunucular, bir klasördeki ilk sayfayı ararken varsayılan olarak bu ismi kullanırlar.\u003c/p\u003e\n \n \u003ch2 style=\"color:#002133; margin-top: 2rem;\"\u003e2. İlk HTML Belgesi: İskelet Yapısı\u003c/h2\u003e\n \u003cp style=\"color:#333;\"\u003eHer HTML belgesinin takip etmesi gereken temel bir iskelet yapısı vardır.\u003c/p\u003e\n\n \u003ch3 style=\"color:#002133; margin-top: 1rem;\"\u003e2.1 İskeletin Bileşenleri\u003c/h3\u003e\n \u003cul style=\"color:#333; list-style-type: disc; margin-left: 20px;\"\u003e\n \u003cli\u003e\u003ccode\u003e\u003c!DOCTYPE html\u003e\u003c/code\u003e: Tarayıcıya belgenin HTML5 olduğunu bildirir.\u003c/li\u003e\n \u003cli\u003e\u003ccode\u003e\u003chtml\u003e\u003c/code\u003e: HTML belgesinin kök öğesidir.\u003c/li\u003e\n \u003cli\u003e\u003ccode\u003e\u003chead\u003e\u003c/code\u003e: Sayfa hakkında meta verileri (kullanıcıya görünmeyen bilgiler) içerir.\u003c/li\u003e\n \u003cli\u003e\u003ccode\u003e\u003cbody\u003e\u003c/code\u003e: Sayfanın kullanıcının gördüğü asıl içeriğini barındırır.\u003c/li\u003e\n \u003c/ul\u003e\n\n \u003ch3 style=\"color:#002133; margin-top: 1rem;\"\u003e2.2 Tam Bir HTML5 İskeleti (VS Code Kısayolu)\u003c/h3\u003e\n \u003cp style=\"color:#333;\"\u003eVS Code'da \u003ccode\u003eindex.html\u003c/code\u003e dosyasını açıp \u003ccode\u003e!\u003c/code\u003e yazıp Tab tuşuna basarak bu yapıyı anında oluşturabilirsiniz:\u003c/p\u003e\n \u003cpre style=\"background-color: #f4f4f4; padding: 15px; border-radius: 5px; overflow-x: auto;\"\u003e\u003ccode\u003e\n\u0026lt;!DOCTYPE html\u0026gt;\n\u0026lt;html lang=\"tr\"\u0026gt;\n\u0026lt;head\u0026gt;\n \u0026lt;meta charset=\"UTF-8\"\u0026gt;\n \u0026lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u0026gt;\n \u0026lt;title\u0026gt;Sayfa Başlığınız\u0026lt;/title\u0026gt;\n\u0026lt;/head\u0026gt;\n\u0026lt;body\u0026gt;\n\u0026lt;/body\u0026gt;\n\u0026lt;/html\u0026gt;\n \u003c/code\u003e\u003c/pre\u003e\n \n \u003ch3 style=\"color:#002133; margin-top: 1rem;\"\u003e2.3 \u003chead\u003e İçindeki Temel Etiketler (Meta Veri)\u003c/h3\u003e\n \u003cul style=\"color:#333; list-style-type: disc; margin-left: 20px;\"\u003e\n \u003cli\u003e\u003ccode\u003e\u003cmeta charset=\"UTF-8\"\u003e\u003c/code\u003e: Türkçe karakterler dahil tüm dilleri destekleyen evrensel standarttır.\u003c/li\u003e\n \u003cli\u003e\u003ccode\u003e\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\u003c/code\u003e: Mobil cihazlarda sayfanın doğru ölçeklenmesi için kritiktir.\u003c/li\u003e\n \u003cli\u003e\u003ccode\u003e\u003ctitle\u003eBelge Başlığı\u003c/title\u003e\u003c/code\u003e: Tarayıcı sekmesinde görünen başlıktır.\u003c/li\u003e\n \u003c/ul\u003e\n \n \u003ch3 style=\"color:#002133; margin-top: 1rem;\"\u003e2.4 Mini Proje: Merhaba Dünya Sayfası\u003c/h3\u003e\n \u003cp style=\"color:#333;\"\u003eYukarıdaki iskeleti \u003ccode\u003eindex.html\u003c/code\u003e dosyanıza kopyalayın. \u003ccode\u003e\u003ctitle\u003e\u003c/code\u003e etiketini \"HTML Kursu | İlk Sayfam\" olarak değiştirin ve \u003ccode\u003e\u003cbody\u003e\u003c/code\u003e etiketi içine şunları ekleyin:\u003c/p\u003e\n \u003cpre style=\"background-color: #f4f4f4; padding: 15px; border-radius: 5px; overflow-x: auto;\"\u003e\u003ccode\u003e\n\u0026lt;body\u0026gt;\n \u0026lt;h1\u0026gt;Merhaba Dünya!\u0026lt;/h1\u0026gt;\n \u0026lt;p\u0026gt;Bu, benim ilk web sayfamın içeriğidir.\u0026lt;/p\u0026gt;\n\u0026lt;/body\u0026gt;\n \u003c/code\u003e\u003c/pre\u003e\n \u003cp style=\"color:#333; margin-top: 1rem;\"\u003eDosyayı kaydedin ve Live Server ile çalıştırın. Tarayıcıda ilk sayfanızın çalıştığını göreceksiniz!\u003c/p\u003e\n "])</script><script>self.__next_f.push([1,"9:[[\"$\",\"$L17\",null,{\"id\":\"adsense-script\",\"strategy\":\"afterInteractive\",\"src\":\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"main\",null,{\"className\":\"mt-22 max-w-full mx-auto px-6 py-12 rounded-lg shadow-xl grid grid-cols-1 md:grid-cols-[0.75fr_3.5fr_0.75fr] gap-8\",\"style\":{\"background\":\"linear-gradient(135deg, #fff 0%, #efefef 100%)\",\"color\":\"#000000\",\"minHeight\":\"100vh\"},\"children\":[[\"$\",\"aside\",null,{\"className\":\"bg-white shadow-md sticky top-20 h-fit\",\"children\":[[\"$\",\"ins\",null,{\"className\":\"adsbygoogle\",\"style\":{\"display\":\"block\"},\"data-ad-client\":\"ca-pub-1731461024871182\",\"data-ad-slot\":\"2673851443\",\"data-ad-format\":\"auto\",\"data-full-width-responsive\":\"true\"}],[\"$\",\"$L17\",null,{\"id\":\"adsense-left-init\",\"strategy\":\"afterInteractive\",\"dangerouslySetInnerHTML\":{\"__html\":\"(adsbygoogle = window.adsbygoogle || []).push({});\"}}]]}],[\"$\",\"article\",null,{\"itemScope\":true,\"itemType\":\"https://schema.org/BlogPosting\",\"className\":\"bg-white rounded-lg p-6 shadow-md\",\"style\":{\"color\":\"#000\"},\"children\":[[\"$\",\"header\",null,{\"className\":\"mb-6\",\"children\":[\"$\",\"$L18\",null,{\"href\":\"/blog\",\"className\":\"inline-flex items-center text-sm text-black hover:text-gray-700 transition-colors\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"strokeWidth\":1.5,\"stroke\":\"currentColor\",\"className\":\"w-5 h-5 mr-2\",\"children\":[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"d\":\"M15.75 19.5L8.25 12l7.5-7.5\"}]}],\"Geri Dön\"]}]}],[\"$\",\"h1\",null,{\"className\":\"text-3xl font-extrabold mb-4\",\"children\":\"HTML Nedir? Yeni Başlayanlar İçin Temel Yapı ve Kurulum\"}],[\"$\",\"div\",null,{\"className\":\"mb-6 rounded-lg overflow-hidden shadow-lg\",\"children\":[\"$\",\"$L19\",null,{\"src\":\"/images/HtmlNedir.png\",\"alt\":\"HTML Nedir? Yeni Başlayanlar İçin Temel Yapı ve Kurulum\",\"width\":1200,\"height\":600,\"quality\":100,\"priority\":true,\"className\":\"w-full h-auto object-cover\"}]}],[\"$\",\"div\",null,{\"className\":\"flex items-center text-sm text-black font-medium gap-6 mb-6\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"strokeWidth\":1.5,\"stroke\":\"currentColor\",\"className\":\"w-4 h-4 text-black\",\"children\":[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"d\":\"M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.5 20.25a8.25 8.25 0 1115 0H4.5z\"}]}],[\"$\",\"span\",null,{\"itemProp\":\"author\",\"children\":\"Yazar: Yusuf İzzet Genç\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"strokeWidth\":1.5,\"stroke\":\"currentColor\",\"className\":\"w-4 h-4 text-black\",\"children\":[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"d\":\"M12 6v6l4 2\"}]}],[\"$\",\"span\",null,{\"children\":[\"$\",\"time\",null,{\"itemProp\":\"datePublished\",\"dateTime\":\"2025-07-06T10:00:00.000Z\",\"children\":\"6 Temmuz 2025\"}]}]]}]]}],[\"$\",\"section\",null,{\"children\":[[\"$\",\"div\",null,{\"itemProp\":\"articleBody\",\"className\":\"text-base leading-relaxed text-gray-700 [\u0026_h1]:text-3xl [\u0026_h2]:text-2xl [\u0026_h3]:text-xl [\u0026_ul]:list-disc [\u0026_li]:ml-5 [\u0026_strong]:font-semibold [\u0026_a]:text-blue-600 [\u0026_a:hover]:underline\",\"dangerouslySetInnerHTML\":{\"__html\":\"$1a\"}}],\"$undefined\"]}],[\"$\",\"section\",null,{\"className\":\"mt-16 bg-gray-100 p-8 rounded-lg shadow-inner\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"text-2xl font-semibold mb-6 text-black\",\"children\":\"Diğer Bloglar\"}],[\"$\",\"div\",null,{\"className\":\"grid grid-cols-1 sm:grid-cols-2 gap-6\",\"children\":[[\"$\",\"$L18\",\"yapay-zeka-nedir\",{\"href\":\"/blog/yapay-zeka-nedir\",\"className\":\"block border border-gray-300 rounded-lg overflow-hidden hover:shadow-blue-500/40 transition duration-300 bg-white\",\"children\":[[\"$\",\"$L19\",null,{\"src\":\"/Blog-images/1.png\",\"alt\":\"Yapay Zeka Nedir? Kullanım Alanları ve Geleceği\",\"width\":600,\"height\":300,\"className\":\"object-cover w-full h-40\"}],[\"$\",\"div\",null,{\"className\":\"p-4\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-lg font-bold text-black\",\"children\":\"Yapay Zeka Nedir? Kullanım Alanları ve Geleceği\"}],[\"$\",\"p\",null,{\"className\":\"text-sm text-gray-500 mt-2\",\"children\":\"5 Temmuz 2025\"}]]}]]}],[\"$\",\"$L18\",\"generative-ai-ile-kod-yazma\",{\"href\":\"/blog/generative-ai-ile-kod-yazma\",\"className\":\"block border border-gray-300 rounded-lg overflow-hidden hover:shadow-blue-500/40 transition duration-300 bg-white\",\"children\":[[\"$\",\"$L19\",null,{\"src\":\"/Blog-images/2.png\",\"alt\":\"Generative AI ile Kod Yazmanın Geleceği: Yazılım Geliştirmede Yeni Dönem\",\"width\":600,\"height\":300,\"className\":\"object-cover w-full h-40\"}],[\"$\",\"div\",null,{\"className\":\"p-4\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-lg font-bold text-black\",\"children\":\"Generative AI ile Kod Yazmanın Geleceği: Yazılım Geliştirmed...\"}],[\"$\",\"p\",null,{\"className\":\"text-sm text-gray-500 mt-2\",\"children\":\"5 Temmuz 2025\"}]]}]]}],[\"$\",\"$L18\",\"low-code-no-code-yukselisi\",{\"href\":\"/blog/low-code-no-code-yukselisi\",\"className\":\"block border border-gray-300 rounded-lg overflow-hidden hover:shadow-blue-500/40 transition duration-300 bg-white\",\"children\":[[\"$\",\"$L19\",null,{\"src\":\"/Blog-images/3.png\",\"alt\":\"Yazılımda Low-Code \u0026 No-Code Platformların Yükselişi\",\"width\":600,\"height\":300,\"className\":\"object-cover w-full h-40\"}],[\"$\",\"div\",null,{\"className\":\"p-4\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-lg font-bold text-black\",\"children\":\"Yazılımda Low-Code \u0026 No-Code Platformların Yükselişi\"}],[\"$\",\"p\",null,{\"className\":\"text-sm text-gray-500 mt-2\",\"children\":\"5 Temmuz 2025\"}]]}]]}],[\"$\",\"$L18\",\"yazilim-gelistirme-ai-araclari-2025\",{\"href\":\"/blog/yazilim-gelistirme-ai-araclari-2025\",\"className\":\"block border border-gray-300 rounded-lg overflow-hidden hover:shadow-blue-500/40 transition duration-300 bg-white\",\"children\":[[\"$\",\"$L19\",null,{\"src\":\"/Blog-images/4.png\",\"alt\":\"2025’te Yazılım Geliştiriciler için En İyi AI Araçları\",\"width\":600,\"height\":300,\"className\":\"object-cover w-full h-40\"}],[\"$\",\"div\",null,{\"className\":\"p-4\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-lg font-bold text-black\",\"children\":\"2025’te Yazılım Geliştiriciler için En İyi AI Araçları\"}],[\"$\",\"p\",null,{\"className\":\"text-sm text-gray-500 mt-2\",\"children\":\"5 Temmuz 2025\"}]]}]]}]]}]]}]]}],[\"$\",\"aside\",null,{\"className\":\"bg-white shadow-md sticky top-20 h-fit\",\"children\":[[\"$\",\"ins\",null,{\"className\":\"adsbygoogle\",\"style\":{\"display\":\"block\"},\"data-ad-client\":\"ca-pub-1731461024871182\",\"data-ad-slot\":\"1228692235\",\"data-ad-format\":\"auto\",\"data-full-width-responsive\":\"true\"}],[\"$\",\"$L17\",null,{\"id\":\"adsense-right-init\",\"strategy\":\"afterInteractive\",\"dangerouslySetInnerHTML\":{\"__html\":\"(adsbygoogle = window.adsbygoogle || []).push({});\"}}]]}]]}]]\n"])</script><script>self.__next_f.push([1,"c:null\n10:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\nb:null\ne:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"HTML Nedir? Yeni Başlayanlar İçin Temel Yapı ve Kurulum\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Web geliştirmenin temeli olan HTML'i öğrenin. Bu rehberde HTML nedir, tarihçesi, VS Code ile geliştirme ortamı kurulumu ve ilk HTML belgesinin yapısı anlatılıyor.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"keywords\",\"content\":\"html nedir,html öğrenme,web geliştirme başlangıç,vs code kurulumu,live server nedir,ilk html sayfası,html5 iskeleti,html dersleri\"}],[\"$\",\"meta\",\"3\",{\"property\":\"og:title\",\"content\":\"HTML Nedir? Yeni Başlayanlar İçin Temel Yapı ve Kurulum\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:description\",\"content\":\"Web geliştirmenin temeli olan HTML'i öğrenin. Bu rehberde HTML nedir, tarihçesi, VS Code ile geliştirme ortamı kurulumu ve ilk HTML belgesinin yapısı anlatılıyor.\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:url\",\"content\":\"https://yusufizzetgenc.com/blog/html-nedir-temel-yapi-ve-kurulum\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:image\",\"content\":\"https://www.yusufizzetgenc.com/images/HtmlNedir.png\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:image:alt\",\"content\":\"HTML Nedir? Yeni Başlayanlar İçin Temel Yapı ve Kurulum\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"9\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:title\",\"content\":\"HTML Nedir? Yeni Başlayanlar İçin Temel Yapı ve Kurulum\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:description\",\"content\":\"Web geliştirmenin temeli olan HTML'i öğrenin. Bu rehberde HTML nedir, tarihçesi, VS Code ile geliştirme ortamı kurulumu ve ilk HTML belgesinin yapısı anlatılıyor.\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:image\",\"content\":\"https://www.yusufizzetgenc.com/images/HtmlNedir.png\"}],[\"$\",\"link\",\"13\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"1024x1024\"}]],\"error\":null,\"dige"])</script><script>self.__next_f.push([1,"st\":\"$undefined\"}\n16:{\"metadata\":\"$e:metadata\",\"error\":null,\"digest\":\"$undefined\"}\n"])</script></body></html>