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ı
- Kırmızı ve Tonları
- Mavi ve Tonları
- Siyah ve Gri Tonları
- Beyaz ve Tonları
- Sarı ve Tonları
- Kahverengi ve Tonları
- Pembe ve Tonları
- Yeşil ve Tonları
- Turuncu ve Tonları
- Mor ve Tonları
- Cam Göbeğinin Tonları
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:
- <b>
: Yazıyı daha kalın
olarak göstermek için kullanılmaktadır.
- <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.
- <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.
- <em>
: Bir cümle içerisinde
vurgu oluşturmak için ilgili kelimeye yerleştirilen etikettir.
- <mark>
: Metinlerin üstünü
işaretlemek için kullanılan etikettir. Görünümü
şu şekildedir:
- Web geliştirme için kullanılan başlıca diller HTML, CSS ve JavaScript’tir.
- <small>
: Küçük metinler oluşturmak için kullanılan
etikettir. Genellikle yazıların dipnot alanlarında tercih edilmektedir.
- <del> : Metnin üzerinde hata yapıldığında üzerinin çizilmesini ve doğru ifadenin gösterilmesini sağlar.
- <ins>
: Metin eklemesi yapıldığı
durumlarda kullanılan etikettir. Web tarayıcıları eklenen yeni metinlerin
altını çizerek göstermektedir.
- <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
- <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:
- <input>
: En yaygın kullanımdır. Metin formları
oluşturmak için kullanılmaktadır.
- <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.
- <select>
: Açılabilir
liste ile kullanıcılara seçim yaptırmak üzerine oluşturulan formlarda select
ifadesi kullanılır.
- <textarea>
: Geniş bir metin
kutusu oluşturmak için kullanılan etikettir.
- <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.
- <fieldset>
: Form yapıları
içerisinde kullanıcıların belirli özelliklerini gruplandırmak için kullanılan
etikettir.
- <legend>
: Fieldset yapısı
için gruplama başlığı belirleyen etikettir.
- <datalist>
: Kullanıcıların
açılır liste içerikleri arasından seçim yapabilmesini sağlayan etikettir.
- <output>
: Hesaplama
sonuçlarını göstermek için kullanılan etikettir.
- <option>
: Açılır
liste seçeneklerinin sunulduğu etikettir.
- <optgroup>
: Açılır listede
çeşitli gruplar arasından seçim yapılmasını sağlar.
Yorum Gönder
Yorumunuzu Girin...