14/01/2026

HTML Nedir? HTML Kodları İle Neler Yapılabilir?

goblinkral28@gmail.com326 mins
html nedir html kodları

 

Bu makalemizde web geliştirmeye yeni başlayan
kişilerin sıkça sorduğu bir soru olan HTML nedir konusundan
bahsedeceğiz. HTML yani Hyper Text Markup Language internet sitelerini
oluşturmak için kullanılan en temel işaretleme dilidir.  Yalnızca HTML kodları kullanarak
dinamik bir kullanıcı programı oluşturmak mümkün değildir.  Bu nedenle HTML bir programlama dili olarak
yorumlanmamalıdır.  Web sitesi oluşturmak
için temel olan metin, görsel ya da video içeriklerinin birbirlerine
bağlanmasını ve etkili bir biçimde çalışabilmesini sağlamak amacıyla html dili
kullanılmaktadır. HTML yapısı ve kodları nasıl kullanılır detaylı bir şekilde
inceleyelim.

HTML Kodları İçin İskelet Yapı
HTML Kodları İle Neler Yapılabilir?
HTML Renk Kodları

HTML Etiketleri ve Görevleri
HTML Paragraf ve Boşluk Bırakma Kodu
Başlıklar ve Alt Başlıklar
Anchor Text Oluşturma
Resim Dosyası Ekleme
Stil Özelliği Tanımlamak
Biçim Özellikleri Eklemek
HTML Kodları Alıntılama
HTML Yorum Alanı Oluşturma
HTML Kodları İle Tablo Oluşturma
HTML ile Emoji Oluşturmak
HTML Kodları ile Form Oluşturmak
Formlara Özellik Tanımlaması
Form Ögeleri

HTML
Kodları İçin İskelet Yapı

Google Chrome, Firefox ya da Opera gibi
internet tarayıcıları bir web sayfasını yüklerken ilk olarak arka planda
çalışan html yapısını dikkate alır.  Web
sayfalarının başlığı veya açıklamaları bu kodlar ile kullanıcılara gösterilir.
Bir html bloğu şu şekilde oluşturulur:

1-
<!DOCTYPE html>

2-
<html>

3-
<head>

4-
<title>Sayfanızın
Başlık Alanı</title>

5-
</head>

6-
<body>

7-
<h1>En Büyük
Başlık</h1>

8-
<p>Bu alan
paragraf alanıdır. </p>

9-
</body>

10-</html> 

HTML blokları etiketler aracılığıyla
oluşturulur ve her etiket <…/> şeklinde kapatılarak ayrı bir bloğa
geçilir. Yukarıdaki örnekte gösterilen yapının anlamları şu şekildedir:

1-      Oluşturulan doküman tipinin HTML olarak
işlenmesi gerektiğini bildirir.

2-      Tüm head ve body etiketlerinin yazılacağı en
geniş bloktur.

3-      Kullanıcıların görmediği, sayfanın iç
yapısının oluşturulduğu bölümdür.

4-      Web sayfanızın sekmelerde görünen başlığıdır.

5-      Head etiketinin sona erdiğini bildirmek için
kullanılır.

6-      Kullanıcıların görüntüleyeceği metinler,
görseller ya da videolar bu alan içerisinde tanımlanır

7-      H1  en
büyük yazı başlığıdır. En küçük başlık ise H6 etiketi ile oluşturulur.

8-      Paragrafın başladığını bildirir ve metinler
bu  alan üzerinde oluşturulur.

9-      Kullanıcıların görüntüleme alanının sona
erdiğini bildirmek için kullanılır.

10-  Html yapısının sona erdiğini bildiren
etikettir.

HTML
Kodları İle Neler Yapılabilir?

  • Web
    sayfasına metin, görsel ya da video eklenebilir
  • Yazıların
    boyutları ve tipi belirlenebilir
  • Farklı
    içerikler için grid yapıları oluşturulabilir
  • Daha
    sonra CSS dili üzerinde değişiklikler yapmak üzere class ve id yapıları
    oluşturulabilir
  • Div
    kodları aracılığıyla farklı yapıdaki etiketler bir arada gösterilebilir
  • Basit
    bir web sayfasının arayüzü hazırlanabilir

HTML
Renk Kodları

