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.

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:

M. efe ayaz 12/11/2019

Acaba tam Bir kod dizimi yaparmısınız?

yönetici 14/11/2019

Efe, şurda örnek var. HTML web sitenin iskeletidir, css'de öğrenmen gerek, Webcebir.com sitesindeki HTML ve CSS konularını incele.
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

7104

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML RESİM EKLEME
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.