Fikir Proje Ajans | HTML Temel Dersler – Video ve Görsel Anlatım
FikirProje
FikirProje
FPAjans
Tam Ekran

HTML Temel Dersler – Video ve Görsel Anlatım

HTML, bir programlama dili olarak tanımlanamaz. Zira HTML kodlarıyla kendi başına çalışan bir program yazılamaz. Ancak bu dili yorumlayabilen programlar aracılığıyla çalışabilen programlar yazılabilir. Programlama dili denilememesinin nedeni tam olarak budur. Aşağıda sizlere html hakkında temel bilmeniz gereken bilgileri başlıklar halinde ve örnek tanımlarını hazırladık. Yukarıdaki html hakkında temel eğitim videolarını izleyerekte, html giriş temel eğitimini almış olursunuz.

HTML dökümanları, HTML öğeleri kullanılarak oluşturulan metin dosyalarıdır.

HTML öğeleri, HTML etiketleri kullanılarak tanımlanır.

HTML Etiketleri

  • HTML etiketleri, HTML öğelerini belirtmek için kullanılır.
  • HTML etiketleri 2 karakter ile sınırlanır. < ve >
  • Bu karakterlere grup parantezleri (angle brackets) denir.
  • HTML etiketleri çift olarak kullanılır. Örn: <b> Bu metin koyu fonttadır. </b>
  • Bu çiftlerden birincisine başlama etiketi, ikincisine ise bitiş etiketi denir.
  • Başlama ve bitiş etiketleri arasında kalan herşeye ise öğe içeriği (element contents) denir.
  • HTML etiketleri büyük/küçük harfe duyarlı değildir, yani <b> ve <B> aynı görevi görür. (Türkçe karakter olan “İ” ve “ı” harflerinin bu durumun dışında kaldığını unutmayınız.)

HTML Öğeleri

Önceki sayfadaki örneğimizi hatırlayalım:

<html>
<head>
<title>Sayfa Başlığı</title>
</head>
<body>
Bu benim ilk sayfam <b>Bu metin koyu</b>
</body>
</html>

Bu bir HTML öğesidir:

<b>Bu metin koyu</b>

HTML öğesi başlangıç etiketi olan <b> ile başladı.
HTML öğesinin içeriği: Bu metin koyu
HTML öğesi bitiş etiketi olan </b> ile sonlandırıldı.

<b> etiketinin amacı, görüntülenecek olan metinin koyu gösterilmesi gerektiğini bildirmektir.

Etiketleri neden küçük harflerle belirtiriz?

HTML etiketlerinin büyük/küçük harfe duyarlı olmadığını söylemiştik: <B> ve <b> aynıdır. Eğer Web’de gezintiye çıkarsanız bir çok sitenin kaynak kodunun bütük harflerle yapılmış olduğunu göreceksiniz..Fakat biz her zaman küçük harf kullanırız. Neden?

Eğer Web standartlarını kontrol etmek istiyorsanız küçük harf kullanmalısınız. World Wide Web Consortium (W3C) HTML 4 versiyonu ile beraber küçük harf kullanımını önerir. Ayrıca XHTML (yeni nesil HTML) dili de bunu kullanmanızı şiddetle önerir.

HTML dilindeki en önemli etiketler, başlıklar, paragraflar ve satır atlama etiketleridir.

Başlıklar

Başlıklar <h1> ve <h6> dahil olmak üzere aradaki tüm rakamlar kullanılarak tanımlanabilir. <h1> en büyük puntoyu belirtirken, <h6> ise en küçük puntoyu belirtir.

<h1>Bu bir başlık</h1>
<h2>Bu bir başlık</h2>
<h3>Bu bir başlık</h3>
<h4>Bu bir başlık</h4>
<h5>Bu bir başlık</h5>
<h6>Bu bir başlık</h6>

HTML dili otomatik olarak başlık etiketlerinin öncesinde ve sonrasında bir satır atlar.

Paragraflar

Paragraflar <p> etiketi ile belirtilir.

<p>Bu bir paragraf</p>
<p>Bu da başka bir paragraf</p>

HTML dili otomatik olarak paragraf etiketlerinin öncesinde ve sonrasında bir satır atlar.

Etiketleri kapatmayı unutmayın!

Bir önceki örnekte paragrafın </b> etiketi ile bittiğini gördünüz:

<p>Bu bir paragraf
<p>Bu da başka bir paragraf

Çoğu browser büyük ihtimalle yukardaki gibi yazsanız bile çalıştıracaktır ama buna pek fazla güvenmeyin çünkü gelecek versiyon HTML dili hiçbir etiketi atlamanıza izin vermeyecektir.

Satır atlama

Satır atlamak için <br> etiketi kullanılır. Ancak bu etiketin yeni bir paragraf açmadığını da unutmayınız.

<p>Bu <br>bir <br>çok satırlı paragraftır.</p>

<br> etiketi boş bir etikettir. </br> gibi bir bitiş etiketi yoktur.

<br> mi <br /> mi?

Bir çok yerde <br> etiketinin <br /> olarak kullanıldığını göreceksiniz.

Çünkü <br> etiketi bir bitiş etiketi bulundurmaz ve bu özellik gelecek nesil HTML (XML ve XHTML) dilinin ilk kuralını bozmaktadır. Bu yüzden <br /> etiketini kullanmanızı tavsiye ederiz.

HTML içinde açıklama (yorum) satırları yaratmak

Yorum satırları HTML kaynak kodu içerisine programcıların hangi satırın ne iş gördüğünü anlatmak için kullanılır. Bu satırlar, sayfa browser’da görüntülenirken dikkate alınmazlar.

<!-- Bu bir açıklama -->

Temel Notlar – Yararlı İpuçları

HTML kodlarınızın başka browser’larda nasıl görüntüneceğini asla bilemezsiniz. Ayrıca bazı kullanıcılar geniş ekran monitörlere sahipken bazıları küçük ekranlara sahiptir. Bu sebeple metinler, kullanıcı penceresini her yeniden boyutlandırmasında değişecektir. Asla metinlerinizi fazladan boşluk bırakmak gibi tekniklerle biçimlendirmeye çalışmayın.

HTML koyduğunuz boşlukları sürekli teke indirecektir.

Boş bir satır bırakmak için <p> kullanmak kötü bir tekniktir, bunun yerine <br /> etiketini kullanınız. (Ama asla <br /> ile sıralı liste oluşturmayınız. HTML ile listeleme konusuna kadar bekleyiniz.)

Temel HTML Etiketleri

Etiket (Tag)Açıklama
<html>Bir HTML dökümanını belirtir
<body>Dökümanın görüntülenecek kısmını berlitir.
<h1> to <h6>Başlıkları belirtir.
<p>Bir paragraf belirtir
<br>Boş bir satır bırakır.
<hr>Sayfada yatay bir çizgi çizer
<!–>Yorum satırı olduğunu belirtir.

 HTML Parametreleri (Nitelikler)

Parametreler, HTML öğelerine, ek özellikler eklenmesini sağlar.

HTML Etiket Nitelikleri

HTML etiketleri parametrelere sahip olabilir. Parametreler, HTML öğelerine, ek özellikler eklenmesini sağlar.

Parametreler daima isim/değer çiftleri arasında gelir: name=”value”.

Parametreler daima başlangıç etiketi içerisinde belirtilir.

Parametre Örneği 1:

<h1> başlık belirtir.

<h1 align=”center”> başlık belirtmesinin yanında, metinin ortalanacağını da belirtir.

Parametre Örneği 2:

<body> HTML’in body kısmını belirtir.

<body bgcolor=”yellow”> Body kısmını belirtmekle beraber, arkaplan renginin de sarı olacağını belirtir.

Değerleri (Value) Daima Tırnak İçerisine Alın

Parametrelerin değerli her zaman tırnak içerisinde olmalıdır.

Bazen değerin kendisinin içinde de çift tırnak kullanılması gerektiği zamanlarda ise, değerin tamamını tek tırnak içerisine de alabilirsiniz:

name=’Cem “GORA” Yilmaz’