HTML renk kodları ,  W3
standartlarında oluşturulan ve tüm tarayıcıların algılayabildiği hex  kodlarıdır. CSS ile birlikte bir sayfanın
görünümünü değiştirmek için temel olarak en çok kullanılan renk kodları
aşağıdaki gibidir.

Kırmızı
ve Tonları

Renk İsmi

Görünümü

Hex Kodu

Red

#FF0000

Darkred

#8B0000

Firebrick

#B22222

Crimson

#DC143C

IndianRed

#CD5C5C

LightCoral

#F08080

DarkSalmon

#E9967A

Salmon

#FA8072

LightSalmon

#FFA07A

 

Mavi
ve Tonları

Renk İsmi

Görünümü

Hex Kodu

Blue

#0000FF

MediumBlue

#0000CD

DarkBlue

#00008B

Navy

#000080

MidnightBlue

#191970

LightSteelBlue

#B0C4DE

PowderBlue

#B0E0E6

LightBlue

#ADD8E6

SkyBlue

#87CEEB

LightSkyBlue

#87CEFA

DeepSkyBlue

#00BFFF

DodgerBlue

#1E90FF

CornFlowerBlue

#6495ED

SteelBlue

#4682B4

RoyalBlue

#4169E1

 

Siyah
ve Gri Tonları

Renk İsmi

Görünümü

Hex Kodu

Black

#000000

Gainsboro

#DCDCDC

LightGray

#D3D3D3

Silver

#C0C0C0

DarkGray

#A9A9A9

Gray

#808080

DimGray

#696969

LightSlateGray

#778899

SlateGray

#708090

DarkSlateGray

#2F4F4F

 

Beyaz
ve Tonları

Renk İsmi

Görünümü

Hex Kodu

White

#FFFFFF

Snow

#FFFAFA

Honeydew

#F0FFF0

MintCream

#F5FFFA

Azure

#F0FFFF

AliceBlue

#F0F8FF

GhostWhite

#F8F8FF

WhiteSmoke

#F5F5F5

SeaShell

#FFF5EE

Beige

#F5F5DC

OldLace

#FDF5E6

FloralWhite

#FFFAF0

Ivory

#FFFFF0

AntiqueWhite

#FAEBD7

Linen

#FAF0E6

LavenderBlush

#FFF0F5

MistyRose

#FFE4E1

 

Sarı
ve Tonları

Renk İsmi

Görünümü

Hex Kodu

Yellow

#FFFF00

LightYellow

#FFFFE0

LemonChiffon

#FFFACD

LightGoldenRodYellow

#FAFAD2

PapayaWhip

#FFEFD5

Moccasin

#FFE4B5

PeachPuff

#FFDAB9

PaleGoldenRod

#EEE8AA

Khaki

#F0E68C

DarkKhaki

#BDB76B

Gold

#FFD700

 

Kahverengi
ve Tonları

Renk İsmi

Görünümü

Hex Kodu

Brown

#A52A2A

Cornsilk

#FFF8DC

BlanchedAlmond

#FFEBCD

Bisque

#FFE4C4

NavajoWhite

#FFDEAD

Wheat

#F5DEB3

BurlyWood

#DEB887

Tan

#D2B48C

RosyBrown

#BC8F8F

SandyBrown

#F4A460

GoldenRod

#DAA520

DarkGoldenRod

#B8860B

Peru

#CD853F

Chocolate

#D2691E

SaddleBrown

#8B4513

Sienna

#A0522D

Maroon

#800000

 

Pembe  ve Tonları

Renk İsmi

Görünümü

Hex Kodu

Pink

 

#FFC0CB

Light Pink

 

#FFB6C1

Hot Pink

 

#FF69B4

Deep Pink

 

#FF1493

PaleVioletRed

 

#DB7093

MediumVioletRed

 

#C71585

 

Yeşil
ve Tonları

Renk İsmi

Görünümü

Hex Kodu

Green

#008000

ForestGreen

#228B22

DarkGreen

#006400

DarkOliveGreen

#556B2F

Olive

#808000

OliveDrab

#6B8E23

YellowGreen

#9ACD32

LimeGreen

#32CD32

Lime

#00FF00

LawnGreen

#7CFC00

Chartreuse

#7FFF00

GreenYellow

#ADFF2F

SpringGreen

