Bu makalede HTML başlangıç kodlarıyla ilgili konular ele alınacak ve bir giriş cümlesi bulunacak. HTML, web sayfalarının oluşturulması için kullanılan bir işaretleme dilidir. Bu dili kullanarak sayfaları yapılandırabilir, içerikleri biçimlendirebilir ve görselleri ve bağlantıları ekleyebilirsiniz.
HTML belgeleri oluşturmak için kullanılan temel etiketler vardır. Bu etiketler, sayfalarınızın yapısal olarak düzenlenmesine yardımcı olur. Örneğin,
<html>
etiketi, başlangıç etiketidir ve sayfanın başladığını belirtir. Aynı şekilde,
<body>
etiketi sayfa içeriğinin yer aldığı bölümü gösterir.
Metinleri biçimlendirmek için kullanılan etiketler de mevcuttur. Örneğin, metinleri
<b>
veya
<strong>
etiketleri ile kalınlaştırabilirsiniz. İtalik yazmak için
<i>
veya
<em>
etiketlerini kullanabilirsiniz. Üstü çizili yazı için
<s>
veya
<strike>
etiketlerini kullanabilirsiniz.
-
<p>
etiketi kullanarak paragraflar oluşturabilirsiniz.
-
<h1>
ile
<h6>
arasındaki başlık etiketleri kullanılarak metinlere başlık seviyeleri atanabilir.
-
<br>
etiketi kullanarak satır atlamaları yapılabilir.
- Sıralı ve sırasız liste oluşturmak için
<ul>
ve
<ol>
etiketleri kullanılabilir.
HTML başlangıç kodları, web sayfalarını hazırlarken ihtiyaç duyduğunuz temel yapıları oluşturmanızı sağlar. Bu şekilde sayfalarınızın görünümünü belirleyebilir ve içeriklerinizi düzenleyebilirsiniz.
Temel HTML Etiketleri
HTML belgelerini oluşturmak için kullanılan temel etiketlerin tanıtımını yapacağız. Öncelikle, <!DOCTYPE html> etiketini kullanarak belgenin HTML5 standardında olduğunu bildiriyoruz. Ardından, <html> etiketiyle belgenin başladığını belirtiyoruz ve altında <head> etiketiyle başlık kısmını tanımlıyoruz. Başlık kısmında <title> etiketi ile belgenin başlığını belirtebilir ve <meta> etiketleriyle meta bilgileri ekleyebiliriz.
Sonraki adımda, belgenin gövde kısmını tanımlayarak içeriği oluşturabiliriz. Gövde kısmında en sık kullanılan etiketler arasında <h1> ile <h6> başlık etiketleri yer alır. Bu etiketler kullanılarak metinlere başlık seviyeleri atanabilir. Bunun yanı sıra, <p> etiketiyle paragraf oluşturabilir ve metinleri biçimlendirebiliriz. Paragrafları ayrı ayrı vurgulamak için <b> veya <strong> etiketleri kullanabiliriz.
Ayrıca, HTML’de listeler oluşturmak için <ul> ve <ol> etiketlerini kullanabiliriz. Sırasız listeler için <ul> etiketi kullanılırken, sıralı listeler için <ol> etiketi kullanılır. Liste öğeleri ise <li> etiketiyle belirtilir. Bu şekilde düzenli bir şekilde listeler oluşturabiliriz.
HTML belgelerini oluşturmak ve biçimlendirmek için çok sayıda etiket bulunmaktadır, ancak bu temel etiketlerle başlamanız önemlidir. Bu etiketleri kullanarak belgelere yapılandırma kazandırabilir ve kullanıcılar için daha anlaşılır bir deneyim sunabilirsiniz.
Metin Biçimlendirme
Metinleri kalın, italik, altı çizili gibi biçimlendirmek için kullanılan etiketlerin açıklaması yer alacak.
HTML, metinleri farklı biçimlerde göstermek ve vurgulamak için çeşitli etiketler sunar. Bu etiketler sayesinde kalın, italik, altı çizili gibi metin stilleri uygulanabilir.
Birinci olarak, kalın metin biçimlendirmek için <b> veya <strong> etiketleri kullanılır. Bu etiketler kullanıldığında metin daha belirgin hale gelir ve dikkat çeker.
İkinci olarak, italik metin biçimlendirmek için <i> veya <em> etiketleri kullanılır. Bu etiketler metni eğik bir şekilde gösterir ve vurgulamak için kullanılabilir.
Üçüncü olarak, altı çizili metin düşey bir çizgi ile göstermek için <u> etiketi kullanılır. Bu etiket metni vurgulamak veya belirli bir kavramı ön plana çıkarmak için kullanılabilir.
Ayrıca, üstü çizili metin göstermek için <s> etiketi kullanılabilir. Bu etiket, metin üzerinde bir çizgi çekerek metni belirtmek veya göstermek için kullanılabilir.
HTML etiketlerini kullanarak metinleri biçimlendirmek sayesinde içeriği daha okunaklı hale getirebilir ve kullanıcılara daha iyi bir kullanıcı deneyimi sağlayabilirsiniz.
Paragraf Etiketi
=
etiketi kullanarak paragraflar oluşturulabilir ve biçimlendirilebilir.
Bir HTML belgesinde yazıları paragraf şeklinde düzenlemek için <p> etiketi kullanılır. Paragraf etiketi, metni bir veya birden fazla paragrafta gruplamak için kullanılır ve sayfa düzenini daha okunabilir hale getirir.
Paragraf etiketi, bir blok elementtir ve tek bir paragrafın başlangıcını ve sonunu belirtmek için kullanılır. Ayrıca, paragraf etiketiyle yazılan metinleri biçimlendirmek için CSS kullanılabilir.
Örneğin, aşağıdaki HTML kodu bir paragrafta yazılan bir metni göstermektedir:
Bu bir paragraf örneğidir.
Yukarıdaki kodda, metin paragrafta yer alır ve tam bir satırdan başlar ve tam bir satırda biter. Blok etiketlerinin özellikleri, içeriği düzenlemek ve tasarım yapmak için kullanılabilir.
Ayrıca, paragrafları bir liste ya da tablonun içinde kullanmak da mümkündür. Bu durumlarda da <p> etiketi kullanılarak metinler paragraflara ayrılabilir ve biçimlendirilebilir.
Başlık Etiketleri
Bu başlık seviyeleri, metnin yapısını ve düzenini oluşturmak için de kullanılabilir. Özellikle uzun içeriklerde, okuyucunun dikkatini çekmek ve kolayca bilgiye erişimini sağlamak için başlık etiketlerini doğru bir şekilde kullanmak büyük önem taşır.Unutmayın, başlık etiketleri sadece görsel açıdan metnin biçimlendirilmesine yardımcı olmaz, aynı zamanda sayfanın okunabilirliğini artırır ve SEO açısından da önemli bir rol oynar.
Satır Etiketi
Satır etiketi, HTML belgelerinde satır atlamaları yapmak için kullanılır. Satır atlamaları, metinlerin düzgün bir şekilde görüntülenmesini sağlar. Satır etiketi olan ‘
‘ etiketini kullanarak bir satır atlaması yapabilirsiniz.
Bu etiket, metinlerin alt alta ve dikey olarak düzenlenmesini sağlar. Örneğin, bir paragraf içinde isimlerin alt alta listelenmesi gerekiyorsa, her isimden sonra ‘
‘ etiketi kullanılabilir. Bu şekilde, her isim bir alt satıra geçer ve düzgün bir liste oluşturulur.
Özellikle adres veya iletişim bilgilerini içeren sayfalarda satır atlamaları sıkça kullanılır. Bu şekilde, bilgiler daha düzenli ve okunabilir bir şekilde sunulur.
Aşağıda bir örnek görmek için bir tablo oluşturabiliriz:
| Ad | Soyad |
|---|---|
| Ahmet | Yılmaz |
| Ayşe | Kara |
| Can | Öztürk |
Yukarıdaki örnekte, her isim bir alt satıra geçmek için ‘
‘ etiketiyle ayrılmıştır. Bu sayede, tablo içindeki isimler düzgün bir şekilde görüntülenir ve okuyucular için bilgiler daha anlaşılır hale gelir.
Liste Etiketleri
=Sıralı ve sırasız liste oluşturmak için
- ve
- etiketi ile belirtilir.
- HTML
- CSS
- JavaScript
Sırasız listeler ise genellikle madde işaretleriyle gösterilir. Her öğe,
- etiketi ile belirtilir ve bu etiketin içerisine öğeyi temsil eden metin veya içerik eklenir.
- HTML öğrenin
- CSS öğrenin
- JavaScript öğrenin
İster sıralı liste, ister sırasız liste olsun, listeler HTML’de iç içe geçebilir ve istenilen düzeyde yapılabilir. Öğelerin içerisine alt liste veya alt-üst liste yapıları da eklenebilir.
- Hayvanlar
- Köpek
- Kedi
- Meyveler
- Elma
- Armut
Listeler sayfa düzeninde içerikleri düzenlemek için de kullanılabilir. Örneğin, bir navigasyon menüsü oluşturmak veya bir içerik gövdesini yapılandırmak için listelerden faydalanılabilir. Bu sayede kullanıcılar, sayfayı daha kolay anlayıp kullanabilirler.
Resim ve Bağlantı Etiketleri
HTML, web sayfalarında resim ve bağlantı eklemek için
ve etiketlerini kullanmaktadır.
etiketi, resimleri HTML sayfalarına eklemek ve çeşitli özelliklerini belirlemek için kullanılır. Örneğin, src özelliği ile resmin adresi belirtilirken, alt özelliği ile ise resmin alternatif metni sağlanır. Böylece, sayfa yüklenmediğinde ya da görüntü görüntülenemediğinde, alternatif metin olarak resim hakkında bir açıklama görüntülenebilir.
Bu etiketlerin doğru bir şekilde kullanılması, sayfaların daha işlevsel ve zengin hale gelmesini sağlar. Örneğin, bir blog yazısı içinde
etiketi ile görseller eklenerek, yazılar daha ilgi çekici hale getirilebilir. Aynı şekilde, etiketi kullanılarak farklı kaynaklara veya ilgili içeriklere yönlendirme yapılması, kullanıcı deneyimini artırır ve kullanıcının istediği bilgilere daha hızlı şekilde ulaşmasını sağlar.
Resim Etiketi
Resimlerin HTML sayfalarına eklenmesi için
etiketi kullanılır. Bu etiketin içine src özelliğiyle resmin URL’si belirtilir. Ayrıca alt özelliğiyle resim için bir alternatif metin de ekleyebilirsiniz. Bu metin, resim yüklenmediğinde veya erişilemediğinde görüntülenebilir. Resmin boyutunu belirlemek için width ve height özelliklerini kullanabilirsiniz. Bunlar piksel cinsinden belirlenir ve orantıları korunarak kullanılmalıdır.Ayrıca, resmi bağlantı olarak da kullanabilirsiniz. Bunun için etiketi kullanılır ve href özelliğiyle hedef sayfanın URL’si belirtilir. Böylece kullanıcılar resme tıkladığında belirtilen sayfaya yönlendirilirler. Resmi tıklanabilir hale getirmek için altında yönlendirme olan bir metin ekleyebilirsiniz.Resimlerin tarayıcıda nasıl görüneceğiyle ilgili bazı özellikleri de belirleyebilirsiniz. Örneğin, resmi etiketin içine align özelliğiyle hizalayabilir veya etrafına border özelliğiyle çerçeve ekleyebilirsiniz. Ayrıca, resimlerin otomatik olarak yeniden boyutlandırılması gerekiyorsa, CSS’in max-width özelliğini veya width özelliğini kullanabilirsiniz.Sonuç olarak,
etiketi, HTML sayfalarına resim eklemek için kullanılan önemli bir etikettir. Resmin özelliklerini belirlemek ve kullanıcıların resimleri görüntüleyebilmesini sağlamak için bu etiketi doğru bir şekilde kullanmalısınız.
Bağlantı Etiketi
Bağlantı etiketi, `` etiketi kullanılarak hyperlinkler oluşturulmasını sağlar. HTML sayfalarında, kullanıcıları diğer web sayfalarına veya belgelere yönlendirmek için bir bağlantı oluşturmak istediğimizde `` etiketi kullanılır. Bağlantı etiketi, `href` özelliği ile hedef URL’yi belirler. Örneğin; “https://www.example.com” web sitesine bağlantı oluşturmak için aşağıdaki gibi bir HTML kodu kullanabiliriz:
Örnek Bir Bağlantı
Bu kodu kullanarak, kullanıcılar “Örnek Bir Bağlantı” metnine tıkladığında `https://www.example.com` adresine yönlendirilecektir. Bağlantı etiketi, belirli bir URL’nin yanı sıra, belge içerisinde başka bir konuma da bağlantı oluşturmak için kullanılabilir. `href` özelliği için “#” sembolü kullanılarak belgede bir yer işaretleyebilir ve bağlantı oluşturabilirsiniz:
Sayfa Başlangıcı
Bu örnekte, kullanıcılar “Sayfa Başlangıcı” metnine tıkladığında belgenin başlangıcına yönlendirilecektir. Bağlantı etiketi, içeriğinize kullanıcıları gezinmek için yönlendirmek veya farklı sayfalara bağlantılar eklemek için kullanışlı bir araçtır.
- etiketleri kullanılabilir.
Sayfa içerisinde listeler oluşturmanın birkaç farklı yolu vardır. Sıralı listeler için
- etiketi kullanılırken, sırasız listeler için
- etiketi kullanılır. Bu etiketler belirli bir düzeni takip eden veya sıralı olmayan öğeleri organize etmek için kullanılır.
Sıralı listeler, numaralandırılmış bir şekilde öğeleri gösterirken, sırasız listeler öğeleri belirli bir sıra olmadan göstermek için kullanılır. Sıralı listelerdeki her öğenin numarası,