HTML, metini koyu veya itelik yapmak için bir çok tanımlama biçimi barındırır.

Aşağıda bu konu ile ilgili bir çok örneği görebilir ve kendiniz deneyebilirsiniz.

HTML Kaynak Kodları Nasıl Görüntülenir?

Tarayıcınızın araç çubuğunda “Görünüm” menüsüne geldikten sonra “Kaynağı Görüntüle” seçeneğini tıklayınız.

Metin Biçimlendirme Etiketleri

TagAçıklama
<b>Koyu metin
<big>Büyük metin
<em>Vurgulanmış metin
<i>İtalik metin
<small>Küçük metin
<strong>Güçlü metin
<sub>Alt indis metini
<sup>Üst indis metini
<ins>Altı çizili metin
<del>Üstü çizili metin
<s>Önemsiz etiket, bunun yerine <del> kullanınız.
<strike>Önemsiz etiket, bunun yerine <del> kullanınız.
<u>Önemsiz etiket, bunun yerine styles kullanınız.

 

“Programlama Dilleri” Etiketleri

TagAçıklama
<code>Programlama dili metini
<kbd>Klavye metini
<samp>Örnek bilgisayar kodu metini
<tt>Tele tip metin
<var>Değişken
<pre>Biçimlendirilmemiş metin.
<listing>Önemsiz etiket, bunun yerine <pre> kullanınız.
<plaintext>Önemsiz etiket, bunun yerine <pre> kullanınız.
<xmp>Önemsiz etiket, bunun yerine <pre> kullanınız.

Alıntılar ve Açıklamalar İle İlgili Etiketler

TagDescription
<abbr>Kısaltma
<acronym>Baş harfleri ile kısaltma
<address>Adres öğesi
<bdo>Metin yönü
<blockquote>Uzun alıntı
<q>Kısa alıntı
<cite>Alıntı
<dfn>Tanımlama terimi


Görsel biçimlendirme

 

<b>Kalın metin</b>
<i>İtalik metin</i>
<center>Ortalanmış metin</center>
<big>Büyük metin</b>
<small>Küçük metin</small>
<font face="verdana" color="red" size="3">Yazının tipini, rengini ve boyutunu belirtme. Yazı boyutu 1-7 aralığında olmalıdır.</font>
<s>Üstü çizili metin</s>
<strike>Üstü çizili metin</strike>
<sub>Alt simge</sub>
<sup>Üst simge</sup>
<u>Altı çizili metin</u>
<div align="right">Sağa yaslı metin</div>
<div align="center">Ortalanmış metin</div>
 
Mantıksal biçimlendirme
 
<address>Yazarın iletişim bilgileri/adresi</address>
<blockquote>Alıntı (çoğunlukla tarayıcılar metni her iki taraftan girintilendirirler.)</blockquote>
<cite>Satıriçi alıntı</cite>
<em>Vurgulu metin</em>
<strong>Önemli metin</em>
<dfn>Özel terim</dfn>
<code>Bilgisayar kodu</code>
<samp>Örnek çıktı</code>
<kbd>Klavye girişini gösteren metin</kbd>
<var>Bir program kodundaki değişkenler</var>
<del>Silinen metin (çoğunlukla tarayıcılar üzerine çizgi çeker)</del>
<ins>Yeni eklenen metin (çoğunlukla tarayıcılar altını çizerler)</ins>
<q>Satıriçi alıntı<q>
Görsel biçimlendirme ile mantıksal biçimlendirme etiketleri arasında ne fark var?
Görsel biçimlendirme etiketleri tarayıcıya metnin tam olarak nasıl görüntülenmesi gerektiğini söyler; mantıksal biçimlendirme etiketleri ise tarayıcıya metni nasıl göstermesi konusunda sadece ipuçu verir. Ayrıca W3C görsel biçimlendirmenin kullanılmamasını tavsiye eder. Ben de görsel biçimlendirme etiketlerinden sadece < sup >< /sup > ve < sub >< /sub >’u kullanmanızı tavsiye ederim.
HTML içinde bazı karakterler (“<” gibi) kaynak kodlarda yazılarak ekranda görüntülenmesi sağlanamaz.
Bu tip karakterleri görüntüleyebilmek için bazı özel karakterler kullanılır.
Özel Karakterler
Bir özel karakter üç kısımdan oluşur: bir ampersand (ve) (&) işareti, bir belirtgeç ismi yada # işareti ile beraber ASCII kodu, ve son olarak noktalı virgül(;)
HTML dökümanı içinde  bu tip karakterleri görüntülemek için &lt; veya &#60; yazmalıyız.
Bir numara yerine isim kullanılmasının avantajı, isimlerin daha rahat hatırlanabilmesidir. Dezavantajı ise piyasadaki tüm tarayıcılarda tam desteklenmemesidir.
Özel karakterlerin büyük/küçük harfe duyarlı olduğuna dikkat ediniz.
 