#00FF7F

MediumSpringGreen

#00FA9A

LightGreen

#90EE90

PaleGreen

#98FB98

DarkSeaGreen

#8FBC8F

MediumAquaMarine

#66CDAA

MediumSeaGreen

#3CB371

SeaGreen

#2E8B57

 

Turuncu
ve Tonları

Renk İsmi

Görünümü

Hex Kodu

Orange

#FFA500

OrangeRed

#FF4500

Tomato

#FF6347

Coral

#FF7F50

DarkOrange

#FF8C00

 

 

Mor
ve Tonları

Renk İsmi

Görünümü

Hex Kodu

Purple

#800080

DarkMagenta

#8B008B

Lavender

#E6E6FA

Thistle

#D8BFD8

Plum

#DDA0DD

Violet

#EE82EE

Orchid

#DA70D6

Fuchsia

#FF00FF

MediumOrchid

#BA55D3

MediumPurple

#9370DB

BlueViolet

#8A2BE2

DarkViolet

#9400B3

DarkOrchid

#9932CC

Indigo

#4B0082

DarkSlateBlue

#483D8B

SlateBlue

#6A5ACD

MediumSlateBlue

#7B68EE

 

Cam
Göbeğinin Tonları

Renk İsmi

Görünümü

Hex Kodu

Cyan

#00FFFF

LightCyan

#E0FFFF

PaleTurquoise

#AFEEEE

AquaMarine

#7FFFD4

Turquoise

#40E0D0

MediumTurquoise

#48D1CC

DarkTurquoise

#00CED1

LightSeaGreen

#20B2AA

CadetBlue

#5F9EA0

DarkCyan

#008B8B

Teal

#008080

 

HTML
Etiketleri ve Görevleri

HTML
Paragraf ve Boşluk Bırakma Kodu

Html
boşluk kodu ,  yanyana yazılan yazıların farklı satırlarda
görüntülenebilmesini sağlar. Kullanımı şu şekildedir:

<p>
İlk Cümle </p> <br/>

<p>
İkinci Cümle </p>

Başlıklar
ve Alt Başlıklar

HTML
başlıkları büyüklüklerine göre 6 etiketle kullanılır.

<h1>En
Büyük Başlık</h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6>En
Küçük Başlık</h6>

Anchor
Text Oluşturma

Bir
metin üzerinden harici ya da dahili linkleme yapmak için html dilinde <a
href yapısı kullanılır.  Örneğin:

<a href=”https://makaleplatformu.blogspot.com”>Ana Sayfa</a>

Resim
Dosyası Ekleme

Sayfanıza
.jpg , .png ya da benzeri formatlı resim dosyalarını yüklemek için  <img>  etiketinden sonra src özelliği (attribute)
kullanılmaktadır. Kullanımı şu şekildedir:

<img src=”eklenecek-olan-resim.jpg”>

Eklemiş
olduğunuz resim dosyasına boyut özelliği eklemek için  width= “100px” (Genişlik)    , height=”150px”
(Yükseklik) parametrelerini kullanabilirsiniz.

Stil
Özelliği Tanımlamak

HTML kodları  ile
oluşturduğunuz sayfa yapısının görünümünü değiştirmek için style  özellikleri verebilirsiniz.  Örnek vermek gerekirse 2 adet başlığınız var.
Fakat bunları birbirinden ayırmak için
ilk başlığın rengini kırmızı , ikinci başlığın rengini ise yeşi yapmak
istiyorsanız şu kodları kullanabilirsiniz:

<h1 style=”color:red;”> İlk Başlık </h1>
<h2 style=”color:green;”> İkinci Başlık </h2>

Biçim
Özellikleri Eklemek

