HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!
Çoğu etiket için çıktı içeren HTML kod örnekleri sağladık. Bunları çalışırken görmek istiyorsanız, makalenin sonundaki örnek HTML dosyasını indirin. Onunla bir metin düzenleyicide oynayabilir ve değişikliklerinizin ne işe yaradığını görmek için bir tarayıcıya yükleyebilirsiniz.
1. <! DOCTYPE html>
Oluşturduğunuz her HTML belgesinin başında bu etikete ihtiyacınız olacak. Tarayıcının HTML okuduğunu bilmesini ve en son sürüm olan HTML5'i beklemesini sağlar.Bu aslında bir HTML etiketi olmasa da, yine de bilinmesi iyi bir şey.
2. <html>
Bu, tarayıcıya HTML okuduğunu söyleyen başka bir etikettir. <html> etiketi, DOCTYPE etiketinden hemen sonra gelir ve bunu, dosyanızın hemen sonunda bir </html> etiketiyle kapatırsınız. Belgenizdeki diğer her şey bu etiketlerin arasında yer alır.3. <head>
<head> etiketi, dosyanızın başlık bölümünü başlatır. Buraya giren şeyler web sayfanızda görünmez. Bunun yerine, arama motorları için meta verileri ve tarayıcınız için bilgileri içerir.Temel sayfalar için, <head> etiketi başlığınızı içerecektir ve bu onunla ilgilidir. Ancak dahil edebileceğiniz birkaç şey daha var, bunları birazdan ele alacağız.
4. <title>
Kod:
<head>
<title>My Website</title>
</head>Bu, bir tarayıcıda açıldığında sekme başlığı olarak görüntülenecek addır.
5. <meta>
Başlık etiketi gibi, meta veriler de sayfanızın başlık alanına yerleştirilir. Meta veriler esas olarak arama motorları tarafından kullanılır ve sayfanızdakilerle ilgili bilgilerdir. Çok sayıda farklı meta alan vardır, ancak bunlar en yaygın kullanılanlardan bazılarıdır:- description--- Sayfanızın temel açıklaması.
- keywords --- Sayfanız için geçerli anahtar kelimelerden oluşan bir seçim.
- author --- Sayfanızın yazarı.
- viewport --- Sayfanızın tüm cihazlarda iyi görünmesini sağlayan bir etiket.
Kod:
<meta name="description" content="A basic HTML tutorial">
<meta name="keywords" content="HTML,code,tags">
<meta name="author" content="MakeUseOf">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Sayfanızın mobil ve masaüstü cihazlarda iyi görünmesini sağlamak için "görüntü alanı" etiketinin içeriği her zaman "width = device-width, initial-scale = 1,0" olmalıdır.
6. <body>
Başlık bölümünü kapattıktan sonra gövdeye ulaşırsınız. Bunu <body> etiketiyle açarsınız ve </body> etiketiyle kapatırsınız. Bu, dosyanızın sonuna, </html> etiketinin hemen öncesine gider.Web sayfanızın tüm içeriği bu etiketlerin arasına girer. Göründüğü kadar basit:
Kod:
<body>
Everything you want displayed on your page.
</body>7. <h1>
<h1> etiketi, sayfanızdaki birinci düzey bir başlığı tanımlar. Bu genellikle başlık olacaktır ve ideal olarak her sayfada yalnızca bir başlık olacaktır.<h2>, bölüm başlıkları, <h3> üçüncü düzey alt başlıklar vb. gibi ikinci düzey başlıkları <h6> 'ya kadar tanımlar. Örnek olarak, bu makaledeki etiketlerin isimleri ikinci seviye başlıklardır.
Kod:
<h1>Big and Important Header</h1>
<h2>Slightly Less Big Header</h2>
<h3>Sub-Header</h3>Sonuç:
8. <p>
Paragraf etiketi yeni bir paragrafa başlar. Bu genellikle iki satır sonu ekler.Örneğin, önceki satır ile bu satır arasındaki kopukluğa bakın. <p> etiketinin yapacağı şey budur.
Kod:
<p>Your first paragraph.</p>
<p>Your second paragraph.</p>Sonuç:
İlk paragrafınız.
İkinci paragrafınız.
Metin boyutunu değiştiren şunun gibi paragraf etiketlerinizde de CSS stilleri kullanabilirsiniz:
Kod:
<p style="font-size: 120%;">20% larger text</p>Sonuç:
% 20 daha büyük metin
Metninizi biçimlendirmek için CSS'yi nasıl kullanacağınızı öğrenmek için HTML ve CSS eğitimlerine göz atın.
9. <br>
Satır sonu etiketi tek bir satır sonu ekler:
Kod:
<p>The first line.<br>
The second line (close to the first one).</p>Sonuç:
İlk satır.
İkinci satır (ilkine yakın).
Benzer şekilde çalışmak <hr> etiketidir. Bu, sayfanıza yatay bir çizgi çizer ve metin bölümlerini ayırmak için iyidir.
10. <strong>
Bu etiket, önemli metni tanımlar. Genel olarak, bu kalın olacağı anlamına gelir. Ancak, <strong> metnin farklı görünmesini sağlamak için CSS kullanmak mümkündür.Ancak, metni kalınlaştırmak için <strong> güvenle kullanabilirsiniz.
Kod:
<strong>Very important things you want to say.</strong><b> Metni kalınlaştırmak için etikete aşinaysanız, yine de kullanabilirsiniz. HTML'nin gelecekteki sürümlerinde çalışmaya devam edeceğinin garantisi yok, ancak şimdilik çalışıyor.
11. <em>
<b> ve <strong> gibi, <em> ve <i> birbiriyle ilişkilidir. <em> etiketi, vurgulanan metni tanımlar, bu da genellikle italik hale getirileceği anlamına gelir. Yine, CSS'nin vurgulanan metni farklı şekilde gösterme olasılığı vardır.<em>An emphasized line.</em>
<i> etiketi hala çalışır, ancak yine, HTML'nin gelecekteki sürümlerinde kullanımdan kaldırılması mümkündür.
12. <a>
<a> veya çapa etiketi, bağlar oluşturmanıza olanak sağlar. Basit bir bağlantı şuna benzer:<a href="https://www.turkmmo.com/>Go to Turkmmo</a>
"Href" özelliği, bağlantının hedefini tanımlar. Çoğu durumda, bu başka bir web sitesi olacaktır. Görüntü veya PDF gibi bir dosya da olabilir.
Diğer yararlı özellikler arasında "hedef" ve "başlık" bulunur. Hedef öznitelik neredeyse yalnızca bir bağlantıyı yeni bir sekmede veya pencerede açmak için kullanılır, örneğin:
Kod:
<a href="https://www.turkmmo.com/" target="_blank">Go to Turkmmo in a new tab</a>"Title" özelliği bir araç ipucu oluşturur. Nasıl çalıştığını görmek için aşağıdaki bağlantının üzerine gelin:
Kod:
<a href="https://www.turkmmo.com/" title="This is a tool tip">Hover over this to see the tool tip</a>13. <img>
Sayfanıza bir resim yerleştirmek istiyorsanız, resim etiketini kullanmanız gerekir. Normalde "src" özelliğiyle birlikte kullanırsınız. Bu, aşağıdaki gibi görüntünün kaynağını belirtir:
Kod:
<img src="wp-content/uploads/2019/04/sunlit-birds.jpg">Sonuç:
Kod:
<img src="wp-content/uploads/2019/04/sunlit-birds.jpg" alt="the name of your image">Tahmin edebileceğiniz gibi, "yükseklik" ve "genişlik" özellikleri, görüntünün yüksekliğini ve genişliğini belirler. Genel olarak, görüntünün doğru ölçeklenmesi için bunlardan yalnızca birini ayarlamak iyi bir fikirdir. Her ikisini de kullanırsanız, uzatılmış veya sıkıştırılmış bir görüntü elde edebilirsiniz.
"Alt" etiketi, tarayıcıya, resim görüntülenemiyorsa hangi metnin görüntüleneceğini söyler ve herhangi bir resimle birlikte eklemek iyi bir fikirdir. Birisi özellikle yavaş bir bağlantıya veya eski bir tarayıcıya sahipse, sayfanızda ne olması gerektiği konusunda yine de bir fikir edinebilir.
14. <ol>
Sıralı liste etiketi, sıralı bir liste oluşturmanıza olanak sağlar. Genel olarak bu, numaralandırılmış bir liste alacağınız anlamına gelir. Listedeki her öğenin bir liste öğesi etiketine (<li>) ihtiyacı vardır, bu nedenle listeniz şöyle görünecektir:
Kod:
<ol>
<li>First thing</li>
<li>Second thing</li>
<li>Third thing</li>
</ol>Sonuç:
- İlk şey
- İkinci şey
- Üçüncü şey
"Tür" özelliği, tarayıcıya liste öğeleri için hangi tür simgenin kullanılacağını söylemenizi sağlar. Listeyi aşağıdaki gibi gösterilen sembolle görüntülenecek şekilde ayarlayarak "1," "A", "a" "I" veya "i" olarak ayarlanabilir:
Kod:
<ol type="A">15. <ul>
Sırasız liste, sıralı muadilinden çok daha basittir. Bu sadece madde imli bir liste.
Kod:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>Sonuç:
- İlk eşya
- İkinci öğe
- Üçüncü öğe
16. <table>
Biçimlendirme için tabloları kullanmak hoş karşılanmazken, sayfanızdaki bilgileri bölümlere ayırmak için birçok kez satır ve sütun kullanmak isteyebilirsiniz. Bir tablonun çalışması için birkaç etiket gereklidir. Örnek HTML kodu şöyledir:
Kod:
<table>
<tbody>
<tr>
<th>1st column</th>
<th>2nd column</th>
</tr>
<tr>
<td>Row 1, column 1</td>
<td>Row 1, column 2</td>
</tr>
<td>Row 2, column 1</td>
<td>Row 2, column 2</td>
</tbody>
</table><table> ve </table> etiketleri tablonun başlangıcını ve sonunu belirtir. <tbody> etiketi, tüm tablo içeriğini içerir.
Tablonun her satırı bir <tr> etiketi içine alınır. Her satırdaki her hücre, sütun başlıkları için <th> etiketlerine veya sütun verileri için <td> etiketlerine sarılır. Her satırdaki her sütun için bunlardan birine ihtiyacınız var.
Sonuç:
| 1. sütun | 2. sütun |
|---|---|
| 1. satır, 1. sütun | Satır 1, sütun 2 |
| 2. satır, 1. sütun | 2. satır, 2. sütun |
17. <blockquote>
Başka bir web sitesi veya kişiden alıntı yaparken ve alıntıyı belgenizin geri kalanından ayırmak istiyorsanız, blok alıntı etiketini kullanın. Yapmanız gereken tek şey, blok alıntı etiketlerini açıp kapatarak alıntıyı eklemek:
Kod:
<blockquote>The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.</blockquote>Sonuç:
Kullanılan tam biçimlendirme, kullandığınız tarayıcıya veya sitenizin CSS'sine bağlı olabilir. Ancak etiket aynı kalır.
Son düzenleme:
Konu Sahibi
Konu Sahibi