Birden Fazla Boşluk Bırakabilmek
Normalde HTML kodları içindeki 2 kelime arasında 10 tane de boşluk bıraksanız bunlardan sadece 1 tanesi dikkate alınır. Eğer birden fazla boşluk bırakmak istiyorsanız &nbsp; özel karaktlerini kullanınız.
En Çok Kullanılan Özel Karakterler
SonuçAçıklamaÖzel karakterleriNumaralı Hali
Fazladan boşluk&nbsp;&#160;
<Küçüktür&lt;&#60;
>Büyüktür&gt;&#62;
&Ve&amp;&#38;
“Alıntı&quot;&#34;
‘apostorof&apos; (IE’de çalışmaz)&#39;
Bazı Başka Özel Karakterler
SonuçAçıklamaÖzel karakterleriNumaralı Hali
¢Cent&cent;&#162;
£Pound&pound;&#163;
¥Yen&yen;&#165;
€Euro&euro;&#8364;
§Section&sect;&#167;
©Copyright&copy;&#169;
®Kayıtlı marka&reg;&#174;
×Çarpma&times;&#215;
÷Bölme&divide;&#247;
Kod AdıKod NumarasıŞekil ÇıktısıAçıklama (English)
&lsquo;‘left single quote
&rsquo;’right single quote
&sbquo;‚single low-9 quote
&ldquo;“left double quote
&rdquo;”right double quote
&bdquo;„double low-9 quote
&dagger;†dagger
&Dagger;‡double dagger
&permil;‰per mill sign
&lsaquo;‹single left-pointing angle quote
&rsaquo;›single right-pointing angle quote
&spades;♠black spade suit
&clubs;♣black club suit
&hearts;♥black heart suit
&diams;♦black diamond suit
&oline;‾overline, = spacing overscore
&larr;←leftward arrow
&uarr;↑upward arrow
&rarr;→rightward arrow
&darr;↓downward arrow
&trade;™trademark sign
Kod AdıKod NumarasıŞekil ÇıktısıAçıklama
&#00;-&#08;unused
&#09;horizontal tab
&#10;line feed
&#11;unused
&#32;space
&#33;!exclamation mark
&quot;&#34;“double quotation mark
&#35;#number sign
&#36;$dollar sign
&#37;%percent sign
&amp;&#38;&ampersand
&#39;‘apostrophe
&#40;(left parenthesis
&#41;)right parenthesis
&#42;*asterisk
&#43;+plus sign
&#44;,comma
&#45;–hyphen
&#46;.period
Kod AdıKod NumarasıŞekil ÇıktısıAçıklama
&frasl;&#47;/slash
&#48;-&#57;digits 0-9
&#58;:colon
&#59;;semicolon
&lt;&#60;<less-than sign
&#61;=equals sign
&gt;&#62;>greater-than sign
&#63;?question mark
&#64;@at sign
&#65;-&#90;uppercase letters A-Z
&#91;[left square bracket
&#92;backslash
&#93;]right square bracket
&#93;]caret
&#95;_horizontal bar (underscore)
&#95;_grave accent
&#97;-&#122;lowercase letters a-z
&#123;{left curly brace
&#124;|vertical bar
Kod AdıKod NumarasıŞekil ÇıktısıAçıklama
&#125;}right curly brace
&#126;~tilde
&#127;-&#149;unused
&ndash;&#150;–en dash
&mdash;&#151;—em dash
&#152;-&#159;unused
&nbsp;&#160;nonbreaking space
&iexcl;&#161;¡inverted exclamation
&cent;&#162;¢cent sign
&pound;&#163;£pound sterling
&curren;&#164;¤general currency sign
&yen;&#165;¥yen sign
&brvbar; or &brkbar;&#166;¦broken vertical bar
&sect;&#167;§section sign
&uml; or &die;&#168;¨umlaut
&copy;&#169;©copyright
&ordf;&#170;ªfeminine ordinal
&laquo;&#171;«left angle quote
&not;&#172;¬not sign
&shy;&#173;soft hyphen
&reg;&#174;®registered trademark
&macr; or &hibar;&#175;¯macron accent
Kod AdıKod NumarasıŞekil ÇıktısıAçıklama
&deg;&#176;°degree sign
&plusmn;&#177;±plus or minus
&sup2;&#178;²superscript two
&sup3;&#179;³superscript three
&acute;&#180;´acute accent
&micro;&#181;µmicro sign
&para;&#182;paragraph sign
&middot;&#183;·middle dot
&cedil;&#184;¸cedilla
&sup1;&#185;¹superscript one
&ordm;&#186;ºmasculine ordinal
&raquo;&#187;»right angle quote
&frac14;&#188;¼one-fourth
&frac12;&#189;½one-half
&frac34;&#190;¾three-fourths
&iquest;&#191;¿inverted question mark
&Agrave;&#192;Àuppercase A, grave accent
&Aacute;&#193;Áuppercase A, acute accent
&Acirc;&#194;Âuppercase A, circumflex accent
Kod AdıKod NumarasıŞekil ÇıktısıAçıklama
&Atilde;&#195;Ãuppercase A, tilde
&Auml;&#196;Äuppercase A, umlaut
&Aring;&#197;Åuppercase A, ring
&AElig;&#198;Æuppercase AE
&Ccedil;&#199;Çuppercase C, cedilla
&Egrave;&#200;Èuppercase E, grave accent
&Eacute;&#201;Éuppercase E, acute accent
&Ecirc;&#202;Êuppercase E, circumflex accent
&Euml;&#203;Ëuppercase E, umlaut
&Igrave;&#204;Ìuppercase I, grave accent
&Iacute;&#205;Íuppercase I, acute accent
&Icirc;&#206;Îuppercase I, circumflex accent
&Iuml;&#207;Ïuppercase I, umlaut
&ETH;&#208;Ðuppercase Eth, Icelandic
&Ntilde;&#209;Ñuppercase N, tilde
&Ograve;&#210;Òuppercase O, grave accent
&Oacute;&#211;Óuppercase O, acute accent
&Ocirc;&#212;Ôuppercase O, circumflex accent
&Otilde;&#213;Õuppercase O, tilde
Kod AdıKod NumarasıŞekil ÇıktısıAçıklama
&Ouml;&#214;Öuppercase O, umlaut
&times;&#215;×multiplication sign
&Oslash;&#216;Øuppercase O, slash
&Ugrave;&#217;Ùuppercase U, grave accent
&Uacute;&#218;Úuppercase U, acute accent
&Ucirc;&#219;Ûuppercase U, circumflex accent
&Uuml;&#220;Üuppercase U, umlaut
&Yacute;&#221;Ýuppercase Y, acute accent
&THORN;&#222;Þuppercase THORN, Icelandic
&szlig;&#223;ßlowercase sharps, German
&agrave;&#224;àlowercase a, grave accent
&aacute;&#225;álowercase a, acute accent
&acirc;&#226;âlowercase a, circumflex accent
&atilde;&#227;ãlowercase a, tilde
&auml;&#228;älowercase a, umlaut
&aring;&#229;ålowercase a, ring
&aelig;&#230;ælowercase ae
&ccedil;&#231;çlowercase c, cedilla
&egrave;&#232;èlowercase e, grave accent
Kod AdıKod NumarasıŞekil ÇıktısıAçıklama
&eacute;&#233;élowercase e, acute accent
&ecirc;&#234;êlowercase e, circumflex accent
&euml;&#235;ëlowercase e, umlaut
&igrave;&#236;ìlowercase i, grave accent
&iacute;&#237;ílowercase i, acute accent
&icirc;&#238;îlowercase i, circumflex accent
&iuml;&#239;ïlowercase i, umlaut
&eth;&#240;ðlowercase eth, Icelandic
&ntilde;&#241;ñlowercase n, tilde
&ograve;&#242;òlowercase o, grave accent
&oacute;&#243;ólowercase o, acute accent
&ocirc;&#244;ôlowercase o, circumflex accent
&otilde;&#245;õlowercase o, tilde
&ouml;&#246;ölowercase o, umlaut
&divide;&#247;÷division sign
&oslash;&#248;ølowercase o, slash
&ugrave;&#249;ùlowercase u, grave accent
&uacute;&#250;úlowercase u, acute accent
&ucirc;&#251;ûlowercase u, circumflex accent
Kod AdıKod NumarasıŞekil ÇıktısıAçıklama
&uuml;&#252;ülowercase u, umlaut
&yacute;&#253;ýlowercase y, acute accent
&thorn;&#254;þlowercase thorn, Icelandic
&yuml;&#255;ÿlowercase y, umlaut
HTML başka sayfalara kendi üzerinden bağlantı (link) kurmak için hyperlink (çoklu bağlantı) özelliğini kullanılır.
<a> Etiketi ve href parametresi
HTML başka bir dökümana link oluşturmak için <a> etiketini kullanır.
Kullanım biçimi:
<a href="url">Görüntülenecek Metin</a>
Bir örnek:
<a href="http://www.fpajans.com/">Örnek, Tıklayın, Görün...</a>
Örnek, Tıklayın, Görün...
Hedef (target) Parametresi
Target parametresi ile dökümanın nerde açılacağını belirtebilirsiniz.
Aşağıdaki bağlantıya tıklanırsa, döküman yeni bir pencerede açılacaktır.
<a href="http://www.htmldersleri.org/"
target="_blank">Kodlayın, Tıklayın, Görün...</a>
<a> Etiketi ve Name Parametresi
Bu parametre ile aynı döküman içinde belirlenmiş başka bir satıra direkt geçiş yapılabilir.
Kullanım Biçimi:
<a name="label">Görüntülenecek Metin</a>
The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use.
Bir Örnek:
<a name="ipucu">Yararlı Bilgiler</a>
İpucu kısmına direkt link vermek için, URL’nin sonuna #ipucu yazınız:
<a href="http://www.htmldersleri.org/ornekler/html_links.htm#ipucu">
Yararlı İpuçları</a>
Dosya ismi kullanmadan o dosya içerisinde bir yere geçmek:
<a href="#ipucu">Yararlı İpuçları</a>
LİNK VERME İÇİN KULLANILAN NİTELİKLER
htmllink htmlbağlantılar HTML Temel Dersler   Video ve Görsel Anlatım
SAYFALARA LİNK VERME
Link oluştumak için <a> Etiketini kullanırız. Linkin kaynağını belirleyen href=”” Nitliğini kullanırız. daha iyi anlamak için örnek yapalım.
1- Siteye link verme
1<a href="http://www.google.com">GOOGLE GİDER</a>
ÇIKTI:
GOOGLE GİDER
Sitenin içindeki html sayfasına link verme
1<a href="index.html">ANASAYFA'YA GİDER</a>
ANASAYFA’YA GİDER
LİNKLER(Bağlantılar) HEDEFLER
Şu ana kadar öğrendiğimiz link verme metoduyla , Linkin yer aldığı sayfanın yerine başka bir sayfanın yüklenmesini sağlıyoruz. Oysa yüklenmiş sayfanın kaybolması arzu etmeyiz ve linkin yeni pencerede yer almasını isteriz. Örneklere bakalım.
Target=”_blank” Yeni bir tarayıcı pencerisinde sayfa açar
Target=”_self” Mevcut pencerede sayfa açar.
_self Değeri varsayılı olarak gelir. Belirtmemiz gerek duyulmaz.
_blank Metin bağlantısına her bir tıklama ile yeni bir web tarayıcı pencerisi açılır.
1<a href="http://www.google.com"target="_blank">google.com</a>
ÇIKTI:
google.com
NOT:
Sitenizde kullanıcıları tutmak için başka sitelere Link verdiğinizde ayrı pencerede açılmasını sağlayın.
E-POSTA LİNKLER
Bir e-posta bağlantısı oluşturmak kolaydır. Eğer insanlar sitenizle ilgili iletişime geçmek isterlerse e-posta linki oluşturulur.
1<a href="mailto:info@fpajans.com">İLETİŞİM</a>
İLETİŞİM
DOWNLOAD LİNKİ YAPMA
Dowload linki oluşturmak için öncelikle dosyamızı sıkıştırmak(.zip .rar ) gerekir.
1<a href="imageshtml/text.rar">Download</a>
Download
SAYFA İÇİ KONULARA LİNK VERME
Bu parametre ile aynı döküman içinde belirlenmiş başka bir satıra direk geçiş yapılır.
1<a href="#yukari">YUKARI ÇIK</a>
# işareti id’si yukarı id=”yukari” olana git demektir. Ben ilk başlığıma bu kodu yerleştireceğim
1<h2 id="yukari">LİNK VERME İÇİN KULLANILAN NİTELİKLER</h2>
YUKARI ÇIK
Çerçeveler sayesinde aynı tarayıcı penceresinde birden fazla HTML dökümanı görüntüleyebilirsiniz.
Çerçeveler
Çerçeveler sayesinde aynı tarayıcı penceresinde birden fazla HTML dökümanı görüntüleyebilirsiniz. Her HTML dökümanı bir çerçeve (frame) ve her çerçeve birbirinden bağımsız olur.
Çerçeve kullanmanın dezavantajları:
  • Web geliştiricilerin birden fazla HTML dökümanını takip etmesi zordur.
  • İstenilen sayfanın yazıcıya gönderilmesi zordur.
