Tam Anlamiyla HTML nedir kodlari nasil yapilir

~Cømeßâck~ · 8 Eyl 2012

Tam Anlamiyla HTML nedir kodlari nasil yapilir [Dokuman]

Html Dili Nedir

HTML Dili HTML Dosyası Nedir? HTML,Hyper Text Markup Language'in kısaltmasıdır. HTML çeşitli anlamlara gelen kodlamalar (tag) ve düz metinden oluşur. Bu kodlar ancak bir Web Browser (Internet Explorer, Firefox) tarafından anlamlı hale getirilebilir. Bu kodla yazılmış dosyaların uzantıları genelliklehtml ya dahtm'dir. HTML, en basit yolla bir not defteri ile yazılabilir. Denemek İster Misiniz? Bir not defteri açın ve aşağıdaki yazılanları bu not defterine yazıp deneme.html olarak kaydedin. Sonra da bu dosyayı açın.HTML Kodu <html>
<head> <title>Benim Sayfam</title> </head>
<body> Bu benim ilk sayfam... </body>
</html> HTML Görünümü Bu benim ilk sayfam... Şimdi isterseniz bahsedilen HTML kodlarının çalışma mantığını ve ne işe yaradıklarını öğrenelim...

~Cømeßâck~ · 8 Eyl 2012

HTML'ye Genel Bakış HTML Kodlarını Anlamak Bu dili kodlamak için öncelikle HTML, XHTML, XML gibi dillerin temel yapı taşı olan elementlerin (aynı zamanda html kodu, html etiketi, html tagı olarak geçebilir) nasıl çalıştıkları hakkında bilgi vermek gerekir. Bu kodlar< ile başlayıp> ile biten anahtarlardır. HTML Kodu <html> Tüm HTML belgesi bu şekil hazırlanmış kodlardan ve aralarında geçen metin (bunlar arama motorları tarafından ya da ziyaretçi tarafından çoğunlukla görülen düz metinler)'den oluşur. Bir HTML kodu ile ilgili bir özellik belirtilecekse tırnak işareti arasında özellik="değer" şeklinde yazılır: HTML Kodu <body bgcolor="black"> Hangi HTML tagının hangi işe yaradığı ve hangi özellikleri desteklediğini ilerleyen sayfalarda göreceksiniz. Şimdi elementler hakkında biraz daha fazla bilgi edinelim...

~Cømeßâck~ · 8 Eyl 2012

Elementler Özellikleri HTML dili tag, etiket adlarını verdiğimiz kodlamalardan oluşur. Bu kodlar< ile başlayıp> ile biterler. Bir kod genellikle iki parçadan oluşur. Bu elementin başladığı ve bittiği kodlardır. Element bittiği zaman bölü işareti (/) ile başlangıçtaki değerin yazılması yeterlidir. Örneğin: <b>metin...</b> Tabi her kod bu duruma uymaz. Bazı kodlar için kapanma anahtarı kullanılmaz, onun yerine bu işaret başlangıç kodunun sonuna eklenir. Örneğin: <br />, <hr /> Bu kodlar büyük-küçük harf fark etmeden işler. Yani <b> ile <B> arasında fark yoktur. Buna karşın W3C standartları gereği küçük harf kullanmak daha yararlıdır. Aşağıda başlayan ve biten bir kalın yazma elementi görmekteyiz: HTML Kodu <b>Bu bir kalın yazıdır...</b> Değişmez Sayfa Yapısı Bir HTML dosyası her zaman aşağıdaki şekilde kodlanmalıdır: HTML Kodu <html>
<head> <title>Sayfa Başlığı</title>
(**** etiketler, scriptler, RSS yolları ve CSS dosyası) </head>
<body> (Diğer tüm elementler ve düz metin) </body>
</html> W3C Standardında bir HTML belgesinde bu kodlar olmazsa olmazdır. Sonuçta yerlerini ters yazsanız da ya da düz metin yazsanız da browser tarafından görünür fakat HTML ön bilgileri, sayfa başlığı, içeriğin bulunduğu yer tarayıcı tarafından görülmez ve hem arama motorları, hem ziyaretçi, hem de browser için bazı sıkıntılar doğurabilir.. Şimdi buradaki standart diyebileceğimiz kodlar ve aralarında geçen html kodlarını incelemeye başlayalım...

~Cømeßâck~ · 8 Eyl 2012

Özellikler Daha önceden de söylediğimiz gibi, HTML kodları çeşitli özellikleri desteklemekte ve bunları ozellik="deger" tarzı bir kullanımla belirtmekteydik. Şimdi bunu örnekleyelim: HTML Kodu <h1 align="center">Ortalanmış Bir Başlık</h1> HTML Görünümü H1 Başlık Align özelliği h1, div, td, p gibi anahtarlarda desteklenen sayfa düzeni özelliğidir. Bu değer left (sola), right (sağa) ve center (ortalanmış) olabilir. Başka bir örnek, tablo kenarlığını tarayıcıya anlatmak: <table> - bir tablo başlattığımızı anlattık. <table border="0"> - bir tablo başlattığımızı, aynı zamanda bu tablonun kenarlığı olmadığını (0) anlattık. Bir özelliği yazarken tırnak işareti ya da ayıraç kullanacaksak dikkat etmemiz gereken nokta kullanmadığımız karakterle özelliği belirtmek. Örneğin: HTML Kodu <a href="#" title="Murat'ın sayfası için tıklayın..">Benim Bağlantım 1</h1>
<a href="#" title='"Murat" ın sayfası için tıklayın..'>Benim Bağlantım 2</h1> Bundan sonraki derslerde nesneleri, kullanabileceğiniz özellikleri ile birlikte ta

