basit html kodları

Blog tasarım

15 Adet Basit HTML Kodları

1 Nis , 2017  

Hızlıca öğrenebileceğiniz Basit HTML Kodları

Birçok web sitesinin kodlanması html,css, java ve php’nin birleşiminden meydana geliyor. Bunlardan temel kodlama dili olan basit html kodları olan bu listeyi sizde bilseniz iyi olur. Temel html kodları ile sizde küçük ama etkili değişiklikleri sitenize de uygulayabilirsiniz.

Kısaca gösterilecek kodlarla ile yazınızda değişiklikler yapabilir gösterilen resim boyutunu değiştirebilirsiniz. Siteniz wordpress tabanlı bir platform ise bu kodları en azından okumanız gereklidir.

En azından kullandığınız web sitelerinde ne nedir gibi özellikleri öğrenmiş olursunuz. Bunlar tabi ki en temel ve basit html kodları.

Kısaca Basit Html Kodları;

<DOCTYPE html>

Bir tarayıcıya o kodların html kodu olduğunu bildirmek için bu kodu html sayfasının ilk sırasına yazılır. Bu şekilde tarayıcıya kodları hangi bilgisayar kodlama dilinde olduğunu göstermiş olursunuz. Ve bu biçim HTML son sürümü olan HTML5’in gösterim biçimidir.

<html>

Bu etiket ise html kodlarının dışında kalan yani tüm html sayfalarının ilk sırasında ve son sırasında bulunan koddur. Bir html sayfasına <html> ile başlanır yazılacak kodlar bundan sonra yazılır ve sonuna </html> yazılarak bitirilir.

<head> etiketi

Tarayıcıda ekranda görünmeyen ama arka planda çalışan kodların bulunduğu alandır. Buraya sitenin java dosyaları, css kodları vb. kodlar bulunur. Bu etiket te </head> ile bitirilir.

<title> etiketi

Bu etiket ise sekme adının ne olacağını belirlememize yardımcı olur. Bu sayede gösterilen alanın temelde ne olduğunu kısaca yazabiliriz. Resimde title’ın nerede göründüğü gösterilmiştir. Ve şu title etiketi şu şekilde kullanılır.

<head>

<title>Benim sitemin başlığı</title>

</head>

şeklinde kullanılır.

<meta> etiketi

Bu etiket ise yine arka planda kullanılır. Ve sitenizi tarayan botların sayfanızın veya sitenizin nasıl hangi konuda olduğunu kısaca gösterir. En temel kullanılanlar ise şöyle,

  • keywords sitenizde kullanılan anahtar kelimeleri temel olarak bu kısımda gösterilir.
  • description= site açıklaması bu kısma yazılır. Genelde çok kısa olur yani 160 karakteri geçmemesi önerilir.
  • author= Sitenizdeki yazarları bu kısımda yazabilirsiniz.
  • viewport= sitenizin html kodları tüm cihazlarda uyumlu olarak görünmesini sağlar.

Bunlar ise şu şekilde kullanılıyor;

 

<meta name="description" content="Site açıklaması">
<meta name="keywords" content="Web sitesinde kullanılan temel etiketler virgülle ayrılır.">
<meta name="author" content="Yazarlar">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Son kullanılan meta etiketi olan “viewport” bu şekilde kullanılmalıdır.

<body> etiketi

Bu etiket ise html kodlarının ekranda görülen kısmını içerir. Buraya yazılan tüm yazılar tarayıcı ekranında görülür.

Kullanımı ise şöyle;

<body>Bu kısımda okunan içerik bulunur</body>

 

<h1> etiketi

Bu etiket ise yazının başlığını göstermenizi sağlar. Her sayfada bir adet bulunmalıdır. H1 etiketleri 6 adettir. En büyük etiket ise h1 etiketidir. Makale de alt başlıklarda bu etiketler kullanılır. Kullanımı ise;

<h1> Başlık burada</h1>Diğer başlıklarda aynı şekilde h1,h2…h6 ya kadar kullanılır.

 

<p> etiketi kullanımı

Tarayıcılara paragraf kullandığınızı göstermek ve yazıların daha okunaklı olmasını sağlar. Kullanımı ise;

<p>Birinci paragraf</p><p>İkinci paragraf</p>

Çıktısı;

Birinci paragraf

İkinci paragraf

Ayrıca p etiketlerini içinde stil tanımlaması yaparak yazılar büyüklüklerini ve renklerini değiştrebilirsiniz.

<strong> etiketi

Eğer yazı içlerinde kalın ve daha siyah bir kelime grubu görüyorsanız bu html kodu kullanılmıştır. Kullanımı ise gayet basit;

<b>Önemli bir şey burası.</b>

Ekranda bu şekilde görünür;

Önemli bir şey burası.

 

<em> etiketi

Bunun anlamı yazıyı biraz daha eğik yazmanıza olanak sağlar. İtalik biçimi andırır.

<em> Vurgulanmak istenen kelime.</em>

Vurgulanmak istenen kelime.

<a> etiketi

Bir sayfaya veya başka bir siteye verilen bağlantıyı bu etiket ile sağlarız. Web site sahipleri bilirler kelime backlink de bu etiket ile alınır. href metası ile kullanılır.

<a href=http://bulutekno.com/ target=blank>Yeni bir sekmeye git.</a>

href a etiketi ile beraber kullanıldığında o kelime tıklandığında gidilecek hedefi belirler.

Kullanımı sonucunda;

Yeni bir sekmeye git.

<img> etiketi

Bu etiket fotoğraflarda kullanılır. Yani bir fotoğrafı gösterilmek istenen yere çağırmak için bu etiket ile bir src özelliği kullanılır.

<img src=”http://bulutekno.com/wp-content/uploads/2016/12/bulutekno-logo-1.png”>

Sonucunda ;

Yine bu resme istediğiniz yükseklik ve genişlik değerini atayabilirsiniz.

<img src=”http://bulutekno.com/wp-content/uploads/2016/12/bulutekno-logo-1.png” width=”250″ >

Sadece bir değeri yazmanız fotoğrafın yükseklik ve genişlik değerini korumanıza yardımcı olur. Eğer sadece yükseliği ayarlasanız tarayıcı otomatik olarak oranlayıp genişliği ayarlar. Bu genelde böyle kullanılır.

, , , ,


Bir Cevap Yazın

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