HTML Temel Örnekleri

HTML nedir ve nasıl çalışır?

HTML (HyperText Markup Language), internet sitelerinin yapısal ve görsel bileşenlerini oluşturmak ve düzenlemek için kullanılan bir işaretleme dilidir. İnternetin yaygınlaşmasıyla birlikte HTML, web sayfalarının temel bileşenlerini tanımlamak için standart bir dil haline gelmiştir. Bu nedenle, her web geliştiricinin HTML’yi öğrenmesi ve kullanması önemlidir.

HTML, web tarayıcıları tarafından okunabilen bir metin tabanlı bir formatta yazılır. Bir HTML belgesi, farklı etiketlerden oluşan bir dizi içerir. Her etiket belirli bir amaç için kullanılır ve içerikleri açıklar. Etiketler arasına yazılarak oluşturulur ve çift veya tek etiketler olarak kullanılabilir.

Bir HTML belgesi genellikle etiketiyle başlar ve etiketiyle biter. Sayfanın başlığını belirtmek için etiketi ve içeriği, sayfanın gövdesini belirtmek için etiketi ve içeriği kullanılır. HTML’nin temel etiketleri arasında – başlık etiketleri,

paragraf etiketi, resim etiketi, bağlantı etiketi,

/
liste etiketleri gibi pek çok farklı etiket bulunur.
• HTML etiketleri web sayfalarının yapısını tanımlamak için kullanılır. Başlık etiketleri, metin etiketleri, resim etiketleri, bağlantı etiketleri gibi çeşitli etiketler bulunur.
• HTML etiketleri web tarayıcılara sayfanın nasıl görüntüleneceği konusunda bilgi verir. Örneğin, başlık etiketlerini kullanarak metinleri başlık olarak vurgulayabiliriz.
• HTML etiketleri düzen ve hiyerarşi sağlar. Etiketlerin doğru bir şekilde kullanılması ile sayfalar daha okunabilir bir hale gelir ve içeriklerin anlaşılması kolaylaşır.

HTML etiketleri web sayfalarını oluşturmak için güçlü bir araçtır. Web geliştiricilerin bu etiketleri doğru bir şekilde kullanarak içeriği düzenlemesi ve görsel bileşenleri düzenlemesi mümkündür. HTML, web tasarımının temelini oluşturur ve diğer dillerle birlikte kullanılarak daha karmaşık ve etkileyici web siteleri oluşturulmasına olanak tanır.

HTML etiketleri ve kullanımı

HTML etiketleri, HTML dokümanlarının yapısal bileşenlerini belirtmek için kullanılan işaretlerdir. Her bir etiket, açılış ve kapanış tagları ile oluşturulur ve içeriklerini içeride bulundurur. Bu etiketler, tarayıcılara ve diğer web uygulamalarına, sayfadaki elementlerin nasıl görüntüleneceği ve işleneceği hakkında bilgi verir. HTML etiketlerini doğru bir şekilde kullanmak, web sayfalarının düzgün bir şekilde render edilmesine ve erişilebilirliğine yardımcı olur.

HTML etiketlerinin kullanımı, belirli bir yapıya ve öncelik sırasına sahiptir. En yaygın kullanılan HTML etiketleri arasında başlık, paragraf, liste, resim ve bağlantı etiketleri bulunur. Başlık etiketleri (h1-h6), sayfadaki başlıkların önem sırasına göre kullanılır ve metinlerin hiyerarşisini belirtir. Paragraf etiketi (`

`) metinleri bir paragraf içinde düzenler. Liste etiketleri (sıralı ve sırasız) içerdikleri maddeleri liste olarak gösterir ve madde işaretleri veya sayılar kullanır. Resim etiketi (“) ise web sayfalarına resim eklemek için kullanılır. Bağlantı etiketi (“) ise başka bir web sayfasına veya kaynağa link oluşturmak için kullanılır.