Frameset Etiketleri
  • <frameset> pencerenin hangi biçimde çerçevelere ayrılacağını belirler.
  • Her frameset satır (rows) veya sütun (cols) olarak belirlenir
Frame Etiketi
  • <frame> etiketi, her bir çerçevede hangi HTML dökümanının görüntüleneceğini belirtir.
Aşağıdaki örnekte 2 sütun çerçeveli bir döküman bulunmaktadır. İlk çerçeve için tarayıcı penceresinin genişliğinin %25’i ayrılmıştır. İkincisine ise %75’i ayrılmıştır. “frame_a.htm” birinci sütuna, “frame_b.htm” ise ikinci sütuna yerleştirilmiştir:
<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>
Not: frameset sütun değerleri ayrıca piksel olarak ta belirtilebilir: (cols=”200,500″), ayrıca geri kalanının da kendi kendini 100 değerine tamamlamasına olanak verilebilir: (cols=”25%,*”).
Temel Notlar – Yararlı İpuçları
Çerçevelerde görünebilir kenarlıklar vardır. Kullanıcı bunları sürükleyerek yeniden boyutlandırabilir.Bunu önlemek için noresize=”noresize” parametrelerini  <frame> etiketi içine yazabilirsiniz.
<noframes> etiketini döküman içerisine eklerseniz, tarayıcınız çerçeve özelliğini desteklemez hale gelir.
Önemli: <body></body> etiketlerini <frameset></frameset> etiketleri ile beraber kullanamazsınız!
Frame Etiketleri
EtiketAçıklama
<frameset>Frame ayarlarını belirtir.
<frame>Alt pencere (çerçeve) belirtir.
<noframes>Frame desteğinin kullanılmamasını sağlar.
<iframe>İç frame belirtir.
 
Aşağıda bazı çerçeve örnekleri ve bu örneklerin kodları verilmiştir:
 
HTML Çerçeveler Uygulama 1 HTML Temel Dersler   Video ve Görsel Anlatım<frameset  rows=”150,*” cols=”150,*” >

<frame name=”kirmizi” src=”kirmizi.html”>

<frame name=”yesil” src=”yesil.html”>

<frame name=”sari” src=”sari.html”>

<frame name=”siyah” src=”siyah.html”>

</frameset>
HTML Çerçeveler Uygulama 2 HTML Temel Dersler   Video ve Görsel Anlatım<frameset  rows=”150,*”>

<frame name=”kirmizi” src=”kirmizi.html”>

<frameset cols=”30%,*”>

<frame name=”yesil” src=”yesil.html”>

<frame name=”sari” src=”sari.html”>

</frameset>
HTML Çerçeveler Uygulama 3 HTML Temel Dersler   Video ve Görsel Anlatım<frameset  rows=”150,*”>

<frameset cols=”*,*”>

<frame name=”kirmizi” src=”kirmizi.html”>

<frame name=”yesil” src=”yesil.html”>

</frameset>

<frame name=”sari” src=”sari.html”>

</frameset>
HTML Çerçeveler Uygulama 4 HTML Temel Dersler   Video ve Görsel Anlatım<frameset cols=”150,*”>

<frameset  rows=”*,*,*”>

<frame name=”yesil” src=”yesil.html”>

<frame name=”kirmizi” src=”kirmizi.html”>

<frame name=”sari” src=”sari.html”>

</frameset>

<frame name=”siyah” src=”siyah.html”>

</frameset>
Çerçevelerle çalışmaya başlamadan önce bilmeniz gereken önemli bir nokta:

Hatırlarsanız bağlantılar konusunda <a> etiketinin target isimli bir parametresi olduğundan ve bu parametrenin ‘Çerçeveadı’ değerini alabileceğinden bahsetmiştik. Bu parametre bize bağlantının belirttiği adresdeki sayfanın adını verdiğimiz çerçeve içinde açılmasını sağlar. Örneğin bu sayfadaki ikinci örneği ele alalım:

‘İstiyoruz ki sayfanın yeşil bölümü sayfamızın menüsü olsun. Ziyaretçi buradaki bağlantılara tıklayarak sitenin diğer sayfalarına ulaşsın, ama bu diğer sayfalar sarı bölümde görüntülensin.’

İşte aşağıdaki kod bunu sağlar:
<a href=”www.siteadı.comsecenek1.html  target=”sari”>Bu link saril bölümde görüntülenecek!</a>
Gördüğünüz gibi çerçevelere verdiğimiz isimler (name) bu noktada önem kazanıyorlar…
HTML ile tablolar oluşturabilirsiniz.
Tablolar
Tablolar <table> etiketi ile belirtilir. Bir tablo <tr> etiketi satırlara bölünür ve her satır da <td> etiketi ile sütunlara bölünür. <td> etiketinin anlamı “table data”dır. Bir veri hücresi (data cell) metinler, resimler, listeler, paragraflar, formlar, yatay çizgiler, tablolar vs. içerebilir.
<table border="1">
<tr>
<td>satır 1, hücre 1</td>
<td>satır 1, hücre 2</td>
</tr>
<tr>
<td>satır 2, hücre 1</td>
<td>satır 2, hücre 2</td>
</tr>
</table>
Çıktısı aşağıdaki gibi olacaktır:
satır 1, hücre 1satır 1, hücre 2
satır 2, hücre 1satır 2, hücre 2
 
Tablolar ve Kenarlık (border) Parametresi
Eğer bir border parametresi belirtmezseniz, tablonuz kenarlık olmadan görüntülenir. Bu bazen yararlı olabilir ama çoğu zaman kenarlıkları göstermek daha çok işinize yarayacaktır.
Kenarlıkları göstermek için aşağıdaki parametreyi kullanmalısınız:
<table border="1">
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
</table>
 
Tablolarda Başlıklar
Başlıklar <th> etiketi ile belirtilir.
<table border="1">
<tr>
<th>Başlık</th>
<th>Başka Başlık</th>
</tr>
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
<tr>
<td>Satır 2, Hücre 1</td>
<td>Satır 2, Hücre 2</td>
</tr>
</table>
Çıktısı:
BaşlıkBaşka Başlık
Satır 1, Hücre 1Satır 1, Hücre 2
Satır 2, Hücre 1Satır 2, Hücre 2
 
