Menu Position

Style Color

Box Style

Theme Color

Samet KAYA

HTML Kodları İle Web Sayfalar İçin Basit İşlemler

Ana Sayfa Blog Listesi 30 Kasım 2019
HTML Kodları İle Web Sayfalar İçin Basit İşlemler

Bu yazıda, HTML kodlamanın tüm temel özelliklerini ele alacağız. HTML'de kodlamaya başlarken dikkate almamız ve eklememiz gereken çeşitli etiketler var. Bu etiketler, komut dosyası veya web sayfalarımızdaki öğelerin düzenlenmesine ve temel biçimlendirilmesine yardımcı olur. Bu adım adım prosedürler, HTML yazma sürecinde size yol gösterecektir.

Aşağıda, tüm belgeyi head, body vb. Gibi çeşitli bölümlere ayıran temel HTML etiketleri verilmiştir.

  • Aşağıda, tüm belgeyi head, body vb. Gibi çeşitli bölümlere ayıran temel HTML etiketleri verilmiştir.
  • 	
    	<!DOCTYPE html>	
    	
    	
  • <html> : Her HTML kodunun temel HTML etiketleri arasına alınması gerekir. web sayfası <html> etiketi ile başlar </html> Kapanış etiketi ile biter.
  • <head> : Web sayfası veya belgenin tüm başlık bilgilerini, sayfanın adı ve diğer çeşitli bilgiler gibi içeren bir sonraki başlık etiketi gelir. Bu bilgiler, <head> ile açılan ve </head> ile biten baş etiketi içine alınır .
  • <title>: Bir web sayfasının başlığını <title> etiketini kullanarak söyleyebiliriz . Bu bir başlık bilgisidir ve bu nedenle başlık etiketleri içinde belirtilmiştir. Etiket <title> ile başlar ve </title> ile biter.
  • <body>: Bir sonraki adım, şu ana kadar öğrendiğimiz tüm etiketlerin en önemlisidir. Gövde etiketi, sayfanın tüm kullanıcılar tarafından görülebilecek gerçek gövdesini içerir. Bu açılır <body> ve biter </body>. Bu etiketin içinde yer alan her içerik, web sayfasında, yazılar veya görüntüler veya sesler veya videolar veya hatta bağlantılar şeklinde gösterilecektir. Daha sonra, çeşitli etiketleri kullanarak söz konusu içerikleri web sayfalarımıza nasıl ekleyebileceğimizi göreceğiz.

Kodun bütün şekli şöyle görünecektir:


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Deneme</title>
</head>
<body>
	
</body>
</html>	


Bu kod hiçbir şey göstermez. Sadece HTML kodunun nasıl yazılacağının temel desenini gösterir ve sayfanın başlığını Deneme olarak adlandırır .

HTML Başlıkları

Bu etiketler, bir web sayfasının içeriğine başlık vermemize yardımcı olur. Bu etiketler çoğunlukla <body> etiketinin içine yazılır. HTML bize <h1> ile <h6> arasındaki altı başlık etiketi sunar. Her etiket başlığı farklı bir stil ve yazı tipi boyutunda görüntüler.


<h1>Birinci Başlık</h1>

<h2>İkinci Başlık</h2>

<h3>Üçüncü Başlık</h3>

<h4>Dördüncü Başlık</h4>

<h5>Beşinci Başlık</h5>

<h6>Altıncı Başlık</h6>

ÇIKTI:

html başlıklar
HTML Paragrafı

HTML dilinde en çok kullanılan Etiketlerden biride parağraf etiketleridir. Parağrafımızı <p> Etiketi ile başlatırız </p> sonlandırırız. Tarayıcılar otomatik olarak parağraf öncesi ve sonrasında boş bir satır ekler.


<p> Birinci parağraf yazısı.......</p>
<p> İkinci paragraf yazısı.......</p>

ÇIKTI:

Birinci parağraf yazısı.......

İkinci paragraf yazısı.......

HTML Yatay Çizgiler

<hr> etiketi sayfanın sağ tarafından sol tarafa doğru yatay bir çizgi yardımıyla yatay marjlarını oluşturarak çeşitli bölgelerine sayfayı kırmak için kullanılır. Bu aynı zamanda boş bir etikettir ve herhangi bir ek ifade almaz.


<p>Bu bir paragraf yazısıdır</p>
<hr>
<p>Bu ikinci parağraf yazısıdır</p>

ÇIKTI:

Bu bir paragraf yazısıdır


Bu ikinci parağraf yazısıdır

HTML Resimler

HTML belgemize resim eklemek için <img> etiketinden yararlanırız. Seçtiğimiz resmin gif, jpg veya png formatında olması zorunluluğu dışında herhangi bir kısıtlama yoktur.

HTML'de resim eklemek için <img src="Resmin yolu"/> kod bloğundan faydalanıyoruz. Bir resmi göstermek istiyorsak, o resimin adresini src="..." parametresiyle belirtmemiz gerekir.


<img src="manzara.jpg"/>

HTML Bağlantı Ekleme - Link verme

Bir HTML belgesinde link(bağlantılar)verme işlemini <a> Etiketi ile yapmaktayız. <a> Etiketi bir adres belirterek başka sitelere sayfalara yada aynı sayfanın farklı bölümlere bağ vermek ,resimlere link verme veya eposta adresimize link veririz.

siteye link verme


<a href="http://www.google.com">GOOGLE GİDER</a>

Sitenin içindeki html sayfasına link verme


<a href="index.html">ANASAYFA'YA GİDER</a>

HTML Düğmeleri

HTML düğmeleri şu <button> etiketle tanımlanmıştır :


<button>Click me</button>

HTML LİSTELER

HTML sayfalarında farklı biçimlerde liste yapılabilir. HTML dilinde değişik liste seçenekleri bulunmaktadır. Bunlar:

Numaralı veya sıralı listeler (satır başlarında sıralı numaraları vardır)

İşaretli veya sırasız listeler (satır başlarında özel bir karakter vardır)

Numaralı Listeler <ol> etiketi ile başlar ve </ol> etiketi ile biter. Liste maddelerini belirtmek için <li> etiketi kullanılır.

Numara Listelere örnek:


<ol>

 <li>Muz</li>

 <li>Kiraz</li>

 <li>Portakal</li>

 <li>Elma</li>

</ol>

ÇIKTI:

Numarasız Listeler <ul> etiketi ile başlar ve </ul> etiketi ile biter. Liste maddeleri yine <li> etiketi ile başlar.


<ul>

 <li>Muz</li>

 <li>Kiraz</li>

 <li>Portakal</li>

 <li>Elma</li>

</ul>

ÇIKTI:

Leave a comment