~Cømeßâck~ · 8 Eyl 2012

Biçimlendirme HTML dosyamızdaki metinleri biçimlendirirken (kalınlık, sağa yatık yazma, vurgu vb.) çeşitli kodlardan yararlanırız. Bunların birbirinden farklı en önemlilerine aşağıdaki listeden ulaşabilirsiniz. Tüm metin biçimlendirme çeşitleri ise aşağıdaki örnekte verilmiştir. Etiket Anlamı <b> Kalın yazmak. <i> Sağa yatık (italik) yazmak. <u> Altı çizili yazmak. <del> Üstü çizili yazmak. <sup> Üs yazmak. <sub> Alt hizada yazı yazmak. <big> Büyük yazı. <small> Küçük yazı. HTML Kodu <b>Kalın bir yazı</b><br />
<i>Sağa yatık bir yazı</i><br />
<u>Altı çizili yazı.</u><br />
<del>Üstü çizili yazı.</del><br /><br />
Normal Metin <sub>Yazı hizasının altında küçük yazı.</sub><br /><br />
Normal Metin <sup>Yazı hizasının üstünde küçük yazı.</sup><br /><br /> <big>Büyük bir yazı</big><br />
<small>Küçük bir yazı</small><br /><br /> <em>Vurgulu bir yazı</em><br />
<strong>Vurgulu bir yazı</strong><br />
<ins>Vurgulu bir yazı.</ins><br />
<s>Vurgulu bir yazı.</s><br />
<strike>Vurgulu bir yazı.</strike><br /> HTML Görünümü Kalın bir yazı Sağa yatık bir yazı Altı çizili yazı. Üstü çizili yazı. Normal Metin Yazı hizasının altında küçük yazı. Normal Metin Yazı hizasının üstünde küçük yazı. Büyük bir yazı
Küçük bir yazı Vurgulu bir yazı Vurgulu bir yazı Vurgulu bir yazı. Vurgulu bir yazı. Vurgulu bir yazı. Yazı Tipi, Yazı Boyutu ve Renk Seçimi Bunun için <font> kodunu kullanıyoruz. Örneği inceleyelim: HTML Kodu <font face="Tahoma" size="1" color="red">Bu 1. örnek yazı..</font><br />
<font face="Verdana" size="2" color="blue">Bu 2. örnek yazı..</font><br />
<font face="Times New Roman" size="3" color="#CCFFCC">Bu 3. örnek yazı..</font><br /> HTML Görünümü Bu 1. örnek yazı.. Bu 2. örnek yazı.. Bu 3. örnek yazı.. face="yazıtipi" - Yazı tipi, font klasöründeki adıyla yazılır. size="boyut" - 1-6 arasında bir değerdir. color="renk" - Yazı rengini burdan belirtiriz. Renklerle ilgili bilgi verilecek.

~Cømeßâck~ · 8 Eyl 2012

