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ı İ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 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:
- <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 |
|
Yaşadığı |
|
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.
This article gives clear idea in support of the new visitors of blogging, that genuinely
how to do running a blog.
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.
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.