HTML kodları

Web tasarımının temeli olan HTML kodları ve kullanımları ile ilgili kısa notlarım.

Bu sayfada _ boşluk anlamında kullanılmıştır. Başında _ olanlar bir önceki etiketin içine uzantı olarak yazılmalıdır.
Yararlı olması dileğiyle...

Renkler: ".." işaretleri arasına red, blue, gold... gibi veya sırasıyla kırmızı yeşil mavi renkleri 16'lık sistemde verilerek de yazılabilir. (#FF0000 saf kırmızı, #00FF00 saf yaşil, #0000FF saf mavi)

<html>bütün sayfayı kaplar</html>
<head>dosya bilgileri</head>

<title>başlık</title>
<meta_name="description"_content=".."> [sayfa açıklaması]
<meta_name="keyword"_content=".."> [sayfanın anahtar kelimeleri]
<meta_http-equiv="refresh"_content=".."> [saniye olarak yenileme süresi;adres](sayı;url=http://...)
<style>style</style>
A:link/visited/active/hover
{color: ..; text-decoration: none/underline; font-weight: bold}
Ve bunun gibi birçok tag için çeşitli değerler atamak mümkündür.

<body>gövde</body>

_bgcolor=".." [arka plan rengi]
_background=".." [arkaplan resmi](http://www..., image.gif, ...)
_bgproperties=fixed [arka plan resminin sabit kalması için]
_link=".." [bağlantıların rengi]
_vlink=".." [ziyaret edilmiş bağlantı rengi]
_alink=".." [bağlantıya basıldığı andaki rengi]
_text=".." [yazı rengi]
_leftmargin=".." [sol girinti](sayı)
_rightmargin=".." [sağ girinti](sayı)
_topmargin=".." [üst girinti](sayı)
_bottommargin=".." [alt girinti](sayı)
_onLoad="window.defaultStatus='..'" [durum cubuğunda sabit yazı](merhaba, ...)
_onLoad="alert('..');" [java script uygulaması, sayfa açılırken ekranda beliren uyarı] (hoşgeldiniz, ...)
_onUnload="alert('..');" [java script uygulaması, sayfa kapanırken ekranda beliren uyarı] (güle güle, ...)
_onBlur='self.focus()' [Sayfanın her zaman en üstte bulunmasını sağlar.]

Kullanılabilecek etiketler:
<b>kalın</b>
<i>italik</i>
<cite>italik</cite>
<dfn>italik</dfn>
<u>altı çizili</u>
<s>üstü çizili</s> (<strike>)
<tt>daktilo yazısı</tt>
<samp>literatür yazı</samp>
<q>alıntılar</q>
<note>notlar</note>
<em>önemle belirtilenler</em>
<strong>kalın ve yüksek</strong>
<code>ciddi kesin</code>
<adress>adres</adress>
<sup>üst karakter</sup>
<sub>alt karakter</sub>
<center>ortalama</center>
<code>sembolleri aynen yazar</code>
<var>script sembollerini aynen yazar</var>
<big>font büyüklüğünü yükseltir</big>
<small>font büyüklüğünü küçültür</small>
<listing>küçültür değiştirir</listing>
<blockquote>biraz içerden blok oluşturur</blockquote>
<spacer_type="horizontal"_size=".."> [boşluk adedi](sayı)
<br>alt satıra geçer (<wbr> <nobr>)
<plaintext>not defterindeki gibi gösterir aradaki tagları işlemez</plaintext>
<xmp>satıra yalnız yazar</xmp>
<div>hizalama</div>

_align=".." [hizalanma](left, right, center, justify)
_style="Z-INDEX: ..; POSITION: absolute" [layer sayısı (büyük sayı küçüğün üstünde görünür)]

<p> bir satır boş bırakır (1 adet kullanılabilir)</p>

_align=".." [paragraf hizalanması](left, right, center, justify)

<pre>yazıldığı düzende görüntüler</pre>

_width=".." [genişlik](sayı)

<hr>bir satır çizgi çeker

_width=".." [genişlik](sayı, 75%)
_align=".." [yer](left, right, center)
_size=".." [kalınlık](sayı)
_color=".." [renk]
_noshade [gölgesiz]

Karakter:
<font> yazı seçenekleri</font>

_face=".." [yazı şekli](Verdana, Arial, Helvetica, ...)
_size=.. [büyüklük](1 den 7'ye sayılar, +3, -1, ...)
_color=".." [renk]

Kayan yazı:
<marquee>marque</marquee>

_direction=.. [yazının başlama yeri](left, right, down, up)
_behavior=.. [yatayda haraket tipi](scroll, slide, alternate)
_bgcolor=".." [arkaplan rengi]
_loop=".." [tekrar sayısı](sayı, infinite)
_scrollamount=.. [iki görünüş arası uzaklık](sayı, 1,6)
_scrolldelay=.. [hız](sayı ,50)
_hspace=.. [üst alt boşluk](sayı ,0)
_vspace=.. [sağ sol boşluk](sayı, 0)
_width=.. [genişlik](sayı)
_height=.. [yükseklik](sayı)
_bgcolor=.. [arka plan rengi]
_align=.. [yazı yeri](left, right, top, bottom, middle)

Tablo oluşturmak:
<table>tablo</table>

_border=.. [çerçeve](sayı)
_width=".." [genişlik](sayı, 75%, ...)
_height=".." [yükseklik](sayı, 100%, ...)
_cellspacing=".." [hücre arası boşluk](sayı)
_cellpadding=".." [hücre-bilgi arası boşluk](sayı)
_bgcolor=".." [arkaplan rengi]
_background=".." [arka plan resmi](adresi)
_bordercolor=".." [çerçeve rengi]
_bordercolorlight=".." [çerçeve rengi]
_bordercolordark=".." [çerçeve rengi]
_align=".." [yaslamak](left, right)
_valing=".." [yeri](top, bottom, center)
_hspace=".." [dikeyde yazılarla arasında boşluk](sayı)
_vspace=".." [yatayda yazılarla arasında boşluk](sayı)
<caption>başlık</caption>
_align=".." [yazı yeri](left, right, center)
_valign=".." [yazı yeri](top, middle, bottom, baseline)

<tr>yeni satır</tr>

_align=".." [yazı yeri](left, right, center)
_valign=".." [yazı yeri](top, middle, bottom, baseline)
_bgcolor=".." [arkaplan rengi]
_background=".." [arka plan resmi](adresi)
_bordercolor=".." [çerçeve rengi]
_bordercolorlight=".." [çerçeve rengi]
_bordercolordark=".." [çerçeve rengi]

<td>yeni hücre</td> (<th>)

_width=".." [genişlik](sayı, 25%, ...)
_height=".." [yükseklik](sayı, 5%, ...)
_rowspan=".." [dikeyde hücre birleştirmek](sayı)
_colspan=".." [yatayda hücre birleştirmek](sayı)
_bgcolor=".." [arkaplan rengi]
_align=".." [yazı yeri](left, right, center)
_valign=".." [yazı yeri](top, middle, bottom, baseline)
_nowrap []
_background=".." [arka plan resmi](adresi)
_bordercolor=".." [çerçeve rengi]
_bordercolorlight=".." [çerçeve rengi]
_bordercolordark=".." [çerçeve rengi]

<multicoll>sutunlar</multicoll>

_cols=".." [sutun sayısı](sayı)
_gutter=".." [sutun genişliği](sayı)
_width=".." [genişlik](sayı)

Liste oluşturmak:
<ul>sırasız liste</ul>(biraz içeriden başlatır)(<dir>, <menu>)

_type=".." [mermi şekli](disc, sircle, square)
_compact []

<ol>sıralı liste</ol>

_type=".." [numaralandırma şekli](1, a, A, i, I)
_start=.. [başlama değeri](sayı)
_compact []

<li>her madde başına

Resim eklemek:
<img> resim

_src=".." [adresi](baslik.gif, ...)
_lowsrc=".." [ikinci resimadresi](baslik2.gif, ...)
_align=".." [yaslamak](left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom)
_border=.. [çerçeve](sayı)
_alt=".." [resmin yerine yazı](yazı)
_hspace=".." [sağ sol boşluk](sayı)
_vppace=".." [üst alt boşluk](sayı)
_width=".." [genişlik](sayı, 25%, ...)
_height=".." [yükseklik](sayı, 30%, ...)
_dynsrc=".."_start=fileopen|mauseover [resimden sonra görüntü](film.avi, ...)

<embed>obje eklemek</embed>

_src=".." [adresi](index.html)
_width=.. [genişlik](sayı, 25%, ...)
_height=".." [yükseklik](sayı, 30%, ...)

Bağlantılar:
<a_name="..">parçaya isim verme (parca-adi)</a>
<a_href="mailto:mailiniz?subject:konu&cc=diğermail&body=mesaj">
<a_href="..">bağlantı</a> (http://www..., ornek.htm, #parca-adi)

_target=".." [bağlantının nerede açılacağı]( çerçeve-ismi, _top, _parent, _blank, _self)

<base target=".."> [bundan sonraki bağlantıların açılacağı çerçeveyi belirler](çerçeve ismi)

Harita tanımlamak:
<map>resmi parçalara ayırmak</map>

_name=".." [isim]
<area>her tıklanabilir alan için

_shape=.. [alan şekli](rect =>dikdörtgen, circle =>daire, poly =>çokgen)
_coords=".." [koordinatlar](karşılıklı iki köşe, merkez-yarı çap, (,) koyarak sırayla koordinatlar)
_href=".." [bağlantı](http://www..., ornek.htm, #parca-adi)
_alt=".." [resmin yerine yazı](yazı)
<img>kullanılacak resim
_src=".." [adresi](baslik.gif)
_width=".." [genişlik](sayı, 25%, ...)
_height=".." [yükseklik](sayı, 30%, ...)
_usemap=".." [harita ismi]
_border=.. [çerçeve](sayı)

Formlar:

<form>form</form>

_methot="post"
_action=".." [bağlantı noktası](mailiniz?subject:konu, sayfa adresi)
_enctype="application/xwwwformurlencoded"
<input type="hidden"_name="admin"_value="mailiniz">
<input type="hidden"_name="subject"_value="mail başlığı">
<input>her bir giriş için

_type=.. [tek satırlık girişler](text, radio, password,checkbox, button, hidden, image)
radio'da name aynı, value farklı
checkbox'da name farklı, value farklı
_name=".." [satıra isim vermek](isim)
_value=".." [text'de otomatik görüntülenecek yazı, radio'da gönderilecek değer]
_disabled_value=".." [text'de değiştirilemez yazı]
_readonly_value=".." [text'de değiştirilemez yazı]
_size=.. [text'de görünür boy](sayı)
_maxlength=.. [text'de max. karakter sayısı](sayı)
_checked (işaretlenmiş)
<textarea>yazı alanı</textarea>
_name=".." [isim]
_cols=.. [genişlik](sayı)
_rows=.. [yükseklik](sayı)
_wrap=".." [yazı durumu](soft, off, vittual, physical)
_align=".." [yaslamak](left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom)
_disabled_value=".." [text'de otomatik görüntülenecek yazı]
_readonly_value=".." [text'de otomatik görüntülenecek yazı]
<select>seçmeli kutu</select>
_name=".." [isim]
_size=.. [satır sayısı](sayı)
<option selected>seçili değer</option>
<option>her bir değer için</option>

_value=".." [değer]
_name=".." [isim]

<input_type="submit"_value="gönder">
<input_type="reset"_value="temizle">
<input_type="hidden"_name="required_fields"_value="..">[doldurulması şart olan satırlar](name,url)
<input_type="hidden"_name="next_url"_value="..">[form onaylandıktan sonra gidilecek sayfa](http://www...)

Çerçeveler:
kesinlikle <body> kullanılmaz
<frameset>çerçeve takımı</frameset>

_cols=".." [yanyana çerçeveler için büyüklük](150,*,50 {mutlaka 1 adet * olacak})
_rows=".." [altalta çerçeveler için büyüklük](150,*,50 {mutlaka 1 adet * olacak})
_framespacing=.. [çerçeveler arası boşluk](sayı)
_frameborder=".." [sınır çizgisi](yes, 1, no, 0)
_border=".." [çerçeve](sayı]
_bordercolor=".." [çerçeve rengi]
<frame>her bir çerçeve

_src=".." [çerçevede hangi sayfanın görüntüleceği](index.html, ...)
_name=".." [çerçeve ismi]
_marginwidth=.. [sağ, sol kenar boşlukları](sayı)
_marginheight=.. [alt, üst kenar boşlukları](sayı)
_scrolling=".." [içeriğin kaydırılması](auto, yes, no)
_frameborder=".." [kenar çizgisi](yes, no)
_bordercolor=".." [renk]
_noresize [fare ile boyut değiştirilemez]

<noframes>çerçeve dışı</noframes>

<body>sayfa özellikleri</body>
_leftmargin=".." [sol boşluk](sayı)
_topmargin=".." [üst boşluk](sayı)
_marginwidth=".." [genişlik](sayı)
_marginheight=".." [yükseklik](sayı)
ve diğer body komutları

<a_href=".."_target=".."> [bağlantının nerede açılacağı](çerçeve-ismi, top, parent, blank)

Web Sitesi Tasarımı