Yakuza

Yakuza

WFN Üye
Konular
540
Mesajlar
540
Çözüm
0
Ticaret Puanı
0
Üyelik
24 Gün
Konum
Artvin
Web Sitesi
Var
Alanı
SEO Danışmanı
1/1
Konu sahibi
HTML öğrenmeye başlamak için bir metin düzenleyici ve web tarayıcısı yeterlidir. Önce temel HTML belgesini oluşturup tarayıcıda açın; ardından başlık, paragraf, bağlantı ve görsel gibi etiketleri ekleyerek sayfanın iskeletini kurun. İlk hedefiniz, yazdığınız HTML dosyasını kaydedip tarayıcıda doğru sonuçla görüntülemek olmalıdır. Bu temel döngüyü kavradıktan sonra CSS ile görünümü, JavaScript ile etkileşimi geliştirebilirsiniz.

İlk HTML dosyanızı oluşturun​


HTML, web sayfasının yapısını tanımlayan işaretleme dilidir. Bir HTML dosyasındaki etiketler; başlık, metin, bağlantı, liste veya görsel gibi içeriklerin sayfada ne anlama geldiğini belirtir. HTML tek başına gelişmiş renk, düzen veya hareket efektleri sağlamaz; bu görevler çoğunlukla CSS ve JavaScript ile tamamlanır.

Başlamak için bilgisayarınızda düz metin kaydedebilen bir düzenleyici açın. Özel bir geliştirme ortamı zorunlu değildir; ancak kod renklendirme ve otomatik tamamlama sunan bir düzenleyici yazım hatalarını fark etmenizi kolaylaştırır. Dosyayı index.html adıyla ve .html uzantısıyla kaydedin. Dosyanın .txt olarak kaydedilmediğinden emin olun.

İlk dosyanıza aşağıdaki en küçük çalışır HTML belgesini yazın:

HTML: 
<!doctype html>
<html lang="tr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>İlk HTML Sayfam</title>
</head>
<body>
    <h1>Merhaba, HTML!</h1>
    <p>Bu benim ilk web sayfam.</p>
</body>
</html>

Bu dosyayı kaydettikten sonra dosyaya çift tıklayarak veya tarayıcınızın adres çubuğuna dosyanın konumunu vererek açabilirsiniz. Tarayıcıda büyük bir başlık ve altında bir paragraf görüyorsanız temel işlem doğru tamamlanmıştır. Tarayıcı dosyayı açmıyor ya da kodu sayfa yerine düz metin olarak gösteriyorsa dosya uzantısını ve kaydetme biçimini kontrol edin.

Belgenin temel bölümlerini anlayın​


Belgenin en üstündeki <!doctype html> satırı, dosyanın güncel HTML belge yapısıyla yorumlanmasını ister. Bu satır bir içerik üretmez; tarayıcının belgeyi hangi kurallarla değerlendireceğini belirtir.

<html> ve </html> etiketleri belgenin tamamını kapsar. lang="tr" ifadesi sayfanın ana dilinin Türkçe olduğunu belirtir. Bu bilgi, tarayıcıların ve yardımcı teknolojilerin metni daha doğru yorumlamasına yardımcı olabilir.

<head> bölümü ziyaretçiye doğrudan görünen ana içerik değildir. Belgenin karakter kodlaması, tarayıcı görünüm ayarı ve sekmede gösterilecek başlık gibi bilgileri burada bulunur. <title> içindeki metin sayfanın gövdesinde görünmez; tarayıcı sekmesinde veya yer imlerinde kullanılır.

<body> bölümü ise ziyaretçinin sayfada gördüğü içeriği taşır. <h1> ana başlığı, <p> paragrafı ifade eder. Çoğu HTML etiketi bir açılış ve kapanış etiketiyle kullanılır. Örneğin <p>Metin</p> ifadesinde ilk etiket içeriğin başladığını, </p> ise bittiğini gösterir.

Etiketleri doğru sırada kapatın. İç içe kullanılan etiketlerde son açılan etiket önce kapatılmalıdır. Örneğin <p><strong>Önemli</strong> bilgi.</p> doğru bir yapıdır; <p><strong>Önemli</p></strong> ise etiketlerin kapanış sırasını bozar.

Metin, bağlantı ve görsel ekleyin​


Temel belgeyi oluşturduktan sonra <body> bölümünü aşağıdaki gibi genişletebilirsiniz:

HTML: 
<body>
    <h1>HTML Öğreniyorum</h1>

    <h2>İlk adımlar</h2>
    <p>HTML, web sayfasının yapısını oluşturur.</p>

    <p>
        Daha fazla bilgi için
        <a href="https://developer.mozilla.org/">HTML belgelerine göz atın</a>.
    </p>

    <img src="manzara.jpg" alt="Gün batımında bir manzara">

    <ul>
        <li>Başlıklar</li>
        <li>Paragraflar</li>
        <li>Bağlantılar</li>
    </ul>
</body>

Burada <h2> alt başlık, <a> bağlantı, <img> görsel, <ul> sırasız liste ve <li> liste maddesidir. Bağlantının gideceği adres href özniteliğinde belirtilir. Görselin dosya konumu src özniteliğinde yer alır.

Görselin yanındaki alt metni görsel yüklenmediğinde alternatif açıklama sağlar ve ekran okuyucu kullanan kişilere görselin içeriğini aktarır. Bu nedenle yalnızca “görsel” yazmak yerine görselin anlamını açıklayan kısa bir metin kullanın. Görsel dekoratifse alt="" kullanılabilir; böylece yardımcı teknoloji gereksiz bir açıklama okumaz.

Bu örnekte manzara.jpg dosyasının, index.html ile aynı klasörde bulunduğu varsayılmıştır. Görsel başka bir klasördeyse kaynak yolunu buna göre yazmanız gerekir. Örneğin dosya images klasöründeyse src="images/manzara.jpg" kullanılır. Tarayıcıda görsel yerine boş alan veya kırık görsel simgesi görüyorsanız önce dosya adının, uzantısının ve klasör yolunun birebir aynı olup olmadığını kontrol edin.

Değişiklikleri kaydedip sonucu kontrol edin​


HTML ile çalışırken sürekli aynı döngüyü uygulayın: kodu değiştirin, dosyayı kaydedin, tarayıcıda sonucu yenileyin ve beklediğiniz görünümle karşılaştırın. Bu yöntem, hatanın hangi değişiklikten sonra ortaya çıktığını anlamanızı kolaylaştırır.
  1. Dosyayı kaydedin. Tarayıcıda açık olan belge, son kaydedilen içeriği gösterir; yalnızca düzenleyicide değişiklik yapmak yeterli değildir.
  2. Tarayıcıyı yenileyin. Yeni başlık, metin veya bağlantı görünmüyorsa dosyanın gerçekten kaydedilip kaydedilmediğini kontrol edin.
  3. Görünen sonucu yorumlayın. Başlık ve paragraf doğru görünüyorsa ilgili etiketler çalışıyor demektir. Bu durum sayfanın erişilebilirlik, güvenlik veya tasarım açısından tamamen doğru olduğunu kanıtlamaz; yalnızca temel HTML yapısının tarayıcı tarafından işlendiğini gösterir.
  4. Sorun varsa kodu daraltın. Son eklediğiniz etiketi geçici olarak kaldırıp sayfayı yeniden yükleyin. Sorun ortadan kalkarsa hatayı son eklenen bölümde arayın.
Bağlantıya tıkladığınızda beklenen sayfa açılıyorsa href değeri çalışıyordur. Yanlış sayfa açılıyor veya hiçbir işlem olmuyorsa adresin başında https:// bulunup bulunmadığını ve tırnak işaretlerinin doğru kullanıldığını kontrol edin. Görsel görünmüyorsa bağlantı adresi değil, src dosya yolu kontrol edilmelidir.

HTML öğrenirken izlenecek sıra​


İlk dosyanız çalıştıktan sonra bütün etiketleri aynı anda öğrenmeye çalışmak yerine sayfanın temel parçalarını sırayla kullanın. Her yeni etiketi küçük bir örnekte deneyin ve tarayıcıdaki etkisini gözlemleyin.
  • Başlıklar için <h1> ile <h6> arasındaki hiyerarşiyi öğrenin. Başlık düzeyini yazı boyutunu değiştirmek için değil, içeriğin yapısını belirtmek için kullanın.
  • Paragraflar, vurgular ve alıntılarla metin yapısını kurun.
  • Bağlantılarda href özniteliğini, görsellerde src ve alt özniteliklerini kullanın.
  • Sırasız ve sıralı listelerle birden fazla öğeyi düzenleyin.
  • Formlar, tablolar ve anlamsal bölüm etiketlerini ayrı küçük örneklerle öğrenin.
  • HTML yapısı oturduktan sonra görünümü düzenlemek için CSS, kullanıcı etkileşimi eklemek için JavaScript çalışın.