Özel Karakterler Bazı karakterler HTML dilinde çeşitli anlamlara gelebilmektedir. Örneğin (<) karakteri bir HTML kodunun başladığını anlatır ve bunu düz metin kısmında kullanmak kodlamalarda soruna yol açabilir. Böyle durumlarda (&) ya da (#) ile başlayan ve (

ile biten bazı özel kelimelerden yararlanarak özel karakterleri kullanmalıyız. Kaynak koduna baktığımızda bunlar < şeklinde görülmektedir. Fakat tarayıcının (<) işaretini oluşturduğunu görürüz. Gözardı Edilemez Boşluklar Normalde HTML dilinde boşluk ( ) karakterleri bazı özel durumlar hariç sayılmaz. Yani 10 tane boşluk kullanmış da olsanız bu tarayıcı tarafından boşluk yokmuş gibi algılanır. Bu durumu da özel karakterlerle halledebiliriz. Böyle bir durumda boşluk bırakmak için kullanacağımız metin ( )'dir. Aşağıda iki farklı örnekte birinde 10 tane boşluk karakteri, diğerinde 10 tane kullanıldı. Bu 10'luk standart boşluk.
Bu 10'luk özel boşluk Hedef Tanım Kullanım (Boşluk) Boşluk vermeye yarar. < Küçüktür işareti. < > Büyüktür işareti. > & Ve işareti. & " Tırnak. " ' Ayıraç. ' Bunun dışında fazla kullanılmamakla birlikte © (©), ® (®) gibi işaretlerinde özel kullanım şekilleri vardır. Bunların tamamı HTML Entities olarak geçer.

~Cømeßâck~ · 8 Eyl 2012

Bağlantılar Bir HTML belgesinde bağlantı (link) verme işini <a href="adres"> koduyla yapmaktayız. Link verdiğimiz kelime ortaya gelecek şekilde yine </a> ile bağlantı verme işini sonlandırmaktayız. Bu şekilde başka bir sayfaya ya da web sitesie bağlantı veririz. Aynı zamanda bu yolla bir müzik dosyası, bir zip arşivi vb. de link vermeniz mümkün. Aşağıda sitenin bir sayfasına, başka bir siteye, mail adresine ve bir dosyaya link örnekleri görmekteyiz. Bunları inceleyelim: HTML Kodu <a href="index.html">HTML Dersleri için buraya tıklayın (Sayfa)</a> <a href="http://sitesi.web.tr/">Ana sayfa için buraya tıklayın (Site).</a> <a href="mailto:[email protected]">Bize e-mail göndermek için buraya tıklayın (E-mail).</a> <a href="http://html.sitesi.web.tr/images/html.gif">Site logosunu görmek için buraya tıklayın (GIF resim dosyası).</a> HTML Görünümü Ana sayfa için buraya tıklayın (Sayfa). Ana sitemiz için buraya tıklayın (Site) Bize e-mail göndermek için buraya tıklayın (E-mail). Site logosunu görmek için buraya tıklayın (GIF resim dosyası). Dikkat: Bir siteye link verirken The web site is under construction şeklinde ya da siteadresi.com şeklinde yazarsanız link yine sayfanızda bu bağlantıyı arar. Bunun için başka bir siteye link verirken mutlakahttp:// ile başlanmalıdır. Bağlantıyı Yeni Pencerede Açmak Bunun içintarget="_blank" özelliğini kodumuza ekleriz. Böylece bağlantı sayfamızda değil yeni bir pencerede açılacaktır: HTML Kodu <a href="http://sitesi.web.tr/" target="_blank">Ana sitemizi yeni bir sayfada açmak için tıklayın..</a> HTML Görünümü Ana sitemizi yeni bir sayfada açmak için tıklayın.. Sayfa İçi Bağlantılar Bazı durumlarda (özellikle uzun sayfalarda) sayfanın belirli bir bölümüne link vermek gerekebilir. Bunun için name="" özelliğinden yararlanırız. Böyle durumlarda href="" özelliği kullanılmaz. Öncelikle sayfa içinde bağlantı vereceğimiz yere giderek <a name="etiket"></a> şeklinde yer imimizi belirtiyoruz. Böylece sayfanın bu kısmını işaretledik. Şimdi bu işarete link vermek için sayfa içerisinde başka bir yerde (en aşağıda ya da en yukarıda olabilir) <a href="#etiket">(metin)</a> şeklinde işaretlediğimiz yere link veriyoruz. HTML Kodu <a href="#top">Sayfa Başı</a> HTML Görünümü Sayfa Başı Örnekte görüldüğü gibi tıklandığı zaman daha önce <a name="top"></a> ile Bağlantılar yazısının hemen üstünde belirttiğimiz yere gidiyor. Bu bölüme dışarıdan link vermek için href="baglantilar.html#top" kullanılabilir. Sayfa yüklendikten sonra işaretli kısım görünecekt

~Cømeßâck~ · 8 Eyl 2012

Frame Kullanmak Frame, HTML'de birden fazla belgeye tek bir sayfada yer vermek amacıyla açılan pencereler. Bu şekilde sağda farklı bir pencere ve içerik, solda farklı bir pencere ve içerik olacaktır. Genellikle bir pencere linklerin bulunduğu alan, diğer pencere ise asıl içeriğin bulunacağı alan olarak kullanılır. Arama Motoru optimizasyonu için olumsuz etkileri olduğu için genellikle kullanılmaz. Biz yine de en önemli kısımlarıyla ele alalım: Pencereleri bölmeye <frameset> koduyla başlarız. Dikkat etmemiz gereken <body></body> arasında yazılamaması gerektiğidir. Bu kısım frame tekniği desteklemeyen tarayıcılar için <noframes></noframes> arasında kullanılacaktır. HTML Kodu <frameset cols="25%,75%"> <frame src="frame_a.htm">
<frame src="frame_b.htm"> </frameset> Burada cols="deger1,deger2" şeklinde bir kullanım dikkatinizi çekmiştir. Burada belirteceğimiz değerler pencere sütunlarının oranlarını belirtmektedir. yatay pencereler kullanacaksak bu kezrows="deger1,deger2" şeklinde kullanmalıyız. Bahsi geçen değerler yüzde (%) olarak ifade edilebileceği gibi piksel olarak da yazılabilir. Eğer bir pencerenin boyutu, diğeri için belirtilen dışındaki alan olacaksa (*) kullanırız. Bir örnek: cols="200,*" yazarsak. İlk pencere (frame_a.htm) 200 piksel genişliğinde olacaktır, diğer pencere ise (frame_b.htm) geriye kalan tüm alanı kaplayacaktır. Son olarak şunu ekleyelim, değerler pencere sayısı kadar yazılacaktır. Eğer 3 pencere kullansaydık. Bu kez 3 pencere için sırasıyla ayarlama yapacaktık: cols="200,25%,*" gibi. HTML Kodu <frameset cols="25%,25%,*"> <noframes> <body>Eger tarayıcı frame desteklemiyorsa...</body> </noframes>
<frame src ="venus.htm" />
<frame src ="mars.htm" />
<frame src ="jupiter.htm" /> </frameset> Frame Desteklemeyen Tarayıcılar - noframes Bunun için frameset açılış ve kapanış etiketleri arasında <noframes>(tarayıcınız frame desteklemiyor mesajı)</noframes> şeklinde bir bölüm koyuyoruz. Burası html sayfamızın devamıymış gibi <body></body> tagları arasına almalıyız. Yatay ve Dikey Pencereleri Bir Arada Kullanmak Bunun için frame içinde frame kullanmalıyız. Üst tarafta yatay bir pencere ve hemen altında sağ ve sol olarak ikiye bölünmüş bir pencere örneği verecek olursak: HTML Kodu <frameset rows="50%,50%">
<frame src="frame_a.htm"> <frameset cols="25%,75%"> <frame src="frame_b.htm">
<frame src="frame_c.htm"> </frameset> </frameset> Frame Kenarlığı ve Pencere Boyutlarını Sabitleme Frameleri birbirinden ayıran çizgiyi yok etmek için <frame src="#"> kodunaframeborder="0" özelliği eklememiz yeterlidir. Pencere boyutları sizin belirttiğiniz gibi başlangıçta çalışmakta fakat kullanıcı tarafından değiştirilebilmektedir. Bunu engellemek için <frame src="#"> kodunanoresize="noresize" özelliği eklememiz yeterlidir. IFRAME Kullanmak Bunun yukarıda anlatılandan farklı yanı normal bir HTML belgesinde farklı bir sayfa ya da site için pencere açmanıza yaramaktadır. Pencere içerisinde boyutu belirttiğiniz boyutlarda olmak üzere belirttiğiniz site görünecektir: HTML Kodu <iframe src="http://kod.anime.web.tr/google.htm" frameborder="0" width="184" height="94" scrolling="no"></iframe> HTML Görünümü Ara Web Türkçe Sayfalar Yukarıda görüldüğü gibi Google Search adresini sayfamızda kullandık. iframe kodu içerisinde geçen: frameborder="0" - Kenarlık kullanılmayacağını belirtir. width="184" - 184 piksel genişlikte olacağını belirtir. height="94" - 94 piksel yükseklikte olacağını belirtir. scrolling="no" - Kaydırma çubuğunu gösterme demek.

~Cømeßâck~ · 8 Eyl 2012

Tablolarla Çalışmak Bir HTML dosyasında tablo oluşturmak için 3 temel kodu bilmemiz yeterli: Kod Anlamı <table> Tabloya başlamak. <tr> Satıra başlamak. <td> Sütuna başlamak. HTML Kodu <table> <tr> <td>satır 1, sütun 1</td>
<td>satır 1, sütun 2</td> </tr>
<tr> <td>satır 2, sütun 1</td>
<td>satır 2, sütun 2</td> </tr> </table> HTML Görünümü satır 1, sütun 1 satır 1, sütun 2 satır 2, sütun 1 satır 2, sütun 2 Burada dikkat edilmesi gereken birkaç nokta var. Birincisi mutlaka satırlardaki sütun sayıları eşit olmalıdır. Eğer iki sütunu birleştireceksek colspan="" ya da iki satırı birleştireceksek rowspan="" özelliğini td kodu içerisinde kullanarak tırnak işareti arasına kaç sütun ya da satır birleştiğini yazmamız gereklidir. HTML Kodu <table border="1"> <tr> <td colspan="2">satır 1, sütun 1 ve 2 birleşti</td> </tr>
<tr> <td rowspan="2">satır 2 ve 3 birleşti, sütun 1</td>
<td>satır 2, sütun 2</td> </tr>
<tr> <td>satır 3, sütun 2</td> </tr> </table> HTML Görünümü satır 1, sütun 1 ve 2 birleşti satır 2 ve 3 birleşti, sütun 1 satır 2, sütun 2 satır 3, sütun 2 Dikkat edilirse rowspan="2" kullandığımız satırdan sonra sadece tek sütun kullandık. Bu da satır 3, sütun 2'yi oluşturdu. Bu sayılarda yapacağınız yanlışlık tabloda görünümde sorunlar çıkaracaktır. Tablo Özellikleri Özellik Anlamı border="0" Tablo kenarlığı boyutu. cellspacing="0" Sütunlar arası kenarlık boşluğu. cellpadding="0" Satırlar arası kenarlık boşluğu. width="genislik" Tablo genişliği. Piksel ya da yüzde olarak ifade edilebilir. class="stil" Tablo stili belirtilebilir (CSS bölümünde açıklanıyor). TD (Sütun) Özellikleri Özellik Anlamı align="hiza" Kutu hizası, left, right, center kullanılabilir. width="genislik" Tablo genişliği. Piksel ya da yüzde olarak ifade edilebilir. height="yukseklik" Tablo yüksekliği. Piksel ya da yüzde olarak ifade edilebilir. class="stil" Tablo stili belirtilebilir (CSS bölümünde açıklanıyor). NOT: Eğer bir sütuna hiçbir şey yazmadan boş bırakırsak sütun görünmeyecektir. Bu sorunu çözmek için kullanarak kutuda boşluk karakterine yer verirseniz kenarlıkların göründüğünü göreceksiniz.

~Cømeßâck~ · 8 Eyl 2012

Listeleme Bu dersimizde 3 tür listeleme şeklini ve komutlarını öğreneceğiz. Bunlar Madde İşaretleri, Numaralandırma ve Kategorileme. Madde İşaretleri Klasik listeleme şeklidir. Liste <ul> ile başlar ve </ul> ile biter. Arasına ise <li></li> arasına alınacak şekilde maddeler yerleştirilir: HTML Kodu <ul> <li>Çay</li>
<li>Kahve</li>
<li>Kola</li> </ul> HTML Görünümü Çay Kahve Kola NOT: Sadece <li></li> kullanarak da listeme yapılabilir. Fakat bu şekilde kullanılırsa maddeler hemen satır başlangıcında görünecektir. Numaralandırma Eklenen nesneleri numaralandırarak sıralar. Bir öncekinden farklı olarak liste <ol> ile başlar ve </ol> ile biter. Arasına ise <li></li> arasına alınacak şekilde maddeler yerleştirilir: HTML Kodu <ol> <li>Çay</li>
<li>Kahve</li>
<li>Kola</li> </ol> HTML Görünümü 1. Çay 2. Kahve 3. Kola Kategori Şekilde Listeleme Bu şekilde bir listeleme kullanarak maddelerin altına açıklama yazılabilir. Liste <dl> ile başlar ve </dl> ile biter. Arasına ise 1. dereceden yakın <dt></dt>, 2. dereceden yakın <dd></dd> kullanılarak arasına sıralanacak nesneler alınır. HTML Kodu <dl> <dt>Kahve</dt> <dd>Kahverengidir</dd>
<dd>Sıcaktır</dd> <dt>Süt</dt> <dd>Beyazdır</dd> </dl> HTML Görünümü Kahve Kahverengidir
Sıcaktır Süt Beyazdır

~Cømeßâck~ · 8 Eyl 2012

Form Nesneleri Formları site ziyaretçileri ya da kullanıcılarından bilgi alma amaçlı kullanırız. Onlardan düz metin, şifre ve seçim kutuları gibi nesneler oluşturarak bilgiler alırız. Bir form alanı <form> ile başlar ve </form> ile biter. Öncelikle bilgi amaçlı yerleştireceğimiz form nesnelerini tanıyalım. Yazı Alanları ve Form Gönderme Bu bölümde kısa metinler, uzun metinler ve şifre kutularını tanıyacağız. HTML Kodu <form name="form" action="index.asp" method="post"> <b>Kullanıcı Adı:</b><br />
<input type="text" name="isim" size="24"><br /><br />
<b>Şifre:</b><br />
<input type="password" name="sifre" size="16"><br /><br />
<input type="submit" name="gonder" value="Gönder"><br /><br /> </form> HTML Görünümü Kullanıcı Adı: Şifre: Gönder name="isim" - Form için bir isim belirleyin, bu isim bilgileri değerlendirirken yardımcı olur. action="dosya" - Formdan alınan bilgiler hangi dosyaya gönderilecek yazılır. method="post" - Hangi yöntemle formun teslim edileceği. POST olursa bilgiler görünmez, GET olursa form nesnelerine göre dinamik şekilde adreste görünür. type="tür" - Nesnenin türü, yukarıda text ile düz metin, password ile şifre kutusu, submit ile formu gönderme butonu olduğunu belirttik. size="boyut" - Nesnenin uzunluğu sadece type değeri text ya da password ise geçerlidir. name="isim" - Forma isim verdiğimiz gibi nesnelere de isim vermeliyiz. Bilgileri gönderdiğimiz dosyadan veriyi alırken buradaki isimden yola çıkarız. value="deger" - Metin kutusunda ya da butonda yazacak yazıyı buradan belirleriz. Görüldüğü üzere type="" bize form nesnesini şekillendirme şansı veriyor. Bazı durumlarda kullanıcıdan uzun bilgi almamız gerekebilir. Bu durumda <textarea></textarea> kodunu kullanarak metin kutusu yapabiliriz. HTML Kodu <form name="form" action="index.asp" method="post"> <b>Yorumunuzu Yazın:</b><br />
<textarea cols="40" rows="4">Yorum Kutusu</textarea><br /><br /> </form> HTML Görünümü Yorumunuzu Yazın: cols="sutun sayısı" Sütun sayısı. rows="satır sayısı" Satır sayısı. Seçim Kutuları Yine <input> komutu ile tür bölümüne radio yazarak çoktan seçmeli bir form nesnesi oluşturulabilir: HTML Kodu <input type="radio" name="cinsiyet" value="erkek"> Erkek <br />
<input type="radio" name="cinsiyet" value="kiz"> Kız <br /> HTML Görünümü Erkek Kız NOT: Sadece bir seçim yapılabilmesi için mutlaka ilgili seçeneklerdename="" değeri aynı olmalıdır. Eğer birden fazla nesne seçebilmelerini sağlayacaksak bu kezcheckbox türünden yararlanırız. HTML Kodu <input type="checkbox" name="araba_var" value="araba"> Arabam var. <br />
<input type="checkbox" name="ev_var" value="ev"> Evim var. <br /> HTML Görünümü Arabam var. Evim var. Açılır Seçim Kutusu Seçim kutusu eklemenin diğer bir yolu da <select> kodudur. Bunun kullanımı aşağıdaki gibidir. HTML Kodu <select name="renk"> <option value="beyaz">Beyaz</option>
<option value="beyaz">Kırmızı</option>
<option value="beyaz">Siyah</option> </select> HTML Görünümü Örnekte value="" ile belirtilen değer form için bilgi, option kodları arasına yazdığımız renk adları ise seçim kutusunda görünenlerdir. Bu nesnemizin adını select komutunun içinde name="renk" şeklinde belirledik.

~Cømeßâck~ · 8 Eyl 2012

Resim icin

<a href="#"><img src="html.jpg" alt="Örnek Resim" border="0"></a>

~Cømeßâck~ · 8 Eyl 2012

Arkaplan Kullanmak Daha önceden HTML belgesinin klasik bir formatı olduğunu ve bunun dışına çıkılmaması gerektiğini söylemiştik. Bahsettiğimiz kodlar
arasında<body>'ye ekleyeceğinizbgcolor="" özelliği ile html belgesinin arkaplan rengini belirleyebilirsiniz: Bu özellik içerisine yazılan renk kodları ingilizce, 16'lık ya da RGB değerlerinde belirtilmelidir. Bunlara bir resim editörü yardımıyla ulaşabilirsiniz (Photoshop tarzı). HTML Kodu <body bgcolor="black">
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)"> Eğer arkaplanda bir resim kullanacaksak bu kez aynı kod içinbackground="resim" şeklinde bir özellik kullanıyoruz. HTML Kodu <body background="arkaplan.jpg"> Burada belirtilen resim arkaplanda döşeli olarak çıkacaktır. Bu iki özelliği aynı zamanda Tablo sütunları ve DIV layerlar gibi birçok alanda kullanabilirsini