Bir Tabloda Boş Hücreler
Veri içermeyen hücreler bir çok tarayıcıda görüntülenmezler.
<table border="1">
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
<tr>
<td>Satır 2, Hücre 1</td>
<td></td>
</tr>
</table>
Çıktısı:
Satır 1, Hücre 1Satır 1, Hücre 2
Satır 2, Hücre 1
Boş hücre etrafındaki iç kenarlıkların görünmediğine dikkat edin. (Mozilla Firefox bunu görüntüler).
Bundan kurtulmak için, (&nbsp;) özel karakterlerini boş hücre içine ekleyerek kenarlıkların görüntülenmesini sağlayabilirsiniz.
<table border="1">
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
<tr>
<td>Satır 2, Hücre 1</td>
<td>&nbsp;</td>
</tr>
</table>
Çıktısı:
Satır 1, Hücre 1Satır 1, Hücre 2
Satır 2, Hücre 1
 
Tablo Etiketleri
EtiketiAçıklama
<table>Tablo
<th>Tablo başlığı
<tr>Satır
<td>Hücre
<caption>Manşet
<colgroup>Hücre grupları
<col>Sütun genişliği
<thead>Tablo başı
<tbody>Tablo body özelliği
<tfoot>Tablonun en alt kısmı
1) Basit bir Tablo

<TABLE BORDER>

<TR>

<TD>Veri Hücresi 1</TD><TD>Veri Hücresi 2</TD>

</TR>

<TR>

<TD>Veri Hücresi 3</TD><TD>Veri Hücresi 4</TD>

</TR>

</TABLE>
 
Veri Hücresi 1Veri Hücresi 2
Veri Hücresi 3Veri Hücresi 4
 
2) Satır Germe: ROWSPAN

<TABLE BORDER>

<TR>

<TD ROWSPAN=2>komutu iki satırı geriyor:</TD>

<TD>Bu hücrelers</TD><TD>başka</TD>

</TR>

<TR>

<TD>veriler</TD><TD>içerir</TD>

</TR>

</TABLE>
 
Bu hücre 2 satır geriyorBu hücrelerbaşka
verileriçerir
 
3) Kolon Germe: COLSPAN

<TABLE BORDER>

<TR>

<TD>Veri Hücresi 1</TD>

<TD COLSPAN=2>Bu hücre 2 kolon geriyor:</TD>

</TR>

<TR>

<TD>Veri Hücresi 2</TD><TD>Veri Hücresi 3</TD><TD>Veri Hücresi 4</TD>

</TR>

</TABLE>
 
Veri Hücresi 1Bu hücre 2 kolon geriyor:
Veri Hücresi 2Veri Hücresi 3Veri Hücresi 4
 
4) Tabloya Başlık Yazma:

<TABLE BORDER>

<TR>

<TH>Netscape</TH><TH>Internet Explorer</TH><TH>Mosaic</TH>

</TR>

<TR>

<TD>X</TD><TD>X</TD><TD>-</TD>

</TR>

<TR>

<TD>X</TD><TD>-</TD><TD>X</TD>

</TR>

</TABLE>
 
NetscapeInternet ExplorerMosaic
XX–
X–X
 
5) Örnek:

<TABLE BORDER>

<TR>

<TD><TH ROWSPAN=2></TH>

<TH COLSPAN=3>Browser</TH></TD>

</TR>

<TR>

<TD><TH>Netscape</TH><TH>Internet Explorer</TH>

<TH>Mosaic</TH></TD>

</TR>

<TR>

<TH ROWSPAN=2>Element</TH>

<TH><DFN></TH><TD>-</TD><TD>X</TD>

<TD>-</TD>

</TR>

<TR>

<TH><DIR></TH><TD>X</TD><TD>X</TD>

<TD>X</TD>

</TR>

</TABLE>
 
Browser
NetscapeInternet ExplorerMosaic
Element<DFN>–X–
<DIR>XXX
 
6) Yatay/Düşey Hizalama: ALIGN/VALIGN Bu tablo, yukarıdakine ALIGN ve VALIGN nitelemelerini ekleyerek, görünümü iyileştirmektedir.

<TABLE BORDER>

<TR>

<TD><TH ROWSPAN=2></TH>

<TH COLSPAN=3>Browser</TH></TD>

</TR>

<TR>

<TD><TH>Netscape</TH><TH>Internet Explorer</TH>

<TH>Mosaic</TH></TD>

</TR>

<TR>

<TH ROWSPAN=2 VALIGN=top>Element</TH>

<TH><DFN></TH>

<TD ALIGN=center>-</TD>

<TD ALIGN=center>X</TD>

<TD ALIGN=center>-</TD>

</TR>

<TR>

<TH><DIR></TH>

<TD ALIGN=center>X</TD>

<TD ALIGN=center>X</TD>

<TD ALIGN=center>X</TD>

</TR>

</TABLE>
 
Browser
NetscapeInternet ExplorerMosaic
Element<DFN>–X–
<DIR>XXX
 
7) İç-içe Tablolar

Tablolar iç-içe yuvalanabilir. Bu tablo ROWSPAN nitelemesini kullanarak, hücrelerinde ‘basit’ bir tablo içermiş oluyor.

<TABLE BORDER>

<TR>

<TD ROWSPAN=2>Bu hücre 2 satır geriyor

<TABLE BORDER>

<TR>

<TD>Veri Hücresi 1</TD><TD>Veri Hücresi 2</TD>

</TR>

<TR>

<TD>Veri Hücresi 3</TD><TD>Veri Hücresi 4</TD>

</TR>

</TABLE>

</TD>

<TD>Bu hücreler</TD><TD>başka</TD>

</TR>

<TR>

<TD>veriler</TD><TD>içerir</TD>

</TR>

</TABLE>
 
Bu hücre 2 satır geriyor
Veri Hücresi 1Veri Hücresi 2
Veri Hücresi 3Veri Hücresi 4
Bu hücrelerbaşka
verileriçerir
 
8) Kayan Tablolar

<TABLE ALIGN=left BORDER WIDTH=50%>

<TR> <TD>Bu iki satırlı bir tablodur</TD>

</TR>

<TR>

<TD>Sayfanın soluna hizalanmıştır </TD>

</TR>

</TABLE>

Bu text tablonun saðına düzenli olarak yerleşir.

<BR CLEAR=all>

<HR>

<P><br>

<TABLE ALIGN=right BORDER WIDTH=50%>

<TR>

   <TD>Bu da iki satırlı bir tablodur </TD>

</TR>

<TR>

   <TD>Sayfanın saðına hizalanmıştır </TD>

</TR>

</TABLE>

Bu text tablonun soluna düzenli olarak yerleşir.

<BR CLEAR=all>

<HR>
 
 
Bu 2 satırlı bir tablodur
Sayfanın soluna hizalanmıştır
 
Bu text tablonun

saðına düzenli olarak yerleşir.
 
Bu da iki satırlı bir tablodur
Sayfanın sağına hizalanmıştır
 


Bu text tablonun soluna

düzenli olarak yerleşir.
9) Tabloyu Renklendirme

NOTE :Netscape bu tablonun kenarlarını renklendirmez.

<TABLE BORDER BGCOLOR=Silver BORDERCOLOR=Black WIDTH=50%>

<TR>

<TD>Bu birinci hücredir</TD>

<TD>Bu ikinci hücredir</TD>

</TR>

<TR BORDERCOLOR=Red BGCOLOR=Green>

<TD>Bu üçüncü hücredir</TD>

<TD>Bu dördüncü hücredir</TD>

</TR>

<TR BORDERCOLOR=Red BGCOLOR=Green>

<TD BORDERCOLOR=Yellow>Bu beşinci hücredir</TD>

<TD BGCOLOR=White>Bu altıncı hücredir</TD>

</TR>

</TABLE>
 
Bu birinci hücredirBu ikinci hücredir
Bu üçüncü hücredirBu dördüncü hücredir
Bu beşinci hücredirBu altıncı hücredir
HTML, sıralı, sırasız ve tanımlama listelerini destekler.
Sırasız Liste
Sırasız bir liste maddelerden oluşur. Liste içeriği madde imleri ile işaretlenir.
Sırasız listeleme <ul> etiketi ile başlar. Her madde de <li> etiketi ile başlar.
<ul>
<li>Kahve</li>
<li>Süt</li>
</ul>
Çıktısı:
  • Kahve
  • Süt
Bir liste madde içerisine paragraflar, resimler, linkler, başka listeler ve satır boşlukları koyabilirsiniz.
 
Sıralı Listeler
Maddeler rakamlar ile listelenir. Sıralı listeleme <ol> etiketi ile başlar. Her madde de  <li> etiketi ile başlar.
<ol>
<li>Kahve</li>
<li>Süt</li>
</ol>
Çıktısı:
  1. Kahve
  2. Süt
Tanımlama Listeleri
Bir tanımlama listesi maddelerin sıralanması demek değildir. Bu, terimlerin açıklanması demektir.
Bir tanımlama listesi <dl> etiketi ile başlar. Her terim  <dt> etiketi ile başlar. Each terimin tanımlaması da <dd> etiketi ile başlar.
<dl>
<dt>Kahve</dt>
<dd>Koyu sıcak içecek</dd>
<dt>Süt</dt>
<dd>Beyaz soğuk içecek</dd>
</dl>
Çıktısı:
Kahve
Koyu sıcak içecek
Süt
Beyaz soğuk içecek
Bir tanımlama listesi içerisine paragraflar, resimler, linkler, başka listeler ve satır boşlukları vs. koyabilirsiniz.
Listeleme Etiketleri
EtiketAçıklama
<ol>Sıralı liste
<ul>Sırasız liste
<li>Liste maddesi
<dl>Tanımlama listesi
<dt>Terim tanımı
<dd>Tanım açıklaması
<dir>Önemsiz etiketi. Yerine <ul> kullanınız.
<menu>Önemsiz etiketi. Yerine <ul> kullanınız.
HTML Formları kullanıcının klavye ile girdiği bilgileri işlemek için kullanılır.
Formlar
Bir form, form elemanlarını içinde bulunduran alandır.
Form elemanları kullanıcıların bilgi girmesini sağlayan elemanlardır. (metin alanları, açılabilir listeler, seçenek kutuları, kontrol kutuları)
Kullanım biçimi:
<form>
  <input>
  <input>
</form>
 
Giriş (Input)
En çok kullanılan form etiketi <input> etiketidir.
Metin Alanları
Kullanıcının rakam veya harf girmesini istediğiniz yerlerde bunu kullabilirsiniz.
<form>
Adınız: 
<input type="text" name="isim">
<br>
Soyadınız: 
<input type="text" name="soyad">
</form>
Çıktısı:
Adınız:      

Soyadınız: 
Formun kendisinin görünmediğine dikkat ediniz. Ayrıca bir çok tarayıcının metin giriş alanı için varsayılan olarak 20 karakterlik alan bıraktığına dikkat ediniz.
Seçenek Butonları (Radio Buttons)
Kullanıcının bir çok seçenek içinden sadece bir tanesini seçebilmesini istediğiniz zaman bunu kullanırsınız.
<form>
<input type="radio" name="Cinsiyet" value="Erkek"> Erkek
<br>
<input type="radio" name="Cinsiyet" value="Kadın"> Kadın
</form>
Çıktısı:
 Erkek

 Kadın
Kontrol kutuları (Checkboxes)
Kullanıcının, sunulan seçenekler içinden istediği kadar seçmesini sağlamak için bunu kullanabilirsiniz.
<form>
Bir bisikletim var:
<input type="checkbox" name="Tasit" value="Bisiklet">
<br>
Bir arabam var: 
<input type="checkbox" name="Tasit" value="Araba">
<br>
Bir uçağım var: 
<input type="checkbox" name="Tasit" value="Uçak">
</form>
Çıktısı:
Bir bisikletim var: 

Bir arabam var: 

Bir uçağım var: 
Formlarda “Action” Parametresi ve “Submit” Butonu
Kullanıcı submit (gönder) butonuna tıkladığında girilen bilgiler başka bir sayfaya gönderilir. Action parametresinde ise bilgilerin hangi dosyaya gönderileceği belirtilir. Bilgilerin gönderildiği dosya, genellikle gelen bilgilerle ilgili ne tür işlem yapılacağı hakkında bilgiler içerir.
<form name="input" action="ornekler/html_form_action.php"
method="get" target="_blank">
Kullanıcı Adı: 
<input type="text" name="kullanici">
<input type="submit" value="Gönder">
</form>
Çıktısı:
Kullanıcı Adı:  
Eğer yukarıdaki kutuya birşeyler yazıp butona tıklarsanız, girdiğiniz bilgileri “html_form_action.php” dosyasına gönderirsiniz. Yeni pencerede açılacak olan bu sayfada girmiş olduğunuz bilgileri görebilirsiniz.
Form Etiketleri
EtiketAçıklama
<form>Form
<input>Giriş alanı
<textarea>Çok satırlı metin giriş alanı
<label>Etiket
<fieldset>Alanların ayarlarının nasıl olacağını belirtir.
<legend>Manşet
<select>Açılabilir liste (combobox)
<optgroup>Seçenek kutusu grubu
<option>Açılabilir liste içindeki maddeleri belirtir.
<button>Buton
<isindex>Önemsiz. Bunun yerine <input> etiketini kullanınız.
HTML dökümanı içerisinde resim görüntüleyebilirsiniz.
Resim “<img>” Etiketi ve “src” Parametresi
HTML dökümanlarda resimler <img> etiketi ile belirtilir.
<img> etiketi kapalıdır, yani bu etiket mutlaka parametreler ile kullanılır ve bir kapatma etiketi bulundurmaz.
Sayfanızda bir resim görüntüleyebilmek için “src” parametresini kullanmak zorundasınız. Src, “source” (kaynak) anlamına gelir. Buraya görüntülemek istediğiniz resim dosyasının yolunu yazarsınız.
Kullanım biçimi
<img src="resim yolu">
<img src="dosyalar/banner.jpg">
<img src="http://www.fpajans.com/dosyalar/banner.jpg">
 
“Alt” Parametresi
Bu parametre alternatif metin (alternate text) anlamına gelir. Bu metin, resimin üzerine mouse gelip bir süre beklendiği zaman görünen metindir.
<img src="home.gif" alt="Ana Sayfa">
Bu özellik sayesinde bazen sayfa  yüklenirken resimlerin görüntülenememesi gibi problemlerde oradaki resimin ne olduğunu anlarız. Bu parametre yeni nesil HTML’de WWC tarafından zorunlu hale gelmiştir.
Temel Notlar – Yararlı İpuçları
Bir HTML dosyasına 10-15 resim  koymak sayfanın yüklenişi sırasında yavaşlamaya neden olur. Bu yüzden sayfa tasarlarken bu notu dikkati alınız. Unutmayın ki kullanıcıların bir web sayfasında aradığı ilk özellik, hızdır!
Image Etiketleri
EtiketAçıklama
<img>Resim
<map>Bir resimden alınacak belirli bir bölge.
<area>Bir resimde belirlenmiş olan bir bölgenin tıklanabilir bölge ölçüsü.
İyi bir arka plan tasarımı, bir web sitesinin gerçekten çok iyi görünmesini sağlayabilir.
Arka Plan
<body> etiketi arka plan belirlemek için iki tane parametre bulundurur. Bunlar “bgcolor” ve “background” parametreleridir. bgcolor ile arka plan rengi, background ile de bir arka plan resimi belirtebilirsiniz.
Bgcolor
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
Background
<body background="ornekler/background.jpg">
<body background="http://www.fpajans.com/logo.jpg">
Not: Eğer bir arka plan resimi kullanmak isterseniz aşağıdaki soruları aklınıza getirmeyi unutmayınız.
  • Yüklenmesi uzun sürer mi?
  • Sayfadaki diğer resimler ile uygun bir görüntü sağlar mı?
  • Sayfadaki metinlerin rengi ile uygun bir görüntü sağlar mı?
  • Sayfaya döşendiği zaman farkedilmemesi sağlanacak mı?
  • Sayfadaki metinlerden daha az dikkat çekecek mi?
  • Renkler Kırmızı (Red), Yeşil (Green) ve Mavi (Blue) “ışık” renklerinin kombinasyonu ile oluşturulur.
  • Işık renklerinde ana renkler kırmızı yeşil ve mavidir.