Makale içeriklerini ya da başlıklarını
vurgulamak ya da niteliklerini arttırmak için biçimlendirme etiketleri
kullanılmaktadır.  Bu etiketler:

  1. <b>
    :     Yazıyı daha kalın
    olarak göstermek için kullanılmaktadır.
  2. <strong>
    :     2 içeriği
    birbirinden ayırmak, önemli olanı ortaya çıkarmak için kullanılan etikettir. Yazı,
    kullanıcıya kalın bir şekilde gösterilir.
  3. <i>
    :     Yazının yana eğik
    bir biçimde görünmesini sağlar. Genellikle makale, kitap veya dergi gibi
    akademik alanlarda  kullanılmaktadır.
  4. <em>
    :     Bir cümle içerisinde
    vurgu oluşturmak için ilgili kelimeye yerleştirilen etikettir.
  5. <mark>
    :     Metinlerin üstünü
    işaretlemek için kullanılan etikettir. Görünümü
    şu şekildedir:
  6. Web
    geliştirme için kullanılan başlıca diller HTML, CSS ve JavaScript’tir.
  7. <small>
    :      Küçük metinler oluşturmak için kullanılan
    etikettir. Genellikle yazıların dipnot alanlarında tercih edilmektedir.
  8. <del>
    :     Metnin üzerinde
    hata yapıldığında üzerinin çizilmesini ve doğru ifadenin gösterilmesini sağlar. 
  9. <ins>
    :     Metin eklemesi yapıldığı
    durumlarda kullanılan etikettir. Web tarayıcıları eklenen yeni metinlerin
    altını çizerek göstermektedir.
  10. <sub>:
    Sub etiketi ile birlikte kullanılan metinler,
    diğer yazıların altında küçük metin olarak görüntülenir. Formüllerde sıkça
    kullanılan bir etikettir. Örneğin:  H2O
    ,  H2SO4
  11. <sup>  : Sup
    etiketi üst metin oluşturmak için kullanılmaktadır Genellikle dipnotlarda
    kullanılır.. Örneğin : 1 Bu metin A kaynağından alınmıştır.

HTML
Kodları Alıntılama

Alıntı
ögeleri oluşturmak için 6 etiket kullanılabilir. Bunlar:

  • <blockquote>
    :      Bu etiket içerisine alınan alıntılar tarayıcılar
    tarafından girinti şeklinde gösterilir.
  • <q>
    :     Blockquote
    etiketine göre daha kısa alıntılarda kullanılan etikettir. Genellikle 1 ya da 2
    cümlelik alıntıları, tırnak işaretiyle göstermek için <q> etiketi
    kullanılır
  • <abbr>
    :     Uzun başlıkları kısaltmak
    için kullanılan etikettir. Örneğin Türk Hava Kurumu için şu kod yapısı
    kullanılabilir:

<p> <abbr title=”World Health Organization”>THY</abbr> 20 Mayıs 1933 tarihinde kuruldu. </p>

Web tarayıcısında THY metni vurgulu
şekilde gösterilir ve üzerine fare ile gelindiğinde Türk Hava Yolları metni görünür.

  • <address>
    :     Adres belirtirken
    kullanılan bu etiket ile oluşturulan yapı, web tarayıcılarında italik olarak
    gösterilir. Tarayıcılar her bir ögenin önüne ve arkasına satır boşluğu bırakarak
    daha temiz görünüm oluşmasını sağlar.
  • <cite>
    :     Kitap veya tablo
    gibi eserlerde kullanılan bu etiket ile ilgili metin italik olarak gösterilir.
  • <bdo>
    :     Etiket içerisine
    alınan metnin ters bir biçimde yazılmasını sağlar. Örneğin:

<bdo dir=”rtl”>Web Sitesine Hoşgeldiniz </bdo>   kod yapısının çıktısı şu şekildedir:

ZinidlegşoH enisetiS beW

HTML Yorum Alanı Oluşturma

Yorum
alanları yalnızca geliştiriciler tarafından görüntülenir, kullanıcılar bu
alanları sayfa içinde görüntüleyemez. HTML’de yorum alanları şu şekilde
oluşturulur:

<!–Burası Yorum Alanıdır –>

HTML Kodları ile Tablo Oluşturma

Tablo oluşturmak için kullanılan HTML kodları
şu şekildedir:

<tr>

<th>İsim Soyisim</th>

<th>Mail </th>

<th>Yaşadığı Ülke</th>

</tr>

<tr>

<td>Ayşe Yılmaz</td>

<td>ayseyilmazmailadresi@gmail.com</td>

<td>Türkiye</td> 

</tr>

Oluşturulan tablo şu şekilde görünür:

İsim
Soyisim

Mail

Yaşadığı
Ülke

Ayşe Yılmaz

ayseyilmazmailadresi@gmail.com

Türkiye

 

