İçindekiler
HTML Nedir? Ne İşe Yarar? En Çok Kullanılan Kodlar
HTML Nedir? Ne İşe Yarar? HTML dosyası, HTML5, uzantılar, açma yöntemleri ve en çok kullanılan kodları sade örneklerle öğrenin.
Cenk ŞEKERCİ
Operasyon Yöneticisi
Bir web sayfasını açtığınızda gördüğünüz başlıklar, paragraflar, bağlantılar, görseller ve formlar rastgele oluşmaz. HTML Nedir? Ne İşe Yarar? sorusunun cevabı, internetin görünen yüzünün nasıl inşa edildiğini anlamak için ilk adımdır. Kod yazmaya yeni başlayan biri için HTML, en anlaşılır ve hızlı sonuç veren başlangıç noktalarından biridir.
İçindekiler
- Html Nedir Ne İşe Yarar
- Html Nedir Kısaca
- HTML Açılımı
- Html Nedir Nasıl Kullanılır
- HTML Dosyası Nedir
- HTML Dosya Uzantısı Nedir
- HTML Nasıl Açılır
- HTML Dosyası Virüs Mü
- HTML 5 Nedir
- Css Nedir
- Html Nedir Telefon
- Html Nedir Pdf
- Html Nedir Wikipedia
- En Çok Kullanılan HTML Kodları
- Sıkça Sorulan Sorular
- İlgili İçerikler
Html Nedir Ne İşe Yarar
HTML, web sayfalarının iskeletini oluşturan işaretleme dilidir. Metinlerin başlık mı, paragraf mı, bağlantı mı yoksa liste mi olduğunu tarayıcıya anlatır. Yani HTML, sayfanın ne içerdiğini ve bu içeriğin nasıl yapılandırıldığını belirler.
HTML bir programlama dili değildir; çünkü koşul çalıştırma, veri işleme veya hesaplama gibi görevleri tek başına yapmaz. Daha çok tarayıcıya “bu bir başlık”, “bu bir görsel”, “bu bir bağlantı” diyen yapısal bir dildir.
HTML şu işler için kullanılır:
- Web sayfası yapısı oluşturmak
- Başlık, paragraf ve liste eklemek
- Görsel, video ve bağlantı yerleştirmek
- Form alanları hazırlamak
- CSS ve JavaScript dosyalarını sayfaya bağlamak
- SEO için anlamlı sayfa hiyerarşisi kurmak
| Kullanım Alanı | HTML’nin Rolü | Örnek Etiket |
|---|---|---|
| Başlık oluşturma | İçerik hiyerarşisini belirler | `<h1>`, `<h2>` |
| Metin yazma | Paragraf ve açıklama ekler | `<p>` |
| Bağlantı verme | Sayfalar arası geçiş sağlar | `<a>` |
| Görsel ekleme | Resim dosyasını gösterir | `<img>` |
| Form hazırlama | Kullanıcıdan bilgi alır | `<form>`, `<input>` |
İpucu: HTML öğrenirken etiket ezberlemek yerine sayfa mantığını anlamak daha kalıcıdır. “Bu içerik neyi temsil ediyor?” sorusu doğru etiketi seçmenizi kolaylaştırır.
Html Nedir Kısaca
HTML kısaca, web sayfalarının temel yapı dilidir. Tarayıcılar HTML kodlarını okuyarak kullanıcıya düzenli bir sayfa gösterir. Bir binanın betonarme iskeleti neyse, web sayfası için HTML de benzer bir görev üstlenir.
Basit bir HTML örneği şöyledir:
<!DOCTYPE html>
<html>
<head>
<title>İlk Sayfam</title>
</head>
<body>
<h1>Merhaba Dünya</h1>
<p>Bu benim ilk HTML sayfam.</p>
</body>
</html>Bu kodda:
<html>sayfanın HTML belgesi olduğunu belirtir.<head>sayfa hakkında teknik bilgileri içerir.<title>tarayıcı sekmesinde görünen başlığı belirler.<body>kullanıcıya görünen içeriği barındırır.
HTML Açılımı
HTML açılımı HyperText Markup Language şeklindedir. Türkçeye “Hiper Metin İşaretleme Dili” olarak çevrilebilir. Buradaki “hypertext”, bağlantılarla birbirine bağlanan metinleri; “markup language” ise içeriği etiketlerle anlamlandıran dili ifade eder.
HTML’nin açılımındaki kavramlar pratikte şunu anlatır:
| Kavram | Anlamı | Web Sayfasındaki Karşılığı |
|---|---|---|
| HyperText | Bağlantılı metin | Linkler ve sayfa geçişleri |
| Markup | İşaretleme | Etiketlerle yapı kurma |
| Language | Dil | Tarayıcının yorumladığı kurallar |
HTML, internetin birbirine bağlı yapısında merkezi rol oynar. Bir sayfadan başka bir sayfaya tıkladığınızda genellikle bir <a> etiketi üzerinden yönlendirilirsiniz.
Html Nedir Nasıl Kullanılır
HTML, düz metin editörüyle yazılıp .html uzantısıyla kaydedilerek kullanılır. Dosya bir tarayıcıda açıldığında kodlar yorumlanır ve sayfa görüntülenir. Başlangıç için özel bir sunucuya gerek yoktur; bilgisayarda basit bir HTML dosyası oluşturmak yeterlidir.
HTML kullanmak için temel adımlar:
- Bir metin editörü açın.
- HTML kodlarını yazın.
- Dosyayı
index.htmladıyla kaydedin. - Dosyaya çift tıklayıp tarayıcıda açın.
- Kodda değişiklik yaptıkça sayfayı yenileyin.
Başlangıç için Visual Studio Code gibi bir editör kullanmak işinizi kolaylaştırır. Kod renklendirme, otomatik tamamlama ve hata fark etme özellikleri öğrenme sürecini hızlandırır.
| Araç | Ne İşe Yarar? | Yeni Başlayan İçin Uygun Mu? |
|---|---|---|
| Not Defteri | Basit kod yazma | Evet, ama sınırlı |
| Visual Studio Code | Gelişmiş kod editörü | Evet |
| Tarayıcı | HTML dosyasını görüntüleme | Evet |
| Canlı Önizleme Eklentileri | Değişiklikleri anında gösterme | Evet |
HTML Dosyası Nedir
HTML dosyası, içinde HTML etiketleri bulunan ve tarayıcı tarafından web sayfası olarak görüntülenen dosyadır. Genellikle .html veya daha eski kullanımlarda .htm uzantısıyla kaydedilir. Bir web sitesindeki ana sayfa çoğunlukla index.html adıyla başlar.
HTML dosyası yalnızca metin tabanlıdır. Bu nedenle bir kod editörüyle açılıp düzenlenebilir. İçinde CSS, JavaScript bağlantıları, görsel yolları, meta etiketleri ve sayfa içeriği yer alabilir.
Basit bir HTML dosyası şu bölümlerden oluşur:
- Belge tipi bildirimi
- HTML kök etiketi
- Head alanı
- Body alanı
- İçerik etiketleri
- Harici dosya bağlantıları
HTML Dosya Uzantısı Nedir
HTML dosya uzantısı genellikle .html şeklindedir. Bazı eski sistemlerde .htm uzantısı da görülebilir. İki uzantı da HTML belgesi anlamına gelir; modern kullanımda .html daha yaygındır.
| Uzantı | Anlamı | Kullanım Durumu |
|---|---|---|
| `.html` | HTML web sayfası dosyası | Güncel ve yaygın |
| `.htm` | HTML dosyası | Eski sistemlerde görülebilir |
| `.xhtml` | Daha katı kurallı HTML türü | Daha özel kullanımlar |
Bir dosyanın uzantısının HTML olması, onun her zaman güvenli olduğu anlamına gelmez. Dosyanın nereden geldiği, içinde hangi bağlantıların bulunduğu ve tarayıcıda ne çalıştırdığı önemlidir.
HTML Nasıl Açılır
HTML dosyası, bilgisayarda yüklü herhangi bir modern tarayıcıyla açılabilir. Dosyaya çift tıklamak çoğu zaman yeterlidir. Düzenlemek için ise tarayıcı değil, kod editörü kullanmak gerekir.
HTML dosyası açma yöntemleri:
- Dosyaya çift tıklayıp tarayıcıda görüntüleme
- Sağ tık yapıp “Birlikte Aç” menüsünden tarayıcı seçme
- Kod editöründe açıp düzenleme
- Tarayıcıya sürükleyip bırakma
- Yerel sunucu üzerinden çalıştırma
Uyarı: Bilinmeyen bir e-postadan gelen HTML dosyasını doğrudan açmayın. HTML dosyaları tek başına basit görünse de zararlı bağlantılar veya yönlendirmeler içerebilir.
HTML Dosyası Virüs Mü
HTML dosyası tek başına virüs değildir; ancak kötü amaçlı bağlantılar, sahte giriş ekranları veya zararlı JavaScript kodları içerebilir. Bu nedenle özellikle e-posta ekinden gelen HTML dosyalarına dikkat edilmelidir.
Risk genellikle dosyanın uzantısından değil, içeriğinden kaynaklanır. Örneğin bir HTML dosyası sizi sahte bir banka giriş sayfasına yönlendirebilir veya tarayıcıda şüpheli komut dosyaları çalıştırmaya çalışabilir.
| Durum | Risk Seviyesi | Ne Yapılmalı? |
|---|---|---|
| Kendi yazdığınız HTML dosyası | Düşük | Güvenle açılabilir |
| Güvenilir eğitim kaynağından indirilen dosya | Düşük-Orta | İçeriği kontrol edilebilir |
| E-posta ekinden gelen HTML | Yüksek | Açmadan önce doğrulanmalı |
| Şüpheli link içeren HTML | Yüksek | Açılmamalı |
Güvenlik için dosyayı önce kod editöründe açıp bağlantılara bakmak daha doğrudur. Kaynağını bilmediğiniz dosyalarda tarayıcıda çalıştırmak yerine silmek daha güvenli olabilir.
HTML 5 Nedir
HTML5, HTML’nin modern web standartlarına uygun geliştirilmiş sürümüdür. Video, ses, semantik etiketler, form özellikleri ve mobil uyumluluk gibi birçok konuda önceki sürümlere göre daha güçlü yapı sunar.
HTML5 ile gelen önemli etiketlerden bazıları şunlardır:
<header>: Sayfa veya bölüm üst alanı<nav>: Menü ve navigasyon alanı<main>: Ana içerik alanı<article>: Bağımsız içerik bloğu<section>: İçerik bölümü<footer>: Alt bilgi alanı<video>: Video ekleme<audio>: Ses dosyası ekleme
| Özellik | Eski HTML Yaklaşımı | HTML5 Yaklaşımı |
|---|---|---|
| Sayfa bölümleri | Genellikle `<div>` | `<header>`, `<main>`, `<footer>` |
| Video ekleme | Harici eklentiler | `<video>` etiketi |
| Form alanları | Sınırlı input tipleri | Email, date, number vb. |
| SEO anlamı | Daha zayıf yapı | Semantik etiketlerle daha net |
HTML5, özellikle SEO ve erişilebilirlik açısından önemlidir. Arama motorları ve ekran okuyucular, semantik etiketler sayesinde sayfanın yapısını daha iyi anlayabilir.
Css Nedir
CSS, HTML ile oluşturulan yapının görsel tasarımını belirleyen stil dilidir. HTML sayfaya iskelet verirken CSS renk, yazı tipi, boşluk, hizalama ve responsive tasarım gibi görünüm detaylarını yönetir.
HTML ve CSS arasındaki farkı şöyle düşünebilirsiniz:
| Teknoloji | Görevi | Örnek |
|---|---|---|
| HTML | İçeriğin yapısını kurar | Başlık, paragraf, görsel |
| CSS | Görünümü düzenler | Renk, boyut, hizalama |
| JavaScript | Etkileşim ekler | Menü açma, form kontrolü |
Basit CSS kullanımı:
<p style="color: blue;">Bu yazı mavi görünür.</p>Daha düzenli projelerde CSS ayrı bir dosyada tutulur:
<link rel="stylesheet" href="style.css">Bu yöntem, sayfa yapısı ile tasarımı birbirinden ayırdığı için daha temiz ve sürdürülebilir bir çalışma sağlar.
Html Nedir Telefon
Telefonda HTML, mobil tarayıcıların web sayfalarını görüntülemek için okuduğu temel yapıdır. Akıllı telefonlarda açtığınız haber siteleri, bloglar, e-ticaret sayfaları ve formlar HTML temeli üzerinde çalışır.
Telefon üzerinden HTML yazmak da mümkündür. Mobil kod editörü uygulamalarıyla basit HTML dosyaları oluşturulabilir. Fakat uzun süreli geliştirme için bilgisayar kullanmak daha verimlidir.
Mobil uyumluluk için HTML tarafında dikkat edilmesi gereken temel meta etiketi şudur:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Bu etiket, sayfanın mobil ekran genişliğine uygun davranmasını sağlar. CSS ile birlikte kullanıldığında responsive tasarımın temelini oluşturur.
Html Nedir Pdf
“HTML nedir PDF” araması genellikle HTML konusunu indirilebilir ders notu olarak öğrenmek isteyen kullanıcılar tarafından yapılır. PDF kaynaklar başlangıç için faydalı olabilir; ancak HTML uygulamalı öğrenildiğinde çok daha hızlı kavranır.
PDF kaynak kullanırken şunlara dikkat edin:
- Güncel HTML5 etiketlerini içermeli
- Örnek kodlar çalıştırılabilir olmalı
- Eski ve kullanımdan kalkmış etiketlere ağırlık vermemeli
- CSS ve temel web mantığıyla ilişkilendirmeli
- Sadece tanım değil, uygulama örnekleri sunmalı
İpucu: PDF okuyarak öğrendiğiniz her etiketi küçük bir
.htmldosyasında deneyin. HTML, bakarak değil yazarak öğrenildiğinde kalıcı hale gelir.
Html Nedir Wikipedia
Wikipedia tarzı kaynaklarda HTML’nin tarihçesi, standartları ve teknik tanımı hakkında genel bilgiler bulunur. Bu kaynaklar kavramı anlamak için yararlıdır; fakat uygulama öğrenmek için tek başına yeterli değildir.
HTML öğrenirken teknik tanımın yanında şu pratik sorulara da cevap aramak gerekir:
- Bu etiket ne zaman kullanılır?
- SEO açısından doğru etiket hangisidir?
- Erişilebilirlik için hangi yapı tercih edilir?
- Mobil ekranda nasıl görünür?
- CSS ile nasıl biçimlendirilir?
Ansiklopedik bilgi, temel çerçeveyi verir. Gerçek öğrenme ise kodu yazıp tarayıcıda sonucu görmeyle başlar.
En Çok Kullanılan HTML Kodları
En çok kullanılan HTML kodları, sayfanın temel yapısını kuran etiketlerden oluşur. Başlık, paragraf, bağlantı, görsel, liste, tablo ve form etiketleri neredeyse her web projesinde karşınıza çıkar.
| Etiket | Görevi | Örnek Kullanım |
|---|---|---|
| `<h1>` - `<h6>` | Başlık oluşturur | `<h2>Alt Başlık</h2>` |
| `<p>` | Paragraf ekler | `<p>Metin</p>` |
| `<a>` | Link verir | `<a href="sayfa.html">Git</a>` |
| `<img>` | Görsel ekler | `<img src="resim.jpg" alt="Açıklama">` |
| `<ul>` / `<ol>` | Liste oluşturur | `<ul><li>Madde</li></ul>` |
| `<table>` | Tablo oluşturur | `<table>...</table>` |
| `<form>` | Form alanı oluşturur | `<form>...</form>` |
| `<input>` | Veri girişi alır | `<input type="text">` |
Temel bir bağlantı örneği:
<a href="https://example.com">Siteye Git</a>Görsel eklerken alt açıklamasını boş bırakmamak önemlidir:
<img src="logo.png" alt="Site logosu">alt metni hem erişilebilirlik hem de görsel SEO açısından değerlidir. Görsel yüklenmediğinde kullanıcıya açıklama gösterir, ekran okuyuculara da anlam sağlar.
Sıkça Sorulan Sorular
HTML Nedir Ne İşe Yarar?
HTML, web sayfalarının yapısını oluşturan işaretleme dilidir. Başlıkları, paragrafları, görselleri, bağlantıları, listeleri ve formları tarayıcıya tanıtır. HTML olmadan bir web sayfasının temel içerik düzenini kurmak mümkün değildir. Tasarım için CSS, etkileşim için JavaScript kullanılır; ancak bu teknolojiler çoğu zaman HTML yapısının üzerine eklenir.
HTML Nasıl Açılır?
HTML dosyası bir tarayıcıyla açılır. Dosyaya çift tıklayabilir, tarayıcı penceresine sürükleyebilir veya sağ tık menüsünden “Birlikte Aç” seçeneğiyle Chrome, Edge, Firefox ya da Safari gibi bir tarayıcı seçebilirsiniz. Dosyayı düzenlemek istiyorsanız tarayıcı yerine Visual Studio Code, Sublime Text veya Notepad++ gibi bir kod editörü kullanmanız gerekir.
HTML Dosyası Virüs Mü?
HTML dosyası doğrudan virüs değildir; ancak zararlı bağlantılar, sahte giriş sayfaları veya kötü amaçlı JavaScript kodları içerebilir. Özellikle e-posta eki olarak gelen HTML dosyalarına dikkat edilmelidir. Kaynağını bilmediğiniz dosyaları tarayıcıda açmadan önce kod editöründe incelemek daha güvenlidir. Şüpheli yönlendirme veya bilinmeyen script varsa dosya çalıştırılmamalıdır.
HTML Dosya Uzantısı Nedir?
HTML dosya uzantısı genellikle .html şeklindedir. Daha eski sistemlerde .htm uzantısı da kullanılabilir. İki uzantı da tarayıcı tarafından web sayfası olarak yorumlanabilir. Güncel projelerde .html kullanımı daha yaygındır. Örneğin index.html, çoğu web sitesinin ana sayfası için kullanılan standart dosya adıdır.
HTML Dosyası Açma İçin Program Gerekir Mi?
HTML dosyasını görüntülemek için özel bir programa gerek yoktur; modern bir web tarayıcısı yeterlidir. Ancak dosyayı düzenlemek istiyorsanız kod editörü kullanmanız önerilir. Basit değişiklikler Not Defteri ile yapılabilir, fakat kod renklendirme ve otomatik tamamlama için Visual Studio Code gibi editörler çok daha kullanışlıdır.
HTML Programlama Dili Mi?
HTML programlama dili değildir; işaretleme dilidir. Programlama dilleri genellikle değişkenler, koşullar, döngüler ve veri işleme gibi yeteneklere sahiptir. HTML ise içeriğin yapısını tanımlar. Bir web sayfasında dinamik işlemler yapmak için JavaScript, veri yönetimi içinse sunucu tarafı diller veya veritabanları kullanılır.
HTML5 Nedir?
HTML5, HTML’nin modern web ihtiyaçlarına uygun geliştirilmiş sürümüdür. Semantik etiketler, video ve ses desteği, gelişmiş form alanları ve mobil uyumluluk açısından önemli yenilikler getirmiştir. <header>, <nav>, <main>, <article> ve <footer> gibi etiketler sayfa yapısını daha anlaşılır hale getirir. Bu da SEO ve erişilebilirlik açısından avantaj sağlar.
HTML Öğrenmek Zor Mu?
HTML öğrenmesi en kolay web teknolojilerinden biridir. Temel etiketler kısa sürede kavranabilir ve yazılan kodun sonucu tarayıcıda hemen görülebilir. Zorluk, etiketleri ezberlemekten çok doğru sayfa yapısını kurmayı öğrenirken ortaya çıkar. Düzenli pratik, küçük sayfalar oluşturmak ve CSS ile birlikte çalışmak öğrenme sürecini hızlandırır.
HTML Telefonda Kullanılır Mı?
HTML telefonda doğrudan kullanıcı tarafından görülmez; mobil tarayıcı HTML kodlarını okuyarak sayfayı ekranda gösterir. Ayrıca telefonda kod editörü uygulamalarıyla HTML dosyası yazmak da mümkündür. Yine de ciddi geliştirme çalışmaları için bilgisayar daha rahattır. Mobil uyumlu sayfalar için viewport etiketi ve responsive CSS kullanımı önemlidir.
CSS Nedir ve HTML’den Farkı Nedir?
CSS, HTML ile oluşturulan sayfanın görsel tasarımını düzenleyen stil dilidir. HTML içeriğin yapısını belirlerken CSS renk, yazı tipi, boşluk, hizalama ve ekran uyumluluğunu yönetir. Örneğin HTML ile bir başlık oluşturursunuz, CSS ile bu başlığın rengini ve boyutunu belirlersiniz. Profesyonel web sayfalarında HTML ve CSS birlikte kullanılır.
İlgili İçerikler
- HTML Etiketleri ve Kullanım Örnekleri
- CSS Nedir? Temel CSS Kullanımı
- JavaScript Nedir? HTML ile Nasıl Çalışır?
- Web Tasarıma Nereden Başlanır?
- SEO Uyumlu HTML Yapısı Nasıl Kurulur?
HTML öğrenmek, web geliştirme tarafında sağlam bir başlangıç yapmak isteyenler için pratik ve hızlı sonuç veren bir adımdır. Kendi sayfanızı oluşturarak etiketleri deneyebilir, ardından CSS ve JavaScript ile bu yapıyı daha işlevsel hale getirebilirsiniz. Daha teknik web projeleri, site yapısı ve dijital görünürlük konularında destek almak isterseniz Netlen’in web ve dijital çözümlerini inceleyebilirsiniz.
Netlen'i Google'da Takip Edin
En güncel rehberlerimize, duyurularımıza ve teknik içeriklerimize Google üzerinden öncelikli ulaşmak için Netlen'i tercih ettiğiniz kaynaklar arasına ekleyin.
Google'da Tercih edilenkaynak olarak ekleyinBu yazıyı paylaşın
Yorumlar
Bu yazı hakkında okuyucu yorumları
