10 Dakikada Öğrenebileceğiniz 17 HTML Kodu | editorcum

10 Dakikada Öğrenebileceğiniz 17 HTML Kodu

Modern web siteleri genellikle kullanıcı dostu arayüzlerle oluşturulsa da, bazı temel HTML kodlarını bilmek faydalıdır. Aşağıdaki 17 HTML etiketini biliyorsanız, sıfırdan temel web sayfası oluşturabilir veya WordPress gibi uygulama tarafından oluşturulan kodu çözümleyebilirsiniz.

1. <! DOCTYPE html> ;

Oluşturduğunuz her HTML belgesinin başında bu etikete ihtiyacınız olacak. Tarayıcının HTML okuduğunu ve en son sürüm olan HTML5’i beklediğini bilmesini sağlar.

2. <html> ;

Tarayıcıya HTML okuduğunu söyleyen başka bir etikettir. <html> etiketi, DOCTYPE etiketinden hemen sonra gider ve hemen dosyanızın sonunda </html> etiketi ile kapatırsınız. Belgenizdeki her şey bu etiketler arasında gider.

3. <head> ;

<head> etiketi, dosyanızın başlık bölümünü ifade eder. Buraya giren şeyler web sayfanızda görünmüyor. Bunun yerine, arama motorları için meta veriler ve tarayıcınız için bilgiler içerir.

4. <title> ;

Bu etiket sayfanızın başlığını belirler. Yapmanız gereken tek şey, başlığınızı etikete koymak ve kapatmak.

Tarayıcıda sekme başlığı olarak görüntülenecek ad budur.

5. <meta> ;

Başlık etiketi gibi, meta veriler de sayfanızın başlık alanına yerleştirilir. Meta veriler öncelikle arama motorları tarafından kullanılır ve sayfanızda neler olduğu hakkında bilgilerdir. Çok sayıda farklı meta alan var, ancak bunlar en çok kullanılanlardan bazıları:

  • Description: Sayfanızın temel açıklamasıdır.
  • Keywords : Sayfanızın anahtar kelime seçimini yapar.
  • Author : Sayfanızın yazarı.
  • Wiewport : Sayfanızın tüm cihazlarda iyi görünmesini sağlar.

“Viewport” etiketi, sayfanızın mobil ve masaüstü cihazlarda iyi görüntülendiğinden emin olmak için her zaman “width = device-width, initial scale = 1.0” değerine sahip olmalıdır.

6. <body> ;

Başlık bölümünü kapattıktan sonra gövdeye ulaşırsınız. <body> etiketiyle açın ve </body> etiketiyle kapatın. Dosyanızın sonunda, </html> etiketinden hemen önce gider. Web sayfanızın tüm içeriği bu etiketlerin arasına girer.

7. <h1> ;

<h1> etiketi sayfanızda bir seviye üst bilgiyi tanımlar. Bu genellikle başlık olacak ve ideal olarak her sayfada sadece bir tane olacak. <h2>, bölüm başlıkları, <h3> seviye üç alt başlıkları gibi ikinci düzey başlıkları ve <h6> değerine kadar olanları tanımlar.

8. <p> ;

Paragraf etiketi yeni paragrafa başlar. <p>, genellikle iki satır sonu ekler. Örneğin, önceki satır ile bunun arasındaki kesime bakın. <p> etiketinin yaptığı budur.

9. <br> ;

Satır sonu etiketi, tek satır sonu ekler:

10. <strong> ;

Bu etiket önemli metni tanımlar. Genel olarak, kalın olacağı anlamına gelir. Ancak, <strong> metnin farklı görünmesini sağlamak için CSS kullanmak mümkündür. Bununla birlikte, <strong> kalın yazı yazmak için kullanabilirsiniz.

11. <em> ;

<b> , <strong> gibi, <em> ve <i> birbiriyle ilgilidir. <em> etiketi vurgulanan metni tanımlar; genellikle italik hale geleceği anlamına gelir. Yine, CSS’nin farklı metin gösterimini vurgulama olasılığı vardır.

<i> etiketi hala çalışıyor, ancak yine de, gelecek HTML sürümlerinde kullanımdan kaldırılması mümkündür.

12. <a> ;

<a> etiketi, bağlantılar oluşturmanıza olanak sağlar. Basit bağlantı şuna benzer:

“href” niteliği, bağlantının hedefini tanımlar. Çoğu durumda, hedef bağlantı web sitesi olur. Bazı durumlarda resim veya PDF gibi bir dosya da olabilir.

Diğer faydalı özellikler arasında “target” ve “title” bulunur. Hedef özellik, yalnızca aşağıdaki gibi yeni sekmede veya pencerede bağlantı açmak için kullanılır:

“Title” niteliği bir araç ipucu oluşturur.  Mause ile link üzerine gelindiğinde açıklama gösterir.

13. <img> ;

Sayfanıza resim yerleştirmek istiyorsanız, resim etiketini kullanmanız gerekir. Normalde “src” niteliği ile birlikte kullanırsınız. Görüntünün kaynağını şöyle belirtir:

“Height”, “width” ve “alt” gibi diğer özellikler de kullanılabilir.

Beklediğiniz gibi, “height” ve “width” nitelikleri görüntünün yüksekliğini ve genişliğini belirler. Genel olarak, görüntüyü doğru şekilde ölçeklendirmek için yalnızca birini ayarlamak iyi fikirdir. Her ikisini de kullanırsanız, uzatılmış veya kırpılmış görüntü elde edebilirsiniz.

Alt” etiketi, tarayıcıya, resim gösterilmediğinde hangi metni göstereceğini belirtir ve herhangi bir resme dahil etmek iyi fikirdir. Birisi özellikle yavaş bağlantıya veya eski tarayıcıya sahipse, resimle ilgili fikir sahibi olabilir.

14. <ol> ;

<ol>, etiketi sıralı liste oluşturmanıza olanak sağlar. Genel olarak, bu numaralandırılmış liste alacağınız anlamına gelir. Listedeki her öğenin <li> etiketine ihtiyacı vardır, bu nedenle listeniz şöyle görünecektir:

“Type” niteliği, tarayıcıya liste öğeleri için hangi tür sembollerin kullanılacağını söylemenizi sağlar. “1”, “A”, “a”, “I” veya “i” olarak ayarlanabilir ve listeyi aşağıdaki gibi gösterilen sembolle gösterecektir:

15. <ul> ;

Sadece madde imli liste oluşturmamıza yardımcı olur.

Sırasız listelerde ayrıca “type” öznitelikleri vardır ve bunu “disc”, “circle” veya “square” olarak ayarlayabilirsiniz.

16. <table> ;

Sayfanızdaki bilgileri bölümlere ayırmak için satırları ve sütunları kullanmak isteyeceğiniz birçok zaman vardır. Tablonun çalışması için birkaç etikete ihtiyaç vardır. İşte örnek HTML kodu:

<table> </table> etiketleri, tablonun başlangıcını ve sonunu belirtir. <tbody> etiketi tüm tablo içeriğini içerir.

Tablonun her satırı <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 vardır.

17. <blockquote> ;

Başka web sitesinden veya kişiden alıntı yaparken ve belgenizin geri kalanından ayırmak istediğinizde blockquote etiketini kullanın. Yapmanız gereken tek şey, blockquote etiketleri açıp kapatırken alıntıyı içine almaktır:

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir