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 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.

mansur tekçi 03/01/2020

html linki nasl alabilirim

yönetici 06/01/2020

Mansur, seo için link almak bunlarla uğraşma kaliteli içeriklerin varsa senin siteyi google görecektir. Dünyanın en iyi sitesinden linkte alsan kaliteli içerik yoksa google görmeyecektir.

songül 15/04/2020

img src ile resim atayamıyorum neden olabilir acaba resmi klasöre de aldım masaüstü de yaptım görmüyor.

yönetici 15/04/2020

Songül, HTML resim ekleme konusuna bak.

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

KATEGORİ

HTML
CSS
PHP
JQUERY
PHOTOSHOP
JavaScript
Web Dünyası
Linux
MİTHRİL FRAMEWORK
Laravel
Git
React

POPÜLER MAKALE

HTML LİNK(Bağlantı)EKLEME - LİNK VERME
HTML YAZI VE RESİM ORTALAMA
HTML RESME LİNK VERME
HTML FORM OLUŞTURMA
CSS YATAY MENÜ YAPIMI
HTML RESİM EKLEME
CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
HTML DİV ve SPAN NEDİR?
HTML ARKAPLANA MÜZİK EKLEME
KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME

ETİKET