HTML etiketlerini kullanırken bazı kurallara dikkat etmek önemlidir. Her açılış etiketi bir kapanış etiketi ile kapatılmalıdır. Etiketler genellikle küçük harfle yazılır ve çift tırnak içerisinde değer alır. Ayrıca her bir etiket, gerektiğinde belirli özelliklere sahip olan niteliklerle (attributes) de kullanılabilir. Nitelikler, etiketlere ek bilgiler eklemek için kullanılır ve genellikle `attribute=”value”` formatında yazılır.

Etiket	Açıklama
<h1> – <h6>	Metin başlıklarını belirtir.
<p>	Paragraf içeriğini belirtir.
<ul>	Sırasız liste (madde işaretleri) oluşturur.
<ol>	Sıralı liste (sayılar) oluşturur.
<img>	Resim eklemek için kullanılır.
<a>	Bağlantı oluşturur.

HTML başlık etiketleri ve önemi

HTML başlık etiketleri, web sayfalarında metinleri hiyerarşik bir şekilde düzenlemek ve başlıkları vurgulamak için kullanılan etiketlerdir. Başlık etiketleri sayesinde web tarayıcıları, web sayfasının yapısını anlayarak sayfayı daha iyi bir şekilde gösterebilirler.

HTML başlık etiketleri, SEO (Arama Motoru Optimizasyonu) açısından da büyük bir öneme sahiptir. Web sayfalarında kullanılan başlık etiketleri, arama motorlarının sayfaları indekslemesine yardımcı olur ve sayfanın konusu hakkında bilgi verir. Bu nedenle, doğru ve anlamlı başlık etiketleri kullanmak, web sayfasının daha iyi bir şekilde sıralanmasını sağlar.

HTML başlık etiketleri, h1, h2, h3, h4, h5 ve h6 olmak üzere altı farklı düzeyde kullanılabilir. h1, en önemli başlık etiketidir ve sayfada sadece bir kere kullanılması önerilir. Daha alt düzeydeki başlık etiketleri ise sayfadaki konu başlıklarını ve alt başlıkları belirtmek için kullanılır.

• h1: En önemli başlık etiketi
• h2: İkinci önemli başlık etiketi
• h3: Üçüncü önemli başlık etiketi
• h4: Dördüncü önemli başlık etiketi
• h5: Beşinci önemli başlık etiketi
• h6: Altıncı önemli başlık etiketi

Başlık Etiketi	Açıklama
h1	En önemli başlık etiketi
h2	İkinci önemli başlık etiketi
h3	Üçüncü önemli başlık etiketi
h4	Dördüncü önemli başlık etiketi
h5	Beşinci önemli başlık etiketi
h6	Altıncı önemli başlık etiketi

HTML paragraf etiketi ve örnekleri

HTML paragraf etiketi, web sayfalarında paragrafları oluşturmak için kullanılan bir HTML etiketidir. Paragraf etiketi <p> şeklinde açılır ve </p> şeklinde kapanır. Bu etiketin kullanımıyla, web sayfalarında metinler daha düzenli ve okunabilir hale getirilebilir.

Paragraf etiketi, metinlerin bir araya getirilerek içerik üretiminin sağlanmasında önemli bir role sahiptir. Örneğin, bir blog yazısı veya makalede farklı başlıklar altında anlatılan konular, paragraflar halinde düzenlenerek okuyucuya daha rahat bir deneyim sunulabilir.

HTML paragraf etiketi, içerisine metin veya diğer HTML etiketleri eklenerek kullanılabilir. Bu sayede, metinler arasında biçimlendirme yapmak veya başka HTML öğelerini içeren paragraflar oluşturmak mümkündür. Örnek olarak:

Örnek	Kod
Basit bir paragraf	<p>Bu bir paragraf örneğidir.</p>
Paragraf içinde <strong> etiketi kullanımı	<p>Bu bir <strong>paragraf</strong> örneğidir.</p>

HTML resim etiketi ve nasıl eklenir?