HTML
ile Emoji Oluşturmak

UTF-8
karakter kodlamasında geçerli olan, tarayıcıların algılayabileceği bazı
emojiler ve kodları şu şekildedir:

🗻      🗻

🗼       🗼

🗽        🗽

🗾       🗾

🗿        🗿

😀      😀

😁      😁

😂      😂

😃      😃

😄      😄

😅      😅

HTML
Kodları ile Form Oluşturmak

HTML
kodları  ile basit bir kullanıcı formu şu şekilde
oluşturulmaktadır:

<h1> Oturum
Aç </h1>

<form action=”/session_page.php”>

<label for=”kullaniciadi“>Kullanıcı Adı :</label><br>

<input type=”text” id=“kullaniciadi”  name=“kullaniciadi” value=“Makaleplatformu” <br>

  <label for=”sifre“>Şifre
: </label><br>

  <input type=“text” id=”sifre” name=“sifre” value=“********”><br><br>

  <input type=”gonder”
value=”Gönder”>

</form>

Formlara
Özellik Tanımlaması

_blank

Formun gönderilme işlemi yeni bir pencerede tamamlanır.

_self

Default değerdir. Mevcut pencere üzerinde işlem tamamlanır.

_parent

Form üst pencerede görüntülenir.

_top

Form yanıtı tüm pencerede gösterilir.

framename

Form yanıtı bir iç çerçeve üzerinde gösterilir.

 

Form
Ögeleri

Kullanıcılara
farklı özelliklerde formlar sunmak için aşağıdaki etiketlerden yararlanabilirsiniz:

  1. <input>
    :      En yaygın kullanımdır. Metin formları
    oluşturmak için kullanılmaktadır.
  2. <label>
    :     Kullanıcıların yaptıkları seçimlerde radiobox ya da checkbox
    kutularının otomatik olarak işaretlenebilmesini sağlayan yapıdır.
  3. <select>
    :      Açılabilir
    liste ile kullanıcılara seçim yaptırmak üzerine oluşturulan formlarda select
    ifadesi kullanılır.
  4. <textarea>
    :     Geniş bir metin
    kutusu oluşturmak için kullanılan etikettir.
  5. <button>
    :     Kullanıcıların
    gönderim işlemleri yaptığı elementtir. “Gönder” gibi metinler bu butonlara
    bağlanarak kullanıcıların harekete geçmesi sağlanır.
  6. <fieldset>
    :     Form yapıları
    içerisinde kullanıcıların belirli özelliklerini gruplandırmak için kullanılan
    etikettir.
  7. <legend>
    :     Fieldset yapısı
    için gruplama başlığı belirleyen etikettir.
  8. <datalist>
    :      Kullanıcıların
    açılır liste içerikleri arasından seçim yapabilmesini sağlayan etikettir.
  9. <output>
    :      Hesaplama
    sonuçlarını göstermek için kullanılan etikettir.
  10. <option>
    :      Açılır
    liste seçeneklerinin sunulduğu etikettir.
  11. <optgroup>
    :     Açılır listede
    çeşitli gruplar arasından seçim yapılmasını sağlar.

3 thoughts on “HTML Nedir? HTML Kodları İle Neler Yapılabilir?”

  2. ALL RIGHT. The following may not even look to be relevant, then again my very own living experience is legitimate.
    I’m a Prenatal Massage specialist. I consult diverse women of
    all ages every shift and help people to enjoy a much less taxing, even more pleasurable,
    and significantly less symptomatic pregnancy. Each human being presents with different concerns.
    maternity spa NJ addresses this, and yet being a
    consultant I have to always be adaptive and in a position to check to
    see the way to most beneficially offer assistance.
    Now there is certainly no case study where a single remedy might
    benefit almost everyone. Which is my point, yet unfortunately my personal manner of sharing could
    be unclear. Serious pain in the lower back is simply not all the details of which a mother-to-be tackles.
    Moreover, simply no class of folks always experience hardships in the same manner, and to assist
    all of them, therapists must always be awesome listeners.

    Yanıtla

  3. hi!,I really like your writing very so much! percentage we communicate
    more about your post on AOL? I require a specialist in this house to unravel my
    problem. May be that’s you! Taking a look ahead to look you.

    Yanıtla

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Benzer Makaleler