Renk Değerleri
HTML renkleri hexadecimal değerler ile RGB (kırmızı yeşil mavi) kombinasyonu ile belirtilebilir.
En düşük değer 0 (hex #00) ve en yüksek değer de 255’tir (hex #FF).
Aşağıda bu kombinasyonlar ile ilgili bir tablo görünmektedir:
RenkHEX DeğeriRGB Değeri
#000000rgb(0,0,0)
#FF0000rgb(255,0,0)
#00FF00rgb(0,255,0)
#0000FFrgb(0,0,255)
#FFFF00rgb(255,255,0)
#00FFFFrgb(0,255,255)
#FF00FFrgb(255,0,255)
#C0C0C0rgb(192,192,192)
#FFFFFFrgb(255,255,255)
 
W3C Standart Renk İsimleri
W3C, 16 tane geçerli renk ismi vermiştir:
Bunlar; aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
Ana Renklerin Çaprazlanması İle Oluşturulmuş Renkler
Yaklaşık 150 adet en çok kullanılan tarayıcılar tarafından desteklenen renk isimleri (İngilizce):
Çaprazlanmış Renk Değerleri
Yıllar önce, bilgisayarların sadece 256 rengi desteklediği zamanlarda, 216 tane Güvenli Web Renkleri (Web Safe Colors), Web standardı olarak önerildi.
Aşağıda bu 216 rengin bulunduğu bir renk paleti bulunmaktadır:
0000000000330000660000990000CC0000FF
0033000033330033660033990033CC0033FF
0066000066330066660066990066CC0066FF
0099000099330099660099990099CC0099FF
00CC0000CC3300CC6600CC9900CCCC00CCFF
00FF0000FF3300FF6600FF9900FFCC00FFFF
3300003300333300663300993300CC3300FF
3333003333333333663333993333CC3333FF
3366003366333366663366993366CC3366FF
3399003399333399663399993399CC3399FF
33CC0033CC3333CC6633CC9933CCCC33CCFF
33FF0033FF3333FF6633FF9933FFCC33FFFF
6600006600336600666600996600CC6600FF
6633006633336633666633996633CC6633FF
6666006666336666666666996666CC6666FF
6699006699336699666699996699CC6699FF
66CC0066CC3366CC6666CC9966CCCC66CCFF
66FF0066FF3366FF6666FF9966FFCC66FFFF
9900009900339900669900999900CC9900FF
9933009933339933669933999933CC9933FF
9966009966339966669966999966CC9966FF
9999009999339999669999999999CC9999FF
99CC0099CC3399CC6699CC9999CCCC99CCFF
99FF0099FF3399FF6699FF9999FFCC99FFFF
CC0000CC0033CC0066CC0099CC00CCCC00FF
CC3300CC3333CC3366CC3399CC33CCCC33FF
CC6600CC6633CC6666CC6699CC66CCCC66FF
CC9900CC9933CC9966CC9999CC99CCCC99FF
CCCC00CCCC33CCCC66CCCC99CCCCCCCCCCFF
CCFF00CCFF33CCFF66CCFF99CCFFCCCCFFFF
FF0000FF0033FF0066FF0099FF00CCFF00FF
FF3300FF3333FF3366FF3399FF33CCFF33FF
FF6600FF6633FF6666FF6699FF66CCFF66FF
FF9900FF9933FF9966FF9999FF99CCFF99FF
FFCC00FFCC33FFCC66FFCC99FFCCCCFFCCFF
FFFF00FFFF33FFFF66FFFF99FFFFCCFFFFFF
Renkler, kırmızı (RED), yeşil (GREEN), mavi (BLUE) renklerinin kombinasyonu ile üretilir.
Renk Değerleri
HTML renkleri hexadecimal değerler ile RGB (kırmızı yeşil mavi) kombinasyonu ile belirtilebilir.
En düşük değer 0 (hex #00) ve en yüksek değer de 255’tir (hex #FF).
Kırmızı Rengini Kapatmak
Eğer kırmızı rengini kapatırsanız geriye 65536 (256 x 256) tane yeşil ve mavi kombinasyonundan oluşan renk paleti kalır.
Kırmızı Rengini Açmak
Eğer kırmızı rengini açarsanız geriye 65536 (256 x 256) tane yeşil ve mavi kombinasyonundan oluşan renk paleti kalır.
 
16 Milyon Farklı Renk
Kırmızı, yeşil ve mavi renklerinin her birinin 256 tane değişik tonu vardır. Bu üçünün kombinasyonu ile 16 milyon tane (256 x 256 x 256) tane renk üretebilirsiniz.
Bir çok son model monitör en az 16384 tane farklı rengi gösterebilmektedir.
Aşağıdaki tabloyu incelerseniz, kırmızının 256 tane değişik tonunu görebilirsiniz. (Mavi ve yeşil kapalıdır.)
KırmızıHEXRGB
#000000<rgb(0,0,0) < td=””>rgb(0,0,0)
#080000rgb(8,0,0)
#100000rgb(16,0,0)
#180000rgb(24,0,0)
#200000rgb(32,0,0)
#280000rgb(40,0,0)
#300000rgb(48,0,0)
#380000rgb(560,0)
#400000rgb(64,0,0)
#480000rgb(72,0,0)
#500000rgb(80,,0)
#580000rgb(88,0,0)
#600000rgb(96,0,0)
#680000rgb(1040,0)
#700000rgb(112,0,0)
#780000rgb(120,0,0)
#800000rgb(128,0,0)
#880000rgb(136,0,0)
#900000rgb(144,00)
#980000rgb(152,0,0)
#A00000rgb(160,0,0)
#A80000rgb(16,0,0)
#B00000rgb(176,0,0)
#800000rgb(184,0,0)
#C00000rgb192,0,0)
#C80000rgb(200,0,0)
#D00000rgb(208,0,0)
#D80000rgb(216,0,0)
#E00000rgb(224,0,0)
#E80000rgb(232,00)
#F00000rgb(240,0,0)
#F80000rgb(248,0,0)
#FF0000rgb(255,0,0)
Gri’nin gölgeleri
Gri rengi aşağıda her ana ışık renklerinden eşit miktarda alınarak oluşturulabilir:
RGB(0,0,0)#000000
RGB(8,8,8)#080808
RGB(16,16,16)#101010
RGB(24,24,24)#181818
RGB(32,32,32)#202020
RGB(40,40,40)#282828
RGB(48,48,48)#303030
RGB(56,56,56)#383838
RGB(64,64,64)#404040
RGB(72,72,72)#484848
RGB(80,80,80)#505050
RGB(88,88,88)#585858
RGB(96,96,96)#606060
RGB(104,104,104)#686868
RGB(112,112,112)#707070
RGB(120,120,120)#787878
RGB(128,128,128)#808080
RGB(136,136,136)#888888
RGB(144,144,144)#909090
RGB(152,152,152)#989898
RGB(160,160,160)#A0A0A0
RGB(168,168,168)#A8A8A8
RGB(176,176,176)#B0B0B0
RGB(184,184,184)#B8B8B8
RGB(192,192,192)#C0C0C0
RGB(200,200,200)#C8C8C8
RGB(208,208,208)#D0D0D0
RGB(216,216,216)#D8D8D8
RGB(224,224,224)#E0E0E0
RGB(232,232,232)#E8E8E8
RGB(240,240,240)#F0F0F0
RGB(248,248,248)#F8F8F8
RGB(255,255,255)#FFFFFF
HTML Renk İsimleri
Aşağıdaki tablo, en çok kullanılan tarayıcılar tarafından desteklenen renkleri ve isimlerini içermektedir. (İngilizce)
Renk İsmiHEX DeğeriRenk
AliceBlue#F0F8FF
AntiqueWhite#FAEBD7
Aqua#00FFFF
Aquamarine#7FFFD4
Azure#F0FFFF
Beige#F5F5DC
Bisque#FFE4C4
Black#000000
BlanchedAlmond#FFEBCD
Blue#0000FF
BlueViolet#8A2BE2
Brown#A52A2A
BurlyWood#DEB887
CadetBlue#5F9EA0
Chartreuse#7FFF00
Chocolate#D2691E
Coral#FF7F50
CornflowerBlue#6495ED
Cornsilk#FFF8DC
Crimson#DC143C
Cyan#00FFFF
DarkBlue#00008B
DarkCyan#008B8B
DarkGoldenRod#B8860B
DarkGray#A9A9A9
DarkGrey#A9A9A9
DarkGreen#006400
DarkKhaki#BDB76B
DarkMagenta#8B008B
DarkOliveGreen#556B2F
Darkorange#FF8C00
DarkOrchid#9932CC
DarkRed#8B0000
DarkSalmon#E9967A
DarkSeaGreen#8FBC8F
DarkSlateBlue#483D8B
DarkSlateGray#2F4F4F
DarkSlateGrey#2F4F4F
DarkTurquoise#00CED1
DarkViolet#9400D3
DeepPink#FF1493
DeepSkyBlue#00BFFF
DimGray#696969
DimGrey#696969
DodgerBlue#1E90FF
FireBrick#B22222
FloralWhite#FFFAF0
ForestGreen#228B22
Fuchsia#FF00FF
Gainsboro#DCDCDC
GhostWhite#F8F8FF
Gold#FFD700
GoldenRod#DAA520
Gray#808080
Grey#808080
Green#008000
GreenYellow#ADFF2F
HoneyDew#F0FFF0
HotPink#FF69B4
IndianRed#CD5C5C
Indigo#4B0082
Ivory#FFFFF0
Khaki#F0E68C
Lavender#E6E6FA
LavenderBlush#FFF0F5
LawnGreen#7CFC00
LemonChiffon#FFFACD
LightBlue#ADD8E6
LightCoral#F08080
LightCyan#E0FFFF
LightGoldenRodYellow#FAFAD2
LightGray#D3D3D3
LightGrey#D3D3D3
LightGreen#90EE90
LightPink#FFB6C1
LightSalmon#FFA07A
LightSeaGreen#20B2AA
LightSkyBlue#87CEFA
LightSlateGray#778899
LightSlateGrey#778899
LightSteelBlue#B0C4DE
LightYellow#FFFFE0
Lime#00FF00
LimeGreen#32CD32
Linen#FAF0E6
Magenta#FF00FF
Maroon#800000
MediumAquaMarine#66CDAA
MediumBlue#0000CD
MediumOrchid#BA55D3
MediumPurple#9370D8
MediumSeaGreen#3CB371
MediumSlateBlue#7B68EE
MediumSpringGreen#00FA9A
MediumTurquoise#48D1CC
MediumVioletRed#C71585
MidnightBlue#191970
MintCream#F5FFFA
MistyRose#FFE4E1
Moccasin#FFE4B5
NavajoWhite#FFDEAD
Navy#000080
OldLace#FDF5E6
Olive#808000
OliveDrab#6B8E23
Orange#FFA500
OrangeRed#FF4500
Orchid#DA70D6
PaleGoldenRod#EEE8AA
PaleGreen#98FB98
PaleTurquoise#AFEEEE
PaleVioletRed#D87093
PapayaWhip#FFEFD5
PeachPuff#FFDAB9
Peru#CD853F
Pink#FFC0CB
Plum#DDA0DD
PowderBlue#B0E0E6
Purple#800080
Red#FF0000
RosyBrown#BC8F8F
RoyalBlue#4169E1
SaddleBrown#8B4513
Salmon#FA8072
SandyBrown#F4A460
SeaGreen#2E8B57
SeaShell#FFF5EE
Sienna#A0522D
Silver#C0C0C0
SkyBlue#87CEEB
SlateBlue#6A5ACD
SlateGray#708090
SlateGrey#708090
Snow#FFFAFA
SpringGreen#00FF7F
SteelBlue#4682B4
Tan#D2B48C
Teal#008080
Thistle#D8BFD8
Tomato#FF6347
Turquoise#40E0D0
Violet#EE82EE
Wheat#F5DEB3
White#FFFFFF
WhiteSmoke#F5F5F5
Yellow#FFFF00
YellowGreen#9ACD32


Fpajans.com’dan sizin için HTML Hızlı Liste bilgisi. Yazdır, klasörle, at çantana, kopyala vs.
HTML Temel Dökümanlar
<html>

<head>

<title>Buraya başlık</title>

</head>
<body>

Görünecek metinler buraya

</body>
</html>
Başlık Öğeleri
<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>
Metin Öğeleri
<p>Bu bir paragraf</p>

<br> (satır atlama)

<hr> (yatay çizgi)

<pre>Biçimlendirilmemiş yazılar buraya</pre>
Mantıksal Stiller
<em>Vurgulu metin/em>

<strong>Güçlü metin</strong>

<code>Bilgisayar programlama kodu</code>
Fiziksel Stiller
<b>Koyu</b>

<i>İtalik</i>
Linkler ve Image Öğeleri
<a href=”http://www.fpajans.com”>Bu bir link</a>

<a href=”http://www.fpajans.com”><img src=”resim dosyasının yolu” alt=”Alternatif metin></a>

<a href=”mailto:info@fpajans.com”>E-mail gönder </a>
Sırasız Liste
<ul>

<li>İlk madde</li>

<li>İkinci Madde</li>

</ul>
Sıralı Liste
<ol>

<li>İlk madde</li>

<li>İkinci Madde</li>

</ol>
Tanımlama Listesi
<dl>

<dt>İlk terim</dt>

<dd>Açıklaması</dd>

<dt>İkinci terim</dt>

<dd>Açıklaması</dd>

</dl>
Tablolar (Tables)
<table border=”1″>

<tr>

<th>Bir başlık</th>

<th>Bir başlık daha</th>

</tr>

<tr>

<td>metin</td>

<td>metin</td>

</tr>

</table>
Çerçeveler (Frames)
<frameset cols=”25%,75%”>

<frame src=”sayfa1.htm”>

<frame src=”sayfa22.htm”>

</frameset>
Formlar (Forms)
<form action=”http://www.fpajans.com/html_form_action.php” method=”post/get”>
<input type=”metin” name=”soyisim” value=”GZO” size=”30″ maxlength=”50″>

<input type=”şifre”>

<input type=”checkbox” checked=”checked”>

<input type=”radio” checked=”checked”>

<input type=”submit”>

<input type=”reset”>

<input type=”hidden”>
<select>

<option>Elmalar

<option selected>Muzlar

<option>Kirazlar

</select>
<textarea name=”Yorum” rows=”60″ cols=”20″></textarea>
</form>
Özel Karakterler
&lt; ifadesi, bununla aynı çıktıyı verir: <

&gt; ifadesi, bununla aynı çıktıyı verir: >

&#169; ifadesi, bununla aynı çıktıyı verir: ©
Diğer Öğeler
<!– Bu bir yorum –>
<blockquote>

Bu metin başka bir metinden alıntılanmış bir parçadır.

</blockquote>
<address>

Adres 1<br>

Adres 2<br>

Şehir<br>

</address>
 Previous slide Next slide
Fikir Proje olarak sizlere elimizden geldiğince, yararlı bilgiler paylaşmaya çalışıyoruz. Sizlerde bu paylaşımlarımızı, sosyal ağ ve diğer ağlarınızda paylaşırsanız seviniriz. Bilgi paylaştıkça çoğalır.
Benzer Yazılar

 
PinExt HTML Temel Dersler   Video ve Görsel Anlatım

Bir Yorum Yazar Mısın?









Yorumu Gönder