HTML, web sayfalarının oluşturulmasında kullanılan temel bir kodlama dildir. Bu makale, HTML kodları hakkında tartışılan konuları ele alırken, okuyucuya bir giriş sunmayı amaçlamaktadır. HTML kodları, web içeriğinin oluşturulması ve biçimlendirilmesi için kullanılır ve web sayfalarının yapısını belirtmek için etiketlerden oluşur. Her bir etiket, çeşitli özellikler ve işlevlerle birlikte gelir ve bu sayede sayfanın düzenini kontrol etmek ve içerikleri düzenlemek mümkün olur.
HTML kodlarını kullanarak, başlık etiketlerini, paragraf ve metin etiketlerini, yazı stillerini, listeleri, resimleri ve bağlantıları belirleyebilirsiniz. Başlık etiketleri, sayfa içindeki başlıkları tanımlamak için kullanılır ve arama motorları tarafından sayfanın içeriği hakkında bilgi sağlamak amacıyla değerlendirilir. Paragraf ve metin etiketleri, içeriğin daha iyi okunmasını sağlamak veya belirli bir mesajı vurgulamak için kullanılır. Yazı stilleri, metinleri kalın veya italik yapmak gibi özel biçimlendirmeler için kullanılır.
Listeler, bilgiyi yapılandırmak ve organize etmek için kullanışlıdır. Sıralı listeler, numaralandırılmış bir sıra ile öğeleri listelerken, sırasız listeler, maddelerin yer aldığı bir liste sunar. Resim etiketleri, web sayfalarına görseller eklemek için kullanılırken, bağlantı etiketleri diğer sayfalara veya web kaynaklarına bağlantılar eklemeye olanak sağlar.
HTML kodları, web sayfalarını oluşturmanın temel bir unsurudur. Bu makale, HTML kodlarıyla ilgili konuları ele alırken, okuyucuya bir çerçeve sunar ve onları HTML’nin gücü ve kullanım alanları hakkında bilgilendirir.
Başlık Etiketleri
Bir web sayfası oluştururken, başlık etiketleri kullanmak önemlidir. Başlık etiketleri, sayfanın başlık kısmında yer alan metni belirlemek için kullanılır. Bu etiketler, sayfanın konusunu ve içeriğini daha iyi anlamak için arama motorlarına ipucu verir. Ayrıca, kullanıcılar için de görsel olarak daha çekici bir deneyim sunar.
| Başlık Etiketi | Kullanımı |
|---|---|
| En önemli başlık etiketi. Sayfada sadece bir kez kullanılır. | |
| Ana başlıkların altında kullanılır. | |
| Alt başlıkların altında kullanılır. | |
| Alt başlıkların altında kullanılır. | |
| Alt başlıkların altında kullanılır. | |
| Alt başlıkların altında kullanılır. |
Başlık etiketleri aynı zamanda sayfa içinde gezinmeyi kolaylaştırır. Kullanıcılar, başlık etiketlerini okuyarak sayfanın içeriğindeki ilgili bölüme hızlıca ulaşabilirler. Ayrıca, başlık etiketleri arama motorları için de önemlidir. Arama motoru botları, başlık etiketlerini kullanarak sayfayı tarar ve sayfanın konusunu anlamalarına yardımcı olur.
Paragraf ve Metin Etiketleri
HTML kodlarıyla ilgili bir web sayfası hazırlarken, metin ve paragrafları biçimlendirmek oldukça önemlidir. Bu şekilde, sayfanın düzeni ve okunabilirliği artırılır. HTML etiketleriyle metin ve paragrafları biçimlendirebilir ve istediğiniz görsel etkiyi elde edebilirsiniz.
Başlıca metin ve paragraf etiketleri şunlardır:
- <p>: Bu etiket, bir paragrafı belirtmek için kullanılır. Paragraf başladığında <p> etiketi kullanılır ve paragrafın sonunda </p> etiketi yer alır. Metinler için en sık kullanılan etikettir.
- <h1> – <h6>: Başlık etiketleri, metnin önem derecesini belirtmek için kullanılır. <h1> en önemli başlığı, <h6> ise en az önemli başlığı ifade eder.
- <strong> veya <b>: Metni kalınlaştırmak için kullanılır. <strong> etiketi, vurgulu bir betiksel anlam taşırken, <b> etiketi sadece görsel bir değişiklik sağlar.
- <em> veya <i>: Metni italikleştirmek için kullanılır. <em> etiketi, vurgulu bir sözcüğü veya ifadeyi belirtirken, <i> etiketi sadece görsel bir değişiklik yapar.
- <u>: Metni altı çizmek için kullanılır. Özellikle bağlantılar veya önemli notlar için tercih edilen bir etikettir.
- <del> veya <s>: Metni üstü çizmek için kullanılır. Eski veya yanlış bilgilerin belirtilmesinde sıklıkla kullanılır.
Bu etiketlerle metin ve paragrafları biçimlendirmek, web sayfalarınızın okunabilirliğini artırmak ve vurgular yapmak için etkili bir yoldur.
Yazı Stilleri
Yazı Stilleri
Web sayfalarınızı daha görsel ve etkileyici hale getirmek için HTML’de kullanılan yazı stillerini keşfedin. Yazı stilleri, metinlerin görünümünü değiştirerek sayfanın tasarımını geliştirmenize olanak sağlar.
HTML’de yazı stilleri oluşturmak için birkaç etiket bulunmaktadır. Bunlardan en yaygın kullanılanı <strong> etiketidir. Bu etiket, içine aldığı metni kalın bir şekilde vurgular. Örneğin “Bu bir önemli mesajdır” gibi bir metin kullanabilir ve bu şekilde mesajınızı vurgulayabilirsiniz.
Ayrıca, italik yazı stilleri oluşturmak için <em> etiketini kullanabilirsiniz. Bu etiket de içine aldığı metni italik bir şekilde vurgular. Örneğin “Bu bir önemli nottur” şeklinde bir metin oluşturabilir ve notunuzun öne çıkmasını sağlayabilirsiniz.
Buna ek olarak, <u> etiketiyle metinlerinizi altı çizili hale getirebilir ve <s> etiketiyle metinlerinizi üstü çizili hale getirebilirsiniz. Bu şekilde belirli bir mesajı veya vurguyu daha da belirgin hale getirebilirsiniz.
Yazı stillerini kullanırken dikkat etmeniz gereken nokta, abartıdan kaçınmaktır. Metinlerinizi uygun şekilde vurgulamak için yazı stillerini kullanabilirsiniz, ancak aşırı kullanımı sayfanızın okunabilirliğini azaltabilir. Ayrıca, yazı stillerini amacına uygun bir şekilde ve tutarlı bir şekilde kullanmaya özen göstermelisiniz.
Kalın ve İtalik Metin
Metinleri kalın veya italik yapmak için HTML’de belirli etiketler kullanabilirsiniz. Kalın bir metin oluşturmak için etiketini kullanabilirsiniz. Bu etiketi, metnin etrafına koyduğunuzda metin kalın olarak görünecektir. Örneğin, Bu metin kalın olacak! şeklinde bir metin oluşturabilirsiniz.
Aynı şekilde, bir metini italik yapmak için etiketini kullanabilirsiniz. Bu etiketi, metnin etrafına koyarak metni italik yapabilirsiniz. Örneğin, Bu metin italik olacak! şeklinde bir metin oluşturabilirsiniz.
| Etiket | Kullanım |
|---|---|
| <b> | Metni kalın yapmak için kullanılır. |
| <i> | Metni italik yapmak için kullanılır. |
Bu etiketlerin kombinasyonunu kullanarak bir metni hem kalın hem de italik yapabilirsiniz. Örneğin, Bu metin hem kalın hem de italik olacak! şeklinde bir metin oluşturabilirsiniz.
HTML’de metinleri biçimlendirmek için kullanılan diğer etiketleri de keşfedebilirsiniz. Bu etiketler, metinleri altı çizgili veya üstü çizgili yapmak, yazı boyutunu belirlemek veya farklı yazı stilleri oluşturmak için kullanılabilir.
Altı Çizili ve Üstü Çizili Metin
Metinlerinizi biçimlendirmek için altı çizili veya üstü çizili metin kullanabilirsiniz. HTML’de, altı çizili metin oluşturmak için etiketini kullanabilirsiniz. Bu etiketi kullanarak, belirli bir metin parçasının altını çizebilir ve dikkat çekmesini sağlayabilirsiniz. Örneğin, bir ürünün özelliklerini vurgulamak veya bir önemli not eklemek için altı çizili metin kullanabilirsiniz.
Üstü çizili metin oluşturmak için ise etiketini kullanabilirsiniz. Üstü çizili metin, metin üzerinde bir çizgi oluşturur ve metnin yanlış veya hatalı olduğunu vurgular. Özellikle yanlış bilgileri düzeltmek veya dikkat çekmek için kullanılabilir. Örneğin, bir hata yapılırsa veya geçersiz bir bilgi verilirse, bu metni üstü çizerek okuyucuya dikkat etmesini sağlayabilirsiniz.
Listeler
Listeler
HTML’de sıralı ve sırasız listeler oluşturmanın birçok yolunu keşfedebilirsiniz. Bu listeler, içerikleri hızlı ve düzenli bir şekilde sunmanın yanı sıra, okunabilirliği arttırır ve kullanıcılara bilgileri kolayca tarama imkanı sağlar.
Sırasız listeler, maddelerin herhangi bir sıraya göre sıralanmadığı durumlarda kullanılır. Bu listeler için <ul> etiketi kullanılır. İşte nasıl yapacağınıza dair bir örnek:
<ul> <li>Meyve</li> <li>Sebze</li> <li>Ekmek</li></ul>
Yukarıdaki kod, bir sırasız listeyi temsil eder. Her bir madde <li> etiketi ile tanımlanır. Tarayıcılar bu listeyi otomatik olarak madde işaretleriyle gösterecektir.
Sıralı listeler, maddelerin belirli bir sıraya göre sıralandığı durumlarda kullanılır. Bu listeler için <ol> etiketi kullanılır. İşte nasıl yapacağınıza dair bir örnek:
<ol> <li>Kahvaltı</li> <li>Öğle Yemeği</li> <li>Akşam Yemeği</li></ol>
Yukarıdaki kod, bir sıralı listeyi temsil eder. Her bir madde aynı şekilde <li> etiketi ile tanımlanır. Tarayıcılar bu listeyi sayılarla veya harflerle gösterecektir.
Resim ve Bağlantı Etiketleri
=Web sayfalarına resimler ve bağlantılar eklemek için nasıl etiketleri kullanabileceğinizi öğrenin.
Web sayfaları, görsel içeriklerin ve kullanıcıları farklı sayfalara yönlendiren bağlantıların kullanımıyla daha etkileyici hale gelebilir. HTML, resim ve bağlantı etiketleri kullanarak bu özellikleri kolayca eklemenizi sağlar. Bir resim eklemek için, <img> etiketini kullanabilirsiniz. Bu etiketin içinde bir resim dosyasının konumu ve alternatif metin gibi bazı parametreler bulunur. Bu sayede, resim yüklenmediğinde dahi metin tabanlı bir açıklama görüntülenebilir. Aşağıda bir örnek bulunmaktadır:
<img src="resim.jpg" alt="Güzel bir doğa manzarası">
Bu etiket, “resim.jpg” adlı dosyayı kullanarak web sayfasına bir resim ekler. Aynı şekilde, <a> etiketi kullanarak bağlantılar oluşturabilirsiniz. Bu etiket, kullanıcıyı başka bir web sayfasına veya belirli bir konumu içeren sayfaya yönlendirir. Aşağıda bir örnek bulunmaktadır:
<a href="https://www.ornek.com">Örnek.com</a>
Bu etiket, “Örnek.com” metnini içeren bir bağlantı oluşturur ve tıklanır olduğunda “https://www.ornek.com” adresine yönlendirir. Böylece, web sayfanızı daha etkileşimli hale getirebilir ve kullanıcıların farklı içeriklere erişimini kolaylaştırabilirsiniz.
Resim Etiketleri
Resim etiketleri, bir web sayfasına resim eklemek için kullanılan önemli HTML etiketleridir. Bu etiketlerin kullanımı, resimlerin doğru şekilde görüntülenmesini ve kullanıcıların resimleri daha iyi anlamasını sağlar. Resim etiketleri, etiketiyle başlar ve bitişik şekilde kullanılır.
Resim etiketlerinin en önemli özelliği, resme ait bilgileri sağlamasıdır. etiketi içindeki alt özniteliği (alt attribute) kullanarak, resmin açıklamasını veya resim hakkında verilmek istenen bilgileri ekleyebilirsiniz. Bu özellik, resmin yüklenemediği durumlarda veya görme engelli kullanıcılar için metin tabanlı tarayıcılarda resmin ne olduğunu anlamalarına yardımcı olur.
Aşağıda, bir resim etiketinin yapısı anlatılmaktadır:
| Etiket | Açıklama |
|---|---|
| <img src=”resim-adresi.jpg” alt=”Resim açıklaması” /> | Resmi sayfaya ekler. “src” özniteliği, resmin dosya yolunu belirtir. “alt” özniteliği, resimle ilgili açıklamayı içerir. |
Bu basit yapıyı kullanarak, resim etiketlerini web sayfasına kolaylıkla yerleştirebilirsiniz. Aynı zamanda, resim etiketlerini kullanırken dikkatli olmanız önemlidir. Resim dosyasının boyutu, sayfa yüklemesini etkileyebilir, bu nedenle optimize edilmiş resimleri kullanmanız önerilir. Ayrıca, resimlere ilişkin doğru ve anlaşılır açıklamalar eklemek, sayfanızın erişilebilirliğini artırır.
Bağlantı Etiketleri
Bağlantı Etiketleri
Web sayfalarınızı daha etkileşimli hale getirmek ve kullanıcıları farklı sayfalar veya web kaynaklarıyla bağlantılandırmak için bağlantı etiketlerini kullanabilirsiniz. Bağlantı etiketlerini kullanarak, bir metin veya resim üzerine tıklandığında kullanıcıyı başka bir sayfaya veya web kaynağına yönlendirebilirsiniz.
Bir bağlantı etiketi oluşturmak için “a” etiketini kullanmanız gerekmektedir. Bağlantı etiketi üzerinde “href” özelliğini belirleyerek hedef sayfanın veya web kaynağının URL’sini belirtebilirsiniz. Ayrıca, bağlantıya bir metin veya resim ekleyebilirsiniz.
Örneğin, aşağıdaki HTML kodu ile “Daha fazla bilgi edinin” adlı bir bağlantı oluşturabilirsiniz:
<a href="https://www.example.com">Daha fazla bilgi edinin</a>
Bu kodu kullanarak, kullanıcıya tıklamaları halinde “Daha fazla bilgi edinin” metni gösterilecek ve kullanıcıyı https://www.example.com adresine yönlendireceksiniz.
Ayrıca, bağlantılarınızı yeni bir pencerede açmak isterseniz, “target” özelliğini “_blank” olarak belirleyebilirsiniz. Böylece, kullanıcılar sayfanızdan ayrılmadan hedef sayfaya erişebilirler.
Bağlantı etiketleri, web sayfalarınızı gezinme menüleri, kaynak atıfları veya diğer ilgili sayfalara yönlendirme için kullanabileceğiniz güçlü bir araçtır. Doğru şekilde kullanarak, kullanıcı deneyimini geliştirebilir ve kullanıcıların istedikleri bilgiye hızlıca erişmelerini sağlayabilirsiniz.