HTML’de <header>, <nav>, <main>, <section>, <article> ve <footer> gibi anlamsal etiketler de kullanılır. Bu etiketler çoğu durumda kendiliğinden özel bir tasarım oluşturmaz; içeriğin hangi role sahip olduğunu daha açık ifade eder. Örneğin ana içerik <main> içinde, site gezinme bağlantıları <nav> içinde tutulabilir.

HTML’nin neyi sağladığını ve neyi sağlamadığını ayırın​


HTML, sayfada hangi içeriğin bulunduğunu ve bu içeriğin yapısal anlamını belirtir. Ancak yalnızca HTML kullanarak profesyonel bir görsel tasarım, kullanıcı hesabı sistemi, veritabanı işlemi veya dinamik veri akışı oluşturamazsınız.

Sayfanın yazı tipi, rengi, boşlukları ve kolon düzeni için CSS gerekir. Bir düğmeye tıklandığında içerik değiştirmek, form verisini tarayıcıda işlemek veya sayfaya etkileşim eklemek için JavaScript gerekebilir. Sunucuda veri kaydetme, kullanıcı doğrulama veya veritabanına erişme gibi işlemler ise ayrıca sunucu tarafı bir teknoloji ve güvenli bir çalışma düzeni ister.

Bu ayrım, başlangıçta karşılaşılan sorunları doğru yorumlamanızı sağlar. Bir başlığın görünmesi HTML yapısının çalıştığını gösterir; başlığın istediğiniz renkte veya konumda olmaması ise genellikle CSS konusudur. Bir düğmenin tıklanınca hiçbir işlem yapmaması, düğmenin HTML olarak oluşturulmadığını değil, beklenen davranış için gerekli JavaScript veya sunucu işleminin henüz eklenmediğini gösterebilir.

Bir sonraki uygulama: küçük bir kişisel sayfa​


Temel etiketleri öğrendikten sonra tek sayfalık bir tanıtım sayfası oluşturun. Sayfada bir ana başlık, kısa açıklama, çalışmalarınızı içeren bir liste, iletişim bağlantısı ve en az bir görsel bulunabilir. Önce yalnızca HTML ile içeriğin doğru sırada görünmesini sağlayın. Ardından CSS ekleyerek görünümü düzenleyin.

Bu aşamada hedefiniz sayfanın süslü görünmesi değil, yapının anlaşılır olmasıdır. Başlıklar içerik sırasını açıklamalı, bağlantılar gerçekten hedeflerine gitmeli, görseller uygun alt metnine sahip olmalı ve dosyalar doğru klasörlerden yüklenmelidir. Bu kontroller tamamlandığında HTML başlangıç aşamasını doğru bir temelle tamamlamış olursunuz.

Sık sorulan sorular​

HTML yazmak için özel bir program gerekli mi?​

Hayır. Düz metin kaydedebilen bir düzenleyici ve HTML dosyasını açabilen bir tarayıcı başlangıç için yeterlidir. Kod renklendirme sunan bir düzenleyici zorunlu değildir; yalnızca yazmayı ve hataları fark etmeyi kolaylaştırır.

HTML dosyam tarayıcıda kod olarak görünüyor, neyi kontrol etmeliyim?​

Dosyanın gerçekten .html uzantısıyla kaydedildiğini kontrol edin. Dosya .txt olarak kaydedildiyse tarayıcı belgeyi HTML olarak işlemeyebilir. Ayrıca etiketlerin açılış ve kapanış biçimini, özellikle < ve > karakterlerini kontrol edin.

HTML ile web sitesi yapılabilir mi?​

HTML, web sitesinin içerik ve yapı temelini oluşturur. Ancak düzenli bir görsel tasarım için genellikle CSS, etkileşimli davranışlar için JavaScript ve sunucu tarafı özellikler için ek teknolojiler gerekir. Bu nedenle HTML tek başına bir sitenin bütün ihtiyaçlarını karşılamaz.

Bir HTML etiketini ezberlemeden kullanabilir miyim?​

Evet. Başlangıçta bütün etiketleri ezberlemek yerine temel yapıyı, etiketlerin ne anlattığını ve özniteliklerin hangi bilgiyi taşıdığını anlamaya odaklanın. Ancak kullandığınız etiketi ve öznitelikleri güvenilir teknik belgelerden kontrol ederek doğru amaca uygun kullandığınızdan emin olun.
 

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol
Foruma git ?

Bu konuyu görüntüleyen kullanıcılar

Bu konuyu şu anda görüntüleyen üye bulunmuyor.
Robotlar:
  • Anthropic
Toplam: 1 (Üye: 0, misafir: 0, robot: 1)