HTML resim etiketi, web sayfalarında görüntüleri eklemek için kullanılan bir yapıdır. Görüntüler, bir web sitesinin görsel açıdan daha çekici ve etkileyici olmasını sağlar. HTML’de resim etiketi <img> olarak adlandırılır ve src, alt ve width gibi özniteliklerle birlikte kullanılır.

Görüntü eklemek için ilk adım, resmin hedef dosya yolunu belirlemektir. Bu, src özelliği kullanılarak yapılır. Örneğin, <img src=”resim.jpg”> şeklinde bir img etiketi çağrısı, aynı dizindeki “resim.jpg” dosyasını ekleyecektir.

Resim etiketindeki alt özelliği, resim yüklenemediğinde veya kullanıcı resmi gözlemleyemediğinde metin tabanlı bir açıklama sağlar. Örneğin, <img src=”resim.jpg” alt=”manzara fotoğrafı”> şeklinde bir img etiketi, resmi yükleyemeyen kullanıcılara “manzara fotoğrafı” adlı bir açıklama sunar.

• HTML resim etiketi <img> kullanılır.
• Resim etiketi src, alt ve width gibi özniteliklerle birlikte kullanılır.
• Src özelliği, görüntünün hedef dosya yolunu belirler.
• Alt özelliği, resim yüklenemezse veya görüntülenemezse metin tabanlı bir açıklama sağlar.

Öznitelik	Açıklama
src	Görüntünün hedef dosya yolunu belirler.
alt	Resim yüklenemezse veya görüntülenemezse metin tabanlı bir açıklama sağlar.
width	Resmin genişliğini belirler.

HTML bağlantı etiketi ve link oluşturma

HTML bağlantı etiketi veya a etiketi, web sayfalarında link oluşturmaya yarayan önemli bir etikettir. Bağlantı etiketi, kullanıcıları başka bir web sayfasına veya aynı sayfanın başka bir bölümüne yönlendirmek için kullanılır. Ayrıca, haber sitelerinde, bloglarda veya diğer web sitelerinde farklı kaynaklara yapılan atıflarda da bağlantı etiketi kullanılır.

Bağlantı etiketinin kullanımı oldukça basittir. href özelliği içinde linkin hedef URL’sini belirtiriz. Örneğin, bu bir örnek bağlantıdır. Bu bağlantıyı tıkladığınızda, tarayıcınız hedef URL’ye yönlendirilecektir. Ayrıca, target özelliği ile linkin nasıl açılacağını da belirleyebiliriz. Örneğin, bu bir örnek bağlantıdır. Bu link, yeni bir sekmede açılacaktır.

Bağlantı etiketi, web sayfalarının gezinilebilirliğini artırmada büyük bir rol oynar. Bir sayfanın başka bir bölümüne veya başka bir web sitesine olan bağlantılar, kullanıcıların kolayca bilgi edinmesini veya kaynaklara erişmesini sağlar. Ayrıca, arama motorları da bu bağlantıları takip eder ve web sitelerinin derecesini belirlemek için kullanır. Bağlantı etiketleri, kullanıcı deneyimini iyileştirmek ve web sayfalarının daha kullanışlı hale gelmesini sağlamak için önemlidir.

• Bağlantıların tıklanabilir ve farklı bir renkte olması, kullanıcıların linkleri daha iyi tanımasını sağlar.
• Bağlantılar, vurgulanan veya altı çizili olarak da gösterilebilir.
• Bağlantıların açıldığı pencere veya sekme, target özelliği ile ayarlanabilir.
• Resimler de bağlantı olarak kullanılabilir.

Bağlantı Etiketi	Açıklama
<a>	Bağlantı oluşturmak için temel etiket.
href	Bağlantının hedef URL’sini belirtir.
target	Bağlantının nasıl açılacağını belirtir.
rel	Bağlantının ilişkilendirilmesi gereken bağlantı türünü belirtir.

HTML liste etiketleri ve çeşitleri