~Cømeßâck~ · 8 Eyl 2012

CSS (Stil) Dosyaları Hazır stil şablonları oluşturduğumuz ve bundan yararlandığımız stil dosyaları ya da HTML belgemizin stil bölümü belge içerisinde ya da başka bir dosyaya bağlantı vererek şu şekilde kullanılır: Belge içinde: HTML Kodu <style type="text/css" rel="stylesheet">

</style> Bir not defteri yardımıyla stilleri belirlediğimiz (bu dosyada HTML kodları kullanılmaz) dosyaya bağlantı vererek stilleri tanıtmak için: HTML Kodu <link href="stil_dosyasi.css" type="text/css" rel="stylesheet" /> Her iki yolla da stillerimizi tanıtmamız mümkün. Fakat HTML belgemizin boyutunun şişmemesi için ayrı bir dosyaya yazıp LINK komutu ile çekmek daha iyi olacaktır. Stil Belirlemek Stil belirlemek için formatımız " .stiladı { stiller; } " şeklindedir. Stil adından önce kullandığımız nokta ilgili tüm class tanımlamaları için geçerli olduğunu anlatır. Başına HTML kodunu alarak sadece o nesneye özel yapabilme şansımız var. Örnekleri inceleyelim: HTML Kodu .stilim { font: 12pt Tahoma, Verdana;
color: #FF0000; } td.stilim { width: 100px;
font: 10pt Tahoma, Verdana;
color: #000000; } Tüm ilgili nesneler için (mesela tüm textarea - metin kutuları için) özellik belirmek istersek bu kez nokta kullanmadan kodu küçük harfle yazar ve özellikleri belirtiriz: HTML Kodu body { background-color: #EFEFEF;
font: 8pt Tahoma, Verdana;
color: #000000; } td { font: 10pt Tahoma, Verdana;
color: #FF0000; } Dikkat edildiyse stil özelliği belirlerken " ozellik: deger; " şeklinde yazıyoruz. Nesnenin desteklediği özelliğe göre bunları kullanabiliriz. Bunlardan en önemlileri ve ne işe yaradıklarını aşağıdaki tabloda görebilirsiniz: Arkaplan ile İlgili Özellikler Özellik Açıklama background-color:
renk; Arkaplan rengini belirleriz. background-
image: url
('dosya'); Arkaplan resmi belirleriz. background-
repeat: tekrar; Arkaplanın tekrar edilip edilmeyeceği. Bu değer no-
repeat ise tekrar yok, repeat-x ise sağa tekrarlı, repeat-
y ise aşağı tekrarlı, repeat ise tekrarlı anlamlar ifade
eder. background: renk
url('dosya')
tekrar; Yukarıdaki css kodlarını tek bir komutta kullandık. Yazı ile İlgili Özellikler Özellik Açıklama font: boyut,
yazıtipleri; Boyut piksel olarak belirtildikten sonra yazıtipleri
sıralanır ve aralara virgül konur. color: renk; Yazı rengini belirleriz. font-weight: bold; Kalın yazmak. font-style: italic; Sağa yatık yazmak. text-align: hiza; Metinleri hizalamak. left sola, right sağa, center
ortalanmış, justify iki yana hizalar. Boyut ile İlgili Özellikler Özellik Açıklama width: deger; Genişliği belirtiriz. height: deger; Yüksekliği belirtiriz. Kenar ile İlgili Özellikler Özellik Açıklama border: boyut; Kenarlık boyutu piksel olarak belirtilir. Kenarlık
kullanmayacaksak 0px olmalıdır. border: boyut
renk durum; Boyutla birlikte kenarlık rengini ve durumu (solid =
normal, dotted = çizgili) belirtilir. Stil Kullanmaya Bir Örnek: Stil dosyamızda belirlediğimiz özellikleri DIV (HTML için bir alan) kodu kullanarak nasıl kullanabiliriz. Aşağıdaki örneği inceleyelim: HTML Kodu <style type="text/css" rel="stylesheet">

</style> <div class="ornek"> Bu belirlediğimiz stille bir yazı... </div> HTML Görünümü Bu belirlediğimiz stille bir yazı... Görüldüğü üzere herhangi bir kodaclass="stiladı" özelliği eklersek, onunla ilgili düzenlemeler gerçekleşmiş oluyor. Burada en basit anlatımıyla anlatılan CSS dosyalarının daha değişik komutları da bulunmakta, fakat başlangıç için en ideali bunları öğrenmektir.

~Cømeßâck~ · 8 Eyl 2012

**** Taglar Daha önceden değişmez bir HTML yapısından bahsetmiştik. HTML Kodu <html>
<head> <title>Sayfa Başlığı</title>
(**** etiketler, scriptler, RSS yolları ve CSS dosyası) </head>
<body> (Diğer tüm elementler ve düz metin) </body>
</html> Şimdi buradaki <head></head> arasında olması gereken nesnelerden en önemlilerini tanıyalım. Burası HTML dosyamız hakkında tarayıcı (browser, kullanıcı) ve arama motorlarına bilgi verdiğimiz kısımdır. Ne tür bilgiler veririz? Sayfa Başlığı <head> etiketinden hemen sonra gelmelidir. <title>Sayfa Başlığı</title> şeklinde kullanılır. Burası tarayıcının en üstünde görünecek kısımdır (aynı zamanda görev çubuğunda).. **** - Dil Kodlaması Sayfa başlığından sonra ilk ****'mız dil kodlaması üzerinedir. Sayfanın hangi dil ile kodlandığını bu bölüm yardımıyla tanıtırız. Örneğin sitemiz Türkçe yazılmış ve Türkçe karakterler içermekteyse şu etiket eklenmeli: HTML Kodu <**** http-equiv="Content-Type" content="text/html; charset=windows-1254"> Buna bağlı her ülke ve dil için ayrı charset değeri vardır. **** - Arama Motorları İçin Site Detayları Keywords isimli **** için arama motorlarına sitenin hangi anahtar kelimeleri içerdiğini yazabilir, Description kısmıyla ise siteniz hakkında bir cümlelik açıklama yazabilirsiniz. HTML Kodu <**** name="Keywords" content="html dersleri, html, html dili">
<**** name="Description" content="HTML dili üzerine makaleler ve HTML dersleri.">

~Cømeßâck~ · 8 Eyl 2012

Script olarak bahsettiğimiz şey aslında genellikle tarayıcı tabanlı küçük uygulamalardır. Genellikle HEAD (bilgiler) bölümünde yer verildiği gibi BODY bölümünde de kullanılabilir. İki çeşit ekleme yolu vardır. HTML belgemizin içerisinde javascript kodlarına yer verebiliriz. Bunun için: HTML Kodu <script type="text/javascript" language="JavaScript">

</script> Kodların HTML belgesinde durması, dosya boyutunu arttırdığı gibi fazla kullanışlı değildir. Bu nedenle javascript kodlarımızı bir metin belgesine yazıp sonunu js bitecek şekilde kaydedip aşağıdaki şekilde src="" özelliğinde yolu belirterek eklememiz mümkün: HTML Kodu <script type="text/javascript" language="JavaScript" src="dosyam.js"></script>

~Cømeßâck~ · 8 Eyl 2012

Tüm HTML Tagları HTML programlama dilinde kullanılan tüm kodlar aşağıda listelenmiştir: Kod Açıklama XHTML  Açıklama eklemek. Var <!DOCTYPE> Dosya türünü yazmak. Var <a> Bağlantı vermek. Var <abbr> Kısaltma. Var <acronym> Kısaltmayı açıklamak. Var <address> Adres vermek. Var <area> Resim üzerinde alan belirtmek. Var <b> Kalın yazmak. Var <base> Tüm bağlantılar için ana yolu bildirme. Var <bdo> Yazı yönünü bildirme. Var <big> Büyük yazmak. Var <blockquote> Alıntı yapmak. Var <body> İçeriğe başlangıcı bildirmek. Var <br> Satır atlamak. Var <button> Buton eklemek. Var <caption> Tablo başlığı belirtme. Var <center> Hizayı ortalar. Yok <cite> Alıntı yapmak. Var <code> Bilgisayar kodu şeklinde yazmak. Var <col> Tablo sütununu belirtme. Var <colgroup> Tablo sütun gruplarını belirtme. Var <dd> Açıklama eklemek. Var <del> Üstü çizili yazı yazmak. Var <div> Dosyada alan belirtme. Var <dfn> Bir terim açıklamak. Var <dl> Terimler listesi. Var <dt> Terim açıklamak. Var <em> Vurgulu yazı. Var <fieldset> Alan belirleme. Var <form> Form kullanma. Var <frame> Alt pencere açmak (frame) Var <frameset> Alt pencereleri tanımlamaya başlamak. Var <h1> to <h6> Başlık (1-6 arası) Var <head> Dosya bilgilerini açıklama bölümü. Var <hr> Yatay çizgi çekmek. Var <html> HTML'ye başlamak. Var <i> Sağa yatık yazmak. Var <img> Resim eklemek. Var <input> Form nesnesi eklemek. Var <ins> Vurgu yapmak. Var <kbd> Kelime yazdırma. Var <label> Etiket belirleme. Var <legend> Bir alan için başlık belirleme. Var <li> Listeleme. Var <link> Dosyaya bağlantı verme. Var <map> Resim tanımlama. Var <****> Dosya bilgisi tanımlama. Var <noscript> Script desteği yoksa yapılacaklar. Var <object> Bir obje ekleme (flash vs.) Var <ol> Numaralandırılmış liste ekleme. Var <optgroup> Seçim grubu. Var <option> Sürükle-bırak seçim listesi. Var <p> Paragraf. Var <param> Parametre bildirme. Var <pre> Formatlı yazı ekleme. Var <q> Küçük alıntılar için. Var <samp> Bilgisayar yazı tipi kullanma. Var ********** Script tanımlama. Var <select> Seçim kutusu tanımlama. Var <small> Küçük yazma. Var <span> Bir alan tanımlaması. Var <strong> Vurgu yapmak. Var ********* Stil belirleme. Var <sub> Normalden aşağı yazı. Var <sup> Üs yazmak. Var <table> Tabloya başlamak. Var <tbody> Tablo başlangıcı. Var <td> Sütun belirleme. Var <textarea> Metin kutusu. Var <tfoot> Tablo altlığı. Var <th> Tablo başlığı. Var <thead> Tablo başlığı. Var <title> HTML Dosyası başlığı. Var <tr> Satır belirleme (tablo). Var <tt> TT Yazı. Var <ul> Madde işaretli liste. Var <var> Değer. Var <xmp> PRE komutunun aynısı. Yok

~Cømeßâck~ · 8 Eyl 2012

Tüm Fonksiyonlar Bazı HTML tagları script dili ile anlatılan olaylara izin verirler. Bunların ne anlama geldiğini şimdi görelim: Pencere Olayları Bunlar BODY ve FRAMESET taglarında kullanılır: Özellik Açıklama onload Sayfa yüklenirken yapılacaklar. unload Sayfa kapatılırken yapılacaklar. Bir Örnek. Aşağıda yazdığımız kısım sayfa yüklenirken Merhaba! diyen bir iletişim kutusu çıkmasını sağlayacaktır. HTML Kodu <body onload="alert('Merhaba!');"> Form Nesneleri Olayları Bunlar INPUT taglarında kullanılır: Özellik Açıklama onchange Metin değiştirilirse yapılacaklar.. onsubmit Form gönderilirken yapılacaklar.. onreset Form temizlenince yapılacaklar.. onselect Metin seçilirken yapılacaklar.. onclick Tıklandığında yapılacaklar. Bir Örnek. Eğer butona basarsanız geri dönersiniz. HTML Kodu <input type="button" value="Geri Dön" onclick="javascript: history.back();"> HTML Görünümü Geri Dön Derslerimiz burada bitiyor. Umarım sizler için yararlı bir kaynak olmuştur. Eksik olduğunuz noktalarda alıştırmalar yaparak kendinizi daha da geliştirebilirsiniz. Kolay gelsin...

~Cømeßâck~ · 8 Eyl 2012

Dersler bitmistir tesekkur eksik etmeyiniz dokumani yazdim guzelce ama burda paylasirken bosluklar falan biraz sorun oldu...

~Cømeßâck~ · 8 Eyl 2012

//guncel

Tam Anlamiyla HTML nedir kodlari nasil yapilir

Katılımcı Üye

Katılımcı Üye

Katılımcı Üye

Katılımcı Üye

Katılımcı Üye

Katılımcı Üye

Katılımcı Üye

Katılımcı Üye

Katılımcı Üye

Katılımcı Üye

Katılımcı Üye

Katılımcı Üye

Katılımcı Üye

Katılımcı Üye

Katılımcı Üye

Katılımcı Üye

Katılımcı Üye

Katılımcı Üye

Katılımcı Üye

Katılımcı Üye