Web Sitesi Tasarımı
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><body>gövde</body>
<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.
_bgcolor=".." [arka plan rengi]Kullanılabilecek etiketler:
_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.]
<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)<p> bir satır boş bırakır (1 adet kullanılabilir)</p>
_style="Z-INDEX: ..; POSITION: absolute" [layer sayısı (büyük sayı küçüğün üstünde görünür)]
_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%)Karakter:
_align=".." [yer](left, right, center)
_size=".." [kalınlık](sayı)
_color=".." [renk]
_noshade [gölgesiz]
<font> yazı seçenekleri</font>
_face=".." [yazı şekli](Verdana, Arial, Helvetica, ...)Kayan yazı:
_size=.. [büyüklük](1 den 7'ye sayılar, +3, -1, ...)
_color=".." [renk]
<marquee>marque</marquee>
_direction=.. [yazının başlama yeri](left, right, down, up)Tablo oluşturmak:
_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)
<table>tablo</table>
_border=.. [çerçeve](sayı)<tr>yeni satır</tr>
_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)
_align=".." [yazı yeri](left, right, center)<td>yeni hücre</td> (<th>)
_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]
_width=".." [genişlik](sayı, 25%, ...)<multicoll>sutunlar</multicoll>
_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]
_cols=".." [sutun sayısı](sayı)Liste oluşturmak:
_gutter=".." [sutun genişliği](sayı)
_width=".." [genişlik](sayı)
<ul>sırasız liste</ul>(biraz içeriden başlatır)(<dir>, <menu>)
_type=".." [mermi şekli](disc, sircle, square)<ol>sıralı liste</ol>
_compact []
_type=".." [numaralandırma şekli](1, a, A, i, I)<li>her madde başına
_start=.. [başlama değeri](sayı)
_compact []
Resim eklemek:
<img> resim
_src=".." [adresi](baslik.gif, ...)<embed>obje eklemek</embed>
_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, ...)
_src=".." [adresi](index.html)Bağlantılar:
_width=.. [genişlik](sayı, 25%, ...)
_height=".." [yükseklik](sayı, 30%, ...)
<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]Formlar:<area>her tıklanabilir alan için
_shape=.. [alan şekli](rect =>dikdörtgen, circle =>daire, poly =>çokgen)<img>kullanılacak resim
_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ı)_src=".." [adresi](baslik.gif)
_width=".." [genişlik](sayı, 25%, ...)
_height=".." [yükseklik](sayı, 30%, ...)
_usemap=".." [harita ismi]
_border=.. [çerçeve](sayı)
<form>form</form>
_methot="post"Çerçeveler:
_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)<textarea>yazı alanı</textarea>
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ş)_name=".." [isim]<select>seçmeli kutu</select>
_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ı]_name=".." [isim]<input_type="submit"_value="gönder">
_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="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...)
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})<noframes>çerçeve dışı</noframes>
_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]
<body>sayfa özellikleri</body><a_href=".."_target=".."> [bağlantının nerede açılacağı](çerçeve-ismi, top, parent, blank)
_leftmargin=".." [sol boşluk](sayı)
_topmargin=".." [üst boşluk](sayı)
_marginwidth=".." [genişlik](sayı)
_marginheight=".." [yükseklik](sayı)
ve diğer body komutları