HTML liste etiketleri, belge içerisindeki metinleri organize etmek ve yapılandırmak için kullanılan etiketlerdir. Bu etiketler metinleri sıralı veya sırasız olarak liste halinde gösterir ve kullanıcılara içeriği daha anlaşılır bir şekilde sunar. HTML’de kullanılan liste etiketleri <ul> ve <ol> olarak ikiye ayrılır.

<ul> etiketiyle oluşturulan liste etiketi, sırasız listeleri temsil eder. Sırasız listeler, madde işaretleri veya simgeleriyle gösterilen listelerdir. Bu etiketin içine <li> etiketi kullanılarak her bir listeleme maddesi tanımlanır.

Örnek kullanım:

• Birinci madde
• İkinci madde
• Üçüncü madde

Sık Sorulan Sorular

HTML nedir ve nasıl çalışır?

HTML, Hypertext Markup Language’ın kısaltmasıdır ve web sayfalarının yapısını belirlemek için kullanılan bir programlama dilidir. HTML, metinlerin, resimlerin, videoların ve diğer web içeriklerinin nasıl görüntüleneceğini tarayıcılara söyleyen etiketlerden oluşur. Tarayıcı, HTML etiketlerini okuyarak web sayfasını oluşturur ve kullanıcının cihazına gönderir.

HTML etiketleri ve kullanımı

HTML etiketleri, bir web sayfasının farklı bölümlerini tanımlayan işaretlerdir. Etiketler açılış ve kapanış taglerden oluşur ve içerikleri bu tagler arasına yerleştirilir. Örneğin, “

” etiketi bir paragrafın başlangıcını ve “

” etiketi de paragrafın sonunu belirtir. Etiketler, tarayıcıya hangi tip içerikle çalıştığını ve nasıl görüntüleneceğini söyler.

HTML başlık etiketleri ve önemi

HTML başlık etiketleri, bir web sayfasının farklı başlıklarını tanımlar ve belirler. Başlık etiketleri, sayfanın içeriğindeki bölümleri hiyerarşik olarak düzenleyerek, sayfanın yapısını ve içeriğini tarayıcılara ve arama motorlarına anlatır. Başlık etiketleri aynı zamanda SEO (Arama Motoru Optimizasyonu) için önemlidir, çünkü arama motorları bu etiketleri kullanarak sayfanın içeriğini daha iyi anlar ve sıralama yapar.

HTML paragraf etiketi ve örnekleri

HTML paragraf etiketi, bir paragraf başlatma ve bitirme işlevi görür. “

” etiketi paragrafın başlangıcını belirtirken, “

” etiketi paragrafın sonunu belirtir. Örneğin:

<p>Bu bir paragraf örneğidir.</p>

HTML resim etiketi ve nasıl eklenir?

HTML resim etiketi, bir resmin web sayfasına nasıl eklenmesi gerektiğini belirtir. <img> etiketi kullanılırken, “src” özelliği ile resmin URL’si belirtilir. Örneğin:

<img src="resim.jpg" alt="Resim Açıklaması">

HTML bağlantı etiketi ve link oluşturma

HTML bağlantı etiketi, bir metni veya resmi tıklanabilir bir link olarak belirlemek için kullanılır. <a> etiketi kullanılırken, “href” özelliği ile hedef sayfanın URL’si belirtilir. Örneğin:

<a href="https://www.example.com">Örnek Bağlantı</a>

HTML liste etiketleri ve çeşitleri

HTML liste etiketleri, bir liste oluşturmak için kullanılır. İki tür liste vardır: sıralı liste ve sırasız liste.

Sırasız liste oluşturmak için “

” etiketi kullanılır ve her bir liste öğesi “
• ” etiketi ile belirtilir. Örneğin:

  <ul>
    <li>Öğe 1</li>
    <li>Öğe 2</li>
    <li>Öğe 3</li>
</ul>

  Sıralı liste oluşturmak için “

  ” etiketi kullanılır ve her bir liste öğesi de aynı şekilde “
  1. ” etiketi ile belirtilir.

     Örneğin:

     <ol>
    <li>Öğe 1</li>
    <li>Öğe 2</li>
    <li>Öğe 3</li>
</ol>